@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/accordion.js

@@ -1,104 +1,6 @@
-import { defineComponent as p, provide as C, toRef as h, ref as l, inject as y, computed as g, watch as _ } from "vue";
-import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as x } from "./chunks/index.dd30e538.js";
-import { C as O, a as T } from "./chunks/chevron-up.81185563.js";
-import { g as d } from "./chunks/unique-id.a2a2b458.js";
-import { o as E } from "./chunks/resize.a041304d.js";
-import { u as N } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index2.css";
-const m = Symbol("accordion title size injection key"), S = {}, z = /* @__PURE__ */ p({
-  ...S,
-  __name: "accordion",
-  props: {
-    /**
-     * Controls accordion title size.
-     * @values default, small
-     */
-    titleSize: {
-      type: String,
-      default: "default"
-    }
-  },
-  setup(i) {
-    const e = i;
-    return C(m, h(e, "titleSize")), { __sfc: !0, props: e };
-  }
-});
-var A = function() {
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { staticClass: "b-accordion" }, [e._t("default")], 2);
-}, B = [], $ = /* @__PURE__ */ u(
-  z,
-  A,
-  B,
-  !1,
-  null,
-  "fb182a1c",
-  null,
-  null
-);
-const K = $.exports, R = {}, D = /* @__PURE__ */ p({
-  ...R,
-  __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(i, { emit: e }) {
-    const n = i, t = "b-accordion-item__animation--content", o = l(null), s = l(n.isExpanded), f = d("accordionItemButton"), v = d("accordionItemContent"), I = y(m, "default"), { updateContentHeight: c, contentHeight: r } = N(o, s), b = g(() => r.value ? { "max-height": r.value } : {});
-    return _(
-      () => n.isExpanded,
-      (a) => {
-        s.value = a;
-      }
-    ), _(
-      () => o.value,
-      () => {
-        let a = null;
-        !a && o.value && (a = E(o.value, () => {
-          o.value && c();
-        }));
-      }
-    ), _(
-      s,
-      (a) => {
-        e("update:is-expanded", a), c();
-      },
-      { immediate: !0 }
-    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: o, isOpen: s, buttonId: f, contentId: v, titleSize: I, updateContentHeight: c, contentHeight: r, contentMaxHeight: b, BentoTypography: x, ChevronDownIcon: O, ChevronUpIcon: T };
-  }
-});
-var H = function() {
-  var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n("div", { staticClass: "b-accordion-item" }, [n(t.BentoTypography, { attrs: { el: "h3", variant: t.titleSize === "small" ? "body" : "title", strongest: t.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: t.buttonId, "aria-controls": t.contentId, "aria-expanded": `${t.isOpen}`, type: "button" }, on: { click: function(o) {
-    t.isOpen = !t.isOpen;
-  } } }, [t.isOpen ? n(t.ChevronUpIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "collapse", "aria-hidden": "true" } }) : n(t.ChevronDownIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "expand", "aria-hidden": "true" } }), e._v(" " + e._s(e.title) + " ")], 1)]), n("Transition", { attrs: { name: t.CONTENT_TRANSITION_NAME } }, [t.isOpen ? n("div", { style: t.contentMaxHeight, attrs: { id: t.contentId, "aria-labelledby": t.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [e._t("default")], 2)]) : e._e()])], 1);
-}, M = [], w = /* @__PURE__ */ u(
-  D,
-  H,
-  M,
-  !1,
-  null,
-  "01c3158a",
-  null,
-  null
-);
-const L = w.exports;
+import { a as e, b as n } from "./chunks/accordion-item.DmnrjNzw.js";
 export {
-  K as BentoAccordion,
-  L as BentoAccordionItem
+  e as BentoAccordion,
+  n as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.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 { 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 v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"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 '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\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    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<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\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</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GAGAM,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAiB,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.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/action-bar.js

@@ -1,234 +1,5 @@
-import { onMounted as O, nextTick as y, getCurrentScope as x, onScopeDispose as P, unref as F, getCurrentInstance as T, ref as _, watch as C, watchEffect as R, computed as b, defineComponent as k, toRefs as j, provide as D } from "vue";
-import { a as G } from "./chunks/button.9d6435ae.js";
-import { B as z } from "./chunks/index.dd30e538.js";
-import { B as H } from "./chunks/button-actions-with-menu.e845d77a.js";
-import { C as U } from "./chunks/cross.04678d81.js";
-import { u as Y } from "./chunks/i18n.eb5b985b.js";
-import "./chunks/index.4c062058.js";
-import { P as K } from "./chunks/index.15b088b9.js";
-import { B as Q } from "./chunks/button-actions.81db18e8.js";
-import { n as $ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index3.css";
-function N(e) {
-  return x() ? (P(e), !0) : !1;
-}
-function S(e) {
-  return typeof e == "function" ? e() : F(e);
-}
-const q = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const J = Object.prototype.toString, Z = (e) => J.call(e) === "[object Object]", X = () => {
-};
-function tt(e) {
-  return e || T();
-}
-function et(e, n = !0, t) {
-  tt() ? O(e, t) : n ? e() : y(e);
-}
-function nt(e) {
-  var n;
-  const t = S(e);
-  return (n = t == null ? void 0 : t.$el) != null ? n : t;
-}
-const I = q ? window : void 0;
-function ot(...e) {
-  let n, t, o, a;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, o, a] = e, n = I) : [n, t, o, a] = e, !n)
-    return X;
-  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
-  const r = [], i = () => {
-    r.forEach((c) => c()), r.length = 0;
-  }, s = (c, d, v, f) => (c.addEventListener(d, v, f), () => c.removeEventListener(d, v, f)), u = C(
-    () => [nt(n), S(a)],
-    ([c, d]) => {
-      if (i(), !c)
-        return;
-      const v = Z(d) ? { ...d } : d;
-      r.push(
-        ...t.flatMap((f) => o.map((l) => s(c, f, l, v)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), p = () => {
-    u(), i();
-  };
-  return N(p), p;
-}
-function at() {
-  const e = _(!1);
-  return T() && O(() => {
-    e.value = !0;
-  }), e;
-}
-function it(e) {
-  const n = at();
-  return b(() => (n.value, !!e()));
-}
-function st(e, n = {}) {
-  const { window: t = I } = n, o = it(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
-  let a;
-  const r = _(!1), i = (p) => {
-    r.value = p.matches;
-  }, s = () => {
-    a && ("removeEventListener" in a ? a.removeEventListener("change", i) : a.removeListener(i));
-  }, u = R(() => {
-    o.value && (s(), a = t.matchMedia(S(e)), "addEventListener" in a ? a.addEventListener("change", i) : a.addListener(i), r.value = a.matches);
-  });
-  return N(() => {
-    u(), s(), a = void 0;
-  }), r;
-}
-function rt(e = {}) {
-  const {
-    window: n = I,
-    initialWidth: t = Number.POSITIVE_INFINITY,
-    initialHeight: o = Number.POSITIVE_INFINITY,
-    listenOrientation: a = !0,
-    includeScrollbar: r = !0
-  } = e, i = _(t), s = _(o), u = () => {
-    n && (r ? (i.value = n.innerWidth, s.value = n.innerHeight) : (i.value = n.document.documentElement.clientWidth, s.value = n.document.documentElement.clientHeight));
-  };
-  if (u(), et(u), ot("resize", u, { passive: !0 }), a) {
-    const p = st("(orientation: portrait)");
-    C(p, () => u());
-  }
-  return { width: i, height: s };
-}
-const ct = {
-  "en-US": {
-    actionBar: "Action bar",
-    cancel: "Cancel",
-    close: "Close",
-    save: "Save",
-    selected: "selected",
-    unsavedChanges: "unsaved change | unsaved changes"
-  }
-}, lt = {
-  i18n: { messages: ct }
-}, ut = /* @__PURE__ */ k({
-  ...lt,
-  __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: (e) => e > 0 && e <= 4
-    },
-    /**
-     * Use when there are sticky elements at the bottom, like sticky pagination
-     */
-    extraBottomSpacing: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show how many items are selected
-     */
-    itemCounter: {
-      type: Number,
-      required: !0
-    },
-    /**
-     * Label for the selection, e.g. 'selected'/'changed'
-     */
-    selectionLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Variant for the action bar
-     * @values default, confirmation
-     */
-    variant: {
-      type: String,
-      default: "default"
-    }
-  },
-  emits: ["close", "cancel", "save"],
-  setup(e, { emit: n }) {
-    const t = e, o = 100, a = 7, r = 500, i = 32, { t: s, tc: u } = Y(), p = b(() => t.selectionLabel ? t.selectionLabel : s("selected")), c = _(null), { extraBottomSpacing: d, visibleActions: v } = j(t), { width: f } = rt(), l = _(null), h = _(null), w = b(() => t.variant === "confirmation");
-    C(
-      () => v.value,
-      (m) => {
-        h.value = m <= 4 ? m : 4, l.value = h.value;
-      },
-      { immediate: !0 }
-    );
-    const L = b(() => ({
-      "b-action-bar--extra-spacing": d.value,
-      "b-action-bar--confirmation": w.value
-    }));
-    D(K, a);
-    const M = b(() => {
-      const m = t.actions.map((V) => ({
-        ...V,
-        variant: "secondary"
-      })), B = m.slice(0, l.value).reverse(), E = m.slice(l.value);
-      return [...B, ...E];
-    }), W = b(() => [
-      {
-        title: s("save"),
-        event: () => n("save")
-      },
-      {
-        title: s("cancel"),
-        variant: "secondary",
-        event: () => n("cancel")
-      }
-    ]), g = async () => {
-      await y(), f.value > c.value.clientWidth + i + o && l.value < h.value && (l.value += 1, g());
-    }, A = async () => {
-      await y(), f.value < c.value.clientWidth + i && l.value > 0 && (l.value -= 1, A());
-    };
-    return C(
-      () => f.value,
-      async (m, B) => {
-        if (await y(), !c.value)
-          return;
-        const E = m > B;
-        f.value < r ? l.value = 0 : E ? g() : A();
-      },
-      { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: o, MENU_OFFSET: a, RESPONSIVE_BREAKPOINT: r, SPACING: i, props: t, emit: n, t: s, tc: u, label: p, actionBar: c, extraBottomSpacing: d, visibleActions: v, width: f, internalDisplayedActions: l, internalVisibleActions: h, isConfirmationVariant: w, conditionalClasses: L, actionsInternal: M, confirmationActions: W, showActions: g, hideActions: A, BentoButton: G, BentoButtonActions: Q, BentoTypography: z, ButtonActionsWithMenu: H, CrossIcon: U };
-  }
-});
-var ft = function() {
-  var n = this, t = n._self._c, o = n._self._setupProxy;
-  return t("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [t("section", { staticClass: "b-action-bar", class: o.conditionalClasses, attrs: { "aria-label": o.t("actionBar") } }, [t("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [o.isConfirmationVariant ? n._e() : t("div", { staticClass: "b-action-bar__close-button" }, [t(o.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": o.t("close") }, on: { click: function(a) {
-    return o.emit("close");
-  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
-    return [t(o.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), t(o.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [n._v(" " + n._s(n.itemCounter) + " " + n._s(o.isConfirmationVariant ? o.tc("unsavedChanges", n.itemCounter) : o.label) + " ")]), o.isConfirmationVariant ? t(o.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: o.confirmationActions, inverse: "" } }) : t(o.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: o.actionsInternal, "displayed-actions": o.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
-}, dt = [], pt = /* @__PURE__ */ $(
-  ut,
-  ft,
-  dt,
-  !1,
-  null,
-  "f42b2c8c",
-  null,
-  null
-);
-const Et = pt.exports;
+import { B as t } from "./chunks/action-bar.Bebh6PHI.js";
 export {
-  Et as BentoActionBar
+  t as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map