@adyen/bento-vue2 1.51.0 → 1.53.0

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

@@ -0,0 +1,152 @@
+import { defineComponent as te, useAttrs as oe, useSlots as ae, ref as u, provide as ne, inject as k, toRef as ie, computed as i, toRefs as re } from "vue";
+import { a as se, I as de, b as le, B as ue } from "./dropdown.DzWXcJyF.js";
+import { p as T, d as M, B as pe } from "./typography.J1v_SPG3.js";
+import { g as p } from "./generate-uid.NJ8tVoha.js";
+import { g as ce } from "./get-slot-text.BQS5Olxm.js";
+import { u as fe } from "./aria-label.CaUURpnB.js";
+import { u as _e } from "./i18n.BQkEbtPM.js";
+import { u as be } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as ye } from "./use-has-slot.C9lQZ6nz.js";
+import { F as he, E as we } from "./error-message.CzQf7YOD.js";
+import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/input-field.css";
+var s = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.PAYMENT_METHOD = "payment-method", o.STATIC_VALUE = "static-value", o.DROPDOWN = "dropdown", o))(s || {}), r = /* @__PURE__ */ ((o) => (o.START = "start", o.END = "end", o))(r || {}), c = /* @__PURE__ */ ((o) => (o.CONDENSED = "condensed", o.DISABLED = "disabled", o.READONLY = "readonly", o.ERROR = "error", o))(c || {}), A = /* @__PURE__ */ ((o) => (o.SEARCH = "search", o.TEXT = "text", o.NUMBER = "number", o))(A || {}), De = /* @__PURE__ */ ((o) => (o.INPUT = "input", o.ESCAPE_PRESSED = "escape-pressed", o.UPDATE_DROPDOWN = "update:dropdown", o.DROPDOWN_INPUT = "dropdown-input", o.FOCUS = "focus", o.CHANGE = "change", o.BLUR = "blur", o.KEYDOWN = "keydown", o))(De || {});
+const ve = {
+  "en-US": {
+    ariaLabelDropdownFallback: "{inputLabel} Dropdown",
+    ariaLabelFallback: "Input field"
+  }
+}, Ee = {
+  i18n: { messages: ve }
+}, Te = /* @__PURE__ */ te({
+  ...Ee,
+  __name: "input-field",
+  props: {
+    ariaHidden: { type: Boolean, default: !0 },
+    ariaLabel: { default: void 0 },
+    condensed: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    dropdown: { default: void 0 },
+    dropdownPosition: { default: r.START },
+    error: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    optional: { type: Boolean, default: !1 },
+    placeholder: { default: "" },
+    required: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    slashedZero: { type: Boolean, default: !1 },
+    staticValue: { default: "" },
+    staticValuePosition: { default: r.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(o, { expose: t, emit: a }) {
+    const e = o, n = oe(), f = ae(), { t: h } = _e(), _ = ye(f), S = u(null), I = u(null), U = p("input"), w = p("input-dropdown"), m = p("input-static-value"), g = p("input-description"), N = p("input-error"), D = u(!1);
+    ne(se, !0);
+    const V = k(de, u(void 0)), x = () => {
+      D.value = !0, a("focus");
+    }, $ = () => {
+      D.value = !1, a("blur");
+    }, { isReadOnly: b } = be(ie(e, "readonly")), d = i(
+      () => e.variant === s.STATIC_VALUE && !!f.staticValue
+    ), H = i(() => e.variant === s.DEFAULT), Y = i(() => e.variant === s.PAYMENT_METHOD), W = i(
+      () => d.value && e.staticValuePosition === r.START
+    ), K = i(
+      () => d.value && e.staticValuePosition === r.END
+    ), l = i(() => e.variant === s.DROPDOWN && !!e.dropdown), q = i(
+      () => l.value && e.dropdownPosition === r.START
+    ), J = i(
+      () => l.value && e.dropdownPosition === r.END
+    ), v = i(
+      () => !e.disabled && !b.value && (!!e.errorMessage || e.error)
+    ), j = i(() => l.value === !0 && d.value === !0 ? `${m} ${w}` : l.value === !0 ? `${w}` : d.value === !0 ? `${m}` : null), O = i(() => h("ariaLabelFallback")), C = i(
+      () => h("ariaLabelDropdownFallback", { inputLabel: R.value })
+    ), L = u(n["aria-label"]), { ariaLabel: P } = re(e), R = fe({
+      ariaLabel: L.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: P,
+      defaultFallback: _("default") ? ce(f)("default") : O
+    }), z = i(
+      () => `${_("description") ? g : ""} ${v.value && e.errorMessage ? N : ""}`
+    ), X = i(() => ({
+      [`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}`]: v.value,
+      "b-input-field--slashed-zero": e.slashedZero
+    })), Z = i(() => ({
+      "aria-label": C.value,
+      ...e.dropdown
+    })), G = (y) => {
+      const ee = y.target.value;
+      !e.disabled && !b.value && a("input", ee);
+    }, Q = (y) => {
+      a("dropdown-input", y), a("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: y });
+    }, E = () => {
+      S.value.focus();
+    }, B = () => {
+      e.variant === "dropdown" ? I.value.focus() : E();
+    };
+    t({
+      focusInput: E,
+      focus: B
+    });
+    const F = k(le, "");
+    return !Object.values(A).includes(e.type) && !F && (e.type === "tel" ? T(
+      `"bento-input-field" dropdown does not support the type '${e.type}', use "bento-input-field-phone-number" instead.`
+    ) : e.type === "password" ? T(
+      `"bento-input-field" dropdown does not support the type '${e.type}', use "bento-input-field-password" instead.`
+    ) : T(`"bento-input-field" dropdown does not support the type '${e.type}'`)), e.error && M(
+      '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"
+    ), _("defaultIconBefore") && M(
+      'BentoInputField "defaultIconBefore" slot',
+      `Use the BentoInputField "iconBefore" slot instead to add an icon at the left side of the input field
+            <bento-input-field>
+              	<template #iconBefore>
+                		<my-icon-goes-here />
+              	</template>
+            </bento-input-field>`,
+      "2.0.0"
+    ), { __sfc: !0, attrs: n, slots: f, props: e, emit: a, t: h, hasSlot: _, inputFieldElement: S, inputDropdownElement: I, inputFieldId: U, dropdownId: w, staticValueId: m, descriptionId: g, errorId: N, isFocused: D, hint: V, onFocus: x, onBlur: $, isReadOnly: b, shouldShowStaticValue: d, isDefaultVariant: H, isPaymentMethodVariant: Y, shouldDisplayStaticValueAtStart: W, shouldDisplayStaticValueAtEnd: K, shouldShowDropdown: l, shouldDisplayDropdownAtStart: q, shouldDisplayDropdownAtEnd: J, shouldShowError: v, computedAriaOwns: j, computedAriaLabelFallbackMessage: O, computedAriaLabelDropdowFallback: C, ariaLabelAttribute: L, ariaLabel: P, computedAriaLabel: R, computedAriaDescribedBy: z, inputFieldConditionalClasses: X, inputFieldDropdownProps: Z, onInput: G, onDropdownInput: Q, focusInput: E, focus: B, inputFieldParentComponent: F, BentoDropdown: ue, BentoTypography: pe, ErrorMessage: we, FieldLabel: he };
+  }
+});
+var Ae = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a(e.BentoTypography, { staticClass: "b-input-field", class: e.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: "div", variant: "body" } }, [e.hasSlot("default") ? a(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(), a("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")) ? a("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") ? a("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), e.shouldDisplayDropdownAtStart ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: e.dropdownId }, on: { click: function(n) {
+    n.stopPropagation();
+  } } }, [t.dropdown ? a(e.BentoDropdown, t._b({ ref: "inputDropdownElement", attrs: { disabled: t.disabled, readonly: e.isReadOnly }, on: { input: e.onDropdownInput } }, "bento-dropdown", e.inputFieldDropdownProps, !1)) : t._e()], 1) : t._e(), e.shouldDisplayStaticValueAtStart ? a(e.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: e.staticValueId, el: "span", variant: "body" } }, [t._t("staticValue")], 2) : t._e(), a("div", { staticClass: "b-input-field__input-container" }, [a("input", t._b({ ref: "inputFieldElement", staticClass: "b-input-field__input", attrs: { id: e.inputFieldId, "aria-label": e.computedAriaLabel, "aria-describedby": e.computedAriaDescribedBy, "aria-owns": e.computedAriaOwns, "aria-invalid": e.shouldShowError, placeholder: t.placeholder, type: t.type, disabled: t.disabled, readonly: e.isReadOnly }, domProps: { value: t.value }, on: { input: e.onInput, change: function(n) {
+    return e.emit("change");
+  }, focus: e.onFocus, blur: e.onBlur, keydown: [function(n) {
+    return e.emit("keydown", n);
+  }, function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.emit("escape-pressed");
+  }], keyup: function(n) {
+    return e.emit("keyup", n);
+  } } }, "input", e.attrs, !1)), e.hint && e.isFocused && t.value ? a(e.BentoTypography, { staticClass: "b-input-field__hint", attrs: { el: "span" } }, [t._v(" " + t._s(e.hint) + " ")]) : t._e()], 1), e.hasSlot("iconAfter") ? a("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), e.shouldDisplayStaticValueAtEnd ? a(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 ? a("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 ? a(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 ? a(e.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), e.hasSlot("description") ? a("span", { staticClass: "b-input-field__description", attrs: { id: e.descriptionId }, on: { click: e.focusInput } }, [a(e.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
+}, Se = [], Ie = /* @__PURE__ */ me(
+  Te,
+  Ae,
+  Se,
+  !1,
+  null,
+  "c5f8fb23"
+);
+const Ue = Ie.exports;
+export {
+  Ue as B,
+  s as a,
+  r as b,
+  c,
+  A as d,
+  De as e
+};
+//# sourceMappingURL=input-field.tP3Eupoo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.tP3Eupoo.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        INPUT_FIELD_PARENT_COMPONENT_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    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</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","inputFieldParentComponent","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","printDevelopmentWarning","deprecate"],"mappings":"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"}

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

@@ -2,12 +2,12 @@ import { defineComponent as x, ref as r, computed as m, watch as F, nextTick as
 import { d as I, B as T } from "./typography.J1v_SPG3.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 { B as S, s as M, g as L, a as D, f as O } from "./focus-trap.CIUzScHc.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";
+import { a as $ } from "./index.BCUiAdb6.js";
 import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/inspector.css";
 const K = {
@@ -98,4 +98,4 @@ export {
   st as B,
   ot as i
 };
-//# sourceMappingURL=inspector.types.C9Oc8FgA.js.map
+//# sourceMappingURL=inspector.types.A0b4jNO3.js.map

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"inspector.types.A0b4jNO3.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/{layout-row.CHwDU8yK.js → layout-row.BgBazwnM.js}

@@ -2,7 +2,7 @@ import { defineComponent as y, provide as R, toRef as $, computed as s, useSlots
 import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as T } from "./typography.J1v_SPG3.js";
 import { u as B } from "./use-has-slot.C9lQZ6nz.js";
-import { e as I } from "./index.CU8GKq4C.js";
+import { e as I } from "./index.BCUiAdb6.js";
 import "../assets/layout-row.css";
 const h = Symbol("Layout size inject key"), O = {}, P = /* @__PURE__ */ y({
   ...O,
@@ -84,4 +84,4 @@ export {
   q as a,
   Z as l
 };
-//# sourceMappingURL=layout-row.CHwDU8yK.js.map
+//# sourceMappingURL=layout-row.BgBazwnM.js.map

package/dist/chunks/{layout-row.CHwDU8yK.js.map → layout-row.BgBazwnM.js.map}

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

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

@@ -1,5 +1,5 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as r } from "./tag.BxmageRW.js";
+import { B as r } from "./tag.IyMxowGc.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.bPRcATJK.js.map
+//# sourceMappingURL=listbox-option-tag.T9cfTst7.js.map

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.T9cfTst7.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;;;;;;;;;;;;;"}