@adyen/bento-vue2 1.1.0 → 1.2.0

package/dist/input-field.js

@@ -1,14 +1,14 @@
 import { defineComponent as L, ref as C, computed as n } from "vue";
-import { B as U, d as V, b as M, a as $ } from "./chunks/index.e1fcc9e0.js";
+import { B as U, d as V, b as M, a as $ } from "./chunks/index.175f9e2d.js";
 import { u as H } from "./chunks/use-has-slot.068222e6.js";
-import { g as s } from "./chunks/unique-id.a2a2b458.js";
+import { g as u } from "./chunks/unique-id.a2a2b458.js";
 import { u as Y } from "./chunks/i18n.155748d6.js";
-import { B as x, a as W } from "./chunks/dropdown.e298bb6c.js";
+import { B as x, a as W } from "./chunks/dropdown.368486b1.js";
 import { g as F } from "./chunks/get-slot-text.e5c766d0.js";
-import { E as G } from "./chunks/error-message.4269d92b.js";
+import { E as G } from "./chunks/error-message.a581a172.js";
 import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index15.css";
-var u = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(i || {}), d = /* @__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))(d || {}), A = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(A || {}), 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 || {});
+import "./assets/index39.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 || {}), D = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(D || {}), 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 q = {
   "en-US": {
     optional: "optional",
@@ -44,7 +44,8 @@ const q = {
      */
     dropdownPosition: {
       type: String,
-      default: i.START
+      default: i.START,
+      validator: (e) => Object.values(i).includes(e)
     },
     /**
      * Adds error validation class for outlining input-field.
@@ -82,14 +83,16 @@ const q = {
      */
     staticValuePosition: {
       type: String,
-      default: i.START
+      default: i.START,
+      validator: (e) => Object.values(i).includes(e)
     },
     /**
      * A string specifying the type of control to render.
      */
     type: {
       type: String,
-      default: A.TEXT
+      default: D.TEXT,
+      validator: (e) => Object.values(D).includes(e)
     },
     /**
      * Text displayed as the value of the input-field
@@ -100,7 +103,8 @@ const q = {
      */
     variant: {
       type: String,
-      default: u.DEFAULT
+      default: d.DEFAULT,
+      validator: (e) => Object.values(d).includes(e)
     }
   },
   emits: [
@@ -114,34 +118,34 @@ const q = {
     r.KEYDOWN
   ],
   setup(e, { slots: t, emit: a }) {
-    const { t: o } = Y(), _ = H(t), D = C(null), v = s("input"), f = s("input-dropdown"), y = s("input-static-value"), h = s("input-description"), m = s("input-error"), p = n(
-      () => e.variant === u.STATIC_VALUE && !!t.staticValue
+    const { t: o } = Y(), _ = H(t), h = C(null), A = u("input"), f = u("input-dropdown"), y = u("input-static-value"), m = u("input-description"), v = u("input-error"), p = n(
+      () => e.variant === d.STATIC_VALUE && !!t.staticValue
     ), g = n(
       () => p.value && e.staticValuePosition === i.START
     ), T = n(
       () => p.value && e.staticValuePosition === i.END
-    ), l = n(
-      () => e.variant === u.DROPDOWN && !!e.dropdown
+    ), s = n(
+      () => e.variant === d.DROPDOWN && !!e.dropdown
     ), S = n(
-      () => l.value && e.dropdownPosition === i.START
+      () => s.value && e.dropdownPosition === i.START
     ), E = n(
-      () => l.value && e.dropdownPosition === i.END
+      () => s.value && e.dropdownPosition === i.END
     ), b = n(
       () => !e.disabled && !e.readonly && (!!e.errorMessage || e.error)
-    ), w = n(() => l.value === !0 && p.value === !0 ? `${y} ${f}` : l.value === !0 ? `${f}` : p.value === !0 ? `${y}` : null), P = n(() => e.ariaLabel ? e.ariaLabel : _("default") ? F(t)("default") : "input field"), N = n(
-      () => `${_("description") ? h : ""} ${b.value && e.errorMessage ? m : ""}`
-    ), O = n(() => ({
-      [`b-input-field--${d.DISABLED}`]: e.disabled,
-      [`b-input-field--${d.READONLY}`]: e.readonly,
-      [`b-input-field--${d.ERROR}`]: b.value,
-      [`b-input-field--${d.SMALL_PADDING_LEFT}`]: S.value,
-      [`b-input-field--${d.SMALL_PADDING_RIGHT}`]: E.value
+    ), w = n(() => s.value === !0 && p.value === !0 ? `${y} ${f}` : s.value === !0 ? `${f}` : p.value === !0 ? `${y}` : null), P = n(() => e.ariaLabel ? e.ariaLabel : _("default") ? F(t)("default") : "input field"), O = n(
+      () => `${_("description") ? m : ""} ${b.value && e.errorMessage ? v : ""}`
+    ), N = n(() => ({
+      [`b-input-field--${l.DISABLED}`]: e.disabled,
+      [`b-input-field--${l.READONLY}`]: e.readonly,
+      [`b-input-field--${l.ERROR}`]: b.value,
+      [`b-input-field--${l.SMALL_PADDING_LEFT}`]: S.value,
+      [`b-input-field--${l.SMALL_PADDING_RIGHT}`]: E.value
     })), B = (c) => {
       e.disabled || a(r.INPUT, c.target.value);
     }, I = (c) => {
       a(r.DROPDOWN_INPUT, c), a(r.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: c });
     }, R = () => {
-      D.value.focus();
+      h.value.focus();
     };
     return e.error && V(
       'BentoInputField "error" property',
@@ -153,7 +157,7 @@ const q = {
       // Enums
       BentoTypographyVariant: M,
       BentoTypographyElement: $,
-      BentoInputFieldVariant: u,
+      BentoInputFieldVariant: d,
       BentoDropdownSize: W,
       BentoInputFieldEvent: r,
       // Functions
@@ -163,26 +167,26 @@ const q = {
       focusInput: R,
       hasSlot: _,
       // Values
-      inputFieldConditionalClasses: O,
-      inputFieldElement: D,
-      inputFieldId: v,
+      inputFieldConditionalClasses: N,
+      inputFieldElement: h,
+      inputFieldId: A,
       dropdownId: f,
       staticValueId: y,
-      descriptionId: h,
-      errorId: m,
+      descriptionId: m,
+      errorId: v,
       shouldDisplayStaticValueAtStart: g,
       shouldDisplayStaticValueAtEnd: T,
-      shouldShowDropdown: l,
+      shouldShowDropdown: s,
       shouldDisplayDropdownAtStart: S,
       shouldDisplayDropdownAtEnd: E,
       shouldShowError: b,
       computedAriaOwns: w,
       computedAriaLabel: P,
-      computedAriaDescribedBy: N
+      computedAriaDescribedBy: O
     };
   }
 });
-var K = function() {
+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.readonly }, 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.readonly }, domProps: { value: t.value }, on: { input: t.onInput, change: function(o) {
     return t.$emit(t.BentoInputFieldEvent.CHANGE);
@@ -195,23 +199,23 @@ var K = function() {
   }, 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.readonly }, 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);
-}, X = [], j = /* @__PURE__ */ k(
+}, K = [], X = /* @__PURE__ */ k(
   z,
+  j,
   K,
-  X,
   !1,
   null,
-  "07d90c53",
+  "333272c4",
   null,
   null
 );
-const it = j.exports;
+const it = X.exports;
 export {
   it as BentoInputField,
   i as BentoInputFieldElementPosition,
   r as BentoInputFieldEvent,
-  d as BentoInputFieldStateClass,
-  A as BentoInputFieldType,
-  u as BentoInputFieldVariant
+  l 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=\"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>,\n                default: BentoInputFieldElementPosition.START,\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>,\n                default: BentoInputFieldElementPosition.START,\n            },\n\n            /**\n             * A string specifying the type of control to render.\n             */\n            type: {\n                type: String as PropType<BentoInputFieldType>,\n                default: BentoInputFieldType.TEXT,\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>,\n                default: BentoInputFieldVariant.DEFAULT,\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","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"],"mappings":"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"}
+{"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=\"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"],"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.aae99730.js";
-import { C as s, a as p, b as n } from "./chunks/calendar.c9cfce76.js";
-import { C } from "./chunks/copy.888486ff.js";
-import { C as i } from "./chunks/controls-group.e4745546.js";
-import { E as d } from "./chunks/error-message.4269d92b.js";
+import { B as r, L as e } from "./chunks/listbox-option-tag.c7e9a228.js";
+import { C as s, a as p, b as n } from "./chunks/calendar.8f50a65a.js";
+import { C } from "./chunks/copy.b62beae5.js";
+import { C as i } from "./chunks/controls-group.9d58a091.js";
+import { E as d } from "./chunks/error-message.a581a172.js";
 import { G as L, a as l } from "./chunks/grid-layout.73f23b1b.js";
