@adyen/bento-vue2 1.57.0 → 1.58.0

package/dist/chunks/{header.byOrhnHk.js → header.Rr0lnNYz.js}

@@ -4,12 +4,12 @@ import { u as C } from "./use-has-slot.C9lQZ6nz.js";
 import { B as E, a as O, c as M } from "./typography.J1v_SPG3.js";
 import { u as P } from "./i18n.BQkEbtPM.js";
 import { r as m, t as d, l as B, a as T, g as A } from "./get-date-locale.BN8xEjY0.js";
-import { B as U } from "./button-actions-with-menu.CDLJMdJh.js";
+import { B as U } from "./button-actions-with-menu.BHmj0Xvn.js";
 import { c as X } from "./index.DD7TppDb.js";
 import { d as w } from "./index.BDuTpjD8.js";
 import { c as R } from "./index.BxBB1rsx.js";
-import { I as p } from "./info-icon-with-popover.Cfng_pMj.js";
-import { d as H } from "./button-actions.DUn_iPDm.js";
+import { I as p } from "./info-icon-with-popover.B9QgNl-S.js";
+import { d as H } from "./button-actions.V0te_IrY.js";
 import { n as L } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/header.css";
 function G(e, t) {
@@ -180,4 +180,4 @@ const pt = Z.exports;
 export {
   pt as B
 };
-//# sourceMappingURL=header.byOrhnHk.js.map
+//# sourceMappingURL=header.Rr0lnNYz.js.map

package/dist/chunks/{header.byOrhnHk.js.map → header.Rr0lnNYz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"header.byOrhnHk.js","sources":["../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/_lib/roundingMethods/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInSeconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistance/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistanceToNow/index.js","../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\n\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","var roundingMap = {\n  ceil: Math.ceil,\n  round: Math.round,\n  floor: Math.floor,\n  trunc: function (value) {\n    return value < 0 ? Math.ceil(value) : Math.floor(value);\n  } // Math.trunc is not supported by IE\n\n};\nvar defaultRoundingMethod = 'trunc';\nexport function getRoundingMethod(method) {\n  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];\n}","import differenceInMilliseconds from \"../differenceInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport { getRoundingMethod } from \"../_lib/roundingMethods/index.js\";\n/**\n * @name differenceInSeconds\n * @category Second Helpers\n * @summary Get the number of seconds between the given dates.\n *\n * @description\n * Get the number of seconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @param {Object} [options] - an object with options.\n * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)\n * @returns {Number} the number of seconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many seconds are between\n * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?\n * const result = differenceInSeconds(\n *   new Date(2014, 6, 2, 12, 30, 20, 0),\n *   new Date(2014, 6, 2, 12, 30, 7, 999)\n * )\n * //=> 12\n */\n\nexport default function differenceInSeconds(dateLeft, dateRight, options) {\n  requiredArgs(2, arguments);\n  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;\n  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);\n}","import compareAsc from \"../compareAsc/index.js\";\nimport differenceInMonths from \"../differenceInMonths/index.js\";\nimport differenceInSeconds from \"../differenceInSeconds/index.js\";\nimport defaultLocale from \"../locale/en-US/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport cloneObject from \"../_lib/cloneObject/index.js\";\nimport getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nvar MINUTES_IN_DAY = 1440;\nvar MINUTES_IN_ALMOST_TWO_DAYS = 2520;\nvar MINUTES_IN_MONTH = 43200;\nvar MINUTES_IN_TWO_MONTHS = 86400;\n/**\n * @name formatDistance\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words.\n *\n * | Distance between dates                                            | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance between dates | Result               |\n * |------------------------|----------------------|\n * | 0 secs ... 5 secs      | less than 5 seconds  |\n * | 5 secs ... 10 secs     | less than 10 seconds |\n * | 10 secs ... 20 secs    | less than 20 seconds |\n * | 20 secs ... 40 secs    | half a minute        |\n * | 40 secs ... 60 secs    | less than a minute   |\n * | 60 secs ... 90 secs    | 1 minute             |\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWords ` to `formatDistance`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n * - The order of arguments is swapped to make the function\n *   consistent with `differenceIn...` functions.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWords(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *\n *   // v2.0.0 onward\n *\n *   formatDistance(\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *   ```\n *\n * @param {Date|Number} date - the date\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00, including seconds?\n * const result = formatDistance(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0),\n *   { includeSeconds: true }\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> 'about 1 year ago'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistance(dirtyDate, dirtyBaseDate) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n  requiredArgs(2, arguments);\n  var locale = options.locale || defaultLocale;\n\n  if (!locale.formatDistance) {\n    throw new RangeError('locale must contain formatDistance property');\n  }\n\n  var comparison = compareAsc(dirtyDate, dirtyBaseDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError('Invalid time value');\n  }\n\n  var localizeOptions = cloneObject(options);\n  localizeOptions.addSuffix = Boolean(options.addSuffix);\n  localizeOptions.comparison = comparison;\n  var dateLeft;\n  var dateRight;\n\n  if (comparison > 0) {\n    dateLeft = toDate(dirtyBaseDate);\n    dateRight = toDate(dirtyDate);\n  } else {\n    dateLeft = toDate(dirtyDate);\n    dateRight = toDate(dirtyBaseDate);\n  }\n\n  var seconds = differenceInSeconds(dateRight, dateLeft);\n  var offsetInSeconds = (getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft)) / 1000;\n  var minutes = Math.round((seconds - offsetInSeconds) / 60);\n  var months; // 0 up to 2 mins\n\n  if (minutes < 2) {\n    if (options.includeSeconds) {\n      if (seconds < 5) {\n        return locale.formatDistance('lessThanXSeconds', 5, localizeOptions);\n      } else if (seconds < 10) {\n        return locale.formatDistance('lessThanXSeconds', 10, localizeOptions);\n      } else if (seconds < 20) {\n        return locale.formatDistance('lessThanXSeconds', 20, localizeOptions);\n      } else if (seconds < 40) {\n        return locale.formatDistance('halfAMinute', null, localizeOptions);\n      } else if (seconds < 60) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', 1, localizeOptions);\n      }\n    } else {\n      if (minutes === 0) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', minutes, localizeOptions);\n      }\n    } // 2 mins up to 0.75 hrs\n\n  } else if (minutes < 45) {\n    return locale.formatDistance('xMinutes', minutes, localizeOptions); // 0.75 hrs up to 1.5 hrs\n  } else if (minutes < 90) {\n    return locale.formatDistance('aboutXHours', 1, localizeOptions); // 1.5 hrs up to 24 hrs\n  } else if (minutes < MINUTES_IN_DAY) {\n    var hours = Math.round(minutes / 60);\n    return locale.formatDistance('aboutXHours', hours, localizeOptions); // 1 day up to 1.75 days\n  } else if (minutes < MINUTES_IN_ALMOST_TWO_DAYS) {\n    return locale.formatDistance('xDays', 1, localizeOptions); // 1.75 days up to 30 days\n  } else if (minutes < MINUTES_IN_MONTH) {\n    var days = Math.round(minutes / MINUTES_IN_DAY);\n    return locale.formatDistance('xDays', days, localizeOptions); // 1 month up to 2 months\n  } else if (minutes < MINUTES_IN_TWO_MONTHS) {\n    months = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('aboutXMonths', months, localizeOptions);\n  }\n\n  months = differenceInMonths(dateRight, dateLeft); // 2 months up to 12 months\n\n  if (months < 12) {\n    var nearestMonth = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('xMonths', nearestMonth, localizeOptions); // 1 year up to max Date\n  } else {\n    var monthsSinceStartOfYear = months % 12;\n    var years = Math.floor(months / 12); // N years up to 1 years 3 months\n\n    if (monthsSinceStartOfYear < 3) {\n      return locale.formatDistance('aboutXYears', years, localizeOptions); // N years 3 months up to N years 9 months\n    } else if (monthsSinceStartOfYear < 9) {\n      return locale.formatDistance('overXYears', years, localizeOptions); // N years 9 months up to N year 12 months\n    } else {\n      return locale.formatDistance('almostXYears', years + 1, localizeOptions);\n    }\n  }\n}","import distanceInWords from \"../formatDistance/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatDistanceToNow\n * @category Common Helpers\n * @summary Return the distance between the given date and now in words.\n * @pure false\n *\n * @description\n * Return the distance between the given date and now in words.\n *\n * | Distance to now                                                   | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance to now     | Result               |\n * |---------------------|----------------------|\n * | 0 secs ... 5 secs   | less than 5 seconds  |\n * | 5 secs ... 10 secs  | less than 10 seconds |\n * | 10 secs ... 20 secs | less than 20 seconds |\n * | 20 secs ... 40 secs | half a minute        |\n * | 40 secs ... 60 secs | less than a minute   |\n * | 60 secs ... 90 secs | 1 minute             |\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWordsToNow ` to `formatDistanceToNow`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *   ```\n *\n * @param {Date|Number} date - the given date\n * @param {Object} [options] - the object with options\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result specifies if now is earlier or later than the passed date\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // If today is 1 January 2015, what is the distance to 2 July 2014?\n * var result = formatDistanceToNow(\n *   new Date(2014, 6, 2)\n * )\n * //=> '6 months'\n *\n * @example\n * // If now is 1 January 2015 00:00:00,\n * // what is the distance to 1 January 2015 00:00:15, including seconds?\n * var result = formatDistanceToNow(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   {includeSeconds: true}\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 January 2016, with a suffix?\n * var result = formatDistanceToNow(\n *   new Date(2016, 0, 1),\n *   {addSuffix: true}\n * )\n * //=> 'in about 1 year'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 August 2016 in Esperanto?\n * var eoLocale = require('date-fns/locale/eo')\n * var result = formatDistanceToNow(\n *   new Date(2016, 7, 1),\n *   {locale: eoLocale}\n * )\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistanceToNow(dirtyDate, dirtyOptions) {\n  requiredArgs(1, arguments);\n  return distanceInWords(dirtyDate, Date.now(), dirtyOptions);\n}","import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoHeaderVariant {\n    PAGE = 'page',\n    COMPONENT = 'component',\n}\n\nexport interface BentoHeaderReloadButton {\n    title: string;\n    event?: (event: Event) => void;\n    state?: `${BentoLoadingButtonState}`;\n}\n","<template>\n    <header class=\"b-header\" :class=\"conditionalClasses\">\n        <div class=\"b-header__wrapper\">\n            <div class=\"b-header__title\">\n                <div>\n                    <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n                    <info-icon-with-popover\n                        v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n                        class=\"b-header__tooltip\"\n                        :popover-text=\"infoIconTooltipText\"\n                    >\n                        <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n                            ><slot name=\"infoIconTooltipContent\"\n                        /></template>\n                    </info-icon-with-popover>\n                </div>\n                <div v-if=\"lastUpdated\" class=\"b-header__timestamp-section\">\n                    <bento-typography class=\"b-header__timestamp\" el=\"div\">\n                        {{ timestamp }}\n                    </bento-typography>\n                    <bento-loading-button\n                        v-if=\"reloadButton\"\n                        variant=\"tertiary\"\n                        :state=\"reloadButton.state\"\n                        @click=\"reloadButton.event\"\n                        ><template #iconLeft><reload-icon aria-hidden=\"true\" /></template\n                        >{{ reloadButton.title }}</bento-loading-button\n                    >\n                </div>\n            </div>\n            <button-actions-with-menu\n                v-if=\"actions\"\n                :actions=\"actions\"\n                :displayed-actions=\"2\"\n                class=\"b-header__actions\"\n            />\n        </div>\n    </header>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import ReloadIcon from '@adyen/ui-assets-icons-16/vue/refresh';\n    import { InfoIconWithPopover } from '@/internal';\n    import { BentoButtonActionsList, BentoLoadingButton } from '@/components/button';\n    import { useHasSlot } from '@/composables';\n    import { BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\n    import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n    import formatDistanceToNow from 'date-fns/formatDistanceToNow';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-header',\n        components: {\n            BentoTypography,\n            ButtonActionsWithMenu,\n            BentoLoadingButton,\n            InfoIconWithPopover,\n            ReloadIcon,\n        },\n        props: {\n            /**\n             * Array of BentoButtonActionsList to show to the right of the title\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n            /**\n             * Popover position of the info icon text.\n             */\n            infoIconPopoverPosition: {\n                type: InfoIconWithPopover.props.popoverPosition.type,\n                default: InfoIconWithPopover.props.popoverPosition.default,\n                validator: InfoIconWithPopover.props.popoverPosition.validator,\n            },\n\n            /**\n             * JavaScript \"Date\" object for when the content was last updated\n             */\n            lastUpdated: { type: [Date, Number], default: null },\n\n            /**\n             * Variant represents type of Header\n             * @values page, component\n             */\n            variant: {\n                type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n                default: BentoHeaderVariant.PAGE,\n                validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * Reload button which shows next to the header's timestamp\n             * {@see BentoHeaderReloadButton}\n             */\n            reloadButton: {\n                type: Object as PropType<BentoHeaderReloadButton>,\n                default: null,\n            },\n        },\n        emits: ['reload'],\n        setup(props, { slots }) {\n            const { t, locale } = useI18n<{ message: MessageSchema }>({ messages });\n            // TODO to replace with dynamic import\n            const locales = getDateLocale();\n\n            const conditionalClasses = computed(() => ({\n                'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n            }));\n\n            const typography = computed(() => ({\n                el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n                variant: BentoTypographyVariant.TITLE,\n                medium: props.variant === BentoHeaderVariant.COMPONENT,\n                large: props.variant === BentoHeaderVariant.PAGE,\n            }));\n\n            const timestamp = computed(() =>\n                props.lastUpdated\n                    ? t('lastUpdated', {\n                          date: formatDistanceToNow(props.lastUpdated, {\n                              locale: locales[locale.value.substring(0, 2)] || locales.enUS,\n                          }),\n                      })\n                    : null\n            );\n            return {\n                hasSlot: useHasSlot(slots),\n                conditionalClasses,\n                timestamp,\n                typography,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["differenceInMilliseconds","dateLeft","dateRight","requiredArgs","toDate","roundingMap","value","defaultRoundingMethod","getRoundingMethod","method","differenceInSeconds","options","diff","MINUTES_IN_DAY","MINUTES_IN_ALMOST_TWO_DAYS","MINUTES_IN_MONTH","MINUTES_IN_TWO_MONTHS","formatDistance","dirtyDate","dirtyBaseDate","locale$1","locale","comparison","compareAsc","localizeOptions","cloneObject","seconds","offsetInSeconds","getTimezoneOffsetInMilliseconds","minutes","months","hours","days","differenceInMonths","nearestMonth","monthsSinceStartOfYear","years","formatDistanceToNow","dirtyOptions","BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","messages","BentoTypography","ButtonActionsWithMenu","BentoLoadingButton","InfoIconWithPopover","RefreshIcon","props","slots","t","useI18n","locales","getDateLocale","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","timestamp","useHasSlot"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}
+{"version":3,"file":"header.Rr0lnNYz.js","sources":["../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/_lib/roundingMethods/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInSeconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistance/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistanceToNow/index.js","../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\n\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","var roundingMap = {\n  ceil: Math.ceil,\n  round: Math.round,\n  floor: Math.floor,\n  trunc: function (value) {\n    return value < 0 ? Math.ceil(value) : Math.floor(value);\n  } // Math.trunc is not supported by IE\n\n};\nvar defaultRoundingMethod = 'trunc';\nexport function getRoundingMethod(method) {\n  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];\n}","import differenceInMilliseconds from \"../differenceInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport { getRoundingMethod } from \"../_lib/roundingMethods/index.js\";\n/**\n * @name differenceInSeconds\n * @category Second Helpers\n * @summary Get the number of seconds between the given dates.\n *\n * @description\n * Get the number of seconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @param {Object} [options] - an object with options.\n * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)\n * @returns {Number} the number of seconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many seconds are between\n * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?\n * const result = differenceInSeconds(\n *   new Date(2014, 6, 2, 12, 30, 20, 0),\n *   new Date(2014, 6, 2, 12, 30, 7, 999)\n * )\n * //=> 12\n */\n\nexport default function differenceInSeconds(dateLeft, dateRight, options) {\n  requiredArgs(2, arguments);\n  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;\n  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);\n}","import compareAsc from \"../compareAsc/index.js\";\nimport differenceInMonths from \"../differenceInMonths/index.js\";\nimport differenceInSeconds from \"../differenceInSeconds/index.js\";\nimport defaultLocale from \"../locale/en-US/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport cloneObject from \"../_lib/cloneObject/index.js\";\nimport getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nvar MINUTES_IN_DAY = 1440;\nvar MINUTES_IN_ALMOST_TWO_DAYS = 2520;\nvar MINUTES_IN_MONTH = 43200;\nvar MINUTES_IN_TWO_MONTHS = 86400;\n/**\n * @name formatDistance\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words.\n *\n * | Distance between dates                                            | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance between dates | Result               |\n * |------------------------|----------------------|\n * | 0 secs ... 5 secs      | less than 5 seconds  |\n * | 5 secs ... 10 secs     | less than 10 seconds |\n * | 10 secs ... 20 secs    | less than 20 seconds |\n * | 20 secs ... 40 secs    | half a minute        |\n * | 40 secs ... 60 secs    | less than a minute   |\n * | 60 secs ... 90 secs    | 1 minute             |\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWords ` to `formatDistance`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n * - The order of arguments is swapped to make the function\n *   consistent with `differenceIn...` functions.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWords(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *\n *   // v2.0.0 onward\n *\n *   formatDistance(\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *   ```\n *\n * @param {Date|Number} date - the date\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00, including seconds?\n * const result = formatDistance(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0),\n *   { includeSeconds: true }\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> 'about 1 year ago'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistance(dirtyDate, dirtyBaseDate) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n  requiredArgs(2, arguments);\n  var locale = options.locale || defaultLocale;\n\n  if (!locale.formatDistance) {\n    throw new RangeError('locale must contain formatDistance property');\n  }\n\n  var comparison = compareAsc(dirtyDate, dirtyBaseDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError('Invalid time value');\n  }\n\n  var localizeOptions = cloneObject(options);\n  localizeOptions.addSuffix = Boolean(options.addSuffix);\n  localizeOptions.comparison = comparison;\n  var dateLeft;\n  var dateRight;\n\n  if (comparison > 0) {\n    dateLeft = toDate(dirtyBaseDate);\n    dateRight = toDate(dirtyDate);\n  } else {\n    dateLeft = toDate(dirtyDate);\n    dateRight = toDate(dirtyBaseDate);\n  }\n\n  var seconds = differenceInSeconds(dateRight, dateLeft);\n  var offsetInSeconds = (getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft)) / 1000;\n  var minutes = Math.round((seconds - offsetInSeconds) / 60);\n  var months; // 0 up to 2 mins\n\n  if (minutes < 2) {\n    if (options.includeSeconds) {\n      if (seconds < 5) {\n        return locale.formatDistance('lessThanXSeconds', 5, localizeOptions);\n      } else if (seconds < 10) {\n        return locale.formatDistance('lessThanXSeconds', 10, localizeOptions);\n      } else if (seconds < 20) {\n        return locale.formatDistance('lessThanXSeconds', 20, localizeOptions);\n      } else if (seconds < 40) {\n        return locale.formatDistance('halfAMinute', null, localizeOptions);\n      } else if (seconds < 60) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', 1, localizeOptions);\n      }\n    } else {\n      if (minutes === 0) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', minutes, localizeOptions);\n      }\n    } // 2 mins up to 0.75 hrs\n\n  } else if (minutes < 45) {\n    return locale.formatDistance('xMinutes', minutes, localizeOptions); // 0.75 hrs up to 1.5 hrs\n  } else if (minutes < 90) {\n    return locale.formatDistance('aboutXHours', 1, localizeOptions); // 1.5 hrs up to 24 hrs\n  } else if (minutes < MINUTES_IN_DAY) {\n    var hours = Math.round(minutes / 60);\n    return locale.formatDistance('aboutXHours', hours, localizeOptions); // 1 day up to 1.75 days\n  } else if (minutes < MINUTES_IN_ALMOST_TWO_DAYS) {\n    return locale.formatDistance('xDays', 1, localizeOptions); // 1.75 days up to 30 days\n  } else if (minutes < MINUTES_IN_MONTH) {\n    var days = Math.round(minutes / MINUTES_IN_DAY);\n    return locale.formatDistance('xDays', days, localizeOptions); // 1 month up to 2 months\n  } else if (minutes < MINUTES_IN_TWO_MONTHS) {\n    months = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('aboutXMonths', months, localizeOptions);\n  }\n\n  months = differenceInMonths(dateRight, dateLeft); // 2 months up to 12 months\n\n  if (months < 12) {\n    var nearestMonth = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('xMonths', nearestMonth, localizeOptions); // 1 year up to max Date\n  } else {\n    var monthsSinceStartOfYear = months % 12;\n    var years = Math.floor(months / 12); // N years up to 1 years 3 months\n\n    if (monthsSinceStartOfYear < 3) {\n      return locale.formatDistance('aboutXYears', years, localizeOptions); // N years 3 months up to N years 9 months\n    } else if (monthsSinceStartOfYear < 9) {\n      return locale.formatDistance('overXYears', years, localizeOptions); // N years 9 months up to N year 12 months\n    } else {\n      return locale.formatDistance('almostXYears', years + 1, localizeOptions);\n    }\n  }\n}","import distanceInWords from \"../formatDistance/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatDistanceToNow\n * @category Common Helpers\n * @summary Return the distance between the given date and now in words.\n * @pure false\n *\n * @description\n * Return the distance between the given date and now in words.\n *\n * | Distance to now                                                   | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance to now     | Result               |\n * |---------------------|----------------------|\n * | 0 secs ... 5 secs   | less than 5 seconds  |\n * | 5 secs ... 10 secs  | less than 10 seconds |\n * | 10 secs ... 20 secs | less than 20 seconds |\n * | 20 secs ... 40 secs | half a minute        |\n * | 40 secs ... 60 secs | less than a minute   |\n * | 60 secs ... 90 secs | 1 minute             |\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWordsToNow ` to `formatDistanceToNow`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *   ```\n *\n * @param {Date|Number} date - the given date\n * @param {Object} [options] - the object with options\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result specifies if now is earlier or later than the passed date\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // If today is 1 January 2015, what is the distance to 2 July 2014?\n * var result = formatDistanceToNow(\n *   new Date(2014, 6, 2)\n * )\n * //=> '6 months'\n *\n * @example\n * // If now is 1 January 2015 00:00:00,\n * // what is the distance to 1 January 2015 00:00:15, including seconds?\n * var result = formatDistanceToNow(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   {includeSeconds: true}\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 January 2016, with a suffix?\n * var result = formatDistanceToNow(\n *   new Date(2016, 0, 1),\n *   {addSuffix: true}\n * )\n * //=> 'in about 1 year'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 August 2016 in Esperanto?\n * var eoLocale = require('date-fns/locale/eo')\n * var result = formatDistanceToNow(\n *   new Date(2016, 7, 1),\n *   {locale: eoLocale}\n * )\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistanceToNow(dirtyDate, dirtyOptions) {\n  requiredArgs(1, arguments);\n  return distanceInWords(dirtyDate, Date.now(), dirtyOptions);\n}","import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoHeaderVariant {\n    PAGE = 'page',\n    COMPONENT = 'component',\n}\n\nexport interface BentoHeaderReloadButton {\n    title: string;\n    event?: (event: Event) => void;\n    state?: `${BentoLoadingButtonState}`;\n}\n","<template>\n    <header class=\"b-header\" :class=\"conditionalClasses\">\n        <div class=\"b-header__wrapper\">\n            <div class=\"b-header__title\">\n                <div>\n                    <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n                    <info-icon-with-popover\n                        v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n                        class=\"b-header__tooltip\"\n                        :popover-text=\"infoIconTooltipText\"\n                    >\n                        <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n                            ><slot name=\"infoIconTooltipContent\"\n                        /></template>\n                    </info-icon-with-popover>\n                </div>\n                <div v-if=\"lastUpdated\" class=\"b-header__timestamp-section\">\n                    <bento-typography class=\"b-header__timestamp\" el=\"div\">\n                        {{ timestamp }}\n                    </bento-typography>\n                    <bento-loading-button\n                        v-if=\"reloadButton\"\n                        variant=\"tertiary\"\n                        :state=\"reloadButton.state\"\n                        @click=\"reloadButton.event\"\n                        ><template #iconLeft><reload-icon aria-hidden=\"true\" /></template\n                        >{{ reloadButton.title }}</bento-loading-button\n                    >\n                </div>\n            </div>\n            <button-actions-with-menu\n                v-if=\"actions\"\n                :actions=\"actions\"\n                :displayed-actions=\"2\"\n                class=\"b-header__actions\"\n            />\n        </div>\n    </header>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import ReloadIcon from '@adyen/ui-assets-icons-16/vue/refresh';\n    import { InfoIconWithPopover } from '@/internal';\n    import { BentoButtonActionsList, BentoLoadingButton } from '@/components/button';\n    import { useHasSlot } from '@/composables';\n    import { BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\n    import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n    import formatDistanceToNow from 'date-fns/formatDistanceToNow';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-header',\n        components: {\n            BentoTypography,\n            ButtonActionsWithMenu,\n            BentoLoadingButton,\n            InfoIconWithPopover,\n            ReloadIcon,\n        },\n        props: {\n            /**\n             * Array of BentoButtonActionsList to show to the right of the title\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n            /**\n             * Popover position of the info icon text.\n             */\n            infoIconPopoverPosition: {\n                type: InfoIconWithPopover.props.popoverPosition.type,\n                default: InfoIconWithPopover.props.popoverPosition.default,\n                validator: InfoIconWithPopover.props.popoverPosition.validator,\n            },\n\n            /**\n             * JavaScript \"Date\" object for when the content was last updated\n             */\n            lastUpdated: { type: [Date, Number], default: null },\n\n            /**\n             * Variant represents type of Header\n             * @values page, component\n             */\n            variant: {\n                type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n                default: BentoHeaderVariant.PAGE,\n                validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * Reload button which shows next to the header's timestamp\n             * {@see BentoHeaderReloadButton}\n             */\n            reloadButton: {\n                type: Object as PropType<BentoHeaderReloadButton>,\n                default: null,\n            },\n        },\n        emits: ['reload'],\n        setup(props, { slots }) {\n            const { t, locale } = useI18n<{ message: MessageSchema }>({ messages });\n            // TODO to replace with dynamic import\n            const locales = getDateLocale();\n\n            const conditionalClasses = computed(() => ({\n                'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n            }));\n\n            const typography = computed(() => ({\n                el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n                variant: BentoTypographyVariant.TITLE,\n                medium: props.variant === BentoHeaderVariant.COMPONENT,\n                large: props.variant === BentoHeaderVariant.PAGE,\n            }));\n\n            const timestamp = computed(() =>\n                props.lastUpdated\n                    ? t('lastUpdated', {\n                          date: formatDistanceToNow(props.lastUpdated, {\n                              locale: locales[locale.value.substring(0, 2)] || locales.enUS,\n                          }),\n                      })\n                    : null\n            );\n            return {\n                hasSlot: useHasSlot(slots),\n                conditionalClasses,\n                timestamp,\n                typography,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["differenceInMilliseconds","dateLeft","dateRight","requiredArgs","toDate","roundingMap","value","defaultRoundingMethod","getRoundingMethod","method","differenceInSeconds","options","diff","MINUTES_IN_DAY","MINUTES_IN_ALMOST_TWO_DAYS","MINUTES_IN_MONTH","MINUTES_IN_TWO_MONTHS","formatDistance","dirtyDate","dirtyBaseDate","locale$1","locale","comparison","compareAsc","localizeOptions","cloneObject","seconds","offsetInSeconds","getTimezoneOffsetInMilliseconds","minutes","months","hours","days","differenceInMonths","nearestMonth","monthsSinceStartOfYear","years","formatDistanceToNow","dirtyOptions","BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","messages","BentoTypography","ButtonActionsWithMenu","BentoLoadingButton","InfoIconWithPopover","RefreshIcon","props","slots","t","useI18n","locales","getDateLocale","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","timestamp","useHasSlot"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/chunks/{info-icon-with-popover.Cfng_pMj.js → info-icon-with-popover.B9QgNl-S.js}

@@ -1,5 +1,5 @@
 import { defineComponent as l, ref as s } from "vue";
-import { B as i } from "./popover.DXo3nXew.js";
+import { B as i } from "./popover.CuOrBXcF.js";
 import { B as _ } from "./typography.J1v_SPG3.js";
 import { u as v } from "./i18n.BQkEbtPM.js";
 import { g as d } from "./generate-uid.NJ8tVoha.js";
@@ -68,4 +68,4 @@ const M = h.exports;
 export {
   M as I
 };
-//# sourceMappingURL=info-icon-with-popover.Cfng_pMj.js.map
+//# sourceMappingURL=info-icon-with-popover.B9QgNl-S.js.map

package/dist/chunks/{info-icon-with-popover.Cfng_pMj.js.map → info-icon-with-popover.B9QgNl-S.js.map}

@@ -1 +1 @@
-{"version":3,"file":"info-icon-with-popover.Cfng_pMj.js","sources":["../../src/components/internal/info-icon-with-popover/info-icon-with-popover.vue"],"sourcesContent":["<template>\n    <div\n        ref=\"infoIconRef\"\n        class=\"b-info-icon-with-popover\"\n        tabindex=\"0\"\n        data-testid=\"info-icon-with-popover\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <info-icon\n            ref=\"targetElement\"\n            class=\"b-info-icon-with-popover__svg\"\n            :aria-expanded=\"isOpen\"\n            :aria-describedby=\"popoverId\"\n            :svg-title=\"t('moreInformation')\"\n        />\n        <bento-popover\n            v-if=\"targetElement\"\n            :open=\"isOpen\"\n            :target-element=\"targetElement\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <bento-typography>\n                <slot>\n                    <div v-if=\"popoverText\">\n                        {{ popoverText }}\n                    </div>\n                </slot>\n            </bento-typography>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    defineProps({\n        /**\n         * Text showed in the popover on hover\n         */\n        popoverText: { type: String, default: null },\n\n        /**\n         * Position the popover should take if space is available\n         */\n        popoverPosition: {\n            type: BentoPopover.props.position.type,\n            default: BentoPopover.props.position.default,\n            validator: BentoPopover.props.position.validator,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const infoIconRef = ref<HTMLDivElement>();\n    const targetElement = ref(null);\n    const popoverId = generateUid('bento-info-icon-with-popover');\n    const isOpen = ref();\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\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 (\n            !infoIconRef.value ||\n            !(e?.relatedTarget instanceof Element) ||\n            !infoIconRef.value.contains(e.relatedTarget)\n        ) {\n            closePopover();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used whenever an info icon needs to be rendered with a popover instead of a tooltip.\n     *\n     * @example\n     * import { BentoInfoIconWithPopover } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInfoIconWithPopover },\n     *     template: `\n     *          <info-icon-with-popover popover-text=\"Content can be passed as a string like\" :popover-position=\"position\">\n     *              Content can also be rendered as a slot\n     *          </info-icon-with-popover>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon-with-popover.scss\" />\n"],"names":["__default__","messages","useI18n","infoIconRef","ref","targetElement","popoverId","generateUid","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","e"],"mappings":";;;;;;;;;;;;;;;;;;GA6HIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;AA5DA,UAAA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,8BAAA,GACAC,IAAAJ,EAAA,GACAK,IAAAL,EAAA,GAEAM,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAEJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAA,GAAA;AAEnB,MAAAC,EAAA,QAAAG;AAAA,IAAyB;4LAG7B,MAAA;AACI,MAAAF,EAAA;AAAA,IAAY,uBAOhB,CAAAG,MAAA;AACI,OAAA,CAAAV,EAAA,SAAA,GAAAU,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAV,EAAA,MAAA,SAAAU,EAAA,aAAA,MAKIF,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"info-icon-with-popover.B9QgNl-S.js","sources":["../../src/components/internal/info-icon-with-popover/info-icon-with-popover.vue"],"sourcesContent":["<template>\n    <div\n        ref=\"infoIconRef\"\n        class=\"b-info-icon-with-popover\"\n        tabindex=\"0\"\n        data-testid=\"info-icon-with-popover\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <info-icon\n            ref=\"targetElement\"\n            class=\"b-info-icon-with-popover__svg\"\n            :aria-expanded=\"isOpen\"\n            :aria-describedby=\"popoverId\"\n            :svg-title=\"t('moreInformation')\"\n        />\n        <bento-popover\n            v-if=\"targetElement\"\n            :open=\"isOpen\"\n            :target-element=\"targetElement\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <bento-typography>\n                <slot>\n                    <div v-if=\"popoverText\">\n                        {{ popoverText }}\n                    </div>\n                </slot>\n            </bento-typography>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    defineProps({\n        /**\n         * Text showed in the popover on hover\n         */\n        popoverText: { type: String, default: null },\n\n        /**\n         * Position the popover should take if space is available\n         */\n        popoverPosition: {\n            type: BentoPopover.props.position.type,\n            default: BentoPopover.props.position.default,\n            validator: BentoPopover.props.position.validator,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const infoIconRef = ref<HTMLDivElement>();\n    const targetElement = ref(null);\n    const popoverId = generateUid('bento-info-icon-with-popover');\n    const isOpen = ref();\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\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 (\n            !infoIconRef.value ||\n            !(e?.relatedTarget instanceof Element) ||\n            !infoIconRef.value.contains(e.relatedTarget)\n        ) {\n            closePopover();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used whenever an info icon needs to be rendered with a popover instead of a tooltip.\n     *\n     * @example\n     * import { BentoInfoIconWithPopover } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInfoIconWithPopover },\n     *     template: `\n     *          <info-icon-with-popover popover-text=\"Content can be passed as a string like\" :popover-position=\"position\">\n     *              Content can also be rendered as a slot\n     *          </info-icon-with-popover>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon-with-popover.scss\" />\n"],"names":["__default__","messages","useI18n","infoIconRef","ref","targetElement","popoverId","generateUid","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","e"],"mappings":";;;;;;;;;;;;;;;;;;GA6HIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;AA5DA,UAAA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,8BAAA,GACAC,IAAAJ,EAAA,GACAK,IAAAL,EAAA,GAEAM,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAEJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAA,GAAA;AAEnB,MAAAC,EAAA,QAAAG;AAAA,IAAyB;4LAG7B,MAAA;AACI,MAAAF,EAAA;AAAA,IAAY,uBAOhB,CAAAG,MAAA;AACI,OAAA,CAAAV,EAAA,SAAA,GAAAU,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAV,EAAA,MAAA,SAAAU,EAAA,aAAA,MAKIF,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{info-icon.DgCYoVE3.js → info-icon.BL55W9hd.js}

@@ -1,7 +1,7 @@
 import { defineComponent as n } from "vue";
 import { d as i } from "./popper-container.1kHSxyxu.js";
 import { I as r } from "./info.4d_mJHvT.js";
-import { B as s } from "./tooltip.8KbMqaXP.js";
+import { B as s } from "./tooltip.Bm5S2goP.js";
 import { n as a } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/info-icon.css";
 const p = n({
@@ -38,4 +38,4 @@ const x = m.exports;
 export {
   x as B
 };
-//# sourceMappingURL=info-icon.DgCYoVE3.js.map
+//# sourceMappingURL=info-icon.BL55W9hd.js.map

package/dist/chunks/{info-icon.DgCYoVE3.js.map → info-icon.BL55W9hd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"info-icon.DgCYoVE3.js","sources":["../../src/components/info-icon/info-icon.vue"],"sourcesContent":["<template>\n    <span v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\" :aria-label=\"tooltipText\" class=\"b-info-icon\">\n        <info-icon :svg-title=\"tooltipText\" class=\"b-info-icon__svg\" />\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n\n    /**\n     * @example\n     * import { BentoInfoIcon } from '@adyen/adl-vue-components';\n     *\n     * export default {\n     *     components: { BentoInfoIcon },\n     *     template: `\n     *          <bento-info-icon tooltip-text=\"Text on hover\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-info-icon',\n        components: { InfoIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            tooltipText: { type: String, required: true },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'auto'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition | `${PopperContainerPosition}`>,\n                default: PopperContainerPosition.AUTO,\n                validator: (value: PopperContainerPosition) => Object.values(PopperContainerPosition).includes(value),\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/info-icon/info-icon.scss\" />\n"],"names":["_sfc_main","defineComponent","InfoIcon","BentoTooltipDirective","PopperContainerPosition","value"],"mappings":";;;;;;AAuBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"info-icon.BL55W9hd.js","sources":["../../src/components/info-icon/info-icon.vue"],"sourcesContent":["<template>\n    <span v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\" :aria-label=\"tooltipText\" class=\"b-info-icon\">\n        <info-icon :svg-title=\"tooltipText\" class=\"b-info-icon__svg\" />\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n\n    /**\n     * @example\n     * import { BentoInfoIcon } from '@adyen/adl-vue-components';\n     *\n     * export default {\n     *     components: { BentoInfoIcon },\n     *     template: `\n     *          <bento-info-icon tooltip-text=\"Text on hover\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-info-icon',\n        components: { InfoIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            tooltipText: { type: String, required: true },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'auto'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition | `${PopperContainerPosition}`>,\n                default: PopperContainerPosition.AUTO,\n                validator: (value: PopperContainerPosition) => Object.values(PopperContainerPosition).includes(value),\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/info-icon/info-icon.scss\" />\n"],"names":["_sfc_main","defineComponent","InfoIcon","BentoTooltipDirective","PopperContainerPosition","value"],"mappings":";;;;;;AAuBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/input-field-password.DMcXkdVE.js

@@ -0,0 +1,251 @@
+import { defineComponent as le, useAttrs as ne, ref as n, provide as re, computed as d, watch as U } from "vue";
+import { B as de } from "./button.BuD-IsW5.js";
+import { B as ce } from "./image.C2D2hKat.js";
+import { B as ue } from "./input-field.CP8Qui6G.js";
+import { B as pe } from "./popover.CuOrBXcF.js";
+import { B as ve } from "./typography.J1v_SPG3.js";
+import { C as fe } from "./checkmark-circle-fill.DZBl7CeY.js";
+import { D as me } from "./dot.CnkXzRn3.js";
+import { S as _e, H as he } from "./show.e4LEpZKG.js";
+import { d as ge, w as Ce } from "./index.oJzeCMPe.js";
+import { u as ke } from "./i18n.BQkEbtPM.js";
+import { g as z } from "./generate-uid.NJ8tVoha.js";
+import { b as we } from "./dropdown.C01pOog2.js";
+import { T as Le } from "./tooltip.Bm5S2goP.js";
+import { n as Re } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/input-field-password.css";
+var k = /* @__PURE__ */ ((s) => (s.TEXT = "text", s.PASSWORD = "password", s))(k || {}), _ = /* @__PURE__ */ ((s) => (s.MIN_LENGTH = "minLength", s.REQUIRE_LOWERCASE = "requireLowercase", s.REQUIRE_NUMERIC = "requireNumeric", s.REQUIRE_SPECIAL_CHARACTER = "requireSpecialCharacter", s.REQUIRE_UPPERCASE = "requireUppercase", s))(_ || {});
+const Ee = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+function w(s) {
+  return (s == null ? void 0 : s.toString()) ?? "";
+}
+function be(s, t = 12) {
+  return w(s).length >= t;
+}
+function ye(s) {
+  return /[a-z]/.test(w(s));
+}
+function Ie(s) {
+  return /[A-Z]/.test(w(s));
+}
+function Te(s) {
+  return /\d/.test(w(s));
+}
+function Pe(s) {
+  return /[^a-zA-Z0-9]/.test(w(s));
+}
+const Ve = {
+  "en-US": {
+    capsLockEnabled: "Caps lock on",
+    hidePassword: "Hide",
+    showPassword: "Show",
+    validationChecked: "Checked",
+    validationMinLength: "12 characters",
+    validationRequireLowercase: "1 lowercase (a-z)",
+    validationRequireNumeric: "1 numerical (0-9)",
+    validationRequireSpecialCharacter: "1 special character",
+    validationRequireUppercase: "1 uppercase (A-Z)",
+    validationSuggestion: "Avoid using currency symbols or accented letters.",
+    validationTitle: "Password must contain at least:",
+    validationUnchecked: "Unchecked",
+    validationValid: "Input is valid"
+  },
+  "ja-JP": {
+    capsLockEnabled: "Caps lockオン",
+    hidePassword: "非表示",
+    showPassword: "表示",
+    validationMinLength: "8字",
+    validationRequireLowercase: "小文字1字 (a-z)",
+    validationRequireNumeric: "数字1字 (0-9)",
+    validationRequireSpecialCharacter: "特殊文字1字",
+    validationRequireUppercase: "大文字1字 (A-Z)",
+    validationSuggestion: "通貨記号やアクセント付き文字は避けてください。",
+    validationTitle: "パスワードには少なくとも次のものを含める必要があります :"
+  },
+  "pt-BR": {
+    capsLockEnabled: "Caps lock ativado",
+    hidePassword: "Ocultar",
+    showPassword: "Exibir",
+    validationMinLength: "8 caracteres",
+    validationRequireLowercase: "1 minúscula (a-z)",
+    validationRequireNumeric: "1 numérico (0-9)",
+    validationRequireSpecialCharacter: "1 caractere especial",
+    validationRequireUppercase: "1 maiúscula (A-Z)",
+    validationSuggestion: "Evite símbolos de moeda ou letras acentuadas.",
+    validationTitle: "A senha deve conter pelo menos:"
+  }
+}, Se = {
+  i18n: { messages: Ve },
+  name: "bento-input-field-password"
+}, Ae = /* @__PURE__ */ le({
+  ...Se,
+  props: {
+    condensed: { default: !1 },
+    disabled: { default: !1 },
+    disableValidation: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    placeholder: { default: "" },
+    readonly: { default: !1 },
+    value: { default: void 0 },
+    label: { default: null },
+    validation: { default: void 0 },
+    withHint: { type: Boolean, default: !0 }
+  },
+  emits: ["input:valid", "input:error", "input"],
+  setup(s, { emit: t }) {
+    const a = s, e = 500, L = 2e3, v = 2e3, { t: c } = ke(), M = ne(), h = n(k.PASSWORD), u = n(a.value), q = n(!1), b = n(!1), R = n([]), y = n({}), p = n(null), f = n(!1), B = n(null), H = n(null), X = n(null), I = n(!1);
+    re(we, "bento-input-field-password");
+    const { focused: N } = ge(B), G = z("validationListId"), O = z("validationPopoverId"), x = d(() => h.value === k.TEXT), F = d(() => {
+      const i = b.value && P.value, o = a.disableValidation && a.errorMessage;
+      return i || o ? a.errorMessage : "";
+    }), J = d(
+      () => R.value.map(
+        (i) => i ? "b-input-field-password__validation-list--valid" : "b-input-field-password__validation-list--invalid"
+      )
+    ), K = d(
+      () => p.value ? "b-input-field-password__input-tooltip--timed" : ""
+    ), Y = d(() => ({
+      ariaHidden: !1,
+      condensed: a.condensed,
+      disabled: a.disabled,
+      errorMessage: F.value,
+      placeholder: a.placeholder,
+      readonly: a.readonly,
+      type: h.value,
+      value: u.value,
+      "aria-haspopup": V.value ? "dialog" : !1,
+      "aria-describedby": V.value ? O : "",
+      ...M
+    })), T = d(() => {
+      var m, g, l, C, E, W;
+      if (a.validation && !a.validation.extendDefaultValidation)
+        return a.validation;
+      const i = [
+        {
+          label: c("validationMinLength"),
+          key: _.MIN_LENGTH,
+          validate: be
+        },
+        {
+          label: c("validationRequireLowercase"),
+          key: _.REQUIRE_LOWERCASE,
+          validate: ye
+        },
+        {
+          label: c("validationRequireUppercase"),
+          key: _.REQUIRE_UPPERCASE,
+          validate: Ie
+        },
+        {
+          label: c("validationRequireNumeric"),
+          key: _.REQUIRE_NUMERIC,
+          validate: Te
+        },
+        {
+          label: c("validationRequireSpecialCharacter"),
+          key: _.REQUIRE_SPECIAL_CHARACTER,
+          validate: Pe
+        }
+      ];
+      let o = i;
+      if (a.validation) {
+        const ie = i.map((r) => r.key), A = (g = (m = a.validation) == null ? void 0 : m.list) == null ? void 0 : g.map((r) => r.key), se = ((C = (l = a.validation) == null ? void 0 : l.list) == null ? void 0 : C.filter((r) => !ie.includes(r.key))) ?? [];
+        o = [...i.map((r) => {
+          var Q, Z;
+          return A != null && A.includes(r.key) ? (Z = (Q = a.validation) == null ? void 0 : Q.list) == null ? void 0 : Z.find((oe) => oe.key === r.key) : r;
+        }), ...se];
+      }
+      return {
+        title: ((E = a.validation) == null ? void 0 : E.title) ?? c("validationTitle"),
+        suggestion: ((W = a.validation) == null ? void 0 : W.suggestion) ?? c("validationSuggestion"),
+        list: o
+      };
+    }), D = d(() => {
+      var i, o;
+      return (o = (i = T.value) == null ? void 0 : i.list) == null ? void 0 : o.filter((m) => !m.disabled);
+    }), P = d(() => {
+      var i;
+      return (i = R.value) == null ? void 0 : i.some((o) => !o);
+    }), V = d(
+      () => {
+        var i, o;
+        return H.value && ((o = (i = T.value) == null ? void 0 : i.list) == null ? void 0 : o.length) > 0;
+      }
+    ), $ = (i) => {
+      typeof i.getModifierState == "function" && (I.value = i.getModifierState("CapsLock"));
+    }, j = () => {
+      x.value ? h.value = k.PASSWORD : h.value = k.TEXT;
+    }, ee = (i) => {
+      a.disabled || (u.value = i, t("input", u.value));
+    }, S = (i) => {
+      var g;
+      const o = (g = D.value) == null ? void 0 : g.map((l) => ({
+        key: l.key,
+        label: l.label,
+        isValid: l.validate(i, ...l.additionalArgs ?? [])
+      }));
+      let m = 1;
+      R.value = o == null ? void 0 : o.map((l) => l.isValid), y.value = o == null ? void 0 : o.filter((l) => !l.isValid).reduce((l, C) => {
+        const E = C.key ?? `custom-rule-${m++}`;
+        return {
+          ...l,
+          [E]: C.label
+        };
+      }, {});
+    }, ae = () => {
+      f.value = !1, p.value = null;
+    }, te = () => {
+      f.value = !0;
+    };
+    return U(
+      () => a.value,
+      (i) => {
+        u.value = i;
+      }
+    ), U(N, (i) => {
+      i || (b.value = !0), a.disableValidation || (a.withHint && (q.value = i), S(u.value));
+    }), U(I, (i) => {
+      i ? (f.value = !0, p.value = setTimeout(() => {
+        p.value = null, f.value = !1;
+      }, v)) : (clearTimeout(p.value), p.value = null, f.value = !1);
+    }), Ce(
+      u,
+      (i) => {
+        S(i), P.value ? t("input:error", y.value) : t("input:valid");
+      },
+      // wait for 0.5s before checking validity OR 2s of continuous typing
+      { debounce: e, maxWait: L }
+    ), { __sfc: !0, DEBOUNCE_DURATION: e, DEBOUNCE_MAX_WAIT: L, TOOLTIP_TIMEOUT: v, t: c, props: a, emit: t, attrs: M, inputType: h, inputValue: u, isHintDisplayed: q, isTouched: b, passwordValidity: R, errorsList: y, capsLockTooltipTimeoutID: p, isTooltipDisplayed: f, inputFieldPasswordRef: B, inputFieldPasswordInputRef: H, inputFieldPasswordCapsLockIconRef: X, isCapsLockOn: I, focused: N, validationListId: G, validationPopoverId: O, isPasswordReadable: x, computedErrorMessage: F, passwordValidityConditionalClass: J, tooltipConditionalClass: K, inputFieldArgs: Y, computedValidations: T, computedValidationList: D, hasErrors: P, hasValidations: V, checkCapsLock: $, toggleInputType: j, onInput: ee, checkValidity: S, handleCapsLockMouseLeave: ae, handleCapsLockMouseEnter: te, BentoButton: de, BentoImage: ce, BentoInputField: ue, BentoPopover: pe, BentoTypography: ve, Tooltip: Le, CheckmarkCircleFillIcon: fe, DotIcon: me, HideIcon: he, ShowIcon: _e, CapsLockIcon: Ee };
+  }
+});
+var Ue = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { ref: "inputFieldPasswordRef" }, [a(e.BentoInputField, t._b({ ref: "inputFieldPasswordInputRef", staticClass: "b-input-field-password__input", attrs: { spellcheck: "false" }, on: { input: e.onInput, keydown: e.checkCapsLock, keyup: e.checkCapsLock }, scopedSlots: t._u([{ key: "default", fn: function() {
+    return [t._v(t._s(t.label))];
+  }, proxy: !0 }, e.isCapsLockOn ? { key: "iconBefore", fn: function() {
+    return [a("div", { staticClass: "b-input-field-password__caps-lock-indicator", on: { mouseenter: e.handleCapsLockMouseEnter, mouseleave: e.handleCapsLockMouseLeave } }, [a(e.BentoImage, { ref: "inputFieldPasswordCapsLockIconRef", attrs: { src: e.CapsLockIcon, alt: e.t("capsLockEnabled") } })], 1), e.inputFieldPasswordCapsLockIconRef ? a(e.Tooltip, { class: e.tooltipConditionalClass, attrs: { content: e.t("capsLockEnabled"), "disabled-focus-trap": !0, "fallback-position": ["top", "bottom"], "is-shown": e.isTooltipDisplayed, "target-element": e.inputFieldPasswordCapsLockIconRef } }) : t._e()];
+  }, proxy: !0 } : null, t.disabled ? null : { key: "iconAfter", fn: function() {
+    return [a(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: e.toggleInputType }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+      return [e.isPasswordReadable ? t._e() : a(e.ShowIcon, { attrs: { "svg-title": e.t("showPassword") } }), e.isPasswordReadable ? a(e.HideIcon, { attrs: { "svg-title": e.t("hidePassword") } }) : t._e()];
+    }, proxy: !0 }], null, !1, 956294632) })];
+  }, proxy: !0 }], null, !0) }, "bento-input-field", e.inputFieldArgs, !1)), e.hasValidations ? a(e.BentoPopover, { attrs: { open: e.isHintDisplayed, "target-element": e.inputFieldPasswordInputRef, "disable-focus-trap": !0, "aria-label": e.computedValidations.title, "aria-describedby": e.validationListId, position: "right-start" } }, [a("div", { attrs: { id: e.validationPopoverId } }, [e.computedValidations.title ? a(e.BentoTypography, { staticClass: "b-input-field-password__validation-title" }, [t._v(" " + t._s(e.computedValidations.title) + " ")]) : t._e(), e.hasErrors ? t._e() : a("p", { staticClass: "b-input-field-password__validation-status--valid", attrs: { role: "alert" } }, [t._v(" " + t._s(e.t("validationValid")) + " ")]), a("ul", { staticClass: "b-input-field-password__validation-list", attrs: { id: e.validationListId } }, t._l(e.computedValidationList, function(L, v) {
+    return a("li", { key: v, class: e.passwordValidityConditionalClass[v], attrs: { "aria-live": "polite", "aria-atomic": "true" } }, [a("span", { staticClass: "b-input-field-password__validation-list-icon" }, [e.passwordValidity[v] ? a(e.CheckmarkCircleFillIcon, { attrs: { "svg-title": e.t("validationChecked") } }) : a(e.DotIcon, { attrs: { "svg-title": e.t("validationUnchecked") } })], 1), a(e.BentoTypography, { staticClass: "b-input-field-password__validation-list-text", attrs: { el: "span" } }, [t._v(" " + t._s(L.label) + " ")])], 1);
+  }), 0), e.computedValidations.suggestion ? a(e.BentoTypography, { staticClass: "b-input-field-password__validation-suggestion" }, [t._v(" " + t._s(e.computedValidations.suggestion) + " ")]) : t._e()], 1)]) : t._e()], 1);
+}, Me = [], qe = /* @__PURE__ */ Re(
+  Ae,
+  Ue,
+  Me,
+  !1,
+  null,
+  "67bc7893"
+);
+const je = qe.exports;
+export {
+  Ie as a,
+  Te as b,
+  Pe as c,
+  je as i,
+  be as m,
+  ye as r
+};
+//# sourceMappingURL=input-field-password.DMcXkdVE.js.map

