@adyen/bento-vue2 1.78.2 → 1.79.0

package/dist/chunks/{tag.BltIbSh3.js.map → tag.BdCP2CN_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tag.BltIbSh3.js","sources":["../../src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <div v-if=\"hasTextContent && hasSlot('icon')\" class=\"b-tag__icon\" role=\"presentation\">\n            <slot name=\"icon\"></slot>\n        </div>\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { type BentoTagProps, BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default')));\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","hasSlot","name","hasTextContent","computed","props","getSlotText","computedAriaLabel","useAriaLabel","tagConditionalClasses","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC2CR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBAhCAC,IAAAC,EAAA,GAIAC,IAAA,CAAAC,MAAA,CAAA,CAAAH,EAAAG,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAA,EAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,EAAA,GAEAQ,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBU,IAAAL,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAC,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCK,IAAAN,EAAA,MAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,KAAA,KAAA,GACAY,IAAAP,EAAA,MAAAC,EAAA,YAAAK,EAAA,MAAA,SAAAL,EAAA,QAAA,GAEAO,IAAAR,EAAA,MACIC,EAAA,YAIAM,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAL,EAAA,QAAA,CAAA,QAHIK,EAAA,KAGgG;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tag.BdCP2CN_.js","sources":["../../src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <div v-if=\"hasTextContent && hasSlot('icon')\" class=\"b-tag__icon\" role=\"presentation\">\n            <slot name=\"icon\"></slot>\n        </div>\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { type BentoTagProps, BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default')));\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","hasSlot","name","hasTextContent","computed","props","getSlotText","computedAriaLabel","useAriaLabel","tagConditionalClasses","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC2CR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBAhCAC,IAAAC,EAAA,GAIAC,IAAA,CAAAC,MAAA,CAAA,CAAAH,EAAAG,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAA,EAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,EAAA,GAEAQ,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBU,IAAAL,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAC,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCK,IAAAN,EAAA,MAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,KAAA,KAAA,GACAY,IAAAP,EAAA,MAAAC,EAAA,YAAAK,EAAA,MAAA,SAAAL,EAAA,QAAA,GAEAO,IAAAR,EAAA,MACIC,EAAA,YAIAM,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAL,EAAA,QAAA,CAAA,QAHIK,EAAA,KAGgG;;;;;;;;;;;;;;;;"}

package/dist/chunks/teleport.dQFcCuAw.js

@@ -0,0 +1,128 @@
+import { defineComponent as o, inject as i } from "vue";
+import { i as n } from "./index.Cl4_42j5.js";
+import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/teleport.css";
+const h = /* @__PURE__ */ Symbol("modal injection key"), c = /* @__PURE__ */ Symbol("sidepanel children element injection key"), b = /* @__PURE__ */ Symbol("modal fullscreen children element injection key"), f = o({
+  name: "teleport",
+  props: {
+    to: {
+      type: String,
+      default: ""
+    },
+    where: {
+      type: String,
+      default: "after"
+    },
+    disabled: Boolean
+  },
+  data: () => ({
+    childObserver: null,
+    nodes: [],
+    waiting: !1,
+    observer: null,
+    parent: null,
+    isVue2: n
+  }),
+  computed: {
+    classes() {
+      return this.disabled ? ["b-teleport"] : ["b-teleport", "b-teleport--hidden"];
+    },
+    defaultTo() {
+      if (this.to)
+        return this.to;
+      const e = i(h, "") || i(b, "") || i(c, "");
+      return e ? `#${e}` : "body";
+    }
+  },
+  watch: {
+    to: "maybeMove",
+    where: "maybeMove",
+    disabled(e) {
+      e ? (this.disable(), this.$nextTick(() => {
+        this.teardownObserver();
+      })) : (this.bootObserver(), this.move());
+    }
+  },
+  mounted() {
+    this.nodes = Array.from(this.$el.childNodes), this.disabled || this.bootObserver(), this.maybeMove();
+  },
+  beforeDestroy() {
+    this.nodes = this.getComponentChildrenNode(), this.disable(), this.teardownObserver();
+  },
+  methods: {
+    // Using a fragment is faster because it'll trigger only a single reflow
+    // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+    getFragment() {
+      const e = document.createDocumentFragment();
+      return this.nodes.forEach((t) => e.appendChild(t)), e;
+    },
+    disable() {
+      this.$el.appendChild(this.getFragment()), this.parent = null;
+    },
+    move() {
+      if (this.waiting = !1, this.parent = document.querySelector(this.defaultTo), !this.parent) {
+        this.disable(), this.waiting = !0;
+        return;
+      }
+      this.where === "before" ? this.parent.prepend(this.getFragment()) : this.parent.appendChild(this.getFragment());
+    },
+    maybeMove() {
+      this.disabled || this.move();
+    },
+    onMutations(e) {
+      let t = !1;
+      for (let s = 0; s < e.length; s++) {
+        const r = e[s], a = Array.from(r.addedNodes).filter(
+          (l) => !this.nodes.includes(l)
+        );
+        Array.from(r.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && a.length > 0 && (t = !0);
+      }
+      t && this.move();
+    },
+    bootObserver() {
+      this.observer || (this.observer = new MutationObserver((e) => this.onMutations(e)), this.observer.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !1,
+        characterData: !1
+      }), !this.childObserver && (this.childObserver = new MutationObserver((e) => {
+        e.find((s) => s.target === this.$el) && (this.nodes.forEach((s) => s.parentNode && s.parentNode.removeChild(s)), this.nodes = this.getComponentChildrenNode(), this.maybeMove());
+      }), this.childObserver.observe(this.$el, {
+        childList: !0,
+        subtree: !1,
+        attributes: !1,
+        characterData: !1
+      })));
+    },
+    teardownObserver() {
+      this.observer && (this.observer.disconnect(), this.observer = null), this.childObserver && (this.childObserver.disconnect(), this.childObserver = null);
+    },
+    getComponentChildrenNode() {
+      return this.$vnode.componentOptions.children.map((e) => e.elm).filter((e) => e);
+    }
+  }
+}), u = /* @__PURE__ */ o({
+  ...f,
+  setup(e) {
+    return { __sfc: !0, isVue2: n };
+  }
+});
+var m = function() {
+  var t = this, s = t._self._c, r = t._self._setupProxy;
+  return r.isVue2 ? s("div", { class: t.classes }, [t._t("default")], 2) : s("Teleport", { class: t.classes, attrs: { to: t.defaultTo, where: t.where, disabled: t.disabled } }, [t._t("default")], 2);
+}, p = [], v = /* @__PURE__ */ d(
+  u,
+  m,
+  p,
+  !1,
+  null,
+  "fda08514"
+);
+const y = v.exports;
+export {
+  y as B,
+  b as M,
+  c as S,
+  h as a
+};
+//# sourceMappingURL=teleport.dQFcCuAw.js.map

package/dist/chunks/teleport.dQFcCuAw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport.dQFcCuAw.js","sources":["../../src/components/modal/components/base-modal/base-modal.keys.ts","../../src/components/sidepanel/sidepanel.keys.ts","../../src/components/modal-fullscreen/modal-fullscreen.keys.ts","../../src/components/internal/teleport/teleport.vue"],"sourcesContent":["export const MODAL_DIALOG_ID_INJECTION_KEY = Symbol('modal injection key');\n","export const SIDEPANEL_DIALOG_ID_INJECTION_KEY = Symbol('sidepanel children element injection key');\n","export const MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY = Symbol('modal fullscreen children element injection key');\n","<!-- Taken from: https://github.com/Mechazawa/vue2-teleport/blob/master/src/Teleport.vue -->\n<template>\n    <div v-if=\"isVue2\" :class=\"classes\">\n        <slot />\n    </div>\n    <Teleport v-else :to=\"defaultTo\" :where=\"where\" :disabled=\"disabled\" :class=\"classes\">\n        <slot />\n    </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n    import { isVue2 } from 'vue-demi';\n    import { defineComponent, inject, type PropType } from 'vue';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from '@/components/sidepanel/sidepanel.keys';\n    import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n    import type { BentoTeleportProps } from './teleport.types';\n</script>\n\n<script lang=\"ts\">\n    export default defineComponent({\n        name: 'teleport',\n        props: {\n            to: {\n                type: String as PropType<BentoTeleportProps['to']>,\n                default: '',\n            },\n            where: {\n                type: String,\n                default: 'after',\n            },\n            disabled: Boolean as PropType<BentoTeleportProps['disabled']>,\n        },\n        data: () => ({\n            childObserver: null,\n            nodes: [],\n            waiting: false,\n            observer: null,\n            parent: null,\n            isVue2,\n        }),\n        computed: {\n            classes() {\n                if (this.disabled) {\n                    return ['b-teleport'];\n                }\n\n                return ['b-teleport', 'b-teleport--hidden'];\n            },\n            defaultTo() {\n                if (this.to) {\n                    return this.to;\n                }\n\n                const injectionKey =\n                    inject<string>(MODAL_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(SIDEPANEL_DIALOG_ID_INJECTION_KEY, '');\n\n                const teleportElement = injectionKey ? `#${injectionKey}` : 'body';\n                return teleportElement;\n            },\n        },\n        watch: {\n            to: 'maybeMove',\n            where: 'maybeMove',\n            disabled(value) {\n                if (value) {\n                    this.disable();\n                    // Ensure all event done.\n                    this.$nextTick(() => {\n                        this.teardownObserver();\n                    });\n                } else {\n                    this.bootObserver();\n                    this.move();\n                }\n            },\n        },\n        mounted() {\n            // Store a reference to the nodes\n            this.nodes = Array.from(this.$el.childNodes);\n\n            if (!this.disabled) {\n                this.bootObserver();\n            }\n\n            // Move slot content to target\n            this.maybeMove();\n        },\n        beforeDestroy() {\n            // Fix nodes reference\n            this.nodes = this.getComponentChildrenNode();\n\n            // Move back\n            this.disable();\n\n            // Stop observing\n            this.teardownObserver();\n        },\n        methods: {\n            // Using a fragment is faster because it'll trigger only a single reflow\n            // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment\n            getFragment(): DocumentFragment {\n                const fragment = document.createDocumentFragment();\n\n                this.nodes.forEach(node => fragment.appendChild(node));\n\n                return fragment;\n            },\n            disable() {\n                this.$el.appendChild(this.getFragment());\n                this.parent = null;\n            },\n            move() {\n                this.waiting = false;\n\n                this.parent = document.querySelector(this.defaultTo);\n\n                if (!this.parent) {\n                    this.disable();\n\n                    this.waiting = true;\n\n                    return;\n                }\n\n                if (this.where === 'before') {\n                    this.parent.prepend(this.getFragment());\n                } else {\n                    this.parent.appendChild(this.getFragment());\n                }\n            },\n            maybeMove() {\n                if (!this.disabled) {\n                    this.move();\n                }\n            },\n            onMutations(mutations) {\n                // Makes sure the move operation is only done once\n                let shouldMove = false;\n\n                for (let i = 0; i < mutations.length; i++) {\n                    const mutation = mutations[i];\n                    const filteredAddedNodes = Array.from(mutation.addedNodes).filter(\n                        node => !this.nodes.includes(node)\n                    );\n\n                    if (Array.from(mutation.removedNodes).includes(this.parent)) {\n                        this.disable();\n                        this.waiting = !this.disabled;\n                    } else if (this.waiting && filteredAddedNodes.length > 0) {\n                        shouldMove = true;\n                    }\n                }\n\n                if (shouldMove) {\n                    this.move();\n                }\n            },\n            bootObserver() {\n                if (this.observer) {\n                    return;\n                }\n\n                this.observer = new MutationObserver(mutations => this.onMutations(mutations));\n\n                this.observer.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                    attributes: false,\n                    characterData: false,\n                });\n\n                if (this.childObserver) {\n                    return;\n                }\n                // watch childNodes change\n                this.childObserver = new MutationObserver(mutations => {\n                    const childChangeRecord = mutations.find(i => i.target === this.$el);\n                    if (childChangeRecord) {\n                        // Remove old nodes before update position.\n                        this.nodes.forEach(node => node.parentNode && node.parentNode.removeChild(node));\n                        this.nodes = this.getComponentChildrenNode();\n                        this.maybeMove();\n                    }\n                });\n\n                this.childObserver.observe(this.$el, {\n                    childList: true,\n                    subtree: false,\n                    attributes: false,\n                    characterData: false,\n                });\n            },\n            teardownObserver() {\n                if (this.observer) {\n                    this.observer.disconnect();\n                    this.observer = null;\n                }\n                if (this.childObserver) {\n                    this.childObserver.disconnect();\n                    this.childObserver = null;\n                }\n            },\n            getComponentChildrenNode() {\n                // Vue3\n                if (!isVue2) {\n                    return [];\n                }\n\n                // Trick for Vue3 type checking\n                return (this as any).$vnode.componentOptions.children.map(i => i.elm).filter(i => i);\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./teleport.scss\" />\n"],"names":["MODAL_DIALOG_ID_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","__default__","defineComponent","isVue2","injectionKey","inject","value","fragment","node","mutations","shouldMove","i","mutation","filteredAddedNodes"],"mappings":"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"}

