@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/fixed-scroller.MerESbd_.js

@@ -1,111 +0,0 @@
-import { ref as c, onMounted as b, computed as i, defineComponent as S } from "vue";
-import { B as C } from "./button.DxhJNOtr.js";
-import { u as x } from "./index.B6WW_F-J.js";
-import { C as L, a as y } from "./chevron-left.BS24hEFa.js";
-import { o as R } from "./resize.Bqks3WUm.js";
-import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/fixed-scroller.css";
-const w = 1, B = 40, F = ({
-  contentRef: f,
-  containerRef: e,
-  leftButtonRef: l,
-  rightButtonRef: t
-}) => {
-  const r = c(0), o = c(0), n = c(0), a = c(0);
-  b(() => {
-    R(e.value, () => {
-      e.value && (a.value = e.value.offsetWidth, o.value = 0, r.value = 0);
-    }), R(f.value, () => {
-      var s;
-      n.value = (s = f.value) == null ? void 0 : s.scrollWidth, n.value < a.value && (o.value = 0, r.value = 0);
-    });
-  });
-  const _ = i(() => {
-    var u, h;
-    const s = (u = l.value) != null && u.scrollWidth ? l.value.scrollWidth + B : 0, m = (h = t.value) != null && h.scrollWidth ? t.value.scrollWidth + B : 0;
-    return s + m;
-  }), d = i(() => Math.ceil(n.value / a.value) ?? 0), v = i(() => {
-    const s = new Array(d.value).fill(0);
-    return s.forEach((m, u) => {
-      if (u === 0)
-        return;
-      if (u === d.value - 1) {
-        s[s.length - 1] = -(n.value - a.value + w);
-        return;
-      }
-      const h = s[u - 1];
-      s[u] = -(a.value + Math.abs(h) - _.value);
-    }), s;
-  }), p = i(() => o.value !== 0), g = i(
-    () => r.value >= -(n.value - a.value - 1)
-  );
-  return {
-    offset: r,
-    shouldShowLeftButton: p,
-    shouldShowRightButton: g,
-    // Methods
-    scrollLeft: () => {
-      o.value !== 0 && (o.value -= 1, r.value = v.value[o.value]);
-    },
-    scrollRight: () => {
-      o.value !== d.value - 1 && (o.value += 1, r.value = v.value[o.value]);
-    }
-  };
-}, I = {
-  "en-US": { scrollLeft: "Scroll left", scrollRight: "Scroll right" },
-  "ja-JP": { scrollLeft: "左にスクロール", scrollRight: "右にスクロール" },
-  "pt-BR": { scrollLeft: "Deslizar para esquerda", scrollRight: "Rolar à direita" }
-}, O = {
-  i18n: { messages: I }
-}, k = /* @__PURE__ */ S({
-  ...O,
-  __name: "fixed-scroller",
-  props: {
-    /**
-     * Applies the condensed style to the buttons
-     */
-    condensed: { type: Boolean, default: !1 },
-    /**
-     * Padding to be applied to the top of the scroller container
-     */
-    extraPaddingTop: { type: Number, default: 0 },
-    /**
-     * Padding to be applied to the top of the scroller container
-     */
-    centered: { type: Boolean, default: !1 }
-  },
-  setup(f) {
-    const e = f, { t: l } = x(), t = c(null), r = c(null), o = c(null), n = c(null), { offset: a, shouldShowLeftButton: _, shouldShowRightButton: d, scrollLeft: v, scrollRight: p } = F({
-      contentRef: t,
-      containerRef: r,
-      leftButtonRef: o,
-      rightButtonRef: n
-    }), g = i(() => ({
-      "b-fixed-scroller__button--centered": e.centered
-    }));
-    return { __sfc: !0, t: l, contentRef: t, fixedScrollerRef: r, leftButtonRef: o, rightButtonRef: n, props: e, offset: a, shouldShowLeftButton: _, shouldShowRightButton: d, scrollLeft: v, scrollRight: p, buttonConditionalClasses: g, BentoButton: C, ChevronLeftIcon: y, ChevronRightIcon: L };
-  }
-});
-var E = function() {
-  var e = this, l = e._self._c, t = e._self._setupProxy;
-  return l("div", { ref: "fixedScrollerRef", staticClass: "b-fixed-scroller" }, [l("div", { staticClass: "b-fixed-scroller__container" }, [l("div", { ref: "contentRef", staticClass: "b-fixed-scroller__content", style: {
-    transform: `translateX(${t.offset}px)`,
-    paddingTop: t.shouldShowLeftButton || t.shouldShowRightButton ? `${e.extraPaddingTop}px` : null
-  } }, [e._t("default")], 2)]), t.shouldShowLeftButton ? l("div", { ref: "leftButtonRef", staticClass: "b-fixed-scroller__left b-fixed-scroller__button", class: t.buttonConditionalClasses }, [l(t.BentoButton, { attrs: { variant: "secondary", "aria-label": t.t("scrollLeft"), condensed: e.condensed }, on: { click: t.scrollLeft }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
-    return [l(t.ChevronLeftIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
-  }, proxy: !0 }], null, !1, 1728943899) })], 1) : e._e(), t.shouldShowRightButton ? l("div", { ref: "rightButtonRef", staticClass: "b-fixed-scroller__right b-fixed-scroller__button", class: t.buttonConditionalClasses }, [l(t.BentoButton, { attrs: { variant: "secondary", "aria-label": t.t("scrollRight"), condensed: e.condensed }, on: { click: t.scrollRight }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
-    return [l(t.ChevronRightIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
-  }, proxy: !0 }], null, !1, 29940896) })], 1) : e._e()]);
-}, T = [], P = /* @__PURE__ */ W(
-  k,
-  E,
-  T,
-  !1,
-  null,
-  "e320ec31"
-);
-const q = P.exports;
-export {
-  q as F
-};
-//# sourceMappingURL=fixed-scroller.MerESbd_.js.map

