@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/avatar.BgwjpLQO.js

@@ -0,0 +1,71 @@
+import { ref as b, computed as n, defineComponent as _, toRefs as m } from "vue";
+import { B as p } from "./typography.J1v_SPG3.js";
+import "./index.Cl4_42j5.js";
+import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/avatar.css";
+const d = (t) => {
+  const a = b(t);
+  return n(() => a.value ? a.value.trim().charAt(0).toUpperCase() : null);
+};
+var o = /* @__PURE__ */ ((t) => (t.LARGE = "large", t.SMALL = "small", t))(o || {}), s = /* @__PURE__ */ ((t) => (t.BLUE = "blue", t.GREEN = "green", t.RED = "red", t.YELLOW = "yellow", t))(s || {});
+const L = {}, y = /* @__PURE__ */ _({
+  ...L,
+  __name: "avatar-image",
+  props: {
+    color: { default: s.YELLOW },
+    src: { default: null },
+    username: { default: null },
+    variant: { default: o.LARGE }
+  },
+  setup(t) {
+    const a = t, { username: r } = m(a), e = d(r), c = n(() => ({
+      [`b-avatar-image--${o.SMALL}`]: a.variant === o.SMALL,
+      [`b-avatar-image--${a.color}`]: a.color
+    }));
+    return { __sfc: !0, props: a, username: r, initials: e, conditionalClasses: c, BentoTypography: p };
+  }
+});
+var g = function() {
+  var a = this, r = a._self._c, e = a._self._setupProxy;
+  return r("div", { staticClass: "b-avatar-image", class: e.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "avatar" } }, [a.src ? r("img", { staticClass: "b-avatar-image__image", attrs: { src: a.src, alt: "", "data-testid": "avatar-content" } }) : r("div", { staticClass: "b-avatar-image__default", attrs: { "data-testid": "avatar-content" } }, [r(e.BentoTypography, { attrs: { el: "span", variant: "body", strongest: "" } }, [a._v(" " + a._s(e.initials) + " ")])], 1)]);
+}, C = [], E = /* @__PURE__ */ v(
+  y,
+  g,
+  C,
+  !1,
+  null,
+  "7cac2ac2"
+);
+const h = E.exports, A = {
+  name: "bento-avatar"
+}, O = /* @__PURE__ */ _({
+  ...A,
+  props: {
+    iconOnly: { type: Boolean, default: !1 },
+    src: { default: null },
+    username: null
+  },
+  setup(t) {
+    const a = t, { username: r } = m(a), e = n(() => a.iconOnly ? a.username : null), c = n(() => a.src ? null : a.username), u = d(r), l = n(() => u.value ? u.value.charCodeAt(0) - 65 : null), f = n(() => {
+      const i = 26 / Object.keys(s).length;
+      return l.value <= i ? s.YELLOW : l.value <= i * 2 ? s.BLUE : l.value <= i * 3 ? s.GREEN : s.RED;
+    });
+    return { __sfc: !0, props: a, username: r, computedAriaLabel: e, computedUsername: c, initials: u, charCode: l, avatarColor: f, AvatarImage: h, BentoAvatarImageVariant: o, BentoTypography: p };
+  }
+});
+var R = function() {
+  var a = this, r = a._self._c, e = a._self._setupProxy;
+  return r("div", { staticClass: "b-avatar", attrs: { "aria-label": e.computedAriaLabel } }, [r(e.AvatarImage, { attrs: { src: a.src, username: e.computedUsername, variant: e.BentoAvatarImageVariant.SMALL, color: e.avatarColor } }), a.iconOnly ? a._e() : r(e.BentoTypography, { staticClass: "b-avatar__label", attrs: { el: "span", variant: "body" } }, [a._v(" " + a._s(e.username) + " ")])], 1);
+}, $ = [], B = /* @__PURE__ */ v(
+  O,
+  R,
+  $,
+  !1,
+  null,
+  "2be0bf91"
+);
+const W = B.exports;
+export {
+  W as B
+};
+//# sourceMappingURL=avatar.BgwjpLQO.js.map

package/dist/chunks/avatar.BgwjpLQO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.BgwjpLQO.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/base-button.-gx_u8Bd.js

