@adyen/bento-vue3 1.94.0 → 1.95.0

package/dist/chunks/form-layout-title.B712PesH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-layout-title.B712PesH.js","sources":["../../../vue2/src/components/form-layout/form-layout.vue","../../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../../vue2/src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits the submit event from the form\n         */\n        (e: 'submit', event: SubmitEvent): void;\n    }>();\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n        <error-message v-if=\"!!errorMessage\" :error-message=\"errorMessage\" class=\"b-form-layout-group__error-message\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { ErrorMessage } from '@/internal';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two columns are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n\n        /**\n         * The error message to be displayed for the whole group.\n         *\n         * If set, individual error messages for all components within this group will be hidden.\n         * This is particularly useful for field pairs where a single group error is displayed.\n         */\n        errorMessage: { type: String, default: null },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n        'b-form-layout-group--group-error-messages': !!props.errorMessage,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n\n        /**\n         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organize related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","formLayoutElement","computed","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","computedLayout","conditionalClasses","__default__","messages","t","useI18n","isSection"],"mappings":";;;;;;;;;;;;qFA6FIA,IAAA,CAAA;;;;;;;;;;;;;;;;AAjEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GAaAC,IAAAC,EAAA,MAAAH,EAAA,OAAA,SAAA,KAAA,GACAI,IAAAD,EAAA,MAAAP,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAS,EAAAC,GAAAC,EAAAP,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mECnDGQ,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAf,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;mEC5BGgB,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCkEIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1EA,UAAAX,IAAAC,GAwCAW,IAAAT;AAAA,MAAuB,MAAAO,EAAA,SAAAV,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACiD,GAGxEa,IAAAV,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAO,EAAA,SAAAV,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAY,EAAA,KAAA,EAAA,GAAA;AAAA,MAE/B,6CAAA,CAAA,CAAAZ,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;;;;;;;;GC8BzDc,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApEA,UAAArB,IAAAC,EAAA,GACA,EAAA,GAAAqB,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAf,IAAAC,GAgCAiB,IAAAf,EAAA,MAAA,CAAAH,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAmB,IAAAV,EAAA,OAAA;AAAA,MAA2C,mCAAAH,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/header-meta.I2Tztkls.js