package/dist/chunks/form-layout-title.Bw7VgOO5.js

@@ -1,210 +0,0 @@
-import { defineComponent as n, useSlots as c, computed as a, provide as m, toRef as y } from "vue";
-import { B as d } from "./alert.QVQ6Zjbm.js";
-import { u as p } from "./use-has-slot.C9lQZ6nz.js";
-import { F as v } from "./form-layout.types.bZW9iR6_.js";
-import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as f, a as g } from "./typography.C8lPlsbD.js";
-import { u as h } from "./index.B6WW_F-J.js";
-import "../assets/form-layout-title.css";
-const b = {}, S = /* @__PURE__ */ n({
-  ...b,
-  __name: "form-layout",
-  props: {
-    /**
-     * Renders the form layout as an HTML `form`
-     */
-    form: { type: Boolean, default: !1 },
-    /**
-     * Sets the state of the form and its fields to
-     * a read only status.
-     */
-    loading: { type: Boolean, default: !1 }
-  },
-  emits: ["submit"],
-  setup(o, { emit: t }) {
-    const s = o, e = c(), r = p(e), i = a(() => s.form ? "form" : "div"), _ = a(() => r("actions-left") || r("actions-right"));
-    return m(v, y(s, "loading")), { __sfc: !0, slots: e, hasSlot: r, emit: t, props: s, formLayoutElement: i, hasActions: _, BentoAlert: d };
-  }
-});
-var $ = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s(e.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" }, on: { submit: function(r) {
-    return e.emit("submit", r);
-  } } }, [e.hasSlot("error-message") ? s(e.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"), e.hasActions ? s("div", { staticClass: "b-form-layout__actions-container" }, [s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
-}, C = [], F = /* @__PURE__ */ l(
-  S,
-  $,
-  C,
-  !1,
-  null,
-  "b895dc37"
-);
-const Q = F.exports, B = ["warning", "critical", "highlight", "success"], L = {}, T = /* @__PURE__ */ n({
-  ...L,
-  __name: "form-layout-field-tip",
-  props: {
-    /**
-     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
-     * @values highlight, success, critical, warning
-     */
-    type: {
-      type: String,
-      default: "highlight",
-      validator: (o) => B.includes(o)
-    },
-    /**
-     * Unique identifier to the form field. Used for accessibility.
-     */
-    id: {
-      type: String,
-      default: void 0
-    }
-  },
-  setup(o) {
-    const t = c(), s = p(t);
-    return { __sfc: !0, slots: t, hasSlot: s, BentoAlert: d };
-  }
-});
-var x = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e.hasSlot("message") ? s(e.BentoAlert, { attrs: { id: t.id, variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
-    return [t._t("message")];
-  }, proxy: !0 }], null, !0) }) : t._e()], 2);
-}, R = [], A = /* @__PURE__ */ l(
-  T,
-  x,
-  R,
-  !1,
-  null,
-  "47d36a49"
-);
-const V = A.exports, u = [
-  "100",
-  "50",
-  "33",
-  "25",
-  "66-33",
-  "33-66",
-  "75-25",
-  "25-75",
-  "50-50",
-  "33-33-33"
-], O = {}, q = /* @__PURE__ */ n({
-  ...O,
-  __name: "form-layout-group",
-  props: {
-    /**
-     * The layout of the pair group of components.
-     * This will render the components within the width of the proportions.
-     * Only two colums are available.
-     *
-     * If only one value is entered, then it will assume there's only one child in the group.
-     * If two values are entered, the first value will be use for the first child and the second
-     * value for the second child.
-     *
-     * 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'
-     * '33-66'
-     * '66-33'
-     * '25'
-     * '33'
-     * '50'
-     * '100'
-     */
-    layout: {
-      type: String,
-      default: "100",
-      validator: (o) => u.includes(o)
-    }
-  },
-  setup(o) {
-    const t = o, s = 100, e = a(
-      () => u.includes(t.layout) ? t.layout : s
-    ), r = a(() => ({
-      // Transform into column if the layout is unsupported
-      "b-form-layout-group--column": !u.includes(t.layout),
-      // Assings the correct layout class
-      [`b-form-layout-group--${e.value}`]: !0
-    }));
-    return { __sfc: !0, DEFAULT_PROPORTION: s, props: t, computedLayout: e, conditionalClasses: r };
-  }
-});
-var P = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-form-layout-group", class: e.conditionalClasses }, [t._t("default")], 2);
-}, E = [], I = /* @__PURE__ */ l(
-  q,
-  P,
-  E,
-  !1,
-  null,
-  "18d77022"
-);
-const W = I.exports, N = {
-  "en-US": { requiredFields: "All fields are required." }
-}, G = {
-  name: "bento-form-layout-title",
-  i18n: { messages: N }
-}, U = /* @__PURE__ */ n({
-  ...G,
-  props: {
-    /**
-     * Defines if the Form Layout title is
-     * a "section" or a "subsection".
-     * Default is "section" (false). Turn into "true" for "subsection"
-     */
-    subsection: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Sets the HTML DOM element.
-     * @values h1, h2, h3, h4, h5, h6, div, p, span
-     */
-    el: {
-      type: f.props.el.type,
-      required: !0,
-      validator: (o) => Object.values(g).includes(o)
-    },
-    /**
-     * Defines if the Form Layout title displays
-     * a message indicating that all fields are required.
-     */
-    allFieldsRequired: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(o) {
-    const t = o, s = c(), { t: e } = h(), r = a(() => !t.subsection), i = p(s), _ = a(() => ({
-      "b-form-layout-title--subsection": t.subsection
-    }));
-    return { __sfc: !0, slots: s, t: e, props: t, isSection: r, hasSlot: i, conditionalClasses: _, BentoTypography: f };
-  }
-});
-var k = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-form-layout-title", class: e.conditionalClasses }, [s(e.BentoTypography, { attrs: { el: t.el, variant: "title", medium: e.isSection } }, [t._t("default")], 2), e.hasSlot("description") || t.allFieldsRequired ? s(e.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description"), t.allFieldsRequired ? [t._v(" " + t._s(e.hasSlot("description") ? ` ${e.t("requiredFields")}` : e.t("requiredFields")) + " ")] : t._e()], 2) : t._e()], 1);
-}, w = [], D = /* @__PURE__ */ l(
-  U,
-  k,
-  w,
-  !1,
-  null,
-  "8ee24e3a"
-);
-const X = D.exports;
-export {
-  V as a,
-  W as b,
-  X as c,
-  Q as f
-};
-//# sourceMappingURL=form-layout-title.Bw7VgOO5.js.map

