@adyen/bento-vue2 1.94.0 → 1.96.0

package/dist/chunks/{input-field.CRsU2NBh.js → input-field.BkQZ6Qzl.js}

@@ -1,19 +1,20 @@
-import { defineComponent as de, useAttrs as se, useSlots as ue, ref as f, provide as pe, inject as x, toRef as ce, computed as r, toRefs as fe } from "vue";
-import { b as be, I as _e, c as me, B as we } from "./dropdown.Dx0HybJ8.js";
-import { p as L, d as T, B as De } from "./typography.C8lPlsbD.js";
+import { defineComponent as de, useAttrs as se, useSlots as pe, ref as f, provide as ue, inject as x, toRef as ce, computed as i, toRefs as fe } from "vue";
+import { b as be, B as _e } from "./dropdown.C70AlvOT.js";
+import { p as E, d as A, B as me } from "./typography.C8lPlsbD.js";
 import { u as ye } from "./form-field.D_2g7vaP.js";
 import { g as b } from "./generate-uid.NJ8tVoha.js";
 import { g as H } from "./get-slot-text.Bjb9dTSV.js";
-import { u as he } from "./aria-label.CaUURpnB.js";
-import { u as ve } from "./index.B6WW_F-J.js";
-import { u as Ee } from "./use-form-layout-loading.CWbjZiwP.js";
-import { u as Le } from "./use-has-slot.C9lQZ6nz.js";
-import { F as Te } from "./field-label.Cq01oVR-.js";
-import { E as Ae } from "./error-message.CyERcfdt.js";
-import { n as Fe } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as De } from "./aria-label.CaUURpnB.js";
+import { u as we } from "./index.B6WW_F-J.js";
+import { u as he } from "./use-form-layout-loading.CWbjZiwP.js";
+import { u as ve } from "./use-has-slot.C9lQZ6nz.js";
+import { F as Le } from "./field-label.CdVbAfK-.js";
+import { E as Ee } from "./error-message.CyERcfdt.js";
+import { n as Ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field.css";
-var d = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.PAYMENT_METHOD = "payment-method", t.STATIC_VALUE = "static-value", t.DROPDOWN = "dropdown", t))(d || {}), l = /* @__PURE__ */ ((t) => (t.START = "start", t.END = "end", t))(l || {}), _ = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DISABLED = "disabled", t.READONLY = "readonly", t.ERROR = "error", t))(_ || {}), A = /* @__PURE__ */ ((t) => (t.SEARCH = "search", t.TEXT = "text", t.NUMBER = "number", t))(A || {}), Ie = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.ESCAPE_PRESSED = "escape-pressed", t.UPDATE_DROPDOWN = "update:dropdown", t.DROPDOWN_INPUT = "dropdown-input", t.FOCUS = "focus", t.CHANGE = "change", t.BLUR = "blur", t.KEYDOWN = "keydown", t))(Ie || {});
-const ge = {
+const Te = /* @__PURE__ */ Symbol("input field hint injection key"), Fe = /* @__PURE__ */ Symbol("input field parent component injection key");
+var d = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.PAYMENT_METHOD = "payment-method", t.STATIC_VALUE = "static-value", t.DROPDOWN = "dropdown", t))(d || {}), l = /* @__PURE__ */ ((t) => (t.START = "start", t.END = "end", t))(l || {}), _ = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DISABLED = "disabled", t.READONLY = "readonly", t.ERROR = "error", t))(_ || {}), T = /* @__PURE__ */ ((t) => (t.SEARCH = "search", t.TEXT = "text", t.NUMBER = "number", t))(T || {}), Se = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.ESCAPE_PRESSED = "escape-pressed", t.UPDATE_DROPDOWN = "update:dropdown", t.DROPDOWN_INPUT = "dropdown-input", t.FOCUS = "focus", t.CHANGE = "change", t.BLUR = "blur", t.KEYDOWN = "keydown", t))(Se || {});
+const ke = {
   "de-DE": {
     ariaLabelDropdownFallback: "{inputLabel} Dropdown",
     ariaLabelFallback: "Eingabefeld"
@@ -54,13 +55,13 @@ const ge = {
     ariaLabelDropdownFallback: "{inputLabel} 下拉菜单",
     ariaLabelFallback: "输入字段"
   }
-}, ke = {
+}, ge = {
   name: "bento-input-field",
   inheritAttrs: !1,
   model: { prop: "modelValue" },
-  i18n: { messages: ge }
-}, Se = /* @__PURE__ */ de({
-  ...ke,
+  i18n: { messages: ke }
+}, Ie = /* @__PURE__ */ de({
+  ...ge,
   props: {
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
@@ -81,89 +82,89 @@ const ge = {
     slashedZero: { type: Boolean, default: !1 },
     staticValue: { default: "" },
     staticValuePosition: { default: l.START },
-    type: { default: A.TEXT },
+    type: { default: T.TEXT },
     value: { default: void 0 },
     variant: { default: d.DEFAULT }
   },
   emits: ["blur", "click", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "keyup", "input", "update:dropdown", "update:model-value"],
   setup(t, { expose: a, emit: o }) {
-    const e = t, n = se(), s = ue(), { emitValue: F } = ye(o), { t: w } = ve(), I = Le(s), g = f(null), k = f(null), Y = b("input"), D = b("input-dropdown"), y = b("input-static-value"), S = b("input-description"), C = b("input-error"), h = f(!1);
-    function q(i) {
-      return i["data-testid"] ?? "input-text-container";
+    const e = t, n = se(), s = pe(), { emitValue: F } = ye(o), { t: y } = we(), S = ve(s), k = f(null), g = f(null), W = b("input"), D = b("input-dropdown"), w = b("input-static-value"), I = b("input-description"), C = b("input-error"), h = f(!1);
+    function Y(r) {
+      return r["data-testid"] ?? "input-text-container";
     }
-    function W(i) {
+    function j(r) {
       return Object.fromEntries(
-        Object.entries(i).filter(([m]) => !m.startsWith("aria-") && m !== "data-testid")
+        Object.entries(r).filter(([m]) => !m.startsWith("aria-") && m !== "data-testid")
       );
     }
-    pe(be, !0);
-    const j = x(_e, f(void 0)), J = () => {
+    ue(be, !0);
+    const q = x(Te, f(void 0)), J = () => {
       h.value = !0, o("focus");
     }, K = () => {
       h.value = !1, o("blur");
-    }, { isReadOnly: u } = Ee(ce(e, "readonly")), z = r(
+    }, { isReadOnly: p } = he(ce(e, "readonly")), z = i(
       () => {
-        var i;
-        return u.value || ((i = e.dropdown) == null ? void 0 : i.readonly);
+        var r;
+        return p.value || ((r = e.dropdown) == null ? void 0 : r.readonly);
       }
-    ), p = r(
+    ), u = i(
       () => e.variant === d.STATIC_VALUE && !!s.staticValue
-    ), X = r(() => e.variant === d.DEFAULT), G = r(() => e.variant === d.PAYMENT_METHOD), Z = r(
-      () => p.value && e.staticValuePosition === l.START
-    ), Q = r(
-      () => p.value && e.staticValuePosition === l.END
-    ), c = r(() => e.variant === d.DROPDOWN && !!e.dropdown), ee = r(
+    ), X = i(() => e.variant === d.DEFAULT), Z = i(() => e.variant === d.PAYMENT_METHOD), G = i(
+      () => u.value && e.staticValuePosition === l.START
+    ), Q = i(
+      () => u.value && e.staticValuePosition === l.END
+    ), c = i(() => e.variant === d.DROPDOWN && !!e.dropdown), ee = i(
       () => c.value && e.dropdownPosition === l.START
-    ), ae = r(
+    ), ae = i(
       () => c.value && e.dropdownPosition === l.END
-    ), v = r(
-      () => !e.disabled && !u.value && (!!e.errorMessage || e.error)
-    ), N = r(() => H(s)("default") || e.label), O = r(() => H(s)("description") || e.description), te = r(() => c.value === !0 && p.value === !0 ? `${y} ${D}` : c.value === !0 ? `${D}` : p.value === !0 ? `${y}` : null), R = r(
-      () => n != null && n["aria-labelledby"] ? void 0 : w("ariaLabelFallback")
-    ), P = r(
-      () => w("ariaLabelDropdownFallback", { inputLabel: V.value })
-    ), B = f(n["aria-label"]), { ariaLabel: M } = fe(e), V = he({
-      ariaLabel: B.value,
+    ), v = i(
+      () => !e.disabled && !p.value && (!!e.errorMessage || e.error)
+    ), O = i(() => H(s)("default") || e.label), R = i(() => H(s)("description") || e.description), te = i(() => c.value === !0 && u.value === !0 ? `${w} ${D}` : c.value === !0 ? `${D}` : u.value === !0 ? `${w}` : null), N = i(
+      () => n != null && n["aria-labelledby"] ? void 0 : y("ariaLabelFallback")
+    ), B = i(
+      () => y("ariaLabelDropdownFallback", { inputLabel: V.value })
+    ), P = f(n["aria-label"]), { ariaLabel: M } = fe(e), V = De({
+      ariaLabel: P.value,
       // TODO: take this line away when the aria-label props is removed
       label: M,
-      defaultFallback: N.value || R
-    }), oe = r(
-      () => `${O.value ? S : ""} ${v.value && e.errorMessage ? C : ""}`
-    ), ne = r(() => ({
+      defaultFallback: O.value || N
+    }), oe = i(
+      () => `${R.value ? I : ""} ${v.value && e.errorMessage ? C : ""}`
+    ), ne = i(() => ({
       [`b-input-field--${_.CONDENSED}`]: e.condensed,
       [`b-input-field--${_.DISABLED}`]: e.disabled,
-      [`b-input-field--${_.READONLY}`]: u.value,
+      [`b-input-field--${_.READONLY}`]: p.value,
       [`b-input-field--${_.ERROR}`]: v.value,
       "b-input-field--slashed-zero": e.slashedZero
-    })), re = r(() => ({
-      "aria-label": P.value,
+    })), ie = i(() => ({
+      "aria-label": B.value,
       ...e.dropdown
-    })), ie = (i) => {
-      const m = i.target.value;
-      !e.disabled && !u.value && F(m);
-    }, le = (i) => {
-      o("dropdown-input", i), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: i });
-    }, E = () => {
-      g.value.focus();
+    })), re = (r) => {
+      const m = r.target.value;
+      !e.disabled && !p.value && F(m);
+    }, le = (r) => {
+      o("dropdown-input", r), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: r });
+    }, L = () => {
+      k.value.focus();
     }, U = () => {
-      e.variant === "dropdown" ? k.value.focus() : E();
+      e.variant === "dropdown" ? g.value.focus() : L();
     };
     a({
-      focusInput: E,
+      focusInput: L,
       focus: U
     });
-    const $ = x(me, "");
-    return !Object.values(A).includes(e.type) && !$ && (e.type === "tel" ? L(
+    const $ = x(Fe, "");
+    return !Object.values(T).includes(e.type) && !$ && (e.type === "tel" ? E(
       `"bento-input-field" dropdown does not support the type '${e.type}', use "bento-input-field-phone-number" instead.`
-    ) : e.type === "password" ? L(
+    ) : e.type === "password" ? E(
       `"bento-input-field" dropdown does not support the type '${e.type}', use "bento-input-field-password" instead.`
-    ) : L(`"bento-input-field" dropdown does not support the type '${e.type}'`)), e.error && T(
+    ) : E(`"bento-input-field" dropdown does not support the type '${e.type}'`)), e.error && A(
       '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"
-    ), I("defaultIconBefore") && T(
+    ), S("defaultIconBefore") && A(
       'BentoInputField "defaultIconBefore" slot',
       `Use the BentoInputField "iconBefore" slot instead to add an icon at the left side of the input field
             <bento-input-field>
@@ -172,12 +173,12 @@ const ge = {
               	</template>
             </bento-input-field>`,
       "2.0.0"
-    ), e.value && T(
+    ), e.value && A(
       'BentoInputField "value" property',
       `The use of "value" prop in "BentoInputField" is no longer supported.
              Use the "v-model" or "model-value" property instead.`,
       "2.0.0"
-    ), { __sfc: !0, attrs: n, slots: s, props: e, emit: o, emitValue: F, t: w, hasSlot: I, inputFieldElement: g, inputDropdownElement: k, inputFieldId: Y, dropdownId: D, staticValueId: y, descriptionId: S, errorId: C, isFocused: h, getDataTestId: q, getRootAttributes: W, hint: j, onFocus: J, onBlur: K, isReadOnly: u, isDropdownReadOnly: z, shouldShowStaticValue: p, isDefaultVariant: X, isPaymentMethodVariant: G, shouldDisplayStaticValueAtStart: Z, shouldDisplayStaticValueAtEnd: Q, shouldShowDropdown: c, shouldDisplayDropdownAtStart: ee, shouldDisplayDropdownAtEnd: ae, shouldShowError: v, computedLabel: N, computedDescription: O, computedAriaOwns: te, computedAriaLabelFallbackMessage: R, computedAriaLabelDropdowFallback: P, ariaLabelAttribute: B, ariaLabel: M, computedAriaLabel: V, computedAriaDescribedBy: oe, inputFieldConditionalClasses: ne, inputFieldDropdownProps: re, onInput: ie, onDropdownInput: le, focusInput: E, focus: U, inputFieldParentComponent: $, BentoDropdown: we, BentoTypography: De, ErrorMessage: Ae, FieldLabel: Te };
+    ), { __sfc: !0, attrs: n, slots: s, props: e, emit: o, emitValue: F, t: y, hasSlot: S, inputFieldElement: k, inputDropdownElement: g, inputFieldId: W, dropdownId: D, staticValueId: w, descriptionId: I, errorId: C, isFocused: h, getDataTestId: Y, getRootAttributes: j, hint: q, onFocus: J, onBlur: K, isReadOnly: p, isDropdownReadOnly: z, shouldShowStaticValue: u, isDefaultVariant: X, isPaymentMethodVariant: Z, shouldDisplayStaticValueAtStart: G, shouldDisplayStaticValueAtEnd: Q, shouldShowDropdown: c, shouldDisplayDropdownAtStart: ee, shouldDisplayDropdownAtEnd: ae, shouldShowError: v, computedLabel: O, computedDescription: R, computedAriaOwns: te, computedAriaLabelFallbackMessage: N, computedAriaLabelDropdowFallback: B, ariaLabelAttribute: P, ariaLabel: M, computedAriaLabel: V, computedAriaDescribedBy: oe, inputFieldConditionalClasses: ne, inputFieldDropdownProps: ie, onInput: re, onDropdownInput: le, focusInput: L, focus: U, inputFieldParentComponent: $, BentoDropdown: _e, BentoTypography: me, ErrorMessage: Ee, FieldLabel: Le };
   }
 });
 var Ce = function() {
@@ -199,21 +200,23 @@ var Ce = function() {
   } } }, [a.dropdown ? o(e.BentoDropdown, a._b({ ref: "inputDropdownElement", attrs: { id: e.dropdownId, disabled: a.disabled, readonly: e.isDropdownReadOnly }, on: { "update:model-value": e.onDropdownInput } }, "bento-dropdown", e.inputFieldDropdownProps, !1)) : a._e()], 1) : a._e()], 1), e.shouldShowError && a.errorMessage ? o(e.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: e.errorId, "error-message": a.errorMessage } }) : a._e(), e.hasSlot("description") || a.description ? o("span", { staticClass: "b-input-field__description", attrs: { id: e.descriptionId }, on: { click: e.focusInput } }, [o(e.BentoTypography, { attrs: { el: "span", variant: "body" } }, [a._t("description", function() {
     return [a._v(" " + a._s(a.description) + " ")];
   }, { id: "description" })], 2)], 1) : a._e()], 1);
