npm - @adyen/bento-vue3 - Versions diffs - 1.0.0 → 1.1.1 - Mend

@adyen/bento-vue3 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (591) hide show

package/dist/tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.js","sources":["../../vue2/src/components/tag/tag.types.ts","../../vue2/src/components/tag/tag.vue"],"sourcesContent":["export 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 class=\"b-tag\"\n :class=\"tagConditionalClasses\"\n :aria-label=\"computedAriaLabel\"\n role=\"mark\"\n >\n <bento-typography\n class=\"b-tag__label\"\n :el=\"BentoTypographyElement.SPAN\"\n :variant=\"BentoTypographyVariant.CAPTION\"\n stronger\n >\n {{ formattedText }}\n </bento-typography>\n </span>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoTagVariant } from './tag.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoTooltipDirective } from '@/directives';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n\n export default defineComponent({\n name: 'bento-tag',\n components: { BentoTypography },\n directives: { BentoTooltipDirective },\n ~~inheritAttrs: false,\n~~ props: {\n /*\n The label text content of the Tag.\n /\n label: { type: String, default: null },\n\n /\n The variant variant of tag\n /\n variant: {\n type: String as PropType<BentoTagVariant>,\n default: BentoTagVariant.GREY,\n validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n },\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: { type: Number, default: null },\n },\n setup(props, { slots }) {\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\n ? `${textFromSlot.value.slice(0, props.truncate)}...`\n : textFromSlot.value;\n });\n\n return {\n // Values\n computedAriaLabel,\n textFromSlot,\n formattedText,\n tagConditionalClasses,\n shouldShowTooltip,\n\n // Enums\n BentoTypographyVariant,\n BentoTypographyElement,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText","BentoTypographyVariant","BentoTypographyElement","withDirectives","openBlock","createElementBlock","normalizeClass","_ctx"],"mappings":";;;;;;;AAAY,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;AC2BR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACM,~~cAAA;AAAA,EACtB,~~OAAA;AAAA;AAAA;AAAA;AAAA,~~IACP~~,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIkC,SAAA;AAAA,MAK5B,MAAA;AAAA,MACC,SAAAL,EAAA;AAAA,MACmB,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKwC;AAAA,EAC5C,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAN,EAAA,SAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCO,IAAAD,EAAA,MAAAN,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA,KAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACIN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,SAHIO,EAAA,KAKe;AAGvB,WAAA;AAAA;AAAA,MAAO,mBAAAL;AAAA,MAEH,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA;AAAA,MACA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;~~AAnFK~~,SAAAC,GAAAC,EAAA,GAAAC,EAAA,QAAA;AAAA,IAA6B,OAAAC,EAAA,CAAA,SAAAC,EAAA,qBAAA,CAAA;AAAA,IACnB,cAAAA,EAAA;AAAA,IAEX,MAAA;AAAA,EAAA,GAAA;AAAA;MAEoC,OAAA;AAAA,MACxB,IAAAA,EAAA,uBAAA;AAAA,MACA,SAAAA,EAAA,uBAAA;AAAA;;;;;;;;;;;;"}
1	+ {"version":3,"file":"tag.js","sources":["../../vue2/src/components/tag/tag.types.ts","../../vue2/src/components/tag/tag.vue"],"sourcesContent":["export 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 class=\"b-tag\"\n :class=\"tagConditionalClasses\"\n :aria-label=\"computedAriaLabel\"\n role=\"mark\"\n >\n <bento-typography\n class=\"b-tag__label\"\n :el=\"BentoTypographyElement.SPAN\"\n :variant=\"BentoTypographyVariant.CAPTION\"\n stronger\n >\n {{ formattedText }}\n </bento-typography>\n </span>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoTagVariant } from './tag.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoTooltipDirective } from '@/directives';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n\n export default defineComponent({\n name: 'bento-tag',\n components: { BentoTypography },\n directives: { BentoTooltipDirective },\n props: {\n /*\n The label text content of the Tag.\n /\n label: { type: String, default: null },\n\n /\n The variant variant of tag\n /\n variant: {\n type: String as PropType<BentoTagVariant>,\n default: BentoTagVariant.GREY,\n validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n },\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: { type: Number, default: null },\n },\n setup(props, { slots }) {\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\n ? `${textFromSlot.value.slice(0, props.truncate)}...`\n : textFromSlot.value;\n });\n\n return {\n // Values\n computedAriaLabel,\n textFromSlot,\n formattedText,\n tagConditionalClasses,\n shouldShowTooltip,\n\n // Enums\n BentoTypographyVariant,\n BentoTypographyElement,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText","BentoTypographyVariant","BentoTypographyElement","withDirectives","openBlock","createElementBlock","normalizeClass","_ctx"],"mappings":";;;;;;;AAAY,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;AC2BR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACM,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIkC,SAAA;AAAA,MAK5B,MAAA;AAAA,MACC,SAAAL,EAAA;AAAA,MACmB,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKwC;AAAA,EAC5C,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAN,EAAA,SAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCO,IAAAD,EAAA,MAAAN,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA,KAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACIN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,SAHIO,EAAA,KAKe;AAGvB,WAAA;AAAA;AAAA,MAAO,mBAAAL;AAAA,MAEH,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA;AAAA,MACA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AAlFK,SAAAC,GAAAC,EAAA,GAAAC,EAAA,QAAA;AAAA,IAA6B,OAAAC,EAAA,CAAA,SAAAC,EAAA,qBAAA,CAAA;AAAA,IACnB,cAAAA,EAAA;AAAA,IAEX,MAAA;AAAA,EAAA,GAAA;AAAA;MAEoC,OAAA;AAAA,MACxB,IAAAA,EAAA,uBAAA;AAAA,MACA,SAAAA,EAAA,uBAAA;AAAA;;;;;;;;;;;;"}

package/dist/textarea.js CHANGED Viewed

@@ -1,37 +1,37 @@
-import { openBlock as n, createElementBlock as h, mergeProps as X, toDisplayString as b, createCommentVNode as i, pushScopeId as x, popScopeId as ee, createElementVNode as N, defineComponent as ae, toRefs as te, ref as g, computed as s, watch as $, nextTick as le, onMounted as re, resolveComponent as v, normalizeClass as C, normalizeStyle as k, createVNode as E, withCtx as c, createTextVNode as y, createBlock as p, withKeys as R } from "vue";
-import { B as oe, c as ne } from "./chunks/index.1d501e31.js";
-import { B as se, a as ie } from "./chunks/button.51be5335.js";
+import { openBlock as n, createElementBlock as g, mergeProps as X, toDisplayString as b, createCommentVNode as i, pushScopeId as x, popScopeId as ee, createElementVNode as N, defineComponent as ae, toRefs as te, ref as h, computed as s, watch as $, nextTick as le, onMounted as re, resolveComponent as v, normalizeClass as C, normalizeStyle as k, createVNode as E, withCtx as c, createTextVNode as y, createBlock as p, withKeys as R } from "vue";
+import { B as oe, a as ne } from "./chunks/index.a169ce0d.js";
+import { B as se, a as ie } from "./chunks/button.9cd485bc.js";
 import { _ as H } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as ue } from "./chunks/unique-id.a2a2b458.js";
 import { o as de } from "./chunks/resize.a041304d.js";
-import { u as ce } from "./chunks/i18n.3619d46c.js";
+import { u as ce } from "./chunks/i18n.6c402773.js";
 import { u as pe } from "./chunks/aria-label.ac9651a5.js";
