@adyen/bento-vue2 1.87.1 → 1.88.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.87.1",
+  "version": "1.88.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -137,6 +137,33 @@
               },
               "default": "null"
             },
+            {
+              "name": "state",
+              "description": "State of the action bar.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoActionBarState"
+              },
+              "default": "'start'"
+            },
+            {
+              "name": "showUndoAction",
+              "description": "Displays the undo action button in `success` state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "showRetryAction",
+              "description": "Displays the retry action button in `fail` state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "variant",
               "description": "Variant for the action bar",
@@ -153,10 +180,29 @@
               "description": "Event emitted when the user click the close button"
             },
             {
-              "name": "cancel"
+              "name": "cancel",
+              "description": "Event emitted when the user clicks the cancel button in `confirmation` variant."
             },
             {
-              "name": "save"
+              "name": "save",
+              "description": "Event emitted when the user clicks the save button in `confirmation` variant."
+            },
+            {
+              "name": "undo-action",
+              "description": "Event emitted when the user clicks the undo button in `success` state."
+            },
+            {
+              "name": "retry-action",
+              "description": "Event emitted when the user clicks the retry button in `fail` state."
+            },
+            {
+              "name": "cancel-action",
+              "description": "Event emitted when the user clicks the cancel button in `fail` state."
+            }
+          ],
+          "slots": [
+            {
+              "name": "stateLabel"
             }
           ],
           "source": {
@@ -164,6 +210,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "action-bar-default",
+          "description": "",
+          "source": {
+            "module": "./src/components/action-bar/__tests__/action-bar-default.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "action-bar-stub",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.87.1",
+  "version": "1.88.0",
   "description": "Adyen Bento Vue2 components",
   "type": "module",
   "main": "dist/index.js",
@@ -51,7 +51,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.87.1"
+    "@adyen/bento-design-tokens": "1.88.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -137,11 +137,11 @@
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "2.2.10",
     "zod": "3.25.35",
-    "@adyen/bento-cli": "0.9.3",
     "@adyen/bento-core": "0.0.1",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-payment-method-icons": "10.7.0",
-    "@adyen/ui-assets-icons-16": "7.7.2"
+    "@adyen/ui-assets-icons-16": "7.7.3",
+    "@adyen/ui-assets-payment-method-icons": "10.7.1",
+    "@adyen/bento-cli": "0.9.4"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

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

@@ -1,163 +0,0 @@
-import { defineComponent as O, computed as o, ref as b, toRefs as P, watch as g, provide as R, nextTick as C } from "vue";
-import { B as F } from "./button.Ctj3rkxw.js";
-import { B as W } from "./typography.C8lPlsbD.js";
-import { B as L } from "./button-actions-with-menu.D14S1pym.js";
-import { C as U } from "./cross.CC_B-vG-.js";
-import { u as k } from "./index.B6WW_F-J.js";
-import { u as M } from "./index.CwzYJHw2.js";
-import { P as z, B as D } from "./button-actions.DyPS54Yi.js";
-import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/action-bar.css";
-const J = {
-  "en-US": {
-    actionBar: "Action bar",
-    cancel: "Cancel",
-    close: "Close",
-    save: "Save",
-    selected: "selected",
-    unsavedChanges: "Unsaved changes | unsaved change | unsaved changes"
-  },
-  "ja-JP": {
-    actionBar: "アクションバー",
-    cancel: "キャンセル",
-    close: "閉じる",
-    save: "保存",
-    selected: "選択済み",
-    unsavedChanges: "保存されていない変更 | 保存されていない変更 | 保存されていない変更"
-  },
-  "pt-BR": {
-    actionBar: "Barra de ação",
-    cancel: "Cancelar",
-    close: "Fechar",
-    save: "Salvar",
-    selected: "selecionado",
-    unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas"
-  }
-}, K = {
-  i18n: { messages: J }
-}, j = /* @__PURE__ */ O({
-  ...K,
-  __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: (i) => i > 0 && i <= 4
-    },
-    /**
-     * Use when there are sticky elements at the bottom, like sticky pagination
-     */
-    extraBottomSpacing: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show how many items are selected.
-     * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed.
-     */
-    itemCounter: {
-      type: Number,
-      default: null
-    },
-    /**
-     * Label for the selection, e.g. 'selected'/'changed'
-     */
-    selectionLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Variant for the action bar
-     * @values default, confirmation
-     */
-    variant: {
-      type: String,
-      default: "default"
-    }
-  },
-  emits: ["close", "cancel", "save"],
-  setup(i, { emit: n }) {
-    const a = i, t = 100, v = 7, B = 500, m = 32, { t: r, tc: S, n: I } = k(), E = o(() => a.selectionLabel ? a.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: h, visibleActions: y } = P(a), { width: c } = M(), e = b(null), u = b(null), A = o(() => a.variant === "confirmation");
-    g(
-      () => y.value,
-      (s) => {
-        u.value = s <= 4 ? s : 4, e.value = u.value;
-      },
-      { immediate: !0 }
-    );
-    const T = o(() => ({
-      "b-action-bar--extra-spacing": h.value,
-      "b-action-bar--confirmation": A.value
-    }));
-    R(z, v);
-    const N = o(() => {
-      const s = a.actions.map((x) => ({
-        ...x,
-        variant: "secondary"
-      })), p = s.slice(0, e.value).reverse(), f = s.slice(e.value);
-      return [...p, ...f];
-    }), V = o(() => [
-      {
-        title: r("save"),
-        event: () => n("save")
-      },
-      {
-        title: r("cancel"),
-        variant: "secondary",
-        event: () => n("cancel")
-      }
-    ]), w = o(() => a.itemCounter == null || a.itemCounter < 1), d = async () => {
-      await C(), c.value > l.value.clientWidth + m + t && e.value < u.value && (e.value += 1, d());
-    }, _ = async () => {
-      await C(), c.value < l.value.clientWidth + m && e.value > 0 && (e.value -= 1, _());
-    };
-    return g(
-      () => c.value,
-      async (s, p) => {
-        if (await C(), !l.value)
-          return;
-        const f = s > p;
-        c.value < B ? e.value = 0 : f ? d() : _();
-      },
-      { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: v, RESPONSIVE_BREAKPOINT: B, SPACING: m, props: a, emit: n, t: r, tc: S, n: I, label: E, actionBar: l, extraBottomSpacing: h, visibleActions: y, width: c, internalDisplayedActions: e, internalVisibleActions: u, isConfirmationVariant: A, conditionalClasses: T, actionsInternal: N, confirmationActions: V, noItemCounter: w, showActions: d, hideActions: _, BentoButton: F, BentoButtonActions: D, BentoTypography: W, ButtonActionsWithMenu: L, CrossIcon: U };
-  }
-});
-var Y = function() {
-  var n = this, a = n._self._c, t = n._self._setupProxy;
-  return a("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [a("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [a("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? n._e() : a("div", { staticClass: "b-action-bar__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(v) {
-    return t.emit("close");
-  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
-    return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), a(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [t.isConfirmationVariant && t.noItemCounter ? [n._v(" " + n._s(t.tc("unsavedChanges", 0)) + " ")] : [n._v(" " + n._s(t.n(n.itemCounter)) + " " + n._s(t.isConfirmationVariant ? t.tc("unsavedChanges", n.itemCounter) : t.label) + " ")]], 2), t.isConfirmationVariant ? a(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : a(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1)])]);
-}, Z = [], $ = /* @__PURE__ */ G(
-  j,
-  Y,
-  Z,
-  !1,
-  null,
-  "3723457e"
-);
-const ot = $.exports;
-export {
-  ot as B
-};
-//# sourceMappingURL=action-bar.ChMlt59Z.js.map

package/dist/chunks/action-bar.ChMlt59Z.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.ChMlt59Z.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    <template v-if=\"isConfirmationVariant && noItemCounter\">\n                        {{ tc('unsavedChanges', 0) }}\n                    </template>\n                    <template v-else>\n                        {{ n(itemCounter) }}\n                        {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                    </template>\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    disable-responsive-behavior\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0PIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA4DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAGJC,IAAAxB,EAAA,MACIC,EAAA,eAAA,QAAAA,EAAA,cAAA,CAAwD,GAI5DwB,IAAA,YAAA;AACI,YAAAC,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAkB,EAAA;AAAA,IACJ;AAIJ,WAAAf;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAqB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAxB,EAAA;AACI;AAEJ,cAAA4B,IAAAF,IAAAC;AACA,QAAAtB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCqB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}