-}, Ne = [], Oe = /* @__PURE__ */ Fe(
-  Se,
+}, Oe = [], Re = /* @__PURE__ */ Ae(
+  Ie,
   Ce,
-  Ne,
+  Oe,
   !1,
   null,
-  "31db9892"
+  "bf8c230f"
 );
-const Je = Oe.exports;
+const Je = Re.exports;
 export {
   Je as B,
+  Te as I,
   l as a,
-  Ie as b,
+  Se as b,
   _ as c,
-  A as d,
-  d as e
+  T as d,
+  d as e,
+  Fe as f
 };
-//# sourceMappingURL=input-field.CRsU2NBh.js.map
+//# sourceMappingURL=input-field.BkQZ6Qzl.js.map

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

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

package/dist/chunks/{input-time.BSrSAN3r.js → input-time.BiOHvUEA.js}

@@ -1,7 +1,6 @@
 import { defineComponent as S, provide as y, useSlots as D, ref as g, computed as l, watch as h } from "vue";
-import { B as H } from "./input-field.CRsU2NBh.js";
-import { c as I } from "./dropdown.Dx0HybJ8.js";
-import { d as b } from "./use-cached-selected-values.Bnmcr7Ji.js";
+import { f as H, B as I } from "./input-field.BkQZ6Qzl.js";
+import { d as b } from "./use-cached-selected-values.D0s14AxT.js";
 import { u as B } from "./index.B6WW_F-J.js";
 import { u as E } from "./use-has-slot.C9lQZ6nz.js";
 import { u as V } from "./use-touch-device.DTqFAbXh.js";
