@adyen/bento-vue2 1.4.1 → 1.5.0

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/index.c39c64c9.js";
+import { B as a } from "./chunks/index.0f8690c4.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -1,12 +1,12 @@
-import { defineComponent as _, useSlots as i, computed as n, provide as y, toRef as f, onMounted as v, ref as g } from "vue";
-import { BentoAlert as p } from "./alert.js";
-import { u as m } from "./chunks/use-has-slot.6052d56a.js";
+import { defineComponent as _, useSlots as p, computed as n, provide as v, toRef as f, onMounted as g, ref as L } from "vue";
+import { BentoAlert as m } from "./alert.js";
+import { u as d } from "./chunks/use-has-slot.6052d56a.js";
 import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, c as L } from "./chunks/index.1645ffcb.js";
-import "./assets/index19.css";
-const h = {}, $ = /* @__PURE__ */ _({
-  ...h,
+import { B as i, c as h } from "./chunks/index.1645ffcb.js";
+import "./assets/index18.css";
+const C = {}, $ = /* @__PURE__ */ _({
+  ...C,
   __name: "form-layout",
   props: {
     /**
@@ -20,18 +20,18 @@ const h = {}, $ = /* @__PURE__ */ _({
     loading: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const t = o, e = i(), s = m(e), r = n(() => t.form ? "form" : "div"), a = n(() => s("actions-left") || s("actions-right"));
-    return y(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: r, hasActions: a, BentoAlert: p };
+    const t = o, e = p(), s = d(e), r = n(() => t.form ? "form" : "div"), a = n(() => s("actions-left") || s("actions-right"));
+    return v(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: r, hasActions: a, BentoAlert: m };
   }
 });
-var C = function() {
+var B = function() {
   var t = this, e = t._self._c, s = t._self._setupProxy;
   return e(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? e(s.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("error-message")];
   }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), s.hasActions ? e("div", { staticClass: "b-form-layout__actions-container" }, [e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
-}, x = [], B = /* @__PURE__ */ l(
+}, x = [], F = /* @__PURE__ */ l(
   $,
-  C,
+  B,
   x,
   !1,
   null,
@@ -39,41 +39,54 @@ var C = function() {
   null,
   null
 );
-const U = B.exports, F = {}, S = /* @__PURE__ */ _({
-  ...F,
+const Q = F.exports, T = {}, S = /* @__PURE__ */ _({
+  ...T,
   __name: "form-layout-field-tip",
   setup(o) {
-    return { __sfc: !0, BentoAlert: p };
+    return { __sfc: !0, BentoAlert: m };
   }
 });
-var T = function() {
+var A = function() {
   var t = this, e = t._self._c, s = t._self._setupProxy;
   return e("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e(s.BentoAlert, { attrs: { variant: "tip", type: "warning" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
   }, proxy: !0 }], null, !0) })], 2);
-}, A = [], E = /* @__PURE__ */ l(
+}, O = [], E = /* @__PURE__ */ l(
   S,
-  T,
   A,
+  O,
   !1,
   null,
   "f5604b8a",
   null,
   null
 );
-const V = E.exports, G = (o, t) => {
+const W = E.exports, u = [
+  "100",
+  "50",
+  "33",
+  "25",
+  "66-33",
+  "33-66",
+  "75-25",
+  "25-75",
+  "50-50",
+  "33-33-33"
+], G = 100, P = (o, t) => {
   const e = (r) => {
     var a;
     return (a = r.split) == null ? void 0 : a.call(r, "-").map((c) => parseInt(c, 10));
-  }, s = n(() => e(o.value));
-  v(() => {
+  }, s = n(
+    () => u.includes(o.value) ? e(o.value) : G
+  );
+  g(() => {
     const r = t.value.classList[0];
-    t.value.querySelectorAll(`.${r} > *`).forEach((c, d) => {
-      c.classList.add(`${r}--${s.value[d] || "100"}`);
+    t.value.querySelectorAll(`.${r} > *`).forEach((c, y) => {
+      c.classList.add(`${r}--${s.value[y] || "100"}`);
     });
   });
-}, O = {}, P = /* @__PURE__ */ _({
-  ...O,
+}, R = {}, I = /* @__PURE__ */ _({
+  ...R,
   __name: "form-layout-group",
   props: {
     /**
@@ -88,6 +101,7 @@ const V = E.exports, G = (o, t) => {
      * If the value entered is not listed in the example
      * list below it will use 100% by default.
      * @example
+     * '33-33-33'
      * '50-50'
      * '25-75'
      * '75-25'
@@ -100,29 +114,36 @@ const V = E.exports, G = (o, t) => {
      */
     layout: {
       type: String,
-      default: "100"
+      default: "100",
+      validator: (o) => u.includes(o)
     }
   },
   setup(o) {
-    const t = o, e = g(null);
-    return G(f(t, "layout"), e), { __sfc: !0, props: t, formLayoutGroup: e };
+    const t = o, e = L(null);
+    P(f(t, "layout"), e);
+    const s = n(() => ({
+      // Transform into column if the layout is unsopprted
+      // "form-layout.scss" depends on this class
+      "b-form-layout-group--column": !u.includes(t.layout)
+    }));
+    return { __sfc: !0, props: t, formLayoutGroup: e, conditionalClasses: s };
   }
 });
-var R = function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group" }, [t._t("default")], 2);
-}, I = [], N = /* @__PURE__ */ l(
-  P,
-  R,
+var N = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group", class: s.conditionalClasses }, [t._t("default")], 2);
+}, k = [], q = /* @__PURE__ */ l(
   I,
+  N,
+  k,
   !1,
   null,
-  "4153ff3c",
+  "39e9662c",
   null,
   null
 );
-const Q = N.exports, k = {}, q = /* @__PURE__ */ _({
-  ...k,
+const X = q.exports, w = {}, D = /* @__PURE__ */ _({
+  ...w,
   __name: "form-layout-title",
   props: {
     /**
@@ -139,36 +160,36 @@ const Q = N.exports, k = {}, q = /* @__PURE__ */ _({
      * @values h1, h2, h3, h4, h5, h6, div, p, span
      */
     el: {
-      type: u.props.el.type,
+      type: i.props.el.type,
       required: !0,
-      validator: (o) => Object.values(L).includes(o)
+      validator: (o) => Object.values(h).includes(o)
     }
   },
   setup(o) {
-    const t = o, e = i(), s = n(() => !t.subsection), r = m(e), a = n(() => ({
+    const t = o, e = p(), s = n(() => !t.subsection), r = d(e), a = n(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: r, conditionalClasses: a, BentoTypography: u };
+    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: r, conditionalClasses: a, BentoTypography: i };
   }
 });
-var w = function() {
+var M = function() {
   var t = this, e = t._self._c, s = t._self._setupProxy;
   return e("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [e(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? e(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
-}, M = [], Y = /* @__PURE__ */ l(
-  q,
-  w,
+}, U = [], Y = /* @__PURE__ */ l(
+  D,
   M,
+  U,
   !1,
   null,
   "03648a9d",
   null,
   null
 );
-const W = Y.exports;
+const Z = Y.exports;
 export {
-  U as BentoFormLayout,
-  V as BentoFormLayoutFieldTip,
-  Q as BentoFormLayoutGroup,
-  W as BentoFormLayoutTitle
+  Q as BentoFormLayout,
+  W as BentoFormLayoutFieldTip,
+  X as BentoFormLayoutGroup,
+  Z as BentoFormLayoutTitle
 };
 //# sourceMappingURL=form-layout.js.map

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.js","sources":["../src/components/form-layout/form-layout.vue","../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" type=\"warning\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoAlert } from '@/components/alert';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    const layout = computed(() => getLayoutValues(layoutProp.value));\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineProps, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n        },\n    });\n\n    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organise related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","__default__$2","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","index","__default__$1","formLayoutGroup","ref","__default__","isSection","conditionalClasses"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBCTAK,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;qBCzBSC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KACAC,IAAAd,EAAA,MAAAU,EAAAF,EAAA,KAAA,CAAA;AAEA,EAAAO,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCoCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzBAC,IAAAC,EAAA,IAAA;AACA,WAAAd,EAAAF,EAAAJ,GAAA,QAAA,GAAAmB,CAAA;;;;;;;;;;;;;;;;qBC+BAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA3B,IAAAC,EAAA,GAyBA2B,IAAAvB,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA6B,IAAAxB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout.js","sources":["../src/components/form-layout/form-layout.vue","../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" type=\"warning\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoAlert } from '@/components/alert';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineProps, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n    });\n\n    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organise related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","__default__$2","BentoLayoutGroupProportions","DEFAULT_PROPORTION","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","index","__default__$1","formLayoutGroup","ref","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBCTAK,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;qBC1BGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA,KAYaC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAAhB;AAAA,IAAe,MAAAO,EAAA,SAAAG,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAF;AAAA,EACkF;AAGjG,EAAAS,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCuCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAd,EAAAJ,EAAAJ,GAAA,QAAA,GAAAqB,CAAA;AAEA,UAAAE,IAAAxB,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAO,EAAA,SAAAN,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;qBCwBrFwB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA9B,IAAAC,EAAA,GAyBA8B,IAAA1B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA6B,IAAAxB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}