@adyen/bento-vue3 1.26.0 → 1.28.0

package/dist/@types/packages/vue2/src/components/tabs/tabs.vue.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "../../../../vue3/node_modules/vue";
+import { nextTick, Ref } from "../../../../vue3/node_modules/vue";
 import { BentoTab } from './components/tab.types';
 import { BentoTabsEvent } from './tabs.types';
 import { Booleanish } from "../../types";
@@ -40,6 +40,81 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
 }, {
     tabs: Ref<BentoTab[]>;
     tablist: any;
+    tablistwrapper: Ref<{
+        $: import("../../../../vue3/node_modules/vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            condensed: boolean;
+            extraPaddingTop: number;
+        }> & Omit<Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
+            condensed: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            extraPaddingTop: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "condensed" | "extraPaddingTop">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("../../../../vue3/node_modules/vue").Slot;
+        }>;
+        $root: import("../../../../vue3/node_modules/vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("../../../../vue3/node_modules/vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("../../../../vue3/node_modules/vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("../../../../vue3/node_modules/vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("../../../../vue3/node_modules/vue").ComponentOptionsBase<Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
+            condensed: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            extraPaddingTop: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>>, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, {
+            condensed: boolean;
+            extraPaddingTop: number;
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("../../../../vue3/node_modules/vue").DebuggerEvent) => void) | ((e: import("../../../../vue3/node_modules/vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("../../../../vue3/node_modules/vue").DebuggerEvent) => void) | ((e: import("../../../../vue3/node_modules/vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("../../../../vue3/node_modules/vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("../../../../vue3/node_modules/vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("../../../../vue3/node_modules/vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("../../../../vue3/node_modules/vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("../../../../vue3/node_modules/vue").WatchOptions<boolean>): import("../../../../vue3/node_modules/vue").WatchStopHandle;
+    } & Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
+        condensed: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        extraPaddingTop: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & import("../../../../vue3/node_modules/vue").ShallowUnwrapRef<{}> & {} & import("../../../../vue3/node_modules/vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default: (_: {}) => any;
+        };
+    }>;
     activeTabId: Ref<string>;
     onKeydownTabsNavigation: (e: KeyboardEvent) => void;
     handleTabChange: (tabId: string) => void;

package/dist/@types/packages/vue2/src/components/tutorial/tutorial.vue.d.ts

@@ -35,6 +35,13 @@ import type { BentoTutorialScrollOptions, BentoTutorialStep } from './tutorial.t
  * }
  */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * The current step index. If provided, will start the tutorial in that step.
+     */
+    index: {
+        type: NumberConstructor;
+        default: any;
+    };
     /**
      * The steps configuration for the tutorial.
      *
@@ -53,7 +60,16 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: PropType<BentoTutorialScrollOptions>;
         default: any;
     };
-}, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    "update:index": (value: number) => void;
+}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
+    /**
+     * The current step index. If provided, will start the tutorial in that step.
+     */
+    index: {
+        type: NumberConstructor;
+        default: any;
+    };
     /**
      * The steps configuration for the tutorial.
      *
@@ -72,7 +88,10 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: PropType<BentoTutorialScrollOptions>;
         default: any;
     };
-}>>, {
+}>> & {
+    "onUpdate:index"?: (value: number) => any;
+}, {
+    index: number;
     scrollOptions: any;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/accordion';
 export * from './components/action-bar';
 export * from './components/alert';
 export * from './components/button';
+export * from './components/dashed-underline';
 export * from './components/data-grid';
 export * from './components/card';
 export * from './components/date-picker';
@@ -51,6 +52,7 @@ export * from './components/typography';
 export * from './composables/use-form-validate';
 export * from './composables/use-bento-toast-controller';
 export * from './composables/use-click-outside';
+export * from './templates/dashboard-template';
 export * from './templates/data-grid-template';
 export * from './types';
 export * from './directives';

package/dist/@types/packages/vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue.d.ts

@@ -0,0 +1,78 @@
+import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';
+/**
+ * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.
+ *
+ * @example
+ * import { BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-section :header="{ title: 'Section' }" half-width>
+ *              <template #controls>
+ *                  // Add your controls here
+ *              </template>
+ *              // You can render content with two cols
+ *              <template #content-col-1>
+ *                  // Add your content here
+ *              </template>
+ *              <template #content-col-2>
+ *                  // Add your content here
+ *              </template>
+ *              // Or you can render full width content by using default slot
+ *              // Add your content here
+ *          </bento-dashboard-section>
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header of the section
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * Renders the section to take only half of the page
+     */
+    halfWidth?: boolean;
+}>, {
+    halfWidth: boolean;
+}>, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header of the section
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * Renders the section to take only half of the page
+     */
+    halfWidth?: boolean;
+}>, {
+    halfWidth: boolean;
+}>>>, {
+    halfWidth: boolean;
+}>, {
+    infoIconTooltipContent: (_: {}) => any;
+    controls: (_: {}) => any;
+    default: (_: {}) => any;
+    'content-col-1': (_: {}) => any;
+    'content-col-2': (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/dashboard-template.types.d.ts

@@ -0,0 +1,8 @@
+import type { BentoTab } from "../../components/tabs";
+import type { BentoHeader } from "../../components/header";
+export type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$props'];
+export type BentoDashboardTemplateHeader = InstanceType<typeof BentoHeader>['$props'];
+export type BentoDashboardTemplateTabs = {
+    activeTabIndex?: number;
+    tabs: BentoDashboardTemplateTab[];
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/dashboard-template.vue.d.ts

@@ -0,0 +1,103 @@
+import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';
+/**
+ * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.
+ *
+ * @example
+ * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardTemplate, BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters>
+ *              <template #tab-1>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      <template #controls>
+ *                          // Add your controls here
+ *                      </template>
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *              <template #tab-2>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *          </bento-dashboard-template>
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header that goes to the top of the template
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currently active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs?: BentoDashboardTemplateTabs;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs?: boolean;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyFilters?: boolean;
+}>, {
+    tabs: any;
+    stickyTabs: boolean;
+    stickyFilters: boolean;
+}>, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header that goes to the top of the template
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currently active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs?: BentoDashboardTemplateTabs;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs?: boolean;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyFilters?: boolean;
+}>, {
+    tabs: any;
+    stickyTabs: boolean;
+    stickyFilters: boolean;
+}>>>, {
+    tabs: BentoDashboardTemplateTabs;
+    stickyFilters: boolean;
+    stickyTabs: boolean;
+}>, Record<string, (_: {}) => any> & {
+    infoIconTooltipContent: (_: {}) => any;
+    filters: (_: {}) => any;
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BentoDashboardTemplate } from './dashboard-template.vue';
+export { default as BentoDashboardSection } from './components/dashboard-section/dashboard-section.vue';
+export type * from './dashboard-template.types';

package/dist/@types/packages/vue2/src/utils/ts/storybook.d.ts

@@ -1,15 +1,4 @@
-export declare const storybookDocsParameter: (codeSource: string, language?: string) => {
-    docs: {
-        source: {
-            code: string;
-            language: string;
-        };
-    };
-};
-export declare const getPokemonFromApi: (pokemonName?: string) => Promise<{
-    label: any;
-    value: any;
-}[]>;
+export * from "../../../../core/src/utils/ts/storybook";
 /**
  * Adds necessary Toast component to display toasts.
  * It should be added just once on the app level, but never in the views or components itself

package/dist/accordion.js

@@ -1,128 +1,6 @@
-import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
-import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.a3d60e4f.js";
-import { C as R, a as j } from "./chunks/chevron-up.05ca20db.js";
-import { g as x } from "./chunks/unique-id.a2a2b458.js";
-import { o as M } from "./chunks/resize.a041304d.js";
-import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index10.css";
-const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
-  ...J,
-  __name: "accordion",
-  props: {
-    /**
-     * Controls accordion title size.
-     * @values default, small
-     */
-    titleSize: {
-      type: String,
-      default: "default"
-    }
-  },
-  setup(i) {
-    return k(S, B(i, "titleSize")), (c, l) => (a(), r("div", q, [
-      E(c.$slots, "default", {}, void 0, !0)
-    ]));
-  }
-});
-const ae = /* @__PURE__ */ N(K, [["__scopeId", "data-v-9fccc066"]]), L = { class: "b-accordion-item" }, Y = ["id", "aria-controls", "aria-expanded"], Z = ["id", "aria-labelledby"], F = {}, G = /* @__PURE__ */ C({
-  ...F,
-  __name: "accordion-item",
-  props: {
-    /**
-     * Sets the title of the accordion item.
-     */
-    title: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Controls if the content is visible or hidden.
-     */
-    isExpanded: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:is-expanded"],
-  setup(i, { emit: d }) {
-    const c = i, l = "b-accordion-item__animation--content", n = b(null), t = b(c.isExpanded), _ = x("accordionItemButton"), p = x("accordionItemContent"), u = O(S, "default"), { updateContentHeight: m, contentHeight: v } = U(n, t), T = $(() => v.value ? { "max-height": v.value } : {});
-    return s(
-      () => c.isExpanded,
-      (o) => {
-        t.value = o;
-      }
-    ), s(
-      () => n.value,
-      () => {
-        let o = null;
-        !o && n.value && (o = M(n.value, () => {
-          n.value && m();
-        }));
-      }
-    ), s(
-      t,
-      (o) => {
-        d("update:is-expanded", o), m();
-      },
-      { immediate: !0 }
-    ), (o, f) => (a(), r("div", L, [
-      y(e(w), {
-        el: "h3",
-        variant: e(u) === "small" ? "body" : "title",
-        strongest: e(u) === "small"
-      }, {
-        default: g(() => [
-          h("button", {
-            id: e(_),
-            "aria-controls": e(p),
-            "aria-expanded": `${t.value}`,
-            type: "button",
-            class: "b-accordion-item__button",
-            onClick: f[0] || (f[0] = (P) => t.value = !t.value)
-          }, [
-            t.value ? (a(), I(e(R), {
-              key: 0,
-              class: "b-accordion-item__icon",
-              "svg-title": "collapse",
-              "aria-hidden": "true"
-            })) : (a(), I(e(j), {
-              key: 1,
-              class: "b-accordion-item__icon",
-              "svg-title": "expand",
-              "aria-hidden": "true"
-            })),
-            z(" " + A(i.title), 1)
-          ], 8, Y)
-        ]),
-        _: 1
-      }, 8, ["variant", "strongest"]),
-      y(D, { name: l }, {
-        default: g(() => [
-          t.value ? (a(), r("div", {
-            key: 0,
-            id: e(p),
-            "aria-labelledby": e(_),
-            role: "region",
-            style: H(e(T))
-          }, [
-            h("div", {
-              ref_key: "contentDiv",
-              ref: n,
-              class: "b-accordion-item__content"
-            }, [
-              E(o.$slots, "default", {}, void 0, !0)
-            ], 512)
-          ], 12, Z)) : V("", !0)
-        ]),
-        _: 3
-      })
-    ]));
-  }
-});
-const ie = /* @__PURE__ */ N(G, [["__scopeId", "data-v-b1de8d3a"]]);
+import { a as e, b as n } from "./chunks/accordion-item.BcfGYvjn.js";
 export {
-  ae as BentoAccordion,
-  ie as BentoAccordionItem
+  e as BentoAccordion,
+  n as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../vue2/src/components/accordion/accordion.keys.ts","../../vue2/src/components/accordion/accordion.vue","../../vue2/src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"expand\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","props","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,iCCqDTC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,KAAA,WAAA,CAAA;;;;;qLCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAE,EAAA,UAAA,GAGAC,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAX,GAAAE,CAAA,GAEAU,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,CAAAY,MAAA;AAER,QAAAb,EAAA,QAAAa;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAd,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAgB,IAAA;AACA,QAAA,CAAAA,KAAAhB,EAAA,UACIgB,IAAAC,EAAAjB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIS,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAZ;AAAA,MACI,CAAAa,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}