package/dist/chunks/{textarea.CLWZRnAt.js → textarea.DaNiOOJ7.js}

@@ -7,9 +7,9 @@ import { o as w } from "./resize.Bqks3WUm.js";
 import { u as he } from "./aria-label.CaUURpnB.js";
 import { u as ve } from "./index.B6WW_F-J.js";
 import { u as ye } from "./form-field.D_2g7vaP.js";
-import { u as xe } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as xe } from "./use-form-layout-loading.CWbjZiwP.js";
 import { B as ge } from "./es6.MoTTyETW.js";
-import { F as Ce, E as Le } from "./field-label.Auq-Pzho.js";
+import { F as Ce, E as Le } from "./field-label.C3h8Q8Xd.js";
 import { n as Ee } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/textarea.css";
 var p = /* @__PURE__ */ ((l) => (l.CLEARABLE = "clearable", l.DISABLED = "disabled", l.ERROR = "error", l.READONLY = "readonly", l))(p || {}), c = /* @__PURE__ */ ((l) => (l.BLUR = "blur", l.CHANGE = "change", l.CLEAR = "clear", l.ESCAPE_PRESSED = "escape-pressed", l.FOCUS = "focus", l.INPUT = "input", l.UPDATE_MODEL_VALUE = "update:model-value", l.KEYDOWN = "keydown", l.KEYUP = "keyup", l))(c || {});
@@ -170,4 +170,4 @@ const Ve = De.exports;
 export {
   Ve as B
 };
-//# sourceMappingURL=textarea.CLWZRnAt.js.map
+//# sourceMappingURL=textarea.DaNiOOJ7.js.map