@@ -0,0 +1,86 @@
+import { defineComponent as b, computed as r, ref as d } from "vue";
+import { B as f } from "./typography.J1v_SPG3.js";
+import { u as p } from "./use-has-slot.C9lQZ6nz.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/base-button.css";
+var s = /* @__PURE__ */ ((o) => (o.DESTRUCTIVE = "critical", o.ICON_ONLY = "icon-only", o))(s || {}), e = /* @__PURE__ */ ((o) => (o.BLUR = "blur", o.CLICK = "click", o.FOCUS = "focus", o.KEYDOWN_ESC = "keydown.esc", o))(e || {});
+const C = b({
+  name: "base-button",
+  components: { BentoTypography: f },
+  props: {
+    /**
+     * Disables button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
+    type: {
+      type: String,
+      default: "button"
+    }
+  },
+  emits: [
+    e.CLICK,
+    e.FOCUS,
+    e.BLUR,
+    e.KEYDOWN_ESC
+  ],
+  setup(o, { slots: t, emit: n, attrs: i }) {
+    const l = r(() => {
+      var a;
+      return {
+        "aria-expanded": (a = i["aria-expanded"]) == null ? void 0 : a.toString()
+      };
+    }), c = d(null), u = r(() => ({
+      [`b-base-button--${s.DESTRUCTIVE}`]: o.critical,
+      [`b-base-button--${s.ICON_ONLY}`]: !t.default
+    }));
+    return {
+      // Values
+      ariaAttributes: l,
+      conditionalClasses: u,
+      // Methods
+      onClickButton: (a) => {
+        o.disabled ? (a.preventDefault(), a.stopPropagation()) : n(e.CLICK, a);
+      },
+      onFocusButton: (a) => {
+        n(e.FOCUS, a);
+      },
+      onBlurButton: (a) => {
+        n(e.BLUR, a);
+      },
+      hasSlot: p(t),
+      // Refs
+      bentoBaseButtonRef: c
+    };
+  }
+});
+var m = function() {
+  var t = this, n = t._self._c;
+  return t._self._setupProxy, n("button", { ref: "bentoBaseButtonRef", staticClass: "b-base-button", class: t.conditionalClasses, attrs: { disabled: t.disabled, type: t.type, "aria-expanded": t.ariaAttributes["aria-expanded"] }, on: { click: t.onClickButton, focus: t.onFocusButton, blur: t.onBlurButton } }, [t.hasSlot("iconLeft") ? n("span", { staticClass: "b-base-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [t._t("iconLeft")], 2) : t._e(), t.hasSlot("default") ? n("bento-typography", { staticClass: "b-base-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("iconRight") ? n("span", { staticClass: "b-base-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [t._t("iconRight")], 2) : t._e()], 1);
+}, y = [], B = /* @__PURE__ */ _(
+  C,
+  m,
+  y,
+  !1,
+  null,
+  "9d38f201"
+);
+const x = B.exports;
+export {
+  x as B,
+  e as a
+};
+//# sourceMappingURL=base-button.-gx_u8Bd.js.map

package/dist/chunks/base-button.-gx_u8Bd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.-gx_u8Bd.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/base-modal.keys.C2PQXcE2.js

@@ -0,0 +1,5 @@
+const o = Symbol("modal injection key");
+export {
+  o as M
+};
+//# sourceMappingURL=base-modal.keys.C2PQXcE2.js.map

package/dist/chunks/base-modal.keys.C2PQXcE2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-modal.keys.C2PQXcE2.js","sources":["../../src/components/modal/components/base-modal/base-modal.keys.ts"],"sourcesContent":["export const MODAL_DIALOG_ID_INJECTION_KEY = Symbol('modal injection key');\n"],"names":["MODAL_DIALOG_ID_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAAgC,OAAO,qBAAqB;"}

package/dist/chunks/base-modal.xA_DhHx9.js

@@ -0,0 +1,373 @@
+import { defineComponent as T, useSlots as Y, ref as u, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, toRefs as tt, onMounted as et, provide as D } from "vue";
+import { B as at } from "./button.BuD-IsW5.js";
+import { B as ot } from "./focus-trap.C-wIQqpO.js";
+import { u as q } from "./use-has-slot.C9lQZ6nz.js";
+import { u as nt } from "./i18n.BQkEbtPM.js";
+import { M as st } from "./base-modal.keys.C2PQXcE2.js";
+import { g as lt } from "./generate-uid.NJ8tVoha.js";
+import { B as it } from "./typography.J1v_SPG3.js";
+import { F as rt } from "./footer-actions.BgpSnSSn.js";
+import { D as ut, B as ct, b as dt, a as mt } from "./dialog-page.C5r6tM57.js";
+import { o as pt } from "./resize.Bqks3WUm.js";
+import { a as gt, G as ft } from "./grid-layout.HvTAa4to.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as _t } from "./cross.CJ5EEL2c.js";
+import { B as vt } from "./directive.Cbdox5VL.js";
+import "../assets/base-modal.css";
+var yt = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(yt || {}), Ct = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))(Ct || {}), G = /* @__PURE__ */ ((a) => (a.SMALL = "small", a.MEDIUM = "medium", a.LARGE = "large", a))(G || {}), E = /* @__PURE__ */ ((a) => (a.SMALLER = "smaller", a.EQUAL = "equal", a.BIGGER = "bigger", a))(E || {}), F = /* @__PURE__ */ ((a) => (a.DIALOG = "dialog", a.ALERT_DIALOG = "alertdialog", a))(F || {}), ht = /* @__PURE__ */ ((a) => (a.CONFIRMATION = "confirmation", a.DESTRUCTIVE = "destructive", a.INFO = "info", a.ACKNOWLEDGEMENT = "acknowledgement", a))(ht || {}), At = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(At || {});
+const Lt = {
+  "en-US": {
+    ariaLabelFallback: "modal",
+    close: "Close"
+  },
+  "ja-JP": {
+    close: "閉じる"
+  },
+  "pt-BR": {
+    close: "Fechar"
+  }
+}, j = Symbol("modal config data injection key"), bt = T({}), St = /* @__PURE__ */ T({
+  ...bt,
+  __name: "modal-page",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     * But you may change the color of 1-st action to red with 'critial' key
+     * Not more than 3 action buttons can be provided
+     * Or 2 action buttons and 1 Label for them
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: { type: String, default: null },
+    /**
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     */
+    columnsSize: {
+      type: String,
+      default: E.SMALLER
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: { type: String, default: null },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: { type: Boolean, default: !1 },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: { type: Boolean, default: !1 },
+    /**
+     * Identifier of the page, used with activePage prop to handle modal navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * 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
+    }
+  },
+  setup(a) {
+    const e = a, o = 26, t = Y(), n = q(t), c = u(null), O = l(() => ({
+      "b-modal-page--custom-padding": e.customPadding
+    })), I = l(() => {
+      var r;
+      return {
+        "b-modal-page__content--with-header": n("default"),
+        "b-modal-page__content--with-actions": n("actions") || ((r = e.actions) == null ? void 0 : r.length)
+      };
+    }), R = l(() => {
+      if (!e.customPadding)
+        return {};
+      const r = {
+        paddingLeft: e.customPadding,
+        paddingRight: e.customPadding
+      }, i = { ...r, paddingTop: void 0, paddingBottom: void 0 };
+      return n("default") || (i.paddingTop = e.customPadding), n("actions") || (i.paddingBottom = e.customPadding), {
+        header: {
+          ...r,
+          paddingTop: e.customPadding,
+          paddingRight: `${parseInt(e.customPadding, 10) + o}px`,
+          flex: 1
+        },
+        content: i,
+        actions: { ...r, paddingBottom: e.customPadding },
+        backButton: { top: e.customPadding, paddingLeft: e.customPadding }
+      };
+    }), d = l(() => e.withColumnLayout && L.value === G.LARGE), g = l(() => e.columnsSize === E.SMALLER ? [
+      { small: 4, medium: 4, large: 4 },
+      { small: 8, medium: 8, large: 8 }
+    ] : e.columnsSize === E.BIGGER ? [
+      { small: 8, medium: 8, large: 8 },
+      { small: 4, medium: 4, large: 4 }
+    ] : [
+      { small: 6, medium: 6, large: 6 },
+      { small: 6, medium: 6, large: 6 }
+    ]), { activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L } = Q(j), h = l(() => f.value === e.pageId || !f.value);
+    let p = null;
+    return w(
+      () => f.value,
+      async (r, i) => {
+        var A, k;
+        h.value && (await X(), _.value = `${(k = (A = c.value) == null ? void 0 : A.$el) == null ? void 0 : k.clientHeight}px`, B.value = e.customPadding, m.value = i !== void 0, p = pt(c.value, () => {
+          var v, S;
+          const b = `${(S = (v = c.value) == null ? void 0 : v.$el) == null ? void 0 : S.clientHeight}px`;
+          b && b !== _.value && (_.value = b);
+        }));
+      },
+      { immediate: !0 }
+    ), Z(() => {
+      p == null || p.disconnect();
+    }), { __sfc: !0, CLOSE_BUTTON_ICON_WIDTH: o, slots: t, hasSlot: n, page: c, props: e, modalPageConditionalClasses: O, modalContentConditionalClasses: I, customPaddingStyles: R, hasColumnLayout: d, computedColumnWidth: g, activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L, isCurrentPage: h, pageElementObserver: p, BentoTypography: it, GridLayout: ft, GridLayoutContainerType: gt, FooterActions: rt, DialogPage: ut };
+  }
+});
+var Pt = function() {
+  var n;
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.DialogPage, { ref: "page", staticClass: "b-modal-page", class: t.modalPageConditionalClasses, attrs: { "page-id": e.pageId, "always-show-border": t.hasColumnLayout, "back-button-styling": (n = t.customPaddingStyles) == null ? void 0 : n.backButton, "previous-page": e.previousPage }, on: { animationend: function(c) {
+    t.isAnimationActive = !1;
+  } }, scopedSlots: e._u([t.hasSlot("default") || t.showCloseButton ? { key: "header", fn: function() {
+    return [o("div", { staticClass: "b-modal-page__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-page__header" }, [o(t.BentoTypography, { staticClass: "b-modal-page__title", attrs: { el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)], 1)])];
+  }, proxy: !0 } : null, { key: "content", fn: function() {
+    return [o("div", { staticClass: "b-modal-page__content", class: t.modalContentConditionalClasses, style: t.customPaddingStyles.content }, [t.hasSlot("content") || t.hasSlot("content-col-1") && t.hasSlot("content-col-2") ? o(t.BentoTypography, { attrs: { el: "div" } }, [t.hasColumnLayout ? o(t.GridLayout, { staticClass: "b-modal-page__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: e._u([{ key: "col-1", fn: function() {
+      return [e._t("content-col-1")];
+    }, proxy: !0 }, { key: "col-2", fn: function() {
+      return [e._t("content-col-2")];
+    }, proxy: !0 }], null, !0) }) : e._t("content")], 2) : e._e()], 1)];
+  }, proxy: !0 }, t.hasSlot("actions") ? { key: "footer", fn: function() {
+    return [o("div", { staticClass: "b-modal-page__actions-container", style: t.customPaddingStyles.actions }, [o("div", { staticClass: "b-modal-page__actions", attrs: { "aria-label": "modal actions" } }, [e._t("actions")], 2)])];
+  }, proxy: !0 } : e.actions && e.actions.length > 0 ? { key: "footer", fn: function() {
+    return [o("div", { staticClass: "b-modal-page__actions-container", style: t.customPaddingStyles.actions }, [o(t.FooterActions, { attrs: { actions: e.actions, "actions-label": e.actionsLabel, "destructive-actions": e.destructiveActions } })], 1)];
+  }, proxy: !0 } : null], null, !0) });
+}, Et = [], Ot = /* @__PURE__ */ W(
+  St,
+  Pt,
+  Et,
+  !1,
+  null,
+  "e1c8b8a9"
+);
+const It = Ot.exports, Bt = T({
+  i18n: { messages: Lt },
+  name: "base-modal"
+}), kt = /* @__PURE__ */ T({
+  ...Bt,
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     * But you may change the color of 1-st action to red with 'critial' key
+     * Not more than 3 action buttons can be provided
+     * Or 2 action buttons and 1 Label for them
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * The id of the current active page
+     * Should be the same id as the BentoModalPage to be displayed
+     */
+    activePage: {
+      type: String,
+      default: null
+    },
+    /**
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     */
+    columnsSize: {
+      type: String,
+      default: E.SMALLER
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: { type: String, default: null },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: { type: Boolean, default: !1 },
+    /**
+     * Hides a cross icon on the right side of the title
+     */
+    hideCloseButton: { type: Boolean, required: !0 },
+    /**
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     */
+    initiallyOpen: { type: Boolean, default: !1 },
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: { type: Boolean, required: !0 },
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: { type: Boolean, required: !0 },
+    /**
+     * Defines whether the modal will be an alert modal
+     */
+    modalRole: { type: String, default: F.DIALOG },
+    /**
+     * Sets the width of the modal
+     */
+    size: {
+      type: String,
+      default: G.SMALL
+    },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: { type: Boolean, default: !1 }
+  },
+  emits: ["update:active-page", "close-modal"],
+  setup(a, { expose: e, emit: o }) {
+    const t = a, n = 500, { t: c } = nt(), O = Y(), I = V(), R = q(O), d = u(null), g = u(!1), f = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = u(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? c("ariaLabelFallback")), L = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
+      d.value.showModal();
+    }, p = () => {
+      o("close-modal");
+    }, r = () => {
+      g.value && (d.value.close(), y.value[0] && o("update:active-page", y.value[0]), y.value = [], g.value = !1, p());
+    }, i = () => {
+      d.value.open && (g.value = !0);
+    }, A = (s) => {
+      s && s.preventDefault(), !(!t.isDismissible && t.modalRole === F.DIALOG) && i();
+    }, k = () => {
+      t.isDismissible && A();
+    }, b = l(() => ({
+      [`b-modal-base__container--${t.size}`]: t.size,
+      "b-modal-base__container--hide": g.value,
+      "b-modal-base__container--column-layout": L.value,
+      "b-modal-base__container--animation": M.value
+    }));
+    w(
+      () => [t.isOpen, d.value],
+      ([s, C], [, N]) => {
+        if (!C)
+          return;
+        s ? (h(), y.value.length || y.value.push(v.value)) : !N || i();
+      }
+    ), w(
+      () => t.actions,
+      () => {
+        var s, C;
+        ((C = (s = t.actions) == null ? void 0 : s[0]) == null ? void 0 : C.state) === "success" && setTimeout(i, n);
+      },
+      { deep: !0 }
+    ), et(() => {
+      t.isOpen && d.value && h();
+    }), e({
+      internalModalActionClose: A
+    }), D(st, f);
+    const { activePage: v, isOpen: S, size: z } = tt(t), U = u(ct.TRANSITION_LEVEL_DEEPER), P = u([]), y = u([]), $ = (s) => o("update:active-page", s), H = (s) => () => {
+      var C;
+      P.value = (C = P.value) == null ? void 0 : C.filter((N) => N !== s);
+    }, J = (s) => (s && P.value.push(s), { unregisterPage: H(s) }), K = u(""), M = u(!1);
+    return D(j, {
+      activePage: v,
+      height: K,
+      isAnimationActive: M,
+      pageCustomPadding: m,
+      showCloseButton: _,
+      size: z
+    }), D(dt, {
+      activePage: v,
+      animation: U,
+      isOpen: S,
+      pages: P,
+      previousPages: y,
+      updatePage: $
+    }), D(mt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: g, modalId: f, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: L, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: b, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
+  }
+});
+var Dt = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, style: { height: t.height }, attrs: { role: e.modalRole, "aria-label": t.computedAriaLabel, open: e.initiallyOpen }, on: { animationend: t.closeModalAfterAnimation, keydown: function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.internalModalActionClose.apply(null, arguments);
+  } } }, [t.isOpen || e.initiallyOpen ? o(t.BentoFocusTrap, { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.closeModalOnClickOutside, expression: "closeModalOnClickOutside" }], attrs: { id: t.modalId } }, [t.showCloseButton ? o(t.BentoButton, { staticClass: "b-modal-base__close-button", style: t.customPaddingStyles, attrs: { variant: "tertiary", type: "button" }, on: { click: t.internalModalActionClose } }, [o(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1) : e._e(), t.props.activePage ? [e._t("default")] : o(t.BentoModalPage, { attrs: { "with-column-layout": e.withColumnLayout, size: t.size, "custom-padding": e.customPadding, "columns-size": e.columnsSize }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
+    return [e._t("default")];
+  }, proxy: !0 } : null, t.hasSlot("content-col-1") ? { key: "content-col-1", fn: function() {
+    return [e._t("content-col-1")];
+  }, proxy: !0 } : null, t.hasSlot("content-col-2") ? { key: "content-col-2", fn: function() {
+    return [e._t("content-col-2")];
+  }, proxy: !0 } : null, t.hasSlot("content") ? { key: "content", fn: function() {
+    return [e._t("content")];
+  }, proxy: !0 } : null, t.hasSlot("actions") ? { key: "actions", fn: function() {
+    return [e._t("actions")];
+  }, proxy: !0 } : null], null, !0) })], 2) : e._e()], 1)]);
+}, Gt = [], Tt = /* @__PURE__ */ W(
+  kt,
+  Dt,
+  Gt,
+  !1,
+  null,
+  "c6431721"
+);
+const Qt = Tt.exports;
+export {
+  It as B,
+  yt as a,
+  Ct as b,
+  G as c,
+  E as d,
+  F as e,
+  ht as f,
+  At as g,
+  Qt as h
+};
+//# sourceMappingURL=base-modal.xA_DhHx9.js.map