@adyen/bento-vue2 1.48.0 → 1.49.0

package/dist/chunks/inspector.types.GOl_-hXm.js

@@ -1,70 +0,0 @@
-import { defineComponent as c, ref as l, computed as p } from "vue";
-import { B as d } from "./typography.J1v_SPG3.js";
-import { B as _ } from "./button.CdAFZa4V.js";
-import { B as u } from "./focus-trap.CGypVwG6.js";
-import { B as f } from "./loading-indicator.z8COalOc.js";
-import { E as m } from "./expand.CwwKq7Uc.js";
-import { C as v } from "./cross.CsUPDmaA.js";
-import { g as B } from "./generate-uid.NJ8tVoha.js";
-import { u as C } from "./i18n.BQkEbtPM.js";
-import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/inspector.css";
-const g = {
-  "en-US": {
-    close: "Close",
-    expand: "Expand"
-  },
-  "ja-JP": {
-    close: "閉じる",
-    expand: "展開"
-  },
-  "pt-BR": {
-    close: "Fechar",
-    expand: "Expandir"
-  }
-}, x = { i18n: { messages: g } }, y = /* @__PURE__ */ c({
-  ...x,
-  __name: "inspector",
-  props: {
-    expandable: { type: Boolean, default: !1 },
-    isOpen: { type: Boolean, default: !1 },
-    loading: { type: Boolean, default: !1 },
-    size: { default: "small" },
-    title: null
-  },
-  emits: ["update:is-open", "expand"],
-  setup(a, { emit: s }) {
-    const t = a, { t: e } = C(), n = B("inspectorTitle"), o = l(null), r = p(() => ({
-      [`b-inspector--${t.size}`]: !0
-    }));
-    return { __sfc: !0, props: t, emit: s, t: e, titleId: n, lastFocusedElement: o, conditionalClass: r, setFocus: () => {
-      var i;
-      t.isOpen ? o.value = document.activeElement : (i = o.value) == null || i.focus();
-    }, BentoTypography: d, BentoButton: _, BentoFocusTrap: u, BentoLoadingIndicator: f, ExpandIcon: m, CrossIcon: v };
-  }
-});
-var I = function() {
-  var s = this, t = s._self._c, e = s._self._setupProxy;
-  return t("div", { staticClass: "b-inspector", class: e.conditionalClass }, [t("div", { staticClass: "b-inspector__page-wrapper" }, [t("div", { staticClass: "b-inspector__page" }, [s._t("page")], 2)]), t("Transition", { attrs: { name: "b-inspector__animation", mode: "out-in" }, on: { "before-enter": e.setFocus, "after-leave": e.setFocus } }, [s.isOpen ? t("aside", { staticClass: "b-inspector__container-wrapper", attrs: { "aria-labelledby": e.titleId } }, [t(e.BentoFocusTrap, { staticClass: "b-inspector__container" }, [t("div", { staticClass: "b-inspector__header" }, [t(e.BentoTypography, { staticClass: "b-inspector__title", attrs: { id: e.titleId, el: "h2", variant: "title" } }, [s._v(" " + s._s(s.title) + " ")]), t("div", { staticClass: "b-inspector__icons" }, [s.expandable ? t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(n) {
-    return e.emit("expand");
-  } }, scopedSlots: s._u([{ key: "iconLeft", fn: function() {
-    return [t(e.ExpandIcon, { attrs: { "svg-title": e.t("expand") } })];
-  }, proxy: !0 }], null, !1, 1210869445) }) : s._e(), t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(n) {
-    return e.emit("update:is-open", !1);
-  } }, scopedSlots: s._u([{ key: "iconLeft", fn: function() {
-    return [t(e.CrossIcon, { attrs: { "svg-title": e.t("close") } })];
-  }, proxy: !0 }], null, !1, 858730413) })], 1)], 1), t("div", { staticClass: "b-inspector__content" }, [s.loading ? t(e.BentoLoadingIndicator, { staticClass: "b-inspector__loading-indicator", attrs: { large: "" } }) : s._t("content")], 2)])], 1) : s._e()])], 1);
-}, F = [], E = /* @__PURE__ */ b(
-  y,
-  I,
-  F,
-  !1,
-  null,
-  "8cd3a178"
-);
-const U = E.exports, j = ["small", "large"];
-export {
-  j as B,
-  U as i
-};
-//# sourceMappingURL=inspector.types.GOl_-hXm.js.map

package/dist/chunks/inspector.types.GOl_-hXm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector.types.GOl_-hXm.js","sources":["../../src/components/inspector/inspector.vue","../../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 = defineProps({\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null\n});\n\n    const emit = defineEmits([\"update:is-open\", \"expand\"]);\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","t","useI18n","titleId","generateUid","lastFocusedElement","ref","conditionalClass","computed","props","_a","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GAmGIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;iBAzCA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gBAAA,GACAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAC,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA;mHAGpC,MAAA;;AACI,MAAAA,EAAA,SACIJ,EAAA,QAAA,SAAA,iBAIAK,IAAAL,EAAA,UAAA,QAAAK,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;qBCzEKC,IAAA,CAAA,SAAA,OAAA;"}