@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/accordion-item.D0WVCLec.js

@@ -0,0 +1,145 @@
+import { defineComponent as m, provide as b, toRef as h, ref as d, inject as E, computed as g, watch as l } from "vue";
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as y } from "./typography.C8lPlsbD.js";
+import { C as T } from "./chevron-down.eYtgv5ly.js";
+import { C as N } from "./chevron-up.d8cwIlA_.js";
+import { g as _ } from "./generate-uid.NJ8tVoha.js";
+import { o as O } from "./resize.Bqks3WUm.js";
+import { u as S } from "./index.B6WW_F-J.js";
+import { u as z } from "./use-expandable-content-height.GkjjbmPy.js";
+import "../assets/accordion-item.css";
+const f = /* @__PURE__ */ Symbol("accordion title size injection key"), R = {}, A = /* @__PURE__ */ m({
+  ...R,
+  __name: "accordion",
+  props: {
+    /**
+     * Controls accordion title size.
+     * @values default, small
+     */
+    titleSize: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(s) {
+    const t = s;
+    return b(f, h(t, "titleSize")), { __sfc: !0, props: t };
+  }
+});
+var B = function() {
+  var t = this, n = t._self._c;
+  return t._self._setupProxy, n("div", { staticClass: "b-accordion" }, [t._t("default")], 2);
+}, D = [], $ = /* @__PURE__ */ u(
+  A,
+  B,
+  D,
+  !1,
+  null,
+  "cbce6553"
+);
+const Z = $.exports, H = {
+  "de-DE": {
+    collapse: "Ausblenden",
+    expand: "Anzeigen"
+  },
+  "en-GB": {
+    collapse: "Collapse",
+    expand: "Expand"
+  },
+  "en-US": {
+    collapse: "Collapse",
+    expand: "Expand"
+  },
+  "es-ES": {
+    collapse: "Contraer",
+    expand: "Ampliar"
+  },
+  "es-MX": {
+    collapse: "Colapsar",
+    expand: "Ampliar"
+  },
+  "fr-FR": {
+    collapse: "Réduire",
+    expand: "Développer"
+  },
+  "it-IT": {
+    collapse: "Comprimi",
+    expand: "Espandi"
+  },
+  "ja-JP": {
+    collapse: "折りたたむ",
+    expand: "展開"
+  },
+  "pt-BR": {
+    collapse: "Recolher",
+    expand: "Expandir"
+  },
+  "zh-CN": {
+    collapse: "折叠",
+    expand: "展开"
+  }
+}, M = {
+  i18n: { messages: H }
+}, U = /* @__PURE__ */ m({
+  ...M,
+  __name: "accordion-item",
+  props: {
+    /**
+     * Sets the title of the accordion item.
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Controls if the content is visible or hidden.
+     */
+    isExpanded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:is-expanded"],
+  setup(s, { emit: t }) {
+    const n = s, e = "b-accordion-item__animation--content", { t: p } = S(), o = d(null), i = d(n.isExpanded), v = _("accordionItemButton"), x = _("accordionItemContent"), C = E(f, "default"), { updateContentHeight: r, contentHeight: c } = z(o, i), I = g(() => c.value ? { "max-height": c.value } : {});
+    return l(
+      () => n.isExpanded,
+      (a) => {
+        i.value = a;
+      }
+    ), l(
+      () => o.value,
+      () => {
+        let a = null;
+        !a && o.value && (a = O(o.value, () => {
+          o.value && r();
+        }));
+      }
+    ), l(
+      i,
+      (a) => {
+        t("update:is-expanded", a), r();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, CONTENT_TRANSITION_NAME: e, props: n, emit: t, t: p, contentDiv: o, isOpen: i, buttonId: v, contentId: x, titleSize: C, updateContentHeight: r, contentHeight: c, contentMaxHeight: I, BentoTypography: y, ChevronDownIcon: T, ChevronUpIcon: N };
+  }
+});
+var j = function() {
+  var t = this, n = t._self._c, e = t._self._setupProxy;
+  return n("div", { staticClass: "b-accordion-item" }, [n(e.BentoTypography, { attrs: { el: "h3", variant: e.titleSize === "small" ? "body" : "title", strongest: e.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: e.buttonId, "aria-controls": e.contentId, "aria-expanded": `${e.isOpen}`, type: "button" }, on: { click: function(p) {
+    e.isOpen = !e.isOpen;
+  } } }, [e.isOpen ? n(e.ChevronUpIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": e.t("collapse"), "aria-hidden": "true" } }) : n(e.ChevronDownIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": e.t("expand"), "aria-hidden": "true" } }), t._v(" " + t._s(t.title) + " ")], 1)]), n("Transition", { attrs: { name: e.CONTENT_TRANSITION_NAME } }, [e.isOpen ? n("div", { style: e.contentMaxHeight, attrs: { id: e.contentId, "aria-labelledby": e.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [t._t("default")], 2)]) : t._e()])], 1);
+}, w = [], F = /* @__PURE__ */ u(
+  U,
+  j,
+  w,
+  !1,
+  null,
+  "66c09812"
+);
+const Q = F.exports;
+export {
+  Z as a,
+  Q as b
+};
+//# sourceMappingURL=accordion-item.D0WVCLec.js.map

