@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/tabs.js

@@ -0,0 +1,106 @@
+import "./assets/index32.css";
+import { defineComponent as b, inject as c, ref as l, provide as _, onMounted as T } from "vue";
+import { n as d } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { BentoTypography as m, BentoTypographyElement as g, BentoTypographyVariant as h } from "./typography.js";
+import { g as I } from "./chunks/unique-id.a2a2b458.js";
+const u = Symbol("tabs registerTab injection key"), f = Symbol("tabs active tab ID key"), w = b({
+  props: {
+    /**
+     * Title of the tab
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines whether the tab is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(a) {
+    const t = c(u), e = c(f), i = t(a);
+    return { activeTabId: e, id: i };
+  }
+});
+var x = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t._t("default")], 2);
+}, k = [], B = /* @__PURE__ */ d(
+  w,
+  x,
+  k,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const D = B.exports, p = (a, t) => {
+  const e = a === 0 ? t.length - 1 : a - 1;
+  return t[e].disabled ? p(e, t) : e;
+}, v = (a, t) => {
+  const e = a === t.length - 1 ? 0 : a + 1;
+  return t[e].disabled ? v(e, t) : e;
+}, A = b({
+  components: {
+    BentoTypography: m
+  },
+  setup() {
+    const a = l([]), t = l(null), e = l("");
+    _(f, e), _(u, ({ title: s, disabled: n }) => {
+      const o = I("b-tab");
+      return a.value.push({ disabled: n, id: o, title: s }), o;
+    });
+    const r = (s) => {
+      if (s.code === "ArrowLeft" || s.code === "ArrowRight") {
+        const n = a.value.find((y) => document.activeElement.id === y.id);
+        let o = a.value.indexOf(n);
+        s.code === "ArrowLeft" ? o = p(o, a.value) : s.code === "ArrowRight" && (o = v(o, a.value)), t.value.children[o].focus();
+      }
+    };
+    return T(() => {
+      const s = a.value.find((n) => !n.disabled);
+      s && (e.value = s.id);
+    }), {
+      BentoTypographyElement: g,
+      BentoTypographyVariant: h,
+      tabs: a,
+      tablist: t,
+      activeTabId: e,
+      onKeydownTabsNavigation: r
+    };
+  }
+});
+var C = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ disabled: i, id: r, title: s }) {
+    return e("button", { key: r, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": t.activeTabId === r,
+      "b-tabs__tab--disabled": i
+    }, attrs: { id: r, role: "tab", type: "button", "aria-controls": `${r}-tabpanel`, "aria-selected": t.activeTabId === r ? "true" : "false", tabindex: t.activeTabId === r && !i ? null : -1, disabled: i }, on: { click: function(n) {
+      t.activeTabId = r;
+    }, keydown: function(n) {
+      if (!n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") && t._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]))
+        return null;
+      t.activeTabId = r;
+    } } }, [e("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._v(" " + t._s(s) + " ")]), e("span", { directives: [{ name: "show", rawName: "v-show", value: !i, expression: "!disabled" }], staticClass: "b-tabs__tab-underline" })], 1);
+  }), 0), t._t("default")], 2);
+}, E = [], N = /* @__PURE__ */ d(
+  A,
+  C,
+  E,
+  !1,
+  null,
+  "0003f992",
+  null,
+  null
+);
+const Y = N.exports;
+export {
+  D as BentoTab,
+  Y as BentoTabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../src/components/tabs/tabs.keys.ts","../src/components/tabs/components/tab.vue","../src/components/tabs/tabs.utils.ts","../src/components/tabs/tabs.vue"],"sourcesContent":["export const TABS_REGISTER_TAB_INJECTION_KEY = Symbol('tabs registerTab injection key');\nexport const TABS_ACTIVE_TAB_ID_KEY = Symbol('tabs active tab ID key');\n","<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, inject } from 'vue';\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from '../tabs.keys';\n    import { RegisterBentoTab } from '../tabs.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const registerTab: RegisterBentoTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n            const id = registerTab(props);\n\n            return { activeTabId, id };\n        },\n    });\n</script>\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","<template>\n    <div class=\"b-tabs\">\n        <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n            <button\n                v-for=\"{ disabled, id, title } in tabs\"\n                :id=\"id\"\n                :key=\"id\"\n                class=\"b-tabs__tab\"\n                :class=\"{\n                    'b-tabs__tab--active': activeTabId === id,\n                    'b-tabs__tab--disabled': disabled,\n                }\"\n                role=\"tab\"\n                type=\"button\"\n                :aria-controls=\"`${id}-tabpanel`\"\n                :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                :tabindex=\"activeTabId === id && !disabled ? null : -1\"\n                :disabled=\"disabled\"\n                @click=\"activeTabId = id\"\n                @keydown.enter.space=\"activeTabId = id\"\n            >\n                <bento-typography\n                    class=\"b-tabs__tab-title\"\n                    :el=\"BentoTypographyElement.SPAN\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                    stronger\n                >\n                    {{ title }}\n                </bento-typography>\n                <span v-show=\"!disabled\" class=\"b-tabs__tab-underline\"></span>\n            </button>\n        </div>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, onMounted, provide, ref } from 'vue';\n\n    // components\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { RegisterBentoTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n        },\n        setup() {\n            const tabs = ref<BentoTab[]>([]);\n            const tablist = ref(null);\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // register tab\n            const registerTab: RegisterBentoTab = ({ title, disabled }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title });\n\n                // return values to the Tab component\n                return id;\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            // set first (enabled) tab to active\n            onMounted(() => {\n                const firstEnabledTab = tabs.value.find(tab => !tab.disabled);\n\n                if (firstEnabledTab) {\n                    activeTabId.value = firstEnabledTab.id;\n                }\n            });\n\n            return {\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                tabs,\n                tablist,\n                activeTabId,\n                onKeydownTabsNavigation,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["TABS_REGISTER_TAB_INJECTION_KEY","TABS_ACTIVE_TAB_ID_KEY","_sfc_main$1","defineComponent","props","registerTab","inject","activeTabId","id","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","_sfc_main","BentoTypography","tabs","ref","tablist","provide","title","disabled","generateUid","onKeydownTabsNavigation","e","activeTab","tab","onMounted","firstEnabledTab","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;;AAAa,MAAAA,IAAA,OAAA,gCAAA,GACAC,IAAA,OAAA,wBAAA,GCUbC,IAAAC,EAAA;AAAA,EAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAAN,CAAA,GACAO,IAAAD,EAAAL,CAAA,GACAO,IAAAH,EAAAD,CAAA;AAEA,WAAA,EAAA,aAAAG,GAAA,IAAAC,EAAA;AAAA,EAAA;AAEA,CAAA;;;;;;;;;;;;;;qBCjCaC,IAAA,CAAAC,GAAAC,MAAA;AACT,QAAAC,IAAAF,MAAA,IAAAC,EAAA,SAAA,IAAAD,IAAA;AACA,SAAAC,EAAAC,CAAA,EAAA,WACIH,EAAAG,GAAAD,CAAA,IAEJC;AACJ,GAEaC,IAAA,CAAAH,GAAAC,MAAA;AACT,QAAAC,IAAAF,MAAAC,EAAA,SAAA,IAAA,IAAAD,IAAA;AACA,SAAAC,EAAAC,CAAA,EAAA,WACIC,EAAAD,GAAAD,CAAA,IAEJC;AACJ,GCkEAE,IAAAX,EAAA;AAAA,EAAA,YAAA;AAAA,IACA,iBAAAY;AAAA,EACA;AAAA,EACA,QAAA;AAEA,UAAAC,IAAAC,EAAA,CAAA,CAAA,GACAC,IAAAD,EAAA,IAAA,GACAV,IAAAU,EAAA,EAAA;AAEA,IAAAE,EAAAlB,GAAAM,CAAA,GAcAY,EAAAnB,GAXA,CAAA,EAAA,OAAAoB,GAAA,UAAAC,EAAA,MAAA;AACA,YAAAb,IAAAc,EAAA,OAAA;AAGA,aAAAN,EAAA,MAAA,KAAA,EAAA,UAAAK,GAAA,IAAAb,GAAA,OAAAY,EAAA,CAAA,GAGAZ;AAAA,IAAA,CAIA;AAGA,UAAAe,IAAA,CAAAC,MAAA;AACA,UAAAA,EAAA,SAAA,eAAAA,EAAA,SAAA,cAAA;AAEA,cAAAC,IAAAT,EAAA,MAAA,KAAA,CAAAU,MAAA,SAAA,cAAA,OAAAA,EAAA,EAAA;AACA,YAAAhB,IAAAM,EAAA,MAAA,QAAAS,CAAA;AAGA,QAAAD,EAAA,SAAA,cACAd,IAAAD,EAAAC,GAAAM,EAAA,KAAA,IAAAQ,EAAA,SAAA,iBAEAd,IAAAG,EAAAH,GAAAM,EAAA,KAAA,IAIAE,EAAA,MAAA,SAAAR,CAAA,EAAA,MAAA;AAAA;AAAA,IACA;AAIA,WAAAiB,EAAA,MAAA;AACA,YAAAC,IAAAZ,EAAA,MAAA,KAAA,CAAAU,MAAA,CAAAA,EAAA,QAAA;AAEA,MAAAE,MACArB,EAAA,QAAAqB,EAAA;AAAA,IACA,CAAA,GAGA;AAAA,MAAA,wBAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,MAAAd;AAAA,MACA,SAAAE;AAAA,MACA,aAAAX;AAAA,MACA,yBAAAgB;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/tag.js

