@adyen/bento-vue3 1.48.0 → 1.49.0

package/dist/chunks/inspector.types.C-Qos3dV.js

@@ -1,124 +0,0 @@
-import { defineComponent as k, ref as E, computed as h, createElementBlock as _, openBlock as i, normalizeClass as I, createElementVNode as s, createVNode as o, renderSlot as u, Transition as T, withCtx as n, createCommentVNode as f, unref as e, createTextVNode as $, toDisplayString as z, createBlock as v } from "vue";
-import { B as F } from "./typography.DN5eC5ch.js";
-import { B } from "./button.Cneb6rPP.js";
-import { B as L } from "./focus-trap.CnKbO3b1.js";
-import { B as N } from "./loading-indicator.DEepb9Wl.js";
-import { E as O } from "./expand.CJ162RaJ.js";
-import { C as S } from "./cross.BZYw4R3N.js";
-import { g as V } from "./generate-uid.NJ8tVoha.js";
-import { u as w } from "./i18n.D9azDLPe.js";
-import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/inspector.css";
-const b = {
-  "en-US": {
-    close: "Close",
-    expand: "Expand"
-  },
-  "ja-JP": {
-    close: "閉じる",
-    expand: "展開"
-  },
-  "pt-BR": {
-    close: "Fechar",
-    expand: "Expandir"
-  }
-}, j = { class: "b-inspector__page-wrapper" }, A = { class: "b-inspector__page" }, D = ["aria-labelledby"], J = { class: "b-inspector__header" }, P = { class: "b-inspector__icons" }, R = { class: "b-inspector__content" }, q = { i18n: { messages: b } }, G = /* @__PURE__ */ k({
-  ...q,
-  __name: "inspector",
-  props: {
-    expandable: { type: Boolean, default: !1 },
-    isOpen: { type: Boolean, default: !1 },
-    loading: { type: Boolean, default: !1 },
-    size: { default: "small" },
-    title: {}
-  },
-  emits: ["update:is-open", "expand"],
-  setup(g, { emit: y }) {
-    const r = g, l = y, { t: p } = w({ messages: b }), c = V("inspectorTitle"), d = E(null), x = h(() => ({
-      [`b-inspector--${r.size}`]: !0
-    })), m = () => {
-      var t;
-      r.isOpen ? d.value = document.activeElement : (t = d.value) == null || t.focus();
-    };
-    return (t, a) => (i(), _("div", {
-      class: I(["b-inspector", x.value])
-    }, [
-      s("div", j, [
-        s("div", A, [
-          u(t.$slots, "page", {}, void 0, !0)
-        ])
-      ]),
-      o(T, {
-        name: "b-inspector__animation",
-        mode: "out-in",
-        onBeforeEnter: m,
-        onAfterLeave: m
-      }, {
-        default: n(() => [
-          t.isOpen ? (i(), _("aside", {
-            key: 0,
-            class: "b-inspector__container-wrapper",
-            "aria-labelledby": e(c)
-          }, [
-            o(e(L), { class: "b-inspector__container" }, {
-              default: n(() => [
-                s("div", J, [
-                  o(e(F), {
-                    id: e(c),
-                    el: "h2",
-                    variant: "title",
-                    class: "b-inspector__title"
-                  }, {
-                    default: n(() => [
-                      $(z(t.title), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["id"]),
-                  s("div", P, [
-                    t.expandable ? (i(), v(e(B), {
-                      key: 0,
-                      variant: "tertiary",
-                      onClick: a[0] || (a[0] = (C) => l("expand"))
-                    }, {
-                      iconLeft: n(() => [
-                        o(e(O), {
-                          "svg-title": e(p)("expand")
-                        }, null, 8, ["svg-title"])
-                      ]),
-                      _: 1
-                    })) : f("", !0),
-                    o(e(B), {
-                      variant: "tertiary",
-                      onClick: a[1] || (a[1] = (C) => l("update:is-open", !1))
-                    }, {
-                      iconLeft: n(() => [
-                        o(e(S), {
-                          "svg-title": e(p)("close")
-                        }, null, 8, ["svg-title"])
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ]),
-                s("div", R, [
-                  t.loading ? (i(), v(e(N), {
-                    key: 0,
-                    large: "",
-                    class: "b-inspector__loading-indicator"
-                  })) : u(t.$slots, "content", { key: 1 }, void 0, !0)
-                ])
-              ]),
-              _: 3
-            })
-          ], 8, D)) : f("", !0)
-        ]),
-        _: 3
-      })
-    ], 2));
-  }
-}), oe = /* @__PURE__ */ U(G, [["__scopeId", "data-v-3d228829"]]), se = ["small", "large"];
-export {
-  se as B,
-  oe as i
-};
-//# sourceMappingURL=inspector.types.C-Qos3dV.js.map

package/dist/chunks/inspector.types.C-Qos3dV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector.types.C-Qos3dV.js","sources":["../../../vue2/src/components/inspector/inspector.vue","../../../vue2/src/components/inspector/inspector.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-inspector\" :class=\"conditionalClass\">\n        <div class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside v-if=\"isOpen\" class=\"b-inspector__container-wrapper\" :aria-labelledby=\"titleId\">\n                <bento-focus-trap class=\"b-inspector__container\">\n                    <div class=\"b-inspector__header\">\n                        <bento-typography :id=\"titleId\" el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                            {{ title }}\n                        </bento-typography>\n                        <div class=\"b-inspector__icons\">\n                            <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                            </bento-button>\n                            <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                            </bento-button>\n                        </div>\n                    </div>\n                    <div class=\"b-inspector__content\">\n                        <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                        <slot v-else name=\"content\" />\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoInspectorSize } from './inspector.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Shows the Expand icon in the inspector\n             */\n            expandable?: boolean;\n            /**\n             * Opens and closes the inspector\n             */\n            isOpen?: boolean;\n\n            /**\n             * Shows loading indicator for the content\n             */\n            loading?: boolean;\n\n            /**\n             * Determines the size of the inspector\n             */\n            size?: BentoInspectorSize;\n\n            /**\n             * The title of the component\n             */\n            title: string;\n        }>(),\n        {\n            expandable: false,\n            isOpen: false,\n            loading: false,\n            size: 'small',\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Emits update to keep isOpen prop in sync\n         */\n        (e: 'update:is-open', value: boolean): void;\n        /**\n         * Emits event when user click expand button\n         */\n        (e: 'expand'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const titleId = generateUid('inspectorTitle');\n    const lastFocusedElement = ref<HTMLElement>(null);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n    }));\n\n    const setFocus = () => {\n        if (props.isOpen) {\n            lastFocusedElement.value = document.activeElement as HTMLElement;\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            lastFocusedElement.value?.focus();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  @update:is-open=\"isOpen = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","titleId","generateUid","lastFocusedElement","ref","conditionalClass","computed","setFocus","_a","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;8NAsIIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;AAtFA,UAAAC,IAAAC,GAkCAC,IAAAC,GAWA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,EAAA,gBAAA,GACAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAX,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA,GAGpCY,IAAA,MAAA;;AACI,MAAAZ,EAAA,SACIQ,EAAA,QAAA,SAAA,iBAIAK,IAAAL,EAAA,UAAA,QAAAK,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEC5GKC,KAAA,CAAA,SAAA,OAAA;"}