@adyen/bento-vue2 1.49.0 → 1.51.0

package/dist/chunks/{input-field.lEMEBT7J.js → input-field.Dl2lXZda.js}

@@ -1,5 +1,5 @@
 import { defineComponent as G, useAttrs as Q, useSlots as ee, ref as u, provide as te, inject as ae, toRef as oe, computed as r, toRefs as ne } from "vue";
-import { a as re, I as ie, B as se } from "./dropdown.BBHNOorv.js";
+import { a as re, I as ie, B as se } from "./dropdown.DFEGHxjw.js";
 import { p as de, d as R, B as le } from "./typography.J1v_SPG3.js";
 import { g as p } from "./generate-uid.NJ8tVoha.js";
 import { g as ue } from "./get-slot-text.BQS5Olxm.js";
@@ -7,139 +7,49 @@ import { u as pe } from "./aria-label.CaUURpnB.js";
 import { u as ce } from "./i18n.BQkEbtPM.js";
 import { u as fe } from "./use-form-layout-loading.D3lALhtC.js";
 import { u as _e } from "./use-has-slot.C9lQZ6nz.js";
-import { F as be, E as ye } from "./error-message.xTNEaNn8.js";
+import { F as be, E as ye } from "./error-message.B3oWB_HM.js";
 import { n as he } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field.css";
