@adyen/bento-vue3 1.49.0 → 1.51.0

package/dist/chunks/{pagination.DdTcv8B6.js → pagination.BSp5RwM0.js}

@@ -1,10 +1,11 @@
-import { defineComponent as y, ref as R, computed as C, createElementBlock as v, openBlock as i, createVNode as p, unref as t, withCtx as d, createBlock as $, resolveDynamicComponent as F, mergeProps as L, createSlots as J, createTextVNode as O, toDisplayString as P, createCommentVNode as S, createElementVNode as c, useSlots as G, useAttrs as K, toRefs as q, normalizeClass as Q, renderSlot as X } from "vue";
+import { defineComponent as y, ref as R, computed as C, createElementBlock as v, openBlock as i, createVNode as u, unref as t, withCtx as d, createBlock as $, resolveDynamicComponent as F, mergeProps as L, createSlots as J, createTextVNode as O, toDisplayString as P, createCommentVNode as S, createElementVNode as c, useSlots as G, useAttrs as K, toRefs as q, normalizeClass as Q, renderSlot as X } from "vue";
 import { B as w } from "./typography.DN5eC5ch.js";
-import { B as Z } from "./dropdown.CWq-VlFX.js";
+import { B as Z } from "./dropdown.CRLx2Juh.js";
 import { g as M } from "./generate-uid.NJ8tVoha.js";
 import { u as B, g as D, a as V } from "./i18n.D9azDLPe.js";
 import { _ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as I } from "./button.Cneb6rPP.js";
+import { B as I } from "./button.6HMG0xEY.js";
+/* empty css              */
 import { u as Y } from "./aria-label.CaUURpnB.js";
 import { u as ee } from "./use-has-slot.B7eQSabc.js";
 import "../assets/pagination.css";