package/dist/chunks/form-layout-title.Bw7VgOO5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-layout-title.Bw7VgOO5.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-group/form-layout-group.types.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\" @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","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","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\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    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\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\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__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","DEFAULT_PROPORTION","computedLayout","conditionalClasses","__default__","messages","t","useI18n","isSection"],"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;;;;;;;;;;;;;;;;;qBC5BGa,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCuDIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnEAC,IAAA,KAkCAC,IAAAX;AAAA,MAAuB,MAAAQ,EAAA,SAAAP,EAAA,MAAA,IAAAA,EAAA,SAAAS;AAAA,IACiD,GAGxEE,IAAAZ,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAU,EAAA,KAAA,EAAA,GAAA;AAAA,IAE/B,EAAA;;;;;;;;;;;;;;;;;GCyCtDE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAnB,IAAAC,EAAA,GACA,EAAA,GAAAmB,EAAA,IAAAC,EAAA,GAkCAC,IAAAjB,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/input-field-password.BKT1mYUw.js

@@ -1,234 +0,0 @@
-import { defineComponent as ue, useAttrs as ce, ref as l, provide as pe, computed as u, watch as P } from "vue";
-import { B as ve } from "./button.DxhJNOtr.js";
-import { B as fe } from "./image.C2D2hKat.js";
-import { B as me } from "./input-field.m1PMwa4C.js";
-import { h as _e } from "./button-actions.BLk114As.js";
-import { d as he, B as be } from "./typography.C8lPlsbD.js";
-import { C as Ce } from "./checkmark-circle-fill.BttTCjrM.js";
-import { D as ge } from "./dot.BW9SneIk.js";
-import { S as ke, H as we } from "./show.B_mKPF6I.js";
-import { e as Le, w as ye } from "./index.CwzYJHw2.js";
-import { u as Re } from "./index.B6WW_F-J.js";
-import { g as Q } from "./generate-uid.NJ8tVoha.js";
-import { u as Ee } from "./form-field.D_2g7vaP.js";
-import { b as Ie } from "./dropdown.Ct7uhPr6.js";
-import { T as Te } from "./tooltip.CbsNGnhw.js";
-import { n as Ve } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/input-field-password.css";
-var g = /* @__PURE__ */ ((o) => (o.TEXT = "text", o.PASSWORD = "password", o))(g || {}), _ = /* @__PURE__ */ ((o) => (o.MIN_LENGTH = "minLength", o.REQUIRE_LOWERCASE = "requireLowercase", o.REQUIRE_NUMERIC = "requireNumeric", o.REQUIRE_SPECIAL_CHARACTER = "requireSpecialCharacter", o.REQUIRE_UPPERCASE = "requireUppercase", o))(_ || {});
-const Pe = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-function k(o) {
-  return (o == null ? void 0 : o.toString()) ?? "";
-}
-function Oe(o, t = 12) {
-  return k(o).length >= t;
-}
-function Se(o) {
-  return /[a-z]/.test(k(o));
-}
-function Ue(o) {
-  return /[A-Z]/.test(k(o));
-}
-function Ae(o) {
-  return /\d/.test(k(o));
-}
-function Be(o) {
-  return /[^a-zA-Z0-9]/.test(k(o));
-}
-const qe = {
-  "en-US": { capsLockEnabled: "Caps lock on", hidePassword: "Hide", showPassword: "Show", validationChecked: "Checked", validationMinLength: "{numberOfCharacters} characters", validationRequireLowercase: "{numberOne} lowercase (a-z)", validationRequireNumeric: "{numberOne} numerical (0-9)", validationRequireSpecialCharacter: "{numberOne} special character", validationRequireUppercase: "{numberOne} uppercase (A-Z)", validationSuggestion: "Avoid using currency symbols or accented letters.", validationTitle: "Password must contain at least:", validationUnchecked: "Unchecked", validationValid: "Input is valid" },
-  "ja-JP": { capsLockEnabled: "Caps lockオン", hidePassword: "非表示", showPassword: "表示", validationChecked: "チェック済み", validationMinLength: "{numberOfCharacters}文字", validationRequireLowercase: "{numberOne} 小文字（a-z）", validationRequireNumeric: "{numberOne} 数値 (0-9)", validationRequireSpecialCharacter: "{numberOne} 特殊文字", validationRequireUppercase: "{numberOne} 大文字 (A-Z)", validationSuggestion: "通貨記号やアクセント付き文字は使用しないでください。", validationTitle: "パスワードには少なくとも次のものを含める必要があります :", validationUnchecked: "チェックなし", validationValid: "入力は有効です" },
-  "pt-BR": { capsLockEnabled: "Caps Lock ativado", hidePassword: "ocultar", showPassword: "Exibir", validationChecked: "Checado", validationMinLength: "{numberOfCharacters} caracteres", validationRequireLowercase: "{numberOne} minúscula (a-z)", validationRequireNumeric: "{numberOne} numérico (0-9)", validationRequireSpecialCharacter: "{numberOne} caractere especial", validationRequireUppercase: "{numberOne} maiúscula (A-Z)", validationSuggestion: "Evite usar símbolos de moeda e letras com acento.", validationTitle: "A senha deve conter pelo menos:", validationUnchecked: "Não verificado", validationValid: "A entrada é válida" }
-}, Z = 12, z = 500, X = 2e3, G = 2e3, Me = {
-  i18n: { messages: qe },
-  name: "bento-input-field-password",
-  model: { prop: "modelValue" }
-}, Ne = /* @__PURE__ */ ue({
-  ...Me,
-  props: {
-    description: { default: null },
-    disabled: { type: Boolean, default: !1 },
-    errorMessage: { default: null },
-    label: { default: null },
-    optional: { type: Boolean, default: !1 },
-    placeholder: { default: "" },
-    readonly: { type: Boolean, default: !1 },
-    required: { type: Boolean, default: !1 },
-    tooltipText: { default: null },
-    condensed: { default: !1 },
-    debounceTime: { default: z },
-    disableValidation: { type: Boolean, default: !1 },
-    value: { default: void 0 },
-    modelValue: { default: void 0 },
-    validation: { default: void 0 },
-    withHint: { type: Boolean, default: !0 }
-  },
-  emits: ["blur", "focus", "input:valid", "input:error", "input", "update:model-value"],
-  setup(o, { emit: t }) {
-    const a = o, { t: e, n: d } = Re(), v = ce(), h = l(g.PASSWORD), c = l(a.modelValue ?? a.value), O = l(!1), S = l(!1), w = l([]), y = l({}), p = l(null), f = l(!1), U = l(null), A = l(null), J = l(null), R = l(!1);
-    pe(Ie, "bento-input-field-password");
-    const { focused: B } = Le(U), { emitValue: q } = Ee(t), K = Q("validationListId"), M = Q("validationPopoverId"), N = u(() => h.value === g.TEXT), Y = u(
-      () => w.value.map(
-        (i) => i ? "b-input-field-password__validation-list--valid" : "b-input-field-password__validation-list--invalid"
-      )
-    ), $ = u(
-      () => p.value ? "b-input-field-password__input-tooltip--timed" : ""
-    ), j = u(() => ({
-      ariaHidden: !1,
-      condensed: a.condensed,
-      disabled: a.disabled,
-      errorMessage: a.errorMessage,
-      optional: a.optional,
-      placeholder: a.placeholder,
-      readonly: a.readonly,
-      required: a.required,
-      tooltipText: a.tooltipText,
-      type: h.value,
-      modelValue: c.value,
-      "aria-haspopup": I.value ? "dialog" : !1,
-      "aria-describedby": I.value ? M : "",
-      ...v
-    })), E = u(() => {
-      var m, b, n, C, L, x;
-      if (a.validation && !a.validation.extendDefaultValidation)
-        return a.validation;
-      const i = [
-        {
-          label: e("validationMinLength", { numberOfCharacters: d(Z) }),
-          key: _.MIN_LENGTH,
-          validate: Oe
-        },
-        {
-          label: e("validationRequireLowercase", { numberOne: d(1) }),
-          key: _.REQUIRE_LOWERCASE,
-          validate: Se
-        },
-        {
-          label: e("validationRequireUppercase", { numberOne: d(1) }),
-          key: _.REQUIRE_UPPERCASE,
-          validate: Ue
-        },
-        {
-          label: e("validationRequireNumeric", { numberOne: d(1) }),
-          key: _.REQUIRE_NUMERIC,
-          validate: Ae
-        },
-        {
-          label: e("validationRequireSpecialCharacter", { numberOne: d(1) }),
-          key: _.REQUIRE_SPECIAL_CHARACTER,
-          validate: Be
-        }
-      ];
-      let s = i;
-      if (a.validation) {
-        const le = i.map((r) => r.key), V = (b = (m = a.validation) == null ? void 0 : m.list) == null ? void 0 : b.map((r) => r.key), re = ((C = (n = a.validation) == null ? void 0 : n.list) == null ? void 0 : C.filter((r) => !le.includes(r.key))) ?? [];
-        s = [...i.map((r) => {
-          var D, W;
-          return V != null && V.includes(r.key) ? (W = (D = a.validation) == null ? void 0 : D.list) == null ? void 0 : W.find((de) => de.key === r.key) : r;
-        }), ...re];
-      }
-      return {
-        title: ((L = a.validation) == null ? void 0 : L.title) ?? e("validationTitle"),
-        suggestion: ((x = a.validation) == null ? void 0 : x.suggestion) ?? e("validationSuggestion"),
-        list: s
-      };
-    }), H = u(() => {
-      var i, s;
-      return (s = (i = E.value) == null ? void 0 : i.list) == null ? void 0 : s.filter((m) => !m.disabled);
-    }), F = u(() => {
-      var i;
-      return (i = w.value) == null ? void 0 : i.some((s) => !s);
-    }), I = u(
-      () => {
-        var i, s;
-        return A.value && ((s = (i = E.value) == null ? void 0 : i.list) == null ? void 0 : s.length) > 0;
-      }
-    ), ee = (i) => {
-      typeof i.getModifierState == "function" && (R.value = i.getModifierState("CapsLock"));
-    }, ae = () => {
-      N.value ? h.value = g.PASSWORD : h.value = g.TEXT;
-    }, te = (i) => {
-      a.disabled || (c.value = i, q(c.value));
-    }, ie = () => {
-      t("focus");
-    }, oe = () => {
-      t("blur");
-    }, T = (i) => {
-      var b;
-      const s = (b = H.value) == null ? void 0 : b.map((n) => ({
-        key: n.key,
-        label: n.label,
-        isValid: n.validate(i, ...n.additionalArgs ?? [])
-      }));
-      let m = 1;
-      w.value = s == null ? void 0 : s.map((n) => n.isValid), y.value = s == null ? void 0 : s.filter((n) => !n.isValid).reduce((n, C) => {
-        const L = C.key ?? `custom-rule-${m++}`;
-        return {
-          ...n,
-          [L]: C.label
-        };
-      }, {});
-    }, se = () => {
-      f.value = !1, p.value = null;
-    }, ne = () => {
-      f.value = !0;
-    };
-    return P(
-      () => [a.value, a.modelValue],
-      () => {
-        c.value = a.modelValue ?? a.value;
-      }
-    ), P(B, (i) => {
-      i || (S.value = !0), a.disableValidation || (a.withHint && (O.value = i), T(c.value));
-    }), P(R, (i) => {
-      i ? (f.value = !0, p.value = setTimeout(() => {
-        p.value = null, f.value = !1;
-      }, G)) : (clearTimeout(p.value), p.value = null, f.value = !1);
-    }), ye(
-      c,
-      (i) => {
-        T(i), F.value ? t("input:error", y.value) : t("input:valid");
-      },
-      // wait for 0.5s before checking validity OR 2s of continuous typing
-      { debounce: a.debounceTime, maxWait: X }
-    ), a.value && he(
-      'BentoInputFieldPassword "value" property',
-      `The use of "value" prop in "BentoInputFieldPassword" is no longer supported.
-                Use the "v-model" or "model-value" property instead.`,
-      "2.0.0"
-    ), { __sfc: !0, MIN_PASSWORD_LENGTH: Z, DEBOUNCE_DURATION: z, DEBOUNCE_MAX_WAIT: X, TOOLTIP_TIMEOUT: G, t: e, n: d, props: a, emit: t, attrs: v, inputType: h, inputValue: c, isHintDisplayed: O, isTouched: S, passwordValidity: w, errorsList: y, capsLockTooltipTimeoutID: p, isTooltipDisplayed: f, inputFieldPasswordRef: U, inputFieldPasswordInputRef: A, inputFieldPasswordCapsLockIconRef: J, isCapsLockOn: R, focused: B, emitValue: q, validationListId: K, validationPopoverId: M, isPasswordReadable: N, passwordValidityConditionalClass: Y, tooltipConditionalClass: $, inputFieldArgs: j, computedValidations: E, computedValidationList: H, hasErrors: F, hasValidations: I, checkCapsLock: ee, toggleInputType: ae, onUpdateModelValue: te, onFocus: ie, onBlur: oe, checkValidity: T, handleCapsLockMouseLeave: se, handleCapsLockMouseEnter: ne, BentoButton: ve, BentoImage: fe, BentoInputField: me, BentoPopover: _e, BentoTypography: be, Tooltip: Te, CheckmarkCircleFillIcon: Ce, DotIcon: ge, HideIcon: we, ShowIcon: ke, CapsLockIcon: Pe };
-  }
-});
-var He = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { ref: "inputFieldPasswordRef" }, [a(e.BentoInputField, t._b({ ref: "inputFieldPasswordInputRef", staticClass: "b-input-field-password__input", attrs: { spellcheck: "false" }, on: { blur: e.onBlur, focus: e.onFocus, "update:model-value": e.onUpdateModelValue, keydown: e.checkCapsLock, keyup: e.checkCapsLock }, scopedSlots: t._u([t.description ? { key: "description", fn: function() {
-    return [t._t("description", function() {
-      return [t._v(t._s(t.description))];
-    })];
-  }, proxy: !0 } : null, e.isCapsLockOn ? { key: "iconBefore", fn: function() {
-    return [a("div", { staticClass: "b-input-field-password__caps-lock-indicator", on: { mouseenter: e.handleCapsLockMouseEnter, mouseleave: e.handleCapsLockMouseLeave } }, [a(e.BentoImage, { ref: "inputFieldPasswordCapsLockIconRef", attrs: { src: e.CapsLockIcon, alt: e.t("capsLockEnabled") } })], 1), e.inputFieldPasswordCapsLockIconRef ? a(e.Tooltip, { class: e.tooltipConditionalClass, attrs: { content: e.t("capsLockEnabled"), "disabled-focus-trap": !0, "fallback-position": ["top", "bottom"], "is-shown": e.isTooltipDisplayed, "target-element": e.inputFieldPasswordCapsLockIconRef } }) : t._e()];
-  }, proxy: !0 } : null, t.disabled ? null : { key: "iconAfter", fn: function() {
-    return [a(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: e.toggleInputType }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
-      return [e.isPasswordReadable ? t._e() : a(e.ShowIcon, { attrs: { "svg-title": e.t("showPassword") } }), e.isPasswordReadable ? a(e.HideIcon, { attrs: { "svg-title": e.t("hidePassword") } }) : t._e()];
-    }, proxy: !0 }], null, !1, 956294632) })];
-  }, proxy: !0 }], null, !0) }, "bento-input-field", e.inputFieldArgs, !1), [t.label ? [t._v(t._s(t.label))] : [t._t("default")]], 2), e.hasValidations ? a(e.BentoPopover, { attrs: { open: e.isHintDisplayed, "target-element": e.inputFieldPasswordInputRef, "disable-focus-trap": !0, "aria-label": e.computedValidations.title, "aria-describedby": e.validationListId, position: "right-start" } }, [a("div", { attrs: { id: e.validationPopoverId } }, [e.computedValidations.title ? a(e.BentoTypography, { staticClass: "b-input-field-password__validation-title" }, [t._v(" " + t._s(e.computedValidations.title) + " ")]) : t._e(), e.hasErrors ? t._e() : a("p", { staticClass: "b-input-field-password__validation-status--valid", attrs: { role: "alert" } }, [t._v(" " + t._s(e.t("validationValid")) + " ")]), a("ul", { staticClass: "b-input-field-password__validation-list", attrs: { id: e.validationListId } }, t._l(e.computedValidationList, function(d, v) {
-    return a("li", { key: v, class: e.passwordValidityConditionalClass[v], attrs: { "aria-live": "polite", "aria-atomic": "true" } }, [a("span", { staticClass: "b-input-field-password__validation-list-icon" }, [e.passwordValidity[v] ? a(e.CheckmarkCircleFillIcon, { attrs: { "svg-title": e.t("validationChecked") } }) : a(e.DotIcon, { attrs: { "svg-title": e.t("validationUnchecked") } })], 1), a(e.BentoTypography, { staticClass: "b-input-field-password__validation-list-text", attrs: { el: "span" } }, [t._v(" " + t._s(d.label) + " ")])], 1);
-  }), 0), e.computedValidations.suggestion ? a(e.BentoTypography, { staticClass: "b-input-field-password__validation-suggestion" }, [t._v(" " + t._s(e.computedValidations.suggestion) + " ")]) : t._e()], 1)]) : t._e()], 1);
-}, Fe = [], xe = /* @__PURE__ */ Ve(
-  Ne,
-  He,
-  Fe,
-  !1,
-  null,
-  "57349ba0"
-);
-const na = xe.exports;
-export {
-  Ae as a,
-  Be as b,
-  Ue as c,
-  na as i,
-  Oe as m,
-  Se as r
-};
-//# sourceMappingURL=input-field-password.BKT1mYUw.js.map