@@ -82,7 +81,7 @@ const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0
   emits: ["update:model-value", "keydown", "input:valid", "input:error"],
   setup(o, { emit: e }) {
     const i = o, t = 300;
-    y(I, "bento-input-time");
+    y(H, "bento-input-time");
     const d = D(), v = E(d), { isTouchDevice: a } = V(), { t: u } = B(), s = g(!1), p = l(() => i.errorMessage ? i.errorMessage : s.value ? u("invalidTimeFormat") : null), _ = l(() => a.value ? i.errorMessage : p.value), T = l(() => a.value ? "time" : void 0), F = l(() => i.modelValue), M = l(() => a ? void 0 : i.placeholder), m = (n) => {
       if (!n) {
         s.value = !1;
@@ -107,7 +106,7 @@ const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0
         }
     }, onKeyDown: (n) => {
       a.value || $(n), e("keydown", n);
-    }, BentoInputField: H };
+    }, BentoInputField: I };
   }
 });
 var K = function() {
@@ -127,9 +126,9 @@ var K = function() {
   null,
   "a2b489fa"
 );
-const Q = L.exports;
+const Z = L.exports;
 export {
-  Q as B,
+  Z as B,
   f as i
 };
-//# sourceMappingURL=input-time.BSrSAN3r.js.map
+//# sourceMappingURL=input-time.BiOHvUEA.js.map

package/dist/chunks/{input-time.BSrSAN3r.js.map → input-time.BiOHvUEA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-time.BSrSAN3r.js","sources":["../../src/utils/ts/time-input.ts","../../src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isValidKey = validDigitRegex.test(event.key) || allowedKeys.includes(event.key);\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n\n    if (!isValidKey && !isValidColon) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"isTouchDevice ? 1 : undefined\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"inputErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"inputModelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"computedPlaceholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template v-if=\"!isTouchDevice\" #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, provide, ref, useSlots, watch } from 'vue';\n    import { useHasSlot, useTouchDevice } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-time');\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { isTouchDevice } = useTouchDevice();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: undefined },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { type: Boolean, default: false },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"keydown\", \"input:valid\", \"input:error\"]);\n\n    const internalError = ref(false);\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n    const inputErrorMessage = computed(() => (isTouchDevice.value ? props.errorMessage : computedErrorMessage.value));\n    const inputType = computed(() => (isTouchDevice.value ? 'time' : undefined));\n    const inputModelValue = computed(() => props.modelValue);\n    const computedPlaceholder = computed(() => (isTouchDevice ? undefined : props.placeholder));\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        if (isTouchDevice.value) {\n            emit('update:model-value', String(value ?? ''));\n            emit('input:valid');\n        } else {\n            const formatted = formatTimeInputValue(String(value ?? ''));\n            emit('update:model-value', formatted);\n            validateTimeWithDebounce(formatted);\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (!isTouchDevice.value) {\n            validateTimeInput(event);\n        }\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","validateTimeInput","event","selectionStart","allowedKeys","isValidKey","isValidColon","formatTimeInputValue","value","formattedValue","secondToLastDigit","lastDigit","__default__","messages","VALIDATION_DEBOUNCE_TIME","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","slots","useSlots","hasSlot","useHasSlot","isTouchDevice","useTouchDevice","t","useI18n","internalError","ref","computedErrorMessage","computed","props","inputErrorMessage","inputType","inputModelValue","computedPlaceholder","validateTime","isValid","emit","validateTimeWithDebounce","debounce","watch","newValue","formatted"],"mappings":"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"}
+{"version":3,"file":"input-time.BiOHvUEA.js","sources":["../../src/utils/ts/time-input.ts","../../src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isValidKey = validDigitRegex.test(event.key) || allowedKeys.includes(event.key);\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n\n    if (!isValidKey && !isValidColon) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"isTouchDevice ? 1 : undefined\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"inputErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"inputModelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"computedPlaceholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template v-if=\"!isTouchDevice\" #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, provide, ref, useSlots, watch } from 'vue';\n    import { useHasSlot, useTouchDevice } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-time');\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { isTouchDevice } = useTouchDevice();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: undefined },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { type: Boolean, default: false },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"keydown\", \"input:valid\", \"input:error\"]);\n\n    const internalError = ref(false);\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n    const inputErrorMessage = computed(() => (isTouchDevice.value ? props.errorMessage : computedErrorMessage.value));\n    const inputType = computed(() => (isTouchDevice.value ? 'time' : undefined));\n    const inputModelValue = computed(() => props.modelValue);\n    const computedPlaceholder = computed(() => (isTouchDevice ? undefined : props.placeholder));\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        if (isTouchDevice.value) {\n            emit('update:model-value', String(value ?? ''));\n            emit('input:valid');\n        } else {\n            const formatted = formatTimeInputValue(String(value ?? ''));\n            emit('update:model-value', formatted);\n            validateTimeWithDebounce(formatted);\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (!isTouchDevice.value) {\n            validateTimeInput(event);\n        }\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","validateTimeInput","event","selectionStart","allowedKeys","isValidKey","isValidColon","formatTimeInputValue","value","formattedValue","secondToLastDigit","lastDigit","__default__","messages","VALIDATION_DEBOUNCE_TIME","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","slots","useSlots","hasSlot","useHasSlot","isTouchDevice","useTouchDevice","t","useI18n","internalError","ref","computedErrorMessage","computed","props","inputErrorMessage","inputType","inputModelValue","computedPlaceholder","validateTime","isValid","emit","validateTimeWithDebounce","debounce","watch","newValue","formatted"],"mappings":"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"}