@@ -0,0 +1,73 @@
+import "./assets/index27.css";
+import { defineComponent as m, computed as l } from "vue";
+import { BentoTypography as _, BentoTypographyVariant as p, BentoTypographyElement as d } from "./typography.js";
+import { u as b } from "./chunks/aria-label.ac9651a5.js";
+import { B as v } from "./chunks/tooltip.a4625a7b.js";
+import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var n = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(n || {});
+const g = m({
+  name: "bento-tag",
+  components: { BentoTypography: _ },
+  directives: { BentoTooltipDirective: v },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The label text content of the Tag.
+     */
+    label: { type: String, default: null },
+    /**
+     * The variant variant of tag
+     */
+    variant: {
+      type: String,
+      default: n.GREY,
+      validator: (e) => Object.values(n).includes(e)
+    },
+    /**
+     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...".
+     */
+    truncate: { type: Number, default: null }
+  },
+  setup(e, { slots: t }) {
+    var i;
+    const r = b({
+      label: e.label || ((i = t.default) == null ? void 0 : i.call(t)[0].text.trim()),
+      defaultFallback: "tag"
+    }), c = l(() => ({
+      [`b-tag--${e.variant}`]: e.variant
+    })), a = l(() => {
+      var u;
+      return e.label || ((u = t.default) == null ? void 0 : u.call(t)[0].text.trim()) || "tag";
+    }), o = l(() => e.truncate && a.value.length > e.truncate), s = l(() => e.truncate && o.value ? `${a.value.slice(0, e.truncate)}...` : a.value);
+    return {
+      // Values
+      computedAriaLabel: r,
+      textFromSlot: a,
+      formattedText: s,
+      tagConditionalClasses: c,
+      shouldShowTooltip: o,
+      // Enums
+      BentoTypographyVariant: p,
+      BentoTypographyElement: d
+    };
+  }
+});
+var y = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: t.shouldShowTooltip ? t.textFromSlot : null, expression: "shouldShowTooltip ? textFromSlot : null" }], staticClass: "b-tag", class: t.tagConditionalClasses, attrs: { "aria-label": t.computedAriaLabel, role: "mark" } }, [r("bento-typography", { staticClass: "b-tag__label", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.CAPTION, stronger: "" } }, [t._v(" " + t._s(t.formattedText) + " ")])], 1);
+}, h = [], x = /* @__PURE__ */ f(
+  g,
+  y,
+  h,
+  !1,
+  null,
+  "b3ca3eb4",
+  null,
+  null
+);
+const R = x.exports;
+export {
+  R as BentoTag,
+  n as BentoTagVariant
+};
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../src/components/tag/tag.types.ts","../src/components/tag/tag.vue"],"sourcesContent":["export enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n        role=\"mark\"\n    >\n        <bento-typography\n            class=\"b-tag__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.CAPTION\"\n            stronger\n        >\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTagVariant } from './tag.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    export default defineComponent({\n        name: 'bento-tag',\n        components: { BentoTypography },\n        directives: { BentoTooltipDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * The label text content of the Tag.\n             */\n            label: { type: String, default: null },\n\n            /**\n             * The variant variant of tag\n             */\n            variant: {\n                type: String as PropType<BentoTagVariant>,\n                default: BentoTagVariant.GREY,\n                validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n            },\n\n            /**\n             * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n             */\n            truncate: { type: Number, default: null },\n        },\n        setup(props, { slots }) {\n            const computedAriaLabel = useAriaLabel({\n                label: props.label || slots.default?.()[0].text.trim(),\n                defaultFallback: 'tag',\n            });\n\n            const tagConditionalClasses = computed(() => ({\n                [`b-tag--${props.variant}`]: props.variant,\n            }));\n\n            const textFromSlot = computed(() => props.label || slots.default?.()[0].text.trim() || 'tag');\n            const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n            const formattedText = computed(() => {\n                if (!props.truncate) {\n                    return textFromSlot.value;\n                }\n\n                return shouldShowTooltip.value\n                    ? `${textFromSlot.value.slice(0, props.truncate)}...`\n                    : textFromSlot.value;\n            });\n\n            return {\n                // Values\n                computedAriaLabel,\n                textFromSlot,\n                formattedText,\n                tagConditionalClasses,\n                shouldShowTooltip,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","_a","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText","BentoTypographyVariant","BentoTypographyElement"],"mappings":";;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC0BZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;;AAEA,UAAAC,IAAAC,EAAA;AAAA,MAAA,OAAAH,EAAA,WAAAI,IAAAH,EAAA,YAAA,gBAAAG,EAAA,KAAAH,GAAA,GAAA,KAAA;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAI,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,UAAAN,EAAA,SAAA,GAAAA,EAAA;AAAA,IACA,EAAA,GAGAO,IAAAD,EAAA,MAAA;;AAAA,aAAAN,EAAA,WAAAI,IAAAH,EAAA,YAAA,gBAAAG,EAAA,KAAAH,GAAA,GAAA,KAAA,WAAA;AAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACAN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,SAHAO,EAAA,KAKA;AAGA,WAAA;AAAA;AAAA,MAAA,mBAAAL;AAAA,MAEA,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA;AAAA,MACA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/textarea.js

