@adyen/bento-vue3 1.56.2 → 1.57.0

package/dist/chunks/checkbox-input.CgbJsFXD.js

@@ -1,157 +0,0 @@
-import { createElementBlock as f, openBlock as s, mergeProps as D, createCommentVNode as x, createElementVNode as $, toDisplayString as O, defineComponent as S, computed as l, useAttrs as U, toRefs as H, normalizeClass as I, createBlock as E, unref as i } from "vue";
-import { C as P } from "./checkmark-small.D7l69yBf.js";
-/* empty css              */
-import { _ as A } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/checkbox-input.css";
-var r = /* @__PURE__ */ ((e) => (e.UNCHECKED = "unchecked", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(r || {}), m = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(m || {});
-let g = 0;
-const T = {
-  beforeCreate() {
-    this.uuid = g.toString(), g += 1;
-  }
-}, Y = { key: 0 };
-function K(e, o, a, p, h, b) {
-  return s(), f("svg", D({ role: "img" }, e.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (s(), f("title", Y, O(e.$attrs["svg-title"]), 1)) : x("", !0),
-    o[0] || (o[0] = $("path", {
-      fill: "#00112C",
-      d: "M4.25 7.25H11.75V8.75H4.25V7.25Z"
-    }, null, -1))
-  ], 16);
-}
-const z = /* @__PURE__ */ A(T, [["render", K]]), G = ["id", "aria-label", "aria-checked", "aria-describedby", "aria-invalid", "checked", "disabled", ".indeterminate", "value", "aria-readonly"], M = {
-  name: "checkbox-input",
-  inheritAttrs: !1
-}, Z = /* @__PURE__ */ S({
-  ...M,
-  props: {
-    /**
-     * The aria label associated to the input checkbox.
-     */
-    ariaLabel: { type: String, default: "" },
-    /**
-     * An additional string that serves as description for the input checkbox (useful if the component shows a description).
-     */
-    ariaDescribedby: { type: String, default: "" },
-    /**
-     * Setting this property to true will disable the checkbox in your form.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will show the checkbox in error state.
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * Sets the id of the checkbox. Required for accessibility purposes
-     */
-    id: { type: String, default: null },
-    /**
-     * The :indeterminate CSS pseudo-class represents any form element
-     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
-     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
-     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
-     * This property lets you control the input.indeterminate native property.
-     */
-    indeterminate: { type: Boolean, default: !1 },
-    /**
-     * When handling a single checkbox with a singular state, use a boolean.
-     *
-     * When handling multiple checkboxes, use an array of keys.
-     * These keys exist as a set "value" prop for each checkbox.
-     */
-    modelValue: {
-      type: [Boolean, Array],
-      default: !1
-    },
-    /**
-     * Setting this property to true will set the checkbox to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The value of the component. The DOM API casts this to a string.
-     * The browser uses "on" as the default value.
-     *
-     * In the case of multiple checkboxes this value is used as a unique key.
-     */
-    value: { type: [String, Number], default: null }
-  },
-  emits: ["update:model-value"],
-  setup(e, { emit: o }) {
-    const a = e, p = o, h = l(() => {
-      {
-        const { class: t, style: v, ...n } = U();
-        return n;
-      }
-    }), { disabled: b, indeterminate: y, modelValue: c, readonly: k, value: d } = H(a), R = l(() => ({
-      [`b-checkbox-input--${r.DISABLED}`]: a.disabled,
-      [`b-checkbox-input--${r.READONLY}`]: a.readonly
-    })), B = l(() => ({
-      [`b-checkbox-input__outline--${r.UNCHECKED}`]: !u.value && !a.indeterminate,
-      [`b-checkbox-input__outline--${r.ERROR}`]: a.hasError,
-      [`b-checkbox-input__outline--${r.READONLY}`]: a.readonly
-    })), _ = l(() => Array.isArray(c.value)), u = l(() => _.value ? c.value.some((t) => t === d.value) : c.value), N = l(
-      () => a.indeterminate ? "mixed" : `${!!u.value}`
-    ), L = l(
-      () => a.hasError && !a.disabled && !a.readonly
-    ), V = (t) => {
-      if (k.value) {
-        t.preventDefault();
-        return;
-      }
-    }, w = (t) => {
-      if (b.value)
-        return;
-      const v = t.target.checked;
-      if (_.value) {
-        const n = [...c.value], C = n.indexOf(d.value);
-        C === -1 ? n.push(d.value) : n.splice(C, 1), p(m.UPDATE, n);
-      } else
-        p(m.UPDATE, v);
-    };
-    return (t, v) => (s(), f("div", {
-      class: I(["b-checkbox-input", R.value])
-    }, [
-      i(y) ? (s(), E(i(z), {
-        key: 0,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : u.value ? (s(), E(i(P), {
-        key: 1,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : x("", !0),
-      $("input", D({
-        id: e.id,
-        ref: "inputRef"
-      }, h.value, {
-        type: "checkbox",
-        class: ["b-checkbox-input__outline", B.value],
-        "aria-label": e.ariaLabel,
-        "aria-checked": N.value,
-        "aria-describedby": e.ariaDescribedby,
-        "aria-invalid": L.value,
-        checked: u.value,
-        disabled: i(b),
-        ".indeterminate": i(y),
-        value: i(d),
-        "aria-readonly": i(k),
-        onClick: V,
-        onChange: w
-      }), null, 48, G)
-    ], 2));
-  }
-}), Q = /* @__PURE__ */ A(Z, [["__scopeId", "data-v-b1e7648e"]]);
-export {
-  r as C,
-  z as N,
-  Q as a
-};
-//# sourceMappingURL=checkbox-input.CgbJsFXD.js.map

package/dist/chunks/checkbox-input.CgbJsFXD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-input.CgbJsFXD.js","sources":["../../../core/src/components/internal/checkbox-input/checkbox-input.types.ts","../../../ui-assets/icons-16/dist/vue/minus-small.vue","../../../vue2/src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\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=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></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    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            v-bind=\"attrs\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"ariaChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, HTMLAttributes, PropType, toRefs, useAttrs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        CheckboxInputGroupItems,\n        CheckboxInputState,\n        CheckboxInputType,\n        MultiCheckboxInputType,\n    } from '@/core/components/internal/checkbox-input/checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\n\n        /**\n         * Setting this property to true will disable the checkbox in your form.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\n\n        /**\n         * The :indeterminate CSS pseudo-class represents any form element\n         * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n         * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n         * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n         * This property lets you control the input.indeterminate native property.\n         */\n        indeterminate: { type: Boolean, default: false },\n\n        /**\n         * When handling a single checkbox with a singular state, use a boolean.\n         *\n         * When handling multiple checkboxes, use an array of keys.\n         * These keys exist as a set \"value\" prop for each checkbox.\n         */\n        modelValue: {\n            type: [Boolean, Array] as PropType<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\n\n        /**\n         * Setting this property to true will set the checkbox to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The value of the component. The DOM API casts this to a string.\n         * The browser uses \"on\" as the default value.\n         *\n         * In the case of multiple checkboxes this value is used as a unique key.\n         */\n        value: { type: [String, Number], default: null },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emit that emits the input value\n         */\n        (e: 'update:model-value', value: boolean | Array<string | number>): void;\n    }>();\n\n    // filter out style classes because in vue3 they are also part of attrs\n    const attrs = computed(() => {\n        if (isVue3) {\n            const { class: _class, style: _style, ...rest } = useAttrs();\n            return rest;\n        } else {\n            return useAttrs();\n        }\n    });\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    // ARIA fields\n    const ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n        props.indeterminate ? 'mixed' : `${!!isChecked.value}`\n    );\n    const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(\n        () => props.hasError && !props.disabled && !props.readonly\n    );\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n            return;\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/internal/checkbox-input/checkbox-input.scss\" />\n"],"names":["CheckboxInputState","CheckboxInputState2","CheckboxInputEvent","CheckboxInputEvent2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","props","__props","emit","__emit","attrs","computed","_class","_style","rest","useAttrs","disabled","indeterminate","modelValue","readonly","value","toRefs","conditionalClasses","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaChecked","ariaInvalid","onClick","event","onChange","newValue","newCheckedList","index"],"mappings":";;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;ACHR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;kMCgMzNC,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7JA,UAAAC,IAAAC,GA4DAC,IAAAC,GAQAC,IAAAC,EAAA,MAAA;AACI;AACI,cAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA;AACA,eAAAD;AAAA,MAAO;AAAA,IAGX,CAAA,GAGJ,EAAA,UAAAE,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAf,CAAA,GAEAgB,IAAAX,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAhB,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACqB,CAAA,qBAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,IACA,EAAA,GAGhEiB,IAAAZ,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAhB,EAAA,SAAA,EAAA,GAAA,CAAA6B,EAAA,SAAA,CAAAlB,EAAA;AAAA,MAC6C,CAAA,8BAAAX,EAAA,KAAA,EAAA,GAAAW,EAAA;AAAA,MACzB,CAAA,8BAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,IACG,EAAA,GAGzEmB,IAAAd,EAAA,MAAA,MAAA,QAAAO,EAAA,KAAA,CAAA,GAEAM,IAAAb,EAAA,MACIc,EAAA,QAIAP,EAAA,MAAA,KAAA,CAAAQ,MAAAA,MAAAN,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAIzFS,IAAAhB;AAAA,MAAoB,MAAAL,EAAA,gBAAA,UAAA,GAAA,CAAA,CAAAkB,EAAA,KAAA;AAAA,IACoC,GAExDI,IAAAjB;AAAA,MAAoB,MAAAL,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,IACkC,GAItDuB,IAAA,CAAAC,MAAA;AACI,UAAAX,EAAA,OAAA;AACI,QAAAW,EAAA,eAAA;AACA;AAAA,MAAA;AAAA,IACJ,GAEJC,IAAA,CAAAD,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAgB,IAAAF,EAAA,OAAA;AAEA,UAAAL,EAAA,OAAA;AACI,cAAAQ,IAAA,CAAA,GAAAf,EAAA,KAAA,GACAgB,IAAAD,EAAA,QAAAb,EAAA,KAAA;AAEA,QAAAc,MAAA,KACID,EAAA,KAAAb,EAAA,KAAA,IAEAa,EAAA,OAAAC,GAAA,CAAA,GAEJ1B,EAAAX,EAAA,QAAAoC,CAAA;AAAA,MAA8C;AAE9C,QAAAzB,EAAAX,EAAA,QAAAmC,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/dialog-page.MLFdqTcL.js

@@ -1,173 +0,0 @@
-import { createElementBlock as u, openBlock as n, mergeProps as Q, createCommentVNode as c, createElementVNode as W, toDisplayString as X, defineComponent as ee, useSlots as te, ref as m, computed as r, inject as N, watch as E, nextTick as y, onUnmounted as ae, createBlock as oe, Transition as le, unref as s, withCtx as B, normalizeClass as C, renderSlot as S, normalizeStyle as se, createVNode as $ } from "vue";
-import { B as ne } from "./button.BHZgsGkp.js";
-/* empty css              */
-import { _ as R } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as ie } from "./use-has-slot.B7eQSabc.js";
-import { u as re } from "./i18n.B6g5VX0q.js";
-import { i as ue } from "./typography.DN5eC5ch.js";
-import "../assets/dialog-page.css";
-let O = 0;
-const ce = {
-  beforeCreate() {
-    this.uuid = O.toString(), O += 1;
-  }
-}, ve = { key: 0 };
-function de(e, d, i, I, L, g) {
-  return n(), u("svg", Q({ role: "img" }, e.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (n(), u("title", ve, X(e.$attrs["svg-title"]), 1)) : c("", !0),
-    d[0] || (d[0] = W("path", {
-      fill: "#00112C",
-      d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z"
-    }, null, -1))
-  ], 16);
-}
-const ge = /* @__PURE__ */ R(ce, [["render", de]]);
-var b = /* @__PURE__ */ ((e) => (e.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", e.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", e))(b || {});
-const pe = Symbol("dialog registerPage injection key"), me = Symbol("dialog page config data injection key"), G = {
-  "en-US": {
-    goToPreviousPage: "Go to previous page"
-  }
-}, fe = {
-  key: 0,
-  class: "b-dialog-page"
-}, _e = {
-  i18n: { messages: G }
-}, he = /* @__PURE__ */ ee({
-  ..._e,
-  __name: "dialog-page",
-  props: {
-    /**
-     * Identifier of the page, used with activePage prop to handle navigation
-     */
-    pageId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Show header and actions border
-     */
-    alwaysShowBorder: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Pass custom styling to the back button to position it correctly with the header slot
-     */
-    backButtonStyling: { type: Object, default: null },
-    /**
-     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
-     * Used when the back button should not take the user to the natural previous page
-     * Set to `null` to hide back button in the page
-     */
-    previousPage: {
-      type: String,
-      default: void 0
-    }
-  },
-  emits: ["animationend"],
-  setup(e, { emit: d }) {
-    const i = e, I = d, L = te(), g = ie(L), { t: V } = re({ messages: G }), a = m(null), f = m(!1), w = m(!0), T = m(!1), _ = r(() => l.value ? l.value === i.pageId : !0), D = r(() => ({
-      "b-dialog-page__header--with-border": i.alwaysShowBorder || f.value && !w.value
-    })), H = r(() => ({
-      "b-dialog-page__footer--with-border": i.alwaysShowBorder || f.value && !T.value
-    })), j = () => {
-      a.value && (w.value = a.value.scrollTop === 0, T.value = a.value.scrollHeight - a.value.clientHeight === a.value.scrollTop);
-    }, k = async (t) => {
-      t && (await y(), f.value = a.value && a.value.scrollHeight > a.value.clientHeight);
-    }, { activePage: l, animation: h, isAnimationActive: p, isOpen: P, pages: U, previousPages: o, updatePage: x } = N(me);
-    E(() => P.value, k, { immediate: !0 }), E(() => _.value, k, { immediate: !0 });
-    const z = r(() => i.previousPage ? !0 : i.previousPage === null ? !1 : Y.value && _.value), J = () => {
-      h.value = b.TRANSITION_LEVEL_DEEPER, p && (p.value = !1), I("animationend");
-    }, K = () => {
-      p && (p.value = !0);
-    }, Y = r(() => o.value.length > 1), A = r(() => o.value[o.value.length - 1]), F = r(() => U.value.some((t) => t === l.value)), M = async (t) => {
-      if (t) {
-        const v = o.value.indexOf(t);
-        v !== -1 ? o.value = o.value.slice(0, v + 1) : o.value = [t];
-      } else
-        o.value.pop();
-      h.value = b.TRANSITION_LEVEL_UPPER, await y(), x(A.value);
-    };
-    E(
-      () => l.value,
-      async () => {
-        if (await y(), !!P.value) {
-          if (l.value && !F.value && ue) {
-            console.error(
-              `The activePage passed "${l.value}" does not match the id of any of the pages`
-            );
-            return;
-          }
-          l.value !== A.value && o.value.push(l.value);
-        }
-      },
-      { immediate: !0 }
-    );
-    const Z = N(pe), { unregisterPage: q } = Z(i.pageId);
-    return ae(() => q()), (t, v) => (n(), oe(le, {
-      name: s(h),
-      mode: "out-in",
-      onAfterLeave: J,
-      onLeave: K
-    }, {
-      default: B(() => [
-        s(P) && _.value ? (n(), u("div", fe, [
-          s(g)("header") ? (n(), u("div", {
-            key: 0,
-            class: C(["b-dialog-page__header", D.value])
-          }, [
-            z.value ? (n(), u("div", {
-              key: 0,
-              class: "b-dialog-page__back-button",
-              style: se(e.backButtonStyling),
-              "data-testid": "back-button"
-            }, [
-              $(s(ne), {
-                variant: "tertiary",
-                onClick: v[0] || (v[0] = (Pe) => M(e.previousPage))
-              }, {
-                default: B(() => [
-                  $(s(ge), {
-                    "svg-title": s(V)("goToPreviousPage")
-                  }, null, 8, ["svg-title"])
-                ]),
-                _: 1
-              })
-            ], 4)) : c("", !0),
-            S(t.$slots, "header", {}, void 0, !0)
-          ], 2)) : c("", !0),
-          s(g)("content") ? (n(), u("div", {
-            key: 1,
-            ref_key: "contentElement",
-            ref: a,
-            class: "b-dialog-page__content",
-            onScroll: j
-          }, [
-            S(t.$slots, "content", {}, void 0, !0)
-          ], 544)) : c("", !0),
-          s(g)("footer") ? (n(), u("div", {
-            key: 2,
-            class: C(["b-dialog-page__footer", H.value])
-          }, [
-            S(t.$slots, "footer", {}, void 0, !0)
-          ], 2)) : c("", !0)
-        ])) : c("", !0)
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-}), Te = /* @__PURE__ */ R(he, [["__scopeId", "data-v-3d5f9da9"]]);
-export {
-  ge as A,
-  b as B,
-  Te as D,
-  pe as a,
-  me as b
-};
-//# sourceMappingURL=dialog-page.MLFdqTcL.js.map

package/dist/chunks/dialog-page.MLFdqTcL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-page.MLFdqTcL.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-left.vue","../../../vue2/src/components/internal/dialog-page/dialog-page.types.ts","../../../vue2/src/components/internal/dialog-page/dialog-page.keys.ts","../../../vue2/src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["\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=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></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","import { Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<string[]>;\n    previousPages: Ref<string[]>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div v-if=\"hasSlot('content')\" ref=\"contentElement\" class=\"b-dialog-page__content\" @scroll=\"onScroll\">\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Fires when the animation ends\n         */\n        (e: 'animationend'): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtTop.value),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtBottom.value),\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","showPage","computed","activePage","headerConditionalClasses","footerConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onUnmounted"],"mappings":"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"}

package/dist/chunks/error-message.CPw3y44N.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-message.CPw3y44N.js","sources":["../../../vue2/src/components/internal/field-label/field-label.vue","../../../vue2/src/components/internal/error-message/error-message.vue"],"sourcesContent":["<template>\n    <label class=\"b-field-label\" :class=\"conditionalClasses\">\n        <bento-typography el=\"span\" stronger>\n            <template v-if=\"label\"> {{ label }}</template>\n            <template v-else><slot></slot></template>\n        </bento-typography>\n        <bento-typography v-if=\"!!tooltipText\" el=\"span\" class=\"b-field-label__tooltip-wrapper\">\n            <bento-info-icon :tooltip-text=\"tooltipText\" class=\"b-field-label__tooltip\" />\n        </bento-typography>\n        <bento-typography v-if=\"required\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('required') }})</bento-typography\n        >\n        <bento-typography v-else-if=\"optional\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('optional') }})</bento-typography\n        >\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Field label\n         */\n        label: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Sets the field as optional\n         */\n        optional: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Sets the field as required\n         */\n        required: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({ 'b-field-label--condensed': props.condensed }));\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the labels for all field components\n\n    * @example\n    * import { FieldLabel } from '@/components/internal/field-label';\n    *\n    * export default {\n    *     components: { FieldLabel },\n    *     template: `\n    *          <field-label label=\"Label\" tooltip-text=\"Tooltip info\" required />\n    *     `\n    * }\n    */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/internal/field-label/field-label.scss\" />\n","<template>\n    <bento-typography :id=\"$attrs.id\" class=\"b-error-message\" el=\"span\" aria-live=\"polite\">\n        <div class=\"b-error-message__icon\">\n            <cross-circle-icon :svg-title=\"t('error')\" />\n        </div>\n        {{ errorMessage }}\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import CrossCircleIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An error message component should be used whenever it is necessary to add an error message to a component.\n     * If adding to a form component, the proper accessibility measures should be taken when necessary\n     * (ex. associating an element with this one using aria-describedby).\n\n    * @example\n    * import { ErrorMessage } from '@/components/internal/error-message';\n    *\n    * export default {\n    *     components: { ErrorMessage },\n    *     template: `\n    *          <error-message :error-message=\"errorMessage\" />\n    *     `\n    * }\n    */\n\n    defineProps({\n        /**\n         * The rendered error message\n         */\n        errorMessage: {\n            type: String,\n            required: true,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'error-message',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/internal/error-message/error-message.scss\" />\n"],"names":["__default__$1","messages$1","props","__props","t","useI18n","conditionalClasses","computed","__default__","messages"],"mappings":";;;;;;;;;;;;;;;;;;;;GAmFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxDA,UAAAC,IAAAC,GAmCA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAA,OAAA,EAAA,4BAAAL,EAAA,UAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CCnBAM,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;AAPA,UAAA,EAAA,GAAAL,EAAA,IAAAC,EAAA,EAAA,UAAAI,EAAA,CAAA;;;;;;;;;;;;;;;;;;;"}