@adyen/bento-vue3 1.88.1 → 1.89.2

package/dist/chunks/button-actions-with-menu.BQFAgAI2.js

@@ -0,0 +1,85 @@
+import { ref as f, watch as _, nextTick as m, defineComponent as y, toRef as h, computed as p, provide as b, openBlock as A, createElementBlock as w, createElementVNode as B, normalizeClass as N, createVNode as k, unref as E, createBlock as T, createCommentVNode as C } from "vue";
+import { M as I, d as W, B as M, f as R } from "./button-actions.cMQWyZne.js";
+import { u as g } from "./index.DDwcHPb6.js";
+import { _ as O } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button-actions-with-menu.css";
+const L = (v) => {
+  const { breakpoint: t, container: c, defaultActionsCount: s, offset: u } = v, { width: l } = g(), o = f(s.value), r = 150, i = async () => {
+    await m();
+    const n = c.value.clientWidth, e = r * o.value + (u?.value?.offsetWidth ?? 0) + r;
+    n >= e && o.value < s.value && (o.value += 1, await i());
+  }, d = async () => {
+    await m();
+    const n = c.value.clientWidth, e = r * o.value + (u?.value?.offsetWidth ?? 0);
+    n < e && o.value > 0 && (o.value -= 1, await d());
+  };
+  return _([l, c], async ([n, e], [a]) => {
+    if (!e || !s || n > t)
+      return;
+    await m(), n > a ? await i() : await d();
+  }), _(s, async (n) => {
+    o.value = n, t && l.value <= t && c.value && await d();
+  }), {
+    displayedActionsCount: o
+  };
+}, S = { class: "b-button-actions-with-menu" }, V = {}, D = /* @__PURE__ */ y({
+  ...V,
+  __name: "button-actions-with-menu",
+  props: {
+    actions: {},
+    actionsLayout: { default: "buttons-end" },
+    disableResponsiveBehavior: { type: Boolean, default: !1 },
+    displayedActions: { default: void 0 },
+    inverse: { type: Boolean, default: !1 },
+    hideDisplayedActionsBreakpoint: { default: 0 },
+    menuPosition: { default: "bottom-start" }
+  },
+  setup(v) {
+    const t = v, c = h(t, "inverse"), s = f(null), u = f(null), l = f(!1), o = p(() => {
+      const e = t.hideDisplayedActionsBreakpoint ? i.value : t.displayedActions;
+      return t.actions.slice(0, e);
+    }), r = p(() => u?.value?.$el), { displayedActionsCount: i } = L({
+      breakpoint: t.hideDisplayedActionsBreakpoint,
+      container: s,
+      defaultActionsCount: h(t, "displayedActions"),
+      offset: r
+    });
+    b(I, c), t.disableResponsiveBehavior || b(W, { buttonActionsWithMenu: s, menu: u, stackButtons: l });
+    const d = p(() => ({
+      "b-button-actions-with-menu__container-wrapper--buttons-end": t.actionsLayout === "buttons-end",
+      "b-button-actions-with-menu__container-wrapper--buttons-start": t.actionsLayout === "buttons-start",
+      "b-button-actions-with-menu__container-wrapper--stacked-buttons": l.value
+    })), n = p(() => i.value === void 0 || i.value >= t.actions.length ? [] : t.actions.slice(i.value, t.actions.length).flatMap((a) => a.data ? a.data : {
+      text: a.title,
+      handler: () => a.event?.({}),
+      icon: a.icon,
+      critical: a.critical,
+      disabled: a.disabled
+    }));
+    return (e, a) => (A(), w("div", S, [
+      B("div", {
+        ref_key: "buttonActionsWithMenu",
+        ref: s,
+        role: "group",
+        class: N(["b-button-actions-with-menu__container-wrapper", d.value])
+      }, [
+        k(E(M), {
+          actions: o.value,
+          inverse: e.inverse,
+          layout: e.actionsLayout
+        }, null, 8, ["actions", "inverse", "layout"]),
+        n.value.length ? (A(), T(R, {
+          key: 0,
+          ref_key: "menu",
+          ref: u,
+          data: n.value,
+          "menu-position": e.menuPosition
+        }, null, 8, ["data", "menu-position"])) : C("", !0)
+      ], 2)
+    ]));
+  }
+}), J = /* @__PURE__ */ O(D, [["__scopeId", "data-v-803aebe6"]]);
+export {
+  J as B
+};
+//# sourceMappingURL=button-actions-with-menu.BQFAgAI2.js.map

package/dist/chunks/{button-actions-with-menu.Tba1ME79.js.map → button-actions-with-menu.BQFAgAI2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.Tba1ME79.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n        actionsLayout: 'buttons-end',\n        disableResponsiveBehavior: false,\n        displayedActions: undefined,\n        inverse: false,\n        hideDisplayedActionsBreakpoint: 0,\n        menuPosition: 'bottom-start',\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","_a","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":"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"}
+{"version":3,"file":"button-actions-with-menu.BQFAgAI2.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n        actionsLayout: 'buttons-end',\n        disableResponsiveBehavior: false,\n        displayedActions: undefined,\n        inverse: false,\n        hideDisplayedActionsBreakpoint: 0,\n        menuPosition: 'bottom-start',\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,gDC4CIa,IAAA,CAAA;;;;;;;;;;;;;AA5FA,UAAApB,IAAAqB,GASAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAlB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAD,EAAAvB,GAAA,kBAAA;AAAA,MACyC,QAAA8B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAA0B,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIrB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAoC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;;;;;;;;;"}