package/dist/chunks/input-field-password.DMcXkdVE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field-password.DMcXkdVE.js","sources":["../../src/components/input-field-password/input-field-password.types.ts","../../src/components/input-field-password/assets/capslock.svg","../../src/components/input-field-password/utilities/input-field-password.validation.ts","../../src/components/input-field-password/input-field-password.vue"],"sourcesContent":["import type { BentoInputFieldProps, BentoInputFieldValue } from '@/components/input-field/input-field.types';\n\n/**\n * Public\n */\n\nexport interface BentoInputFieldPasswordValidationListItem {\n    label?: string;\n    key?: BentoInputFieldPasswordDefaultRuleKeys | string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    validate?: (value: BentoInputFieldValue, ...args: any[]) => boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    additionalArgs?: any[];\n    disabled?: boolean;\n}\n\nexport type BentoInputFieldPasswordDefaultRuleKeys =\n    | 'minLength'\n    | 'requireLowercase'\n    | 'requireNumeric'\n    | 'requireSpecialCharacter'\n    | 'requireUppercase';\n\nexport type BentoInputFieldPasswordErrorsList = Record<BentoInputFieldPasswordDefaultRuleKeys | string, string>;\n\nexport interface BentoInputFieldPasswordValidation {\n    title?: string;\n    suggestion?: string;\n    extendDefaultValidation?: boolean;\n    list: BentoInputFieldPasswordValidationListItem[];\n}\n\nexport interface BentoInputFieldPasswordProps {\n    /**\n     * Reduces height of the input\n     */\n    condensed?: BentoInputFieldProps['condensed'];\n\n    /**\n     * Disables the possibility of changing value in the input-field\n     */\n    disabled?: BentoInputFieldProps['disabled'];\n\n    /**\n     * Performs real-time validations over the input value. Default: `false`.\n     * Disabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.\n     */\n    disableValidation?: boolean;\n\n    /**\n     * Renders input-field with an error state and the error message beneath the input box\n     */\n    errorMessage?: BentoInputFieldProps['errorMessage'];\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: BentoInputFieldProps['placeholder'];\n\n    /**\n     * Setting this property to true will set the input field to read only state.\n     */\n    readonly?: BentoInputFieldProps['readonly'];\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    value?: BentoInputFieldProps['value'];\n\n    /**\n     * Label to be shown with the input field\n     */\n    label?: string;\n\n    /**\n     * Configuration object for password field validation.\n     *\n     * This object defines the validation criteria and associated messages for a password field.\n     * It includes the following properties:\n     *\n     * - `title`: The title displayed at the top of the validation hint.\n     * - `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n     * - `extendDefaultValidation`: Set to true if you want to add your custom rules to the default validation instead of overriding the list.\n     * - `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n     *\n     * By default, the validation checks that:\n     *\n     * - The value has a minimum length of 12 characters.\n     * - The value contains at least one lowercase letter.\n     * - The value contains at least one uppercase letter.\n     * - The value contains at least one numeric digit.\n     * - The value contains at least one special character.\n     *\n     *\n     */\n    validation?: BentoInputFieldPasswordValidation;\n\n    /**\n     * Whether the password validation hint is displayed when the input field is activated via focus or input\n     */\n    withHint?: boolean;\n}\n\n/**\n * Private\n */\n\nexport enum BentoInputFieldPasswordType {\n    TEXT = 'text',\n    PASSWORD = 'password',\n}\n\nexport enum BentoInputFieldPasswordDefaultRule {\n    MIN_LENGTH = 'minLength',\n    REQUIRE_LOWERCASE = 'requireLowercase',\n    REQUIRE_NUMERIC = 'requireNumeric',\n    REQUIRE_SPECIAL_CHARACTER = 'requireSpecialCharacter',\n    REQUIRE_UPPERCASE = 'requireUppercase',\n}\n","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\"","import { BentoInputFieldValue } from '@/components/input-field';\n\nfunction stringifyValue(value: BentoInputFieldValue): string {\n    return value?.toString() ?? '';\n}\n\n/**\n * Validates if the length of the provided value is greater than or equal to the specified length.\n *\n * @param value - The input value to check.\n * @param length - The minimum required length of the value. Defaults to 12.\n * @returns `true` if the length of the value is greater than or equal to the specified length, `false` otherwise.\n */\nexport function minLength(value: BentoInputFieldValue, length = 12): boolean {\n    return stringifyValue(value).length >= length;\n}\n\n/**\n * Validates if the provided value contains at least one lowercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one lowercase letter, `false` otherwise.\n */\nexport function requireLowercase(value: BentoInputFieldValue): boolean {\n    return /[a-z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one uppercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one uppercase letter, `false` otherwise.\n */\nexport function requireUppercase(value: BentoInputFieldValue): boolean {\n    return /[A-Z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one numerical digit.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one numerical digit, `false` otherwise.\n */\nexport function requireNumeric(value: BentoInputFieldValue): boolean {\n    return /\\d/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one special character (non-alphanumeric).\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one special character, `false` otherwise.\n */\nexport function requireSpecialCharacter(value: BentoInputFieldValue): boolean {\n    return /[^a-zA-Z0-9]/.test(stringifyValue(value));\n}\n","<template>\n    <div ref=\"inputFieldPasswordRef\">\n        <bento-input-field\n            ref=\"inputFieldPasswordInputRef\"\n            v-bind=\"inputFieldArgs\"\n            class=\"b-input-field-password__input\"\n            spellcheck=\"false\"\n            @input=\"onInput\"\n            @keydown=\"checkCapsLock\"\n            @keyup=\"checkCapsLock\"\n        >\n            <template #default>{{ label }}</template>\n\n            <template v-if=\"isCapsLockOn\" #iconBefore>\n                <div\n                    class=\"b-input-field-password__caps-lock-indicator\"\n                    @mouseenter=\"handleCapsLockMouseEnter\"\n                    @mouseleave=\"handleCapsLockMouseLeave\"\n                >\n                    <bento-image\n                        ref=\"inputFieldPasswordCapsLockIconRef\"\n                        :src=\"CapsLockIcon\"\n                        :alt=\"t('capsLockEnabled')\"\n                    />\n                </div>\n\n                <tooltip\n                    v-if=\"inputFieldPasswordCapsLockIconRef\"\n                    :class=\"tooltipConditionalClass\"\n                    :content=\"t('capsLockEnabled')\"\n                    :disabled-focus-trap=\"true\"\n                    :fallback-position=\"['top', 'bottom']\"\n                    :is-shown=\"isTooltipDisplayed\"\n                    :target-element=\"inputFieldPasswordCapsLockIconRef\"\n                />\n            </template>\n\n            <template v-if=\"!disabled\" #iconAfter>\n                <bento-button variant=\"tertiary\" @click=\"toggleInputType\">\n                    <template #iconLeft>\n                        <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n                        <hide-icon v-if=\"isPasswordReadable\" :svg-title=\"t('hidePassword')\" />\n                    </template>\n                </bento-button>\n            </template>\n        </bento-input-field>\n\n        <bento-popover\n            v-if=\"hasValidations\"\n            :open=\"isHintDisplayed\"\n            :target-element=\"inputFieldPasswordInputRef\"\n            :disable-focus-trap=\"true\"\n            :aria-label=\"computedValidations.title\"\n            :aria-describedby=\"validationListId\"\n            position=\"right-start\"\n        >\n            <div :id=\"validationPopoverId\">\n                <bento-typography v-if=\"computedValidations.title\" class=\"b-input-field-password__validation-title\">\n                    {{ computedValidations.title }}\n                </bento-typography>\n\n                <p v-if=\"!hasErrors\" class=\"b-input-field-password__validation-status--valid\" role=\"alert\">\n                    {{ t('validationValid') }}\n                </p>\n\n                <ul :id=\"validationListId\" class=\"b-input-field-password__validation-list\">\n                    <li\n                        v-for=\"(rule, index) in computedValidationList\"\n                        :key=\"index\"\n                        :class=\"passwordValidityConditionalClass[index]\"\n                        aria-live=\"polite\"\n                        aria-atomic=\"true\"\n                    >\n                        <span class=\"b-input-field-password__validation-list-icon\">\n                            <checkmark-circle-fill-icon\n                                v-if=\"passwordValidity[index]\"\n                                :svg-title=\"t('validationChecked')\"\n                            />\n\n                            <dot-icon v-else :svg-title=\"t('validationUnchecked')\" />\n                        </span>\n\n                        <bento-typography class=\"b-input-field-password__validation-list-text\" el=\"span\">\n                            {{ rule.label }}\n                        </bento-typography>\n                    </li>\n                </ul>\n\n                <bento-typography\n                    v-if=\"computedValidations.suggestion\"\n                    class=\"b-input-field-password__validation-suggestion\"\n                >\n                    {{ computedValidations.suggestion }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButton } from '@/components/button';\n    import { BentoImage } from '@/components/image';\n    import { BentoInputField } from '@/components/input-field';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { Tooltip } from '@/internal';\n    import type { BentoInputFieldProps } from '@/components/input-field/input-field.types';\n    import {\n        BentoInputFieldPasswordDefaultRule,\n        BentoInputFieldPasswordErrorsList,\n        type BentoInputFieldPasswordProps,\n        BentoInputFieldPasswordType,\n        BentoInputFieldPasswordValidation,\n        BentoInputFieldPasswordValidationListItem,\n    } from './input-field-password.types';\n    import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n    import HideIcon from '@adyen/ui-assets-icons-16/vue/hide';\n    import ShowIcon from '@adyen/ui-assets-icons-16/vue/show';\n    import CapsLockIcon from './assets/capslock.svg';\n\n    import { useFocusWithin, watchDebounced } from '@vueuse/core';\n    import { computed, provide, ref, SetupContext, useAttrs, watch } from 'vue';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import {\n        minLength,\n        requireLowercase,\n        requireNumeric,\n        requireSpecialCharacter,\n        requireUppercase,\n    } from '@/components/input-field-password/utilities/input-field-password.validation';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEBOUNCE_DURATION = 500;\n    const DEBOUNCE_MAX_WAIT = 2000;\n    const TOOLTIP_TIMEOUT = 2000;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  condensed: { default: false },\n  disabled: { default: false },\n  disableValidation: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  placeholder: { default: '' },\n  readonly: { default: false },\n  value: { default: undefined },\n  label: { default: null },\n  validation: { default: undefined },\n  withHint: { type: Boolean, default: true }\n});\n\n    const emit = defineEmits([\"input:valid\", \"input:error\", \"input\"]);\n\n    const attrs = useAttrs();\n\n    const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n    const inputValue = ref(props.value);\n    const isHintDisplayed = ref(false);\n    const isTouched = ref(false);\n    const passwordValidity = ref<boolean[]>([]);\n    const errorsList = ref<BentoInputFieldPasswordErrorsList>({});\n    const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null);\n    const isTooltipDisplayed = ref(false);\n    const inputFieldPasswordRef = ref(null);\n    const inputFieldPasswordInputRef = ref(null);\n    const inputFieldPasswordCapsLockIconRef = ref(null);\n    const isCapsLockOn = ref(false);\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password');\n\n    const { focused } = useFocusWithin(inputFieldPasswordRef);\n\n    const validationListId = generateUid('validationListId');\n    const validationPopoverId = generateUid('validationPopoverId');\n\n    const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n    const computedErrorMessage = computed(() => {\n        const hasRealTimeValidationErrors = isTouched.value && hasErrors.value;\n        const hasAsyncValidationErrors = props.disableValidation && props.errorMessage;\n\n        return hasRealTimeValidationErrors || hasAsyncValidationErrors ? props.errorMessage : '';\n    });\n\n    const passwordValidityConditionalClass = computed(() =>\n        passwordValidity.value.map(validity =>\n            validity\n                ? 'b-input-field-password__validation-list--valid'\n                : 'b-input-field-password__validation-list--invalid'\n        )\n    );\n\n    const tooltipConditionalClass = computed(() =>\n        capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : ''\n    );\n\n    const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({\n        ariaHidden: false,\n        condensed: props.condensed,\n        disabled: props.disabled,\n        errorMessage: computedErrorMessage.value,\n        placeholder: props.placeholder,\n        readonly: props.readonly,\n        type: inputType.value,\n        value: inputValue.value,\n\n        'aria-haspopup': hasValidations.value ? 'dialog' : false,\n        'aria-describedby': hasValidations.value ? validationPopoverId : '',\n\n        ...attrs,\n    }));\n\n    const computedValidations = computed<BentoInputFieldPasswordValidation>(() => {\n        if (props.validation && !props.validation.extendDefaultValidation) {\n            return props.validation;\n        }\n\n        const defaultValidationList = [\n            {\n                label: t('validationMinLength'),\n                key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH,\n                validate: minLength,\n            },\n            {\n                label: t('validationRequireLowercase'),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE,\n                validate: requireLowercase,\n            },\n            {\n                label: t('validationRequireUppercase'),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE,\n                validate: requireUppercase,\n            },\n            {\n                label: t('validationRequireNumeric'),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC,\n                validate: requireNumeric,\n            },\n            {\n                label: t('validationRequireSpecialCharacter'),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_SPECIAL_CHARACTER,\n                validate: requireSpecialCharacter,\n            },\n        ];\n\n        let validationList: BentoInputFieldPasswordValidationListItem[] = defaultValidationList;\n\n        if (props.validation) {\n            const defaultValidationKeys: string[] = defaultValidationList.map(rule => rule.key);\n            const customRuleKeys = props.validation?.list?.map(rule => rule.key);\n            // remove from the custom list any rules with default keys (rules that are overriding existent rules)\n            const customValidationList =\n                props.validation?.list?.filter(rule => !defaultValidationKeys.includes(rule.key)) ?? [];\n\n            // loop through the default list and replace default rule with the custom rule if it exists\n            const validationListWithOverrides = defaultValidationList.map(rule => {\n                if (customRuleKeys?.includes(rule.key)) {\n                    const customRule = props.validation?.list?.find(customRule => customRule.key === rule.key);\n                    return customRule;\n                } else {\n                    return rule;\n                }\n            });\n            validationList = [...validationListWithOverrides, ...customValidationList];\n        }\n\n        return {\n            title: props.validation?.title ?? t('validationTitle'),\n            suggestion: props.validation?.suggestion ?? t('validationSuggestion'),\n            list: validationList,\n        };\n    });\n\n    const computedValidationList = computed(() => computedValidations.value?.list?.filter(rule => !rule.disabled));\n\n    const hasErrors = computed(() => passwordValidity.value?.some(validation => !validation));\n    const hasValidations = computed(\n        () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0\n    );\n\n    const checkCapsLock = (e: KeyboardEvent) => {\n        // Check if getModifierState exists and is a function in case the user's browser is autofilling\n        if (typeof e.getModifierState === 'function') {\n            isCapsLockOn.value = e.getModifierState('CapsLock');\n        }\n    };\n\n    const toggleInputType = () => {\n        if (isPasswordReadable.value) {\n            inputType.value = BentoInputFieldPasswordType.PASSWORD;\n        } else {\n            inputType.value = BentoInputFieldPasswordType.TEXT;\n        }\n    };\n\n    const onInput = (value: string) => {\n        if (props.disabled) {\n            return;\n        }\n\n        inputValue.value = value;\n\n        emit('input', inputValue.value);\n    };\n\n    const checkValidity = (value: BentoInputFieldPasswordProps['value']) => {\n        const rulesValidityObj = computedValidationList.value?.map(validationItem => ({\n            key: validationItem.key,\n            label: validationItem.label,\n            isValid: validationItem.validate(value, ...(validationItem.additionalArgs ?? [])),\n        }));\n        let customRuleIndex = 1;\n\n        passwordValidity.value = rulesValidityObj?.map(error => error.isValid);\n\n        errorsList.value = rulesValidityObj\n            ?.filter(rule => !rule.isValid)\n            .reduce((errorsObject, error) => {\n                const key = error.key ?? `custom-rule-${customRuleIndex++}`;\n                return {\n                    ...errorsObject,\n                    [key]: error.label,\n                };\n            }, {});\n    };\n\n    const handleCapsLockMouseLeave = () => {\n        isTooltipDisplayed.value = false;\n        capsLockTooltipTimeoutID.value = null;\n    };\n\n    const handleCapsLockMouseEnter = () => {\n        isTooltipDisplayed.value = true;\n    };\n\n    watch(\n        () => props.value,\n        newValue => {\n            inputValue.value = newValue;\n        }\n    );\n\n    watch(focused, focused => {\n        // Always set dirty to true when blur occurs\n        if (!focused) {\n            isTouched.value = true;\n        }\n\n        // Disable validations & hint if \"disableValidation\" is \"true\"\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = focused;\n            }\n            checkValidity(inputValue.value);\n        }\n    });\n\n    watch(isCapsLockOn, isCapsLockOn => {\n        if (!isCapsLockOn) {\n            clearTimeout(capsLockTooltipTimeoutID.value);\n\n            capsLockTooltipTimeoutID.value = null;\n            isTooltipDisplayed.value = false;\n        } else {\n            isTooltipDisplayed.value = true;\n\n            capsLockTooltipTimeoutID.value = setTimeout(() => {\n                capsLockTooltipTimeoutID.value = null;\n                isTooltipDisplayed.value = false;\n            }, TOOLTIP_TIMEOUT);\n        }\n    });\n\n    watchDebounced(\n        inputValue,\n        inputValue => {\n            checkValidity(inputValue);\n\n            if (!hasErrors.value) {\n                emit('input:valid');\n            } else {\n                emit('input:error', errorsList.value);\n            }\n        },\n        // wait for 0.5s before checking validity OR 2s of continuous typing\n        { debounce: DEBOUNCE_DURATION, maxWait: DEBOUNCE_MAX_WAIT }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The input field password is a component designed to support users' preference for entering values securely.\n     * This is an extension of the `bento-input-field` component.\n     *\n     * @example\n     * import { BentoInputFieldPassword } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInputFieldPassword },\n     *     template: `\n     *          <bento-input-field-password\n     *              label=\"Label\"\n     *              error-message=\"Error\"\n     *              :validation=\"{\n     *                  extendDefaultValidation: true,\n     *                  list: [\n     *                      { label: '18 characters', key: 'minLength', validate: minLength, additionalArgs: [18] },\n     *                      { label: 'Always true', key: 'alwaysTrue', validate: () => true },\n     *                      { key: 'requireSpecialCharacter', disabled: true }\n     *                  ],\n     *              }\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-field-password',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field-password.scss\" />\n"],"names":["BentoInputFieldPasswordType","BentoInputFieldPasswordType2","BentoInputFieldPasswordDefaultRule","BentoInputFieldPasswordDefaultRule2","CapsLockIcon","stringifyValue","value","minLength","length","requireLowercase","requireUppercase","requireNumeric","requireSpecialCharacter","__default__","messages","DEBOUNCE_DURATION","DEBOUNCE_MAX_WAIT","TOOLTIP_TIMEOUT","t","useI18n","attrs","useAttrs","inputType","ref","inputValue","props","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","focused","useFocusWithin","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","computedErrorMessage","hasRealTimeValidationErrors","hasErrors","hasAsyncValidationErrors","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","defaultValidationList","validationList","defaultValidationKeys","rule","customRuleKeys","_b","_a","customValidationList","_d","_c","customRule2","_e","_f","computedValidationList","validation","checkCapsLock","e","toggleInputType","onInput","emit","checkValidity","rulesValidityObj","validationItem","customRuleIndex","error","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","newValue","focused2","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}

package/dist/chunks/{input-field-phone-number.Bg9XyY_1.js → input-field-phone-number.Cfy_o9aE.js}

@@ -1,7 +1,7 @@
 import { defineComponent as oe, ref as G, provide as $e, computed as B, onMounted as ue, nextTick as le } from "vue";
-import { B as se } from "./input-field.DgUkNPXo.js";
+import { B as se } from "./input-field.CP8Qui6G.js";
 import { u as fe } from "./i18n.BQkEbtPM.js";
-import { b as ce } from "./dropdown.Qc6K5BzU.js";
+import { b as ce } from "./dropdown.C01pOog2.js";
 import { p as he } from "./typography.J1v_SPG3.js";
 import { a as jt, u as ge } from "./use-country-phon-code.DVgE19zT.js";
 import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -3094,4 +3094,4 @@ const kd = Fd.exports;
 export {
   kd as i
 };
-//# sourceMappingURL=input-field-phone-number.Bg9XyY_1.js.map
+//# sourceMappingURL=input-field-phone-number.Cfy_o9aE.js.map