@adyen/bento-vue3 1.2.0 → 1.3.0

package/dist/input-field.js

@@ -1,23 +1,24 @@
-import { defineComponent as q, ref as j, computed as i, resolveComponent as I, openBlock as a, createBlock as s, normalizeClass as K, withCtx as u, createElementBlock as p, createVNode as L, renderSlot as f, createTextVNode as R, toDisplayString as $, createCommentVNode as n, createElementVNode as V, mergeProps as U, withKeys as X } from "vue";
-import { B as J, d as Q, b as Z, a as x } from "./chunks/index.ebf5f6cf.js";
-import { u as ee } from "./chunks/use-has-slot.068222e6.js";
+import { defineComponent as j, ref as K, toRef as X, computed as r, resolveComponent as O, openBlock as o, createBlock as s, normalizeClass as J, withCtx as u, createElementBlock as p, createVNode as L, renderSlot as f, createTextVNode as $, toDisplayString as V, createCommentVNode as n, createElementVNode as U, mergeProps as M, withKeys as Q } from "vue";
+import { B as Z, d as x, b as ee, a as ae } from "./chunks/index.222d29b0.js";
+import { u as oe } from "./chunks/use-has-slot.068222e6.js";
+import { u as te } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { g as S } from "./chunks/unique-id.a2a2b458.js";
-import { u as oe } from "./chunks/i18n.6c402773.js";
-import { B as ae, a as te } from "./chunks/dropdown.f9997464.js";
-import { g as ne } from "./chunks/get-slot-text.2db867f8.js";
-import { E as re } from "./chunks/error-message.b88bb75a.js";
-import { _ as ie } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index17.css";
-var b = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(b || {}), l = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(l || {}), v = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e.SMALL_PADDING_LEFT = "small-padding-left", e.SMALL_PADDING_RIGHT = "small-padding-right", e))(v || {}), N = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(N || {}), r = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.ESCAPE_PRESSED = "escape-pressed", e.UPDATE_DROPDOWN = "update:dropdown", e.DROPDOWN_INPUT = "dropdown-input", e.FOCUS = "focus", e.CHANGE = "change", e.BLUR = "blur", e.KEYDOWN = "keydown", e))(r || {});
-const M = {
+import { u as ne } from "./chunks/i18n.6c402773.js";
+import { B as ie, a as re } from "./chunks/dropdown.8b415aac.js";
+import { g as de } from "./chunks/get-slot-text.2db867f8.js";
+import { E as le } from "./chunks/error-message.ddfe8ea5.js";
+import { _ as se } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index42.css";
+var v = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(v || {}), l = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(l || {}), m = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e.SMALL_PADDING_LEFT = "small-padding-left", e.SMALL_PADDING_RIGHT = "small-padding-right", e))(m || {}), N = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(N || {}), i = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.ESCAPE_PRESSED = "escape-pressed", e.UPDATE_DROPDOWN = "update:dropdown", e.DROPDOWN_INPUT = "dropdown-input", e.FOCUS = "focus", e.CHANGE = "change", e.BLUR = "blur", e.KEYDOWN = "keydown", e))(i || {});
+const k = {
   "en-US": {
     optional: "optional",
     required: "required"
   }
-}, de = q({
-  i18n: { messages: M },
+}, ue = j({
+  i18n: { messages: k },
   name: "bento-input-field",
-  components: { BentoDropdown: ae, BentoTypography: J, ErrorMessage: re },
+  components: { BentoDropdown: ie, BentoTypography: Z, ErrorMessage: le },
   props: {
     /**
      * Indicates whether the element is exposed to an accessibility API.
@@ -103,51 +104,51 @@ const M = {
      */
     variant: {
       type: String,
-      default: b.DEFAULT,
-      validator: (e) => Object.values(b).includes(e)
+      default: v.DEFAULT,
+      validator: (e) => Object.values(v).includes(e)
     }
   },
   emits: [
-    r.INPUT,
-    r.ESCAPE_PRESSED,
-    r.DROPDOWN_INPUT,
-    r.UPDATE_DROPDOWN,
-    r.CHANGE,
-    r.FOCUS,
-    r.BLUR,
-    r.KEYDOWN
+    i.INPUT,
+    i.ESCAPE_PRESSED,
+    i.DROPDOWN_INPUT,
+    i.UPDATE_DROPDOWN,
+    i.CHANGE,
+    i.FOCUS,
+    i.BLUR,
+    i.KEYDOWN
   ],
-  setup(e, { slots: o, emit: E }) {
-    const { t: P } = oe({ messages: M }), h = ee(o), T = j(null), d = S("input"), y = S("input-dropdown"), D = S("input-static-value"), t = S("input-description"), O = S("input-error"), A = i(
-      () => e.variant === b.STATIC_VALUE && !!o.staticValue
-    ), k = i(
-      () => A.value && e.staticValuePosition === l.START
-    ), C = i(
-      () => A.value && e.staticValuePosition === l.END
-    ), m = i(
-      () => e.variant === b.DROPDOWN && !!e.dropdown
-    ), B = i(
-      () => m.value && e.dropdownPosition === l.START
-    ), c = i(
-      () => m.value && e.dropdownPosition === l.END
-    ), w = i(
-      () => !e.disabled && !e.readonly && (!!e.errorMessage || e.error)
-    ), H = i(() => m.value === !0 && A.value === !0 ? `${D} ${y}` : m.value === !0 ? `${y}` : A.value === !0 ? `${D}` : null), Y = i(() => e.ariaLabel ? e.ariaLabel : h("default") ? ne(o)("default") : "input field"), W = i(
-      () => `${h("description") ? t : ""} ${w.value && e.errorMessage ? O : ""}`
-    ), F = i(() => ({
-      [`b-input-field--${v.DISABLED}`]: e.disabled,
-      [`b-input-field--${v.READONLY}`]: e.readonly,
-      [`b-input-field--${v.ERROR}`]: w.value,
-      [`b-input-field--${v.SMALL_PADDING_LEFT}`]: B.value,
-      [`b-input-field--${v.SMALL_PADDING_RIGHT}`]: c.value
-    })), G = (g) => {
-      e.disabled || E(r.INPUT, g.target.value);
-    }, _ = (g) => {
-      E(r.DROPDOWN_INPUT, g), E(r.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: g });
-    }, z = () => {
-      T.value.focus();
+  setup(e, { slots: a, emit: E }) {
+    const { t: P } = ne({ messages: k }), h = oe(a), w = K(null), d = S("input"), y = S("input-dropdown"), b = S("input-static-value"), t = S("input-description"), B = S("input-error"), { isReadOnly: A } = te(X(e, "readonly")), g = r(
+      () => e.variant === v.STATIC_VALUE && !!a.staticValue
+    ), C = r(
+      () => g.value && e.staticValuePosition === l.START
+    ), H = r(
+      () => g.value && e.staticValuePosition === l.END
+    ), D = r(
+      () => e.variant === v.DROPDOWN && !!e.dropdown
+    ), c = r(
+      () => D.value && e.dropdownPosition === l.START
+    ), R = r(
+      () => D.value && e.dropdownPosition === l.END
+    ), I = r(
+      () => !e.disabled && !A.value && (!!e.errorMessage || e.error)
+    ), F = r(() => D.value === !0 && g.value === !0 ? `${b} ${y}` : D.value === !0 ? `${y}` : g.value === !0 ? `${b}` : null), Y = r(() => e.ariaLabel ? e.ariaLabel : h("default") ? de(a)("default") : "input field"), W = r(
+      () => `${h("description") ? t : ""} ${I.value && e.errorMessage ? B : ""}`
+    ), G = r(() => ({
+      [`b-input-field--${m.DISABLED}`]: e.disabled,
+      [`b-input-field--${m.READONLY}`]: A.value,
+      [`b-input-field--${m.ERROR}`]: I.value,
+      [`b-input-field--${m.SMALL_PADDING_LEFT}`]: c.value,
+      [`b-input-field--${m.SMALL_PADDING_RIGHT}`]: R.value
+    })), _ = (T) => {
+      !e.disabled && !A.value && E(i.INPUT, T.target.value);
+    }, z = (T) => {
+      E(i.DROPDOWN_INPUT, T), E(i.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: T });
+    }, q = () => {
+      w.value.focus();
     };
-    return e.error && Q(
+    return e.error && x(
       'BentoInputField "error" property',
       `Use the BentoInputField "errorMessage" property instead to indicate that there is a modifier error.
                     Having the field as "undefined" will hide/remove the error.
@@ -155,53 +156,54 @@ const M = {
       "2.0.0"
     ), {
       // Enums
-      BentoTypographyVariant: Z,
-      BentoTypographyElement: x,
-      BentoInputFieldVariant: b,
-      BentoDropdownSize: te,
-      BentoInputFieldEvent: r,
+      BentoTypographyVariant: ee,
+      BentoTypographyElement: ae,
+      BentoInputFieldVariant: v,
+      BentoDropdownSize: re,
+      BentoInputFieldEvent: i,
       // Functions
       t: P,
-      onDropdownInput: _,
-      onInput: G,
-      focusInput: z,
+      onDropdownInput: z,
+      onInput: _,
+      focusInput: q,
       hasSlot: h,
       // Values
-      inputFieldConditionalClasses: F,
-      inputFieldElement: T,
+      inputFieldConditionalClasses: G,
+      inputFieldElement: w,
       inputFieldId: d,
       dropdownId: y,
-      staticValueId: D,
+      staticValueId: b,
       descriptionId: t,
-      errorId: O,
-      shouldDisplayStaticValueAtStart: k,
-      shouldDisplayStaticValueAtEnd: C,
-      shouldShowDropdown: m,
-      shouldDisplayDropdownAtStart: B,
-      shouldDisplayDropdownAtEnd: c,
-      shouldShowError: w,
-      computedAriaOwns: H,
+      errorId: B,
+      isReadOnly: A,
+      shouldDisplayStaticValueAtStart: C,
+      shouldDisplayStaticValueAtEnd: H,
+      shouldShowDropdown: D,
+      shouldDisplayDropdownAtStart: c,
+      shouldDisplayDropdownAtEnd: R,
+      shouldShowError: I,
+      computedAriaOwns: F,
       computedAriaLabel: Y,
       computedAriaDescribedBy: W
     };
   }
 });
-const le = ["for"], se = ["aria-disabled"], ue = ["aria-hidden"], pe = ["aria-hidden"], fe = ["id"], ye = ["id", "aria-label", "aria-describedby", "aria-owns", "aria-invalid", "placeholder", "type", "value", "disabled", "readonly"], be = ["aria-hidden"], ve = ["id"], De = ["id"];
-function me(e, o, E, P, h, T) {
-  const d = I("bento-typography"), y = I("bento-dropdown"), D = I("error-message");
-  return a(), s(d, {
-    class: K(["b-input-field", e.inputFieldConditionalClasses]),
+const pe = ["for"], fe = ["aria-disabled"], ye = ["aria-hidden"], ve = ["aria-hidden"], me = ["id"], be = ["id", "aria-label", "aria-describedby", "aria-owns", "aria-invalid", "placeholder", "type", "value", "disabled", "readonly"], De = ["aria-hidden"], Se = ["id"], Ee = ["id"];
+function he(e, a, E, P, h, w) {
+  const d = O("bento-typography"), y = O("bento-dropdown"), b = O("error-message");
+  return o(), s(d, {
+    class: J(["b-input-field", e.inputFieldConditionalClasses]),
     "data-testid": "input-text-container",
     el: e.BentoTypographyElement.DIV,
     variant: e.BentoTypographyVariant.BODY
   }, {
     default: u(() => [
-      e.hasSlot("default") ? (a(), p("label", {
+      e.hasSlot("default") ? (o(), p("label", {
         key: 0,
         for: e.inputFieldId,
         class: "b-input-field__label",
         "data-testid": "input-field-label",
-        onClick: o[0] || (o[0] = (...t) => e.focusInput && e.focusInput(...t))
+        onClick: a[0] || (a[0] = (...t) => e.focusInput && e.focusInput(...t))
       }, [
         L(d, {
           el: e.BentoTypographyElement.SPAN,
@@ -213,58 +215,58 @@ function me(e, o, E, P, h, T) {
           ]),
           _: 3
         }, 8, ["el", "variant"]),
-        e.optional ? (a(), s(d, {
+        e.optional ? (o(), s(d, {
           key: 0,
           class: "b-input-field__label-requirement",
           el: e.BentoTypographyElement.SPAN
         }, {
           default: u(() => [
-            R(" (" + $(e.t("optional")) + ") ", 1)
+            $(" (" + V(e.t("optional")) + ") ", 1)
           ]),
           _: 1
         }, 8, ["el"])) : n("", !0),
-        e.required ? (a(), s(d, {
+        e.required ? (o(), s(d, {
           key: 1,
           class: "b-input-field__label-requirement",
           el: e.BentoTypographyElement.SPAN
         }, {
           default: u(() => [
-            R(" (" + $(e.t("required")) + ") ", 1)
+            $(" (" + V(e.t("required")) + ") ", 1)
           ]),
           _: 1
         }, 8, ["el"])) : n("", !0)
-      ], 8, le)) : n("", !0),
-      V("div", {
+      ], 8, pe)) : n("", !0),
+      U("div", {
         class: "b-input-field__input-box",
         "aria-disabled": e.disabled
       }, [
-        e.variant === e.BentoInputFieldVariant.DEFAULT && e.hasSlot("defaultIconBefore") ? (a(), p("span", {
+        e.variant === e.BentoInputFieldVariant.DEFAULT && e.hasSlot("defaultIconBefore") ? (o(), p("span", {
           key: 0,
           "aria-hidden": e.ariaHidden ? "true" : void 0,
           class: "b-input-field__default-icon-before"
         }, [
           f(e.$slots, "defaultIconBefore", {}, void 0, !0)
-        ], 8, ue)) : n("", !0),
-        e.variant === e.BentoInputFieldVariant.PAYMENT_METHOD && e.hasSlot("paymentMethod") ? (a(), p("span", {
+        ], 8, ye)) : n("", !0),
+        e.variant === e.BentoInputFieldVariant.PAYMENT_METHOD && e.hasSlot("paymentMethod") ? (o(), p("span", {
           key: 1,
           "aria-hidden": e.ariaHidden ? "true" : void 0,
           class: "b-input-field__payment-method"
         }, [
           f(e.$slots, "paymentMethod", {}, void 0, !0)
-        ], 8, pe)) : n("", !0),
-        e.shouldDisplayDropdownAtStart ? (a(), p("div", {
+        ], 8, ve)) : n("", !0),
+        e.shouldDisplayDropdownAtStart ? (o(), p("div", {
           key: 2,
           id: e.dropdownId,
           class: "b-input-field__dropdown b-input-field__dropdown--start"
         }, [
-          e.dropdown ? (a(), s(y, U({ key: 0 }, e.dropdown, {
+          e.dropdown ? (o(), s(y, M({ key: 0 }, e.dropdown, {
             size: e.BentoDropdownSize.SMALL,
             disabled: e.disabled,
-            readonly: e.readonly,
+            readonly: e.isReadOnly,
             onInput: e.onDropdownInput
           }), null, 16, ["size", "disabled", "readonly", "onInput"])) : n("", !0)
-        ], 8, fe)) : n("", !0),
-        e.shouldDisplayStaticValueAtStart ? (a(), s(d, {
+        ], 8, me)) : n("", !0),
+        e.shouldDisplayStaticValueAtStart ? (o(), s(d, {
           key: 3,
           id: e.staticValueId,
           class: "b-input-field__static-value b-input-field__static-value--start",
@@ -276,7 +278,7 @@ function me(e, o, E, P, h, T) {
           ]),
           _: 3
         }, 8, ["id", "el", "variant"])) : n("", !0),
-        V("input", {
+        U("input", {
           id: e.inputFieldId,
           ref: "inputFieldElement",
           class: "b-input-field__input",
@@ -288,25 +290,25 @@ function me(e, o, E, P, h, T) {
           type: e.type,
           value: e.value,
           disabled: e.disabled,
-          readonly: e.readonly,
-          onInput: o[1] || (o[1] = (...t) => e.onInput && e.onInput(...t)),
-          onChange: o[2] || (o[2] = (t) => e.$emit(e.BentoInputFieldEvent.CHANGE)),
-          onFocus: o[3] || (o[3] = (t) => e.$emit(e.BentoInputFieldEvent.FOCUS)),
-          onBlur: o[4] || (o[4] = (t) => e.$emit(e.BentoInputFieldEvent.BLUR)),
+          readonly: e.isReadOnly,
+          onInput: a[1] || (a[1] = (...t) => e.onInput && e.onInput(...t)),
+          onChange: a[2] || (a[2] = (t) => e.$emit(e.BentoInputFieldEvent.CHANGE)),
+          onFocus: a[3] || (a[3] = (t) => e.$emit(e.BentoInputFieldEvent.FOCUS)),
+          onBlur: a[4] || (a[4] = (t) => e.$emit(e.BentoInputFieldEvent.BLUR)),
           onKeydown: [
-            o[5] || (o[5] = (t) => e.$emit(e.BentoInputFieldEvent.KEYDOWN, t)),
-            o[6] || (o[6] = X((t) => e.$emit(e.BentoInputFieldEvent.ESCAPE_PRESSED), ["esc"]))
+            a[5] || (a[5] = (t) => e.$emit(e.BentoInputFieldEvent.KEYDOWN, t)),
+            a[6] || (a[6] = Q((t) => e.$emit(e.BentoInputFieldEvent.ESCAPE_PRESSED), ["esc"]))
           ]
-        }, null, 40, ye),
-        e.hasSlot("iconAfter") ? (a(), p("span", {
+        }, null, 40, be),
+        e.hasSlot("iconAfter") ? (o(), p("span", {
           key: 4,
           "aria-hidden": e.ariaHidden ? "true" : void 0,
           class: "b-input-field__icon-after",
           "data-testid": "input-text__icon-after"
         }, [
           f(e.$slots, "iconAfter", {}, void 0, !0)
-        ], 8, be)) : n("", !0),
-        e.shouldDisplayStaticValueAtEnd ? (a(), s(d, {
+        ], 8, De)) : n("", !0),
+        e.shouldDisplayStaticValueAtEnd ? (o(), s(d, {
           key: 5,
           id: e.staticValueId,
           class: "b-input-field__static-value b-input-field__static-value--end",
@@ -318,33 +320,33 @@ function me(e, o, E, P, h, T) {
           ]),
           _: 3
         }, 8, ["id", "el", "variant"])) : n("", !0),
-        e.shouldDisplayDropdownAtEnd ? (a(), p("div", {
+        e.shouldDisplayDropdownAtEnd ? (o(), p("div", {
           key: 6,
           id: e.dropdownId,
           class: "b-input-field__dropdown b-input-field__dropdown--end"
         }, [
-          e.dropdown ? (a(), s(y, U({
+          e.dropdown ? (o(), s(y, M({
             key: 0,
             id: e.dropdownId
           }, e.dropdown, {
             size: e.BentoDropdownSize.SMALL,
             disabled: e.disabled,
-            readonly: e.readonly,
+            readonly: e.isReadOnly,
             onInput: e.onDropdownInput
           }), null, 16, ["id", "size", "disabled", "readonly", "onInput"])) : n("", !0)
-        ], 8, ve)) : n("", !0)
-      ], 8, se),
-      e.shouldShowError && e.errorMessage ? (a(), s(D, {
+        ], 8, Se)) : n("", !0)
+      ], 8, fe),
+      e.shouldShowError && e.errorMessage ? (o(), s(b, {
         key: 1,
         id: e.errorId,
         "error-message": e.errorMessage,
         class: "b-input-field__error-message"
       }, null, 8, ["id", "error-message"])) : n("", !0),
-      e.hasSlot("description") ? (a(), p("span", {
+      e.hasSlot("description") ? (o(), p("span", {
         key: 2,
         id: e.descriptionId,
         class: "b-input-field__description",
-        onClick: o[7] || (o[7] = (...t) => e.focusInput && e.focusInput(...t))
+        onClick: a[7] || (a[7] = (...t) => e.focusInput && e.focusInput(...t))
       }, [
         L(d, {
           el: e.BentoTypographyElement.SPAN,
@@ -355,18 +357,18 @@ function me(e, o, E, P, h, T) {
           ]),
           _: 3
         }, 8, ["el", "variant"])
-      ], 8, De)) : n("", !0)
+      ], 8, Ee)) : n("", !0)
     ]),
     _: 3
   }, 8, ["class", "el", "variant"]);
 }
-const Pe = /* @__PURE__ */ ie(de, [["render", me], ["__scopeId", "data-v-3bde0e5b"]]);
+const Re = /* @__PURE__ */ se(ue, [["render", he], ["__scopeId", "data-v-601cd93a"]]);
 export {
-  Pe as BentoInputField,
+  Re as BentoInputField,
   l as BentoInputFieldElementPosition,
-  r as BentoInputFieldEvent,
-  v as BentoInputFieldStateClass,
+  i as BentoInputFieldEvent,
+  m as BentoInputFieldStateClass,
   N as BentoInputFieldType,
-  b as BentoInputFieldVariant
+  v as BentoInputFieldVariant
 };
 //# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../../vue2/src/components/input-field/input-field.types.ts","../../vue2/src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n    SMALL_PADDING_LEFT = 'small-padding-left',\n    SMALL_PADDING_RIGHT = 'small-padding-right',\n}\n\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\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","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        :el=\"BentoTypographyElement.DIV\"\n        :variant=\"BentoTypographyVariant.BODY\"\n    >\n        <!-- Label -->\n        <label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            class=\"b-input-field__label\"\n            data-testid=\"input-field-label\"\n            @click=\"focusInput\"\n        >\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" stronger>\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('required') }})\n            </bento-typography>\n        </label>\n\n        <div class=\"b-input-field__input-box\" :aria-disabled=\"disabled\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.DEFAULT && hasSlot('defaultIconBefore')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__default-icon-before\"\n            >\n                <slot name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.PAYMENT_METHOD && 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            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                    @input=\"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=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\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                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                @input=\"onInput\"\n                @change=\"$emit(BentoInputFieldEvent.CHANGE)\"\n                @focus=\"$emit(BentoInputFieldEvent.FOCUS)\"\n                @blur=\"$emit(BentoInputFieldEvent.BLUR)\"\n                @keydown=\"$emit(BentoInputFieldEvent.KEYDOWN, $event)\"\n                @keydown.esc=\"$emit(BentoInputFieldEvent.ESCAPE_PRESSED)\"\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=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                    @input=\"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 v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldEvent,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoDropdownSize } from '../dropdown/dropdown.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\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-input-field',\n        components: { BentoDropdown, BentoTypography, ErrorMessage },\n        props: {\n            /**\n             * Indicates whether the element is exposed to an accessibility API.\n             */\n            ariaHidden: { type: Boolean, default: true },\n\n            /**\n             * Text that labels an the input element\n             */\n            ariaLabel: { type: String, default: undefined },\n\n            /**\n             * Disables the possibility of changing value in the input-field\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Dropdown props for the small selectable dropdown menu.\n             * @see BentoDropdown\n             */\n            dropdown: {\n                type: Object as PropType<BentoInputDropdownProps>,\n                default: undefined,\n            },\n\n            /**\n             * Position of the dropdown before or after input value\n             */\n            dropdownPosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * Adds error validation class for outlining input-field.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            error: { type: Boolean, default: false },\n\n            /**\n             * Renders input-field with an error state and the error message beneath the input box\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the placeholder of the input-field\n             */\n            placeholder: { type: String, default: '' },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the input field to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Static text that displayed before or after input value\n             * Applicable to the Static Value variant\n             */\n            staticValue: { type: String, default: '' },\n\n            /**\n             * Position of Static Value before or after input value\n             */\n            staticValuePosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * A string specifying the type of control to render.\n             */\n            type: {\n                type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}`>,\n                default: BentoInputFieldType.TEXT,\n                validator: (value: BentoInputFieldType) => Object.values(BentoInputFieldType).includes(value),\n            },\n\n            /**\n             * Text displayed as the value of the input-field\n             */\n            value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n            /**\n             * Describes the different variants for the input element\n             */\n            variant: {\n                type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n                default: BentoInputFieldVariant.DEFAULT,\n                validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n            },\n        },\n        emits: [\n            BentoInputFieldEvent.INPUT,\n            BentoInputFieldEvent.ESCAPE_PRESSED,\n            BentoInputFieldEvent.DROPDOWN_INPUT,\n            BentoInputFieldEvent.UPDATE_DROPDOWN,\n            BentoInputFieldEvent.CHANGE,\n            BentoInputFieldEvent.FOCUS,\n            BentoInputFieldEvent.BLUR,\n            BentoInputFieldEvent.KEYDOWN,\n        ],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const inputFieldElement = 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\n            const shouldShowStaticValue = computed(\n                () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n            );\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(\n                () => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown\n            );\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 && !props.readonly && (!!props.errorMessage || props.error)\n            );\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            const computedAriaLabel = computed(() => {\n                if (props.ariaLabel) {\n                    return props.ariaLabel;\n                }\n                if (hasSlot('default')) {\n                    return getSlotText(slots)('default');\n                }\n                return 'input field';\n            });\n\n            const computedAriaDescribedBy = computed(\n                () =>\n                    `${hasSlot('description') ? descriptionId : ''} ${\n                        shouldShowError.value && !!props.errorMessage ? errorId : ''\n                    }`\n            );\n\n            const inputFieldConditionalClasses = computed(() => ({\n                [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n                [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: props.readonly,\n                [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_LEFT}`]: shouldDisplayDropdownAtStart.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_RIGHT}`]: shouldDisplayDropdownAtEnd.value,\n            }));\n\n            const onInput = (event: Event) => {\n                if (!props.disabled) {\n                    /**\n                     * Triggered when input value is changed\n                     *\n                     * @event input\n                     * @property {String} inputValue - the updated input-field value\n                     */\n                    emit(BentoInputFieldEvent.INPUT, (event.target as HTMLInputElement).value);\n                }\n            };\n\n            const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n                emit(BentoInputFieldEvent.DROPDOWN_INPUT, selectedValue);\n                emit(BentoInputFieldEvent.UPDATE_DROPDOWN, { ...props?.dropdown, value: selectedValue });\n            };\n\n            const focusInput = () => {\n                inputFieldElement.value.focus();\n            };\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            return {\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n                BentoInputFieldVariant,\n                BentoDropdownSize,\n                BentoInputFieldEvent,\n\n                // Functions\n                t,\n                onDropdownInput,\n                onInput,\n                focusInput,\n                hasSlot,\n\n                // Values\n                inputFieldConditionalClasses,\n                inputFieldElement,\n                inputFieldId,\n                dropdownId,\n                staticValueId,\n                descriptionId,\n                errorId,\n                shouldDisplayStaticValueAtStart,\n                shouldDisplayStaticValueAtEnd,\n                shouldShowDropdown,\n                shouldDisplayDropdownAtStart,\n                shouldDisplayDropdownAtEnd,\n                shouldShowError,\n                computedAriaOwns,\n                computedAriaLabel,\n                computedAriaDescribedBy,\n            };\n        },\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","_sfc_main","defineComponent","messages","BentoDropdown","BentoTypography","ErrorMessage","value","props","slots","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","shouldShowStaticValue","computed","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","onDropdownInput","selectedValue","focusInput","deprecate","BentoTypographyVariant","BentoTypographyElement","BentoDropdownSize","openBlock","createBlock","_component_bento_typography","normalizeClass","_ctx","withCtx","createElementBlock","createCommentVNode","_hoisted_1","createElementVNode","_hoisted_3","_component_bento_dropdown","mergeProps","_hoisted_5","_cache","args","$event","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_2"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../../vue2/src/components/input-field/input-field.types.ts","../../vue2/src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n    SMALL_PADDING_LEFT = 'small-padding-left',\n    SMALL_PADDING_RIGHT = 'small-padding-right',\n}\n\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\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","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        :el=\"BentoTypographyElement.DIV\"\n        :variant=\"BentoTypographyVariant.BODY\"\n    >\n        <!-- Label -->\n        <label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            class=\"b-input-field__label\"\n            data-testid=\"input-field-label\"\n            @click=\"focusInput\"\n        >\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" stronger>\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('required') }})\n            </bento-typography>\n        </label>\n\n        <div class=\"b-input-field__input-box\" :aria-disabled=\"disabled\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.DEFAULT && hasSlot('defaultIconBefore')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__default-icon-before\"\n            >\n                <slot name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.PAYMENT_METHOD && 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            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"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=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\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                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"isReadOnly\"\n                @input=\"onInput\"\n                @change=\"$emit(BentoInputFieldEvent.CHANGE)\"\n                @focus=\"$emit(BentoInputFieldEvent.FOCUS)\"\n                @blur=\"$emit(BentoInputFieldEvent.BLUR)\"\n                @keydown=\"$emit(BentoInputFieldEvent.KEYDOWN, $event)\"\n                @keydown.esc=\"$emit(BentoInputFieldEvent.ESCAPE_PRESSED)\"\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=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"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 v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldEvent,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoDropdownSize } from '../dropdown/dropdown.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\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-input-field',\n        components: { BentoDropdown, BentoTypography, ErrorMessage },\n        props: {\n            /**\n             * Indicates whether the element is exposed to an accessibility API.\n             */\n            ariaHidden: { type: Boolean, default: true },\n\n            /**\n             * Text that labels an the input element\n             */\n            ariaLabel: { type: String, default: undefined },\n\n            /**\n             * Disables the possibility of changing value in the input-field\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Dropdown props for the small selectable dropdown menu.\n             * @see BentoDropdown\n             */\n            dropdown: {\n                type: Object as PropType<BentoInputDropdownProps>,\n                default: undefined,\n            },\n\n            /**\n             * Position of the dropdown before or after input value\n             */\n            dropdownPosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * Adds error validation class for outlining input-field.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            error: { type: Boolean, default: false },\n\n            /**\n             * Renders input-field with an error state and the error message beneath the input box\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the placeholder of the input-field\n             */\n            placeholder: { type: String, default: '' },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the input field to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Static text that displayed before or after input value\n             * Applicable to the Static Value variant\n             */\n            staticValue: { type: String, default: '' },\n\n            /**\n             * Position of Static Value before or after input value\n             */\n            staticValuePosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * A string specifying the type of control to render.\n             */\n            type: {\n                type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}`>,\n                default: BentoInputFieldType.TEXT,\n                validator: (value: BentoInputFieldType) => Object.values(BentoInputFieldType).includes(value),\n            },\n\n            /**\n             * Text displayed as the value of the input-field\n             */\n            value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n            /**\n             * Describes the different variants for the input element\n             */\n            variant: {\n                type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n                default: BentoInputFieldVariant.DEFAULT,\n                validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n            },\n        },\n        emits: [\n            BentoInputFieldEvent.INPUT,\n            BentoInputFieldEvent.ESCAPE_PRESSED,\n            BentoInputFieldEvent.DROPDOWN_INPUT,\n            BentoInputFieldEvent.UPDATE_DROPDOWN,\n            BentoInputFieldEvent.CHANGE,\n            BentoInputFieldEvent.FOCUS,\n            BentoInputFieldEvent.BLUR,\n            BentoInputFieldEvent.KEYDOWN,\n        ],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const inputFieldElement = 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\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowStaticValue = computed(\n                () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n            );\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(\n                () => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown\n            );\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 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            const computedAriaLabel = computed(() => {\n                if (props.ariaLabel) {\n                    return props.ariaLabel;\n                }\n                if (hasSlot('default')) {\n                    return getSlotText(slots)('default');\n                }\n                return 'input field';\n            });\n\n            const computedAriaDescribedBy = computed(\n                () =>\n                    `${hasSlot('description') ? descriptionId : ''} ${\n                        shouldShowError.value && !!props.errorMessage ? errorId : ''\n                    }`\n            );\n\n            const inputFieldConditionalClasses = computed(() => ({\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--${BentoInputFieldStateClass.SMALL_PADDING_LEFT}`]: shouldDisplayDropdownAtStart.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_RIGHT}`]: shouldDisplayDropdownAtEnd.value,\n            }));\n\n            const onInput = (event: Event) => {\n                if (!props.disabled && !isReadOnly.value) {\n                    /**\n                     * Triggered when input value is changed\n                     *\n                     * @event input\n                     * @property {String} inputValue - the updated input-field value\n                     */\n                    emit(BentoInputFieldEvent.INPUT, (event.target as HTMLInputElement).value);\n                }\n            };\n\n            const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n                emit(BentoInputFieldEvent.DROPDOWN_INPUT, selectedValue);\n                emit(BentoInputFieldEvent.UPDATE_DROPDOWN, { ...props?.dropdown, value: selectedValue });\n            };\n\n            const focusInput = () => {\n                inputFieldElement.value.focus();\n            };\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            return {\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n                BentoInputFieldVariant,\n                BentoDropdownSize,\n                BentoInputFieldEvent,\n\n                // Functions\n                t,\n                onDropdownInput,\n                onInput,\n                focusInput,\n                hasSlot,\n\n                // Values\n                inputFieldConditionalClasses,\n                inputFieldElement,\n                inputFieldId,\n                dropdownId,\n                staticValueId,\n                descriptionId,\n                errorId,\n                isReadOnly,\n                shouldDisplayStaticValueAtStart,\n                shouldDisplayStaticValueAtEnd,\n                shouldShowDropdown,\n                shouldDisplayDropdownAtStart,\n                shouldDisplayDropdownAtEnd,\n                shouldShowError,\n                computedAriaOwns,\n                computedAriaLabel,\n                computedAriaDescribedBy,\n            };\n        },\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","_sfc_main","defineComponent","messages","BentoDropdown","BentoTypography","ErrorMessage","value","props","slots","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowStaticValue","computed","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","onDropdownInput","selectedValue","focusInput","deprecate","BentoTypographyVariant","BentoTypographyElement","BentoDropdownSize","openBlock","createBlock","_component_bento_typography","normalizeClass","_ctx","withCtx","createElementBlock","createCommentVNode","_hoisted_1","createElementVNode","_hoisted_3","_component_bento_dropdown","mergeProps","_hoisted_5","_cache","args","$event","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_2"],"mappings":"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"}

package/dist/internal.js

@@ -1,10 +1,10 @@
-import { B as r, L as e } from "./chunks/listbox-option-tag.73661a5d.js";
-import { C as s, a as p, b as n } from "./chunks/calendar.08885a56.js";
-import { C } from "./chunks/copy.1ce0203e.js";
-import { C as i } from "./chunks/controls-group.806da9bd.js";
-import { E as d } from "./chunks/error-message.b88bb75a.js";
+import { B as r, L as e } from "./chunks/listbox-option-tag.5ae8b79b.js";
+import { C as s, a as p, b as n } from "./chunks/calendar.09b683b3.js";
+import { C } from "./chunks/copy.2cf5e6c3.js";
+import { C as i } from "./chunks/controls-group.60fb2a86.js";
+import { E as d } from "./chunks/error-message.ddfe8ea5.js";
 import { G as L, a as l } from "./chunks/grid-layout.a30855ff.js";
-import { B as G } from "./chunks/listbox.7b5e0eee.js";
+import { B as G } from "./chunks/listbox.0c7c4e5e.js";
 export {
   r as BentoAvatar,
   G as BentoListbox,

package/dist/link.js

@@ -1,8 +1,8 @@
 import { defineComponent as m, computed as b, useAttrs as v, openBlock as a, createElementBlock as h, normalizeClass as B, unref as e, createBlock as i, withCtx as c, renderSlot as s, mergeProps as T } from "vue";
 import { RouterLink as g } from "vue-router";
-import { B as u, a as f, b as y } from "./chunks/index.ebf5f6cf.js";
+import { B as u, a as f, b as y } from "./chunks/index.222d29b0.js";
 import { _ as E } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index20.css";
+import "./assets/index22.css";
 var r = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.QUIET = "quiet", t))(r || {});
 const A = ["href", "title"], U = {
   name: "bento-link"

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as i, onUnmounted as l, computed as s, openBlock as d, createElementBlock as r, normalizeClass as c } from "vue";
 import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index37.css";
+import "./assets/index11.css";
 var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
 const p = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -2,12 +2,12 @@ import { openBlock as m, createElementBlock as k, mergeProps as W, toDisplayStri
 import { _ as L } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as F } from "./chunks/unique-id.a2a2b458.js";
 import { B as pe } from "./chunks/directive.0408e565.js";
-import { B as fe, a as V } from "./chunks/button.1f630b6e.js";
+import { B as fe, a as V } from "./chunks/button.e1c39f66.js";
 import { BentoPopover as ve, BentoPopoverPositions as K } from "./popover.js";
 import { a as _e, C as H } from "./chunks/chevron-right.aef416c6.js";
-import { B as be, a as q } from "./chunks/base-button.4a56c2fb.js";
-import { B as ye, a as he, b as Ce } from "./chunks/index.ebf5f6cf.js";
-import "./assets/index38.css";
+import { B as be, a as q } from "./chunks/base-button.20be08da.js";
+import { B as ye, a as he, b as Ce } from "./chunks/index.222d29b0.js";
+import "./assets/index20.css";
 let U = 0;
 const ge = {
   beforeCreate() {