@@ -1,259 +0,0 @@
-import { shallowRef as L, watch as C, defineComponent as x, ref as I, openBlock as v, createElementBlock as S, createVNode as y, unref as c, createBlock as O, withCtx as _, renderSlot as E, toDisplayString as M, createCommentVNode as h, computed as j, useSlots as F, createTextVNode as B } from "vue";
-import { h as $, a as A } from "./button-actions.uco5ptf5.js";
-import { B as Y } from "./popover.types.63w2RF7Y.js";
-import { p as G, B as T } from "./typography.B3J6_tYk.js";
-import { g as H } from "./generate-uid.DBWe4g6T.js";
-import { u as X } from "./index.B875RXHM.js";
-import { I as V } from "./info.6Z6NxUst.js";
-import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as W } from "./use-has-slot.CyMiImRQ.js";
-import { c as J } from "./constructNow.DyOJDyZZ.js";
-import { t as P, d as q, n as K, k, j as Q, o as R, p as g, g as Z } from "./en-US.BR6y7foR.js";
-import { d as ee } from "./differenceInMonths.yz4Dfe-b.js";
-import { g as te } from "./getRoundingMethod.C3eaeGLR.js";
-import { R as oe } from "./refresh.C31KClfx.js";
-import "../assets/header-meta.css";
-const D = /* @__PURE__ */ Object.assign({
-  "../../../node_modules/date-fns/locale/de.js": () => import("./de.ctR_lBqr.js"),
-  "../../../node_modules/date-fns/locale/en-GB.js": () => import("./en-GB.BsQNm5GT.js"),
-  "../../../node_modules/date-fns/locale/en-US.js": () => import("./en-US.BR6y7foR.js").then((o) => o.x),
-  "../../../node_modules/date-fns/locale/es.js": () => import("./es.DxqH-QhP.js"),
-  "../../../node_modules/date-fns/locale/fr.js": () => import("./fr.DJtn8ron.js"),
-  "../../../node_modules/date-fns/locale/it.js": () => import("./it.keS7oN5l.js"),
-  "../../../node_modules/date-fns/locale/ja.js": () => import("./ja.cLwacUE6.js"),
-  "../../../node_modules/date-fns/locale/pt-BR.js": () => import("./pt-BR.ChPOra5s.js"),
-  "../../../node_modules/date-fns/locale/zh-CN.js": () => import("./zh-CN.ZG6obniO.js")
-});
-function ae(o) {
-  const n = L(void 0);
-  return C(
-    o,
-    async (s) => {
-      if (!s) {
-        n.value = void 0;
-        return;
-      }
-      const r = (l) => `../../../node_modules/date-fns/locale/${l}.js`;
-      let e = r(s);
-      if (D[e] || (e = r(s.substring(0, 2))), D[e] || (e = r("en-US")), D[e])
-        try {
-          const l = await D[e]();
-          n.value = l.default;
-        } catch (l) {
-          G(`Failed to load date-fns locale: ${s}`, l);
-        }
-    },
-    { immediate: !0 }
-  ), n;
-}
-function ne(o, n) {
-  return +P(o) - +P(n);
-}
-function se(o, n, s) {
-  const r = ne(o, n) / 1e3;
-  return te(s?.roundingMethod)(r);
-}
-function re(o, n, s) {
-  const r = Z(), e = s?.locale ?? r.locale ?? Q, l = 2520, d = q(o, n);
-  if (isNaN(d)) throw new RangeError("Invalid time value");
-  const t = Object.assign({}, s, {
-    addSuffix: s?.addSuffix,
-    comparison: d
-  }), [f, i] = K(
-    s?.in,
-    ...d > 0 ? [n, o] : [o, n]
-  ), u = se(i, f), U = (k(i) - k(f)) / 1e3, a = Math.round((u - U) / 60);
-  let p;
-  if (a < 2)
-    return s?.includeSeconds ? u < 5 ? e.formatDistance("lessThanXSeconds", 5, t) : u < 10 ? e.formatDistance("lessThanXSeconds", 10, t) : u < 20 ? e.formatDistance("lessThanXSeconds", 20, t) : u < 40 ? e.formatDistance("halfAMinute", 0, t) : u < 60 ? e.formatDistance("lessThanXMinutes", 1, t) : e.formatDistance("xMinutes", 1, t) : a === 0 ? e.formatDistance("lessThanXMinutes", 1, t) : e.formatDistance("xMinutes", a, t);
-  if (a < 45)
-    return e.formatDistance("xMinutes", a, t);
-  if (a < 90)
-    return e.formatDistance("aboutXHours", 1, t);
-  if (a < R) {
-    const m = Math.round(a / 60);
-    return e.formatDistance("aboutXHours", m, t);
-  } else {
-    if (a < l)
-      return e.formatDistance("xDays", 1, t);
-    if (a < g) {
-      const m = Math.round(a / R);
-      return e.formatDistance("xDays", m, t);
-    } else if (a < g * 2)
-      return p = Math.round(a / g), e.formatDistance("aboutXMonths", p, t);
-  }
-  if (p = ee(i, f), p < 12) {
-    const m = Math.round(a / g);
-    return e.formatDistance("xMonths", m, t);
-  } else {
-    const m = p % 12, b = Math.trunc(p / 12);
-    return m < 3 ? e.formatDistance("aboutXYears", b, t) : m < 9 ? e.formatDistance("overXYears", b, t) : e.formatDistance("almostXYears", b + 1, t);
-  }
-}
-function ie(o, n) {
-  return re(o, J(o), n);
-}
-const w = {
-  "de-DE": { moreInformation: "Weitere Informationen" },
-  "en-GB": { moreInformation: "More information" },
-  "en-US": { moreInformation: "More information" },
-  "es-ES": { moreInformation: "Más información" },
-  "es-MX": { moreInformation: "Más información" },
-  "fr-FR": { moreInformation: "Plus d'informations" },
-  "it-IT": { moreInformation: "Ulteriori informazioni" },
-  "ja-JP": { moreInformation: "詳細情報" },
-  "pt-BR": { moreInformation: "Mais informações" },
-  "zh-CN": { moreInformation: "更多信息" }
-}, le = { key: 0 }, de = {
-  i18n: { messages: w }
-}, ce = /* @__PURE__ */ x({
-  ...de,
-  __name: "info-icon-with-popover",
-  props: {
-    /**
-     * Text showed in the popover on hover
-     */
-    popoverText: { type: String, default: null },
-    /**
-     * Position the popover should take if space is available
-     */
-    popoverPosition: {
-      type: String,
-      default: "bottom-start",
-      validator: (o) => Object.values(Y).includes(o)
-    }
-  },
-  setup(o) {
-    const { t: s } = X({ messages: w }), r = I(), e = I(null), l = H("bento-info-icon-with-popover"), d = I(), t = I(), f = () => {
-      d.value = !0, t.value && clearTimeout(t.value);
-    }, i = () => {
-      const a = setTimeout(() => {
-        d.value = !1;
-      }, 200);
-      t.value = a;
-    }, u = () => {
-      f();
-    }, U = (a) => {
-      (!r.value || !(a?.relatedTarget instanceof Element) || !r.value.contains(a.relatedTarget)) && i();
-    };
-    return (a, p) => (v(), S("div", {
-      ref_key: "infoIconRef",
-      ref: r,
-      class: "b-info-icon-with-popover",
-      tabindex: "0",
-      "data-testid": "info-icon-with-popover",
-      onMouseenter: f,
-      onMouseleave: i,
-      onFocus: u,
-      onFocusout: U
-    }, [
-      y(c(V), {
-        ref_key: "targetElement",
-        ref: e,
-        class: "b-info-icon-with-popover__svg",
-        "aria-expanded": d.value,
-        "aria-describedby": c(l),
-        "svg-title": c(s)("moreInformation")
-      }, null, 8, ["aria-expanded", "aria-describedby", "svg-title"]),
-      e.value ? (v(), O(c($), {
-        key: 0,
-        open: d.value,
-        "target-element": e.value,
-        position: o.popoverPosition,
-        role: "tooltip",
-        "fit-content": "",
-        "disable-focus-trap": ""
-      }, {
-        default: _(() => [
-          y(c(T), null, {
-            default: _(() => [
-              E(a.$slots, "default", {}, () => [
-                o.popoverText ? (v(), S("div", le, M(o.popoverText), 1)) : h("", !0)
-              ], !0)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["open", "target-element", "position"])) : h("", !0)
-    ], 544));
-  }
-}), je = /* @__PURE__ */ N(ce, [["__scopeId", "data-v-7949c381"]]), z = {
-  "de-DE": { lastUpdated: "Letzte Aktualisierung: {date}" },
-  "en-GB": { lastUpdated: "Last updated: {date}" },
-  "en-US": { lastUpdated: "Last updated: {date}" },
-  "es-ES": { lastUpdated: "Última actualización: {date}" },
-  "es-MX": { lastUpdated: "Última actualización: {date}" },
-  "fr-FR": { lastUpdated: "Dernière mise à jour : le {date}" },
-  "it-IT": { lastUpdated: "Ultimo aggiornamento: {date}" },
-  "ja-JP": { lastUpdated: "最終更新日: {date}" },
-  "pt-BR": { lastUpdated: "Última atualização: {date}" },
-  "zh-CN": { lastUpdated: "最后更新时间：{date}" }
-}, ue = { class: "b-header-meta__container" }, fe = {
-  key: 1,
-  class: "b-header-meta__timestamp-section"
-}, me = {
-  i18n: { messages: z }
-}, pe = /* @__PURE__ */ x({
-  ...me,
-  __name: "header-meta",
-  props: {
-    description: { default: null },
-    lastUpdated: { default: null },
-    reloadButton: { default: null }
-  },
-  setup(o) {
-    const { t: n, locale: s } = X({ messages: z }), r = o, e = j(() => r.lastUpdated ? s.value : ""), l = ae(e), d = j(
-      () => r.lastUpdated ? n("lastUpdated", {
-        date: ie(r.lastUpdated, {
-          locale: l.value,
-          addSuffix: !0
-        })
-      }) : null
-    ), t = F(), f = W(t);
-    return (i, u) => (v(), S("div", ue, [
-      i.description || c(f)("description") ? (v(), O(c(T), {
-        key: 0,
-        class: "b-header-meta__description",
-        el: "div"
-      }, {
-        default: _(() => [
-          E(i.$slots, "description", {}, () => [
-            B(M(i.description), 1)
-          ], !0)
-        ]),
-        _: 3
-      })) : h("", !0),
-      i.lastUpdated ? (v(), S("div", fe, [
-        y(c(T), {
-          class: "b-header-meta__timestamp",
-          el: "div"
-        }, {
-          default: _(() => [
-            B(M(d.value), 1)
-          ]),
-          _: 1
-        }),
-        i.reloadButton ? (v(), O(c(A), {
-          key: 0,
-          variant: "tertiary",
-          state: i.reloadButton.state,
-          onClick: i.reloadButton.event
-        }, {
-          iconLeft: _(() => [
-            y(c(oe), { "aria-hidden": "true" })
-          ]),
-          default: _(() => [
-            B(M(i.reloadButton.title), 1)
-          ]),
-          _: 1
-        }, 8, ["state", "onClick"])) : h("", !0)
-      ])) : h("", !0)
-    ]));
-  }
-}), Pe = /* @__PURE__ */ N(pe, [["__scopeId", "data-v-7ffeebd4"]]);
-export {
-  Pe as H,
-  je as I
-};
-//# sourceMappingURL=header-meta.I2Tztkls.js.map

package/dist/chunks/input-field.DlEEFday.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-field.DlEEFday.js","sources":["../../../vue2/src/components/input-field/input-field.types.ts","../../../vue2/src/components/input-field/input-field.vue"],"sourcesContent":["import { type BentoDropdownProps } from '../dropdown/dropdown.types';\nimport { type FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    CONDENSED = 'condensed',\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\nexport interface BentoInputDropdownProps {\n    /**\n     * Text that labels the dropdown element\n     */\n    'aria-label'?: string;\n    /**\n     * Indicates that dropdown items are loading (shows a loading skeleton)\n     */\n    componentLoading?: BentoDropdownProps['componentLoading'];\n    /**\n     * Enables dynamic filtering\n     */\n    dynamicFiltering?: BentoDropdownProps['dynamicFiltering'];\n    /**\n     * Empty state displayed when no search results are found\n     */\n    emptyState?: BentoDropdownProps['emptyState'];\n    /**\n     * Enables value/label pair handling for selected values\n     */\n    enableValueLabelPair?: BentoDropdownProps['enableValueLabelPair'];\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: BentoDropdownProps['hasMoreItems'];\n    /**\n     * Function that determines which options are disabled from interaction\n     */\n    isOptionDisabled?: BentoDropdownProps['isOptionDisabled'];\n    /**\n     * List of available items\n     */\n    items: BentoDropdownProps['items'];\n    /**\n     * The type of lazy load: \"automatic\" for infinite scrolling, \"button\" for a show-more button\n     */\n    lazyLoadType?: BentoDropdownProps['lazyLoadType'];\n    /**\n     * Indicates if new options are lazy loading\n     */\n    loading?: BentoDropdownProps['loading'];\n    /**\n     * Selected value of the dropdown\n     */\n    modelValue?: BentoDropdownProps['modelValue'];\n    /**\n     * Sets the dropdown in read-only mode\n     */\n    readonly?: BentoDropdownProps['readonly'];\n    /**\n     * Dropdown search options including debounce time and placeholder\n     */\n    search?: BentoDropdownProps['search'];\n    /**\n     * Displays non-selectable, static categories in the dropdown\n     */\n    staticCategories?: BentoDropdownProps['staticCategories'];\n    /**\n     * Selected value of the dropdown\n     * @deprecated Since v2.0.0. Use `model-value` instead.\n     */\n    value?: BentoDropdownProps['value'];\n    /**\n     * Enables virtual scrolling for large lists of items\n     */\n    virtualScroll?: BentoDropdownProps['virtualScroll'];\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@<emit name>` instead.\n */\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n\nexport interface BentoInputFieldProps extends FormField {\n    /**\n     * Indicates whether the element is exposed to an accessibility API.\n     */\n    ariaHidden?: boolean;\n\n    /**\n     * Text that labels an the input element\n     *\n     * @deprecated Since v2.0.0. Use `aria-label` instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Reduces height of the input\n     */\n    condensed?: boolean;\n\n    /**\n     * Dropdown props for the single-select dropdown menu embedded in the input field.\n     * Only a subset of `BentoDropdownProps` is supported (multi-select is not available).\n     *\n     * @see {@link BentoInputDropdownProps}\n     */\n    dropdown?: BentoInputDropdownProps;\n\n    /**\n     * Position of the dropdown before or after input value\n     */\n    dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * Adds error validation class for outlining input-field.\n     *\n     * @deprecated Since v2.0.0. Use `errorMessage` instead.\n     */\n    error?: boolean;\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    modelValue?: BentoInputFieldValue;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n\n    /**\n     * Static text that displayed before or after input value\n     * Applicable to the Static Value variant\n     */\n    staticValue?: string;\n\n    /**\n     * Position of Static Value before or after input value\n     */\n    staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * A string specifying the type of control to render.\n     * All `input` types are available but only `search`, `text` and `number` are fully supported.\n     *\n     * If `type` is `search`, use `bento-search-bar` instead.\n     */\n    type?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type'];\n\n    /**\n     * Text displayed as the value of the input-field\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoInputFieldValue;\n\n    /**\n     * Describes the different variants for the input element\n     */\n    variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`;\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        v-bind=\"getRootAttributes($attrs)\"\n        :data-testid=\"getDataTestId($attrs)\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default') || label\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :label=\"label\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n            <div class=\"b-input-field__input-container\">\n                <input\n                    :id=\"inputFieldId\"\n                    v-bind=\"$attrs\"\n                    ref=\"inputFieldElement\"\n                    class=\"b-input-field__input\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-describedby=\"computedAriaDescribedBy\"\n                    :aria-owns=\"computedAriaOwns\"\n                    :aria-invalid=\"shouldShowError\"\n                    :placeholder=\"placeholder\"\n                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :type=\"type\"\n                    :value=\"modelValue ?? value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                    @click=\"emit('click', $event)\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography\n                    v-if=\"hint && isFocused && (modelValue || value)\"\n                    el=\"span\"\n                    class=\"b-input-field__hint\"\n                >\n                    {{ hint }}\n                </bento-typography>\n            </div>\n\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span\n            v-if=\"hasSlot('description') || description\"\n            :id=\"descriptionId\"\n            class=\"b-input-field__description\"\n            @click=\"focusInput\"\n        >\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\">\n                    {{ description }}\n                </slot>\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, type Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import {\n        INPUT_FIELD_COMPONENT_INJECTION_KEY,\n        INPUT_FIELD_HINT_INJECTION_KEY,\n        INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        type BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        type BentoInputFieldProps,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        type BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = withDefaults(defineProps<BentoInputFieldProps>(), {\n        ariaHidden: true,\n        ariaLabel: undefined,\n        condensed: false,\n        description: '',\n        disabled: false,\n        dropdown: undefined,\n        dropdownPosition: BentoInputFieldElementPosition.START,\n        error: false,\n        errorMessage: null,\n        label: '',\n        modelValue: undefined,\n        optional: false,\n        placeholder: '',\n        required: false,\n        readonly: false,\n        slashedZero: false,\n        staticValue: '',\n        staticValuePosition: BentoInputFieldElementPosition.START,\n        tooltipText: null,\n        type: BentoInputFieldType.TEXT,\n        value: undefined,\n        variant: BentoInputFieldVariant.DEFAULT,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the input is clicked\n         */\n        (e: 'click', event: MouseEvent);\n\n        /**\n         * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value\n         */\n        (e: 'change'): void;\n\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value\n         */\n        (e: 'dropdown-input', selectedValue: BentoListboxSelectedValue): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n\n        /**\n         * Emitted when a key is pressed down\n         */\n        (e: 'keydown', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when a key is pressed and lifted up\n         */\n        (e: 'keyup', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when the component's model changes\n         * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value. Contains every dropdown prop passed with the updated selected value as 'value'\n         */\n        (e: 'update:dropdown', updatedDropdownProps: BentoInputDropdownProps): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: 'update:model-value', inputValue: BentoInputFieldValue): void;\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoInputFieldValue>(emit);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputDropdownElement = ref(null);\n    const inputFieldId = generateUid('input');\n    const dropdownId = generateUid('input-dropdown');\n    const staticValueId = generateUid('input-static-value');\n    const descriptionId = generateUid('input-description');\n    const errorId = generateUid('input-error');\n    const isFocused = ref(false);\n\n    /**\n     * Gets the overriden or the default data-testid attribute\n     * @param attributes - the live attributes object\n     */\n    function getDataTestId(attributes: Record<string, unknown>) {\n        return (attributes['data-testid'] as string) ?? 'input-text-container';\n    }\n    /**\n     * Filters out all aria attributes for the root element.\n     * @param attributes - the live attributes object\n     */\n    function getRootAttributes(attributes: Record<string, unknown>) {\n        return Object.fromEntries(\n            Object.entries(attributes).filter(([key]) => !key.startsWith('aria-') && key !== 'data-testid')\n        );\n    }\n\n    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const isDropdownReadOnly = computed<BentoInputDropdownProps['readonly']>(\n        () => isReadOnly.value || props.dropdown?.readonly\n    );\n\n    const shouldShowStaticValue = computed(\n        () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n    );\n\n    const isDefaultVariant = computed(() => props.variant === BentoInputFieldVariant.DEFAULT);\n\n    const isPaymentMethodVariant = computed(() => props.variant === BentoInputFieldVariant.PAYMENT_METHOD);\n\n    const shouldDisplayStaticValueAtStart = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayStaticValueAtEnd = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowDropdown = computed(() => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown);\n    const shouldDisplayDropdownAtStart = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayDropdownAtEnd = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n    );\n\n    const computedLabel = computed(() => (getSlotText(slots)('default') as string) || props.label);\n    const computedDescription = computed(() => (getSlotText(slots)('description') as string) || props.description);\n\n    const computedAriaOwns = computed(() => {\n        if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n            return `${staticValueId} ${dropdownId}`;\n        }\n        if (shouldShowDropdown.value === true) {\n            return `${dropdownId}`;\n        }\n        if (shouldShowStaticValue.value === true) {\n            return `${staticValueId}`;\n        }\n        return null;\n    });\n\n    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() =>\n        attrs?.['aria-labelledby'] ? undefined : t('ariaLabelFallback')\n    );\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: computedLabel.value || computedAriaLabelFallbackMessage,\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${computedDescription.value ? descriptionId : ''} ${\n                shouldShowError.value && !!props.errorMessage ? errorId : ''\n            }`\n    );\n\n    const inputFieldConditionalClasses = computed(() => ({\n        [`b-input-field--${BentoInputFieldStateClass.CONDENSED}`]: props.condensed,\n        [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n        [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n        [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n        [`b-input-field--slashed-zero`]: props.slashedZero,\n    }));\n\n    const inputFieldDropdownProps = computed(() => ({\n        'aria-label': computedAriaLabelDropdowFallback.value,\n        ...props.dropdown,\n    }));\n\n    const onInput = (event: Event) => {\n        const inputValue = (event.target as HTMLInputElement).value;\n        if (!props.disabled && !isReadOnly.value) {\n            emitValue(inputValue);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    const focus = () => {\n        if (props.variant === 'dropdown') {\n            inputDropdownElement.value.focus();\n        } else {\n            focusInput();\n        }\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n        focus,\n    });\n\n    const inputFieldParentComponent = inject(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, '');\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType) && !inputFieldParentComponent) {\n        if (props.type === 'tel') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-phone-number\" instead.`\n            );\n        } else if (props.type === 'password') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-password\" instead.`\n            );\n        } else {\n            printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type '${props.type}'`);\n        }\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n\n    if (props.value) {\n        deprecate(\n            'BentoInputField \"value\" property',\n            `The use of \"value\" prop in \"BentoInputField\" is no longer supported.\n             Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :model-value=\"inputValue\"\n     *              :@update:model-value=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        name: 'bento-input-field',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","props","__props","emit","__emit","emitValue","useFormFieldEmits","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputDropdownElement","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isFocused","getDataTestId","attributes","getRootAttributes","key","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","hint","inject","INPUT_FIELD_HINT_INJECTION_KEY","onFocus","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","isDropdownReadOnly","computed","shouldShowStaticValue","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedLabel","getSlotText","computedDescription","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","__expose","inputFieldParentComponent","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","printDevelopmentWarning","deprecate"],"mappings":"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"}