-import { B as G } from "./chunks/listbox.99d23071.js";
+import { B as G } from "./chunks/listbox.f51e92cd.js";
 export {
   r as BentoAvatar,
   G as BentoListbox,

package/dist/link.js

@@ -1,13 +1,13 @@
 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 f } from "./chunks/index.e1fcc9e0.js";
-import { n as m } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index35.css";
+import { B as u, a as y, b as d } from "./chunks/index.175f9e2d.js";
+import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index29.css";
 var a = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.QUIET = "quiet", o))(a || {});
-const k = {
+const m = {
   name: "bento-link"
-}, d = /* @__PURE__ */ i({
-  ...k,
+}, k = /* @__PURE__ */ i({
+  ...m,
   props: {
     args: null,
     external: { type: Boolean },
@@ -21,7 +21,7 @@ const k = {
     })), 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: f };
+    }, RouterLink: _, BentoTypography: u, BentoTypographyElement: y, BentoTypographyVariant: d };
   }
 });
 var T = function() {
@@ -29,17 +29,17 @@ var T = function() {
   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);
-}, b = [], g = /* @__PURE__ */ m(
-  d,
+}, g = [], h = /* @__PURE__ */ f(
+  k,
   T,
-  b,
+  g,
   !1,
   null,
-  "59baec2b",
+  "0d8d3b63",
   null,
   null
 );
