@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/@types/components/currency/currency.vue.d.ts

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disableTypography: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     formattedCurrency: import("vue").ComputedRef<string>;
     BentoTypographyVariant: typeof BentoTypographyVariant;
@@ -25,8 +29,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disableTypography: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     currency: BentoCurrencyISOCode;
     majorUnits: boolean;
+    disableTypography: boolean;
 }>;
 export default _default;

package/dist/@types/components/data-grid/data-grid.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     filters: {
-        type: PropType<import("@/components/filter-bar").BentoFilterBarModel>;
+        type: PropType<import("../filter-bar").BentoFilterBarModel>;
         default: any;
     };
     filterSearchTerm: {
@@ -348,7 +348,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     filters: {
-        type: PropType<import("@/components/filter-bar").BentoFilterBarModel>;
+        type: PropType<import("../filter-bar").BentoFilterBarModel>;
         default: any;
     };
     filterSearchTerm: {
@@ -457,7 +457,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any[];
     };
 }>>, {
-    filters: import("@/components/filter-bar").BentoFilterBarModel;
+    filters: import("../filter-bar").BentoFilterBarModel;
     condensed: boolean;
     outline: boolean;
     loading: boolean;

package/dist/@types/components/date/date.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDateFormat>;
         default: BentoDateFormat;
     };
+    disableTypography: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     formattedDate: import("vue").ComputedRef<string>;
     BentoTypographyVariant: typeof BentoTypographyVariant;
@@ -23,7 +27,12 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDateFormat>;
         default: BentoDateFormat;
     };
+    disableTypography: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
+    disableTypography: boolean;
     date: string | number | Date;
     format: BentoDateFormat;
 }>;

package/dist/@types/components/modal/components/base-modal/base-modal.vue.d.ts

@@ -40,6 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     modal: any;
     computedAriaLabel: import("vue").ComputedRef<string>;