package/dist/chunks/{textarea.CLWZRnAt.js.map → textarea.DaNiOOJ7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea.CLWZRnAt.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    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 for usage with properties since version 2.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                    :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 { 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  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(BTextareaInputFocusBorderWidth);\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","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","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.DaNiOOJ7.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    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 for usage with properties since version 2.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                    :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 { 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  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(BTextareaInputFocusBorderWidth);\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","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","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":";;;;;;;;;;;;;;AAYY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SACAA,EAAA,iBAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,qBAAA,sBACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SATQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;GCoWRE,IAAA,WAAAC,EAAA,GAEAC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAAA,EACM,MAAA;AAAA,EACX,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;iBAtRAC,IAAAC,GAAA,GAuBA,EAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,GAAA,UAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAAJ,EAAA,cAAAA,EAAA,KAAA,GACAO,IAAA,IACAC,IAAAJ,EAAAJ,EAAA,UAAA,GAAAO,CAAA,IAAA,GACAE,IAAAL,EAAA,CAAA,GACAM,IAAAN,EAAA,MAAA,GACAO,IAAAP,EAAA,EAAA;AACA,QAAAQ,IAAA,MACAC,IAAA;AAEA,UAAA,EAAA,GAAAC,GAAA,GAAAC,EAAA,IAAAC,GAAA,GAEA,EAAA,YAAAC,EAAA,IAAAC,GAAAC,GAAAnB,GAAA,UAAA,CAAA,GAEA,EAAA,WAAAoB,EAAA,IAAAC,GAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,gBAAAT,IAAAU,IAAAnB,KAAA,gBAAAA,EAAA,UAAA,gBAAAmB,EAAA,WAAA,CAAA,CAAA,MAAAV,EAAAf,EAAA,cAAA,CAAA;AAAA,KAAA,GACA0B,IAAAF,EAAA,MAAA,CAAA1B,EAAA,KAAA,GACA6B,IAAAH;AAAA,MAA6B,MAAAxB,EAAA,kBAAAM,EAAA,MAAA,SAAAN,EAAA;AAAA,IACwC,GAcrE4B,IAAA,MAAA;AACI,UAAAzB,EAAA,OAAA;AACI,cAAA0B,IAAA,KAAA;AAAA,UAAuB1B,EAAA,MAAA,gBAAAI,IAAAA,IAAAJ,EAAA,MAAA,eAAAX,IAAA;AAAA,UAGgDiB,EAAA;AAAA,UACrDF;AAAA,QACd;AAEJ,QAAAC,EAAA,QAAA,GAAAqB,CAAA;AAAA,MAAmC;AAAA,IACvC;AAGJ,IAAAC,EAAAhC,GAAA,MAAA;AACI,MAAA4B,EAAA,QACIE,EAAA,IAEApB,EAAA,QAAAV,EAAA;AAAA,IACJ,CAAA,GAGJgC;AAAA,MAAA,MAAA,CAAA9B,EAAA,OAAAA,EAAA,UAAA;AAAA,MACwC,MAAA;AAEhC,QAAAM,EAAA,QAAAN,EAAA,cAAAA,EAAA;AAAA,MAAgD;AAAA,MACpD,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtB8B;AAAA,MAAA,MAAAxB,EAAA;AAAA,MACwB,YAAA;AAEhB,YAAAoB,EAAA,OAAA;AAII,cADAlB,EAAA,QAAA,GAAAD,CAAA,MACA,CAAAD,EAAA;AACI;AAGJ,gBAAAyB,GAAA,GACAH,EAAA;AAAA,QAAgB;AAAA,MACpB;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAI,IAAAR,EAAA,MAAA,CAAA,CAAAxB,EAAA,gBAAA2B,EAAA,KAAA,GAEAM,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,eAAApC,EAAA,QAAA,EAAA,GAAAY,EAAA;AAAA,IACoB,EAAA,GAG/DkC,IAAAV,EAAA,OAAA;AAAA,MAAgD,CAAA,sBAAApC,EAAA,SAAA,EAAA,GAAAY,EAAA;AAAA,MACuB,CAAA,sBAAAZ,EAAA,QAAA,EAAA,GAAA6B,EAAA;AAAA,MACI,CAAA,sBAAA7B,EAAA,KAAA,EAAA,GAAA4C,EAAA;AAAA,MACD,qCAAAN,EAAA;AAAA,IACf,EAAA,GAG3DS,IAAAX,EAAA,OAAA;AAAA,MAAmD,mCAAA,CAAAxB,EAAA;AAAA,IACH,EAAA,GAGhDoC,IAAAZ,EAAA,OAAA;AAAA,MAAoD,CAAA,2BAAApC,EAAA,KAAA,EAAA,GAAAuC,EAAA;AAAA,IACmC,EAAA,GAGvFU,IAAAb,EAAA,MAAAV,EAAA,wBAAA,EAAA,gBAAAd,EAAA,eAAA,CAAA,CAAA,GAEAsC,IAAAlC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAA2C,GAAA,OAAAC,EAAA,IAAAzC,EAAAC,CAAA,GACAyC,IAAAC,GAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBG,IAAAnB;AAAA,MAAwB,MAAAxB,EAAA,aAAAM,EAAA,SAAA,CAAAN,EAAA,YAAA,CAAAiB,EAAA;AAAA,IAC2D,GAGnF2B,IAAA,MAAA;AACI,MAAAtC,EAAA,QAAA,IACAgB,EAAAhC,EAAA,KAAA,GACA8B,EAAA,EAAA;AAAA,IAAY,GAGhByB,IAAA,CAAAC,MAAA;AACI,MAAAA,EAAA,yBAAA,GAEA,CAAA9C,EAAA,YAAA,CAAAiB,EAAA,UACIX,EAAA,QAAAwC,EAAA,OAAA,OAOA1B,EAAAd,EAAA,KAAA;AAAA,IACJ,GAGJyC,IAAA,MAAA;AACI,MAAA5C,EAAA,MAAA,YAAA,GACAmB,EAAAhC,EAAA,IAAA;AAAA,IAA4B,GAGhC0D,IAAA,MAAA;AACI,MAAA7C,EAAA,MAAA,MAAA,GACAmB,EAAAhC,EAAA,KAAA;AAAA,IAA6B,GAGjC2D,IAAA,MAAA;AACI,MAAA3B,EAAAhC,EAAA,MAAA;AAAA,IAA8B,GAGlC4D,KAAA,MAAA;AACI,MAAA5B,EAAAhC,EAAA,cAAA;AAAA,IAAsC,GAG1C6D,KAAA,CAAAL,MAAA;AACI,MAAAA,EAAA,gBAAA,GACAxB,EAAAhC,EAAA,SAAAwD,CAAA;AAAA,IAAsC,GAG1CM,KAAA,CAAAN,MAAA;AACI,MAAAA,EAAA,gBAAA,GACAxB,EAAAhC,EAAA,OAAAwD,CAAA;AAAA,IAAoC,GAGxCO,KAAA,MAAA;AACI,MAAA1C,EAAA,QAAA;AAAA,IAAuB,GAG3B2C,KAAA,MAAA;AACI,MAAA3C,EAAA,QAAA;AAAA,IAAuB,GAO3B4C,IAAA,CAAAC,IAAA,OAAA;;AAEI,YAAAC,IAAAtD,EAAA,MAAA,MAAA;AAYA,UATAA,EAAA,MAAA,MAAA,WACIQ,EAAA,UACIF,EAAA,QAAA,SAAAN,EAAA,MAAA,MAAA,QAAA,EAAA,IAEJK,EAAA,QAAAL,EAAA,MAAA,MAAA,SAKJqD,KAAA,CAAAC;AACI;AAIJ,YAAAC,MAAAjC,IAAApB,KAAA,gBAAAA,EAAA,UAAA,gBAAAoB,EAAA;AAGA,MAAA,CAAAgC,KAAA,SAAAA,GAAA,EAAA,IAAAC,KACIhD,EAAA,QAAA,SAGAA,EAAA,QAAA+C;AAAA,IACJ,GAGJE,IAAA,MAAA;AACI,MAAAxD,EAAA,MAAA,MAAA;AAAA,IAA4B;AAGhC,WAAAyD,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA,GAGJE,GAAA,MAAA;AACI,MAAAjD,IAAAkD,EAAA3D,EAAA,OAAA,MAAA;AACI,QAAAoD,EAAA,EAAA;AAAA,MAA0B,CAAA,GAG9B1C,IAAAiD,EAAAzD,EAAA,OAAA,MAAA;AACI,QAAAkD,EAAA;AAAA,MAAsB,CAAA,GAG1B7B,EAAA,SACIE,EAAA,GAGJ5B,EAAA,SACI+D;AAAA,QAAA;AAAA,QACI;AAAA;AAAA,QACA;AAAA,MAEA;AAAA,IAER,CAAA,GAGJC,GAAA,MAAA;AACI,MAAApD,KAAA,QAAAA,EAAA,cACAC,KAAA,QAAAA,EAAA;AAAA,IAAsC,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{timeline-item.HbtUj1j_.js → timeline-item.D2HsuNh-.js}

@@ -1,22 +1,22 @@
 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.CLWZRnAt.js";
+import { B as ee } from "./textarea.DaNiOOJ7.js";
 import { u as H } from "./index.B6WW_F-J.js";
-import { B as te } from "./button-actions.B81vY51z.js";
+import { B as te } from "./button-actions.C3cP-anb.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.BltIbSh3.js";
+import { B as se } from "./tag.BdCP2CN_.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";
+import { a as oe, B as re, S as ce } from "./structured-list-item.zoY-ATTu.js";
 /* empty css              */
 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 { 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.B7sxiukN.js";
 import { g as be } from "./getRoundingMethod.C3eaeGLR.js";
 import "../assets/timeline-item.css";
 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 = {
+const q = /* @__PURE__ */ Symbol("timeline register entry injection key"), K = /* @__PURE__ */ Symbol("timeline config obj injection key"), ge = {
   "en-US": {
     addNote: "Add note",
     cancel: "Cancel"
@@ -372,4 +372,4 @@ export {
   J as d,
   We as t
 };
-//# sourceMappingURL=timeline-item.HbtUj1j_.js.map
+//# sourceMappingURL=timeline-item.D2HsuNh-.js.map

package/dist/chunks/{timeline-item.HbtUj1j_.js.map → timeline-item.D2HsuNh-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"timeline-item.HbtUj1j_.js","sources":["../../src/components/timeline/timeline.types.ts","../../src/components/timeline/timeline.keys.ts","../../src/components/timeline/timeline.vue","../../../ui-assets/icons-16/dist/vue/square-small-fill.vue","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/formatDistanceStrict.js","../../src/components/timeline/components/timeline-item/timeline-item.vue"],"sourcesContent":["import { type BentoDateFormat } from '@/components/date/date.types';\nimport { type BentoTag } from '@/components/tag';\nimport { type Ref } from 'vue';\nimport type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\nexport enum BentoTimelineShowMorePlacement {\n    BOTTOM = 'bottom',\n    AFTER_FIRST = 'after-first',\n    BEFORE_LAST = 'before-last',\n}\n\nexport interface BentoTimelineShowMoreObject {\n    limit: number;\n    placement?: BentoTimelineShowMorePlacement;\n}\n\nexport enum BentoTimelineGapUnit {\n    SECOND = 'second',\n    MINUTE = 'minute',\n    HOUR = 'hour',\n    DAY = 'day',\n    MONTH = 'month',\n    YEAR = 'year',\n}\n\nexport interface BentoTimelineGapObject {\n    amount: number;\n    unit: BentoTimelineGapUnit;\n}\n\n/**\n * @deprecated \"variant\" prop was deprecated. Use \"status\" modifier instead.\n */\nexport enum BentoTimelineItemVariant {\n    DEFAULT = 'SquareSmallIcon',\n    SUCCESS = 'CheckedCircleIcon',\n    CRITICAL = 'CrossCircleIcon',\n}\n\nexport enum BentoTimelineStatus {\n    BLACK = 'black',\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n\nexport interface BentoTimelineItemTitle extends RouterLinkProps {\n    /**\n     * Link label.\n     */\n    title: string;\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    external?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    // This has been added to allow users to add HTML and Aria attribute\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [name: string]: any;\n}\n\nexport interface BentoTimelineTimestamp {\n    date: Date | number;\n    format?: BentoDateFormat;\n    value?: string;\n}\n\nexport interface BentoTimelineDataListObject {\n    label: string;\n    value: string;\n}\n\nexport type BentoTimelineDataList = Array<BentoTimelineDataListObject>;\n\nexport type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props'];\n\nexport interface BentoTimelineEntry {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}\n\n/**\n * @deprecated from version 2.0.0.\n */\nexport type BentoTimelineRegisterEntry = (props: {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; index: number; unregisterTimelineEntry: () => void };\n\n/**\n * @private\n */\nexport type BentoInternalTimelineRegisterEntry = (\n    entry: BentoTimelineEntry\n) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; unregisterTimelineEntry: () => void };\n\nexport interface BentoTimelineConfigData {\n    showAll: Ref<boolean>;\n    showMoreIndex: Ref<number>;\n    hiddenItems: Ref<number>;\n    visibleIndexes: Ref<Array<number>>;\n    timegapLimit: Ref<BentoTimelineGapObject>;\n    timelineEntries: Ref<Array<BentoTimelineEntry>>;\n}\n","export const TIMELINE_REGISTER_ENTRY_INJECTION_KEY = Symbol('timeline register entry injection key');\nexport const TIMELINE_CONFIG_INJECTION_KEY = Symbol('timeline config obj injection key');\n","<template>\n    <div class=\"b-timeline\">\n        <div v-if=\"addNote\" class=\"b-timeline__add-note-section\">\n            <bento-button\n                v-if=\"!showAddNoteTextArea\"\n                ref=\"addNoteButtonRef\"\n                variant=\"tertiary\"\n                @click=\"toggleAddNote\"\n                >{{ addNoteLabel }}</bento-button\n            >\n            <div v-if=\"showAddNoteTextArea\">\n                <bento-textarea\n                    ref=\"addNoteTextareaRef\"\n                    :label=\"addNoteLabel\"\n                    :character-limit=\"150\"\n                    resizable=\"vertical\"\n                    @update:model-value=\"updateNoteContent\"\n                />\n                <bento-button-actions\n                    :actions=\"[\n                        { title: addNoteLabel, event: addNoteToTimeline },\n                        { title: cancelLabel, event: toggleAddNote },\n                    ]\"\n                />\n            </div>\n        </div>\n        <ol class=\"b-timeline__items\">\n            <slot />\n        </ol>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, type PropType, provide, ref, type Ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions } from '@/components/button';\n    import { BentoTextarea } from '@/components/textarea';\n    import {\n        type BentoInternalTimelineRegisterEntry,\n        type BentoTimelineConfigData,\n        type BentoTimelineEntry,\n        type BentoTimelineGapObject,\n        type BentoTimelineShowMoreObject,\n        BentoTimelineShowMorePlacement,\n    } from './timeline.types';\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from './timeline.keys';\n    import messages from './messages.json';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimeline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimeline },\n     *     template: `\n     *          <bento-timeline>\n     *              <bento-timeline-item\n     *                  title=\"Milestone 1\"\n     *                  :timestamp=\"{ date: new Date(), value: 'Created at' }\"\n     *                  :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *                  description=\"Milestone description\"\n     *                  :tag=\"{ label: 'Tag'}\"\n     *              />\n     *              <bento-timeline-item\n     *                  title=\"Milestone 2\"\n     *                  :timestamp=\"{\n     *                      date: new Date(),\n     *                      value: 'Created at',\n     *                      format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD\n     *                  }\"\n     *                  description=\"Milestone description\"\n     *                  :data-list=\"[\n     *                      { label: 'Label', value: 'Value' },\n     *                      { label: 'Label', value: 'Value' },\n     *                  ]\"\n     *              />\n     *          </bento-timeline>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-timeline',\n        components: { BentoButton, BentoButtonActions, BentoTextarea },\n        props: {\n            /**\n             * If set to true, gives the possibility to manually add notes to the timeline via a textarea\n             */\n            addNote: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Object that determines the max number of items to show without clicking the show more button\n             * and where in the timeline is the show more button placed\n             */\n            showMore: {\n                type: Object as PropType<BentoTimelineShowMoreObject>,\n                default: null,\n            },\n            /**\n             * Object that determines minimum amount of time for the automatic timegap indicator;\n             * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).\n             * If null, automatic timegap detection will be turned off\n             */\n            timegapLimit: {\n                type: Object as PropType<BentoTimelineGapObject>,\n                default: null,\n            },\n        },\n\n        emits: ['add-timeline-note'],\n\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const addNoteLabel = computed(() => t('addNote') as string);\n            const cancelLabel = computed(() => t('cancel') as string);\n\n            const newNoteContent: Ref<string> = ref();\n            const updateNoteContent = (newTimelineNoteContent: string): void => {\n                newNoteContent.value = newTimelineNoteContent;\n            };\n\n            const addNoteTextareaRef: Ref<InstanceType<typeof BentoTextarea>> = ref(null);\n            const addNoteButtonRef: Ref<InstanceType<typeof BentoButton>> = ref(null);\n            const showAddNoteTextArea = ref(false);\n            const toggleAddNote = async () => {\n                showAddNoteTextArea.value = !showAddNoteTextArea.value;\n\n                await nextTick();\n\n                if (showAddNoteTextArea.value) {\n                    (addNoteTextareaRef.value.$refs.textareaElement as HTMLTextAreaElement)?.focus();\n                } else {\n                    (addNoteButtonRef.value.$el as HTMLButtonElement)?.focus();\n                }\n            };\n            const addNoteToTimeline = () => {\n                emit('add-timeline-note', {\n                    description: newNoteContent.value,\n                    timestamp: { date: new Date() },\n                    type: 'note',\n                });\n                toggleAddNote();\n            };\n\n            const timelineEntries = ref<Array<BentoTimelineEntry>>([]);\n            const hiddenItems = computed(() =>\n                props.showMore && timelineEntries.value.length > props.showMore.limit\n                    ? timelineEntries.value.length - props.showMore.limit\n                    : null\n            );\n            const showAll = ref(false);\n            const { timegapLimit } = toRefs(props);\n\n            const timelineIndexes = computed(() => Array.from(timelineEntries.value.keys()));\n\n            const visibleIndexes = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.BEFORE_LAST) {\n                    return [\n                        ...timelineIndexes.value.slice(0, props.showMore.limit - 1),\n                        timelineIndexes.value[timelineIndexes.value.length - 1],\n                    ];\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.AFTER_FIRST) {\n                    return [timelineIndexes.value[0], ...timelineIndexes.value.slice(-(props.showMore.limit - 1))];\n                }\n\n                return timelineIndexes.value.slice(0, props.showMore.limit);\n            });\n\n            const showMoreIndex = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                switch (props.showMore.placement) {\n                    case BentoTimelineShowMorePlacement.BEFORE_LAST:\n                        return props.showMore.limit - 2;\n                    case BentoTimelineShowMorePlacement.AFTER_FIRST:\n                        return 0;\n                    case BentoTimelineShowMorePlacement.BOTTOM:\n                    default:\n                        return props.showMore.limit - 1;\n                }\n            });\n\n            const sortEntries = () => {\n                // Sorts timeline entries based on date in reverse chronological order (newest first).\n                timelineEntries.value.sort((a, b) => {\n                    return new Date(b.date).getTime() - new Date(a.date).getTime();\n                });\n            };\n\n            const unregisterTimelineEntry = (entryToRemove: BentoTimelineEntry) => () => {\n                const index = timelineEntries.value.indexOf(entryToRemove);\n                // The index can be -1 if the entry has already been removed by a parent re-render.\n                if (index > -1) {\n                    timelineEntries.value.splice(index, 1);\n                }\n            };\n\n            const registerTimelineEntry: BentoInternalTimelineRegisterEntry = entry => {\n                timelineEntries.value.push(entry);\n                return { timelineEntries, unregisterTimelineEntry: unregisterTimelineEntry(entry) };\n            };\n\n            watch(\n                () => timelineEntries.value.length,\n                () => sortEntries()\n            );\n\n            const configData: BentoTimelineConfigData = {\n                showAll,\n                showMoreIndex,\n                hiddenItems,\n                visibleIndexes,\n                timegapLimit,\n                timelineEntries,\n            };\n\n            // provide register timeline entry and config data timeline items\n            provide(TIMELINE_REGISTER_ENTRY_INJECTION_KEY, registerTimelineEntry);\n            provide(TIMELINE_CONFIG_INJECTION_KEY, configData);\n\n            return {\n                addNoteLabel,\n                cancelLabel,\n                toggleAddNote,\n                updateNoteContent,\n                addNoteToTimeline,\n                showAddNoteTextArea,\n\n                // refs\n                addNoteTextareaRef,\n                addNoteButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#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\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","import { defaultLocale } from \"./_lib/defaultLocale.js\";\nimport { getDefaultOptions } from \"./_lib/defaultOptions.js\";\nimport { getRoundingMethod } from \"./_lib/getRoundingMethod.js\";\nimport { getTimezoneOffsetInMilliseconds } from \"./_lib/getTimezoneOffsetInMilliseconds.js\";\nimport { normalizeDates } from \"./_lib/normalizeDates.js\";\nimport { compareAsc } from \"./compareAsc.js\";\nimport {\n  millisecondsInMinute,\n  minutesInDay,\n  minutesInMonth,\n  minutesInYear,\n} from \"./constants.js\";\n\n/**\n * The {@link formatDistanceStrict} function options.\n */\n\n/**\n * The unit used to format the distance in {@link formatDistanceStrict}.\n */\n\n/**\n * @name formatDistanceStrict\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words, using strict units.\n * This is like `formatDistance`, but does not use helpers like 'almost', 'over',\n * 'less than' and the like.\n *\n * | Distance between dates | Result              |\n * |------------------------|---------------------|\n * | 0 ... 59 secs          | [0..59] seconds     |\n * | 1 ... 59 mins          | [1..59] minutes     |\n * | 1 ... 23 hrs           | [1..23] hours       |\n * | 1 ... 29 days          | [1..29] days        |\n * | 1 ... 11 months        | [1..11] months      |\n * | 1 ... N years          | [1..N]  years       |\n *\n * @param laterDate - The date\n * @param earlierDate - The date to compare with\n * @param options - An object with options\n *\n * @returns The distance in words\n *\n * @throws `date` must not be Invalid Date\n * @throws `baseDate` must not be Invalid Date\n * @throws `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\n * @throws `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00?\n * const result = formatDistanceStrict(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0)\n * )\n * //=> '15 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> '1 year ago'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, in minutes?\n * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {\n *   unit: 'minute'\n * })\n * //=> '525600 minutes'\n *\n * @example\n * // What is the distance from 1 January 2015\n * // to 28 January 2015, in months, rounded up?\n * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {\n *   unit: 'month',\n *   roundingMethod: 'ceil'\n * })\n * //=> '1 month'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> '1 jaro'\n */\n\nexport function formatDistanceStrict(laterDate, earlierDate, options) {\n  const defaultOptions = getDefaultOptions();\n  const locale = options?.locale ?? defaultOptions.locale ?? defaultLocale;\n\n  const comparison = compareAsc(laterDate, earlierDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError(\"Invalid time value\");\n  }\n\n  const localizeOptions = Object.assign({}, options, {\n    addSuffix: options?.addSuffix,\n    comparison: comparison,\n  });\n\n  const [laterDate_, earlierDate_] = normalizeDates(\n    options?.in,\n    ...(comparison > 0 ? [earlierDate, laterDate] : [laterDate, earlierDate]),\n  );\n\n  const roundingMethod = getRoundingMethod(options?.roundingMethod ?? \"round\");\n\n  const milliseconds = earlierDate_.getTime() - laterDate_.getTime();\n  const minutes = milliseconds / millisecondsInMinute;\n\n  const timezoneOffset =\n    getTimezoneOffsetInMilliseconds(earlierDate_) -\n    getTimezoneOffsetInMilliseconds(laterDate_);\n\n  // Use DST-normalized difference in minutes for years, months and days;\n  // use regular difference in minutes for hours, minutes and seconds.\n  const dstNormalizedMinutes =\n    (milliseconds - timezoneOffset) / millisecondsInMinute;\n\n  const defaultUnit = options?.unit;\n  let unit;\n  if (!defaultUnit) {\n    if (minutes < 1) {\n      unit = \"second\";\n    } else if (minutes < 60) {\n      unit = \"minute\";\n    } else if (minutes < minutesInDay) {\n      unit = \"hour\";\n    } else if (dstNormalizedMinutes < minutesInMonth) {\n      unit = \"day\";\n    } else if (dstNormalizedMinutes < minutesInYear) {\n      unit = \"month\";\n    } else {\n      unit = \"year\";\n    }\n  } else {\n    unit = defaultUnit;\n  }\n\n  // 0 up to 60 seconds\n  if (unit === \"second\") {\n    const seconds = roundingMethod(milliseconds / 1000);\n    return locale.formatDistance(\"xSeconds\", seconds, localizeOptions);\n\n    // 1 up to 60 mins\n  } else if (unit === \"minute\") {\n    const roundedMinutes = roundingMethod(minutes);\n    return locale.formatDistance(\"xMinutes\", roundedMinutes, localizeOptions);\n\n    // 1 up to 24 hours\n  } else if (unit === \"hour\") {\n    const hours = roundingMethod(minutes / 60);\n    return locale.formatDistance(\"xHours\", hours, localizeOptions);\n\n    // 1 up to 30 days\n  } else if (unit === \"day\") {\n    const days = roundingMethod(dstNormalizedMinutes / minutesInDay);\n    return locale.formatDistance(\"xDays\", days, localizeOptions);\n\n    // 1 up to 12 months\n  } else if (unit === \"month\") {\n    const months = roundingMethod(dstNormalizedMinutes / minutesInMonth);\n    return months === 12 && defaultUnit !== \"month\"\n      ? locale.formatDistance(\"xYears\", 1, localizeOptions)\n      : locale.formatDistance(\"xMonths\", months, localizeOptions);\n\n    // 1 year up to max Date\n  } else {\n    const years = roundingMethod(dstNormalizedMinutes / minutesInYear);\n    return locale.formatDistance(\"xYears\", years, localizeOptions);\n  }\n}\n\n// Fallback for modularized imports:\nexport default formatDistanceStrict;\n","<template>\n    <li v-if=\"isVisible\" class=\"b-timeline-item\" :class=\"conditionalClasses\">\n        <div v-if=\"timegap\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__icon b-timeline-item__icon--timegap\"></div>\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography class=\"b-timeline-item__timegap\" :aria-label=\"timegapAriaLabel\">\n                    {{ timegap }}\n                </bento-typography>\n            </div>\n        </div>\n        <div class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <square-small-icon class=\"b-timeline-item__icon\" :class=\"iconConditionalClasses\" />\n                <div\n                    v-if=\"!isLastItem\"\n                    class=\"b-timeline-item__separator\"\n                    data-testid=\"last-timeline-item-separator\"\n                ></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography\n                    v-if=\"!isNoteType\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    class=\"b-timeline-item__title\"\n                    role=\"heading\"\n                    aria-level=\"2\"\n                >\n                    <bento-link v-if=\"isLinkTitle\" v-bind=\"linkTitleProps\" disable-typography>{{\n                        linkTitleProps.title\n                    }}</bento-link>\n                    <span v-else>{{ title }}</span>\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <bento-typography v-if=\"timestamp\" class=\"b-timeline-item__timestamp\" el=\"div\" variant=\"caption\">\n                    <bento-date :date=\"timestamp.date\" :format=\"timestamp.format\" disable-typography />\n                    {{ timestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && additionalTimestamp\"\n                    class=\"b-timeline-item__timestamp\"\n                    el=\"div\"\n                    variant=\"caption\"\n                >\n                    <bento-date\n                        :date=\"additionalTimestamp.date\"\n                        :format=\"additionalTimestamp.format\"\n                        disable-typography\n                    />\n                    {{ additionalTimestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <div v-if=\"!isNoteType && dataList\" class=\"b-timeline-item__data-list\">\n                    <bento-structured-list>\n                        <bento-structured-list-item\n                            v-for=\"entry in dataList\"\n                            :key=\"generateUid(entry.label)\"\n                            :label=\"entry.label\"\n                        >\n                            <bento-typography variant=\"caption\">{{ entry.value }}</bento-typography>\n                        </bento-structured-list-item>\n                    </bento-structured-list>\n                </div>\n                <bento-tag v-if=\"!isNoteType && tag\" v-bind=\"tag\" class=\"b-timeline-item__tag\" />\n            </div>\n        </div>\n        <div v-if=\"displayShowMoreButton\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-button class=\"b-timeline__show-more\" variant=\"tertiary\" @click=\"showAll = !showAll\">\n                    <template v-if=\"!showAll\">{{ t('showMore', { items: hiddenItems }) }}</template>\n                    <template v-else>{{ t('showLess') }}</template>\n                </bento-button>\n            </div>\n        </div>\n    </li>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, type PropType, provide } from 'vue';\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoDate } from '@/components/date';\n    import { BentoLink } from '@/components/link';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list';\n    import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill';\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { formatDistanceStrict } from 'date-fns/formatDistanceStrict';\n    // Types\n    import {\n        type BentoTimelineConfigData,\n        type BentoTimelineDataList,\n        type BentoTimelineEntry,\n        type BentoTimelineItemTitle,\n        BentoTimelineItemVariant,\n        type BentoTimelineRegisterEntry,\n        BentoTimelineStatus,\n        type BentoTimelineTagProps,\n        type BentoTimelineTimestamp,\n    } from '../../timeline.types';\n    // Keys\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys';\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    /**\n     * BentoTimelineItem renders each event in the Timeline component\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimelineItem },\n     *     template: `\n     *          <bento-timeline-item\n     *              title=\"Milestone\"\n     *              :timestamp=\"{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }\"\n     *              :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *              description=\"Milestone description\"\n     *              :data-list=\"[\n     *                 { label: 'Label', value: 'Value' },\n     *                 { label: 'Label', value: 'Value' },\n     *              ]\"\n     *              :tag=\"{ label: 'Tag'}\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-timeline-item',\n        components: {\n            BentoButton,\n            BentoDate,\n            BentoLink,\n            BentoTag,\n            BentoTypography,\n            BentoStructuredList,\n            BentoStructuredListItem,\n            SquareSmallIcon,\n        },\n        i18n: { messages },\n        props: {\n            /**\n             * Additional timestamp of the event\n             */\n            additionalTimestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                default: null,\n            },\n            /**\n             * Relevant key-value pair data to display in the event\n             */\n            dataList: {\n                type: Array as PropType<BentoTimelineDataList>,\n                default: null,\n            },\n            /**\n             * Description of the event\n             */\n            description: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Modifier that changes the color of the timeline icon\n             * @values blue, black, green, grey, orange, red, yellow\n             */\n            status: {\n                type: String as PropType<`${BentoTimelineStatus}`>,\n                default: 'black',\n                validator: (value: BentoTimelineStatus) => Object.values(BentoTimelineStatus).includes(value),\n            },\n            /**\n             * Tag props that will be passed down to inner tag component\n             */\n            tag: {\n                type: Object as PropType<BentoTimelineTagProps>,\n                default: undefined,\n            },\n            /**\n             * Main timestamp of the event. Used for timegap detection.\n             */\n            timestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                required: true,\n            },\n            /**\n             * Title of the event\n             */\n            title: {\n                type: [Object, String] as PropType<BentoTimelineItemTitle | string>,\n                default: null,\n            },\n            /**\n             * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.\n             * @values milestone, note\n             */\n            type: {\n                type: String,\n                default: 'milestone',\n                validator: (value: string) => ['milestone', 'note'].includes(value),\n            },\n            /**\n             * Variant for the timeline item\n             * @values DEFAULT, SUCCESS, CRITICAL\n             *\n             * @deprecated Use \"status\" prop instead\n             */\n            variant: {\n                type: String as PropType<BentoTimelineItemVariant | `${BentoTimelineItemVariant}`>,\n                default: null,\n                validator: (value: BentoTimelineItemVariant) => Object.values(BentoTimelineItemVariant).includes(value),\n            },\n        },\n        setup(props, { slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isNoteType = computed(() => props.type === 'note');\n\n            // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors\n            const computedStatus = computed(() => {\n                if (props.variant === BentoTimelineItemVariant.CRITICAL) {\n                    return 'red';\n                }\n\n                if (props.variant === BentoTimelineItemVariant.SUCCESS) {\n                    return 'green';\n                }\n\n                return props.status;\n            });\n\n            if (props.variant) {\n                deprecate(\n                    'BentoTimelineItem \"variant\" property',\n                    `Use the BentoTimelineItem \"status\" modifier instead to modify the color of the timeline icon.\n                    <bento-timeline-item status=\"red\" />`,\n                    '2.0.0'\n                );\n            }\n\n            const iconConditionalClasses = computed(() => ({\n                [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value,\n            }));\n            const conditionalClasses = computed(() => ({\n                'b-timeline-item--note': isNoteType.value,\n            }));\n\n            // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp\n            provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true);\n\n            const entry: BentoTimelineEntry = {\n                title: props.title,\n                date: props.timestamp.date,\n            };\n\n            // Register timeline entry to the timeline entries array\n            const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY);\n            const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry);\n\n            // On unmounting timeline item, unregister it from the parent timeline component\n            onUnmounted(() => unregisterTimelineEntry());\n\n            // Get timeline config data from the parent Timeline comp\n            const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData =\n                inject(TIMELINE_CONFIG_INJECTION_KEY);\n\n            const index = computed(() => timelineEntries.value.indexOf(entry));\n\n            const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value);\n            const isVisible = computed(() =>\n                allItemsShowing.value ? true : visibleIndexes.value.includes(index.value)\n            );\n            const isLinkTitle = computed(() => typeof props.title === 'object');\n            const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle);\n            const timegap = computed(() => {\n                if (!timegapLimit.value) {\n                    return null;\n                }\n                const previousDate = timelineEntries.value[index.value - 1]?.date;\n                const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1);\n                if (!previousDate || !isPreviousItemVisible) {\n                    return null;\n                }\n                const { date } = timelineEntries.value[index.value];\n                const timegapInSelectedUnit = parseInt(\n                    formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }),\n                    10\n                );\n                return timegapLimit.value.amount < timegapInSelectedUnit\n                    ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' })\n                    : null;\n            });\n            const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : ''));\n            const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value);\n            const isLastItem = computed(() => {\n                // The index can be -1 before the parent has had a chance to sort the array.\n                return index.value !== -1 && index.value === timelineEntries.value.length - 1;\n            });\n\n            return {\n                // Values\n                isNoteType,\n                iconConditionalClasses,\n                conditionalClasses,\n                displayShowMoreButton,\n                showAll,\n                hiddenItems,\n                isVisible,\n                isLinkTitle,\n                linkTitleProps,\n                timegap,\n                timegapAriaLabel,\n                isLastItem,\n\n                // Methods\n                generateUid,\n                hasSlot: useHasSlot(slots),\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline-item.scss\" />\n"],"names":["BentoTimelineShowMorePlacement","BentoTimelineShowMorePlacement2","BentoTimelineGapUnit","BentoTimelineGapUnit2","BentoTimelineItemVariant","BentoTimelineItemVariant2","BentoTimelineStatus","BentoTimelineStatus2","TIMELINE_REGISTER_ENTRY_INJECTION_KEY","TIMELINE_CONFIG_INJECTION_KEY","_sfc_main$2","defineComponent","messages$1","BentoButton","BentoButtonActions","BentoTextarea","props","emit","t","useI18n","addNoteLabel","computed","cancelLabel","newNoteContent","ref","updateNoteContent","newTimelineNoteContent","addNoteTextareaRef","addNoteButtonRef","showAddNoteTextArea","toggleAddNote","nextTick","_a","_b","addNoteToTimeline","timelineEntries","hiddenItems","showAll","timegapLimit","toRefs","timelineIndexes","visibleIndexes","showMoreIndex","sortEntries","a","b","unregisterTimelineEntry","entryToRemove","index","registerTimelineEntry","entry","watch","configData","provide","uuid","_sfc_main$1","formatDistanceStrict","laterDate","earlierDate","options","defaultOptions","getDefaultOptions","locale","enUS","comparison","compareAsc","localizeOptions","laterDate_","earlierDate_","normalizeDates","roundingMethod","getRoundingMethod","milliseconds","minutes","millisecondsInMinute","timezoneOffset","getTimezoneOffsetInMilliseconds","dstNormalizedMinutes","defaultUnit","unit","minutesInDay","minutesInMonth","minutesInYear","seconds","roundedMinutes","hours","days","months","years","_sfc_main","BentoDate","BentoLink","BentoTag","BentoTypography","BentoStructuredList","BentoStructuredListItem","SquareSmallIcon","messages","value","slots","isNoteType","computedStatus","deprecate","iconConditionalClasses","conditionalClasses","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","inject","onUnmounted","allItemsShowing","isVisible","isLinkTitle","linkTitleProps","timegap","previousDate","isPreviousItemVisible","date","timegapInSelectedUnit","timegapAriaLabel","displayShowMoreButton","isLastItem","generateUid","useHasSlot"],"mappings":"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","x_google_ignoreList":[4]}
+{"version":3,"file":"timeline-item.D2HsuNh-.js","sources":["../../src/components/timeline/timeline.types.ts","../../src/components/timeline/timeline.keys.ts","../../src/components/timeline/timeline.vue","../../../ui-assets/icons-16/dist/vue/square-small-fill.vue","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/formatDistanceStrict.js","../../src/components/timeline/components/timeline-item/timeline-item.vue"],"sourcesContent":["import { type BentoDateFormat } from '@/components/date/date.types';\nimport { type BentoTag } from '@/components/tag';\nimport { type Ref } from 'vue';\nimport type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\nexport enum BentoTimelineShowMorePlacement {\n    BOTTOM = 'bottom',\n    AFTER_FIRST = 'after-first',\n    BEFORE_LAST = 'before-last',\n}\n\nexport interface BentoTimelineShowMoreObject {\n    limit: number;\n    placement?: BentoTimelineShowMorePlacement;\n}\n\nexport enum BentoTimelineGapUnit {\n    SECOND = 'second',\n    MINUTE = 'minute',\n    HOUR = 'hour',\n    DAY = 'day',\n    MONTH = 'month',\n    YEAR = 'year',\n}\n\nexport interface BentoTimelineGapObject {\n    amount: number;\n    unit: BentoTimelineGapUnit;\n}\n\n/**\n * @deprecated \"variant\" prop was deprecated. Use \"status\" modifier instead.\n */\nexport enum BentoTimelineItemVariant {\n    DEFAULT = 'SquareSmallIcon',\n    SUCCESS = 'CheckedCircleIcon',\n    CRITICAL = 'CrossCircleIcon',\n}\n\nexport enum BentoTimelineStatus {\n    BLACK = 'black',\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n\nexport interface BentoTimelineItemTitle extends RouterLinkProps {\n    /**\n     * Link label.\n     */\n    title: string;\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    external?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    // This has been added to allow users to add HTML and Aria attribute\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [name: string]: any;\n}\n\nexport interface BentoTimelineTimestamp {\n    date: Date | number;\n    format?: BentoDateFormat;\n    value?: string;\n}\n\nexport interface BentoTimelineDataListObject {\n    label: string;\n    value: string;\n}\n\nexport type BentoTimelineDataList = Array<BentoTimelineDataListObject>;\n\nexport type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props'];\n\nexport interface BentoTimelineEntry {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}\n\n/**\n * @deprecated from version 2.0.0.\n */\nexport type BentoTimelineRegisterEntry = (props: {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; index: number; unregisterTimelineEntry: () => void };\n\n/**\n * @private\n */\nexport type BentoInternalTimelineRegisterEntry = (\n    entry: BentoTimelineEntry\n) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; unregisterTimelineEntry: () => void };\n\nexport interface BentoTimelineConfigData {\n    showAll: Ref<boolean>;\n    showMoreIndex: Ref<number>;\n    hiddenItems: Ref<number>;\n    visibleIndexes: Ref<Array<number>>;\n    timegapLimit: Ref<BentoTimelineGapObject>;\n    timelineEntries: Ref<Array<BentoTimelineEntry>>;\n}\n","export const TIMELINE_REGISTER_ENTRY_INJECTION_KEY = Symbol('timeline register entry injection key');\nexport const TIMELINE_CONFIG_INJECTION_KEY = Symbol('timeline config obj injection key');\n","<template>\n    <div class=\"b-timeline\">\n        <div v-if=\"addNote\" class=\"b-timeline__add-note-section\">\n            <bento-button\n                v-if=\"!showAddNoteTextArea\"\n                ref=\"addNoteButtonRef\"\n                variant=\"tertiary\"\n                @click=\"toggleAddNote\"\n                >{{ addNoteLabel }}</bento-button\n            >\n            <div v-if=\"showAddNoteTextArea\">\n                <bento-textarea\n                    ref=\"addNoteTextareaRef\"\n                    :label=\"addNoteLabel\"\n                    :character-limit=\"150\"\n                    resizable=\"vertical\"\n                    @update:model-value=\"updateNoteContent\"\n                />\n                <bento-button-actions\n                    :actions=\"[\n                        { title: addNoteLabel, event: addNoteToTimeline },\n                        { title: cancelLabel, event: toggleAddNote },\n                    ]\"\n                />\n            </div>\n        </div>\n        <ol class=\"b-timeline__items\">\n            <slot />\n        </ol>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, type PropType, provide, ref, type Ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions } from '@/components/button';\n    import { BentoTextarea } from '@/components/textarea';\n    import {\n        type BentoInternalTimelineRegisterEntry,\n        type BentoTimelineConfigData,\n        type BentoTimelineEntry,\n        type BentoTimelineGapObject,\n        type BentoTimelineShowMoreObject,\n        BentoTimelineShowMorePlacement,\n    } from './timeline.types';\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from './timeline.keys';\n    import messages from './messages.json';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimeline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimeline },\n     *     template: `\n     *          <bento-timeline>\n     *              <bento-timeline-item\n     *                  title=\"Milestone 1\"\n     *                  :timestamp=\"{ date: new Date(), value: 'Created at' }\"\n     *                  :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *                  description=\"Milestone description\"\n     *                  :tag=\"{ label: 'Tag'}\"\n     *              />\n     *              <bento-timeline-item\n     *                  title=\"Milestone 2\"\n     *                  :timestamp=\"{\n     *                      date: new Date(),\n     *                      value: 'Created at',\n     *                      format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD\n     *                  }\"\n     *                  description=\"Milestone description\"\n     *                  :data-list=\"[\n     *                      { label: 'Label', value: 'Value' },\n     *                      { label: 'Label', value: 'Value' },\n     *                  ]\"\n     *              />\n     *          </bento-timeline>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-timeline',\n        components: { BentoButton, BentoButtonActions, BentoTextarea },\n        props: {\n            /**\n             * If set to true, gives the possibility to manually add notes to the timeline via a textarea\n             */\n            addNote: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Object that determines the max number of items to show without clicking the show more button\n             * and where in the timeline is the show more button placed\n             */\n            showMore: {\n                type: Object as PropType<BentoTimelineShowMoreObject>,\n                default: null,\n            },\n            /**\n             * Object that determines minimum amount of time for the automatic timegap indicator;\n             * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).\n             * If null, automatic timegap detection will be turned off\n             */\n            timegapLimit: {\n                type: Object as PropType<BentoTimelineGapObject>,\n                default: null,\n            },\n        },\n\n        emits: ['add-timeline-note'],\n\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const addNoteLabel = computed(() => t('addNote') as string);\n            const cancelLabel = computed(() => t('cancel') as string);\n\n            const newNoteContent: Ref<string> = ref();\n            const updateNoteContent = (newTimelineNoteContent: string): void => {\n                newNoteContent.value = newTimelineNoteContent;\n            };\n\n            const addNoteTextareaRef: Ref<InstanceType<typeof BentoTextarea>> = ref(null);\n            const addNoteButtonRef: Ref<InstanceType<typeof BentoButton>> = ref(null);\n            const showAddNoteTextArea = ref(false);\n            const toggleAddNote = async () => {\n                showAddNoteTextArea.value = !showAddNoteTextArea.value;\n\n                await nextTick();\n\n                if (showAddNoteTextArea.value) {\n                    (addNoteTextareaRef.value.$refs.textareaElement as HTMLTextAreaElement)?.focus();\n                } else {\n                    (addNoteButtonRef.value.$el as HTMLButtonElement)?.focus();\n                }\n            };\n            const addNoteToTimeline = () => {\n                emit('add-timeline-note', {\n                    description: newNoteContent.value,\n                    timestamp: { date: new Date() },\n                    type: 'note',\n                });\n                toggleAddNote();\n            };\n\n            const timelineEntries = ref<Array<BentoTimelineEntry>>([]);\n            const hiddenItems = computed(() =>\n                props.showMore && timelineEntries.value.length > props.showMore.limit\n                    ? timelineEntries.value.length - props.showMore.limit\n                    : null\n            );\n            const showAll = ref(false);\n            const { timegapLimit } = toRefs(props);\n\n            const timelineIndexes = computed(() => Array.from(timelineEntries.value.keys()));\n\n            const visibleIndexes = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.BEFORE_LAST) {\n                    return [\n                        ...timelineIndexes.value.slice(0, props.showMore.limit - 1),\n                        timelineIndexes.value[timelineIndexes.value.length - 1],\n                    ];\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.AFTER_FIRST) {\n                    return [timelineIndexes.value[0], ...timelineIndexes.value.slice(-(props.showMore.limit - 1))];\n                }\n\n                return timelineIndexes.value.slice(0, props.showMore.limit);\n            });\n\n            const showMoreIndex = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                switch (props.showMore.placement) {\n                    case BentoTimelineShowMorePlacement.BEFORE_LAST:\n                        return props.showMore.limit - 2;\n                    case BentoTimelineShowMorePlacement.AFTER_FIRST:\n                        return 0;\n                    case BentoTimelineShowMorePlacement.BOTTOM:\n                    default:\n                        return props.showMore.limit - 1;\n                }\n            });\n\n            const sortEntries = () => {\n                // Sorts timeline entries based on date in reverse chronological order (newest first).\n                timelineEntries.value.sort((a, b) => {\n                    return new Date(b.date).getTime() - new Date(a.date).getTime();\n                });\n            };\n\n            const unregisterTimelineEntry = (entryToRemove: BentoTimelineEntry) => () => {\n                const index = timelineEntries.value.indexOf(entryToRemove);\n                // The index can be -1 if the entry has already been removed by a parent re-render.\n                if (index > -1) {\n                    timelineEntries.value.splice(index, 1);\n                }\n            };\n\n            const registerTimelineEntry: BentoInternalTimelineRegisterEntry = entry => {\n                timelineEntries.value.push(entry);\n                return { timelineEntries, unregisterTimelineEntry: unregisterTimelineEntry(entry) };\n            };\n\n            watch(\n                () => timelineEntries.value.length,\n                () => sortEntries()\n            );\n\n            const configData: BentoTimelineConfigData = {\n                showAll,\n                showMoreIndex,\n                hiddenItems,\n                visibleIndexes,\n                timegapLimit,\n                timelineEntries,\n            };\n\n            // provide register timeline entry and config data timeline items\n            provide(TIMELINE_REGISTER_ENTRY_INJECTION_KEY, registerTimelineEntry);\n            provide(TIMELINE_CONFIG_INJECTION_KEY, configData);\n\n            return {\n                addNoteLabel,\n                cancelLabel,\n                toggleAddNote,\n                updateNoteContent,\n                addNoteToTimeline,\n                showAddNoteTextArea,\n\n                // refs\n                addNoteTextareaRef,\n                addNoteButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#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\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","import { defaultLocale } from \"./_lib/defaultLocale.js\";\nimport { getDefaultOptions } from \"./_lib/defaultOptions.js\";\nimport { getRoundingMethod } from \"./_lib/getRoundingMethod.js\";\nimport { getTimezoneOffsetInMilliseconds } from \"./_lib/getTimezoneOffsetInMilliseconds.js\";\nimport { normalizeDates } from \"./_lib/normalizeDates.js\";\nimport { compareAsc } from \"./compareAsc.js\";\nimport {\n  millisecondsInMinute,\n  minutesInDay,\n  minutesInMonth,\n  minutesInYear,\n} from \"./constants.js\";\n\n/**\n * The {@link formatDistanceStrict} function options.\n */\n\n/**\n * The unit used to format the distance in {@link formatDistanceStrict}.\n */\n\n/**\n * @name formatDistanceStrict\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words, using strict units.\n * This is like `formatDistance`, but does not use helpers like 'almost', 'over',\n * 'less than' and the like.\n *\n * | Distance between dates | Result              |\n * |------------------------|---------------------|\n * | 0 ... 59 secs          | [0..59] seconds     |\n * | 1 ... 59 mins          | [1..59] minutes     |\n * | 1 ... 23 hrs           | [1..23] hours       |\n * | 1 ... 29 days          | [1..29] days        |\n * | 1 ... 11 months        | [1..11] months      |\n * | 1 ... N years          | [1..N]  years       |\n *\n * @param laterDate - The date\n * @param earlierDate - The date to compare with\n * @param options - An object with options\n *\n * @returns The distance in words\n *\n * @throws `date` must not be Invalid Date\n * @throws `baseDate` must not be Invalid Date\n * @throws `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\n * @throws `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00?\n * const result = formatDistanceStrict(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0)\n * )\n * //=> '15 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> '1 year ago'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, in minutes?\n * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {\n *   unit: 'minute'\n * })\n * //=> '525600 minutes'\n *\n * @example\n * // What is the distance from 1 January 2015\n * // to 28 January 2015, in months, rounded up?\n * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {\n *   unit: 'month',\n *   roundingMethod: 'ceil'\n * })\n * //=> '1 month'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> '1 jaro'\n */\n\nexport function formatDistanceStrict(laterDate, earlierDate, options) {\n  const defaultOptions = getDefaultOptions();\n  const locale = options?.locale ?? defaultOptions.locale ?? defaultLocale;\n\n  const comparison = compareAsc(laterDate, earlierDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError(\"Invalid time value\");\n  }\n\n  const localizeOptions = Object.assign({}, options, {\n    addSuffix: options?.addSuffix,\n    comparison: comparison,\n  });\n\n  const [laterDate_, earlierDate_] = normalizeDates(\n    options?.in,\n    ...(comparison > 0 ? [earlierDate, laterDate] : [laterDate, earlierDate]),\n  );\n\n  const roundingMethod = getRoundingMethod(options?.roundingMethod ?? \"round\");\n\n  const milliseconds = earlierDate_.getTime() - laterDate_.getTime();\n  const minutes = milliseconds / millisecondsInMinute;\n\n  const timezoneOffset =\n    getTimezoneOffsetInMilliseconds(earlierDate_) -\n    getTimezoneOffsetInMilliseconds(laterDate_);\n\n  // Use DST-normalized difference in minutes for years, months and days;\n  // use regular difference in minutes for hours, minutes and seconds.\n  const dstNormalizedMinutes =\n    (milliseconds - timezoneOffset) / millisecondsInMinute;\n\n  const defaultUnit = options?.unit;\n  let unit;\n  if (!defaultUnit) {\n    if (minutes < 1) {\n      unit = \"second\";\n    } else if (minutes < 60) {\n      unit = \"minute\";\n    } else if (minutes < minutesInDay) {\n      unit = \"hour\";\n    } else if (dstNormalizedMinutes < minutesInMonth) {\n      unit = \"day\";\n    } else if (dstNormalizedMinutes < minutesInYear) {\n      unit = \"month\";\n    } else {\n      unit = \"year\";\n    }\n  } else {\n    unit = defaultUnit;\n  }\n\n  // 0 up to 60 seconds\n  if (unit === \"second\") {\n    const seconds = roundingMethod(milliseconds / 1000);\n    return locale.formatDistance(\"xSeconds\", seconds, localizeOptions);\n\n    // 1 up to 60 mins\n  } else if (unit === \"minute\") {\n    const roundedMinutes = roundingMethod(minutes);\n    return locale.formatDistance(\"xMinutes\", roundedMinutes, localizeOptions);\n\n    // 1 up to 24 hours\n  } else if (unit === \"hour\") {\n    const hours = roundingMethod(minutes / 60);\n    return locale.formatDistance(\"xHours\", hours, localizeOptions);\n\n    // 1 up to 30 days\n  } else if (unit === \"day\") {\n    const days = roundingMethod(dstNormalizedMinutes / minutesInDay);\n    return locale.formatDistance(\"xDays\", days, localizeOptions);\n\n    // 1 up to 12 months\n  } else if (unit === \"month\") {\n    const months = roundingMethod(dstNormalizedMinutes / minutesInMonth);\n    return months === 12 && defaultUnit !== \"month\"\n      ? locale.formatDistance(\"xYears\", 1, localizeOptions)\n      : locale.formatDistance(\"xMonths\", months, localizeOptions);\n\n    // 1 year up to max Date\n  } else {\n    const years = roundingMethod(dstNormalizedMinutes / minutesInYear);\n    return locale.formatDistance(\"xYears\", years, localizeOptions);\n  }\n}\n\n// Fallback for modularized imports:\nexport default formatDistanceStrict;\n","<template>\n    <li v-if=\"isVisible\" class=\"b-timeline-item\" :class=\"conditionalClasses\">\n        <div v-if=\"timegap\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__icon b-timeline-item__icon--timegap\"></div>\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography class=\"b-timeline-item__timegap\" :aria-label=\"timegapAriaLabel\">\n                    {{ timegap }}\n                </bento-typography>\n            </div>\n        </div>\n        <div class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <square-small-icon class=\"b-timeline-item__icon\" :class=\"iconConditionalClasses\" />\n                <div\n                    v-if=\"!isLastItem\"\n                    class=\"b-timeline-item__separator\"\n                    data-testid=\"last-timeline-item-separator\"\n                ></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography\n                    v-if=\"!isNoteType\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    class=\"b-timeline-item__title\"\n                    role=\"heading\"\n                    aria-level=\"2\"\n                >\n                    <bento-link v-if=\"isLinkTitle\" v-bind=\"linkTitleProps\" disable-typography>{{\n                        linkTitleProps.title\n                    }}</bento-link>\n                    <span v-else>{{ title }}</span>\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <bento-typography v-if=\"timestamp\" class=\"b-timeline-item__timestamp\" el=\"div\" variant=\"caption\">\n                    <bento-date :date=\"timestamp.date\" :format=\"timestamp.format\" disable-typography />\n                    {{ timestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && additionalTimestamp\"\n                    class=\"b-timeline-item__timestamp\"\n                    el=\"div\"\n                    variant=\"caption\"\n                >\n                    <bento-date\n                        :date=\"additionalTimestamp.date\"\n                        :format=\"additionalTimestamp.format\"\n                        disable-typography\n                    />\n                    {{ additionalTimestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <div v-if=\"!isNoteType && dataList\" class=\"b-timeline-item__data-list\">\n                    <bento-structured-list>\n                        <bento-structured-list-item\n                            v-for=\"entry in dataList\"\n                            :key=\"generateUid(entry.label)\"\n                            :label=\"entry.label\"\n                        >\n                            <bento-typography variant=\"caption\">{{ entry.value }}</bento-typography>\n                        </bento-structured-list-item>\n                    </bento-structured-list>\n                </div>\n                <bento-tag v-if=\"!isNoteType && tag\" v-bind=\"tag\" class=\"b-timeline-item__tag\" />\n            </div>\n        </div>\n        <div v-if=\"displayShowMoreButton\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-button class=\"b-timeline__show-more\" variant=\"tertiary\" @click=\"showAll = !showAll\">\n                    <template v-if=\"!showAll\">{{ t('showMore', { items: hiddenItems }) }}</template>\n                    <template v-else>{{ t('showLess') }}</template>\n                </bento-button>\n            </div>\n        </div>\n    </li>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, type PropType, provide } from 'vue';\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoDate } from '@/components/date';\n    import { BentoLink } from '@/components/link';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list';\n    import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill';\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { formatDistanceStrict } from 'date-fns/formatDistanceStrict';\n    // Types\n    import {\n        type BentoTimelineConfigData,\n        type BentoTimelineDataList,\n        type BentoTimelineEntry,\n        type BentoTimelineItemTitle,\n        BentoTimelineItemVariant,\n        type BentoTimelineRegisterEntry,\n        BentoTimelineStatus,\n        type BentoTimelineTagProps,\n        type BentoTimelineTimestamp,\n    } from '../../timeline.types';\n    // Keys\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys';\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    /**\n     * BentoTimelineItem renders each event in the Timeline component\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimelineItem },\n     *     template: `\n     *          <bento-timeline-item\n     *              title=\"Milestone\"\n     *              :timestamp=\"{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }\"\n     *              :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *              description=\"Milestone description\"\n     *              :data-list=\"[\n     *                 { label: 'Label', value: 'Value' },\n     *                 { label: 'Label', value: 'Value' },\n     *              ]\"\n     *              :tag=\"{ label: 'Tag'}\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-timeline-item',\n        components: {\n            BentoButton,\n            BentoDate,\n            BentoLink,\n            BentoTag,\n            BentoTypography,\n            BentoStructuredList,\n            BentoStructuredListItem,\n            SquareSmallIcon,\n        },\n        i18n: { messages },\n        props: {\n            /**\n             * Additional timestamp of the event\n             */\n            additionalTimestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                default: null,\n            },\n            /**\n             * Relevant key-value pair data to display in the event\n             */\n            dataList: {\n                type: Array as PropType<BentoTimelineDataList>,\n                default: null,\n            },\n            /**\n             * Description of the event\n             */\n            description: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Modifier that changes the color of the timeline icon\n             * @values blue, black, green, grey, orange, red, yellow\n             */\n            status: {\n                type: String as PropType<`${BentoTimelineStatus}`>,\n                default: 'black',\n                validator: (value: BentoTimelineStatus) => Object.values(BentoTimelineStatus).includes(value),\n            },\n            /**\n             * Tag props that will be passed down to inner tag component\n             */\n            tag: {\n                type: Object as PropType<BentoTimelineTagProps>,\n                default: undefined,\n            },\n            /**\n             * Main timestamp of the event. Used for timegap detection.\n             */\n            timestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                required: true,\n            },\n            /**\n             * Title of the event\n             */\n            title: {\n                type: [Object, String] as PropType<BentoTimelineItemTitle | string>,\n                default: null,\n            },\n            /**\n             * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.\n             * @values milestone, note\n             */\n            type: {\n                type: String,\n                default: 'milestone',\n                validator: (value: string) => ['milestone', 'note'].includes(value),\n            },\n            /**\n             * Variant for the timeline item\n             * @values DEFAULT, SUCCESS, CRITICAL\n             *\n             * @deprecated Use \"status\" prop instead\n             */\n            variant: {\n                type: String as PropType<BentoTimelineItemVariant | `${BentoTimelineItemVariant}`>,\n                default: null,\n                validator: (value: BentoTimelineItemVariant) => Object.values(BentoTimelineItemVariant).includes(value),\n            },\n        },\n        setup(props, { slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isNoteType = computed(() => props.type === 'note');\n\n            // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors\n            const computedStatus = computed(() => {\n                if (props.variant === BentoTimelineItemVariant.CRITICAL) {\n                    return 'red';\n                }\n\n                if (props.variant === BentoTimelineItemVariant.SUCCESS) {\n                    return 'green';\n                }\n\n                return props.status;\n            });\n\n            if (props.variant) {\n                deprecate(\n                    'BentoTimelineItem \"variant\" property',\n                    `Use the BentoTimelineItem \"status\" modifier instead to modify the color of the timeline icon.\n                    <bento-timeline-item status=\"red\" />`,\n                    '2.0.0'\n                );\n            }\n\n            const iconConditionalClasses = computed(() => ({\n                [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value,\n            }));\n            const conditionalClasses = computed(() => ({\n                'b-timeline-item--note': isNoteType.value,\n            }));\n\n            // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp\n            provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true);\n\n            const entry: BentoTimelineEntry = {\n                title: props.title,\n                date: props.timestamp.date,\n            };\n\n            // Register timeline entry to the timeline entries array\n            const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY);\n            const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry);\n\n            // On unmounting timeline item, unregister it from the parent timeline component\n            onUnmounted(() => unregisterTimelineEntry());\n\n            // Get timeline config data from the parent Timeline comp\n            const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData =\n                inject(TIMELINE_CONFIG_INJECTION_KEY);\n\n            const index = computed(() => timelineEntries.value.indexOf(entry));\n\n            const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value);\n            const isVisible = computed(() =>\n                allItemsShowing.value ? true : visibleIndexes.value.includes(index.value)\n            );\n            const isLinkTitle = computed(() => typeof props.title === 'object');\n            const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle);\n            const timegap = computed(() => {\n                if (!timegapLimit.value) {\n                    return null;\n                }\n                const previousDate = timelineEntries.value[index.value - 1]?.date;\n                const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1);\n                if (!previousDate || !isPreviousItemVisible) {\n                    return null;\n                }\n                const { date } = timelineEntries.value[index.value];\n                const timegapInSelectedUnit = parseInt(\n                    formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }),\n                    10\n                );\n                return timegapLimit.value.amount < timegapInSelectedUnit\n                    ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' })\n                    : null;\n            });\n            const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : ''));\n            const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value);\n            const isLastItem = computed(() => {\n                // The index can be -1 before the parent has had a chance to sort the array.\n                return index.value !== -1 && index.value === timelineEntries.value.length - 1;\n            });\n\n            return {\n                // Values\n                isNoteType,\n                iconConditionalClasses,\n                conditionalClasses,\n                displayShowMoreButton,\n                showAll,\n                hiddenItems,\n                isVisible,\n                isLinkTitle,\n                linkTitleProps,\n                timegap,\n                timegapAriaLabel,\n                isLastItem,\n\n                // Methods\n                generateUid,\n                hasSlot: useHasSlot(slots),\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline-item.scss\" />\n"],"names":["BentoTimelineShowMorePlacement","BentoTimelineShowMorePlacement2","BentoTimelineGapUnit","BentoTimelineGapUnit2","BentoTimelineItemVariant","BentoTimelineItemVariant2","BentoTimelineStatus","BentoTimelineStatus2","TIMELINE_REGISTER_ENTRY_INJECTION_KEY","TIMELINE_CONFIG_INJECTION_KEY","_sfc_main$2","defineComponent","messages$1","BentoButton","BentoButtonActions","BentoTextarea","props","emit","t","useI18n","addNoteLabel","computed","cancelLabel","newNoteContent","ref","updateNoteContent","newTimelineNoteContent","addNoteTextareaRef","addNoteButtonRef","showAddNoteTextArea","toggleAddNote","nextTick","_a","_b","addNoteToTimeline","timelineEntries","hiddenItems","showAll","timegapLimit","toRefs","timelineIndexes","visibleIndexes","showMoreIndex","sortEntries","a","b","unregisterTimelineEntry","entryToRemove","index","registerTimelineEntry","entry","watch","configData","provide","uuid","_sfc_main$1","formatDistanceStrict","laterDate","earlierDate","options","defaultOptions","getDefaultOptions","locale","enUS","comparison","compareAsc","localizeOptions","laterDate_","earlierDate_","normalizeDates","roundingMethod","getRoundingMethod","milliseconds","minutes","millisecondsInMinute","timezoneOffset","getTimezoneOffsetInMilliseconds","dstNormalizedMinutes","defaultUnit","unit","minutesInDay","minutesInMonth","minutesInYear","seconds","roundedMinutes","hours","days","months","years","_sfc_main","BentoDate","BentoLink","BentoTag","BentoTypography","BentoStructuredList","BentoStructuredListItem","SquareSmallIcon","messages","value","slots","isNoteType","computedStatus","deprecate","iconConditionalClasses","conditionalClasses","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","inject","onUnmounted","allItemsShowing","isVisible","isLinkTitle","linkTitleProps","timegap","previousDate","isPreviousItemVisible","date","timegapInSelectedUnit","timegapAriaLabel","displayShowMoreButton","isLastItem","generateUid","useHasSlot"],"mappings":"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","x_google_ignoreList":[4]}