-const x = g.exports;
+const x = h.exports;
 export {
   x as BentoLink,
   a as BentoLinkVariant

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;\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    // eslint-disable-next-line @typescript-eslint/no-unused-vars\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;;;;;;;;;;iBA+BAC,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":["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;;;;;;;;;;;;;;;;;;;"}

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/index39.css";
+import "./assets/index18.css";
 var a = /* @__PURE__ */ ((n) => (n.START = "loading-start", n.END = "loading-end", n))(a || {});
 const d = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, computed as b, ref as c, onMounted as U } from "vue";
 import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as w } from "./chunks/unique-id.a2a2b458.js";
-import { B as H, a as I } from "./chunks/button.f64585fc.js";
+import { B as H, a as I } from "./chunks/button.c27a7ce2.js";
 import { BentoPopover as q, BentoPopoverPositions as B } from "./popover.js";
 import { a as V, C as O } from "./chunks/chevron-right.3b826337.js";
-import { B as W, a as L } from "./chunks/base-button.e7630a1d.js";
-import { B as j, a as Y, b as Z } from "./chunks/index.e1fcc9e0.js";
+import { B as W, a as L } from "./chunks/base-button.d4487ac9.js";
+import { B as j, a as Y, b as Z } from "./chunks/index.175f9e2d.js";
 import { B as $ } from "./chunks/directive.0408e565.js";
-import "./assets/index14.css";
+import "./assets/index22.css";
 let S = 0;
 const z = {
   beforeCreate() {
@@ -454,7 +454,7 @@ var he = function() {
   ge,
   !1,
   null,
-  "8ff2865d",
+  "06d565ee",
   null,
   null
 );