@adyen/bento-vue2 2.1.1 → 2.2.0

package/dist/chunks/{footer-actions.B8f-gEQV.js → footer-actions.CQYJ8Xvw.js}

@@ -1,7 +1,7 @@
 import { defineComponent as i, toRefs as r, computed as l, onMounted as c } from "vue";
 import { B as u } from "./typography.Cd386LC_.js";
 import { b as _ } from "./button.tsTeQRcP.js";
-import { B as d } from "./button-actions.CdetBz3J.js";
+import { B as d } from "./button-actions.B332AjJp.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/footer-actions.css";
 const p = {}, g = /* @__PURE__ */ i({
@@ -93,4 +93,4 @@ const w = b.exports;
 export {
   w as F
 };
-//# sourceMappingURL=footer-actions.B8f-gEQV.js.map
+//# sourceMappingURL=footer-actions.CQYJ8Xvw.js.map

package/dist/chunks/{footer-actions.B8f-gEQV.js.map → footer-actions.CQYJ8Xvw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.B8f-gEQV.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.CQYJ8Xvw.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{form-layout-title.b2BMYjnl.js → form-layout-title.MjuCRO9t.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, useSlots as c, computed as i, provide as f, toRef as m } from "vue";
-import { B as p } from "./alert.BddJPWMN.js";
+import { B as p } from "./alert.DNS4RH4N.js";
 import { u } from "./use-has-slot.C9lQZ6nz.js";
 import { F as y } from "./form-layout.types.bZW9iR6_.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -149,4 +149,4 @@ export {
   U as b,
   J as f
 };
-//# sourceMappingURL=form-layout-title.b2BMYjnl.js.map
+//# sourceMappingURL=form-layout-title.MjuCRO9t.js.map

package/dist/chunks/{form-layout-title.b2BMYjnl.js.map → form-layout-title.MjuCRO9t.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-layout-title.b2BMYjnl.js","sources":["../../src/components/form-layout/form-layout.vue","../../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.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\" @submit=\"emit('submit', $event)\">\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 emit = defineEmits([\"submit\"]);\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","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\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","<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\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\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    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\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         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\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, organize 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        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$2","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$1","__default__","messages","useI18n","isSection","conditionalClasses"],"mappings":";;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,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;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsDAa,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAd,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAc,EAAA,GAkCAC,IAAAX,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout-title.MjuCRO9t.js","sources":["../../src/components/form-layout/form-layout.vue","../../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.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\" @submit=\"emit('submit', $event)\">\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 emit = defineEmits([\"submit\"]);\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","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n        /**\n         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\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","<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\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\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    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\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         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\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, organize 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        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$2","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$1","__default__","messages","useI18n","isSection","conditionalClasses"],"mappings":";;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,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;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsDAa,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAd,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAc,EAAA,GAkCAC,IAAAX,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/grid-layout.m-5ySv9K.js

@@ -0,0 +1,77 @@
+import { defineComponent as n, computed as r } from "vue";
+import { u as d } from "./use-has-slot.C9lQZ6nz.js";
+import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/grid-layout.css";
+var u = /* @__PURE__ */ ((o) => (o.INLINE = "inline-size", o.SIZE = "size", o.NORMAL = "normal", o))(u || {});
+const _ = n({
+  name: "grid-layout",
+  props: {
+    /**
+     * Sets the responsive columns widths for the grid.
+     */
+    columnWidth: {
+      type: Array,
+      default: null,
+      validator: (o) => o && o.length <= 6
+    },
+    /**
+     * Set the type of CSS container the grid layout has
+     * @values inline-size, size, normal
+     */
+    containerType: {
+      type: String,
+      default: u.INLINE
+    },
+    /**
+     * Sets the gap in the grid to 0.
+     */
+    noGap: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o, { slots: t }) {
+    const l = d(t), e = (a) => a === "auto" || a !== null && typeof a == "object" && Object.values(a).includes("auto"), c = (a) => {
+      const s = o.columnWidth?.[a];
+      return s ? s === "auto" ? [
+        "b-grid-layout__column--auto",
+        "b-grid-layout-m__column--auto",
+        "b-grid-layout-l__column--auto"
+      ] : [
+        `b-grid-layout__column--${s.small}`,
+        `b-grid-layout-m__column--${s.medium}`,
+        `b-grid-layout-l__column--${s.large}`
+      ] : null;
+    }, i = r(() => ({
+      "b-grid-layout--container-type-normal": o.containerType === u.NORMAL,
+      "b-grid-layout--container-type-size": o.containerType === u.SIZE,
+      "b-grid-layout--all-auto": o.columnWidth === null || o.columnWidth.every((a) => a === "auto"),
+      "b-grid-layout--has-auto": o.columnWidth?.some(e) ?? !1,
+      "b-grid-layout--no-gap": o.noGap
+    }));
+    return {
+      // Values
+      computeColumnSize: c,
+      computedClasses: i,
+      // Methods
+      hasSlot: l
+    };
+  }
+});
+var y = function() {
+  var t = this, l = t._self._c;
+  return t._self._setupProxy, l("div", { staticClass: "b-grid-layout", class: t.computedClasses, attrs: { "data-testid": "grid-layout" } }, [t.hasSlot("col-1") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(0), attrs: { "data-testid": "grid-layout-col-1" } }, [t._t("col-1")], 2) : t._e(), t.hasSlot("col-2") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(1), attrs: { "data-testid": "grid-layout-col-2" } }, [t._t("col-2")], 2) : t._e(), t.hasSlot("col-3") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(2), attrs: { "data-testid": "grid-layout-col-3" } }, [t._t("col-3")], 2) : t._e(), t.hasSlot("col-4") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(3), attrs: { "data-testid": "grid-layout-col-4" } }, [t._t("col-4")], 2) : t._e(), t.hasSlot("col-5") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(4), attrs: { "data-testid": "grid-layout-col-5" } }, [t._t("col-5")], 2) : t._e(), t.hasSlot("col-6") ? l("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(5), attrs: { "data-testid": "grid-layout-col-6" } }, [t._t("col-6")], 2) : t._e()]);
+}, g = [], p = /* @__PURE__ */ m(
+  _,
+  y,
+  g,
+  !1,
+  null,
+  "7a49981c"
+);
+const v = p.exports;
+export {
+  v as G,
+  u as a
+};
+//# sourceMappingURL=grid-layout.m-5ySv9K.js.map