-var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), i = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(i || {}), c = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(c || {}), E = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(E || {}), ve = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ve || {});
-const me = {
+var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), i = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(i || {}), c = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(c || {}), A = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(A || {}), we = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(we || {});
+const De = {
   "en-US": {
     ariaLabelDropdownFallback: "{inputLabel} Dropdown",
     ariaLabelFallback: "Input field"
   }
-}, we = {
-  i18n: { messages: me }
-}, De = /* @__PURE__ */ G({
-  ...we,
+}, me = {
+  i18n: { messages: De }
+}, ve = /* @__PURE__ */ G({
+  ...me,
   __name: "input-field",
   props: {
-    /**
-     * Indicates whether the element is exposed to an accessibility API.
-     */
     ariaHidden: { type: Boolean, default: !0 },
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
-    /**
-     * Text that labels an the input element
-     */
-    ariaLabel: { type: String, default: void 0 },
-    /**
-     * Reduces height of the input
-     */
+    ariaLabel: { default: void 0 },
     condensed: { type: Boolean, default: !1 },
-    /**
-     * Disables the possibility of changing value in the input-field
-     */
     disabled: { type: Boolean, default: !1 },
-    /**
-     * Dropdown props for the small selectable dropdown menu.
-     * Properties supported:
-     *
-     *  - `value`: Selected value of the dropdown
-     *  - `items`: List of available items
-     *  - `aria-label`: Text that labels the dropdown element
-     *
-     */
-    dropdown: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Position of the dropdown before or after input value
-     */
-    dropdownPosition: {
-      type: String,
-      default: i.START,
-      validator: (a) => Object.values(i).includes(a)
-    },
-    /**
-     * Adds error validation class for outlining input-field.
-     *
-     * @deprecated Use "errorMessage" prop instead
-     */
+    dropdown: { default: void 0 },
+    dropdownPosition: { default: i.START },
     error: { type: Boolean, default: !1 },
-    /**
-     * Renders input-field with an error state and the error message beneath the input box
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * Highlights the dropdown is optional.
-     */
+    errorMessage: { default: null },
     optional: { type: Boolean, default: !1 },
-    /**
-     * Text displayed as the placeholder of the input-field
-     */
-    placeholder: { type: String, default: "" },
-    /**
-     * Highlights the dropdown is required.
-     */
+    placeholder: { default: "" },
     required: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will set the input field to read only state.
-     */
     readonly: { type: Boolean, default: !1 },
-    /**
-     * Renders a font numeric style with slashed zeros instead of normal ones.
-     */
     slashedZero: { type: Boolean, default: !1 },
-    /**
-     * Static text that displayed before or after input value
-     * Applicable to the Static Value variant
-     */
-    staticValue: { type: String, default: "" },
-    /**
-     * Position of Static Value before or after input value
-     */
-    staticValuePosition: {
-      type: String,
-      default: i.START,
-      validator: (a) => Object.values(i).includes(a)
-    },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * A string specifying the type of control to render.
-     * All `input` types are available but only `search`, `text` and `number` are fully supported.
-     *
-     * If `type` is `search`, use `bento-search-bar` instead.
-     */
-    type: {
-      type: String,
-      default: E.TEXT
-    },
-    /**
-     * Text displayed as the value of the input-field
-     */
-    value: { type: [String, Number], default: void 0 },
-    /**
-     * Describes the different variants for the input element
-     */
-    variant: {
-      type: String,
-      default: s.DEFAULT,
-      validator: (a) => Object.values(s).includes(a)
-    }
+    staticValue: { default: "" },
+    staticValuePosition: { default: i.START },
+    tooltipText: { default: null },
+    type: { default: A.TEXT },
+    value: { default: void 0 },
+    variant: { default: s.DEFAULT }
   },
   emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "keyup", "input"],
   setup(a, { expose: t, emit: o }) {
-    const e = a, n = Q(), f = ee(), { t: h } = ce(), _ = _e(f), g = u(null), A = u(null), k = p("input"), v = p("input-dropdown"), m = p("input-static-value"), T = p("input-description"), I = p("input-error"), w = u(!1);
+    const e = a, n = Q(), f = ee(), { t: h } = ce(), _ = _e(f), S = u(null), T = u(null), k = p("input"), w = p("input-dropdown"), D = p("input-static-value"), g = p("input-description"), I = p("input-error"), m = u(!1);
     te(re, !0);
     const F = ae(ie, u(void 0)), M = () => {
-      w.value = !0, o("focus");
+      m.value = !0, o("focus");
     }, V = () => {
-      w.value = !1, o("blur");
+      m.value = !1, o("blur");
     }, { isReadOnly: b } = fe(oe(e, "readonly")), d = r(
       () => e.variant === s.STATIC_VALUE && !!f.staticValue
     ), U = r(() => e.variant === s.DEFAULT), x = r(() => e.variant === s.PAYMENT_METHOD), H = r(
@@ -148,42 +58,42 @@ const me = {
       () => d.value && e.staticValuePosition === i.END
     ), l = r(() => e.variant === s.DROPDOWN && !!e.dropdown), Y = r(
       () => l.value && e.dropdownPosition === i.START
-    ), j = r(
+    ), W = r(
       () => l.value && e.dropdownPosition === i.END
-    ), D = r(
+    ), v = r(
       () => !e.disabled && !b.value && (!!e.errorMessage || e.error)
-    ), W = r(() => l.value === !0 && d.value === !0 ? `${m} ${v}` : l.value === !0 ? `${v}` : d.value === !0 ? `${m}` : null), O = r(() => h("ariaLabelFallback")), L = r(
+    ), q = r(() => l.value === !0 && d.value === !0 ? `${D} ${w}` : l.value === !0 ? `${w}` : d.value === !0 ? `${D}` : null), L = r(() => h("ariaLabelFallback")), O = r(
       () => h("ariaLabelDropdownFallback", { inputLabel: B.value })
-    ), N = u(n["aria-label"]), { ariaLabel: C } = ne(e), B = pe({
-      ariaLabel: N.value,
+    ), C = u(n["aria-label"]), { ariaLabel: N } = ne(e), B = pe({
+      ariaLabel: C.value,
       // TODO: take this line away when the aria-label props is removed
-      label: C,
-      defaultFallback: _("default") ? ue(f)("default") : O
-    }), q = r(
-      () => `${_("description") ? T : ""} ${D.value && e.errorMessage ? I : ""}`
-    ), K = r(() => ({
+      label: N,
+      defaultFallback: _("default") ? ue(f)("default") : L
+    }), K = r(
+      () => `${_("description") ? g : ""} ${v.value && e.errorMessage ? I : ""}`
+    ), j = r(() => ({
       [`b-input-field--${c.CONDENSED}`]: e.condensed,
       [`b-input-field--${c.DISABLED}`]: e.disabled,
       [`b-input-field--${c.READONLY}`]: b.value,
-      [`b-input-field--${c.ERROR}`]: D.value,
+      [`b-input-field--${c.ERROR}`]: v.value,
       "b-input-field--slashed-zero": e.slashedZero
     })), z = r(() => ({
-      "aria-label": L.value,
+      "aria-label": O.value,
       ...e.dropdown
     })), J = (y) => {
       const Z = y.target.value;
       !e.disabled && !b.value && o("input", Z);
     }, X = (y) => {
       o("dropdown-input", y), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: y });
-    }, S = () => {
-      g.value.focus();
+    }, E = () => {
+      S.value.focus();
     }, P = () => {
-      e.variant === "dropdown" ? A.value.focus() : S();
+      e.variant === "dropdown" ? T.value.focus() : E();
     };
     return t({
-      focusInput: S,
+      focusInput: E,
       focus: P
-    }), Object.values(E).includes(e.type) || de(`"bento-input-field" dropdown does not support the type ${e.type}`), e.error && R(
+    }), Object.values(A).includes(e.type) || de(`"bento-input-field" dropdown does not support the type ${e.type}`), e.error && R(
       '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.
@@ -198,10 +108,10 @@ const me = {
               	</template>
             </bento-input-field>`,
       "2.0.0"
-    ), { __sfc: !0, attrs: n, slots: f, props: e, emit: o, t: h, hasSlot: _, inputFieldElement: g, inputDropdownElement: A, inputFieldId: k, dropdownId: v, staticValueId: m, descriptionId: T, errorId: I, isFocused: w, hint: F, onFocus: M, onBlur: V, isReadOnly: b, shouldShowStaticValue: d, isDefaultVariant: U, isPaymentMethodVariant: x, shouldDisplayStaticValueAtStart: H, shouldDisplayStaticValueAtEnd: $, shouldShowDropdown: l, shouldDisplayDropdownAtStart: Y, shouldDisplayDropdownAtEnd: j, shouldShowError: D, computedAriaOwns: W, computedAriaLabelFallbackMessage: O, computedAriaLabelDropdowFallback: L, ariaLabelAttribute: N, ariaLabel: C, computedAriaLabel: B, computedAriaDescribedBy: q, inputFieldConditionalClasses: K, inputFieldDropdownProps: z, onInput: J, onDropdownInput: X, focusInput: S, focus: P, BentoDropdown: se, BentoTypography: le, ErrorMessage: ye, FieldLabel: be };
+    ), { __sfc: !0, attrs: n, slots: f, props: e, emit: o, t: h, hasSlot: _, inputFieldElement: S, inputDropdownElement: T, inputFieldId: k, dropdownId: w, staticValueId: D, descriptionId: g, errorId: I, isFocused: m, hint: F, onFocus: M, onBlur: V, isReadOnly: b, shouldShowStaticValue: d, isDefaultVariant: U, isPaymentMethodVariant: x, shouldDisplayStaticValueAtStart: H, shouldDisplayStaticValueAtEnd: $, shouldShowDropdown: l, shouldDisplayDropdownAtStart: Y, shouldDisplayDropdownAtEnd: W, shouldShowError: v, computedAriaOwns: q, computedAriaLabelFallbackMessage: L, computedAriaLabelDropdowFallback: O, ariaLabelAttribute: C, ariaLabel: N, computedAriaLabel: B, computedAriaDescribedBy: K, inputFieldConditionalClasses: j, inputFieldDropdownProps: z, onInput: J, onDropdownInput: X, focusInput: E, focus: P, BentoDropdown: se, BentoTypography: le, ErrorMessage: ye, FieldLabel: be };
   }
 });
-var Se = function() {
+var Ee = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o(e.BentoTypography, { staticClass: "b-input-field", class: e.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: "div", variant: "body" } }, [e.hasSlot("default") ? o(e.FieldLabel, { attrs: { for: e.inputFieldId, "data-testid": "input-field-label", "tooltip-text": t.tooltipText, optional: t.optional, required: t.required }, on: { click: e.focusInput } }, [t._t("default")], 2) : t._e(), o("div", { staticClass: "b-input-field__input-box", attrs: { "data-testid": "input-box", "aria-disabled": t.disabled }, on: { click: e.focusInput } }, [e.isDefaultVariant && (e.hasSlot("defaultIconBefore") || e.hasSlot("iconBefore")) ? o("span", { staticClass: "b-input-field__icon-before", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [e.hasSlot("iconBefore") ? t._t("iconBefore") : t._e(), e.hasSlot("defaultIconBefore") && !e.hasSlot("iconBefore") ? t._t("defaultIconBefore") : t._e()], 2) : t._e(), e.isPaymentMethodVariant && e.hasSlot("paymentMethod") ? o("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), e.shouldDisplayDropdownAtStart ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: e.dropdownId }, on: { click: function(n) {
     n.stopPropagation();
@@ -216,21 +126,21 @@ var Se = function() {
   } } }, "input", e.attrs, !1)), e.hint && e.isFocused && t.value ? o(e.BentoTypography, { staticClass: "b-input-field__hint", attrs: { el: "span" } }, [t._v(" " + t._s(e.hint) + " ")]) : t._e()], 1), e.hasSlot("iconAfter") ? o("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), e.shouldDisplayStaticValueAtEnd ? o(e.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: e.staticValueId, el: "span", variant: "body" } }, [t._t("staticValue")], 2) : t._e(), e.shouldDisplayDropdownAtEnd ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: e.dropdownId, "data-testid": "input-field-dropdown-container-end" }, on: { click: function(n) {
     n.stopPropagation();
   } } }, [t.dropdown ? o(e.BentoDropdown, t._b({ ref: "inputDropdownElement", attrs: { id: e.dropdownId, disabled: t.disabled, readonly: e.isReadOnly }, on: { input: e.onDropdownInput } }, "bento-dropdown", e.inputFieldDropdownProps, !1)) : t._e()], 1) : t._e()], 1), e.shouldShowError && t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), e.hasSlot("description") ? o("span", { staticClass: "b-input-field__description", attrs: { id: e.descriptionId }, on: { click: e.focusInput } }, [o(e.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
-}, Ee = [], ge = /* @__PURE__ */ he(
-  De,
-  Se,
+}, Ae = [], Se = /* @__PURE__ */ he(
+  ve,
   Ee,
+  Ae,
   !1,
   null,
-  "39d64ed1"
+  "eee5bc84"
 );
-const Fe = ge.exports;
+const Fe = Se.exports;
 export {
   Fe as B,
   s as a,
   i as b,
   c,
-  E as d,
-  ve as e
+  A as d,
+  we as e
 };
-//# sourceMappingURL=input-field.lEMEBT7J.js.map
+//# sourceMappingURL=input-field.Dl2lXZda.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.Dl2lXZda.js","sources":["../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    CONDENSED = 'condensed',\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n    dynamicFiltering?: DropdownProps['dynamicFiltering'];\n    'aria-label'?: string;\n};\n\n/**\n * @deprecated The use of these enums is no longer supported.\n * Use `v-on:` or `@` to listen to the events being emitted.\n * This enum will be removed in 2.0.\n */\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n\nexport interface BentoInputFieldProps {\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 from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Reduces height of the input\n     */\n    condensed?: boolean;\n\n    /**\n     * Disables the possibility of changing value in the input-field\n     */\n    disabled?: boolean;\n\n    /**\n     * Dropdown props for the small selectable dropdown menu.\n     * Properties supported:\n     *\n     *  - `value`: Selected value of the dropdown\n     *  - `items`: List of available items\n     *  - `aria-label`: Text that labels the dropdown element\n     *\n     */\n    dropdown?: 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 Use \"errorMessage\" prop instead\n     */\n    error?: boolean;\n\n    /**\n     * Renders input-field with an error state and the error message beneath the input box\n     */\n    errorMessage?: string;\n\n    /**\n     * Highlights the dropdown is optional.\n     */\n    optional?: boolean;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Highlights the dropdown is required.\n     */\n    required?: boolean;\n\n    /**\n     * Setting this property to true will set the input field to read only state.\n     */\n    readonly?: boolean;\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     * Adds a info icon next to the label to display the passed tooltip message.\n     */\n    tooltipText?: string;\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     */\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        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n            <div class=\"b-input-field__input-container\">\n                <input\n                    :id=\"inputFieldId\"\n                    v-bind=\"attrs\"\n                    ref=\"inputFieldElement\"\n                    class=\"b-input-field__input\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-describedby=\"computedAriaDescribedBy\"\n                    :aria-owns=\"computedAriaOwns\"\n                    :aria-invalid=\"shouldShowError\"\n                    :placeholder=\"placeholder\"\n                    :type=\"type\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography v-if=\"hint && isFocused && value\" el=\"span\" class=\"b-input-field__hint\">\n                    {{ hint }}\n                </bento-typography>\n            </div>\n\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import {\n        INPUT_FIELD_COMPONENT_INJECTION_KEY,\n        INPUT_FIELD_HINT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldProps,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoListboxSelectedValue } from '@/types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = defineProps({\n  ariaHidden: { type: Boolean, default: true },\n  ariaLabel: { default: undefined },\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  error: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  required: { type: Boolean, default: false },\n  readonly: { type: Boolean, default: false },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  tooltipText: { default: null },\n  type: { default: BentoInputFieldType.TEXT },\n  value: { default: undefined },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\n});\n\n    const emit = defineEmits([\"update:dropdown\", \"blur\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"input\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const 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    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const shouldShowStaticValue = computed(\n        () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n    );\n\n    const isDefaultVariant = computed(() => props.variant === BentoInputFieldVariant.DEFAULT);\n\n    const isPaymentMethodVariant = computed(() => props.variant === BentoInputFieldVariant.PAYMENT_METHOD);\n\n    const shouldDisplayStaticValueAtStart = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayStaticValueAtEnd = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowDropdown = computed(() => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown);\n    const shouldDisplayDropdownAtStart = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayDropdownAtEnd = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n    );\n\n    const computedAriaOwns = computed(() => {\n        if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n            return `${staticValueId} ${dropdownId}`;\n        }\n        if (shouldShowDropdown.value === true) {\n            return `${dropdownId}`;\n        }\n        if (shouldShowStaticValue.value === true) {\n            return `${staticValueId}`;\n        }\n        return null;\n    });\n\n    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback'));\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: hasSlot('default')\n            ? (getSlotText(slots)('default') as string)\n            : computedAriaLabelFallbackMessage,\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${hasSlot('description') ? descriptionId : ''} ${\n                shouldShowError.value && !!props.errorMessage ? errorId : ''\n            }`\n    );\n\n    const inputFieldConditionalClasses = computed(() => ({\n        [`b-input-field--${BentoInputFieldStateClass.CONDENSED}`]: props.condensed,\n        [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n        [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n        [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n        [`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            emit('input', inputValue);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    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    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType)) {\n        printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type ${props.type}`);\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :value=\"inputValue\"\n     *              :input=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputDropdownElement","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isFocused","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","hint","inject","INPUT_FIELD_HINT_INJECTION_KEY","onFocus","emit","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/chunks/{inspector.types.BtgXpTC7.js → inspector.types.C9Oc8FgA.js}

@@ -1,10 +1,10 @@
 import { defineComponent as x, ref as r, computed as m, watch as F, nextTick as E } from "vue";
 import { d as I, B as T } from "./typography.J1v_SPG3.js";
-import { B as k } from "./button.CdAFZa4V.js";
+import { B as k } from "./button.D-3uUhuG.js";
 import { B as w } from "./loading-indicator.z8COalOc.js";
 import { B as S, s as M, g as L, a as D, f as O } from "./focus-trap._RrLaKlq.js";
-import { E as P } from "./expand.CwwKq7Uc.js";
-import { C as z } from "./cross.CsUPDmaA.js";
+import { E as P } from "./expand.C263WARj.js";
+import { C as z } from "./cross.CJ5EEL2c.js";
 import { g as R } from "./generate-uid.NJ8tVoha.js";
 import { u as W } from "./i18n.BQkEbtPM.js";
 import { a as $ } from "./index.CU8GKq4C.js";
@@ -98,4 +98,4 @@ export {
   st as B,
   ot as i
 };
-//# sourceMappingURL=inspector.types.BtgXpTC7.js.map
+//# sourceMappingURL=inspector.types.C9Oc8FgA.js.map

package/dist/chunks/{inspector.types.BtgXpTC7.js.map → inspector.types.C9Oc8FgA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.types.BtgXpTC7.js","sources":["../../src/components/inspector/inspector.vue","../../src/components/inspector/inspector.types.ts"],"sourcesContent":["<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=\"!isFullWidthInspector\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isFullWidthInspector\">\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 { useResizeObserver } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { BentoInspectorSize } from './inspector.types';\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});\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 pageLastFocusedElement = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n    const isFullWidthInspector = ref(false);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\n            await nextTick();\n            moveFocusInside(inspector.value, pageLastFocusedElement.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(pageLastFocusedElement.value);\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isFullWidthInspector.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(pageLastFocusedElement.value);\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 && !isFullWidthInspector.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(pageLastFocusedElement.value);\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\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    useResizeObserver(inspector, entries => {\n        const entry = entries[0];\n        isFullWidthInspector.value = wrapper.value.clientWidth === entry.contentRect.width;\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","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","ref","inspector","page","pageLastFocusedElement","inspectorLastFocusedElement","isFullWidthInspector","conditionalClass","computed","props","inspectorAriaLabel","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","watch","useResizeObserver","entries","entry","deprecate","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmNIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;iBA1HA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAJ,EAAA,IAAA,GACAK,IAAAL,EAAA,EAAA,GAEAM,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAC,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA,GAGpCC,IAAAF,EAAA,MAAA,GAAA,EAAA,WAAA,CAAA,KAAAC,EAAA,KAAA,EAAA,GAEAE,IAAA,YAAA;AACI,MAAAF,EAAA,UACIL,EAAA,QAAA,SAAA,eACA,MAAAQ,EAAA,GACAC,EAAAX,EAAA,OAAAE,EAAA,KAAA,KAIAU,EAAAV,EAAA,KAAA;AAAA,IACJ,GAGJW,IAAA,CAAAC,MAAA;AACI,UAAAV,EAAA;AACI;AAEJ,YAAAW,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAf,EAAA,KAAA;AAGA,MAAAkB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAX,EAAA,QAAA,SAAA,eACAS,EAAAV,EAAA,KAAA,GAEAiB,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAP,EAAA,UAAA,CAAAH,EAAA,SAAAiB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAAvB,EAAA,KAAA,KACIG,EAAA,QAAA,SAAA,eACAS,EAAAV,EAAA,KAAA,GAEAiB,EAAA,sBAAA,MAAA,MAEAjB,EAAA,QAAA,SAAA,eACAU,EAAAT,EAAA,KAAA;AAAA,IACJ,GAGJS,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAC;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIE,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJiB,EAAA1B,GAAA,CAAA2B,MAAA;AACI,YAAAC,IAAAD,EAAA,CAAA;AACA,MAAAvB,EAAA,QAAAN,EAAA,MAAA,gBAAA8B,EAAA,YAAA;AAAA,IAA6E,CAAA,GAGjFrB,EAAA,cACIsB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;sBCrLCC,KAAA,CAAA,SAAA,OAAA;"}
+{"version":3,"file":"inspector.types.C9Oc8FgA.js","sources":["../../src/components/inspector/inspector.vue","../../src/components/inspector/inspector.types.ts"],"sourcesContent":["<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=\"!isFullWidthInspector\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isFullWidthInspector\">\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 { useResizeObserver } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { BentoInspectorSize } from './inspector.types';\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});\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 pageLastFocusedElement = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n    const isFullWidthInspector = ref(false);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\n            await nextTick();\n            moveFocusInside(inspector.value, pageLastFocusedElement.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(pageLastFocusedElement.value);\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isFullWidthInspector.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(pageLastFocusedElement.value);\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 && !isFullWidthInspector.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(pageLastFocusedElement.value);\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\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    useResizeObserver(inspector, entries => {\n        const entry = entries[0];\n        isFullWidthInspector.value = wrapper.value.clientWidth === entry.contentRect.width;\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","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","ref","inspector","page","pageLastFocusedElement","inspectorLastFocusedElement","isFullWidthInspector","conditionalClass","computed","props","inspectorAriaLabel","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","watch","useResizeObserver","entries","entry","deprecate","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmNIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;iBA1HA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAJ,EAAA,IAAA,GACAK,IAAAL,EAAA,EAAA,GAEAM,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAC,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA,GAGpCC,IAAAF,EAAA,MAAA,GAAA,EAAA,WAAA,CAAA,KAAAC,EAAA,KAAA,EAAA,GAEAE,IAAA,YAAA;AACI,MAAAF,EAAA,UACIL,EAAA,QAAA,SAAA,eACA,MAAAQ,EAAA,GACAC,EAAAX,EAAA,OAAAE,EAAA,KAAA,KAIAU,EAAAV,EAAA,KAAA;AAAA,IACJ,GAGJW,IAAA,CAAAC,MAAA;AACI,UAAAV,EAAA;AACI;AAEJ,YAAAW,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAf,EAAA,KAAA;AAGA,MAAAkB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAX,EAAA,QAAA,SAAA,eACAS,EAAAV,EAAA,KAAA,GAEAiB,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAP,EAAA,UAAA,CAAAH,EAAA,SAAAiB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAAvB,EAAA,KAAA,KACIG,EAAA,QAAA,SAAA,eACAS,EAAAV,EAAA,KAAA,GAEAiB,EAAA,sBAAA,MAAA,MAEAjB,EAAA,QAAA,SAAA,eACAU,EAAAT,EAAA,KAAA;AAAA,IACJ,GAGJS,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAC;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIE,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJiB,EAAA1B,GAAA,CAAA2B,MAAA;AACI,YAAAC,IAAAD,EAAA,CAAA;AACA,MAAAvB,EAAA,QAAAN,EAAA,MAAA,gBAAA8B,EAAA,YAAA;AAAA,IAA6E,CAAA,GAGjFrB,EAAA,cACIsB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;sBCrLCC,KAAA,CAAA,SAAA,OAAA;"}

package/dist/chunks/{link.DZlbzVSB.js → link.BH3eB_7E.js}

@@ -3,6 +3,7 @@ import { RouterLink as m } from "vue-router";
 import { g as k } from "./generate-uid.NJ8tVoha.js";
 import { B as v } from "./typography.J1v_SPG3.js";
 import { u as y } from "./i18n.BQkEbtPM.js";
+/* empty css              */
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/link.css";
 var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
@@ -78,10 +79,10 @@ var I = function() {
   null,
   "355f8490"
 );
-const Q = E.exports;
+const S = E.exports;
 export {
-  Q as B,
+  S as B,
   B as E,
   s as a
 };
-//# sourceMappingURL=link.DZlbzVSB.js.map
+//# sourceMappingURL=link.BH3eB_7E.js.map

package/dist/chunks/link.BH3eB_7E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.BH3eB_7E.js","sources":["../../../core/src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport interface LinkProps {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import type { BentoLinkProps } from './link.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACIZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GCkGIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBAlEA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAuBAC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAd,EAAA,KAAA,EAAA,GAAAc,EAAA,YAAAd,EAAA;AAAA,MACyD,oBAAAc,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;sKAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.BJBWnC2r.js → listbox-option-tag.bPRcATJK.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as r } from "./tag.CevG31iQ.js";
+import { B as r } from "./tag.BxmageRW.js";
 import { B as s } from "./typography.J1v_SPG3.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/listbox-option-tag.css";
@@ -41,4 +41,4 @@ const u = m.exports;
 export {
   u as L
 };
-//# sourceMappingURL=listbox-option-tag.BJBWnC2r.js.map
+//# sourceMappingURL=listbox-option-tag.bPRcATJK.js.map

package/dist/chunks/{listbox-option-tag.BJBWnC2r.js.map → listbox-option-tag.bPRcATJK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.BJBWnC2r.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.bPRcATJK.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}