@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/fixed-scroller.DR2E_No4.js

@@ -0,0 +1,148 @@
+import { ref as c, onMounted as m, computed as u, defineComponent as B } from "vue";
+import { B as b } from "./button.C9b2AC9w.js";
+import { u as C } from "./index.B6WW_F-J.js";
+import { C as x, a as y } from "./chevron-left.BS24hEFa.js";
+import { o as L } from "./resize.Bqks3WUm.js";
+import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/fixed-scroller.css";
+const W = 1, S = 40, w = ({
+  contentRef: f,
+  containerRef: t,
+  leftButtonRef: l,
+  rightButtonRef: e
+}) => {
+  const r = c(0), o = c(0), a = c(0), n = c(0);
+  m(() => {
+    L(t.value, () => {
+      t.value && (n.value = t.value.offsetWidth, o.value = 0, r.value = 0);
+    }), L(f.value, () => {
+      var s;
+      a.value = (s = f.value) == null ? void 0 : s.scrollWidth, a.value < n.value && (o.value = 0, r.value = 0);
+    });
+  });
+  const _ = u(() => {
+    var i, v;
+    const s = (i = l.value) != null && i.scrollWidth ? l.value.scrollWidth + S : 0, R = (v = e.value) != null && v.scrollWidth ? e.value.scrollWidth + S : 0;
+    return s + R;
+  }), d = u(() => Math.ceil(a.value / n.value) ?? 0), h = u(() => {
+    const s = new Array(d.value).fill(0);
+    return s.forEach((R, i) => {
+      if (i === 0)
+        return;
+      if (i === d.value - 1) {
+        s[s.length - 1] = -(a.value - n.value + W);
+        return;
+      }
+      const v = s[i - 1];
+      s[i] = -(n.value + Math.abs(v) - _.value);
+    }), s;
+  }), p = u(() => o.value !== 0), g = u(
+    () => r.value >= -(a.value - n.value - 1)
+  );
+  return {
+    offset: r,
+    shouldShowLeftButton: p,
+    shouldShowRightButton: g,
+    // Methods
+    scrollLeft: () => {
+      o.value !== 0 && (o.value -= 1, r.value = h.value[o.value]);
+    },
+    scrollRight: () => {
+      o.value !== d.value - 1 && (o.value += 1, r.value = h.value[o.value]);
+    }
+  };
+}, z = {
+  "de-DE": {
+    scrollLeft: "Nach links scrollen",
+    scrollRight: "Nach rechts scrollen"
+  },
+  "en-GB": {
+    scrollLeft: "Scroll left",
+    scrollRight: "Scroll right"
+  },
+  "en-US": {
+    scrollLeft: "Scroll left",
+    scrollRight: "Scroll right"
+  },
+  "es-ES": {
+    scrollLeft: "Desplázate hacia la izquierda",
+    scrollRight: "Desplázate hacia la derecha"
+  },
+  "es-MX": {
+    scrollLeft: "Desplázate hacia la izquierda",
+    scrollRight: "Desplázate hacia la derecha"
+  },
+  "fr-FR": {
+    scrollLeft: "Faire défiler vers la gauche",
+    scrollRight: "Faire défiler vers la droite"
+  },
+  "it-IT": {
+    scrollLeft: "Scorri a sinistra",
+    scrollRight: "Scorri a destra"
+  },
+  "ja-JP": {
+    scrollLeft: "左にスクロール",
+    scrollRight: "右にスクロール"
+  },
+  "pt-BR": {
+    scrollLeft: "Deslizar para esquerda",
+    scrollRight: "Deslizar para direita"
+  },
+  "zh-CN": {
+    scrollLeft: "向左滚动",
+    scrollRight: "向右滚动"
+  }
+}, D = {
+  i18n: { messages: z }
+}, E = /* @__PURE__ */ B({
+  ...D,
+  __name: "fixed-scroller",
+  props: {
+    /**
+     * Applies the condensed style to the buttons
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Padding to be applied to the top of the scroller container
+     */
+    extraPaddingTop: { type: Number, default: 0 },
+    /**
+     * Padding to be applied to the top of the scroller container
+     */
+    centered: { type: Boolean, default: !1 }
+  },
+  setup(f) {
+    const t = f, { t: l } = C(), e = c(null), r = c(null), o = c(null), a = c(null), { offset: n, shouldShowLeftButton: _, shouldShowRightButton: d, scrollLeft: h, scrollRight: p } = w({
+      contentRef: e,
+      containerRef: r,
+      leftButtonRef: o,
+      rightButtonRef: a
+    }), g = u(() => ({
+      "b-fixed-scroller__button--centered": t.centered
+    }));
+    return { __sfc: !0, t: l, contentRef: e, fixedScrollerRef: r, leftButtonRef: o, rightButtonRef: a, props: t, offset: n, shouldShowLeftButton: _, shouldShowRightButton: d, scrollLeft: h, scrollRight: p, buttonConditionalClasses: g, BentoButton: b, ChevronLeftIcon: y, ChevronRightIcon: x };
+  }
+});
+var I = function() {
+  var t = this, l = t._self._c, e = t._self._setupProxy;
+  return l("div", { ref: "fixedScrollerRef", staticClass: "b-fixed-scroller" }, [l("div", { staticClass: "b-fixed-scroller__container" }, [l("div", { ref: "contentRef", staticClass: "b-fixed-scroller__content", style: {
+    transform: `translateX(${e.offset}px)`,
+    paddingTop: e.shouldShowLeftButton || e.shouldShowRightButton ? `${t.extraPaddingTop}px` : null
+  } }, [t._t("default")], 2)]), e.shouldShowLeftButton ? l("div", { ref: "leftButtonRef", staticClass: "b-fixed-scroller__left b-fixed-scroller__button", class: e.buttonConditionalClasses }, [l(e.BentoButton, { attrs: { variant: "secondary", "aria-label": e.t("scrollLeft"), condensed: t.condensed }, on: { click: e.scrollLeft }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [l(e.ChevronLeftIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 1728943899) })], 1) : t._e(), e.shouldShowRightButton ? l("div", { ref: "rightButtonRef", staticClass: "b-fixed-scroller__right b-fixed-scroller__button", class: e.buttonConditionalClasses }, [l(e.BentoButton, { attrs: { variant: "secondary", "aria-label": e.t("scrollRight"), condensed: t.condensed }, on: { click: e.scrollRight }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [l(e.ChevronRightIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 29940896) })], 1) : t._e()]);
+}, k = [], O = /* @__PURE__ */ F(
+  E,
+  I,
+  k,
+  !1,
+  null,
+  "e320ec31"
+);
+const X = O.exports;
+export {
+  X as F
+};
+//# sourceMappingURL=fixed-scroller.DR2E_No4.js.map

package/dist/chunks/{fixed-scroller.MerESbd_.js.map → fixed-scroller.DR2E_No4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.MerESbd_.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":";;;;;;;AAKA,MAAAA,IAAA,GAEAC,IAAA,IAkCOC,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAF,EAAA,CAAA,GAEAG,IAAAH,EAAA,CAAA;AAEA,EAAAI,EAAA,MAAA;AACI,IAAAC,EAAAT,EAAA,OAAA,MAAA;AACI,MAAAA,EAAA,UAEIO,EAAA,QAAAP,EAAA,MAAA,aAEAK,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA,GAGJM,EAAAV,EAAA,OAAA,MAAA;;AACI,MAAAO,EAAA,SAAAI,IAAAX,EAAA,UAAA,gBAAAW,EAAA,aAEAJ,EAAA,QAAAC,EAAA,UAEIF,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA;AAAA,EACH,CAAA;AAKL,QAAAQ,IAAAC,EAAA,MAAA;;AACI,UAAAC,KAAAH,IAAAT,EAAA,UAAA,QAAAS,EAAA,cAAAT,EAAA,MAAA,cAAAJ,IAAA,GAGAiB,KAAAC,IAAAb,EAAA,UAAA,QAAAa,EAAA,cAAAb,EAAA,MAAA,cAAAL,IAAA;AAIA,WAAAgB,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAJ,EAAA,MAAA,KAAA,KAAAN,EAAA,QAAAC,EAAA,KAAA,KAAA,CAAA,GAIAU,IAAAL,EAAA,MAAA;AACI,UAAAM,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAZ,EAAA,QAAAC,EAAA,QAAAX;AAMA;AAAA,MAAA;AAIJ,YAAAyB,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAb,EAAA,QAAA,KAAA,IAAAc,CAAA,IAAAV,EAAA;AAAA,IAAkG,CAAA,GAGtGO;AAAA,EAAO,CAAA,GAIXI,IAAAV,EAAA,MAAAP,EAAA,UAAA,CAAA,GAEAkB,IAAAX;AAAA,IAA8B,MAAAT,EAAA,SAAA,EAAAG,EAAA,QAAAC,EAAA,QAAA;AAAA,EACkD;AA6BhF,SAAA;AAAA,IAAO,QAAAJ;AAAA,IACH,sBAAAmB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAlB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAW,EAAA,QAAA,MAIAX,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;GCtDImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;iBAtDA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEA5B,IAAAK,EAAA,IAAA,GACAwB,IAAAxB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAiBA,EAAA,QAAAD,GAAA,sBAAAmB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAAhC,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA6B;AAAA,MACc,eAAA3B;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA,GAGJ6B,IAAAnB,EAAA,OAAA;AAAA,MAAiD,sCAAAoB,EAAA;AAAA,IACD,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-scroller.DR2E_No4.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}

package/dist/chunks/{footer-actions.CiPj7hZG.js → footer-actions.CvUaoMzj.js}

@@ -1,7 +1,7 @@
 import { defineComponent as i, toRefs as r, computed as l, onMounted as c } from "vue";
 import { B as u } from "./typography.C8lPlsbD.js";
-import { b as _ } from "./button.DxhJNOtr.js";
-import { B as d } from "./button-actions.BLk114As.js";
+import { b as _ } from "./button.C9b2AC9w.js";
+import { B as d } from "./button-actions.Bdbu0bvt.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/footer-actions.css";
 const p = {}, g = /* @__PURE__ */ i({
@@ -93,4 +93,4 @@ const w = b.exports;
 export {
   w as F
 };
-//# sourceMappingURL=footer-actions.CiPj7hZG.js.map
+//# sourceMappingURL=footer-actions.CvUaoMzj.js.map

package/dist/chunks/{footer-actions.CiPj7hZG.js.map → footer-actions.CvUaoMzj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.CiPj7hZG.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.CvUaoMzj.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/form-layout-title.DzGajv4U.js

@@ -0,0 +1,248 @@
+import { defineComponent as i, useSlots as c, computed as a, provide as m, toRef as y } from "vue";
+import { B as f } from "./alert.CXRb-Smf.js";
+import { u as d } from "./use-has-slot.C9lQZ6nz.js";
+import { F as g } from "./form-layout.types.bZW9iR6_.js";
+import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { E as v } from "./error-message.CyERcfdt.js";
+import { B as p, a as b } from "./typography.C8lPlsbD.js";
+import { u as h } from "./index.B6WW_F-J.js";
+import "../assets/form-layout-title.css";
+const F = {}, S = /* @__PURE__ */ i({
+  ...F,
+  __name: "form-layout",
+  props: {
+    /**
+     * Renders the form layout as an HTML `form`
+     */
+    form: { type: Boolean, default: !1 },
+    /**
+     * Sets the state of the form and its fields to
+     * a read only status.
+     */
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["submit"],
+  setup(o, { emit: e }) {
+    const s = o, t = c(), r = d(t), n = a(() => s.form ? "form" : "div"), u = a(() => r("actions-left") || r("actions-right"));
+    return m(g, y(s, "loading")), { __sfc: !0, slots: t, hasSlot: r, emit: e, props: s, formLayoutElement: n, hasActions: u, BentoAlert: f };
+  }
+});
+var q = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" }, on: { submit: function(r) {
+    return t.emit("submit", r);
+  } } }, [t.hasSlot("error-message") ? s(t.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: e._u([{ key: "description", fn: function() {
+    return [e._t("error-message")];
+  }, proxy: !0 }], null, !0) }) : e._e(), e._t("default"), t.hasActions ? s("div", { staticClass: "b-form-layout__actions-container" }, [s("div", { staticClass: "b-form-layout__actions" }, [e._t("actions-left")], 2), s("div", { staticClass: "b-form-layout__actions" }, [e._t("actions-right")], 2)]) : e._e()], 2);
+}, C = [], T = /* @__PURE__ */ l(
+  S,
+  q,
+  C,
+  !1,
+  null,
+  "b895dc37"
+);
+const V = T.exports, B = ["warning", "critical", "highlight", "success"], $ = {}, R = /* @__PURE__ */ i({
+  ...$,
+  __name: "form-layout-field-tip",
+  props: {
+    /**
+     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+     * @values highlight, success, critical, warning
+     */
+    type: {
+      type: String,
+      default: "highlight",
+      validator: (o) => B.includes(o)
+    },
+    /**
+     * Unique identifier to the form field. Used for accessibility.
+     */
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(o) {
+    const e = c(), s = d(e);
+    return { __sfc: !0, slots: e, hasSlot: s, BentoAlert: f };
+  }
+});
+var L = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-field-tip" }, [e._t("default"), t.hasSlot("message") ? s(t.BentoAlert, { attrs: { id: e.id, variant: "tip", type: e.type }, scopedSlots: e._u([{ key: "description", fn: function() {
+    return [e._t("message")];
+  }, proxy: !0 }], null, !0) }) : e._e()], 2);
+}, x = [], A = /* @__PURE__ */ l(
+  R,
+  L,
+  x,
+  !1,
+  null,
+  "47d36a49"
+);
+const W = A.exports, _ = [
+  "100",
+  "50",
+  "33",
+  "25",
+  "66-33",
+  "33-66",
+  "75-25",
+  "25-75",
+  "50-50",
+  "33-33-33"
+], E = {}, O = /* @__PURE__ */ i({
+  ...E,
+  __name: "form-layout-group",
+  props: {
+    /**
+     * The layout of the pair group of components.
+     * This will render the components within the width of the proportions.
+     * Only two columns are available.
+     *
+     * If only one value is entered, then it will assume there's only one child in the group.
+     * If two values are entered, the first value will be use for the first child and the second
+     * value for the second child.
+     *
+     * If the value entered is not listed in the example
+     * list below it will use 100% by default.
+     * @example
+     * '33-33-33'
+     * '50-50'
+     * '25-75'
+     * '75-25'
+     * '33-66'
+     * '66-33'
+     * '25'
+     * '33'
+     * '50'
+     * '100'
+     */
+    layout: {
+      type: String,
+      default: "100",
+      validator: (o) => _.includes(o)
+    },
+    /**
+     * The error message to be displayed for the whole group.
+     *
+     * If set, individual error messages for all components within this group will be hidden.
+     * This is particularly useful for field pairs where a single group error is displayed.
+     */
+    errorMessage: { type: String, default: null }
+  },
+  setup(o) {
+    const e = o, s = 100, t = a(
+      () => _.includes(e.layout) ? e.layout : s
+    ), r = a(() => ({
+      // Transform into column if the layout is unsupported
+      "b-form-layout-group--column": !_.includes(e.layout),
+      // Assings the correct layout class
+      [`b-form-layout-group--${t.value}`]: !0,
+      "b-form-layout-group--group-error-messages": !!e.errorMessage
+    }));
+    return { __sfc: !0, DEFAULT_PROPORTION: s, props: e, computedLayout: t, conditionalClasses: r, ErrorMessage: v };
+  }
+});
+var M = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-group", class: t.conditionalClasses }, [e._t("default"), e.errorMessage ? s(t.ErrorMessage, { staticClass: "b-form-layout-group__error-message", attrs: { "error-message": e.errorMessage } }) : e._e()], 2);
+}, P = [], I = /* @__PURE__ */ l(
+  O,
+  M,
+  P,
+  !1,
+  null,
+  "6fb88d9e"
+);
+const Z = I.exports, N = {
+  "de-DE": {
+    requiredFields: "Alle Felder sind erforderlich."
+  },
+  "en-GB": {
+    requiredFields: "All fields are required."
+  },
+  "en-US": {
+    requiredFields: "All fields are required."
+  },
+  "es-ES": {
+    requiredFields: "Todos los campos son obligatorios."
+  },
+  "es-MX": {
+    requiredFields: "Todos los campos son obligatorios."
+  },
+  "fr-FR": {
+    requiredFields: "Tous les champs sont obligatoires."
+  },
+  "it-IT": {
+    requiredFields: "Tutti i campi sono obbligatori."
+  },
+  "ja-JP": {
+    requiredFields: "すべてのフィールドは必須です。"
+  },
+  "pt-BR": {
+    requiredFields: "Todos os campos são obrigatórios."
+  },
+  "zh-CN": {
+    requiredFields: "所有字段均为必填项。"
+  }
+}, G = {
+  name: "bento-form-layout-title",
+  i18n: { messages: N }
+}, D = /* @__PURE__ */ i({
+  ...G,
+  props: {
+    /**
+     * Defines if the Form Layout title is
+     * a "section" or a "subsection".
+     * Default is "section" (false). Turn into "true" for "subsection"
+     */
+    subsection: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    el: {
+      type: p.props.el.type,
+      required: !0,
+      validator: (o) => Object.values(b).includes(o)
+    },
+    /**
+     * Defines if the Form Layout title displays
+     * a message indicating that all fields are required.
+     */
+    allFieldsRequired: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o) {
+    const e = o, s = c(), { t } = h(), r = a(() => !e.subsection), n = d(s), u = a(() => ({
+      "b-form-layout-title--subsection": e.subsection
+    }));
+    return { __sfc: !0, slots: s, t, props: e, isSection: r, hasSlot: n, conditionalClasses: u, BentoTypography: p };
+  }
+});
+var U = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-title", class: t.conditionalClasses }, [s(t.BentoTypography, { attrs: { el: e.el, variant: "title", medium: t.isSection } }, [e._t("default")], 2), t.hasSlot("description") || e.allFieldsRequired ? s(t.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [e._t("description"), e.allFieldsRequired ? [e._v(" " + e._s(t.hasSlot("description") ? ` ${t.t("requiredFields")}` : t.t("requiredFields")) + " ")] : e._e()], 2) : e._e()], 1);
+}, j = [], k = /* @__PURE__ */ l(
+  D,
+  U,
+  j,
+  !1,
+  null,
+  "8ee24e3a"
+);
+const ee = k.exports;
+export {
+  W as a,
+  Z as b,
+  ee as c,
+  V as f
+};
+//# sourceMappingURL=form-layout-title.DzGajv4U.js.map