@@ -54,6 +58,7 @@ declare const _default: import("vue").DefineComponent<{
     modalConditionalClasses: import("vue").ComputedRef<{
         [x: string]: boolean | BentoModalSize;
         "b-modal-base__container--visible": boolean;
+        "b-modal-base__container--overflow-visible": boolean;
     }>;
     modalContentConditionalClasses: import("vue").ComputedRef<{
         'b-modal-base__content--column-layout': boolean;
@@ -117,6 +122,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     size: BentoModalSize;
     modalRole: string;
@@ -124,5 +133,6 @@ declare const _default: import("vue").DefineComponent<{
     withColumnLayout: boolean;
     columnsSize: BentoModalColumnLayoutVariant;
     initiallyOpen: boolean;
+    overflowVisible: boolean;
 }>;
 export default _default;

package/dist/@types/components/modal/components/modal-default/modal-default.vue.d.ts

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideCloseButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -79,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideCloseButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -122,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
     withColumnLayout: boolean;
     columnsSize: BentoModalColumnLayoutVariant;
     initiallyOpen: boolean;
+    overflowVisible: boolean;
     actionsLabel: string;
     destructiveActions: boolean;
 }>;

package/dist/@types/components/modal/components/modal-dialog/modal-dialog.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     dialogType: {
         type: PropType<BentoModalDialogType>;
         required: true;
@@ -58,6 +62,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     dialogType: {
         type: PropType<BentoModalDialogType>;
         required: true;
@@ -77,5 +85,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     actions: BentoButtonActionsList;
     initiallyOpen: boolean;
+    overflowVisible: boolean;
 }>;
 export default _default;

package/dist/@types/components/modal/modal.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: any;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -63,6 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         actionsLabel: string;
         destructiveActions: boolean;
         isDismissible: boolean;
+        overflowVisible: boolean;
         withColumnLayout: boolean;
         dialogType?: undefined;
         content?: undefined;
@@ -70,6 +75,7 @@ declare const _default: import("vue").DefineComponent<{
         dialogType: BentoModalDialogType;
         content: string;
         isDismissible: boolean;
+        overflowVisible: boolean;
         hideCloseButton?: undefined;
         size?: undefined;
         customPadding?: undefined;
@@ -87,6 +93,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: any;
     };
+    overflowVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -142,6 +152,7 @@ declare const _default: import("vue").DefineComponent<{
     withColumnLayout: boolean;
     columnsSize: BentoModalColumnLayoutVariant;
     isOpen: boolean;
+    overflowVisible: boolean;
     actionsLabel: string;
     destructiveActions: boolean;
     dialogType: BentoModalDialogType;

package/dist/@types/components/segmented-control/components/segmented-control-button/segmented-control-button.vue.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         'b-segmented-control-button--full-width': boolean;
     }>;
     onClick: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "update:modelValue"[], string, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
         required: true;

package/dist/@types/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoSegmentedControl } from './segmented-control.vue';
+export * from './segmented-control.types';

package/dist/@types/components/segmented-control/segmented-control.types.d.ts

@@ -0,0 +1,8 @@
+export interface BentoSegmentedControlItem {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export declare enum BentoSegmentedControlEvent {
+    UPDATE = "update:modelValue"
+}

package/dist/@types/components/segmented-control/segmented-control.vue.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue';
+import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<BentoSegmentedControlItem[]>;
+        required: true;
+        validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    inputValue: import("vue").Ref<string | number>;
+    dropdownId: string;
+    segmentedControlRef: any;
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-segmented-control--hidden': boolean;
+        'b-segmented-control--full-width': boolean;
+    }>;
+    isSegmentedControlVisible: import("vue").Ref<boolean>;
+    isSegmentedControlHidden: import("vue").ComputedRef<boolean>;
+    onInput: (value: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoSegmentedControlEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<BentoSegmentedControlItem[]>;
+        required: true;
+        validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    fullWidth: boolean;
+}>;
+export default _default;

package/dist/@types/components.d.ts

@@ -3,8 +3,6 @@ import {
     // AdlAccordion,
     // AdlAccordionItem,
     // AdlBadge,
-    // AdlSegmentedControl,
-    // AdlSegmentedOption,
     // AdlTab,
     // AdlTabs,
     // AdlTextarea,
@@ -42,6 +40,7 @@ import {
     BentoPopover,
     BentoRadioGroup,
     BentoSearchBar,
+    BentoSegmentedControl,
     BentoStatus,
     BentoStructuredList,
     BentoSummaryGrid,
@@ -63,8 +62,6 @@ declare module 'vue' {
         // AdlAccordion: typeof AdlAccordion;
         // AdlAccordionItem: typeof AdlAccordionItem;
         // AdlBadge: typeof AdlBadge;
-        // AdlSegmentedControl: typeof AdlSegmentedControl;
-        // AdlSegmentedOption: typeof AdlSegmentedOption;
         // AdlTabs: typeof AdlTabs;
         // AdlTab: typeof AdlTab;
         // AdlTextarea: typeof AdlTextarea;
@@ -102,6 +99,7 @@ declare module 'vue' {
         BentoPopover: typeof BentoPopover;
         BentoRadioGroup: typeof BentoRadioGroup;
         BentoSearchBar: typeof BentoSearchBar;
+        BentoSegmentedControl: typeof BentoSegmentedControl;
         BentoStatus: typeof BentoStatus;
         BentoStructuredList: typeof BentoStructuredList;
         BentoSummaryGrid: typeof BentoSummaryGrid;

package/dist/@types/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/payment-method';
 export * from './components/popover';
 export * from './components/radio-group';
 export * from './components/search-bar';
+export * from './components/segmented-control';
 export * from './components/status';
 export * from './components/structured-list';
 export * from './components/summary-grid';

package/dist/accordion.js

@@ -0,0 +1,206 @@
+import "./assets/index3.css";
+import { defineComponent as r, computed as l } from "vue";
+import { g as u } from "./chunks/unique-id.a2a2b458.js";
+import { n } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { C as h, a as m } from "./chunks/chevron-up.416431cd.js";
+const d = Symbol("accordion injection key");
+var o = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.GHOST = "ghost", e))(o || {}), a = /* @__PURE__ */ ((e) => (e.GROUPED = "grouped", e.SEPARATE = "separate", e))(a || {}), c = /* @__PURE__ */ ((e) => (e.LEFT = "left", e))(c || {});
+const _ = r({
+  name: "adl-accordion",
+  props: {
+    /**
+     * Indicates if all accordion items can be expanded simultaneously.
+     * If this option is toggled in Storybook a refresh is required.
+     *  - true: all accordion items can be expanded at a time
+     *  - false: only one accordion item can be expanded at a time
+     */
+    simultaneouslyExpandAllTabs: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Grouped represents if the accordion is grouped inside a container or not
+     * - true: grouped inside a container
+     * - false: independent accordion item
+     */
+    grouped: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indicates the position of caret in the accordion. The default is right.
+     * - true:  caret is on right
+     * - false: caret is on left
+     */
+    caretRight: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Variant represents accordion variant
+     * @values enum AccordionVariant
+     */
+    variant: {
+      type: String,
+      default: o.PRIMARY,
+      validator: (e) => Object.values(o).includes(e)
+    }
+  },
+  data() {
+    return {
+      accordion: {
+        items: [],
+        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,
+        variant: this.variant,
+        grouped: this.grouped,
+        caretRight: this.caretRight
+      }
+    };
+  },
+  computed: {
+    conditionalClasses() {
+      return {
+        [`ds-accordion--${o.GHOST}`]: this.variant === o.GHOST,
+        [`ds-accordion--${a.GROUPED}`]: this.grouped,
+        [`ds-accordion--${a.SEPARATE}`]: !this.grouped
+      };
+    }
+  },
+  provide() {
+    const e = l(
+      () => ({
+        caretRight: this.caretRight,
+        grouped: this.grouped,
+        variant: this.variant,
+        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,
+        registerItem: this.registerItem,
+        getItem: this.getItem,
+        open: this.open,
+        close: this.close
+      })
+    );
+    return {
+      [d]: e
+    };
+  },
+  methods: {
+    getUniqueId() {
+      return u("accordion-item");
+    },
+    registerItem(e = !1) {
+      var s;
+      const t = this.getUniqueId, i = t();
+      return (s = this.accordion.items) == null || s.push({ id: i, opened: e }), { id: i, opened: e };
+    },
+    getItem(e) {
+      return this.accordion.items.find((t) => t.id === e);
+    },
+    open(e) {
+      if (this.accordion.simultaneouslyExpandAllTabs)
+        this.accordion.items.find((t) => t.id === e).opened = !0;
+      else {
+        const t = this.accordion.items.map((i) => ({ id: i.id, opened: i.id === e }));
+        this.accordion.items = t;
+      }
+    },
+    close(e) {
+      this.accordion.items.find((t) => t.id === e).opened = !1;
+    }
+  }
+});
+var p = function() {
+  var t = this, i = t._self._c;
+  return t._self._setupProxy, i("div", { staticClass: "adl2-accordion", class: t.conditionalClasses, attrs: { "data-testid": "adl-accordion" } }, [t._t("default")], 2);
+}, v = [], f = /* @__PURE__ */ n(
+  _,
+  p,
+  v,
+  !1,
+  null,
+  "64fb63a8",
+  null,
+  null
+);
+const R = f.exports, g = r({
+  name: "adl-accordion-item",
+  components: { ChevronDown: h, ChevronUp: m },
+  // Props attribute is required by provide/inject. Do not delete.
+  props: {
+    /**
+     * Injected tabs prop that contains all the required tab query methods.
+     * NOTE: This Prop defintion can be removed when the following issue is resolved:
+     * https://github.com/vuejs/vue/issues/8969
+     */
+    accordion: { type: Object, default: null }
+  },
+  inject: { accordion: { from: d } },
+  data: () => ({
+    item: {
+      id: void 0,
+      opened: !1
+    }
+  }),
+  computed: {
+    accordionProvider() {
+      return this.accordion;
+    },
+    showContent() {
+      var e;
+      return (e = this.accordionProvider.getItem(this.item.id)) == null ? void 0 : e.opened;
+    },
+    conditionalClasses() {
+      return {
+        [`adl-accordion-item__caret-${c.LEFT}`]: !this.accordionProvider.caretRight,
+        [`adl-accordion-item--${o.GHOST}`]: this.accordionProvider.variant === o.GHOST,
+        [`adl-accordion-item--${a.GROUPED}`]: this.accordionProvider.grouped,
+        [`adl-accordion-item--${a.SEPARATE}`]: !this.accordionProvider.grouped
+      };
+    },
+    shouldShowIcon() {
+      return !!this.$slots.default;
+    },
+    shouldShowTitle() {
+      return !!this.$slots.title;
+    },
+    shouldShowSubtitle() {
+      return !!this.$slots.subtitle;
+    },
+    shouldShowPicture() {
+      return !!this.$slots.picture;
+    }
+  },
+  created() {
+    this.item = this.accordionProvider.registerItem();
+  },
+  methods: {
+    toggle() {
+      this.showContent ? this.accordionProvider.close(this.item.id) : this.accordionProvider.open(this.item.id);
+    },
+    start(e) {
+      e.style.height = `${e.scrollHeight}px`;
+    },
+    end(e) {
+      e.style.height = "";
+    }
+  }
+});
+var C = function() {
+  var t = this, i = t._self._c;
+  return t._self._setupProxy, i("div", { staticClass: "adl-accordion-item", class: t.conditionalClasses, attrs: { "data-testid": "accordion-item" } }, [i("h2", [i("button", { staticClass: "adl-accordion-item__header", attrs: { type: "button", "aria-expanded": `${t.showContent}`, "aria-controls": t.item.id }, on: { click: t.toggle } }, [t.shouldShowIcon ? i("span", { attrs: { "aria-hidden": "true" } }, [t._t("default")], 2) : t._e(), i("span", { staticClass: "adl-accordion-item__header--main-content" }, [t.shouldShowPicture ? i("div", { staticClass: "adl-accordion-item__picture", attrs: { "aria-hidden": "true", "data-testid": "adl-accordion-item-picture" } }, [t._t("picture")], 2) : t._e(), i("div", [t.shouldShowTitle ? i("div", { staticClass: "adl-accordion-item__title" }, [t._t("title")], 2) : t._e(), t.shouldShowSubtitle ? i("div", { staticClass: "adl-accordion-item__subtitle" }, [t._t("subtitle")], 2) : t._e()])]), t.showContent ? i("span", { staticClass: "adl-accordion-item__caret", attrs: { "aria-hidden": "true", "data-testid": "accordion-item-icon-show" } }, [i("chevron-up", { attrs: { "svg-title": "show accordion item" } })], 1) : t._e(), t.showContent ? t._e() : i("span", { staticClass: "adl-accordion-item__caret", attrs: { "aria-hidden": "true", "data-testid": "accordion-item-icon-hide" } }, [i("chevron-down", { attrs: { "svg-title": "hide accordion item" } })], 1)])]), i("transition", { attrs: { name: "adl-accordion-item" }, on: { enter: t.start, "after-enter": t.end, "before-leave": t.start, "after-leave": t.end } }, [i("div", { directives: [{ name: "show", rawName: "v-show", value: t.showContent, expression: "showContent" }], staticClass: "adl-accordion-item__content", attrs: { id: t.item.id } }, [i("div", { staticClass: "adl-accordion-item__description" }, [t._t("content")], 2)])])], 1);
+}, w = [], y = /* @__PURE__ */ n(
+  g,
+  C,
+  w,
+  !1,
+  null,
+  "7721fcf1",
+  null,
+  null
+);
+const T = y.exports;
+export {
+  R as AdlAccordion,
+  T as AdlAccordionItem,
+  o as AdlAccordionVariant
+};
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.types.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_INJECTION_KEY = Symbol('accordion injection key');\n","export enum AdlAccordionVariant {\n    PRIMARY = 'primary',\n    GHOST = 'ghost',\n}\n\nexport enum AdlAccordionPropClass {\n    GROUPED = 'grouped',\n    SEPARATE = 'separate',\n}\n\nexport enum AdlAccordionCaretPosition {\n    LEFT = 'left',\n}\n\nexport interface AdlAccordionItem {\n    id: string;\n    opened: boolean;\n}\n\nexport interface AdlAccordion {\n    caretRight: boolean;\n    grouped: boolean;\n    variant: AdlAccordionVariant;\n    registerItem: (opened?: boolean) => AdlAccordionItem;\n    getItem: (itemId: string) => AdlAccordionItem;\n    open: (itemId: string) => void;\n    close: (itemId: string) => void;\n}\n","<template>\n    <div class=\"adl2-accordion\" :class=\"conditionalClasses\" data-testid=\"adl-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-nocheck - Ignoring because 2.7.13 breaks the types inside data\n    import { computed, ComputedRef, defineComponent, PropType } from 'vue';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { ACCORDION_INJECTION_KEY } from './accordion.keys';\n    import { AdlAccordion, AdlAccordionItem, AdlAccordionPropClass, AdlAccordionVariant } from './accordion.types';\n\n    export default defineComponent({\n        name: `adl-accordion`,\n        props: {\n            /**\n             * Indicates if all accordion items can be expanded simultaneously.\n             * If this option is toggled in Storybook a refresh is required.\n             *  - true: all accordion items can be expanded at a time\n             *  - false: only one accordion item can be expanded at a time\n             */\n            simultaneouslyExpandAllTabs: {\n                type: Boolean,\n                default: true,\n            },\n            /**\n             * Grouped represents if the accordion is grouped inside a container or not\n             * - true: grouped inside a container\n             * - false: independent accordion item\n             */\n            grouped: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates the position of caret in the accordion. The default is right.\n             * - true:  caret is on right\n             * - false: caret is on left\n             */\n            caretRight: {\n                type: Boolean,\n                default: true,\n            },\n            /**\n             * Variant represents accordion variant\n             * @values enum AccordionVariant\n             */\n            variant: {\n                type: String as PropType<AdlAccordionVariant>,\n                default: AdlAccordionVariant.PRIMARY,\n                validator: (value: AdlAccordionVariant) => Object.values(AdlAccordionVariant).includes(value),\n            },\n        },\n        data() {\n            return {\n                accordion: {\n                    items: [],\n                    simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,\n                    variant: this.variant,\n                    grouped: this.grouped,\n                    caretRight: this.caretRight,\n                },\n            };\n        },\n        computed: {\n            conditionalClasses(): { [x: string]: boolean } {\n                return {\n                    [`ds-accordion--${AdlAccordionVariant.GHOST}`]: this.variant === AdlAccordionVariant.GHOST,\n                    [`ds-accordion--${AdlAccordionPropClass.GROUPED}`]: this.grouped,\n                    [`ds-accordion--${AdlAccordionPropClass.SEPARATE}`]: !this.grouped,\n                };\n            },\n        },\n        provide() {\n            const accordion: ComputedRef<AdlAccordion> = computed<AdlAccordion>(\n                () =>\n                    ({\n                        caretRight: this.caretRight,\n                        grouped: this.grouped,\n                        variant: this.variant,\n                        simultaneouslyExpandAllTabs: this.simultaneouslyExpandAllTabs,\n                        registerItem: this.registerItem,\n                        getItem: this.getItem,\n                        open: this.open,\n                        close: this.close,\n                    } as AdlAccordion)\n            );\n            return {\n                [ACCORDION_INJECTION_KEY]: accordion,\n            };\n        },\n        methods: {\n            getUniqueId(): string {\n                return generateUid('accordion-item');\n            },\n            registerItem(opened = false): AdlAccordionItem {\n                // TODO: the casting below has been done due to Vue 2.7 making all method types return as type unknown\n                const getUniqueId = this.getUniqueId as () => string;\n                const itemId = getUniqueId();\n                this.accordion.items?.push({ id: itemId, opened });\n                return { id: itemId, opened };\n            },\n            getItem(itemId: string): AdlAccordionItem {\n                return this.accordion.items.find(item => item.id === itemId);\n            },\n            open(itemId: string): void {\n                if (this.accordion.simultaneouslyExpandAllTabs) {\n                    this.accordion.items.find(item => item.id === itemId).opened = true;\n                } else {\n                    const newItems = this.accordion.items.map(item => ({ id: item.id, opened: item.id === itemId }));\n                    this.accordion.items = newItems;\n                }\n            },\n            close(itemId: string): void {\n                this.accordion.items.find(item => item.id === itemId).opened = false;\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"adl-accordion-item\" :class=\"conditionalClasses\" data-testid=\"accordion-item\">\n        <!-- TODO: decide what kind of heading level to assign! -->\n        <h2>\n            <button\n                type=\"button\"\n                :aria-expanded=\"`${showContent}`\"\n                :aria-controls=\"item.id\"\n                class=\"adl-accordion-item__header\"\n                @click=\"toggle\"\n            >\n                <span v-if=\"shouldShowIcon\" aria-hidden=\"true\">\n                    <slot />\n                </span>\n                <span class=\"adl-accordion-item__header--main-content\">\n                    <div\n                        v-if=\"shouldShowPicture\"\n                        aria-hidden=\"true\"\n                        class=\"adl-accordion-item__picture\"\n                        data-testid=\"adl-accordion-item-picture\"\n                    >\n                        <slot name=\"picture\" />\n                    </div>\n                    <div>\n                        <div v-if=\"shouldShowTitle\" class=\"adl-accordion-item__title\">\n                            <slot name=\"title\" />\n                        </div>\n                        <div v-if=\"shouldShowSubtitle\" class=\"adl-accordion-item__subtitle\">\n                            <slot name=\"subtitle\" />\n                        </div>\n                    </div>\n                </span>\n                <span\n                    v-if=\"showContent\"\n                    aria-hidden=\"true\"\n                    class=\"adl-accordion-item__caret\"\n                    data-testid=\"accordion-item-icon-show\"\n                >\n                    <chevron-up svg-title=\"show accordion item\" />\n                </span>\n                <span\n                    v-if=\"!showContent\"\n                    aria-hidden=\"true\"\n                    class=\"adl-accordion-item__caret\"\n                    data-testid=\"accordion-item-icon-hide\"\n                >\n                    <chevron-down svg-title=\"hide accordion item\" />\n                </span>\n            </button>\n        </h2>\n        <transition\n            name=\"adl-accordion-item\"\n            @enter=\"start\"\n            @after-enter=\"end\"\n            @before-leave=\"start\"\n            @after-leave=\"end\"\n        >\n            <div v-show=\"showContent\" :id=\"item.id\" class=\"adl-accordion-item__content\">\n                <div class=\"adl-accordion-item__description\">\n                    <slot name=\"content\" />\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        AdlAccordion,\n        AdlAccordionCaretPosition,\n        AdlAccordionPropClass,\n        AdlAccordionVariant,\n    } from '../accordion.types';\n    import { ACCORDION_INJECTION_KEY } from '../accordion.keys';\n    import ChevronUp from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import ChevronDown from '@adyen/ui-assets-icons-16/vue/chevron-down';\n\n    export default defineComponent({\n        name: 'adl-accordion-item',\n        components: { ChevronDown, ChevronUp },\n        // Props attribute is required by provide/inject. Do not delete.\n        props: {\n            /**\n             * Injected tabs prop that contains all the required tab query methods.\n             * NOTE: This Prop defintion can be removed when the following issue is resolved:\n             * https://github.com/vuejs/vue/issues/8969\n             */\n            accordion: { type: Object as PropType<AdlAccordion>, default: null },\n        },\n        inject: { accordion: { from: ACCORDION_INJECTION_KEY } },\n        data: () => ({\n            item: {\n                id: undefined,\n                opened: false,\n            },\n        }),\n        computed: {\n            accordionProvider(): AdlAccordion {\n                return this.accordion;\n            },\n            showContent(): boolean {\n                return this.accordionProvider.getItem(this.item.id)?.opened;\n            },\n            conditionalClasses(): { [key: string]: boolean } {\n                return {\n                    [`adl-accordion-item__caret-${AdlAccordionCaretPosition.LEFT}`]: !this.accordionProvider.caretRight,\n                    [`adl-accordion-item--${AdlAccordionVariant.GHOST}`]:\n                        this.accordionProvider.variant === AdlAccordionVariant.GHOST,\n                    [`adl-accordion-item--${AdlAccordionPropClass.GROUPED}`]: this.accordionProvider.grouped,\n                    [`adl-accordion-item--${AdlAccordionPropClass.SEPARATE}`]: !this.accordionProvider.grouped,\n                };\n            },\n            shouldShowIcon(): boolean {\n                return !!this.$slots.default;\n            },\n            shouldShowTitle(): boolean {\n                return !!this.$slots.title;\n            },\n            shouldShowSubtitle(): boolean {\n                return !!this.$slots.subtitle;\n            },\n            shouldShowPicture(): boolean {\n                return !!this.$slots.picture;\n            },\n        },\n        created() {\n            this.item = this.accordionProvider.registerItem();\n        },\n        methods: {\n            toggle() {\n                if (this.showContent) {\n                    this.accordionProvider.close(this.item.id);\n                } else {\n                    this.accordionProvider.open(this.item.id);\n                }\n            },\n            start(el) {\n                // eslint-disable-next-line no-param-reassign\n                el.style.height = `${el.scrollHeight}px`;\n            },\n            end(el) {\n                // eslint-disable-next-line no-param-reassign\n                el.style.height = '';\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_INJECTION_KEY","AdlAccordionVariant","AdlAccordionVariant2","AdlAccordionPropClass","AdlAccordionPropClass2","AdlAccordionCaretPosition","AdlAccordionCaretPosition2","_sfc_main$1","defineComponent","value","accordion","computed","generateUid","opened","getUniqueId","itemId","_a","item","newItems","_sfc_main","ChevronDown","ChevronUp","el"],"mappings":"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"}