-import { E as be } from "./chunks/error-message.f9c2a4be.js";
-import "./assets/index15.css";
+import { E as be } from "./chunks/error-message.a784820d.js";
+import "./assets/index34.css";
 var U = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e.BOTH = "both", e.NONE = "none", e))(U || {}), m = /* @__PURE__ */ ((e) => (e.CLEARABLE = "clearable", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(m || {}), l = /* @__PURE__ */ ((e) => (e.BLUR = "blur", e.CHANGE = "change", e.CLEAR = "clear", e.ESCAPE_PRESSED = "escape-pressed", e.FOCUS = "focus", e.INPUT = "input", e))(l || {});
 let w = 0;
 const me = {
   beforeCreate() {
     this.uuid = w.toString(), w += 1;
   }
-}, fe = (e) => (x("data-v-3c9e4cfb"), e = e(), ee(), e), ye = { key: 0 }, he = /* @__PURE__ */ fe(() => /* @__PURE__ */ N("path", {
+}, fe = (e) => (x("data-v-3c9e4cfb"), e = e(), ee(), e), ye = { key: 0 }, ge = /* @__PURE__ */ fe(() => /* @__PURE__ */ N("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function ge(e, a, L, u, _, S) {
-  return n(), h("svg", X({ role: "img" }, e.$attrs, {
+function he(e, a, L, u, _, S) {
+  return n(), g("svg", X({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (n(), h("title", ye, b(e.$attrs["svg-title"]), 1)) : i("", !0),
-    he
+    e.$attrs["svg-title"] ? (n(), g("title", ye, b(e.$attrs["svg-title"]), 1)) : i("", !0),
+    ge
   ], 16);
 }
-const ve = /* @__PURE__ */ H(me, [["render", ge], ["__scopeId", "data-v-3c9e4cfb"]]), O = {
+const ve = /* @__PURE__ */ H(me, [["render", he], ["__scopeId", "data-v-3c9e4cfb"]]), O = {
   "en-US": {
     clearText: "Clear text",
     optional: "optional",
@@ -43,7 +43,6 @@ const ve = /* @__PURE__ */ H(me, [["render", ge], ["__scopeId", "data-v-3c9e4cfb
   i18n: { messages: O },
   name: "bento-textarea",
   components: { BentoButton: se, BentoTypography: oe, ErrorMessage: be, CrossCircleFillSmallIcon: ve },
-  inheritAttrs: !1,
   props: {
     /**
      * Text that labels an the input element
@@ -111,7 +110,7 @@ const ve = /* @__PURE__ */ H(me, [["render", ge], ["__scopeId", "data-v-3c9e4cfb
     l.INPUT
   ],
   setup(e, { emit: a }) {
-    const { ariaLabel: L, height: u, label: _ } = te(e), S = ue("textarea"), t = g(null), r = g(e.value), f = 44, d = g(e.height || `${f}px`), o = g("100%"), { t: B } = ce({ messages: O }), D = s(() => `${r.value.length} / ${e.characterLimit}`), A = s(
+    const { ariaLabel: L, height: u, label: _ } = te(e), S = ue("textarea"), t = h(null), r = h(e.value), f = 44, d = h(e.height || `${f}px`), o = h("100%"), { t: B } = ce({ messages: O }), D = s(() => `${r.value.length} / ${e.characterLimit}`), A = s(
       () => e.characterLimit && r.value.length > e.characterLimit
     ), I = () => {
       t.value && t.value.scrollHeight > f && (d.value = `${t.value.scrollHeight + 3}px`);
@@ -209,14 +208,14 @@ const Ee = ["for"], Le = ["id", "value", "aria-label", "aria-invalid", "readonly
 };
 function Se(e, a, L, u, _, S) {
   const t = v("bento-typography"), r = v("cross-circle-fill-small-icon"), f = v("bento-button"), d = v("error-message");
-  return n(), h("div", {
+  return n(), g("div", {
     class: C(["b-textarea", e.conditionalClasses]),
     style: k({ width: e.textareaWidth })
   }, [
     N("div", {
       class: C(["b-textarea__label-box", e.conditionalClassesLabelBox])
     }, [
-      e.label ? (n(), h("label", {
+      e.label ? (n(), g("label", {
         key: 0,
         for: e.textareaId,
         class: "b-textarea__label"
@@ -286,7 +285,7 @@ function Se(e, a, L, u, _, S) {
           onKeydown: a[4] || (a[4] = R((...o) => e.onPressEscape && e.onPressEscape(...o), ["esc"]))
         }, `
             `, 46, Le),
-        e.showClearButton ? (n(), h("div", _e, [
+        e.showClearButton ? (n(), g("div", _e, [
           E(f, {
             variant: e.BentoButtonVariant.TERTIARY,
             disabled: e.disabled,
@@ -325,7 +324,7 @@ function Se(e, a, L, u, _, S) {
     }, 8, ["el"])) : i("", !0)
   ], 6);
 }
-const we = /* @__PURE__ */ H(Ce, [["render", Se], ["__scopeId", "data-v-e0c176ba"]]);
+const we = /* @__PURE__ */ H(Ce, [["render", Se], ["__scopeId", "data-v-6f1b73d7"]]);
 export {
   we as BentoTextarea
 };

package/dist/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sources":["../../vue2/src/components/textarea/textarea.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../../vue2/src/components/textarea/textarea.vue"],"sourcesContent":["export 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}\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" 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=\"#00112C\" fill-rule=\"evenodd\" d=\"M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style scoped lang=\"scss\">\n svg {\n display: inline-flex;\n flex-shrink: 0;\n }\n \n svg,\n svg * {\n fill: currentcolor;\n }\n</style>\n","<template>\n <div class=\"b-textarea\" :class=\"conditionalClasses\" :style=\"{ width: textareaWidth }\">\n <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n <label v-if=\"label\" :for=\"textareaId\" class=\"b-textarea__label\">\n <bento-typography :el=\"BentoTypographyElement.SPAN\" stronger>{{ label }}</bento-typography>\n <bento-typography\n v-if=\"optional && !required\"\n :el=\"BentoTypographyElement.SPAN\"\n class=\"b-textarea__label-item\"\n >\n ({{ t('optional') }})\n </bento-typography>\n <bento-typography v-if=\"required\" :el=\"BentoTypographyElement.SPAN\" class=\"b-textarea__label-item\">\n ({{ t('required') }})\n </bento-typography>\n </label>\n <bento-typography\n v-if=\"characterLimit\"\n :el=\"BentoTypographyElement.SPAN\"\n class=\"b-textarea__label-item\"\n :class=\"conditionalClassesLabelItem\"\n >\n {{ counter }}\n </bento-typography>\n </div>\n <bento-typography :el=\"BentoTypographyElement.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=\"readonly\"\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 >\n </textarea>\n\n <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n <bento-button\n :variant=\"BentoButtonVariant.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=\"BentoTypographyElement.SPAN\">\n {{ description }}\n </bento-typography>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, nextTick, onMounted, PropType, ref, toRefs, watch } from 'vue';\n import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n import { BentoButton, BentoButtonVariant } from '@/components/button';\n import { ErrorMessage } from '@/components/internal';\n import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n import { generateUid } from '@/utils/ts/unique-id';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n export default defineComponent({\n i18n: { messages },\n name: 'bento-textarea',\n components: { BentoButton, BentoTypography, ErrorMessage, CrossCircleFillSmallIcon },\n inheritAttrs: false,\n props: {\n /*\n Text that labels an the input element\n /\n ariaLabel: { type: String, default: undefined },\n\n /\n Text that shows number of characters in textarea\n /\n characterLimit: { type: Number, default: undefined },\n\n /\n Text displayed as the help text of the textarea\n /\n description: { type: String, default: '' },\n\n /\n Disables the possibility of changing value in the textarea\n /\n disabled: { type: Boolean, default: false },\n\n /\n If set to true, shows a button to clear all the text\n /\n clearable: { type: Boolean, default: false },\n\n /\n Adds error text\n /\n errorMessage: { type: String, default: '' },\n\n /\n Sets the height of the textarea, e.g 200px OR 20vh\n /\n height: { type: String, default: null },\n\n /\n Text displayed as the label of the textarea\n /\n label: { type: String, default: '' },\n\n /\n Highlights the textarea is optional.\n /\n optional: { type: Boolean, default: false },\n\n /\n Text displayed as the placeholder of the textarea\n /\n placeholder: { type: String, default: '' },\n\n /\n Set the textarea to read only state.\n /\n readonly: { type: Boolean, default: false },\n\n /\n Indicates the possibility of resize the textarea\n /\n resizable: { type: String as PropType<BentoTextareaResizeOption>, default: BentoTextareaResizeOption.BOTH },\n\n /\n Highlights the textarea is required.\n /\n required: { type: Boolean, default: false },\n\n /\n Text displayed as the value of the textarea\n /\n value: { type: String, default: '' },\n },\n emits: [\n BentoTextareaEvent.BLUR,\n BentoTextareaEvent.CHANGE,\n BentoTextareaEvent.CLEAR,\n BentoTextareaEvent.ESCAPE_PRESSED,\n BentoTextareaEvent.FOCUS,\n BentoTextareaEvent.INPUT,\n ],\n setup(props, { emit }) {\n const { ariaLabel, height, label } = toRefs(props);\n\n const textareaId = generateUid('textarea');\n const textareaElement = ref<HTMLTextAreaElement>(null);\n const textareaValue = ref(props.value);\n const defaultTextareaHeight = 44;\n const textareaHeight = ref(props.height \|\| `${defaultTextareaHeight}px`);\n const textareaWidth = ref('100%');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const counter = computed(() => `${textareaValue.value.length} / ${props.characterLimit}`);\n const isOverCharacterLimit = computed(\n () => props.characterLimit && textareaValue.value.length > props.characterLimit\n );\n\n const calculateHeight = () => {\n const borderWidth = 3;\n if (textareaElement.value && textareaElement.value.scrollHeight > defaultTextareaHeight) {\n textareaHeight.value = `${textareaElement.value.scrollHeight + borderWidth}px`;\n }\n };\n\n watch(height, () => {\n if (!height.value) {\n calculateHeight();\n } else {\n textareaHeight.value = height.value;\n }\n });\n\n watch(\n () => props.value,\n () => {\n textareaValue.value = props.value;\n },\n { immediate: true }\n );\n\n watch(\n () => textareaValue.value,\n async () => {\n if (!height.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}`]: props.readonly,\n [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n [`b-textarea__input--dynamic-height`]: !height.value,\n }));\n\n const conditionalClassesLabelBox = computed(() => ({\n [`b-textarea__label-box--no-label`]: !props.label,\n }));\n\n const conditionalClassesLabelItem = computed(() => ({\n [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n }));\n\n const counterErrorText = computed(() =>\n t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })\n );\n\n const computedAriaLabel = useAriaLabel({\n ariaLabel,\n label,\n defaultFallback: t('textarea'),\n });\n\n const showClearButton = computed(\n () => props.clearable && textareaValue.value && !props.disabled && !props.readonly\n );\n\n const onClear = () => {\n textareaValue.value = '';\n emit(BentoTextareaEvent.CLEAR);\n emit(BentoTextareaEvent.INPUT, '');\n };\n\n const onInput = (event: InputEvent) => {\n if (!props.disabled && !props.readonly) {\n textareaValue.value = (event.target as HTMLInputElement).value;\n /\n Triggered when input value is changed\n \n @event input\n * @property {String} inputValue - the updated textarea value\n */\n emit(BentoTextareaEvent.INPUT, textareaValue.value);\n }\n };\n\n const onBlur = () => {\n textareaElement.value.scrollTop = 0;\n emit(BentoTextareaEvent.BLUR);\n };\n\n const onFocus = () => {\n textareaElement.value.focus();\n emit(BentoTextareaEvent.FOCUS);\n };\n\n const onChange = () => {\n emit(BentoTextareaEvent.CHANGE);\n };\n\n const onPressEscape = () => {\n emit(BentoTextareaEvent.ESCAPE_PRESSED);\n };\n\n onMounted(() => {\n observeSizeOfElement(textareaElement.value, () => {\n textareaWidth.value = `${textareaElement.value.offsetWidth}px`;\n });\n\n if (!height.value) {\n calculateHeight();\n }\n });\n\n return {\n // Enums\n BentoButtonVariant,\n BentoTextareaEvent,\n BentoTypographyElement,\n\n // Methods\n onBlur,\n onChange,\n onClear,\n onFocus,\n onInput,\n onPressEscape,\n t,\n\n // Values\n computedAriaLabel,\n conditionalClasses,\n conditionalClassesLabelItem,\n conditionalClassesLabelBox,\n counter,\n counterErrorText,\n conditionalClassesInput,\n invalidInput,\n isOverCharacterLimit,\n showClearButton,\n textareaElement,\n textareaHeight,\n textareaId,\n textareaValue,\n textareaWidth,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1$1","toDisplayString","_sfc_main","defineComponent","messages","BentoButton","BentoTypography","ErrorMessage","CrossCircleFillSmallIcon","props","emit","ariaLabel","height","label","toRefs","textareaId","generateUid","textareaElement","ref","textareaValue","defaultTextareaHeight","textareaHeight","textareaWidth","t","useI18n","counter","computed","isOverCharacterLimit","calculateHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onMounted","observeSizeOfElement","BentoButtonVariant","BentoTypographyElement","normalizeClass","createCommentVNode","createBlock","_component_bento_typography","_hoisted_1","createVNode","createElementVNode","normalizeStyle","_cache","args","withKeys","_hoisted_2","_hoisted_3","_component_bento_button","withCtx","_component_cross_circle_fill_small_icon","_component_error_message"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YACAA,EAAA,OAAA,QACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,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,SANQA,IAAAD,KAAA,CAAA,CAAA;ACTR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARuK,MAAA;AAAA,EAAe,aAAA;AAAA,EAAoB,GAAA;AAAA,EAAgpB,aAAA;;;AAAl2B,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,IAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;GCqFtGG,KAAAC,GAAA;AAAA,EAA+B,MAAA,EAAA,UAAAC,EAAA;AAAA,EACV,MAAA;AAAA,EACX,YAAA,EAAA,aAAAC,IAAA,iBAAAC,IAAA,cAAAC,IAAA,0BAAAC,GAAA;AAAA,EAC6E,cAAA;AAAA,EACrE,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,WAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAI2C,gBAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKK,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKV,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKC,WAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKC,cAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKD,QAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKJ,OAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKH,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKO,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKD,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKC,WAAA,EAAA,MAAA,QAAA,SAAAnB,EAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKgE,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKhE,OAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA,EAKP;AAAA,EACvC,OAAA;AAAA,IACOI,EAAA;AAAA,IACgBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACvB,MAAAgB,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEI,UAAA,EAAA,WAAAC,GAAA,QAAAC,GAAA,OAAAC,EAAA,IAAAC,GAAAL,CAAA,GAEAM,IAAAC,GAAA,UAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAT,EAAA,KAAA,GACAW,IAAA,IACAC,IAAAH,EAAAT,EAAA,UAAA,GAAAW,KAAA,GACAE,IAAAJ,EAAA,MAAA,GAEA,EAAA,GAAAK,EAAA,IAAAC,GAAA,EAAA,UAAApB,EAAA,CAAA,GAEAqB,IAAAC,EAAA,MAAA,GAAAP,EAAA,MAAA,YAAAV,EAAA,gBAAA,GACAkB,IAAAD;AAAA,MAA6B,MAAAjB,EAAA,kBAAAU,EAAA,MAAA,SAAAV,EAAA;AAAA,IACwC,GAGrEmB,IAAA,MAAA;AAEI,MAAAX,EAAA,SAAAA,EAAA,MAAA,eAAAG,MACIC,EAAA,QAAA,GAAAJ,EAAA,MAAA,eAAA;AAAA,IACJ;AAGJ,IAAAY,EAAAjB,GAAA,MAAA;AACI,MAAAA,EAAA,QAGIS,EAAA,QAAAT,EAAA,QAFAgB,EAAA;AAAA,IAGJ,CAAA,GAGJC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAU,EAAA,QAAAV,EAAA;AAAA,MAA4B;AAAA,MAChC,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBoB;AAAA,MAAA,MAAAV,EAAA;AAAA,MACwB,YAAA;AAEhB,YAAA,CAAAP,EAAA,OAAA;AAII,cADAS,EAAA,QAAA,GAAAD,OACA,CAAAD,EAAA;AACI;AAGJ,gBAAAW,GAAA,GACAF,EAAA;AAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAG,IAAAL,EAAA,MAAA,CAAA,CAAAjB,EAAA,gBAAAkB,EAAA,KAAA,GAEAK,IAAAN,EAAA,OAAA;AAAA,MAA2C,CAAA,eAAAnC,EAAA,UAAA,GAAAkB,EAAA;AAAA,IACoB,EAAA,GAG/DwB,IAAAP,EAAA,OAAA;AAAA,MAAgD,CAAA,sBAAAnC,EAAA,WAAA,GAAAkB,EAAA;AAAA,MACuB,CAAA,sBAAAlB,EAAA,UAAA,GAAAkB,EAAA;AAAA,MACD,CAAA,sBAAAlB,EAAA,OAAA,GAAAwC,EAAA;AAAA,MACI,CAAA,mCAAA,GAAA,CAAAnB,EAAA;AAAA,IACvB,EAAA,GAGnDsB,IAAAR,EAAA,OAAA;AAAA,MAAmD,CAAA,iCAAA,GAAA,CAAAjB,EAAA;AAAA,IACH,EAAA,GAGhD0B,IAAAT,EAAA,OAAA;AAAA,MAAoD,CAAA,2BAAAnC,EAAA,OAAA,GAAAoC,EAAA;AAAA,IACmC,EAAA,GAGvFS,IAAAV;AAAA,MAAyB,MAAAH,EAAA,wBAAA,EAAA,gBAAAd,EAAA,eAAA,CAAA;AAAA,IAC6C,GAGtE4B,IAAAC,GAAA;AAAA,MAAuC,WAAA3B;AAAA,MACnC,OAAAE;AAAA,MACA,iBAAAU,EAAA,UAAA;AAAA,IAC6B,CAAA,GAGjCgB,IAAAb;AAAA,MAAwB,MAAAjB,EAAA,aAAAU,EAAA,SAAA,CAAAV,EAAA,YAAA,CAAAA,EAAA;AAAA,IACsD,GAG9E+B,IAAA,MAAA;AACI,MAAArB,EAAA,QAAA,IACAT,EAAAjB,EAAA,KAAA,GACAiB,EAAAjB,EAAA,OAAA,EAAA;AAAA,IAAiC,GAGrCgD,IAAA,CAAAC,MAAA;AACI,MAAA,CAAAjC,EAAA,YAAA,CAAAA,EAAA,aACIU,EAAA,QAAAuB,EAAA,OAAA,OAOAhC,EAAAjB,EAAA,OAAA0B,EAAA,KAAA;AAAA,IACJ,GAGJwB,IAAA,MAAA;AACI,MAAA1B,EAAA,MAAA,YAAA,GACAP,EAAAjB,EAAA,IAAA;AAAA,IAA4B,GAGhCmD,IAAA,MAAA;AACI,MAAA3B,EAAA,MAAA,MAAA,GACAP,EAAAjB,EAAA,KAAA;AAAA,IAA6B,GAGjCoD,IAAA,MAAA;AACI,MAAAnC,EAAAjB,EAAA,MAAA;AAAA,IAA8B,GAGlCqD,IAAA,MAAA;AACI,MAAApC,EAAAjB,EAAA,cAAA;AAAA,IAAsC;AAG1C,WAAAsD,GAAA,MAAA;AACI,MAAAC,GAAA/B,EAAA,OAAA,MAAA;AACI,QAAAK,EAAA,QAAA,GAAAL,EAAA,MAAA;AAAA,MAA+C,CAAA,GAGnDL,EAAA,SACIgB,EAAA;AAAA,IACJ,CAAA,GAGJ;AAAA;AAAA,MAAO,oBAAAqB;AAAA,MAEH,oBAAAxD;AAAA,MACA,wBAAAyD;AAAA;AAAA,MACA,QAAAP;AAAA,MAGA,UAAAE;AAAA,MACA,SAAAL;AAAA,MACA,SAAAI;AAAA,MACA,SAAAH;AAAA,MACA,eAAAK;AAAA,MACA,GAAAvB;AAAA;AAAA,MACA,mBAAAc;AAAA,MAGA,oBAAAL;AAAA,MACA,6BAAAG;AAAA,MACA,4BAAAD;AAAA,MACA,SAAAT;AAAA,MACA,kBAAAW;AAAA,MACA,yBAAAH;AAAA,MACA,cAAAF;AAAA,MACA,sBAAAJ;AAAA,MACA,iBAAAY;AAAA,MACA,iBAAAtB;AAAA,MACA,gBAAAI;AAAA,MACA,YAAAN;AAAA,MACA,eAAAI;AAAA,MACA,eAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;EA1S0C,KAAA;AAAA;;;;;IA7C2B,OAAA6B,EAAA,CAAA,cAAApD,EAAA,kBAAA,CAAA;AAAA;EAuB3D,GAAA;AAAA;;IArBgB,GAAA;AAAA;QAAkB,KAAA;AAAA,QAAO,KAAAA,EAAA;AAAA,QACvC,OAAA;AAAA,MAAA,GAAA;AAAA;UAA4D,IAAAA,EAAA,uBAAA;AAAA;;;;;UAElD,GAAA;AAAA,QAAA,GAAA,GAAA,CAAA,IAAA,CAAA;AAAA;UAC0B,KAAA;AAAA,UAC3B,IAAAA,EAAA,uBAAA;AAAA;;;;;;QAIe,GAAA,GAAA,CAAA,IAAA,CAAA,KAAAqD,EAAA,IAAA,EAAA;AAAA,QAELrD,EAAA,YAAAH,EAAA,GAAAyD,EAAAC,GAAA;AAAA,UAF+C,KAAA;AAAA,UAAO,IAAAvD,EAAA,uBAAA;AAAA;;;;;;;MAKnE,GAAA,GAAAwD,EAAA,KAAAH,EAAA,IAAA,EAAA;AAAA,MAMSrD,EAAA,kBAAAH,EAAA,GAAAyD,EAAAC,GAAA;AAAA,QALiB,KAAA;AAAA,QAC3B,IAAAvD,EAAA,uBAAA;AAAA,QAGQ,OAAAoD,EAAA,CAAA,0BAAApD,EAAA,2BAAA,CAAA;AAAA,MAAA,GAAA;AAAA;;;;;IAqCF,GAAA,CAAA;AAAA,IAlCEyD,EAAAF,GAAA;AAAA,MAA2D,IAAAvD,EAAA,uBAAA;AAAA,MAAyB,OAAA;AAAA,MAmB1F,iBAAAA,EAAA;AAAA,IAAA,GAAA;AAAA;QAjBQ0D,EAAA,YAAA;AAAA,UACM,IAAA1D,EAAA;AAAA,UACb,KAAA;AAAA,UACH,OAAAA,EAAA;AAAA,UAEM,OAAAoD,EAAA,CAAA,qBAAApD,EAAA,uBAAA,CAAA;AAAA,UACgB,cAAAA,EAAA;AAAA,UAChB,gBAAAA,EAAA;AAAA,UACA,UAAAA,EAAA;AAAA,UACG,UAAAA,EAAA;AAAA,UACR,aAAAA,EAAA;AAAA,UACD,OAAA2D,EAAA,EAAA,QAAA3D,EAAA,WAAA,QAAAA,EAAA,eAAA,CAAA;AAAA,UACI,QAAA4D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAA7D,EAAA,UAAAA,EAAA,OAAA,GAAA6D,CAAA;AAAA,UACD,UAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAA7D,EAAA,YAAAA,EAAA,SAAA,GAAA6D,CAAA;AAAA,UACO,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAA7D,EAAA,WAAAA,EAAA,QAAA,GAAA6D,CAAA;AAAA,UACD,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAA7D,EAAA,WAAAA,EAAA,QAAA,GAAA6D,CAAA;AAAA,UAElB,WAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,IAAAD,MAAA7D,EAAA,iBAAAA,EAAA,cAAA,GAAA6D,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,QAE0B,GAAA;AAAA,eAAA,IAAAE,EAAA;AAAA,QAA1B/D,EAAA,mBAAAH,EAAA,GAAAC,EAAA,OAAAkE,IAAA;AAAA,UAE6CP,EAAAQ,GAAA;AAAA,YAClB,SAAAjE,EAAA,mBAAA;AAAA,YACJ,UAAAA,EAAA;AAAA,YACN,SAAAA,EAAA;AAAA,YACH,YAAA8D,EAAA9D,EAAA,SAAA,CAAA,OAAA,CAAA;AAAA,YAEK,SAAA8D,EAAA9D,EAAA,SAAA,CAAA,OAAA,CAAA;AAAA,UACqD,GAAA;AAAA,YAA7B,UAAAkE,EAAA,MAAA;AAAA,cAAYT,EAAAU,GAAA;AAAA;;;;;;;MAMtC,GAAA;AAAA,IAAA,GAAA,GAAA,CAAA,MAAA,eAAA,CAAA;AAAA,IAArBnE,EAAA,wBAAAH,EAAA,GAAAyD,EAAAc,GAAA;AAAA,MAA2E,KAAA;AAAA;IAEtD,GAAA,MAAA,GAAA,CAAA,eAAA,CAAA,KAAAf,EAAA,IAAA,EAAA;AAAA,IAA8CrD,EAAA,gBAAAH,EAAA,GAAAyD,EAAAc,GAAA;AAAA,MAAJ,KAAA;AAAA;IAEvC,GAAA,MAAA,GAAA,CAAA,eAAA,CAAA,KAAAf,EAAA,IAAA,EAAA;AAAA,IAELrD,EAAA,eAAAH,EAAA,GAAAyD,EAAAC,GAAA;AAAA,MAFiD,KAAA;AAAA,MAAM,OAAA;AAAA,MACrD,IAAAvD,EAAA,uBAAA;AAAA,IAAA,GAAA;AAAA;;;;;;;;","x_google_ignoreList":[1]}
1	+ {"version":3,"file":"textarea.js","sources":["../../vue2/src/components/textarea/textarea.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../../vue2/src/components/textarea/textarea.vue"],"sourcesContent":["export 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}\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" 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=\"#00112C\" fill-rule=\"evenodd\" d=\"M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style scoped lang=\"scss\">\n svg {\n display: inline-flex;\n flex-shrink: 0;\n }\n \n svg,\n svg * {\n fill: currentcolor;\n }\n</style>\n","<template>\n <div class=\"b-textarea\" :class=\"conditionalClasses\" :style=\"{ width: textareaWidth }\">\n <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n <label v-if=\"label\" :for=\"textareaId\" class=\"b-textarea__label\">\n <bento-typography :el=\"BentoTypographyElement.SPAN\" stronger>{{ label }}</bento-typography>\n <bento-typography\n v-if=\"optional && !required\"\n :el=\"BentoTypographyElement.SPAN\"\n class=\"b-textarea__label-item\"\n >\n ({{ t('optional') }})\n </bento-typography>\n <bento-typography v-if=\"required\" :el=\"BentoTypographyElement.SPAN\" class=\"b-textarea__label-item\">\n ({{ t('required') }})\n </bento-typography>\n </label>\n <bento-typography\n v-if=\"characterLimit\"\n :el=\"BentoTypographyElement.SPAN\"\n class=\"b-textarea__label-item\"\n :class=\"conditionalClassesLabelItem\"\n >\n {{ counter }}\n </bento-typography>\n </div>\n <bento-typography :el=\"BentoTypographyElement.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=\"readonly\"\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 >\n </textarea>\n\n <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n <bento-button\n :variant=\"BentoButtonVariant.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=\"BentoTypographyElement.SPAN\">\n {{ description }}\n </bento-typography>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, nextTick, onMounted, PropType, ref, toRefs, watch } from 'vue';\n import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n import { BentoButton, BentoButtonVariant } from '@/components/button';\n import { ErrorMessage } from '@/components/internal';\n import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n import { generateUid } from '@/utils/ts/unique-id';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n export default defineComponent({\n i18n: { messages },\n name: 'bento-textarea',\n components: { BentoButton, BentoTypography, ErrorMessage, CrossCircleFillSmallIcon },\n props: {\n /*\n Text that labels an the input element\n /\n ariaLabel: { type: String, default: undefined },\n\n /\n Text that shows number of characters in textarea\n /\n characterLimit: { type: Number, default: undefined },\n\n /\n Text displayed as the help text of the textarea\n /\n description: { type: String, default: '' },\n\n /\n Disables the possibility of changing value in the textarea\n /\n disabled: { type: Boolean, default: false },\n\n /\n If set to true, shows a button to clear all the text\n /\n clearable: { type: Boolean, default: false },\n\n /\n Adds error text\n /\n errorMessage: { type: String, default: '' },\n\n /\n Sets the height of the textarea, e.g 200px OR 20vh\n /\n height: { type: String, default: null },\n\n /\n Text displayed as the label of the textarea\n /\n label: { type: String, default: '' },\n\n /\n Highlights the textarea is optional.\n /\n optional: { type: Boolean, default: false },\n\n /\n Text displayed as the placeholder of the textarea\n /\n placeholder: { type: String, default: '' },\n\n /\n Set the textarea to read only state.\n /\n readonly: { type: Boolean, default: false },\n\n /\n Indicates the possibility of resize the textarea\n /\n resizable: { type: String as PropType<BentoTextareaResizeOption>, default: BentoTextareaResizeOption.BOTH },\n\n /\n Highlights the textarea is required.\n /\n required: { type: Boolean, default: false },\n\n /\n Text displayed as the value of the textarea\n /\n value: { type: String, default: '' },\n },\n emits: [\n BentoTextareaEvent.BLUR,\n BentoTextareaEvent.CHANGE,\n BentoTextareaEvent.CLEAR,\n BentoTextareaEvent.ESCAPE_PRESSED,\n BentoTextareaEvent.FOCUS,\n BentoTextareaEvent.INPUT,\n ],\n setup(props, { emit }) {\n const { ariaLabel, height, label } = toRefs(props);\n\n const textareaId = generateUid('textarea');\n const textareaElement = ref<HTMLTextAreaElement>(null);\n const textareaValue = ref(props.value);\n const defaultTextareaHeight = 44;\n const textareaHeight = ref(props.height \|\| `${defaultTextareaHeight}px`);\n const textareaWidth = ref('100%');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const counter = computed(() => `${textareaValue.value.length} / ${props.characterLimit}`);\n const isOverCharacterLimit = computed(\n () => props.characterLimit && textareaValue.value.length > props.characterLimit\n );\n\n const calculateHeight = () => {\n const borderWidth = 3;\n if (textareaElement.value && textareaElement.value.scrollHeight > defaultTextareaHeight) {\n textareaHeight.value = `${textareaElement.value.scrollHeight + borderWidth}px`;\n }\n };\n\n watch(height, () => {\n if (!height.value) {\n calculateHeight();\n } else {\n textareaHeight.value = height.value;\n }\n });\n\n watch(\n () => props.value,\n () => {\n textareaValue.value = props.value;\n },\n { immediate: true }\n );\n\n watch(\n () => textareaValue.value,\n async () => {\n if (!height.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}`]: props.readonly,\n [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n [`b-textarea__input--dynamic-height`]: !height.value,\n }));\n\n const conditionalClassesLabelBox = computed(() => ({\n [`b-textarea__label-box--no-label`]: !props.label,\n }));\n\n const conditionalClassesLabelItem = computed(() => ({\n [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n }));\n\n const counterErrorText = computed(() =>\n t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })\n );\n\n const computedAriaLabel = useAriaLabel({\n ariaLabel,\n label,\n defaultFallback: t('textarea'),\n });\n\n const showClearButton = computed(\n () => props.clearable && textareaValue.value && !props.disabled && !props.readonly\n );\n\n const onClear = () => {\n textareaValue.value = '';\n emit(BentoTextareaEvent.CLEAR);\n emit(BentoTextareaEvent.INPUT, '');\n };\n\n const onInput = (event: InputEvent) => {\n if (!props.disabled && !props.readonly) {\n textareaValue.value = (event.target as HTMLInputElement).value;\n /\n Triggered when input value is changed\n \n @event input\n * @property {String} inputValue - the updated textarea value\n */\n emit(BentoTextareaEvent.INPUT, textareaValue.value);\n }\n };\n\n const onBlur = () => {\n textareaElement.value.scrollTop = 0;\n emit(BentoTextareaEvent.BLUR);\n };\n\n const onFocus = () => {\n textareaElement.value.focus();\n emit(BentoTextareaEvent.FOCUS);\n };\n\n const onChange = () => {\n emit(BentoTextareaEvent.CHANGE);\n };\n\n const onPressEscape = () => {\n emit(BentoTextareaEvent.ESCAPE_PRESSED);\n };\n\n onMounted(() => {\n observeSizeOfElement(textareaElement.value, () => {\n textareaWidth.value = `${textareaElement.value.offsetWidth}px`;\n });\n\n if (!height.value) {\n calculateHeight();\n }\n });\n\n return {\n // Enums\n BentoButtonVariant,\n BentoTextareaEvent,\n BentoTypographyElement,\n\n // Methods\n onBlur,\n onChange,\n onClear,\n onFocus,\n onInput,\n onPressEscape,\n t,\n\n // Values\n computedAriaLabel,\n conditionalClasses,\n conditionalClassesLabelItem,\n conditionalClassesLabelBox,\n counter,\n counterErrorText,\n conditionalClassesInput,\n invalidInput,\n isOverCharacterLimit,\n showClearButton,\n textareaElement,\n textareaHeight,\n textareaId,\n textareaValue,\n textareaWidth,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1$1","toDisplayString","_sfc_main","defineComponent","messages","BentoButton","BentoTypography","ErrorMessage","CrossCircleFillSmallIcon","props","emit","ariaLabel","height","label","toRefs","textareaId","generateUid","textareaElement","ref","textareaValue","defaultTextareaHeight","textareaHeight","textareaWidth","t","useI18n","counter","computed","isOverCharacterLimit","calculateHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onMounted","observeSizeOfElement","BentoButtonVariant","BentoTypographyElement","normalizeClass","createCommentVNode","createBlock","_component_bento_typography","_hoisted_1","createVNode","createElementVNode","normalizeStyle","_cache","args","withKeys","_hoisted_2","_hoisted_3","_component_bento_button","withCtx","_component_cross_circle_fill_small_icon","_component_error_message"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/timeline.js CHANGED Viewed

@@ -1,31 +1,31 @@
-import { defineComponent as W, ref as Y, computed as c, toRefs as ae, provide as V, openBlock as s, createElementBlock as _, renderSlot as oe, mergeProps as X, toDisplayString as b, createCommentVNode as h, pushScopeId as G, popScopeId as x, createElementVNode as p, inject as j, resolveComponent as w, createVNode as S, withCtx as y, createTextVNode as I, createBlock as C, resolveDynamicComponent as se, normalizeClass as q, Fragment as $, renderList as re } from "vue";
+import { defineComponent as W, ref as Y, computed as c, toRefs as ae, provide as V, openBlock as s, createElementBlock as _, renderSlot as oe, mergeProps as X, toDisplayString as y, createCommentVNode as h, pushScopeId as G, popScopeId as x, createElementVNode as f, inject as j, resolveComponent as w, createVNode as S, withCtx as b, createTextVNode as I, createBlock as C, resolveDynamicComponent as se, normalizeClass as q, Fragment as $, renderList as re } from "vue";
 import { _ as F } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as le, a as me } from "./chunks/button.51be5335.js";
-import { B as de } from "./chunks/index.af260515.js";
+import { B as le, a as me } from "./chunks/button.9cd485bc.js";
+import { B as de } from "./chunks/index.04996cf6.js";
 import { BentoTag as ue } from "./tag.js";
-import { B as ce, c as _e, a as pe } from "./chunks/index.1d501e31.js";
-import { B as fe, a as he, S as ve } from "./chunks/index.36742dc7.js";
+import { B as ce, a as _e, b as fe } from "./chunks/index.a169ce0d.js";
+import { B as pe, a as he, S as ve } from "./chunks/index.23194ad5.js";
 import { C as ge } from "./chunks/checkmark-circle-fill.e6b84561.js";
-import { C as ye } from "./chunks/cross-circle-fill.0feb37b3.js";
-import { r as be, e as Ie, t as B, g as z } from "./chunks/index.f55fdc32.js";
+import { C as be } from "./chunks/cross-circle-fill.0feb37b3.js";
+import { r as ye, e as Ie, t as B, g as z } from "./chunks/index.f55fdc32.js";
 import { c as Te, a as Ee } from "./chunks/index.86453263.js";
 import { g as Se } from "./chunks/unique-id.a2a2b458.js";
-import { u as we } from "./chunks/i18n.3619d46c.js";
-import "./assets/index12.css";
+import { u as we } from "./chunks/i18n.6c402773.js";
+import "./assets/index31.css";
 var H = 1e3 * 60, D = 60 * 24, J = D * 30, K = D * 365;
 function P(e, n) {
   var r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  be(2, arguments);
+  ye(2, arguments);
   var l = r.locale || Ie;
   if (!l.formatDistance)
     throw new RangeError("locale must contain localize.formatDistance property");
-  var f = Te(e, n);
-  if (isNaN(f))
+  var p = Te(e, n);
+  if (isNaN(p))
     throw new RangeError("Invalid time value");
   var a = Ee(r);
-  a.addSuffix = !!r.addSuffix, a.comparison = f;
+  a.addSuffix = !!r.addSuffix, a.comparison = p;
   var i, d;
-  f > 0 ? (i = B(n), d = B(e)) : (i = B(e), d = B(n));
+  p > 0 ? (i = B(n), d = B(e)) : (i = B(e), d = B(n));
   var v = r.roundingMethod == null ? "round" : String(r.roundingMethod), t;
   if (v === "floor")
     t = Math.floor;
@@ -49,18 +49,17 @@ function P(e, n) {
     var N = t(E / D);
     return l.formatDistance("xDays", N, a);
   } else if (o === "month") {
-    var A = t(E / J);
-    return A === 12 && r.unit !== "month" ? l.formatDistance("xYears", 1, a) : l.formatDistance("xMonths", A, a);
+    var O = t(E / J);
+    return O === 12 && r.unit !== "month" ? l.formatDistance("xYears", 1, a) : l.formatDistance("xMonths", O, a);
   } else if (o === "year") {
-    var O = t(E / K);
-    return l.formatDistance("xYears", O, a);
+    var A = t(E / K);
+    return l.formatDistance("xYears", A, a);
   }
   throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
 }
 var M = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(M || {}), Ce = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Ce || {}), T = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(T || {});
 const ee = Symbol("timeline register entry injection key"), te = Symbol("timeline config obj injection key"), Me = W({
   name: "bento-timeline",
-  inheritAttrs: !1,
   props: {
     /**
      * Object that determines the max number of items to show without clicking the show more button
@@ -83,7 +82,7 @@ const ee = Symbol("timeline register entry injection key"), te = Symbol("timelin
   setup(e) {
     const n = Y([]), r = c(
       () => e.showMore && n.value.length > e.showMore.limit ? n.value.length - e.showMore.limit : null
-    ), l = Y(!1), { timegapLimit: f } = ae(e), a = c(() => {
+    ), l = Y(!1), { timegapLimit: p } = ae(e), a = c(() => {
       if (!e.showMore)
         return null;
       const t = Array.from(n.value.keys());
@@ -111,41 +110,41 @@ const ee = Symbol("timeline register entry injection key"), te = Symbol("timelin
       showMoreIndex: i,
       hiddenItems: r,
       visibleIndexes: a,
-      timegapLimit: f
+      timegapLimit: p
     };
     V(ee, d), V(te, v);
   }
 });
 const Ne = { class: "b-timeline" };
-function Ae(e, n, r, l, f, a) {
+function Oe(e, n, r, l, p, a) {
   return s(), _("ol", Ne, [
     oe(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const mt = /* @__PURE__ */ F(Me, [["render", Ae], ["__scopeId", "data-v-7d153d9c"]]);
+const mt = /* @__PURE__ */ F(Me, [["render", Oe], ["__scopeId", "data-v-81d01ba5"]]);
 let Z = 0;
-const Oe = {
+const Ae = {
   beforeCreate() {
     this.uuid = Z.toString(), Z += 1;
   }
-}, Be = (e) => (G("data-v-f702de38"), e = e(), x(), e), De = { key: 0 }, Le = /* @__PURE__ */ Be(() => /* @__PURE__ */ p("path", {
+}, Be = (e) => (G("data-v-f702de38"), e = e(), x(), e), De = { key: 0 }, Le = /* @__PURE__ */ Be(() => /* @__PURE__ */ f("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Re(e, n, r, l, f, a) {
+function Re(e, n, r, l, p, a) {
   return s(), _("svg", X({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (s(), _("title", De, b(e.$attrs["svg-title"]), 1)) : h("", !0),
+    e.$attrs["svg-title"] ? (s(), _("title", De, y(e.$attrs["svg-title"]), 1)) : h("", !0),
     Le
   ], 16);
 }
-const ke = /* @__PURE__ */ F(Oe, [["render", Re], ["__scopeId", "data-v-f702de38"]]), Q = {
+const ke = /* @__PURE__ */ F(Ae, [["render", Re], ["__scopeId", "data-v-f702de38"]]), Q = {
   "en-US": {
     timegap: "{timegap} passed between the timeline events",
     showMore: "Show {items} more",
@@ -158,13 +157,12 @@ const ke = /* @__PURE__ */ F(Oe, [["render", Re], ["__scopeId", "data-v-f702de38
     BentoDate: de,
     BentoTag: ue,
     BentoTypography: ce,
-    BentoStructuredList: fe,
+    BentoStructuredList: pe,
     BentoStructuredListItem: he,
-    CrossCircleIcon: ye,
+    CrossCircleIcon: be,
     CheckedCircleIcon: ge,
     SquareSmallIcon: ke
   },
-  inheritAttrs: !1,
   i18n: { messages: Q },
   props: {
     /**
@@ -228,21 +226,21 @@ const ke = /* @__PURE__ */ F(Oe, [["render", Re], ["__scopeId", "data-v-f702de38
       "b-timeline-item__title--default": e.variant === T.DEFAULT
     }));
     V(ve, !0);
-    const f = j(ee), { timelineEntries: a, index: i } = f({
+    const p = j(ee), { timelineEntries: a, index: i } = p({
       title: e.title,
       date: e.timestamp.date
     }), { showAll: d, showMoreIndex: v, hiddenItems: t, visibleIndexes: u, timegapLimit: m } = j(te), g = c(() => d.value || !u.value), E = c(() => g.value ? !0 : u.value.includes(i)), o = c(() => {
       var U;
       if (!m.value)
         return null;
-      const N = (U = a.value[i - 1]) == null ? void 0 : U.date, A = g.value || u.value.includes(i - 1);
-      if (!N || !A)
+      const N = (U = a.value[i - 1]) == null ? void 0 : U.date, O = g.value || u.value.includes(i - 1);
+      if (!N || !O)
         return null;
-      const { date: O } = a.value[i], ne = parseInt(
-        P(N, O, { unit: m.value.unit }),
+      const { date: A } = a.value[i], ne = parseInt(
+        P(N, A, { unit: m.value.unit }),
         10
       );
-      return m.value.amount < ne ? P(N, O, { roundingMethod: "floor" }) : null;
+      return m.value.amount < ne ? P(N, A, { roundingMethod: "floor" }) : null;
     }), L = c(() => o.value ? n("timegap", { timegap: o.value }) : ""), R = c(() => t.value && v.value === i), k = c(() => i === a.value.length - 1);
     return {
       // Values
@@ -261,23 +259,23 @@ const ke = /* @__PURE__ */ F(Oe, [["render", Re], ["__scopeId", "data-v-f702de38
       // Types
       BentoTimelineItemVariant: T,
       BentoTypographyElement: _e,
-      BentoTypographyVariant: pe,
+      BentoTypographyVariant: fe,
       BentoButtonVariant: me
     };
   }
 });
-const ie = (e) => (G("data-v-a3e9192c"), e = e(), x(), e), Ve = {
+const ie = (e) => (G("data-v-22f8a713"), e = e(), x(), e), Ve = {
   key: 0,
   class: "b-timeline-item"
 }, Fe = {
   key: 0,
   class: "b-timeline-item__row"
-}, Ue = /* @__PURE__ */ ie(() => /* @__PURE__ */ p("div", {
+}, Ue = /* @__PURE__ */ ie(() => /* @__PURE__ */ f("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__separator" })
+  /* @__PURE__ */ f("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
+  /* @__PURE__ */ f("div", { class: "b-timeline-item__separator" })
 ], -1)), Ye = { class: "b-timeline-item__content" }, je = { class: "b-timeline-item__row" }, qe = {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
@@ -290,37 +288,37 @@ const ie = (e) => (G("data-v-a3e9192c"), e = e(), x(), e), Ve = {
 }, Ke = {
   key: 1,
   class: "b-timeline-item__row"
-}, Pe = /* @__PURE__ */ ie(() => /* @__PURE__ */ p("div", {
+}, Pe = /* @__PURE__ */ ie(() => /* @__PURE__ */ f("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__separator" })
+  /* @__PURE__ */ f("div", { class: "b-timeline-item__separator" })
 ], -1)), Ze = { class: "b-timeline-item__content" };
-function Qe(e, n, r, l, f, a) {
+function Qe(e, n, r, l, p, a) {
   const i = w("bento-typography"), d = w("bento-date"), v = w("bento-structured-list-item"), t = w("bento-structured-list"), u = w("bento-tag"), m = w("bento-button");
   return e.isVisible ? (s(), _("li", Ve, [
     e.timegap ? (s(), _("div", Fe, [
       Ue,
-      p("div", Ye, [
+      f("div", Ye, [
         S(i, {
           class: "b-timeline-item__timegap",
           "aria-label": e.timegapAriaLabel
         }, {
-          default: y(() => [
-            I(b(e.timegap), 1)
+          default: b(() => [
+            I(y(e.timegap), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])
       ])
     ])) : h("", !0),
-    p("div", je, [
-      p("div", qe, [
+    f("div", je, [
+      f("div", qe, [
         (s(), C(se(e.variant), {
           class: q(["b-timeline-item__icon", e.iconConditionalClasses])
         }, null, 8, ["class"])),
         e.isLastItem ? h("", !0) : (s(), _("div", ze))
       ]),
-      p("div", He, [
+      f("div", He, [
         S(i, {
           el: e.BentoTypographyElement.DIV,
           variant: e.BentoTypographyVariant.BODY,
@@ -328,8 +326,8 @@ function Qe(e, n, r, l, f, a) {
           class: q(["b-timeline-item__title", e.titleConditionalClasses]),
           role: "heading"
         }, {
-          default: y(() => [
-            I(b(e.title), 1)
+          default: b(() => [
+            I(y(e.title), 1)
           ]),
           _: 1
         }, 8, ["el", "variant", "class"]),
@@ -339,13 +337,13 @@ function Qe(e, n, r, l, f, a) {
           el: e.BentoTypographyElement.DIV,
           variant: e.BentoTypographyVariant.CAPTION
         }, {
-          default: y(() => [
+          default: b(() => [
             S(d, {
               date: e.timestamp.date,
               format: e.timestamp.format,
               "disable-typography": ""
             }, null, 8, ["date", "format"]),
-            I(" " + b(e.timestamp.value), 1)
+            I(" " + y(e.timestamp.value), 1)
           ]),
           _: 1
         }, 8, ["el", "variant"])) : h("", !0),
@@ -355,13 +353,13 @@ function Qe(e, n, r, l, f, a) {
           el: e.BentoTypographyElement.DIV,
           variant: e.BentoTypographyVariant.CAPTION
         }, {
-          default: y(() => [
+          default: b(() => [
             S(d, {
               date: e.additionalTimestamp.date,
               format: e.additionalTimestamp.format,
               "disable-typography": ""
             }, null, 8, ["date", "format"]),
-            I(" " + b(e.additionalTimestamp.value), 1)
+            I(" " + y(e.additionalTimestamp.value), 1)
           ]),
           _: 1
         }, 8, ["el", "variant"])) : h("", !0),
@@ -371,24 +369,24 @@ function Qe(e, n, r, l, f, a) {
           variant: e.BentoTypographyVariant.BODY,
           class: "b-timeline-item__description"
         }, {
-          default: y(() => [
-            I(b(e.description), 1)
+          default: b(() => [
+            I(y(e.description), 1)
           ]),
           _: 1
         }, 8, ["el", "variant"])) : h("", !0),
         e.dataList ? (s(), _("div", Je, [
           S(t, null, {
-            default: y(() => [
+            default: b(() => [
               (s(!0), _($, null, re(e.dataList, (g) => (s(), C(v, {
                 key: e.generateUid(g.label),
                 label: g.label
               }, {
-                default: y(() => [
+                default: b(() => [
                   S(i, {
                     variant: e.BentoTypographyVariant.CAPTION
                   }, {
-                    default: y(() => [
-                      I(b(g.value), 1)
+                    default: b(() => [
+                      I(y(g.value), 1)
                     ]),
                     _: 2
                   }, 1032, ["variant"])
@@ -404,17 +402,17 @@ function Qe(e, n, r, l, f, a) {
     ]),
     e.displayShowMoreButton ? (s(), _("div", Ke, [
       Pe,
-      p("div", Ze, [
+      f("div", Ze, [
         S(m, {
           class: "b-timeline__show-more",
           variant: e.BentoButtonVariant.TERTIARY,
           onClick: n[0] || (n[0] = (g) => e.showAll = !e.showAll)
         }, {
-          default: y(() => [
+          default: b(() => [
             e.showAll ? (s(), _($, { key: 1 }, [
-              I(b(e.t("showLess")), 1)
+              I(y(e.t("showLess")), 1)
             ], 64)) : (s(), _($, { key: 0 }, [
-              I(b(e.t("showMore", { items: e.hiddenItems })), 1)
+              I(y(e.t("showMore", { items: e.hiddenItems })), 1)
             ], 64))
           ]),
           _: 1
@@ -423,7 +421,7 @@ function Qe(e, n, r, l, f, a) {
     ])) : h("", !0)
   ])) : h("", !0);
 }
-const dt = /* @__PURE__ */ F($e, [["render", Qe], ["__scopeId", "data-v-a3e9192c"]]);
+const dt = /* @__PURE__ */ F($e, [["render", Qe], ["__scopeId", "data-v-22f8a713"]]);
 export {
   mt as BentoTimeline,
   Ce as BentoTimelineGapUnit,