@@ -50,11 +51,11 @@ const W = {
       { label: "50", value: 50 },
       { label: "75", value: 75 },
       { label: "100", value: 100 }
-    ], r = n, l = o, { t: u } = B({ messages: W }), h = M("b-pagination-context-number-elements"), T = R(a), b = D(), m = (e) => {
+    ], r = n, l = o, { t: p } = B({ messages: W }), h = M("b-pagination-context-number-elements"), T = R(a), b = D(), m = (e) => {
       l("select", e);
     }, g = C(() => r.totalCount ? "showingItemsWithTotal" : "showingItems");
     return (e, f) => (i(), v("div", te, [
-      p(t(w), { el: "div" }, {
+      u(t(w), { el: "div" }, {
         default: d(() => [
           (i(), $(F(t(b)), L(t(V)(g.value), {
             class: "b-pagination-results-per-page__dropdown-container",
@@ -62,9 +63,9 @@ const W = {
             plural: e.totalCount
           }), J({
             itemCount: d(() => [
-              p(t(Z), {
+              u(t(Z), {
                 id: t(h),
-                "aria-label": t(u)(g.value, { itemCount: e.itemsPerPage, totalCount: e.totalCount }),
+                "aria-label": t(p)(g.value, { itemCount: e.itemsPerPage, totalCount: e.totalCount }),
                 class: "b-pagination-results-per-page__dropdown",
                 condensed: "",
                 items: T.value,
@@ -130,7 +131,7 @@ const W = {
   },
   emits: ["page-selected"],
   setup(n, { emit: o }) {
-    const a = n, r = o, { t: l } = B({ messages: U }), u = M("bento-pagination-context-current-page"), h = (e) => r("page-selected", e), T = D(), b = (e) => ({
+    const a = n, r = o, { t: l } = B({ messages: U }), p = M("bento-pagination-context-current-page"), h = (e) => r("page-selected", e), T = D(), b = (e) => ({
       label: e.toString(),
       value: e
     }), m = (e, f) => f + 1, g = C(
@@ -144,8 +145,8 @@ const W = {
         default: d(() => [
           (i(), $(F(t(T)), L(t(V)("pageOfTotalPages"), { tag: "div" }), {
             page: d(() => [
-              p(t(Z), {
-                id: t(u),
+              u(t(Z), {
+                id: t(p),
                 "aria-label": t(l)("pageOfTotalPages", { page: e.page, totalPages: e.totalPages }),
                 class: "b-pagination-context__dropdown",
                 condensed: "",
@@ -187,8 +188,8 @@ const re = {
   beforeCreate() {
     this.uuid = k.toString(), k += 1;
   }
-}, ue = { key: 0 };
-function pe(n, o, a, r, l, u) {
+}, pe = { key: 0 };
+function ue(n, o, a, r, l, p) {
   return i(), v("svg", L({ role: "img" }, n.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -196,7 +197,7 @@ function pe(n, o, a, r, l, u) {
     height: "16",
     fill: "none"
   }), [
-    n.$attrs["svg-title"] ? (i(), v("title", ue, P(n.$attrs["svg-title"]), 1)) : S("", !0),
+    n.$attrs["svg-title"] ? (i(), v("title", pe, P(n.$attrs["svg-title"]), 1)) : S("", !0),
     o[0] || (o[0] = c("path", {
       fill: "#00112C",
       d: "M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z"
@@ -207,14 +208,14 @@ function pe(n, o, a, r, l, u) {
     }, null, -1))
   ], 16);
 }
-const de = /* @__PURE__ */ _(re, [["render", pe]]);
+const de = /* @__PURE__ */ _(re, [["render", ue]]);
 let A = 0;
 const ce = {
   beforeCreate() {
     this.uuid = A.toString(), A += 1;
   }
 }, ve = { key: 0 };
-function me(n, o, a, r, l, u) {
+function me(n, o, a, r, l, p) {
   return i(), v("svg", L({ role: "img" }, n.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -240,7 +241,7 @@ const he = {
     this.uuid = E.toString(), E += 1;
   }
 }, Pe = { key: 0 };
-function _e(n, o, a, r, l, u) {
+function _e(n, o, a, r, l, p) {
   return i(), v("svg", L({ role: "img" }, n.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -262,7 +263,7 @@ const be = {
     this.uuid = z.toString(), z += 1;
   }
 }, Ce = { key: 0 };
-function $e(n, o, a, r, l, u) {
+function $e(n, o, a, r, l, p) {
   return i(), v("svg", L({ role: "img" }, n.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -326,7 +327,7 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
   },
   emits: ["navigate"],
   setup(n, { emit: o }) {
-    const a = n, r = o, { t: l } = B({ messages: x }), u = C(() => a.page === 1), h = C(() => a.page === a.totalPages), T = C(() => !a.hasNext || h.value), b = C(() => {
+    const a = n, r = o, { t: l } = B({ messages: x }), p = C(() => a.page === 1), h = C(() => a.page === a.totalPages), T = C(() => !a.hasNext || h.value), b = C(() => {
       const g = !a.hasNext, e = !a.totalPages;
       return g || h.value || e;
     }), m = (g) => {
@@ -334,14 +335,14 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
     };
     return (g, e) => (i(), v("ul", we, [
       c("li", Se, [
-        p(t(I), {
-          disabled: u.value,
+        u(t(I), {
+          disabled: p.value,
           variant: "tertiary",
           condensed: "",
           onClick: e[0] || (e[0] = (f) => m(1))
         }, {
           iconLeft: d(() => [
-            p(t(de), {
+            u(t(de), {
               "svg-title": t(l)("navigateToTheFirstPage")
             }, null, 8, ["svg-title"])
           ]),
@@ -349,14 +350,14 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
         }, 8, ["disabled"])
       ]),
       c("li", Ne, [
-        p(t(I), {
-          disabled: u.value,
+        u(t(I), {
+          disabled: p.value,
           variant: "tertiary",
           condensed: "",
           onClick: e[1] || (e[1] = (f) => m(g.page - 1))
         }, {
           iconLeft: d(() => [
-            p(t(Te), {
+            u(t(Te), {
               "svg-title": t(l)("navigateToThePreviousPage")
             }, null, 8, ["svg-title"])
           ]),
@@ -364,14 +365,14 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
         }, 8, ["disabled"])
       ]),
       c("li", Ie, [
-        p(t(I), {
+        u(t(I), {
           disabled: T.value,
           variant: "tertiary",
           condensed: "",
           onClick: e[2] || (e[2] = (f) => m(g.page + 1))
         }, {
           iconLeft: d(() => [
-            p(t(Le), {
+            u(t(Le), {
               "svg-title": t(l)("navigateToTheNextPage")
             }, null, 8, ["svg-title"])
           ]),
@@ -379,14 +380,14 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
         }, 8, ["disabled"])
       ]),
       c("li", Oe, [
-        p(t(I), {
+        u(t(I), {
           disabled: b.value,
           variant: "tertiary",
           condensed: "",
           onClick: e[3] || (e[3] = (f) => m(g.totalPages))
         }, {
           iconLeft: d(() => [
-            p(t(fe), {
+            u(t(fe), {
               "svg-title": t(l)("navigateToTheLastPage")
             }, null, 8, ["svg-title"])
           ]),
@@ -409,7 +410,7 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
   },
   emits: ["navigate", "items-page", "update:page", "update:size"],
   setup(n, { emit: o }) {
-    const a = n, r = o, l = G(), u = ee(l), h = K(), T = R(h["aria-label"]), { ariaLabel: b } = q(a), m = Y({
+    const a = n, r = o, l = G(), p = ee(l), h = K(), T = R(h["aria-label"]), { ariaLabel: b } = q(a), m = Y({
       ariaLabel: T.value,
       // TODO: take this line away when the aria-label props is removed
       label: b
@@ -422,14 +423,14 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
     }, j = (s) => {
       r("items-page", s), r("update:size", s), e(1, s);
     }, H = () => ({
-      "b-pagination__navigation--only-page-navigator": !u("default") && a.hidePageSize
+      "b-pagination__navigation--only-page-navigator": !p("default") && a.hidePageSize
     });
     return (s, N) => (i(), v("div", Ae, [
       c("nav", {
         "aria-label": t(m),
         class: Q(["b-pagination__navigation", H()])
       }, [
-        s.hidePageSize ? t(u)("default") ? (i(), $(t(w), { key: 1 }, {
+        s.hidePageSize ? t(p)("default") ? (i(), $(t(w), { key: 1 }, {
           default: d(() => [
             X(s.$slots, "default", {}, void 0, !0)
           ]),
@@ -442,7 +443,7 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
           onSelect: j
         }, null, 8, ["items-per-page", "total-count"])),
         c("div", ze, [
-          p(ge, {
+          u(ge, {
             class: "b-pagination__context",
             "total-pages": g.value,
             page: s.page,
@@ -451,7 +452,7 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
             onPageSelected: f
           }, null, 8, ["total-pages", "page", "total-count", "virtual-scroll"]),
           N[0] || (N[0] = c("div", { class: "b-pagination__divider" }, null, -1)),
-          p(ke, {
+          u(ke, {
             class: "b-pagination__controls",
             "has-next": s.hasNext,
             page: s.page,
@@ -462,8 +463,8 @@ const Le = /* @__PURE__ */ _(be, [["render", $e]]), x = {
       ], 10, Ee)
     ]));
   }
-}), Je = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-3231fd98"]]);
+}), Ge = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-3231fd98"]]);
 export {
-  Je as B
+  Ge as B
 };
-//# sourceMappingURL=pagination.DdTcv8B6.js.map
+//# sourceMappingURL=pagination.BSp5RwM0.js.map

package/dist/chunks/pagination.BSp5RwM0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.BSp5RwM0.js","sources":["../../../vue2/src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../../vue2/src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../../vue2/src/components/pagination/components/pagination-controls/pagination-controls.vue","../../../vue2/src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"dropdownOptions\"\n                        :value=\"itemsPerPage\"\n                        @input=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n        { label: '10', value: 10 },\n        { label: '20', value: 20 },\n        { label: '50', value: 50 },\n        { label: '75', value: 75 },\n        { label: '100', value: 100 },\n    ];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             *  The amount of items the pager is paging through.\n             */\n            itemsPerPage?: number;\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount?: number;\n        }>(),\n        {\n            itemsPerPage: 50,\n            totalCount: null,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'select', value: number);\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageOfTotalPages')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageOfTotalPages', { page, totalPages })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @input=\"onPageSelectChange\"\n                    />\n                </template>\n                <template #totalPages>{{ totalPages }}</template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxOptionItem } from '@/types';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The current page number of the pager.\n             */\n            page?: number;\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalPages?: number;\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll?: boolean;\n        }>(),\n        {\n            page: 1,\n            totalPages: null,\n            virtualScroll: false,\n        }\n    );\n    const emit = defineEmits<{\n        (e: 'page-selected', value: string | number);\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: value.toString(),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#00112C\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#00112C\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * The current page number of the pager.\n             */\n            page: number;\n\n            /**\n             * The current page number of the pager.\n             */\n            totalPages?: number;\n        }>(),\n        {\n            hasNext: null,\n            totalPages: null,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'navigate', value: number);\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * A brief description of the purpose of the navigation (for a11y).\n             * Omit the term \"navigation\", as the screen reader will read both the role and the contents of the label.\n             */\n            ariaLabel?: string;\n\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * Toggles the visibility of the \"results per page\" part of the pagination component.\n             */\n            hidePageSize?: boolean;\n\n            /**\n             * The current page number of the pager.\n             */\n            page?: number;\n\n            /**\n             *  The size of the items the pager is paging through.\n             */\n            size?: number;\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount?: number;\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll?: boolean;\n        }>(),\n        {\n            ariaLabel: null,\n            hasNext: null,\n            hidePageSize: false,\n            page: 1,\n            size: 20,\n            totalCount: null,\n            virtualScroll: false,\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the\n         * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size.\n         */\n        (e: 'navigate', page: number, items?: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         */\n        (e: 'items-page', size: number): void;\n\n        /**\n         * Triggered when the navigation controls are clicked, whether the arrow buttons to the\n         * right most of the screen or the dropdown on the right hand is updated.\n         * It indicates to which page it should go next\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:page.sync=\"currentPage\"`\n         */\n        (e: 'update:page', page: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:size.sync=\"itemsPerPage\"`\n         */\n        (e: 'update:size', size: number): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","PREDEFINED_RESULTS_PER_PAGE_VALUES","props","__props","emit","__emit","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","computed","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","uuid$2","uuid$1","uuid","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","navigate","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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"}

package/dist/chunks/payment-method.BACjrzKP.js

@@ -0,0 +1,125 @@
+import { ref as c, watch as _, createElementBlock as r, openBlock as a, mergeProps as b, createCommentVNode as w, createElementVNode as e, toDisplayString as d, defineComponent as y, toRef as $, computed as I, inject as S, createBlock as h, unref as i, normalizeClass as M, withCtx as V, createTextVNode as B } from "vue";
+import { B as E } from "./typography.DN5eC5ch.js";
+import { S as U } from "./summary-grid.keys.CxTf_FOc.js";
+import { _ as g } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/payment-method.css";
+const H = (t) => `https://checkoutshopper-live.cdn.adyen.com/checkoutshopper/images/logos/${t.toLowerCase()}.svg`, N = (t) => {
+  const o = c(t), s = c();
+  return _(
+    o,
+    (n) => {
+      n == null || n === "Unknowncard" || (s.value = H(n));
+    },
+    { immediate: !0 }
+  ), s;
+};
+let f = 0;
+const G = {
+  beforeCreate() {
+    this.uuid = f.toString(), f += 1;
+  }
+}, L = { key: 0 }, T = ["clip-path"], O = ["id"];
+function P(t, o, s, n, m, u) {
+  return a(), r("svg", b({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-pm",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "40",
+    height: "26",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (a(), r("title", L, d(t.$attrs["svg-title"]), 1)) : w("", !0),
+    e("g", {
+      "clip-path": "url(#uia-pm-icons-unknowncard__a" + t.uuid + ")"
+    }, o[0] || (o[0] = [
+      e("path", {
+        fill: "#fff",
+        d: "M0 0H40V26H0V0Z"
+      }, null, -1),
+      e("path", {
+        fill: "#00112C",
+        d: "M32 9V8C32 7.20435 31.6839 6.44129 31.1213 5.87868C30.5587 5.31607 29.7956 5 29 5H11C10.2044 5 9.44129 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8V9H32Z"
+      }, null, -1),
+      e("path", {
+        fill: "#00112C",
+        d: "M8 12V18C8 18.7956 8.31607 19.5587 8.87868 20.1213C9.44129 20.6839 10.2044 21 11 21H29C29.7956 21 30.5587 20.6839 31.1213 20.1213C31.6839 19.5587 32 18.7956 32 18V12H8Z"
+      }, null, -1),
+      e("rect", {
+        width: "5",
+        height: "2",
+        x: "24",
+        y: "16",
+        fill: "#fff",
+        rx: ".5"
+      }, null, -1)
+    ]), 8, T),
+    e("defs", null, [
+      e("clipPath", {
+        id: "uia-pm-icons-unknowncard__a" + t.uuid
+      }, o[1] || (o[1] = [
+        e("rect", {
+          width: "40",
+          height: "26",
+          fill: "#fff"
+        }, null, -1)
+      ]), 8, O)
+    ])
+  ], 16);
+}
+const R = /* @__PURE__ */ g(G, [["render", P]]), Y = { class: "b-payment-method" }, Z = { class: "b-payment-method__icon-container" }, A = ["alt", "src"], D = { class: "b-payment-method__label" }, j = { key: 0 }, z = y({
+  name: "bento-payment-method"
+}), J = /* @__PURE__ */ y({
+  ...z,
+  props: {
+    label: {},
+    small: { type: Boolean, default: !1 },
+    type: { default: "Unknowncard" }
+  },
+  setup(t) {
+    const o = t, s = $(o, "type"), n = c(!1), m = N(s), u = I(() => ({
+      "b-payment-method__icon--small": o.small
+    })), C = S(
+      U,
+      () => ({
+        isSummaryGridLayout: !1
+      })
+    ), { isSummaryGridLayout: v } = C(), k = () => {
+      n.value = !0;
+    };
+    return _(
+      () => s.value,
+      (l, p) => {
+        l !== p && (n.value = !1);
+      }
+    ), (l, p) => (a(), r("div", Y, [
+      e("div", Z, [
+        s.value !== "Unknowncard" && !n.value ? (a(), r("img", {
+          key: 0,
+          "aria-hidden": "true",
+          class: M(["b-payment-method__icon", u.value]),
+          alt: l.label,
+          src: i(m),
+          onError: k
+        }, null, 42, A)) : (a(), h(i(R), {
+          key: 1,
+          "svg-title": l.label,
+          "aria-hidden": "true"
+        }, null, 8, ["svg-title"]))
+      ]),
+      e("div", D, [
+        i(v) ? (a(), r("span", j, d(l.label), 1)) : (a(), h(i(E), {
+          key: 1,
+          el: "span"
+        }, {
+          default: V(() => [
+            B(d(l.label), 1)
+          ]),
+          _: 1
+        }))
+      ])
+    ]));
+  }
+}), Q = /* @__PURE__ */ g(J, [["__scopeId", "data-v-a8742dcb"]]);
+export {
+  Q as B
+};
+//# sourceMappingURL=payment-method.BACjrzKP.js.map

package/dist/chunks/payment-method.BACjrzKP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method.BACjrzKP.js","sources":["../../../vue2/src/components/payment-method/composables/use-payment-icon/use-payment-icon.ts","../../../ui-assets/icons-pm/dist/vue/unknowncard.vue","../../../vue2/src/components/payment-method/payment-method.vue"],"sourcesContent":["import { ref, Ref, watch } from 'vue';\n\n/**\n * Generates the payment icon URl from a payment icons string.\n * @param paymentType - the payment icon you wish to generate a URL for.\n * @returns the payment icon URL to the SVG for a specific payment icon.\n */\nexport const paymentMethodToCdnUrl = (paymentType: string) =>\n    `https://checkoutshopper-live.cdn.adyen.com/checkoutshopper/images/logos/${paymentType.toLowerCase()}.svg`;\n\n/**\n * Dynamically retrieves the payment method icon SVG from the @adyen/ui-assets-payment-method-icons package.\n *\n * @param type the type of payment method\n * @param useFallback if fallback icon should be used in case of error\n * @returns\n */\nexport const usePaymentIcon = (type: Ref<string>) => {\n    const paymentType = ref(type);\n    const paymentIconSrc = ref<string>();\n\n    watch(\n        paymentType,\n        newPaymentType => {\n            if (newPaymentType == null || newPaymentType === 'Unknowncard') {\n                return;\n            }\n            // TODO: what about when to use checkoutshopper-test? Should we add this to the config of Bento?\n            paymentIconSrc.value = paymentMethodToCdnUrl(newPaymentType);\n        },\n        { immediate: true }\n    );\n\n    return paymentIconSrc;\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-pm\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"26\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-pm-icons-unknowncard__a' + uuid + ')'\"><path fill=\"#fff\" d=\"M0 0H40V26H0V0Z\"/><path fill=\"#00112C\" d=\"M32 9V8C32 7.20435 31.6839 6.44129 31.1213 5.87868C30.5587 5.31607 29.7956 5 29 5H11C10.2044 5 9.44129 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8V9H32Z\"/><path fill=\"#00112C\" d=\"M8 12V18C8 18.7956 8.31607 19.5587 8.87868 20.1213C9.44129 20.6839 10.2044 21 11 21H29C29.7956 21 30.5587 20.6839 31.1213 20.1213C31.6839 19.5587 32 18.7956 32 18V12H8Z\"/><rect width=\"5\" height=\"2\" x=\"24\" y=\"16\" fill=\"#fff\" rx=\".5\"/></g><defs><clipPath :id=\"'uia-pm-icons-unknowncard__a' + uuid\"><rect width=\"40\" height=\"26\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-payment-method\">\n        <div class=\"b-payment-method__icon-container\">\n            <img\n                v-if=\"type !== 'Unknowncard' && !hasErroredOnImage\"\n                aria-hidden=\"true\"\n                class=\"b-payment-method__icon\"\n                :class=\"conditionalIconClasses\"\n                :alt=\"label\"\n                :src=\"paymentMethodIconSrc\"\n                @error=\"onSrcError\"\n            />\n            <unknown-card-icon v-else :svg-title=\"label\" aria-hidden=\"true\" />\n        </div>\n        <div class=\"b-payment-method__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ label }}</span>\n            <bento-typography v-else el=\"span\">{{ label }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, ref, toRef, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n    import { BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { usePaymentIcon } from './composables/use-payment-icon/use-payment-icon';\n    import type { BentoPaymentMethodProps } from './payment-method.types';\n    import UnknownCardIcon from '@adyen/ui-assets-payment-method-icons/vue/unknowncard';\n\n    const props = withDefaults(defineProps<BentoPaymentMethodProps>(), {\n        type: 'Unknowncard',\n        small: false,\n    });\n    const type = toRef(props, 'type');\n    const hasErroredOnImage = ref(false);\n    const paymentMethodIconSrc = usePaymentIcon(type);\n    const conditionalIconClasses = computed(() => ({\n        'b-payment-method__icon--small': props.small,\n    }));\n\n    /* == Summary-grid styles == */\n    const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        () => ({\n            isSummaryGridLayout: false,\n        })\n    );\n\n    const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n    /**\n     * This funciton is fired if the payment image source is not valid and has thrown an error.\n     */\n    const onSrcError = () => {\n        hasErroredOnImage.value = true;\n    };\n\n    // Reset the image error to be able to load the new payment type\n    watch(\n        () => type.value,\n        (newType, oldType) => {\n            if (newType !== oldType) {\n                hasErroredOnImage.value = false;\n            }\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A payment method type component to display the type's icon and label.\n     *\n     * @example\n     * import { BentoPaymentMethod} from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPaymentMethod },\n     *     template: `\n     *          <bento-payment-method type=\"Ideal\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-payment-method',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./payment-method.scss\" />\n"],"names":["paymentMethodToCdnUrl","paymentType","usePaymentIcon","type","ref","paymentIconSrc","watch","newPaymentType","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","defineComponent","props","__props","toRef","hasErroredOnImage","paymentMethodIconSrc","conditionalIconClasses","computed","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout","onSrcError","newType","oldType"],"mappings":";;;;;AAOO,MAAAA,IAAA,CAAAC,MAAA,2EAAAA,EAAA,YAAA,CAAA,QAUMC,IAAA,CAAAC,MAAA;AACT,QAAAF,IAAAG,EAAAD,CAAA,GACAE,IAAAD,EAAA;AAEA,SAAAE;AAAA,IAAAL;AAAA,IACI,CAAAM,MAAA;AAEI,MAAAA,KAAA,QAAAA,MAAA,kBAIAF,EAAA,QAAAL,EAAAO,CAAA;AAAA,IAA2D;AAAA,IAC/D,EAAA,WAAA,GAAA;AAAA,EACkB,GAGtBF;AACJ;AC3BI,IAAAG,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,qCAAAD,EAAA,OAAA;AAAA;;QAAkE,MAAA;AAAA,QAAY,GAAA;AAAA;;QAA2B,MAAA;AAAA,QAAe,GAAA;AAAA;;QAA8K,MAAA;AAAA,QAAe,GAAA;AAAA;;QAAoL,OAAA;AAAA,QAAU,QAAA;AAAA,QAAW,GAAA;AAAA,QAAO,GAAA;AAAA,QAAO,MAAA;AAAA,QAAY,IAAA;AAAA;IAFpuB,IAAA,GAAAL,CAAA;AAAA;;QAEkwB,IAAA,gCAAAK,EAAA;AAAA;;UAAgD,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAFz0B,IAAA,GAAAJ,CAAA;AAAA;;;qNCmFIM,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;AAvDA,UAAAC,IAAAC,GAIAhB,IAAAiB,EAAAF,GAAA,MAAA,GACAG,IAAAjB,EAAA,EAAA,GACAkB,IAAApB,EAAAC,CAAA,GACAoB,IAAAC,EAAA,OAAA;AAAA,MAA+C,iCAAAN,EAAA;AAAA,IACJ,EAAA,GAI3CO,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA,GAKAI,IAAA,MAAA;AACI,MAAAR,EAAA,QAAA;AAAA,IAA0B;AAI9B,WAAAf;AAAA,MAAA,MAAAH,EAAA;AAAA,MACe,CAAA2B,GAAAC,MAAA;AAEP,QAAAD,MAAAC,MACIV,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}