package/dist/chunks/{inspector.Dagz-JL1.js → inspector.BY3SoX-l.js}

@@ -1,13 +1,13 @@
 import { ref as p, watch as T, defineComponent as B, computed as v, nextTick as E } from "vue";
 import { d as F, B as I } from "./typography.C8lPlsbD.js";
-import { B as k } from "./button.C9b2AC9w.js";
+import { B as k } from "./button.DITA6YtS.js";
 import { B as D } from "./loading-indicator.PxbRzshH.js";
-import { B as L, s as A, g as w, a as H, f as O } from "./focus-trap.CKs45fnj.js";
+import { B as L, s as A, g as w, a as H, f as O } from "./focus-trap.CBIb3SyN.js";
 import { E as P } from "./expand.Bbielaja.js";
 import { C as R } from "./cross.CC_B-vG-.js";
 import { g as z } from "./generate-uid.NJ8tVoha.js";
 import { u as V } from "./index.B6WW_F-J.js";
-import { b as N, c as G } from "./index.DZx81HG1.js";
+import { c as N, d as G } from "./index.CJYgd0QI.js";
 import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/inspector.css";
 function Y(s) {
@@ -169,4 +169,4 @@ const ce = J.exports;
 export {
   ce as B
 };
-//# sourceMappingURL=inspector.Dagz-JL1.js.map
+//# sourceMappingURL=inspector.BY3SoX-l.js.map

package/dist/chunks/{inspector.Dagz-JL1.js.map → inspector.BY3SoX-l.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.Dagz-JL1.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                            <div class=\"b-inspector__icons\">\n                                <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                    <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                                </bento-button>\n                                <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                    <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                                </bento-button>\n                            </div>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\" />\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","props","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":";;;;;;;;;;;;AAQO,SAAAA,EAAAC,GAAA;AAGH,QAAAC,IAAAC,EAAA,CAAA,CAAA,GAEAC,IAAAC,EAAA;AAQA,SAAAC,EAAAF,GAAA,CAAAG,MAAA;AAEI,IAAA,CAAAN,EAAA,SAAA,CAAAM,KAAA,CAAAN,EAAA,MAAA,SAAAM,CAAA,MAKAL,EAAA,MAAA,QAAAK,CAAA,GAEAL,EAAA,MAAA,SAAA,KACIA,EAAA,MAAA,IAAA;AAAA,EACJ,CAAA,GAkBJ;AAAA,IAAO,wBAVP,MAAA;AACI,iBAAAM,KAAAN,EAAA;AACI,YAAAM,KAAA,SAAA,KAAA,SAAAA,CAAA;AACI,iBAAAA;AAIR,aAAA;AAAA,IAAO;AAAA,EAIP;AAER;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC2KIC,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;;;iBApIA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAX,EAAA,IAAA,GACAY,IAAAZ,EAAA,IAAA,GACAa,IAAAb,EAAA,IAAA,GACAc,IAAAd,EAAA,IAAA,GAEA,EAAA,OAAAe,EAAA,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,EAAA,MAAA;AAMI,YAAAC,IAAAC,EAAA,SAAA,UAAA,MAAA;AAEA,aAAAL,EAAA,QAAA,KAAAA,EAAA,QAAAI;AAAA,IAAsD,CAAA,GAG1DE,IAAAH,EAAA,MAAAE,EAAA,eAAA,GAEAE,IAAAJ,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAE,EAAA,IAAA,EAAA,GAAA;AAAA,MACL,CAAA,gBAAAA,EAAA,cAAA,EAAA,GAAA;AAAA,MACU,2BAAAH,EAAA;AAAA,IACH,EAAA,GAG3CM,IAAAL,EAAA,MAAA,GAAA,EAAA,WAAA,CAAA,KAAAE,EAAA,KAAA,EAAA,GAEA,EAAA,wBAAAI,EAAA,IAAA3B,EAAAgB,CAAA,GAEAY,IAAA,YAAA;AACI,MAAAL,EAAA,UACI,MAAAM,EAAA,GACAC,EAAAf,EAAA,OAAAS,EAAA,KAAA,KAIAO,EAAAP,EAAA,SAAAG,EAAA,CAAA;AAAA,IACJ,GAGJK,IAAA,CAAAC,MAAA;AACI,UAAAb,EAAA;AACI;AAEJ,YAAAc,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAnB,EAAA,KAAA;AAGA,MAAAsB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAhB,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAV,EAAA,UAAA,CAAAH,EAAA,SAAAoB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,KAAA,KACIE,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA,KAEAP,EAAAd,EAAA,KAAA;AAAA,IACJ,GAGJc,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAArC;AAAA,MAAA,MAAAiB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIK,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJL,EAAA,cACIqB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"inspector.BY3SoX-l.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                            <div class=\"b-inspector__icons\">\n                                <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                    <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                                </bento-button>\n                                <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                    <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                                </bento-button>\n                            </div>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\" />\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","props","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":"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"}

package/dist/chunks/{layout-row.CdpQeT7f.js → layout-row.BI9ZJa-9.js}

@@ -1,11 +1,11 @@
 import { defineComponent as y, provide as R, toRef as $, computed as s, useSlots as x, inject as E, ref as _, watch as S, nextTick as g, onMounted as z } from "vue";
 import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as T } from "./typography.C8lPlsbD.js";
