@adyen/bento-vue2 1.44.0 → 1.46.0

package/dist/chunks/input-field.CcjqGkLs.js

@@ -1,228 +0,0 @@
-import { defineComponent as z, useAttrs as G, useSlots as Q, ref as y, provide as Z, inject as tt, toRef as et, computed as r, toRefs as at } from "vue";
-import { a as ot, I as it, B as rt } from "./dropdown.DC9un4VJ.js";
-import { p as nt, d as P, B as st } from "./typography.Bu_WAKdf.js";
-import { g as u } from "./generate-uid.D-HFI38h.js";
-import { g as dt } from "./get-slot-text.Cgn-E48s.js";
-import { u as lt } from "./aria-label.CaUURpnB.js";
-import { u as ut } from "./i18n.BQkEbtPM.js";
-import { u as pt } from "./use-form-layout-loading.D3lALhtC.js";
-import { u as ct } from "./use-has-slot.C9lQZ6nz.js";
-import { E as ft, F as _t } from "./error-message.B7uoqQpq.js";
-import { n as bt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/input-field.css";
-var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), p = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(p || {}), S = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(S || {}), yt = /* @__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))(yt || {});
-const ht = {
-  "en-US": {
-    ariaLabelFallback: "Input field",
-    ariaLabelDropdownFallback: "{inputLabel} Dropdown"
-  }
-}, vt = {
-  i18n: { messages: ht }
-}, mt = /* @__PURE__ */ z({
-  ...vt,
-  __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
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Dropdown props for the small selectable dropdown menu.
-     * Properties supported:
-     *
-     *  - `value`: Selected value of the dropdown
-     *  - `items`: List of available items
-     *  - `aria-label`: Text that labels the dropdown element
-     *
-     */
-    dropdown: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Position of the dropdown before or after input value
-     */
-    dropdownPosition: {
-      type: String,
-      default: n.START,
-      validator: (a) => Object.values(n).includes(a)
-    },
-    /**
-     * Adds error validation class for outlining input-field.
-     *
-     * @deprecated Use "errorMessage" prop instead
-     */
-    error: { type: Boolean, default: !1 },
-    /**
-     * Renders input-field with an error state and the error message beneath the input box
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * Highlights the dropdown is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Text displayed as the placeholder of the input-field
-     */
-    placeholder: { type: String, default: "" },
-    /**
-     * Highlights the dropdown is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will set the input field to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Static text that displayed before or after input value
-     * Applicable to the Static Value variant
-     */
-    staticValue: { type: String, default: "" },
-    /**
-     * Position of Static Value before or after input value
-     */
-    staticValuePosition: {
-      type: String,
-      default: n.START,
-      validator: (a) => Object.values(n).includes(a)
-    },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * A string specifying the type of control to render.
-     * All `input` types are available but only `search`, `text` and `number` are fully supported.
-     *
-     * If `type` is `search`, use `bento-search-bar` instead.
-     */
-    type: {
-      type: String,
-      default: S.TEXT
-    },
-    /**
-     * Text displayed as the value of the input-field
-     */
-    value: { type: [String, Number], default: void 0 },
-    /**
-     * Describes the different variants for the input element
-     */
-    variant: {
-      type: String,
-      default: s.DEFAULT,
-      validator: (a) => Object.values(s).includes(a)
-    }
-  },
-  emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "keyup", "input"],
-  setup(a, { expose: e, emit: o }) {
-    const t = a, i = G(), c = Q(), { t: h } = ut(), f = ct(c), E = y(null), R = u("input"), v = u("input-dropdown"), m = u("input-static-value"), g = u("input-description"), A = u("input-error"), D = y(!1);
-    Z(ot, !0);
-    const B = tt(it, y(void 0)), k = () => {
-      D.value = !0, o("focus");
-    }, F = () => {
-      D.value = !1, o("blur");
-    }, { isReadOnly: _ } = pt(et(t, "readonly")), d = r(
-      () => t.variant === s.STATIC_VALUE && !!c.staticValue
-    ), M = r(() => t.variant === s.DEFAULT), V = r(() => t.variant === s.PAYMENT_METHOD), U = r(
-      () => d.value && t.staticValuePosition === n.START
-    ), x = r(
-      () => d.value && t.staticValuePosition === n.END
-    ), l = r(() => t.variant === s.DROPDOWN && !!t.dropdown), H = r(
-      () => l.value && t.dropdownPosition === n.START
-    ), $ = r(
-      () => l.value && t.dropdownPosition === n.END
-    ), w = r(
-      () => !t.disabled && !_.value && (!!t.errorMessage || t.error)
-    ), Y = r(() => l.value === !0 && d.value === !0 ? `${m} ${v}` : l.value === !0 ? `${v}` : d.value === !0 ? `${m}` : null), T = r(() => h("ariaLabelFallback")), I = r(
-      () => h("ariaLabelDropdownFallback", { inputLabel: N.value })
-    ), O = y(i["aria-label"]), { ariaLabel: L } = at(t), N = lt({
-      ariaLabel: O.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: L,
-      defaultFallback: f("default") ? dt(c)("default") : T
-    }), j = r(
-      () => `${f("description") ? g : ""} ${w.value && t.errorMessage ? A : ""}`
-    ), W = r(() => ({
-      [`b-input-field--${p.CONDENSED}`]: t.condensed,
-      [`b-input-field--${p.DISABLED}`]: t.disabled,
-      [`b-input-field--${p.READONLY}`]: _.value,
-      [`b-input-field--${p.ERROR}`]: w.value
-    })), q = r(() => ({
-      "aria-label": I.value,
-      ...t.dropdown
-    })), K = (b) => {
-      const X = b.target.value;
-      !t.disabled && !_.value && o("input", X);
-    }, J = (b) => {
-      o("dropdown-input", b), o("update:dropdown", { ...t == null ? void 0 : t.dropdown, value: b });
-    }, C = () => {
-      E.value.focus();
-    };
-    return e({
-      focusInput: C
-    }), Object.values(S).includes(t.type) || nt(`"bento-input-field" dropdown does not support the type ${t.type}`), t.error && P(
-      '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" />`,
-      "2.0.0"
-    ), f("defaultIconBefore") && P(
-      'BentoInputField "defaultIconBefore" slot',
-      `Use the BentoInputField "iconBefore" slot instead to add an icon at the left side of the input field
-            <bento-input-field>
-              	<template #iconBefore>
-                		<my-icon-goes-here />
-              	</template>
-            </bento-input-field>`,
-      "2.0.0"
-    ), { __sfc: !0, attrs: i, slots: c, props: t, emit: o, t: h, hasSlot: f, inputFieldElement: E, inputFieldId: R, dropdownId: v, staticValueId: m, descriptionId: g, errorId: A, isFocused: D, hint: B, onFocus: k, onBlur: F, isReadOnly: _, shouldShowStaticValue: d, isDefaultVariant: M, isPaymentMethodVariant: V, shouldDisplayStaticValueAtStart: U, shouldDisplayStaticValueAtEnd: x, shouldShowDropdown: l, shouldDisplayDropdownAtStart: H, shouldDisplayDropdownAtEnd: $, shouldShowError: w, computedAriaOwns: Y, computedAriaLabelFallbackMessage: T, computedAriaLabelDropdowFallback: I, ariaLabelAttribute: O, ariaLabel: L, computedAriaLabel: N, computedAriaDescribedBy: j, inputFieldConditionalClasses: W, inputFieldDropdownProps: q, onInput: K, onDropdownInput: J, focusInput: C, BentoDropdown: rt, BentoTypography: st, ErrorMessage: ft, FieldLabel: _t };
-  }
-});
-var Dt = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o(t.BentoTypography, { staticClass: "b-input-field", class: t.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: "div", variant: "body" } }, [t.hasSlot("default") ? o(t.FieldLabel, { attrs: { for: t.inputFieldId, "data-testid": "input-field-label", "tooltip-text": e.tooltipText, optional: e.optional, required: e.required }, on: { click: t.focusInput } }, [e._t("default")], 2) : e._e(), o("div", { staticClass: "b-input-field__input-box", attrs: { "data-testid": "input-box", "aria-disabled": e.disabled }, on: { click: t.focusInput } }, [t.isDefaultVariant && (t.hasSlot("defaultIconBefore") || t.hasSlot("iconBefore")) ? o("span", { staticClass: "b-input-field__icon-before", attrs: { "aria-hidden": e.ariaHidden ? "true" : void 0 } }, [t.hasSlot("iconBefore") ? e._t("iconBefore") : e._e(), t.hasSlot("defaultIconBefore") && !t.hasSlot("iconBefore") ? e._t("defaultIconBefore") : e._e()], 2) : e._e(), t.isPaymentMethodVariant && t.hasSlot("paymentMethod") ? o("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": e.ariaHidden ? "true" : void 0 } }, [e._t("paymentMethod")], 2) : e._e(), t.shouldDisplayDropdownAtStart ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: t.dropdownId }, on: { click: function(i) {
-    i.stopPropagation();
-  } } }, [e.dropdown ? o(t.BentoDropdown, e._b({ attrs: { disabled: e.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.inputFieldDropdownProps, !1)) : e._e()], 1) : e._e(), t.shouldDisplayStaticValueAtStart ? o(t.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: t.staticValueId, el: "span", variant: "body" } }, [e._t("staticValue")], 2) : e._e(), o("div", { staticClass: "b-input-field__input-container" }, [o("input", e._b({ 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: e.placeholder, type: e.type, disabled: e.disabled, readonly: t.isReadOnly }, domProps: { value: e.value }, on: { input: t.onInput, change: function(i) {
-    return t.emit("change");
-  }, focus: t.onFocus, blur: t.onBlur, keydown: [function(i) {
-    return t.emit("keydown", i);
-  }, function(i) {
-    return !i.type.indexOf("key") && e._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : t.emit("escape-pressed");
-  }], keyup: function(i) {
-    return t.emit("keyup", i);
-  } } }, "input", t.attrs, !1)), t.hint && t.isFocused && e.value ? o(t.BentoTypography, { staticClass: "b-input-field__hint", attrs: { el: "span" } }, [e._v(" " + e._s(t.hint) + " ")]) : e._e()], 1), t.hasSlot("iconAfter") ? o("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": e.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [e._t("iconAfter")], 2) : e._e(), t.shouldDisplayStaticValueAtEnd ? o(t.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: t.staticValueId, el: "span", variant: "body" } }, [e._t("staticValue")], 2) : e._e(), t.shouldDisplayDropdownAtEnd ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: t.dropdownId, "data-testid": "input-field-dropdown-container-end" }, on: { click: function(i) {
-    i.stopPropagation();
-  } } }, [e.dropdown ? o(t.BentoDropdown, e._b({ attrs: { id: t.dropdownId, disabled: e.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.inputFieldDropdownProps, !1)) : e._e()], 1) : e._e()], 1), t.shouldShowError && e.errorMessage ? o(t.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), t.hasSlot("description") ? o("span", { staticClass: "b-input-field__description", attrs: { id: t.descriptionId }, on: { click: t.focusInput } }, [o(t.BentoTypography, { attrs: { el: "span", variant: "body" } }, [e._t("description", null, { id: "description" })], 2)], 1) : e._e()], 1);
-}, wt = [], St = /* @__PURE__ */ bt(
-  mt,
-  Dt,
-  wt,
-  !1,
-  null,
-  "d3d017d1"
-);
-const Bt = St.exports;
-export {
-  Bt as B,
-  s as a,
-  n as b,
-  p as c,
-  S as d,
-  yt as e
-};
-//# sourceMappingURL=input-field.CcjqGkLs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"input-field.CcjqGkLs.js","sources":["../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\nimport type { HTMLAttributes } from 'vue/types/jsx';\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}\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    dynamicFiltering?: DropdownProps['dynamicFiltering'];\n    'aria-label'?: HTMLAttributes['aria-label'];\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        <field-label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"inputFieldDropdownProps\"\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            <div class=\"b-input-field__input-container\">\n                <input\n                    :id=\"inputFieldId\"\n                    v-bind=\"attrs\"\n                    ref=\"inputFieldElement\"\n                    class=\"b-input-field__input\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-describedby=\"computedAriaDescribedBy\"\n                    :aria-owns=\"computedAriaOwns\"\n                    :aria-invalid=\"shouldShowError\"\n                    :placeholder=\"placeholder\"\n                    :type=\"type\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography v-if=\"hint && isFocused && value\" el=\"span\" class=\"b-input-field__hint\">\n                    {{ hint }}\n                </bento-typography>\n            </div>\n\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"inputFieldDropdownProps\"\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, inject, PropType, provide, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import {\n        INPUT_FIELD_COMPONENT_INJECTION_KEY,\n        INPUT_FIELD_HINT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoListboxSelectedValue } from '@/types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = 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         * Properties supported:\n         *\n         *  - `value`: Selected value of the dropdown\n         *  - `items`: List of available items\n         *  - `aria-label`: Text that labels the dropdown element\n         *\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         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * A string specifying the type of control to render.\n         * All `input` types are available but only `search`, `text` and `number` are fully supported.\n         *\n         * If `type` is `search`, use `bento-search-bar` instead.\n         */\n        type: {\n            type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']>,\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 | `${BentoInputFieldVariant}`>,\n            default: BentoInputFieldVariant.DEFAULT,\n            validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:dropdown\", \"blur\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"input\"]);\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    const isFocused = ref(false);\n\n    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\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    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback'));\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: hasSlot('default')\n            ? (getSlotText(slots)('default') as string)\n            : computedAriaLabelFallbackMessage,\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    }));\n\n    const inputFieldDropdownProps = computed(() => ({\n        'aria-label': computedAriaLabelDropdowFallback.value,\n        ...props.dropdown,\n    }));\n\n    const onInput = (event: Event) => {\n        const inputValue = (event.target as HTMLInputElement).value;\n        if (!props.disabled && !isReadOnly.value) {\n            emit('input', inputValue);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n    });\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType)) {\n        printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type ${props.type}`);\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</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","isFocused","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","hint","inject","INPUT_FIELD_HINT_INJECTION_KEY","onFocus","emit","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","expose","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/chunks/layout-row.DzS_XyyF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-row.DzS_XyyF.js","sources":["../../src/components/layout/layout.keys.ts","../../src/components/layout/layout.vue","../../src/components/layout/layout.types.ts","../../src/components/layout/components/layout-row/layout-row.vue"],"sourcesContent":["export const LAYOUT_SIZE_INJECTION_KEY = Symbol('Layout size inject key');\n","<template>\n    <component :is=\"wrapperElement\" class=\"b-layout\" :class=\"conditionalClasses\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef } from 'vue';\n    import { BentoLayoutProps } from './layout.types';\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  variant: { default: 'page' },\n  size: { default: 'full-width' }\n});\n\n    provide(LAYOUT_SIZE_INJECTION_KEY, toRef(props, 'size'));\n\n    const conditionalClasses = computed(() => ({\n        'b-layout--component': props.variant === 'component',\n    }));\n\n    const wrapperElement = props.variant === 'page' ? 'main' : 'div';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Layout is a basic scaffolding of a page that defines spacing, some functionality and responsive behaviour of its top level sections.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout size=\"narrow\">\n     *              <bento-layout-row>\n     *                  Row 1\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  Row 2\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout.scss\" />\n","/**\n * @private\n */\nexport const BentoLayoutVariantOptions = ['page', 'component'] as const;\nexport const BentoLayoutSizeOptions = ['full-width', 'narrow', 'half-width'] as const;\nexport const BentoLayoutRowColumnLayoutOptions = ['3-9', '9-3', '4-8', '8-4', '6-6'] as const;\n\n// Public\nexport type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number];\nexport type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number];\nexport type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number];\n\nexport interface BentoLayoutProps {\n    /** Defines if the layout is used in a page or only a section */\n    variant?: BentoLayoutVariant;\n    /** Defines the size of the page */\n    size?: BentoLayoutSize;\n}\n\nexport interface BentoLayoutRowProps {\n    /** Sets the layout of the columns when multiple columns are used */\n    columnsLayout?: BentoLayoutRowColumnLayout;\n}\n","<template>\n    <bento-typography el=\"div\" rich-text class=\"b-layout-row\" :class=\"conditionalRowClass\">\n        <div v-if=\"hasSlot('default')\">\n            <slot />\n        </div>\n        <div v-else-if=\"hasSlot('col-1') && hasSlot('col-2')\" ref=\"row\" :class=\"conditionalRowWithColumnsClass\">\n            <div ref=\"col1\" :class=\"conditionalColumnClass.col1\">\n                <slot name=\"col-1\"></slot>\n            </div>\n            <div ref=\"col2\" :class=\"conditionalColumnClass.col2\">\n                <slot name=\"col-2\"></slot>\n            </div>\n        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, ref, Ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import {\n        BentoLayoutRowColumnLayoutOptions,\n        type BentoLayoutRowProps,\n        type BentoLayoutSize,\n    } from '../../layout.types';\n    import { useMediaQuery } from '@vueuse/core';\n\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  columnsLayout: { default: '6-6' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const size = inject<Ref<BentoLayoutSize>>(LAYOUT_SIZE_INJECTION_KEY, ref('full-width'));\n\n    const row = ref<HTMLElement>(null);\n    const col1 = ref<HTMLElement>(null);\n    const col2 = ref<HTMLElement>(null);\n\n    const isFullWidth = computed(() => size.value === 'full-width');\n    const isValidColumnLayout = computed(() => BentoLayoutRowColumnLayoutOptions.includes(props.columnsLayout));\n\n    const conditionalRowClass = computed(() => `b-layout-row--${size.value}`);\n\n    const conditionalRowWithColumnsClass = computed(() => ({\n        'b-layout-row__column-wrapper': isFullWidth.value,\n    }));\n\n    const conditionalColumnClass = computed(() => {\n        const columns = isValidColumnLayout.value ? props.columnsLayout.split('-') : [6, 6];\n        const getColumnModifier = index => (isFullWidth.value ? columns[index] : size.value);\n\n        return {\n            col1: `b-layout-row__column--${getColumnModifier(0)}`,\n            col2: `b-layout-row__column--${getColumnModifier(1)}`,\n        };\n    });\n\n    watch(\n        useMediaQuery('(min-width: 768px)'),\n        async isLargeScreen => {\n            await nextTick();\n            const areColumnsInTheRightOrder = row.value?.firstChild === col1.value;\n            if (isLargeScreen && !areColumnsInTheRightOrder) {\n                row.value?.prepend(col1.value);\n            } else if (!isLargeScreen && (props.columnsLayout === '3-9' || props.columnsLayout === '4-8')) {\n                row.value?.prepend(col2.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        if (!isFullWidth.value && (hasSlot('col-1') || hasSlot('col-2'))) {\n            throw new Error(\n                'Column slots can only be used with the `full-width` size. Please check documentation for more info.'\n            );\n        }\n\n        if (!isValidColumnLayout.value) {\n            throw new Error(\n                `${props.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Page row is subcomponent of Layout meant to be used to generate the row layout.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout>\n     *              <bento-layout-row columns-layout=\"3-9\">\n     *                  <template #col-1>Narrow 3-9</template>\n     *                  <template #col-2>Wide 3-9</template>\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  <template #col-1>6-6</template>\n     *                  <template #col-2>6-6</template>\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout-row.scss\" />\n"],"names":["LAYOUT_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","conditionalClasses","computed","wrapperElement","BentoLayoutRowColumnLayoutOptions","__default__","slots","useSlots","hasSlot","useHasSlot","size","inject","ref","row","col1","col2","isFullWidth","isValidColumnLayout","conditionalRowClass","conditionalRowWithColumnsClass","conditionalColumnClass","columns","getColumnModifier","index","watch","useMediaQuery","isLargeScreen","nextTick","areColumnsInTheRightOrder","_a","_b","_c","onMounted"],"mappings":";;;;;;AAAa,MAAAA,IAAA,OAAA,wBAAA,GC8CTC,IAAA,CAAA;;;;;;;;;AA9BA,IAAAC,EAAAF,GAAAG,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,uBAAAF,EAAA,YAAA;AAAA,IACE,EAAA,GAG7CG,IAAAH,EAAA,YAAA,SAAA,SAAA;;;;;;;;;;;;;;;qBCjBGI,IAAA,CAAA,OAAA,OAAA,OAAA,OAAA,KAAA,GC2GHC,IAAA,CAAA;;;;;;;iBA/EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAAf,GAAAgB,EAAA,YAAA,CAAA,GAEAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAEAI,IAAAd,EAAA,MAAAQ,EAAA,UAAA,YAAA,GACAO,IAAAf,EAAA,MAAAE,EAAA,SAAAJ,EAAA,aAAA,CAAA,GAEAkB,IAAAhB,EAAA,MAAA,iBAAAQ,EAAA,KAAA,EAAA,GAEAS,IAAAjB,EAAA,OAAA;AAAA,MAAuD,gCAAAc,EAAA;AAAA,IACP,EAAA,GAGhDI,IAAAlB,EAAA,MAAA;AACI,YAAAmB,IAAAJ,EAAA,QAAAjB,EAAA,cAAA,MAAA,GAAA,IAAA,CAAA,GAAA,CAAA,GACAsB,IAAA,CAAAC,MAAAP,EAAA,QAAAK,EAAAE,CAAA,IAAAb,EAAA;AAEA,aAAA;AAAA,QAAO,MAAA,yBAAAY,EAAA,CAAA,CAAA;AAAA,QACgD,MAAA,yBAAAA,EAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACvD,CAAA;AAGJ,WAAAE;AAAA,MAAAC,EAAA,oBAAA;AAAA,MACsC,OAAAC,MAAA;;AAE9B,cAAAC,EAAA;AACA,cAAAC,MAAAC,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,gBAAAf,EAAA;AACA,QAAAY,KAAA,CAAAE,KACIE,IAAAjB,EAAA,UAAA,QAAAiB,EAAA,QAAAhB,EAAA,SAA6B,CAAAY,MAAA1B,EAAA,kBAAA,SAAAA,EAAA,kBAAA,YAE7B+B,IAAAlB,EAAA,UAAA,QAAAkB,EAAA,QAAAhB,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBiB,EAAA,MAAA;AACI,UAAA,CAAAhB,EAAA,UAAAR,EAAA,OAAA,KAAAA,EAAA,OAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAIR,UAAA,CAAAS,EAAA;AACI,cAAA,IAAA;AAAA,UAAU,GAAAjB,EAAA,aAAA;AAAA,QACgB;AAAA,IAE9B,CAAA;;;;;;;;;;;;;;;"}