package/dist/chunks/grid-layout.m-5ySv9K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-layout.m-5ySv9K.js","sources":["../../src/components/internal/grid-layout/grid-layout.types.ts","../../src/components/internal/grid-layout/grid-layout.vue"],"sourcesContent":["export enum GridLayoutContainerType {\n    INLINE = 'inline-size',\n    SIZE = 'size',\n    NORMAL = 'normal',\n}\n\nexport interface GridLayoutColumnWidth {\n    small: number | string;\n    medium: number | string;\n    large: number | string;\n}\n\nexport type GridLayoutColumnWidths = Array<'auto' | GridLayoutColumnWidth>;\n","<template>\n    <div class=\"b-grid-layout\" :class=\"computedClasses\" data-testid=\"grid-layout\">\n        <div\n            v-if=\"hasSlot('col-1')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(0)\"\n            data-testid=\"grid-layout-col-1\"\n        >\n            <slot name=\"col-1\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-2')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(1)\"\n            data-testid=\"grid-layout-col-2\"\n        >\n            <slot name=\"col-2\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-3')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(2)\"\n            data-testid=\"grid-layout-col-3\"\n        >\n            <slot name=\"col-3\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-4')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(3)\"\n            data-testid=\"grid-layout-col-4\"\n        >\n            <slot name=\"col-4\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-5')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(4)\"\n            data-testid=\"grid-layout-col-5\"\n        >\n            <slot name=\"col-5\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-6')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(5)\"\n            data-testid=\"grid-layout-col-6\"\n        >\n            <slot name=\"col-6\"></slot>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { type GridLayoutColumnWidths, GridLayoutContainerType } from './grid-layout.types';\n\n    /**\n     * Component used to render the grid layout in the bento-summary-grid. For internal use only\n     */\n    export default defineComponent({\n        name: 'grid-layout',\n        props: {\n            /**\n             * Sets the responsive columns widths for the grid.\n             */\n            columnWidth: {\n                type: Array as PropType<GridLayoutColumnWidths>,\n                default: null,\n                validator: (array: GridLayoutColumnWidths) => array && array.length <= 6,\n            },\n\n            /**\n             * Set the type of CSS container the grid layout has\n             * @values inline-size, size, normal\n             */\n            containerType: {\n                type: String as PropType<GridLayoutContainerType>,\n                default: GridLayoutContainerType.INLINE,\n            },\n\n            /**\n             * Sets the gap in the grid to 0.\n             */\n            noGap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props, { slots }) {\n            const hasSlot = useHasSlot(slots);\n\n            const hasAutoWidth = (width: GridLayoutColumnWidths[number] | null | undefined) =>\n                width === 'auto' ||\n                (width !== null && typeof width === 'object' && Object.values(width).includes('auto'));\n\n            // TODO: add a computedItems computed here that only returns the slots that are presents so as to be able to render the divs in the template via a v-for\n            const computeColumnSize = (index: number) => {\n                const columnWidth = props.columnWidth?.[index];\n\n                if (!columnWidth) {\n                    return null;\n                }\n\n                if (columnWidth === 'auto') {\n                    return [\n                        'b-grid-layout__column--auto',\n                        'b-grid-layout-m__column--auto',\n                        'b-grid-layout-l__column--auto',\n                    ];\n                }\n\n                return [\n                    `b-grid-layout__column--${columnWidth.small}`,\n                    `b-grid-layout-m__column--${columnWidth.medium}`,\n                    `b-grid-layout-l__column--${columnWidth.large}`,\n                ];\n            };\n\n            const computedClasses = computed(() => ({\n                'b-grid-layout--container-type-normal': props.containerType === GridLayoutContainerType.NORMAL,\n                'b-grid-layout--container-type-size': props.containerType === GridLayoutContainerType.SIZE,\n                'b-grid-layout--all-auto':\n                    props.columnWidth === null || props.columnWidth.every(width => width === 'auto'),\n                'b-grid-layout--has-auto': props.columnWidth?.some(hasAutoWidth) ?? false,\n                'b-grid-layout--no-gap': props.noGap,\n            }));\n\n            return {\n                // Values\n                computeColumnSize,\n                computedClasses,\n\n                // Methods\n                hasSlot,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./grid-layout.scss\" />\n"],"names":["GridLayoutContainerType","GridLayoutContainerType2","_sfc_main","defineComponent","array","props","slots","hasSlot","useHasSlot","hasAutoWidth","width","computeColumnSize","index","columnWidth","computedClasses","computed"],"mappings":";;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,SAAA,eACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA;AC6DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,KAAAA,EAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAJ,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAF,CAAA,GAEAG,IAAA,CAAAC,MAAAA,MAAA,UAAAA,MAAA,QAAA,OAAAA,KAAA,YAAA,OAAA,OAAAA,CAAA,EAAA,SAAA,MAAA,GAKAC,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAR,EAAA,cAAAO,CAAA;AAEA,aAAAC,IAIAA,MAAA,SACA;AAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,MACA,IAIA;AAAA,QAAA,0BAAAA,EAAA,KAAA;AAAA,QACA,4BAAAA,EAAA,MAAA;AAAA,QACA,4BAAAA,EAAA,KAAA;AAAA,MACA,IAdA;AAAA,IAeA,GAGAC,IAAAC,EAAA,OAAA;AAAA,MAAA,wCAAAV,EAAA,kBAAAL,EAAA;AAAA,MACA,sCAAAK,EAAA,kBAAAL,EAAA;AAAA,MACA,2BAAAK,EAAA,gBAAA,QAAAA,EAAA,YAAA,MAAA,CAAAK,MAAAA,MAAA,MAAA;AAAA,MAEA,2BAAAL,EAAA,aAAA,KAAAI,CAAA,KAAA;AAAA,MACA,yBAAAJ,EAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,mBAAAM;AAAA,MAEA,iBAAAG;AAAA;AAAA,MACA,SAAAP;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}