@adyen/bento-vue3 1.26.0 → 1.28.0

package/dist/chunks/{cross-circle-fill.81925c7f.js.map → cross-circle-fill.vLaelNTN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cross-circle-fill.81925c7f.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill.vue"],"sourcesContent":["\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><g :clip-path=\"'url(#uia-icons-16-cross_circle_fill__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM6.00011 4.93945L4.93945 6.00011L6.93945 8.00011L4.93945 10.0001L6.00011 11.0608L8.00011 9.06077L10.0001 11.0608L11.0608 10.0001L9.06077 8.00011L11.0608 6.00011L10.0001 4.93945L8.00011 6.93945L6.00011 4.93945Z\"/></g><defs><clipPath :id=\"'uia-icons-16-cross_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARwQ,MAAA;AAAA,EAAe,GAAA;;;;EAAob,OAAA;AAAA,EAAW,QAAA;AAAA,EAAY,MAAA;;;;;AAA1uB,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;MAAuE,aAAA,2CAAAA,EAAA,OAAA;AAAA;;;QAAqd,IAAA,sCAAAA,EAAA;AAAA;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"cross-circle-fill.vLaelNTN.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill.vue"],"sourcesContent":["\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><g :clip-path=\"'url(#uia-icons-16-cross_circle_fill__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM6.00011 4.93945L4.93945 6.00011L6.93945 8.00011L4.93945 10.0001L6.00011 11.0608L8.00011 9.06077L10.0001 11.0608L11.0608 10.0001L9.06077 8.00011L11.0608 6.00011L10.0001 4.93945L8.00011 6.93945L6.00011 4.93945Z\"/></g><defs><clipPath :id=\"'uia-icons-16-cross_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARwQ,MAAA;AAAA,EAAe,GAAA;;;;EAAob,OAAA;AAAA,EAAW,QAAA;AAAA,EAAY,MAAA;;;;;AAA1uB,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;MAAuE,aAAA,2CAAAA,EAAA,OAAA;AAAA;;;QAAqd,IAAA,sCAAAA,EAAA;AAAA;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/cross-small.48UCoOqB.js

@@ -0,0 +1,29 @@
+import { openBlock as e, createElementBlock as o, mergeProps as r, toDisplayString as i, createCommentVNode as n, createElementVNode as l } from "vue";
+import { _ as a } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/cross.css";
+let s = 0;
+const c = {
+  beforeCreate() {
+    this.uuid = s.toString(), s += 1;
+  }
+}, p = { key: 0 }, m = /* @__PURE__ */ l("path", {
+  fill: "#00112C",
+  d: "M9.06089 8L11.5608 5.50011L10.5001 4.43945L8.00023 6.93934L5.50034 4.43945L4.43968 5.50011L6.93957 8L4.43945 10.5001L5.50011 11.5608L8.00023 9.06066L10.5003 11.5608L11.561 10.5001L9.06089 8Z"
+}, null, -1);
+function L(t, d, g, u, _, f) {
+  return e(), o("svg", r({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (e(), o("title", p, i(t.$attrs["svg-title"]), 1)) : n("", !0),
+    m
+  ], 16);
+}
+const w = /* @__PURE__ */ a(c, [["render", L]]);
+export {
+  w as C
+};
+//# sourceMappingURL=cross-small.48UCoOqB.js.map

package/dist/chunks/{cross-small.9bc6a02f.js.map → cross-small.48UCoOqB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cross-small.9bc6a02f.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-small.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M9.06089 8L11.5608 5.50011L10.5001 4.43945L8.00023 6.93934L5.50034 4.43945L4.43968 5.50011L6.93957 8L4.43945 10.5001L5.50011 11.5608L8.00023 9.06066L10.5003 11.5608L11.561 10.5001L9.06089 8Z\"/></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkM,MAAA;AAAA,EAAe,GAAA;;;AAAzN,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"cross-small.48UCoOqB.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-small.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M9.06089 8L11.5608 5.50011L10.5001 4.43945L8.00023 6.93934L5.50034 4.43945L4.43968 5.50011L6.93957 8L4.43945 10.5001L5.50011 11.5608L8.00023 9.06066L10.5003 11.5608L11.561 10.5001L9.06089 8Z\"/></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkM,MAAA;AAAA,EAAe,GAAA;;;AAAzN,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/cross.BlL0FyHo.js

@@ -0,0 +1,29 @@
+import { openBlock as e, createElementBlock as o, mergeProps as r, toDisplayString as i, createCommentVNode as n, createElementVNode as l } from "vue";
+import { _ as a } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/cross.css";
+let s = 0;
+const c = {
+  beforeCreate() {
+    this.uuid = s.toString(), s += 1;
+  }
+}, p = { key: 0 }, m = /* @__PURE__ */ l("path", {
+  fill: "#00112C",
+  d: "M8.00023 9.06089L12.0001 13.0608L13.0608 12.0001L9.06089 8.00023L13.061 4.00011L12.0003 2.93945L8.00023 6.93957L4.00011 2.93945L2.93945 4.00011L6.93957 8.00023L2.93968 12.0001L4.00034 13.0608L8.00023 9.06089Z"
+}, null, -1);
+function L(t, d, g, u, _, f) {
+  return e(), o("svg", r({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (e(), o("title", p, i(t.$attrs["svg-title"]), 1)) : n("", !0),
+    m
+  ], 16);
+}
+const w = /* @__PURE__ */ a(c, [["render", L]]);
+export {
+  w as C
+};
+//# sourceMappingURL=cross.BlL0FyHo.js.map

package/dist/chunks/{cross.a60533f6.js.map → cross.BlL0FyHo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cross.a60533f6.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M8.00023 9.06089L12.0001 13.0608L13.0608 12.0001L9.06089 8.00023L13.061 4.00011L12.0003 2.93945L8.00023 6.93957L4.00011 2.93945L2.93945 4.00011L6.93957 8.00023L2.93968 12.0001L4.00034 13.0608L8.00023 9.06089Z\"/></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkM,MAAA;AAAA,EAAe,GAAA;;;AAAzN,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"cross.BlL0FyHo.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross.vue"],"sourcesContent":["\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=\"#00112C\" d=\"M8.00023 9.06089L12.0001 13.0608L13.0608 12.0001L9.06089 8.00023L13.061 4.00011L12.0003 2.93945L8.00023 6.93957L4.00011 2.93945L2.93945 4.00011L6.93957 8.00023L2.93968 12.0001L4.00034 13.0608L8.00023 9.06089Z\"/></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>\n    @import '../css/main.css';\n</style>\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","_hoisted_1","toDisplayString"],"mappings":";;;AAKI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;EARkM,MAAA;AAAA,EAAe,GAAA;;;AAAzN,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;6BAAYH,EAAA,GAAAC,EAAA,SAAAG,GAAAC,EAAAF,EAAA,OAAA,WAAA,CAAA,GAAA,CAAA;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/currency.CgVd9fQN.js

@@ -0,0 +1,121 @@
+import { defineComponent as i, computed as U, resolveComponent as f, openBlock as T, createElementBlock as A, createBlock as p, withCtx as H, createTextVNode as l, toDisplayString as N, Fragment as Y } from "vue";
+import { B as Z } from "./typography.D7onlQ9v.js";
+import { g as W } from "./get-slot-text.D5WBGjic.js";
+import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+const g = [
+  {
+    exponent: 0,
+    currencies: [
+      "CVE",
+      "DJF",
+      "GNF",
+      "IDR",
+      "JPY",
+      "KMF",
+      "KRW",
+      "PYG",
+      "RWF",
+      "UGX",
+      "VND",
+      "VUV",
+      "XAF",
+      "XOF",
+      "XPF"
+    ]
+  },
+  {
+    exponent: 1,
+    currencies: ["MRO"]
+  },
+  {
+    exponent: 3,
+    currencies: ["BHD", "IQD", "JOD", "KWD", "LYD", "OMR", "TND"]
+  }
+], F = (D) => {
+  var a;
+  return ((a = g.find((R) => R.currencies.includes(D))) == null ? void 0 : a.exponent) ?? 2;
+}, X = (D) => {
+  const a = F(D.currency), R = Number(D.value);
+  return Math.round(R * 10 ** a);
+}, v = (D, a) => (
+  // Amount is in minor units and have to be converted to number with fraction digits
+  // return (amount.value * 100) / 10 ** exp;
+  D.value / 10 ** a
+);
+function J(D, a = {}, R = !1) {
+  const K = (a == null ? void 0 : a.exponent) ?? F(D.currency), M = R ? X(D) : D.value, P = { ...D, value: M }, L = v(P, K), m = L < 0 ? "decimal" : (a == null ? void 0 : a.style) || "currency", G = a != null && a.optionalFractions ? 0 : K, E = a != null && a.highPrecision ? 10 : K;
+  return {
+    value: L,
+    format: {
+      style: m,
+      currency: D.currency,
+      currencyDisplay: "symbol",
+      minimumFractionDigits: G,
+      maximumFractionDigits: E
+    }
+  };
+}
+const b = (D, a, R) => {
+  const K = { value: parseFloat(D), currency: a }, M = J(K, { style: "decimal" }, R);
+  return new Intl.NumberFormat("en-US", M.format).format(M.value);
+};
+var s = /* @__PURE__ */ ((D) => (D.AFA = "AFA", D.ALL = "ALL", D.DZD = "DZD", D.AOA = "AOA", D.ARS = "ARS", D.AMD = "AMD", D.AWG = "AWG", D.AUD = "AUD", D.AZN = "AZN", D.BSD = "BSD", D.BHD = "BHD", D.BDT = "BDT", D.BBD = "BBD", D.BYR = "BYR", D.BEF = "BEF", D.BZD = "BZD", D.BMD = "BMD", D.BTN = "BTN", D.BTC = "BTC", D.BOB = "BOB", D.BAM = "BAM", D.BWP = "BWP", D.BRL = "BRL", D.GBP = "GBP", D.BND = "BND", D.BGN = "BGN", D.BIF = "BIF", D.KHR = "KHR", D.CAD = "CAD", D.CVE = "CVE", D.KYD = "KYD", D.XOF = "XOF", D.XAF = "XAF", D.XPF = "XPF", D.CLP = "CLP", D.CLF = "CLF", D.CNY = "CNY", D.COP = "COP", D.KMF = "KMF", D.CDF = "CDF", D.CRC = "CRC", D.HRK = "HRK", D.CUC = "CUC", D.CZK = "CZK", D.DKK = "DKK", D.DJF = "DJF", D.DOP = "DOP", D.XCD = "XCD", D.EGP = "EGP", D.ERN = "ERN", D.EEK = "EEK", D.ETB = "ETB", D.EUR = "EUR", D.FKP = "FKP", D.FJD = "FJD", D.GMD = "GMD", D.GEL = "GEL", D.DEM = "DEM", D.GHS = "GHS", D.GIP = "GIP", D.GRD = "GRD", D.GTQ = "GTQ", D.GNF = "GNF", D.GYD = "GYD", D.HTG = "HTG", D.HNL = "HNL", D.HKD = "HKD", D.HUF = "HUF", D.ISK = "ISK", D.INR = "INR", D.IDR = "IDR", D.IRR = "IRR", D.IQD = "IQD", D.ILS = "ILS", D.ITL = "ITL", D.JMD = "JMD", D.JPY = "JPY", D.JOD = "JOD", D.KZT = "KZT", D.KES = "KES", D.KWD = "KWD", D.KGS = "KGS", D.LAK = "LAK", D.LVL = "LVL", D.LBP = "LBP", D.LSL = "LSL", D.LRD = "LRD", D.LYD = "LYD", D.LTC = "LTC", D.LTL = "LTL", D.MOP = "MOP", D.MKD = "MKD", D.MGA = "MGA", D.MWK = "MWK", D.MYR = "MYR", D.MVR = "MVR", D.MRO = "MRO", D.MUR = "MUR", D.MXN = "MXN", D.MDL = "MDL", D.MNT = "MNT", D.MAD = "MAD", D.MZM = "MZM", D.MMK = "MMK", D.NAD = "NAD", D.NPR = "NPR", D.ANG = "ANG", D.TWD = "TWD", D.NZD = "NZD", D.NIO = "NIO", D.NGN = "NGN", D.KPW = "KPW", D.NOK = "NOK", D.OMR = "OMR", D.PKR = "PKR", D.PAB = "PAB", D.PGK = "PGK", D.PYG = "PYG", D.PEN = "PEN", D.PHP = "PHP", D.PLN = "PLN", D.QAR = "QAR", D.RON = "RON", D.RUB = "RUB", D.RWF = "RWF", D.SVC = "SVC", D.WST = "WST", D.STD = "STD", D.SAR = "SAR", D.RSD = "RSD", D.SCR = "SCR", D.SLL = "SLL", D.SGD = "SGD", D.SKK = "SKK", D.SBD = "SBD", D.SOS = "SOS", D.ZAR = "ZAR", D.KRW = "KRW", D.SSP = "SSP", D.XDR = "XDR", D.LKR = "LKR", D.SHP = "SHP", D.SDG = "SDG", D.SRD = "SRD", D.SZL = "SZL", D.SEK = "SEK", D.CHF = "CHF", D.SYP = "SYP", D.TJS = "TJS", D.TZS = "TZS", D.THB = "THB", D.TOP = "TOP", D.TTD = "TTD", D.TND = "TND", D.TRY = "TRY", D.TMT = "TMT", D.UGX = "UGX", D.UAH = "UAH", D.AED = "AED", D.UYU = "UYU", D.USD = "USD", D.UZS = "UZS", D.VUV = "VUV", D.VEF = "VEF", D.VND = "VND", D.YER = "YER", D.ZMK = "ZMK", D.ZWL = "ZWL", D))(s || {});
+const _ = i({
+  name: "bento-currency",
+  components: { BentoTypography: Z },
+  props: {
+    currency: {
+      type: String,
+      default: s.EUR,
+      validator: (D) => Object.values(s).includes(D)
+    },
+    /**
+     * Accepts currency value in major units instead of minor ones
+     */
+    majorUnits: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
+    disableTypography: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(D, { slots: a }) {
+    return {
+      // Values
+      formattedCurrency: U(() => {
+        const K = a.default ? W(a)("default") : null;
+        return b(K, D.currency, D.majorUnits);
+      })
+    };
+  }
+}), h = { class: "b-currency" };
+function x(D, a, R, K, M, P) {
+  const L = f("bento-typography");
+  return T(), A("div", h, [
+    D.disableTypography ? (T(), A(Y, { key: 1 }, [
+      l(N(D.formattedCurrency) + " " + N(D.currency), 1)
+    ], 64)) : (T(), p(L, {
+      key: 0,
+      class: "b-currency__amount",
+      el: "span",
+      variant: "body",
+      strong: ""
+    }, {
+      default: H(() => [
+        l(N(D.formattedCurrency) + " " + N(D.currency), 1)
+      ]),
+      _: 1
+    }))
+  ]);
+}
+const w = /* @__PURE__ */ V(_, [["render", x]]);
+export {
+  s as B,
+  w as c
+};
+//# sourceMappingURL=currency.CgVd9fQN.js.map

package/dist/chunks/currency.CgVd9fQN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency.CgVd9fQN.js","sources":["../../../vue2/src/utils/ts/currency/countries-list.ts","../../../vue2/src/utils/ts/currency/currency.ts","../../../vue2/src/components/currency/currency.types.ts","../../../vue2/src/components/currency/currency.vue"],"sourcesContent":["/**\n * Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * Since the majority of the currencies have an exponent equal to 2, they are not listed here.\n * https://docs.adyen.com/development-resources/currency-codes\n * @type {Array}\n * @internal\n */\nexport const currencyExponentMap = [\n    {\n        exponent: 0,\n        currencies: [\n            'CVE',\n            'DJF',\n            'GNF',\n            'IDR',\n            'JPY',\n            'KMF',\n            'KRW',\n            'PYG',\n            'RWF',\n            'UGX',\n            'VND',\n            'VUV',\n            'XAF',\n            'XOF',\n            'XPF',\n        ],\n    },\n    {\n        exponent: 1,\n        currencies: ['MRO'],\n    },\n    {\n        exponent: 3,\n        currencies: ['BHD', 'IQD', 'JOD', 'KWD', 'LYD', 'OMR', 'TND'],\n    },\n];\n","import { CurrencyAmount, CurrencyOptions, NumberFormatOptionsResult } from './currency.types';\nimport { currencyExponentMap } from './countries-list';\n\n/**\n * Returns exponent for specified currency code.\n */\nexport const getExponent = (currencyCode: string): number =>\n    currencyExponentMap.find(obj => obj.currencies.includes(currencyCode))?.exponent ?? 2;\n\n/**\n * Converts passed amount from regular to minor units, based on currency exponent\n */\nexport const getMinorUnitsAmount = (amount: CurrencyAmount): number => {\n    const exponent = getExponent(amount.currency);\n    const value = Number(amount.value);\n\n    return Math.round(value * 10 ** exponent);\n};\n\n/**\n * Returns normalized amount value from minor units as decimal point number (when exponent is more than zero).\n */\nexport const getNormalizedAmount = (amount: CurrencyAmount, exponent: number) =>\n    // Amount is in minor units and have to be converted to number with fraction digits\n    // return (amount.value * 100) / 10 ** exp;\n    amount.value / 10 ** exponent;\n\n/**\n * /**\n * Prepares amount to be rendered by Intl.NumberFormat function.\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n *\n * It enables language-sensitive number formatting.\n * Adds currency symbol and ISO code based on provided options\n * The result of execution - is a configuration object that is used in 'getLocalizedCurrencyValue' function\n *\n * @param amount - the value and currency to format.\n * @param options - the formatting options that are passed to the Intl.NumberFormat function.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport function getNumberFormatOptions(\n    amount: CurrencyAmount,\n    options: CurrencyOptions = {},\n    majorUnits = false\n): NumberFormatOptionsResult {\n    // Exponent is based on currency, if not specified explicitly.\n    const exp = options?.exponent ?? getExponent(amount.currency);\n    // Minor Units have to be retrieved from component passed amount\n    const minorAmount = majorUnits ? getMinorUnitsAmount(amount) : amount.value;\n    const amountInMinorUnits: CurrencyAmount = { ...amount, value: minorAmount };\n    // Amount is in minor units and have to be converted to number with fraction digits\n    const value = getNormalizedAmount(amountInMinorUnits, exp);\n    // This is the requirement for currency component - to remove currency symbol for negative values\n    const style = value < 0 ? 'decimal' : options?.style || 'currency';\n    // If optionalFractions is true, numbers will not contain fraction digits when they are zero (e.g. 100.00 will be 100)\n    const minimumFractionDigits = options?.optionalFractions ? 0 : exp;\n    // If highPrecision is true, numbers can contain 10 fraction digits (highest precision in Adyen is about 5)\n    const maximumFractionDigits = options?.highPrecision ? 10 : exp;\n\n    return {\n        value,\n        format: {\n            style,\n            currency: amount.currency,\n            currencyDisplay: 'symbol',\n            minimumFractionDigits,\n            maximumFractionDigits,\n        },\n    };\n}\n\n/**\n * Get a formatted and localised currency string given an amount and currency type.\n *\n * @param amountValue - the amount of the currency.\n * @param currency - the ISO 4217 currency code.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport const getLocalizedCurrencyValue = (amountValue: string, currency: string, majorUnits?: boolean): string => {\n    const amount: CurrencyAmount = { value: parseFloat(amountValue), currency };\n    const numberFormatOptions = getNumberFormatOptions(amount, { style: 'decimal' }, majorUnits);\n    // TODO replace hardcoded locale with dynamic one, when i18n strategy is defined\n    const formatter = new Intl.NumberFormat('en-US', numberFormatOptions.format);\n\n    return formatter.format(numberFormatOptions.value);\n};\n","export enum BentoCurrencyISOCode {\n    AFA = 'AFA',\n    ALL = 'ALL',\n    DZD = 'DZD',\n    AOA = 'AOA',\n    ARS = 'ARS',\n    AMD = 'AMD',\n    AWG = 'AWG',\n    AUD = 'AUD',\n    AZN = 'AZN',\n    BSD = 'BSD',\n    BHD = 'BHD',\n    BDT = 'BDT',\n    BBD = 'BBD',\n    BYR = 'BYR',\n    BEF = 'BEF',\n    BZD = 'BZD',\n    BMD = 'BMD',\n    BTN = 'BTN',\n    BTC = 'BTC',\n    BOB = 'BOB',\n    BAM = 'BAM',\n    BWP = 'BWP',\n    BRL = 'BRL',\n    GBP = 'GBP',\n    BND = 'BND',\n    BGN = 'BGN',\n    BIF = 'BIF',\n    KHR = 'KHR',\n    CAD = 'CAD',\n    CVE = 'CVE',\n    KYD = 'KYD',\n    XOF = 'XOF',\n    XAF = 'XAF',\n    XPF = 'XPF',\n    CLP = 'CLP',\n    CLF = 'CLF',\n    CNY = 'CNY',\n    COP = 'COP',\n    KMF = 'KMF',\n    CDF = 'CDF',\n    CRC = 'CRC',\n    HRK = 'HRK',\n    CUC = 'CUC',\n    CZK = 'CZK',\n    DKK = 'DKK',\n    DJF = 'DJF',\n    DOP = 'DOP',\n    XCD = 'XCD',\n    EGP = 'EGP',\n    ERN = 'ERN',\n    EEK = 'EEK',\n    ETB = 'ETB',\n    EUR = 'EUR',\n    FKP = 'FKP',\n    FJD = 'FJD',\n    GMD = 'GMD',\n    GEL = 'GEL',\n    DEM = 'DEM',\n    GHS = 'GHS',\n    GIP = 'GIP',\n    GRD = 'GRD',\n    GTQ = 'GTQ',\n    GNF = 'GNF',\n    GYD = 'GYD',\n    HTG = 'HTG',\n    HNL = 'HNL',\n    HKD = 'HKD',\n    HUF = 'HUF',\n    ISK = 'ISK',\n    INR = 'INR',\n    IDR = 'IDR',\n    IRR = 'IRR',\n    IQD = 'IQD',\n    ILS = 'ILS',\n    ITL = 'ITL',\n    JMD = 'JMD',\n    JPY = 'JPY',\n    JOD = 'JOD',\n    KZT = 'KZT',\n    KES = 'KES',\n    KWD = 'KWD',\n    KGS = 'KGS',\n    LAK = 'LAK',\n    LVL = 'LVL',\n    LBP = 'LBP',\n    LSL = 'LSL',\n    LRD = 'LRD',\n    LYD = 'LYD',\n    LTC = 'LTC',\n    LTL = 'LTL',\n    MOP = 'MOP',\n    MKD = 'MKD',\n    MGA = 'MGA',\n    MWK = 'MWK',\n    MYR = 'MYR',\n    MVR = 'MVR',\n    MRO = 'MRO',\n    MUR = 'MUR',\n    MXN = 'MXN',\n    MDL = 'MDL',\n    MNT = 'MNT',\n    MAD = 'MAD',\n    MZM = 'MZM',\n    MMK = 'MMK',\n    NAD = 'NAD',\n    NPR = 'NPR',\n    ANG = 'ANG',\n    TWD = 'TWD',\n    NZD = 'NZD',\n    NIO = 'NIO',\n    NGN = 'NGN',\n    KPW = 'KPW',\n    NOK = 'NOK',\n    OMR = 'OMR',\n    PKR = 'PKR',\n    PAB = 'PAB',\n    PGK = 'PGK',\n    PYG = 'PYG',\n    PEN = 'PEN',\n    PHP = 'PHP',\n    PLN = 'PLN',\n    QAR = 'QAR',\n    RON = 'RON',\n    RUB = 'RUB',\n    RWF = 'RWF',\n    SVC = 'SVC',\n    WST = 'WST',\n    STD = 'STD',\n    SAR = 'SAR',\n    RSD = 'RSD',\n    SCR = 'SCR',\n    SLL = 'SLL',\n    SGD = 'SGD',\n    SKK = 'SKK',\n    SBD = 'SBD',\n    SOS = 'SOS',\n    ZAR = 'ZAR',\n    KRW = 'KRW',\n    SSP = 'SSP',\n    XDR = 'XDR',\n    LKR = 'LKR',\n    SHP = 'SHP',\n    SDG = 'SDG',\n    SRD = 'SRD',\n    SZL = 'SZL',\n    SEK = 'SEK',\n    CHF = 'CHF',\n    SYP = 'SYP',\n    TJS = 'TJS',\n    TZS = 'TZS',\n    THB = 'THB',\n    TOP = 'TOP',\n    TTD = 'TTD',\n    TND = 'TND',\n    TRY = 'TRY',\n    TMT = 'TMT',\n    UGX = 'UGX',\n    UAH = 'UAH',\n    AED = 'AED',\n    UYU = 'UYU',\n    USD = 'USD',\n    UZS = 'UZS',\n    VUV = 'VUV',\n    VEF = 'VEF',\n    VND = 'VND',\n    YER = 'YER',\n    ZMK = 'ZMK',\n    ZWL = 'ZWL',\n}\n","<template>\n    <div class=\"b-currency\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n            {{ formattedCurrency }} {{ currency }}\n        </bento-typography>\n        <template v-else>{{ formattedCurrency }} {{ currency }}</template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { getLocalizedCurrencyValue } from '@/utils/ts/currency/currency';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoCurrencyISOCode } from '@/components/currency/currency.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    /**\n     * A Currency component is used to display a formatted currency value.\n     *\n     * @example\n     * import { BentoCurrency } from '@adyen/adl-vue-components';\n     * import { BentoCurrency, BentoCurrencyCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCurrency },\n     *     template: `\n     *          <bento-currency :currency=\"CurrencyCode.USD\">\n     *              76.33\n     *          </bento-currency>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-currency',\n        components: { BentoTypography },\n        props: {\n            currency: {\n                type: String as PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>,\n                default: BentoCurrencyISOCode.EUR,\n                validator: (value: BentoCurrencyISOCode) => Object.values(BentoCurrencyISOCode).includes(value),\n            },\n            /**\n             * Accepts currency value in major units instead of minor ones\n             */\n            majorUnits: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Disable the default typography for the component. Only use this when the component is inside another typography component.\n             */\n            disableTypography: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props, { slots }) {\n            const formattedCurrency = computed((): string => {\n                const value = slots.default ? getSlotText(slots)('default') : null;\n                return getLocalizedCurrencyValue(value, props.currency, props.majorUnits);\n            });\n\n            return {\n                // Values\n                formattedCurrency,\n            };\n        },\n    });\n</script>\n"],"names":["currencyExponentMap","getExponent","currencyCode","_a","obj","getMinorUnitsAmount","amount","exponent","value","getNormalizedAmount","getNumberFormatOptions","options","majorUnits","exp","minorAmount","amountInMinorUnits","style","minimumFractionDigits","maximumFractionDigits","getLocalizedCurrencyValue","amountValue","currency","numberFormatOptions","BentoCurrencyISOCode","_sfc_main","defineComponent","BentoTypography","props","slots","computed","getSlotText","_resolveComponent","_createElementBlock","_hoisted_1","_ctx","_openBlock","_createBlock","_component_bento_typography"],"mappings":";;;;AAOO,MAAMA,IAAsB;AAAA,EAC/B;AAAA,IACI,UAAU;AAAA,IACV,YAAY;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAER;AAAA,EACA;AAAA,IACI,UAAU;AAAA,IACV,YAAY,CAAC,KAAK;AAAA,EACtB;AAAA,EACA;AAAA,IACI,UAAU;AAAA,IACV,YAAY,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,EAAA;AAEpE,GC9BaC,IAAc,CAACC,MACxB;;AAAA,WAAAC,IAAAH,EAAoB,KAAK,CAAAI,MAAOA,EAAI,WAAW,SAASF,CAAY,CAAC,MAArE,gBAAAC,EAAwE,aAAY;AAAA,GAK3EE,IAAsB,CAACC,MAAmC;AAC7D,QAAAC,IAAWN,EAAYK,EAAO,QAAQ,GACtCE,IAAQ,OAAOF,EAAO,KAAK;AAEjC,SAAO,KAAK,MAAME,IAAQ,MAAMD,CAAQ;AAC5C,GAKaE,IAAsB,CAACH,GAAwBC;AAAA;AAAA;AAAA,EAGxDD,EAAO,QAAQ,MAAMC;AAAA;AAelB,SAASG,EACZJ,GACAK,IAA2B,CAAA,GAC3BC,IAAa,IACY;AAEzB,QAAMC,KAAMF,KAAA,gBAAAA,EAAS,aAAYV,EAAYK,EAAO,QAAQ,GAEtDQ,IAAcF,IAAaP,EAAoBC,CAAM,IAAIA,EAAO,OAChES,IAAqC,EAAE,GAAGT,GAAQ,OAAOQ,EAAY,GAErEN,IAAQC,EAAoBM,GAAoBF,CAAG,GAEnDG,IAAQR,IAAQ,IAAI,aAAYG,KAAA,gBAAAA,EAAS,UAAS,YAElDM,IAAwBN,KAAA,QAAAA,EAAS,oBAAoB,IAAIE,GAEzDK,IAAwBP,KAAA,QAAAA,EAAS,gBAAgB,KAAKE;AAErD,SAAA;AAAA,IACH,OAAAL;AAAA,IACA,QAAQ;AAAA,MACJ,OAAAQ;AAAA,MACA,UAAUV,EAAO;AAAA,MACjB,iBAAiB;AAAA,MACjB,uBAAAW;AAAA,MACA,uBAAAC;AAAA,IAAA;AAAA,EAER;AACJ;AASO,MAAMC,IAA4B,CAACC,GAAqBC,GAAkBT,MAAiC;AAC9G,QAAMN,IAAyB,EAAE,OAAO,WAAWc,CAAW,GAAG,UAAAC,EAAS,GACpEC,IAAsBZ,EAAuBJ,GAAQ,EAAE,OAAO,aAAaM,CAAU;AAIpF,SAFW,IAAI,KAAK,aAAa,SAASU,EAAoB,MAAM,EAE1D,OAAOA,EAAoB,KAAK;AACrD;ACrFY,IAAAC,sBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OAxKEA,IAAAA,KAAA,CAAA,CAAA;ACgCR,MAAAC,IAAeC,EAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY,EAAE,iBAAAC,EAAgB;AAAA,EAC9B,OAAO;AAAA,IACH,UAAU;AAAA,MACN,MAAM;AAAA,MACN,SAASH,EAAqB;AAAA,MAC9B,WAAW,CAACf,MAAgC,OAAO,OAAOe,CAAoB,EAAE,SAASf,CAAK;AAAA,IAClG;AAAA;AAAA;AAAA;AAAA,IAIA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA;AAAA;AAAA;AAAA,IAIA,mBAAmB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,MAAMmB,GAAO,EAAE,OAAAC,KAAS;AAMb,WAAA;AAAA;AAAA,MAEH,mBAPsBC,EAAS,MAAc;AAC7C,cAAMrB,IAAQoB,EAAM,UAAUE,EAAYF,CAAK,EAAE,SAAS,IAAI;AAC9D,eAAOT,EAA0BX,GAAOmB,EAAM,UAAUA,EAAM,UAAU;AAAA,MAAA,CAC3E;AAAA,IAKD;AAAA,EAAA;AAER,CAAC;;YAlEDI,EAKM,kBAAA;cAJFC,EAEmB,OAAAC,GAAA;AAAA,IAAAC,EAAA;;eAAAC,EAAA,GAFmDC,EAAAC,GAAA;AAAA,MAAC,KAAG;AAAA,MAAO,OAAO;AAAA,MAAQ,IAAA;AAAA,MAAA,SAAA;AAAA;;;;;;;;;;"}

package/dist/chunks/dashboard-section.DKeDjvkB.js

@@ -0,0 +1,167 @@
+import { defineComponent as F, useSlots as R, ref as u, computed as d, watch as g, onUnmounted as O, openBlock as a, createElementBlock as i, createVNode as B, unref as t, mergeProps as H, createSlots as P, withCtx as f, renderSlot as l, createElementVNode as v, normalizeClass as p, createCommentVNode as W, createBlock as I, Fragment as U, renderList as q, onMounted as A } from "vue";
+import { B as E } from "./header.Cr7115vM.js";
+import { a as G, B as J } from "./tabs.TNKpNgTM.js";
+import { a as K } from "./index.Dytpif0G.js";
+import { o as Q } from "./resize.Bqks3WUm.js";
+import { u as N } from "./use-has-slot.B7eQSabc.js";
+import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as X } from "./divider.CnwfddJD.js";
+import "../assets/dashboard-section.css";
+const Y = { class: "b-dashboard-template" }, Z = { class: "b-dashboard-template__container b-dashboard-template__container--tabs" }, x = {
+  key: 2,
+  class: "b-dashboard-template__container"
+}, tt = {}, et = /* @__PURE__ */ F({
+  ...tt,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(c) {
+    const s = c, h = R(), n = N(h), r = u(), o = u(null), m = u(!1);
+    let _ = null;
+    const S = u(!1), y = u(0), k = d(() => o.value && s.stickyFilters), T = d(() => r.value && s.stickyTabs), z = d(() => ({
+      "b-dashboard-template__filters--sticky": s.stickyFilters,
+      "b-dashboard-template__filters--show-border": k.value && !T.value && m.value
+    })), j = d(() => ({
+      "b-dashboard-template__tabs--sticky": s.stickyTabs,
+      "b-dashboard-template__tabs--show-border": s.stickyTabs && S.value
+    })), D = d(() => ({
+      "b-dashboard-template__top-section--sticky": s.stickyTabs || s.stickyFilters
+    })), w = d(() => Object.keys(h).filter((e) => e == null ? void 0 : e.includes("tab-"))), L = (e) => {
+      var b, $;
+      return (($ = (b = s == null ? void 0 : s.tabs.tabs) == null ? void 0 : b[e]) == null ? void 0 : $.title) ?? `Tab ${e + 1}`;
+    }, { y: M } = K();
+    return g(
+      () => o.value,
+      () => {
+        !_ && o.value && (_ = Q(o.value, () => {
+          if (o.value && T.value) {
+            const e = o.value.offsetHeight;
+            y.value = k.value ? e : 0, r.value.tablistwrapper.$el.style.top = `${y.value}px`;
+          }
+        }));
+      }
+    ), g(
+      () => M.value,
+      () => {
+        var e, b;
+        k.value && (m.value = ((e = o.value) == null ? void 0 : e.getBoundingClientRect().top) === 0), T.value && (S.value = ((b = r.value.tablistwrapper.$el) == null ? void 0 : b.getBoundingClientRect().top) === y.value);
+      }
+    ), O(() => {
+      _ == null || _.disconnect();
+    }), (e, b) => (a(), i("main", Y, [
+      B(t(E), H(c.header, {
+        variant: "page",
+        class: "b-dashboard-template__header"
+      }), P({ _: 2 }, [
+        t(n)("infoIconTooltipContent") ? {
+          name: "infoIconTooltipContent",
+          fn: f(() => [
+            l(e.$slots, "infoIconTooltipContent", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040),
+      v("div", {
+        class: p(["b-dashboard-template__top-section", t(D)])
+      }, [
+        t(n)("filters") ? (a(), i("div", {
+          key: 0,
+          ref_key: "filtersRef",
+          ref: o,
+          class: p(["b-dashboard-template__filters", t(z)]),
+          "data-testid": "filters"
+        }, [
+          l(e.$slots, "filters", {}, void 0, !0)
+        ], 2)) : W("", !0),
+        t(w).length > 1 ? (a(), I(t(G), {
+          key: 1,
+          ref_key: "tabsRef",
+          ref: r,
+          "active-tab-index": c.tabs.activeTabIndex,
+          class: p(["b-dashboard-template__tabs", t(j)]),
+          "data-testid": "tabs"
+        }, {
+          default: f(() => [
+            (a(!0), i(U, null, q(t(w), ($, C) => (a(), I(t(J), {
+              key: `tab-${C}`,
+              title: L(C)
+            }, {
+              default: f(() => [
+                v("div", Z, [
+                  l(e.$slots, `tab-${C + 1}`, {}, void 0, !0)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["title"]))), 128))
+          ]),
+          _: 3
+        }, 8, ["active-tab-index", "class"])) : (a(), i("div", x, [
+          l(e.$slots, "default", {}, void 0, !0)
+        ]))
+      ], 2)
+    ]));
+  }
+}), vt = /* @__PURE__ */ V(et, [["__scopeId", "data-v-b18dccc2"]]), ot = {
+  key: 0,
+  class: "b-dashboard-section__controls"
+}, st = {
+  key: 1,
+  class: "b-dashboard-section__content"
+}, at = {
+  key: 2,
+  class: "b-dashboard-section__columns"
+}, nt = { class: "b-dashboard-section__content" }, lt = { class: "b-dashboard-section__content" }, it = {}, dt = /* @__PURE__ */ F({
+  ...it,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(c) {
+    const s = c, h = R(), n = N(h), r = d(() => ({
+      "b-dashboard-section--half-width": s.halfWidth
+    }));
+    return A(() => {
+      if ((n("content-col-1") || n("content-col-2")) && s.halfWidth)
+        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
+    }), (o, m) => (a(), i("div", {
+      class: p(["b-dashboard-section", t(r)])
+    }, [
+      B(t(E), H(c.header, {
+        variant: "component",
+        class: "b-dashboard-template__header"
+      }), P({ _: 2 }, [
+        t(n)("infoIconTooltipContent") ? {
+          name: "infoIconTooltipContent",
+          fn: f(() => [
+            l(o.$slots, "infoIconTooltipContent", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040),
+      t(n)("controls") ? (a(), i("div", ot, [
+        l(o.$slots, "controls", {}, void 0, !0)
+      ])) : W("", !0),
+      !t(n)("content-col-1") && !t(n)("content-col-2") ? (a(), i("div", st, [
+        l(o.$slots, "default", {}, void 0, !0)
+      ])) : (a(), i("div", at, [
+        v("div", nt, [
+          l(o.$slots, "content-col-1", {}, void 0, !0)
+        ]),
+        v("div", lt, [
+          l(o.$slots, "content-col-2", {}, void 0, !0)
+        ])
+      ])),
+      B(t(X), { class: "b-dashboard-section__divider" })
+    ], 2));
+  }
+}), mt = /* @__PURE__ */ V(dt, [["__scopeId", "data-v-55110156"]]);
+export {
+  mt as a,
+  vt as d
+};
+//# sourceMappingURL=dashboard-section.DKeDjvkB.js.map

package/dist/chunks/dashboard-section.DKeDjvkB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-section.DKeDjvkB.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * All the tab properties that can be set on the inner tab components.\n             *  - tabs.activeTabIndex: the currently active tab index.\n             *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n             */\n            tabs?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;iBAhGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAO,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAR,EAAA,SAAAS,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAP,EAAA;AAAA,IAEuB,EAAA,GAG1ES,IAAAJ,EAAA,OAAA;AAAA,MAAwD,sCAAAC,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAJ,EAAA;AAAA,IACgC,EAAA,GAGhFQ,IAAAL,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EK,IAAAN,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAmB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAV,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAU,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAmB,EAAArB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAQ,EAAA,OAAA;AACI,kBAAAc,IAAAtB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAiB,IAAA,GACAxB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJgB;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIJ,EAAA,UAAAgB,IAAAjB,EAAA,UAAA,gBAAAiB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIL,EAAA,UAAAa,IAAAlB,EAAA,MAAA,eAAA,QAAA,gBAAAkB,EAAA,wBAAA,SAAAZ,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAArB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCsB,KAAA,CAAA;;;;;;;;iBAzCA9B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA+B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA9B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAW,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/dashed-underline.DGTW7Y_-.js

@@ -0,0 +1,79 @@
+import { defineComponent as B, useSlots as O, ref as l, computed as c, watch as g, withDirectives as S, openBlock as d, createElementBlock as k, renderSlot as f, unref as n, createBlock as w, withCtx as m, createVNode as E, createTextVNode as I, toDisplayString as b, createCommentVNode as y } from "vue";
+import { B as C } from "./popover.DRb2GW7t.js";
+import { B as D } from "./tooltip.CTR3s-Rm.js";
+import { B as F } from "./typography.D7onlQ9v.js";
+import { u as N } from "./use-has-slot.B7eQSabc.js";
+import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/dashed-underline.css";
+const M = {}, L = /* @__PURE__ */ B({
+  ...M,
+  __name: "dashed-underline",
+  props: {
+    popoverText: { default: null },
+    popoverPosition: { default: "top" },
+    tooltipText: { default: null },
+    tooltipPosition: { default: "top" }
+  },
+  setup(o) {
+    const a = o, v = 200, h = O(), T = N(h), t = l(null), r = l(!1), s = l(), i = () => {
+      r.value = !0, s.value && clearTimeout(s.value);
+    }, u = () => {
+      const e = setTimeout(() => {
+        r.value = !1;
+      }, v);
+      s.value = e;
+    }, P = () => {
+      i();
+    }, _ = (e) => {
+      (!t.value || !((e == null ? void 0 : e.relatedTarget) instanceof Element) || !t.value.contains(e.relatedTarget)) && u();
+    }, p = c(() => a.popoverText || T("popover-content")), x = c(() => !a.tooltipText && !p.value);
+    return g(
+      x,
+      (e) => {
+        if (e)
+          throw new Error(
+            "BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info."
+          );
+      },
+      { immediate: !0 }
+    ), (e, U) => S((d(), k("span", {
+      ref_key: "element",
+      ref: t,
+      class: "b-dashed-underline",
+      tabindex: "0",
+      onMouseenter: i,
+      onMouseleave: u,
+      onFocus: P,
+      onFocusout: _
+    }, [
+      f(e.$slots, "default", {}, void 0, !0),
+      t.value && n(p) ? (d(), w(n(C), {
+        key: 0,
+        open: r.value,
+        "target-element": t.value,
+        position: o.popoverPosition,
+        role: "tooltip",
+        "fit-content": "",
+        "disable-focus-trap": ""
+      }, {
+        default: m(() => [
+          f(e.$slots, "popover-content", {}, () => [
+            E(n(F), null, {
+              default: m(() => [
+                I(b(o.popoverText), 1)
+              ]),
+              _: 1
+            })
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["open", "target-element", "position"])) : y("", !0)
+    ], 32)), [
+      [n(D), o.tooltipText, o.tooltipPosition]
+    ]);
+  }
+}), Y = /* @__PURE__ */ V(L, [["__scopeId", "data-v-6f66ba47"]]);
+export {
+  Y as d
+};
+//# sourceMappingURL=dashed-underline.DGTW7Y_-.js.map

package/dist/chunks/dashed-underline.DGTW7Y_-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-underline.DGTW7Y_-.js","sources":["../../../vue2/src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Text showed in the popover on hover\n             */\n            popoverText?: string;\n\n            /**\n             * Position the popover should take if space is available\n             */\n            popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n            /**\n             * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.\n             */\n            tooltipText?: string;\n\n            /**\n             * Position the tooltip should take if space is available.\n             */\n            tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;\n        }>(),\n        {\n            popoverText: null,\n            popoverPosition: 'top',\n            tooltipText: null,\n            tooltipPosition: 'top',\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAgJI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAxGAC,IAAA,KAgCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAA,MAAA;AACI,OAAA,CAAAR,EAAA,SAAA,GAAA,uBAAA,0BAAA,YAAA,CAAAA,EAAA,MAAA,SAAA,EAAA,aAAA,MACIK,EAAA;AAAA,IACJ,GAGJI,IAAAC,EAAA,MAAAC,EAAA,eAAAb,EAAA,iBAAA,CAAA,GAEAc,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}