@@ -0,0 +1,64 @@
+import "./assets/index2.css";
+import { defineComponent as n } from "vue";
+import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+const l = n({
+  name: "adl-textarea",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Text displayed as the label of the textarea
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed as the help text of the textarea
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed as the placeholder of the textarea
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed as the value of the textarea
+     */
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["input"],
+  setup(a, { emit: e }) {
+    return {
+      // Methods
+      onInput: (s) => {
+        e("input", s.target.value);
+      }
+    };
+  }
+});
+var _ = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("label", { staticClass: "adl2-textarea" }, [e.label ? t("span", { staticClass: "adl2-textarea__label" }, [e._v(e._s(e.label))]) : e._e(), t("textarea", { staticClass: "adl2-textarea__input", attrs: { placeholder: e.placeholder }, domProps: { value: e.value }, on: { input: e.onInput } }), e.description ? t("span", { staticClass: "adl2-textarea__description" }, [e._v(e._s(e.description))]) : e._e()]);
+}, p = [], o = /* @__PURE__ */ r(
+  l,
+  _,
+  p,
+  !1,
+  null,
+  "1eceed15",
+  null,
+  null
+);
+const u = o.exports;
+export {
+  u as AdlTextarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../src/components/textarea/textarea.vue"],"sourcesContent":["<template>\n    <label class=\"adl2-textarea\">\n        <span v-if=\"label\" class=\"adl2-textarea__label\">{{ label }}</span>\n        <textarea class=\"adl2-textarea__input\" :placeholder=\"placeholder\" :value=\"value\" @input=\"onInput\"></textarea>\n        <span v-if=\"description\" class=\"adl2-textarea__description\">{{ description }}</span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    export default defineComponent({\n        name: 'adl-textarea',\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text displayed as the label of the textarea\n             */\n            label: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Text displayed as the help text of the textarea\n             */\n            description: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Text displayed as the placeholder of the textarea\n             */\n            placeholder: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Text displayed as the value of the textarea\n             */\n            value: {\n                type: String,\n                default: '',\n            },\n        },\n        emits: ['input'],\n        setup(props, { emit }) {\n            const onInput = (event: Event) => {\n                emit('input', (event.target as HTMLTextAreaElement).value);\n            };\n\n            return {\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["_sfc_main","defineComponent","props","emit","event"],"mappings":";;;AAWA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAMA,WAAA;AAAA;AAAA,MAAA,SAJA,CAAAC,MAAA;AACA,QAAAD,EAAA,SAAAC,EAAA,OAAA,KAAA;AAAA,MAAA;AAAA,IAKA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/toast.js

@@ -0,0 +1,132 @@
+import "./assets/index36.css";
+import { defineComponent as p, ref as u, computed as c, onMounted as b, watch as T } from "vue";
+import { u as y } from "./chunks/toastController.b1b08299.js";
+import { I as B } from "./chunks/info-filled.9748686e.js";
+import { C } from "./chunks/cross-small.7ecb1b97.js";
+import { B as k, a as S } from "./chunks/button.31b757d1.js";
+import { BentoTypography as x, BentoTypographyElement as w, BentoTypographyVariant as I } from "./typography.js";
+import { h as $ } from "./chunks/hasSlot.dceac207.js";
+import { n as d } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+const A = {
+  "en-US": {
+    dismiss: "Dismiss"
+  }
+}, R = p({
+  i18n: { messages: A },
+  name: "toast-item",
+  components: { BentoButton: k, BentoTypography: x, CrossIcon: C, InfoIcon: B },
+  inheritAttrs: !1,
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["click", "dismiss"],
+  setup(a, { slots: t, emit: s }) {
+    const o = () => s("dismiss"), e = () => {
+      a.action.handler(), s("dismiss");
+    };
+    return {
+      // Enums
+      BentoButtonVariant: S,
+      BentoTypographyElement: w,
+      BentoTypographyVariant: I,
+      // Methods
+      dismissButtonClicked: o,
+      hasSlot: $(t),
+      onActionClicked: e
+    };
+  }
+});
+var D = function() {
+  var t = this, s = t._self._c;
+  return t._self._setupProxy, s("div", { staticClass: "b-toast-item", attrs: { "data-testid": "toast-item" } }, [s("div", { staticClass: "b-toast-item__container" }, [s("info-icon", { staticClass: "b-toast-item__left-icon b-toast-item__info-icon", attrs: { name: "info", "aria-hidden": "true" } }), s("output", { attrs: { role: "status" } }, [s("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, strongest: "" } }, [t._v(" " + t._s(t.text) + " ")])], 1)], 1), s("div", { staticClass: "b-toast-item__container" }, [t.action ? s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.onActionClicked } }, [t._v(" " + t._s(t.action.text) + " ")]) : t._e(), s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.dismissButtonClicked }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [s("cross-icon", { attrs: { "svg-title": t.$t("dismiss") } })];
+  }, proxy: !0 }]) })], 1)]);
+}, E = [], H = /* @__PURE__ */ d(
+  R,
+  D,
+  E,
+  !1,
+  null,
+  "36035c0a",
+  null,
+  null
+);
+const O = H.exports, P = 5e3, V = p({
+  name: "bento-toast",
+  components: { ToastItem: O },
+  inheritAttrs: !1,
+  setup() {
+    const { state: a } = y(), t = u(null), s = u(null), o = c(() => a.queue.slice(-3)), e = () => {
+      clearTimeout(t.value);
+    }, l = (n) => {
+      t.value = setTimeout(() => {
+        e(), n.dismiss();
+      }, P);
+    }, _ = () => {
+      e();
+      const n = o.value.slice(-1)[0];
+      n && l(n);
+    };
+    b(() => {
+      _();
+    }), T(
+      () => o.value,
+      () => {
+        o.value.length && (e(), _());
+      }
+    );
+    const f = c(
+      () => o.value.map((n, i) => {
+        const g = o.value.length - 1;
+        return {
+          top: `${10 * i}px`,
+          width: `${100 - 10 * (g - i)}%`
+        };
+      })
+    ), h = c(() => {
+      var r;
+      const n = (r = s.value) == null ? void 0 : r.offsetWidth, i = o.value.length - 1, m = i ? 10 * i : 0;
+      return {
+        bottom: `${n}px`,
+        height: `${m}px`
+      };
+    });
+    return {
+      // Values,
+      computedPositioning: f,
+      computedHeight: h,
+      toastsToShow: o,
+      toast: s
+    };
+  }
+});
+var F = function() {
+  var t = this, s = t._self._c;
+  return t._self._setupProxy, t.toastsToShow.length ? s("div", { staticClass: "b-toast", style: t.computedHeight }, [s("transition-group", { staticClass: "b-toast__container", attrs: { name: "b-toast", tag: "ul", "aria-live": "polite", "move-class": "b-toast__container--move", "enter-active-class": "b-toast__container--enter-active", "leave-active-class": "b-toast__container--leave-active", "enter-from-class": "b-toast__container--enter-from", "leave-to-class": "b-toast__container--leave-to" } }, t._l(t.toastsToShow, function(o, e) {
+    return s("li", { key: e, staticClass: "b-toast__item", style: t.computedPositioning[e], attrs: { inert: e !== t.toastsToShow.length - 1 } }, [s("toast-item", { ref: e === t.toastsToShow.length - 1 ? "toast" : null, refInFor: !0, class: e !== t.toastsToShow.length - 1 ? "b-toast--light-background" : null, attrs: { text: o.text, action: o.action }, on: { dismiss: function(l) {
+      return o.dismiss();
+    } } })], 1);
+  }), 0)], 1) : t._e();
+}, Y = [], q = /* @__PURE__ */ d(
+  V,
+  F,
+  Y,
+  !1,
+  null,
+  "d558ce5a",
+  null,
+  null
+);
+const K = q.exports;
+export {
+  K as BentoToast,
+  y as useBentoToastController
+};
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button\n                v-if=\"action\"\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"onActionClicked\"\n            >\n                {{ action.text }}\n            </bento-button>\n            <bento-button\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"dismissButtonClicked\"\n            >\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        inheritAttrs: false,\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Methods\n                dismissButtonClicked,\n                hasSlot: hasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        inheritAttrs: false,\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","BentoButtonVariant","BentoTypographyElement","BentoTypographyVariant","hasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;;GA8DAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAG;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,sBAAAJ;AAAA,MAGA,SAAAK,EAAAP,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC5DAK,IAAA,KAmBAC,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAiB,EAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/toggle.js