package/dist/chunks/{accordion-item.BZDSJamR.js.map → accordion-item.D0WVCLec.js.map}

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.BZDSJamR.js","sources":["../../src/components/accordion/accordion.keys.ts","../../src/components/accordion/accordion.vue","../../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"update:is-expanded\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","messages","CONTENT_TRANSITION_NAME","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,GCqDHC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;;;GCgIAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;iBAlGAC,IAAA,wCAqBA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAP,EAAA,UAAA,GAGAS,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAjB,GAAA,SAAA,GAGA,EAAA,qBAAAkB,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACgB,CAAAoB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion-item.D0WVCLec.js","sources":["../../src/components/accordion/accordion.keys.ts","../../src/components/accordion/accordion.vue","../../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"update:is-expanded\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","messages","CONTENT_TRANSITION_NAME","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,GCqDHC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgIAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;iBAlGAC,IAAA,wCAqBA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAP,EAAA,UAAA,GAGAS,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAjB,GAAA,SAAA,GAGA,EAAA,qBAAAkB,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACgB,CAAAoB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}

package/dist/chunks/action-bar.Dj830k6L.js

@@ -0,0 +1,334 @@
+import { defineComponent as D, computed as s, ref as c, toRefs as G, watch as w, provide as j, nextTick as b } from "vue";
+import { B as J } from "./button.C9b2AC9w.js";
+import { B as K } from "./typography.C8lPlsbD.js";
+import { B as q } from "./loading-indicator.PxbRzshH.js";
+import { B as Q } from "./button-actions-with-menu.OsPQ-POD.js";
+import { C as X } from "./cross.CC_B-vG-.js";
+import { C as Y } from "./checkmark-circle-fill.BttTCjrM.js";
+import { C as Z } from "./cross-circle-fill.DTDtgLMf.js";
+import { u as H } from "./index.B6WW_F-J.js";
+import { u as ee } from "./index.CwzYJHw2.js";
+import { P as ne, B as te } from "./button-actions.Bdbu0bvt.js";
+import { n as ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/action-bar.css";
+const se = {
+  "de-DE": {
+    actionBar: "Aktionsleiste",
+    applying: "Anwenden...",
+    cancel: "Abbrechen",
+    close: "Schließen",
+    retry: "Wiederholen",
+    save: "Speichern",
+    selected: "ausgewählt",
+    somethingWentWrong: "Etwas ist schief gelaufen",
+    success: "Erfolg!",
+    undo: "Rückgängig machen",
+    unsavedChanges: "Ungespeicherte Änderungen | ungespeicherte Änderung | ungespeicherte Änderungen"
+  },
+  "en-GB": {
+    actionBar: "Action bar",
+    applying: "Applying...",
+    cancel: "Cancel",
+    close: "Close",
+    retry: "Retry",
+    save: "Save",
+    selected: "selected",
+    somethingWentWrong: "Something went wrong",
+    success: "Success!",
+    undo: "Undo",
+    unsavedChanges: "Unsaved changes | unsaved change | unsaved changes"
+  },
+  "en-US": {
+    actionBar: "Action bar",
+    applying: "Applying...",
+    cancel: "Cancel",
+    close: "Close",
+    retry: "Retry",
+    save: "Save",
+    selected: "selected",
+    somethingWentWrong: "Something went wrong",
+    success: "Success!",
+    undo: "Undo",
+    unsavedChanges: "Unsaved changes | unsaved change | unsaved changes"
+  },
+  "es-ES": {
+    actionBar: "Barra de acción",
+    applying: "Aplicando...",
+    cancel: "Cancelar",
+    close: "Cerrar",
+    retry: "Reintentar",
+    save: "Guardar",
+    selected: "seleccionado",
+    somethingWentWrong: "Algo salió mal",
+    success: "¡Éxito!",
+    undo: "Deshacer",
+    unsavedChanges: "Cambios no guardados | cambio no guardado | cambios no guardados"
+  },
+  "es-MX": {
+    actionBar: "Barra de acción",
+    applying: "Aplicando...",
+    cancel: "Cancelar",
+    close: "Cerrar",
+    retry: "Reintentar",
+    save: "Guardar",
+    selected: "seleccionado",
+    somethingWentWrong: "Algo salió mal",
+    success: "¡Éxito!",
+    undo: "Deshacer",
+    unsavedChanges: "Cambios no guardados | cambio no guardado | cambios no guardados"
+  },
+  "fr-FR": {
+    actionBar: "Barre d'action",
+    applying: "Application…",
+    cancel: "Annuler",
+    close: "Fermer",
+    retry: "Réessayer",
+    save: "Enregistrer",
+    selected: "sélectionné(s)",
+    somethingWentWrong: "Une erreur s'est produite",
+    success: "Succès !",
+    undo: "Annuler",
+    unsavedChanges: "Modifications non enregistrées | modification non enregistrée | modifications non enregistrées"
+  },
+  "it-IT": {
+    actionBar: "Barra delle azioni",
+    applying: "Applicazione in corso..",
+    cancel: "Annulla",
+    close: "Chiudi",
+    retry: "Riprova",
+    save: "Salva",
+    selected: "selezionati",
+    somethingWentWrong: "Qualcosa è andato storto",
+    success: "Successo!",
+    undo: "Annulla",
+    unsavedChanges: "Modifiche non salvate | modifica non salvata | modifiche non salvate"
+  },
+  "ja-JP": {
+    actionBar: "アクションバー",
+    applying: "適用中...",
+    cancel: "キャンセル",
+    close: "閉じる",
+    retry: "再試行",
+    save: "保存",
+    selected: "選択済み",
+    somethingWentWrong: "問題が発生しました",
+    success: "成功！",
+    undo: "元に戻す",
+    unsavedChanges: "保存されていない変更 | 保存されていない変更 | 保存されていない変更"
+  },
+  "pt-BR": {
+    actionBar: "Barra de ação",
+    applying: "Aplicando...",
+    cancel: "Cancelar",
+    close: "Fechar",
+    retry: "Tentar de novo",
+    save: "Salvar",
+    selected: "selecionado",
+    somethingWentWrong: "Algo deu errado",
+    success: "Sucesso!",
+    undo: "Desfazer",
+    unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas"
+  },
+  "zh-CN": {
+    actionBar: "操作栏",
+    applying: "申请...",
+    cancel: "取消",
+    close: "关闭",
+    retry: "重试",
+    save: "保存",
+    selected: "已选",
+    somethingWentWrong: "出了点问题",
+    success: "成功！",
+    undo: "撤销",
+    unsavedChanges: "未保存的更改 | 未保存的更改 | 未保存的更改"
+  }
+}, oe = {
+  i18n: { messages: se }
+}, ie = /* @__PURE__ */ D({
+  ...oe,
+  __name: "action-bar",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (l) => l > 0 && l <= 4
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected.
+     * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed.
+     */
+    itemCounter: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * State of the action bar.
+     * @values start, loading, success, fail
+     */
+    state: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * Displays the undo action button in `success` state.
+     */
+    showUndoAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays the retry action button in `fail` state.
+     */
+    showRetryAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["close", "cancel", "save", "undo-action", "retry-action", "cancel-action"],
+  setup(l, { emit: n }) {
+    const t = l, e = 100, r = 7, B = 500, f = 32, { t: i, tc: E, n: I } = H(), k = s(() => t.selectionLabel ? t.selectionLabel : i("selected")), x = s(() => {
+      switch (t.state) {
+        case "loading":
+          return i("applying");
+        case "success":
+          return i("success");
+        case "fail":
+          return i("somethingWentWrong");
+        default:
+          return "";
+      }
+    }), m = c(null), u = c(null), h = c(null), g = c(!1), R = s(
+      () => t.state === "loading" ? "out-in" : void 0
+    ), T = s(
+      () => t.state === "loading" || t.state === "success" && !t.showUndoAction
+    ), F = (a) => {
+      t.state === "loading" && (u.value = `${a.offsetWidth}px`, h.value = "100%");
+    }, U = (a) => {
+      if (t.state !== "loading")
+        return;
+      Object.assign(a.style, { width: "auto", maxWidth: "none" });
+      const v = a.offsetWidth;
+      Object.assign(a.style, { width: "100%", maxWidth: u.value }), requestAnimationFrame(() => {
+        u.value = `${v}px`;
+      });
+    }, L = () => {
+      u.value = null, h.value = null, t.state === "fail" && (g.value = !0);
+    }, N = (a) => {
+      a.animationName.startsWith("shake-") && (g.value = !1);
+    }, { extraBottomSpacing: A, visibleActions: W } = G(t), { width: d } = ee(), o = c(null), p = c(null), S = s(() => t.variant === "confirmation");
+    w(
+      () => W.value,
+      (a) => {
+        p.value = a <= 4 ? a : 4, o.value = p.value;
+      },
+      { immediate: !0 }
+    );
+    const M = s(() => ({
+      "b-action-bar--extra-spacing": A.value,
+      "b-action-bar--confirmation": S.value,
+      "b-action-bar__state-animation--shake": g.value
+    })), O = s(() => ({
+      [`b-action-bar__container--${t.state}`]: t.state !== "start"
+    }));
+    j(ne, r);
+    const V = s(() => {
+      const a = t.actions.map((z) => ({
+        ...z,
+        variant: "secondary"
+      })), v = a.slice(0, o.value).reverse(), y = a.slice(o.value);
+      return [...v, ...y];
+    }), P = s(() => [
+      {
+        title: i("save"),
+        event: () => n("save")
+      },
+      {
+        title: i("cancel"),
+        variant: "secondary",
+        event: () => n("cancel")
+      }
+    ]), $ = s(() => t.itemCounter == null || t.itemCounter < 1), _ = async () => {
+      await b(), d.value > m.value.clientWidth + f + e && o.value < p.value && (o.value += 1, _());
+    }, C = async () => {
+      await b(), d.value < m.value.clientWidth + f && o.value > 0 && (o.value -= 1, C());
+    };
+    return w(
+      () => d.value,
+      async (a, v) => {
+        if (await b(), !m.value)
+          return;
+        const y = a > v;
+        d.value < B ? o.value = 0 : y ? _() : C();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: B, SPACING: f, props: t, emit: n, t: i, tc: E, n: I, label: k, defaultStateLabel: x, actionBar: m, containerMaxWidth: u, containerWidth: h, isShaking: g, stateTransitionMode: R, hideStateActions: T, onBeforeLeave: F, onEnter: U, onAfterEnter: L, onAnimationEnd: N, extraBottomSpacing: A, visibleActions: W, width: d, internalDisplayedActions: o, internalVisibleActions: p, isConfirmationVariant: S, conditionalClasses: M, containerClasses: O, actionsInternal: V, confirmationActions: P, noItemCounter: $, showActions: _, hideActions: C, BentoButton: J, BentoButtonActions: te, BentoTypography: K, BentoLoadingIndicator: q, ButtonActionsWithMenu: Q, CrossIcon: X, CheckmarkCircleFill: Y, CrossCircleFill: Z };
+  }
+});
+var re = function() {
+  var n = this, t = n._self._c, e = n._self._setupProxy;
+  return t("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [t("section", { staticClass: "b-action-bar", class: e.conditionalClasses, attrs: { "aria-label": e.t("actionBar") }, on: { animationend: e.onAnimationEnd } }, [t("Transition", { attrs: { name: `b-action-bar__state-animation--${n.state}`, mode: e.stateTransitionMode }, on: { "before-leave": e.onBeforeLeave, enter: e.onEnter, "after-enter": e.onAfterEnter } }, [t("div", { key: n.state, ref: "actionBar", staticClass: "b-action-bar__container", class: e.containerClasses, style: { width: e.containerWidth, maxWidth: e.containerMaxWidth } }, [n.state === "start" ? t("div", { staticClass: "b-action-bar__container-inner" }, [e.isConfirmationVariant ? n._e() : t("div", { staticClass: "b-action-bar__close-button" }, [t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": e.t("close") }, on: { click: function(r) {
+    return e.emit("close");
+  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [t(e.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1), t(e.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e.isConfirmationVariant && e.noItemCounter ? [n._v(" " + n._s(e.tc("unsavedChanges", 0)) + " ")] : [n._v(" " + n._s(e.n(n.itemCounter)) + " " + n._s(e.isConfirmationVariant ? e.tc("unsavedChanges", n.itemCounter) : e.label) + " ")]], 2), e.isConfirmationVariant ? t(e.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: e.confirmationActions, inverse: "" } }) : t(e.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: e.actionsInternal, "displayed-actions": e.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1) : t("div", { staticClass: "b-action-bar__container-inner" }, [t("div", { staticClass: "b-action-bar__state-icon" }, [n.state === "loading" ? t(e.BentoLoadingIndicator, { attrs: { small: "", inverse: "" } }) : n._e(), n.state === "success" ? t(e.CheckmarkCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e(), n.state === "fail" ? t(e.CrossCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e()], 1), t(e.BentoTypography, { attrs: { stronger: "" } }, [n._t("stateLabel", function() {
+    return [n._v(n._s(e.defaultStateLabel))];
+  })], 2), e.hideStateActions ? n._e() : t("div", { staticClass: "b-action-bar__state-actions" }, [n.state === "success" && n.showUndoAction ? t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(r) {
+    return e.emit("undo-action");
+  } } }, [n._v(n._s(e.t("undo")))]) : n._e(), n.state === "fail" && n.showRetryAction ? t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(r) {
+    return e.emit("retry-action");
+  } } }, [n._v(n._s(e.t("retry")))]) : n._e(), n.state === "fail" ? t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(r) {
+    return e.emit("cancel-action");
+  } } }, [n._v(n._s(e.t("cancel")))]) : n._e()], 1)], 1)])])], 1)]);
+}, ce = [], le = /* @__PURE__ */ ae(
+  ie,
+  re,
+  ce,
+  !1,
+  null,
+  "b91c5356"
+);
+const Be = le.exports;
+export {
+  Be as B
+};
+//# sourceMappingURL=action-bar.Dj830k6L.js.map

package/dist/chunks/{action-bar.CYGUYI0V.js.map → action-bar.Dj830k6L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.CYGUYI0V.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}
+{"version":3,"file":"action-bar.Dj830k6L.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/{ai-button.CR_ePQRR.js → ai-button.7L9bANlk.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, useSlots as c, computed as u, onMounted as d } from "vue";
-import { B as p } from "./button.DxhJNOtr.js";
+import { B as p } from "./button.C9b2AC9w.js";
 import { A as f } from "./artificial-intelligence-ai-filled.C6TMsiHK.js";
 import { u as _ } from "./use-has-slot.C9lQZ6nz.js";
 import { p as m } from "./typography.C8lPlsbD.js";
@@ -47,4 +47,4 @@ const F = k.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-button.CR_ePQRR.js.map
+//# sourceMappingURL=ai-button.7L9bANlk.js.map