-import { u as B } from "./use-has-slot.C9lQZ6nz.js";
-import { j as I } from "./index.DZx81HG1.js";
+import { u as k } from "./use-has-slot.C9lQZ6nz.js";
+import { k as B } from "./index.CJYgd0QI.js";
 import "../assets/layout-row.css";
-const h = /* @__PURE__ */ Symbol("Layout size inject key"), O = {}, P = /* @__PURE__ */ y({
-  ...O,
+const h = /* @__PURE__ */ Symbol("Layout size inject key"), I = {}, O = /* @__PURE__ */ y({
+  ...I,
   __name: "layout",
   props: {
     variant: { default: "page" },
@@ -20,25 +20,25 @@ const h = /* @__PURE__ */ Symbol("Layout size inject key"), O = {}, P = /* @__PU
     return { __sfc: !0, props: o, conditionalClasses: l, wrapperElement: t };
   }
 });
-var j = function() {
+var P = function() {
   var o = this, l = o._self._c, t = o._self._setupProxy;
   return l(t.wrapperElement, { tag: "component", staticClass: "b-layout", class: t.conditionalClasses }, [o._t("default")], 2);
-}, k = [], F = /* @__PURE__ */ w(
+}, F = [], M = /* @__PURE__ */ w(
+  O,
   P,
-  j,
-  k,
+  F,
   !1,
   null,
   "14008ddf"
 );
-const Z = F.exports, M = ["3-9", "9-3", "4-8", "8-4", "6-6"], W = {}, N = /* @__PURE__ */ y({
-  ...W,
+const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__PURE__ */ y({
+  ...j,
   __name: "layout-row",
   props: {
     columnsLayout: { default: "6-6" }
   },
   setup(n) {
-    const o = n, l = x(), t = B(l), e = E(h, _("full-width")), a = _(null), m = _(null), f = _(null), c = s(() => e.value === "full-width"), d = s(() => M.includes(o.columnsLayout)), C = s(() => `b-layout-row--${e.value}`), b = s(() => ({
+    const o = n, l = x(), t = k(l), e = E(h, _("full-width")), a = _(null), m = _(null), f = _(null), c = s(() => e.value === "full-width"), d = s(() => W.includes(o.columnsLayout)), C = s(() => `b-layout-row--${e.value}`), b = s(() => ({
       "b-layout-row__column-wrapper": c.value
     })), L = s(() => {
       const u = d.value ? o.columnsLayout.split("-") : [6, 6], r = (i) => c.value ? u[i] : e.value;
@@ -48,7 +48,7 @@ const Z = F.exports, M = ["3-9", "9-3", "4-8", "8-4", "6-6"], W = {}, N = /* @__
       };
     });
     return S(
-      I("(min-width: 768px)"),
+      B("(min-width: 768px)"),
       async (u) => {
         var i, p, v;
         await g();
@@ -84,4 +84,4 @@ export {
   q as a,
   Z as l
 };
-//# sourceMappingURL=layout-row.CdpQeT7f.js.map
+//# sourceMappingURL=layout-row.BI9ZJa-9.js.map