@@ -0,0 +1,6 @@
+import { B as a, a as g } from "./chunks/index.ad5e1dbd.js";
+export {
+  a as BentoToggle,
+  g as BentoTogglePropClass
+};
+//# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/typography.js

@@ -0,0 +1,111 @@
+import "./assets/index35.css";
+import { defineComponent as r, computed as i } from "vue";
+import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var a = /* @__PURE__ */ ((t) => (t.CAPTION = "caption", t.BODY = "body", t.SUBTITLE = "subtitle", t.TITLE = "title", t))(a || {}), e = /* @__PURE__ */ ((t) => (t.WIDE = "wide", t.STRONGER = "stronger", t.STRONGER_WIDE = "stronger-wide", t.STRONGEST = "strongest", t.STRONGEST_WIDE = "strongest-wide", t.MEDIUM = "m", t.LARGE = "l", t.MOBILE = "mobile", t))(e || {}), l = /* @__PURE__ */ ((t) => (t.H1 = "h1", t.H2 = "h2", t.H3 = "h3", t.H4 = "h4", t.H5 = "h5", t.H6 = "h6", t.DIV = "div", t.PARAGRAPH = "p", t.SPAN = "span", t))(l || {});
+const _ = r({
+  name: "bento-typography",
+  inheritAttrs: !0,
+  props: {
+    /**
+     * Sets the HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    el: {
+      type: String,
+      default: l.PARAGRAPH,
+      validator: (t) => Object.values(l).includes(t)
+    },
+    /**
+     * Adds the stronger class modifier.
+     * Applicable to Caption, Body and Subtitle variants.
+     */
+    stronger: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the strongest class modifier.
+     * Applicable to Caption, Body and Subtitle variants.
+     */
+    strongest: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the type of typography variant.
+     * @values caption, body, subtitle, title.
+     */
+    variant: {
+      type: String,
+      default: a.BODY,
+      validator: (t) => Object.values(a).includes(t)
+    },
+    /**
+     * Adds the medium class modifier.
+     * Applicable to the Title variant.
+     */
+    medium: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the large class modifier.
+     * Applicable to the Title variant.
+     */
+    large: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the medium class modifier.
+     * Applicable to tje Body variant.
+     */
+    wide: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    return {
+      conditionalClasses: i(() => ({
+        // Caption
+        [`b-typography--${a.CAPTION}`]: t.variant === a.CAPTION,
+        [`b-typography--${a.CAPTION}-${e.WIDE}`]: t.variant === a.CAPTION && t.wide,
+        [`b-typography--${a.CAPTION}-${e.STRONGER}`]: t.variant === a.CAPTION && t.stronger,
+        // Body
+        [`b-typography--${a.BODY}`]: t.variant === a.BODY,
+        [`b-typography--${a.BODY}-${e.WIDE}`]: t.variant === a.BODY && t.wide,
+        [`b-typography--${a.BODY}-${e.STRONGER}`]: t.variant === a.BODY && t.stronger,
+        [`b-typography--${a.BODY}-${e.STRONGEST}`]: t.variant === a.BODY && t.strongest,
+        // Subtitle
+        [`b-typography--${a.SUBTITLE}`]: t.variant === a.SUBTITLE,
+        [`b-typography--${a.SUBTITLE}-${e.STRONGER}`]: t.variant === a.SUBTITLE && t.stronger,
+        // Title
+        [`b-typography--${a.TITLE}`]: t.variant === a.TITLE && !t.medium && !t.large,
+        [`b-typography--${a.TITLE}-${e.MEDIUM}`]: t.variant === a.TITLE && t.medium,
+        [`b-typography--${a.TITLE}-${e.LARGE}`]: t.variant === a.TITLE && t.large
+      }))
+    };
+  }
+});
+var d = function() {
+  var n = this, s = n._self._c;
+  return n._self._setupProxy, s(n.el, { tag: "component", staticClass: "b-typography", class: n.conditionalClasses, attrs: { "data-testid": "typography" } }, [n._t("default")], 2);
+}, I = [], O = /* @__PURE__ */ u(
+  _,
+  d,
+  I,
+  !1,
+  null,
+  "9eb470a5",
+  null,
+  null
+);
+const b = O.exports;
+export {
+  b as BentoTypography,
+  l as BentoTypographyElement,
+  e as BentoTypographyModifier,
+  a as BentoTypographyVariant
+};
+//# sourceMappingURL=typography.js.map