package/dist/chunks/form-layout-title.DzGajv4U.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-layout-title.DzGajv4U.js","sources":["../../src/components/form-layout/form-layout.vue","../../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"submit\"]);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n        <error-message v-if=\"!!errorMessage\" :error-message=\"errorMessage\" class=\"b-form-layout-group__error-message\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { ErrorMessage } from '@/internal';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two columns are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n\n        /**\n         * The error message to be displayed for the whole group.\n         *\n         * If set, individual error messages for all components within this group will be hidden.\n         * This is particularly useful for field pairs where a single group error is displayed.\n         */\n        errorMessage: { type: String, default: null },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n        'b-form-layout-group--group-error-messages': !!props.errorMessage,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n\n        /**\n         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organize related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","DEFAULT_PROPORTION","computedLayout","conditionalClasses","__default__","messages","useI18n","isSection"],"mappings":";;;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;qBC5BGa,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCkEIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5EAC,IAAA,KA0CAC,IAAAX;AAAA,MAAuB,MAAAQ,EAAA,SAAAP,EAAA,MAAA,IAAAA,EAAA,SAAAS;AAAA,IACiD,GAGxEE,IAAAZ,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAU,EAAA,KAAA,EAAA,GAAA;AAAA,MAE/B,6CAAA,CAAA,CAAAV,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8BzDY,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAnB,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAmB,EAAA,GAkCAC,IAAAhB,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}