@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/input-field.js

@@ -1,33 +1,43 @@
-import { defineComponent as C, ref as U, toRef as V, computed as n } from "vue";
-import { B as M, d as $, b as H, a as F } from "./chunks/index.56858f4e.js";
-import { u as Y } from "./chunks/use-has-slot.068222e6.js";
-import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { g as u } from "./chunks/unique-id.a2a2b458.js";
-import { u as W } from "./chunks/i18n.155748d6.js";
-import { B as G, a as k } from "./chunks/dropdown.c05678d0.js";
-import { g as q } from "./chunks/get-slot-text.e5c766d0.js";
-import { E as z } from "./chunks/error-message.0433b539.js";
-import { n as j } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index40.css";
-var d = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(d || {}), i = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(i || {}), l = /* @__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))(l || {}), m = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(m || {}), 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 K = {
+import { defineComponent as x, useAttrs as q, useSlots as G, ref as R, toRef as z, computed as r, toRefs as j } from "vue";
+import { d as F, B as W } from "./chunks/index.45295dd3.js";
+import { u as Y } from "./chunks/use-has-slot.6052d56a.js";
+import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { g as p } from "./chunks/unique-id.a2a2b458.js";
+import { u as K } from "./chunks/i18n.155748d6.js";
+import { a as J, B as Q } from "./chunks/dropdown.fd93f0ce.js";
+import { g as Z } from "./chunks/get-slot-text.c1114034.js";
+import { u as ee } from "./chunks/aria-label.ac9651a5.js";
+import { E as te } from "./chunks/error-message.3b3c33d4.js";
+import { n as ae } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index41.css";
+var d = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), s = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a.SMALL_PADDING_LEFT = "small-padding-left", a.SMALL_PADDING_RIGHT = "small-padding-right", a))(s || {}), D = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(D || {}), oe = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(oe || {});
+const re = {
   "en-US": {
     optional: "optional",
-    required: "required"
+    required: "required",
+    ariaLabelFallback: "Input field"
   }
-}, X = C({
-  i18n: { messages: K },
-  name: "bento-input-field",
-  components: { BentoDropdown: G, BentoTypography: M, ErrorMessage: z },
+}, ie = {
+  i18n: { messages: re }
+}, ne = /* @__PURE__ */ x({
+  ...ie,
+  __name: "input-field",
   props: {
     /**
      * Indicates whether the element is exposed to an accessibility API.
      */
     ariaHidden: { type: Boolean, default: !0 },
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Text that labels an the input element
      */
     ariaLabel: { type: String, default: void 0 },
+    /**
+     * Reduces height of the input
+     */
+    condensed: { type: Boolean, default: !1 },
     /**
      * Disables the possibility of changing value in the input-field
      */
@@ -45,8 +55,8 @@ const K = {
      */
     dropdownPosition: {
       type: String,
-      default: i.START,
-      validator: (e) => Object.values(i).includes(e)
+      default: n.START,
+      validator: (a) => Object.values(n).includes(a)
     },
     /**
      * Adds error validation class for outlining input-field.
@@ -84,16 +94,16 @@ const K = {
      */
     staticValuePosition: {
       type: String,
-      default: i.START,
-      validator: (e) => Object.values(i).includes(e)
+      default: n.START,
+      validator: (a) => Object.values(n).includes(a)
     },
     /**
      * A string specifying the type of control to render.
      */
     type: {
       type: String,
-      default: m.TEXT,
-      validator: (e) => Object.values(m).includes(e)
+      default: D.TEXT,
+      validator: (a) => Object.values(D).includes(a)
     },
     /**
      * Text displayed as the value of the input-field
@@ -105,119 +115,85 @@ const K = {
     variant: {
       type: String,
       default: d.DEFAULT,
-      validator: (e) => Object.values(d).includes(e)
+      validator: (a) => Object.values(d).includes(a)
     }
   },
-  emits: [
-    r.INPUT,
-    r.ESCAPE_PRESSED,
-    r.DROPDOWN_INPUT,
-    r.UPDATE_DROPDOWN,
-    r.CHANGE,
-    r.FOCUS,
-    r.BLUR,
-    r.KEYDOWN
-  ],
-  setup(e, { slots: t, emit: a }) {
-    const { t: o } = W(), _ = Y(t), v = U(null), g = u("input"), y = u("input-dropdown"), b = u("input-static-value"), h = u("input-description"), S = u("input-error"), { isReadOnly: p } = x(V(e, "readonly")), c = n(
-      () => e.variant === d.STATIC_VALUE && !!t.staticValue
-    ), T = n(
-      () => c.value && e.staticValuePosition === i.START
-    ), w = n(
-      () => c.value && e.staticValuePosition === i.END
-    ), s = n(
-      () => e.variant === d.DROPDOWN && !!e.dropdown
-    ), E = n(
-      () => s.value && e.dropdownPosition === i.START
-    ), A = n(
-      () => s.value && e.dropdownPosition === i.END
-    ), D = n(
-      () => !e.disabled && !p.value && (!!e.errorMessage || e.error)
-    ), O = n(() => s.value === !0 && c.value === !0 ? `${b} ${y}` : s.value === !0 ? `${y}` : c.value === !0 ? `${b}` : null), P = n(() => e.ariaLabel ? e.ariaLabel : _("default") ? q(t)("default") : "input field"), N = n(
-      () => `${_("description") ? h : ""} ${D.value && e.errorMessage ? S : ""}`
-    ), R = n(() => ({
-      [`b-input-field--${l.DISABLED}`]: e.disabled,
-      [`b-input-field--${l.READONLY}`]: p.value,
-      [`b-input-field--${l.ERROR}`]: D.value,
-      [`b-input-field--${l.SMALL_PADDING_LEFT}`]: E.value,
-      [`b-input-field--${l.SMALL_PADDING_RIGHT}`]: A.value
-    })), B = (f) => {
-      !e.disabled && !p.value && a(r.INPUT, f.target.value);
-    }, I = (f) => {
-      a(r.DROPDOWN_INPUT, f), a(r.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: f });
-    }, L = () => {
-      v.value.focus();
+  emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "input"],
+  setup(a, { expose: t, emit: o }) {
+    const e = a, i = q(), c = G(), { t: h } = K(), b = Y(c), w = R(null), C = p("input"), y = p("input-dropdown"), v = p("input-static-value"), S = p("input-description"), A = p("input-error"), { isReadOnly: f } = X(z(e, "readonly")), l = r(
+      () => e.variant === d.STATIC_VALUE && !!c.staticValue
+    ), N = r(() => e.variant === d.DEFAULT), M = r(() => e.variant === d.PAYMENT_METHOD), P = r(
+      () => l.value && e.staticValuePosition === n.START
+    ), I = r(
+      () => l.value && e.staticValuePosition === n.END
+    ), u = r(() => e.variant === d.DROPDOWN && !!e.dropdown), g = r(
+      () => u.value && e.dropdownPosition === n.START
+    ), E = r(
+      () => u.value && e.dropdownPosition === n.END
+    ), m = r(
+      () => !e.disabled && !f.value && (!!e.errorMessage || e.error)
+    ), V = r(() => u.value === !0 && l.value === !0 ? `${v} ${y}` : u.value === !0 ? `${y}` : l.value === !0 ? `${v}` : null), T = R(i["aria-label"]), { ariaLabel: L } = j(e), B = ee({
+      ariaLabel: T.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: L,
+      defaultFallback: b("default") ? Z(c)("default") : h("ariaLabelFallback")
+    }), U = r(
+      () => `${b("description") ? S : ""} ${m.value && e.errorMessage ? A : ""}`
+    ), k = r(() => ({
+      [`b-input-field--${s.CONDENSED}`]: e.condensed,
+      [`b-input-field--${s.DISABLED}`]: e.disabled,
+      [`b-input-field--${s.READONLY}`]: f.value,
+      [`b-input-field--${s.ERROR}`]: m.value,
+      [`b-input-field--${s.SMALL_PADDING_LEFT}`]: g.value,
+      [`b-input-field--${s.SMALL_PADDING_RIGHT}`]: E.value
+    })), $ = (_) => {
+      !e.disabled && !f.value && o("input", _.target.value);
+    }, H = (_) => {
+      o("dropdown-input", _), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: _ });
+    }, O = () => {
+      w.value.focus();
     };
-    return e.error && $(
+    return t({
+      focusInput: O
+    }), e.error && F(
       '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.
-                    <bento-dropdown errorMessage="Error message text" />`,
+            Having the field as "undefined" will hide/remove the error.
+            <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), {
-      // Enums
-      BentoTypographyVariant: H,
-      BentoTypographyElement: F,
-      BentoInputFieldVariant: d,
-      BentoDropdownSize: k,
-      BentoInputFieldEvent: r,
-      // Functions
-      t: o,
-      onDropdownInput: I,
-      onInput: B,
-      focusInput: L,
-      hasSlot: _,
-      // Values
-      inputFieldConditionalClasses: R,
-      inputFieldElement: v,
-      inputFieldId: g,
-      dropdownId: y,
-      staticValueId: b,
-      descriptionId: h,
-      errorId: S,
-      isReadOnly: p,
-      shouldDisplayStaticValueAtStart: T,
-      shouldDisplayStaticValueAtEnd: w,
-      shouldShowDropdown: s,
-      shouldDisplayDropdownAtStart: E,
-      shouldDisplayDropdownAtEnd: A,
-      shouldShowError: D,
-      computedAriaOwns: O,
-      computedAriaLabel: P,
-      computedAriaDescribedBy: N
-    };
+    ), { __sfc: !0, attrs: i, slots: c, props: e, emit: o, t: h, hasSlot: b, inputFieldElement: w, inputFieldId: C, dropdownId: y, staticValueId: v, descriptionId: S, errorId: A, isReadOnly: f, shouldShowStaticValue: l, isDefaultVariant: N, isPaymentMethodVariant: M, shouldDisplayStaticValueAtStart: P, shouldDisplayStaticValueAtEnd: I, shouldShowDropdown: u, shouldDisplayDropdownAtStart: g, shouldDisplayDropdownAtEnd: E, shouldShowError: m, computedAriaOwns: V, ariaLabelAttribute: T, ariaLabel: L, computedAriaLabel: B, computedAriaDescribedBy: U, inputFieldConditionalClasses: k, onInput: $, onDropdownInput: H, focusInput: O, BentoTypography: W, ErrorMessage: te, BentoDropdownSize: J, BentoDropdown: Q };
   }
 });
-var J = function() {
-  var t = this, a = t._self._c;
-  return t._self._setupProxy, a("bento-typography", { staticClass: "b-input-field", class: t.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY } }, [t.hasSlot("default") ? a("label", { staticClass: "b-input-field__label", attrs: { for: t.inputFieldId, "data-testid": "input-field-label" }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._t("default")], 2), t.optional ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("optional")) + ") ")]) : t._e(), t.required ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("required")) + ") ")]) : t._e()], 1) : t._e(), a("div", { staticClass: "b-input-field__input-box", attrs: { "aria-disabled": t.disabled } }, [t.variant === t.BentoInputFieldVariant.DEFAULT && t.hasSlot("defaultIconBefore") ? a("span", { staticClass: "b-input-field__default-icon-before", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("defaultIconBefore")], 2) : t._e(), t.variant === t.BentoInputFieldVariant.PAYMENT_METHOD && t.hasSlot("paymentMethod") ? a("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), t.shouldDisplayDropdownAtStart ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e(), t.shouldDisplayStaticValueAtStart ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), a("input", { ref: "inputFieldElement", staticClass: "b-input-field__input", attrs: { id: t.inputFieldId, "aria-label": t.computedAriaLabel, "aria-describedby": t.computedAriaDescribedBy, "aria-owns": t.computedAriaOwns, "aria-invalid": t.shouldShowError, placeholder: t.placeholder, type: t.type, disabled: t.disabled, readonly: t.isReadOnly }, domProps: { value: t.value }, on: { input: t.onInput, change: function(o) {
-    return t.$emit(t.BentoInputFieldEvent.CHANGE);
-  }, focus: function(o) {
-    return t.$emit(t.BentoInputFieldEvent.FOCUS);
-  }, blur: function(o) {
-    return t.$emit(t.BentoInputFieldEvent.BLUR);
-  }, keydown: [function(o) {
-    return t.$emit(t.BentoInputFieldEvent.KEYDOWN, o);
-  }, function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.$emit(t.BentoInputFieldEvent.ESCAPE_PRESSED);
-  }] } }), t.hasSlot("iconAfter") ? a("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), t.shouldDisplayStaticValueAtEnd ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), t.shouldDisplayDropdownAtEnd ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { id: t.dropdownId, size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e()], 1), t.shouldShowError && t.errorMessage ? a("error-message", { staticClass: "b-input-field__error-message", attrs: { id: t.errorId, "error-message": t.errorMessage } }) : t._e(), t.hasSlot("description") ? a("span", { staticClass: "b-input-field__description", attrs: { id: t.descriptionId }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
-}, Q = [], Z = /* @__PURE__ */ j(
-  X,
-  J,
-  Q,
+var de = function() {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o(e.BentoTypography, { staticClass: "b-input-field", class: e.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: "div", variant: "body" } }, [e.hasSlot("default") ? o("label", { staticClass: "b-input-field__label", attrs: { for: e.inputFieldId, "data-testid": "input-field-label" }, on: { click: e.focusInput } }, [o(e.BentoTypography, { attrs: { el: "span", variant: "body", stronger: "" } }, [t._t("default")], 2), t.optional ? o(e.BentoTypography, { staticClass: "b-input-field__label-requirement", attrs: { el: "span" } }, [t._v(" (" + t._s(e.t("optional")) + ") ")]) : t._e(), t.required ? o(e.BentoTypography, { staticClass: "b-input-field__label-requirement", attrs: { el: "span" } }, [t._v(" (" + t._s(e.t("required")) + ") ")]) : t._e()], 1) : t._e(), o("div", { staticClass: "b-input-field__input-box", attrs: { "aria-disabled": t.disabled } }, [e.isDefaultVariant && e.hasSlot("defaultIconBefore") ? o("span", { staticClass: "b-input-field__default-icon-before", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("defaultIconBefore")], 2) : t._e(), e.isPaymentMethodVariant && e.hasSlot("paymentMethod") ? o("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), e.shouldDisplayDropdownAtStart ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: e.dropdownId } }, [t.dropdown ? o(e.BentoDropdown, t._b({ attrs: { size: e.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: e.isReadOnly }, on: { input: e.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e(), e.shouldDisplayStaticValueAtStart ? o(e.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: e.staticValueId, el: "span", variant: "body" } }, [t._t("staticValue")], 2) : t._e(), o("input", { ref: "inputFieldElement", staticClass: "b-input-field__input", attrs: { id: e.inputFieldId, "aria-label": e.computedAriaLabel, "aria-describedby": e.computedAriaDescribedBy, "aria-owns": e.computedAriaOwns, "aria-invalid": e.shouldShowError, placeholder: t.placeholder, type: t.type, disabled: t.disabled, readonly: e.isReadOnly }, domProps: { value: t.value }, on: { input: e.onInput, change: function(i) {
+    return e.emit("change");
+  }, focus: function(i) {
+    return e.emit("focus");
+  }, blur: function(i) {
+    return e.emit("blur");
+  }, keydown: [function(i) {
+    return e.emit("keydown", i);
+  }, function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : e.emit("escape-pressed");
+  }] } }), e.hasSlot("iconAfter") ? o("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), e.shouldDisplayStaticValueAtEnd ? o(e.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: e.staticValueId, el: "span", variant: "body" } }, [t._t("staticValue")], 2) : t._e(), e.shouldDisplayDropdownAtEnd ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: e.dropdownId } }, [t.dropdown ? o(e.BentoDropdown, t._b({ attrs: { id: e.dropdownId, size: e.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: e.isReadOnly }, on: { input: e.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e()], 1), e.shouldShowError && t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), e.hasSlot("description") ? o("span", { staticClass: "b-input-field__description", attrs: { id: e.descriptionId }, on: { click: e.focusInput } }, [o(e.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
+}, se = [], le = /* @__PURE__ */ ae(
+  ne,
+  de,
+  se,
   !1,
   null,
-  "60016fa4",
+  "083d84cc",
   null,
   null
 );
-const ut = Z.exports;
+const we = le.exports;
 export {
-  ut as BentoInputField,
-  i as BentoInputFieldElementPosition,
-  r as BentoInputFieldEvent,
-  l as BentoInputFieldStateClass,
-  m as BentoInputFieldType,
+  we as BentoInputField,
+  n as BentoInputFieldElementPosition,
+  oe as BentoInputFieldEvent,
+  s as BentoInputFieldStateClass,
+  D as BentoInputFieldType,
   d as BentoInputFieldVariant
 };
 //# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../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"],"mappings":";;;;;;;;;;;AAEY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,iBAAA,kBACAA,EAAA,eAAA,gBACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,qBAAA,sBACAA,EAAA,sBAAA,uBALQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA,GAcAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,iBAAA,kBACAA,EAAA,kBAAA,mBACAA,EAAA,iBAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,OAAA,QACAA,EAAA,UAAA,WARQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GCgJZE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,iBAAAC,GAAA,cAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,kBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAb,EAAA;AAAA,MACA,WAAA,CAAAc,MAAA,OAAA,OAAAd,CAAA,EAAA,SAAAc,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAMA,qBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAd,EAAA;AAAA,MACA,WAAA,CAAAc,MAAA,OAAA,OAAAd,CAAA,EAAA,SAAAc,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAV,EAAA;AAAA,MACA,WAAA,CAAAU,MAAA,OAAA,OAAAV,CAAA,EAAA,SAAAU,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,CAAA,QAAA,MAAA,GAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAhB,EAAA;AAAA,MACA,WAAA,CAAAgB,MAAA,OAAA,OAAAhB,CAAA,EAAA,SAAAgB,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAR,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAS,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAL,CAAA,GACAM,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAA,OAAA,GACAC,IAAAD,EAAA,gBAAA,GACAE,IAAAF,EAAA,oBAAA,GACAG,IAAAH,EAAA,mBAAA,GACAI,IAAAJ,EAAA,aAAA,GAEA,EAAA,YAAAK,EAAA,IAAAC,EAAAC,EAAAjB,GAAA,UAAA,CAAA,GAEAkB,IAAAC;AAAA,MAAA,MAAAnB,EAAA,YAAAjB,EAAA,gBAAA,CAAA,CAAAkB,EAAA;AAAA,IACA,GAGAmB,IAAAD;AAAA,MAAA,MAAAD,EAAA,SAAAlB,EAAA,wBAAAf,EAAA;AAAA,IACA,GAEAoC,IAAAF;AAAA,MAAA,MAAAD,EAAA,SAAAlB,EAAA,wBAAAf,EAAA;AAAA,IACA,GAGAqC,IAAAH;AAAA,MAAA,MAAAnB,EAAA,YAAAjB,EAAA,YAAA,CAAA,CAAAiB,EAAA;AAAA,IACA,GAEAuB,IAAAJ;AAAA,MAAA,MAAAG,EAAA,SAAAtB,EAAA,qBAAAf,EAAA;AAAA,IACA,GAEAuC,IAAAL;AAAA,MAAA,MAAAG,EAAA,SAAAtB,EAAA,qBAAAf,EAAA;AAAA,IACA,GAGAwC,IAAAN;AAAA,MAAA,MAAA,CAAAnB,EAAA,YAAA,CAAAe,EAAA,UAAA,CAAA,CAAAf,EAAA,gBAAAA,EAAA;AAAA,IACA,GAGA0B,IAAAP,EAAA,MACAG,EAAA,UAAA,MAAAJ,EAAA,UAAA,KACA,GAAAN,KAAAD,MAEAW,EAAA,UAAA,KACA,GAAAX,MAEAO,EAAA,UAAA,KACA,GAAAN,MAEA,IAAA,GAGAe,IAAAR,EAAA,MACAnB,EAAA,YACAA,EAAA,YAEAK,EAAA,SAAA,IACAuB,EAAA3B,CAAA,EAAA,SAAA,IAEA,aAAA,GAGA4B,IAAAV;AAAA,MAAA,MAAA,GAAAd,EAAA,aAAA,IAAAQ,IAAA,MAAAY,EAAA,SAAAzB,EAAA,eAAAc,IAAA;AAAA,IAGA,GAIAgB,IAAAX,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAhC,EAAA,UAAA,GAAAa,EAAA;AAAA,MACA,CAAA,kBAAAb,EAAA,UAAA,GAAA4B,EAAA;AAAA,MACA,CAAA,kBAAA5B,EAAA,OAAA,GAAAsC,EAAA;AAAA,MACA,CAAA,kBAAAtC,EAAA,oBAAA,GAAAoC,EAAA;AAAA,MACA,CAAA,kBAAApC,EAAA,qBAAA,GAAAqC,EAAA;AAAA,IACA,EAAA,GAGAO,IAAA,CAAAC,MAAA;AACA,MAAA,CAAAhC,EAAA,YAAA,CAAAe,EAAA,SAOAb,EAAAX,EAAA,OAAAyC,EAAA,OAAA,KAAA;AAAA,IACA,GAGAC,IAAA,CAAAC,MAAA;AACA,MAAAhC,EAAAX,EAAA,gBAAA2C,CAAA,GACAhC,EAAAX,EAAA,iBAAA,EAAA,GAAAS,KAAA,gBAAAA,EAAA,UAAA,OAAAkC,EAAA,CAAA;AAAA,IAAA,GAGAC,IAAA,MAAA;AACA,MAAA5B,EAAA,MAAA,MAAA;AAAA,IAAA;AAGA,WAAAP,EAAA,SACAoC;AAAA,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,MACA;AAAA,IAGA,GAIA;AAAA;AAAA,MAAA,wBAAAC;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAvD;AAAA,MACA,mBAAAwD;AAAA,MACA,sBAAAhD;AAAA;AAAA,MACA,GAAAY;AAAA,MAGA,iBAAA8B;AAAA,MACA,SAAAF;AAAA,MACA,YAAAI;AAAA,MACA,SAAA9B;AAAA;AAAA,MACA,8BAAAyB;AAAA,MAGA,mBAAAvB;AAAA,MACA,cAAAE;AAAA,MACA,YAAAE;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC;AAAA,MACA,SAAAC;AAAA,MACA,YAAAC;AAAA,MACA,iCAAAK;AAAA,MACA,+BAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,8BAAAC;AAAA,MACA,4BAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,yBAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the 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 for usage with properties since version 2.0. Use the 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    SMALL_PADDING_LEFT = 'small-padding-left',\n    SMALL_PADDING_RIGHT = 'small-padding-right',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\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\n/**\n * @deprecated The use of these enums is no longer supported.\n * Use `v-on:` or `@` to listen to the events being emitted.\n * This enum will be removed in 2.0.\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=\"div\"\n        variant=\"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=\"span\" variant=\"body\" stronger>\n                <slot></slot>\n            </bento-typography>\n            <bento-typography v-if=\"optional\" class=\"b-input-field__label-requirement\" el=\"span\">\n                ({{ t('optional') }})\n            </bento-typography>\n            <bento-typography v-if=\"required\" class=\"b-input-field__label-requirement\" el=\"span\">\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=\"isDefaultVariant && 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=\"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            >\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=\"span\"\n                variant=\"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('change')\"\n                @focus=\"emit('focus')\"\n                @blur=\"emit('blur')\"\n                @keydown=\"emit('keydown', $event)\"\n                @keydown.esc=\"emit('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=\"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                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=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoTypography } 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    import { useAriaLabel } from '@/utils/ts/aria-label';\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 = defineProps({\n        /**\n         * Indicates whether the element is exposed to an accessibility API.\n         */\n        ariaHidden: { type: Boolean, default: true },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Reduces height of the input\n         */\n        condensed: { type: Boolean, default: false },\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\n    const emit = defineEmits<{\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 element has lost focus\n         */\n        (e: 'blur'): void;\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\n         */\n        (e: 'keydown', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: 'input', inputValue: string): void;\n    }>();\n\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 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 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 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: hasSlot('default') ? (getSlotText(slots)('default') as string) : t('ariaLabelFallback'),\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.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--${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            emit('input', (event.target as HTMLInputElement).value);\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    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\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</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     *              :value=\"inputValue\"\n     *              :input=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\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","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","emit","onDropdownInput","selectedValue","focusInput","expose","deprecate"],"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.8d6cccac.js";
-import { C as s, a as p, b as n } from "./chunks/calendar.0ae43a96.js";
-import { C } from "./chunks/copy.5a4cbd4d.js";
-import { C as i } from "./chunks/controls-group.b827382b.js";
-import { E as d } from "./chunks/error-message.0433b539.js";
-import { G as L, a as l } from "./chunks/grid-layout.73f23b1b.js";
-import { B as G } from "./chunks/listbox.116ed0c1.js";
+import { B as r, L as e } from "./chunks/listbox-option-tag.ec42431b.js";
+import { C as s, a as p, b as n } from "./chunks/calendar.79ea42c1.js";
+import { C } from "./chunks/copy.ac796536.js";
+import { C as i } from "./chunks/controls-group.5d3e04dd.js";
+import { E as d } from "./chunks/error-message.3b3c33d4.js";
+import { G as L, a as l } from "./chunks/grid-layout.b7e0d964.js";
+import { B as G } from "./chunks/listbox.e792d2d6.js";
 export {
   r as BentoAvatar,
   G as BentoListbox,

package/dist/link.js

@@ -1,47 +1,48 @@
 import { defineComponent as i, computed as p, useAttrs as c } from "vue";
 import { RouterLink as _ } from "vue-router";
-import { B as u, a as y, b as d } from "./chunks/index.56858f4e.js";
+import { B as u } from "./chunks/index.45295dd3.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index13.css";
-var a = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.QUIET = "quiet", o))(a || {});
-const m = {
+import "./assets/index27.css";
+var o = /* @__PURE__ */ ((s) => (s.DEFAULT = "default", s.QUIET = "quiet", s))(o || {});
+const d = {
   name: "bento-link"
 }, k = /* @__PURE__ */ i({
-  ...m,
+  ...d,
   props: {
     args: null,
     external: { type: Boolean },
-    variant: { default: a.DEFAULT },
-    disableTypography: { type: Boolean }
+    variant: { default: o.DEFAULT },
+    disableTypography: { type: Boolean },
+    target: { default: null }
   },
   emits: ["click"],
-  setup(o, { emit: n }) {
-    const e = o, t = p(() => ({
-      [`b-link--${a.QUIET}`]: e.variant === a.QUIET
-    })), r = c();
-    return { __sfc: !0, props: e, conditionalClasses: t, attributes: r, linkProps: r, emit: n, onClick: (l, s) => {
-      n("click", l), s && s();
-    }, RouterLink: _, BentoTypography: u, BentoTypographyElement: y, BentoTypographyVariant: d };
+  setup(s, { emit: t }) {
+    const e = s, n = p(() => ({
+      [`b-link--${o.QUIET}`]: e.variant === o.QUIET
+    })), a = c();
+    return { __sfc: !0, props: e, conditionalClasses: n, attributes: a, linkProps: a, emit: t, onClick: (l, r) => {
+      t("click", l), r && r();
+    }, RouterLink: _, BentoTypography: u };
   }
 });
-var T = function() {
-  var n = this, e = n._self._c, t = n._self._setupProxy;
-  return n.external ? e("a", { staticClass: "b-link", class: t.conditionalClasses, attrs: { href: t.linkProps.to.toString(), title: t.linkProps.title, target: "_blank" }, on: { click: t.onClick } }, [n.disableTypography ? n._t("default") : e(t.BentoTypography, { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [n._t("default")], 2)], 2) : e(t.RouterLink, n._b({ staticClass: "b-link", class: t.conditionalClasses, attrs: { custom: "" }, nativeOn: { click: function(r) {
-    return t.onClick.apply(null, arguments);
-  } } }, "router-link", t.linkProps, !1), [n.disableTypography ? n._t("default") : e(t.BentoTypography, { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [n._t("default")], 2)], 2);
-}, g = [], h = /* @__PURE__ */ f(
+var y = function() {
+  var t = this, e = t._self._c, n = t._self._setupProxy;
+  return t.external ? e("a", { staticClass: "b-link", class: n.conditionalClasses, attrs: { href: n.linkProps.to.toString(), title: n.linkProps.title, target: t.target || "_blank" }, on: { click: n.onClick } }, [t.disableTypography ? t._t("default") : e(n.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2) : e(n.RouterLink, t._b({ staticClass: "b-link", class: n.conditionalClasses, attrs: { target: t.target, custom: "" }, nativeOn: { click: function(a) {
+    return n.onClick.apply(null, arguments);
+  } } }, "router-link", n.linkProps, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
+}, m = [], g = /* @__PURE__ */ f(
   k,
-  T,
-  g,
+  y,
+  m,
   !1,
   null,
-  "0d8d3b63",
+  "7f345ea8",
   null,
   null
 );
-const x = h.exports;
+const B = g.exports;
 export {
-  x as BentoLink,
-  a as BentoLinkVariant
+  B as BentoLink,
+  o as BentoLinkVariant
 };
 //# sourceMappingURL=link.js.map

package/dist/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../core/src/components/link/link.types.ts","../src/components/link/link.vue"],"sourcesContent":["export enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n","<template>\n    <a\n        v-if=\"external\"\n        class=\"b-link\"\n        :class=\"conditionalClasses\"\n        :href=\"linkProps.to.toString()\"\n        :title=\"linkProps.title\"\n        target=\"_blank\"\n        @click=\"onClick\"\n    >\n        <bento-typography\n            v-if=\"!disableTypography\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </a>\n    <router-link v-else v-bind=\"linkProps\" class=\"b-link\" :class=\"conditionalClasses\" custom @click.native=\"onClick\">\n        <bento-typography\n            v-if=\"!disableTypography\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed, useAttrs } from 'vue';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import type { RouterLinkProps, RouterLinkSlotArgument } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes } from 'vue/types/jsx';\n\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n    };\n</script>\n\n<script setup lang=\"ts\">\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface Props extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external?: boolean;\n\n        /**\n         * Link variant type affecting visual style.\n         * @values default, quiet\n         */\n        variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n\n        /**\n         * Disable the default typography for the component. Only use this when the component is inside another typography component.\n         */\n        disableTypography?: boolean;\n    }\n\n    const props = withDefaults(defineProps<Props>(), {\n        variant: BentoLinkVariant.DEFAULT,\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n    }));\n\n    // TODO: replace this when Vue allows users to extend props properly, read above for more info\n    const attributes = useAttrs() as unknown;\n    const linkProps = attributes as Props;\n\n    const emit = defineEmits<{\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","__default__","conditionalClasses","computed","props","attributes","useAttrs","e","navigateCallback","emit"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACsDR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;iBA8BAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,WAAAJ,EAAA,OAAA,GAAAK,EAAA,YAAAL,EAAA;AAAA,IACmC,EAAA,GAI9EM,IAAAC,EAAA;mFACAD,qBAMA,CAAAE,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"link.js","sources":["../../core/src/components/link/link.types.ts","../src/components/link/link.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n","<template>\n    <a\n        v-if=\"external\"\n        class=\"b-link\"\n        :class=\"conditionalClasses\"\n        :href=\"linkProps.to.toString()\"\n        :title=\"linkProps.title\"\n        :target=\"target || '_blank'\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </a>\n    <router-link\n        v-else\n        v-bind=\"linkProps\"\n        class=\"b-link\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed, useAttrs } from 'vue';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { BentoTypography } from '@/components/typography';\n    import type { RouterLinkProps, RouterLinkSlotArgument } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes } from 'vue/types/jsx';\n\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n    };\n</script>\n\n<script setup lang=\"ts\">\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface Props extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external?: boolean;\n\n        /**\n         * Link variant type affecting visual style.\n         * @values default, quiet\n         */\n        variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n\n        /**\n         * Disable the default typography for the component. Only use this when the component is inside another typography component.\n         */\n        disableTypography?: boolean;\n\n        /**\n         * Sets the target of the rendered link.\n         */\n        target?: string;\n    }\n\n    const props = withDefaults(defineProps<Props>(), {\n        variant: BentoLinkVariant.DEFAULT,\n        target: null,\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n    }));\n\n    // TODO: replace this when Vue allows users to extend props properly, read above for more info\n    const attributes = useAttrs() as unknown;\n    const linkProps = attributes as Props;\n\n    const emit = defineEmits<{\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","__default__","conditionalClasses","computed","props","attributes","useAttrs","e","navigateCallback","emit"],"mappings":";;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACmDR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBAqCAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,WAAAJ,EAAA,OAAA,GAAAK,EAAA,YAAAL,EAAA;AAAA,IACmC,EAAA,GAI9EM,IAAAC,EAAA;mFACAD,qBAMA,CAAAE,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;"}

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as s, onUnmounted as l, computed as i } from "vue";
 import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index15.css";
+import "./assets/index28.css";
 var a = /* @__PURE__ */ ((n) => (n.START = "loading-start", n.END = "loading-end", n))(a || {});
 const d = t({
   name: "bento-loading-indicator",