package/dist/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../src/components/typography/typography.types.ts","../src/components/typography/typography.vue"],"sourcesContent":["export enum BentoTypographyVariant {\n    CAPTION = 'caption',\n    BODY = 'body',\n    SUBTITLE = 'subtitle',\n    TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n    WIDE = 'wide',\n    STRONGER = 'stronger',\n    STRONGER_WIDE = 'stronger-wide',\n    STRONGEST = 'strongest',\n    STRONGEST_WIDE = 'strongest-wide',\n    MEDIUM = 'm',\n    LARGE = 'l',\n    MOBILE = 'mobile',\n}\n\nexport enum BentoTypographyElement {\n    H1 = 'h1',\n    H2 = 'h2',\n    H3 = 'h3',\n    H4 = 'h4',\n    H5 = 'h5',\n    H6 = 'h6',\n    DIV = 'div',\n    PARAGRAPH = 'p',\n    SPAN = 'span',\n}\n","<template>\n    <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n        <slot />\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n\n    /**\n     * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n     * easily to text. The variants and properties match with those found in Figma.\n     *\n     * For example, seeing text with the typography styling of\n     *\n     * @example\n     * import { BentoTypography } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTypography },\n     *     template: `\n     *          <bento-typography>\n     *              ... text content\n     *          </bento-typography>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-typography',\n        inheritAttrs: true,\n        props: {\n            /**\n             * Sets the HTML DOM element.\n             * @values h1, h2, h3, h4, h5, h6, div, p, span\n             */\n            el: {\n                type: String as PropType<BentoTypographyElement>,\n                default: BentoTypographyElement.PARAGRAPH,\n                validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n            },\n\n            /**\n             * Adds the stronger class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            stronger: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the strongest class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            strongest: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets the type of typography variant.\n             * @values caption, body, subtitle, title.\n             */\n            variant: {\n                type: String as PropType<BentoTypographyVariant>,\n                default: BentoTypographyVariant.BODY,\n                validator: (value: BentoTypographyVariant) => Object.values(BentoTypographyVariant).includes(value),\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to the Title variant.\n             */\n            medium: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the large class modifier.\n             * Applicable to the Title variant.\n             */\n            large: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to tje Body variant.\n             */\n            wide: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const conditionalClasses = computed(() => ({\n                // Caption\n                [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.wide,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n                // Body\n                [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.wide,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.stronger,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n                // Subtitle\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n                // Title\n                [`b-typography--${BentoTypographyVariant.TITLE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.medium,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","_sfc_main","defineComponent","value","props","computed"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,OAAA,QACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,WAAA,YACAA,EAAA,gBAAA,iBACAA,EAAA,YAAA,aACAA,EAAA,iBAAA,kBACAA,EAAA,SAAA,KACAA,EAAA,QAAA,KACAA,EAAA,SAAA,UARQA,IAAAD,KAAA,CAAA,CAAA,GAWAE,IAAA,kBAAAC,OACRA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,MAAA,OACAA,EAAA,YAAA,KACAA,EAAA,OAAA,QATQA,IAAAD,KAAA,CAAA,CAAA;ACUZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,IAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAR,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAiCA,WAAA;AAAA,MAAA,oBA/BAC,EAAA,OAAA;AAAA;AAAA,QAAA,CAAA,iBAAAV,EAAA,SAAA,GAAAS,EAAA,YAAAT,EAAA;AAAA,QAEA,CAAA,iBAAAA,EAAA,WAAAE,EAAA,MAAA,GAAAO,EAAA,YAAAT,EAAA,WAAAS,EAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,WAAAE,EAAA,UAAA,GAAAO,EAAA,YAAAT,EAAA,WAAAS,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,MAAA,GAAAS,EAAA,YAAAT,EAAA;AAAA,QAGA,CAAA,iBAAAA,EAAA,QAAAE,EAAA,MAAA,GAAAO,EAAA,YAAAT,EAAA,QAAAS,EAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,QAAAE,EAAA,UAAA,GAAAO,EAAA,YAAAT,EAAA,QAAAS,EAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,QAAAE,EAAA,WAAA,GAAAO,EAAA,YAAAT,EAAA,QAAAS,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,UAAA,GAAAS,EAAA,YAAAT,EAAA;AAAA,QAGA,CAAA,iBAAAA,EAAA,YAAAE,EAAA,UAAA,GAAAO,EAAA,YAAAT,EAAA,YAAAS,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,OAAA,GAAAS,EAAA,YAAAT,EAAA,SAAA,CAAAS,EAAA,UAAA,CAAAA,EAAA;AAAA,QAIA,CAAA,iBAAAT,EAAA,SAAAE,EAAA,QAAA,GAAAO,EAAA,YAAAT,EAAA,SAAAS,EAAA;AAAA,QAEA,CAAA,iBAAAT,EAAA,SAAAE,EAAA,OAAA,GAAAO,EAAA,YAAAT,EAAA,SAAAS,EAAA;AAAA,MAEA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}