@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/radio-group.js

@@ -0,0 +1,192 @@
+import "./assets/index24.css";
+import { defineComponent as v, toRefs as I, computed as r, ref as E, watch as R } from "vue";
+import { ControlsGroup as A } from "./controls-group.js";
+import { BentoTypography as k, BentoTypographyVariant as T, BentoTypographyElement as x } from "./typography.js";
+import { u as L } from "./chunks/aria-label.ac9651a5.js";
+import { g as O } from "./chunks/unique-id.a2a2b458.js";
+import { u as D } from "./chunks/use-default-slot-validator.83d977a1.js";
+import { h as y } from "./chunks/hasSlot.dceac207.js";
+import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var i = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t))(i || {}), s = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.ERROR = "error", t))(s || {});
+const N = v({
+  name: "radio-button",
+  components: { BentoTypography: k },
+  inheritAttrs: !1,
+  model: { prop: "modelValue" },
+  props: {
+    /**
+     * Disable the radio button (optional)
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows radio-button in error state (optional)
+     */
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indicates the value of the input that will be returned when it's checked
+     */
+    value: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * This property should not be used directly.
+     * It will be used by v-model directive on radio component.
+     */
+    modelValue: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  emits: ["input"],
+  setup(t, { slots: e, emit: a }) {
+    var d, c, p, _, f, b, m;
+    const { value: n } = I(t), o = O("radio-button"), l = y(e)("default"), u = y(e)("description");
+    D("radio-button", l, u);
+    const g = r(() => ({
+      [`b-radio-button--${s.DISABLED}`]: t.disabled
+    })), C = r(() => ({
+      [`b-radio-button__input--${s.ERROR}`]: t.hasError
+    })), V = L({
+      ariaLabel: ((p = (c = (d = e.default) == null ? void 0 : d.call(e)) == null ? void 0 : c[0]) == null ? void 0 : p.text) ?? ((m = (b = (f = (_ = e.default) == null ? void 0 : _.call(e)) == null ? void 0 : f[0]) == null ? void 0 : b.children) == null ? void 0 : m.toString()),
+      label: n.value
+    }), S = r(() => t.hasError), B = r(() => t.value === t.modelValue);
+    return {
+      // Values
+      ariaLabel: V,
+      ariaInvalid: S,
+      isChecked: B,
+      defaultSlotValue: l,
+      descriptionSlotValue: u,
+      conditionalClassContainer: g,
+      conditionalClassInput: C,
+      radioButtonId: o,
+      // Events
+      onClick: () => {
+        t.disabled || a("input", t.value);
+      },
+      // Enums
+      BentoTypographyVariant: T,
+      BentoTypographyElement: x
+    };
+  }
+});
+var $ = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-radio-button", class: e.conditionalClassContainer, attrs: { "data-testid": "radio-button-container" } }, [a("input", { staticClass: "b-radio-button__input", class: e.conditionalClassInput, attrs: { id: e.radioButtonId, "aria-checked": e.isChecked, "aria-label": e.ariaLabel, "aria-invalid": e.ariaInvalid, disabled: e.disabled, type: "radio", role: "radio" }, domProps: { checked: e.isChecked, value: e.value }, on: { change: e.onClick } }), e.defaultSlotValue ? a("label", { staticClass: "b-radio-button__label-container", attrs: { for: e.radioButtonId } }, [e.defaultSlotValue ? a("bento-typography", { staticClass: "b-radio-button__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("default")], 2) : e._e(), e.defaultSlotValue && e.descriptionSlotValue ? a("bento-typography", { staticClass: "b-radio-button__description", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
+}, P = [], q = /* @__PURE__ */ h(
+  N,
+  $,
+  P,
+  !1,
+  null,
+  "56ff35ee",
+  null,
+  null
+);
+const z = q.exports, F = v({
+  name: "bento-radio-group",
+  components: { ControlsGroup: A, RadioButton: z },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The checkbox group's items.
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
+    variant: {
+      type: String,
+      default: i.VERTICAL,
+      validator: (t) => Object.values(i).includes(t)
+    },
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
+    formId: {
+      type: String,
+      default: null
+    },
+    /**
+     * If set to true, renders all radio-buttons in the group in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, renders all radio-buttons in the group in an error state.
+     */
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.
+     * Defaults to no value selected.
+     */
+    selectedValue: {
+      type: [Number, String, null],
+      default: null
+    }
+  },
+  emits: ["input"],
+  setup(t, { emit: e }) {
+    const a = E(t.selectedValue);
+    return R(
+      () => t.selectedValue,
+      () => {
+        a.value = t.selectedValue;
+      }
+    ), {
+      // Values
+      conditionalClasses: r(() => ({
+        "b-radio-group--horizontal": t.variant === i.HORIZONTAL
+      })),
+      inputValue: a,
+      // Methods
+      onInput: (l) => {
+        e("input", l);
+      }
+    };
+  }
+});
+var G = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("controls-group", { staticClass: "b-radio-group", class: e.conditionalClasses, attrs: { form: e.formId, disabled: e.disabled, label: e.label } }, e._l(e.items, function(n) {
+    return a("radio-button", { key: n.value, attrs: { value: n.value, disabled: e.disabled || n.disabled, "has-error": e.hasError || n.hasError }, on: { input: e.onInput }, scopedSlots: e._u([n.description ? { key: "description", fn: function() {
+      return [e._v(e._s(n.description))];
+    }, proxy: !0 } : null], null, !0), model: { value: e.inputValue, callback: function(o) {
+      e.inputValue = o;
+    }, expression: "inputValue" } }, [e._v(" " + e._s(n.label) + " ")]);
+  }), 1);
+}, H = [], Y = /* @__PURE__ */ h(
+  F,
+  G,
+  H,
+  !1,
+  null,
+  "cade7d8b",
+  null,
+  null
+);
+const ee = Y.exports;
+export {
+  ee as BentoRadioGroup,
+  i as BentoRadioGroupVariant
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":["../src/components/radio-group/radio-group.types.ts","../src/components/radio-group/components/radio-button/radio-button.types.ts","../src/components/radio-group/components/radio-button/radio-button.vue","../src/components/radio-group/radio-group.vue"],"sourcesContent":["export enum BentoRadioGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoRadioGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n","export enum BentoRadioButtonStateClass {\n    DISABLED = 'disabled',\n    ERROR = 'error',\n}\n","<template>\n    <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n        <input\n            :id=\"radioButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-radio-button__input\"\n            :class=\"conditionalClassInput\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"defaultSlotValue\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                class=\"b-radio-button__label\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                class=\"b-radio-button__description\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent, toRefs } from 'vue';\n    import { useDefaultSlotValidator } from '@/composables';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { BentoRadioButtonStateClass } from './radio-button.types';\n\n    /**\n     * Radio buttons are used when two or more options are mutually exclusive,\n     * the user can only select a single option from a list of pre-defined options.\n     * The label tag area is also clickable.\n     * Only to be used internally.\n     *\n     * @usage\n     * import { RadioButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { RadioButton },\n     *     template: `\n     *         <radio-button\n     *             disabled\n     *             value=\"inputRadio\"\n     *         >\n     *             Label text\n     *             <template #description>Description text below label</template>\n     *         </radio-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'radio-button',\n        components: { BentoTypography },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows radio-button in error state (optional)\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's checked\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on radio component.\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n        },\n        emits: ['input'],\n        setup(props, { slots, emit }) {\n            const { value } = toRefs(props);\n            const radioButtonId = generateUid('radio-button');\n\n            const defaultSlotValue = hasSlot(slots)('default');\n            const descriptionSlotValue = hasSlot(slots)('description');\n\n            useDefaultSlotValidator('radio-button', defaultSlotValue, descriptionSlotValue);\n\n            const conditionalClassContainer = computed(() => ({\n                [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n            }));\n            const conditionalClassInput = computed(() => ({\n                [`b-radio-button__input--${BentoRadioButtonStateClass.ERROR}`]: props.hasError,\n            }));\n\n            const ariaLabel = useAriaLabel({\n                ariaLabel: slots.default?.()?.[0]?.text ?? slots.default?.()?.[0]?.children?.toString(),\n                label: value.value as string,\n            });\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => props.hasError);\n\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('input', props.value);\n                }\n            };\n\n            return {\n                // Values\n                ariaLabel,\n                ariaInvalid,\n                isChecked,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClassContainer,\n                conditionalClassInput,\n                radioButtonId,\n\n                // Events\n                onClick,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","<template>\n    <controls-group\n        class=\"b-radio-group\"\n        :class=\"conditionalClasses\"\n        :form=\"formId\"\n        :disabled=\"disabled\"\n        :label=\"label\"\n    >\n        <radio-button\n            v-for=\"item in items\"\n            :key=\"item.value\"\n            v-model=\"inputValue\"\n            :value=\"item.value\"\n            :disabled=\"disabled || item.disabled\"\n            :has-error=\"hasError || item.hasError\"\n            @input=\"onInput\"\n        >\n            {{ item.label }}\n            <template v-if=\"item.description\" #description>{{ item.description }}</template>\n        </radio-button>\n    </controls-group>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, watch } from 'vue';\n    import { ControlsGroup } from '@/components/controls-group';\n    import { BentoRadioGroupItems, BentoRadioGroupVariant } from './radio-group.types';\n    import RadioButton from './components/radio-button/radio-button.vue';\n\n    /**\n     * A radio group component should be used whenever it is necessary to use a set of radio buttons\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoRadioGroup, BentoRadioGroupVariant } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoRadioGroup },\n     *     template: `\n     *             <bento-radio-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n     *                 ]\"\n     *                 :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-radio-group',\n        components: { ControlsGroup, RadioButton },\n        inheritAttrs: false,\n        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoRadioGroupItems>,\n                required: true,\n            },\n            /**\n             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoRadioGroupVariant>,\n                default: BentoRadioGroupVariant.VERTICAL,\n                validator: (value: BentoRadioGroupVariant) => Object.values(BentoRadioGroupVariant).includes(value),\n            },\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all radio-buttons in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all radio-buttons in the group in an error state.\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n             * Defaults to no value selected.\n             */\n            selectedValue: {\n                type: [Number, String, null],\n                default: null,\n            },\n        },\n        emits: ['input'],\n        setup(props, { emit }) {\n            const inputValue = ref(props.selectedValue);\n\n            watch(\n                () => props.selectedValue,\n                () => {\n                    inputValue.value = props.selectedValue;\n                }\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-radio-group--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n            }));\n\n            const onInput = value => {\n                emit('input', value);\n            };\n\n            return {\n                // Values\n                conditionalClasses,\n                inputValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["BentoRadioGroupVariant","BentoRadioGroupVariant2","BentoRadioButtonStateClass","BentoRadioButtonStateClass2","_sfc_main$1","defineComponent","BentoTypography","props","slots","emit","value","toRefs","radioButtonId","generateUid","defaultSlotValue","hasSlot","descriptionSlotValue","useDefaultSlotValidator","conditionalClassContainer","computed","conditionalClassInput","ariaLabel","useAriaLabel","_c","_b","_a","_g","_f","_e","_d","ariaInvalid","isChecked","BentoTypographyVariant","BentoTypographyElement","_sfc_main","ControlsGroup","RadioButton","inputValue","ref","watch"],"mappings":"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"}

package/dist/search-bar.js

@@ -0,0 +1,106 @@
+import "./assets/index31.css";
+import { defineComponent as o, ref as s, watch as u } from "vue";
+import { BentoInputField as i, BentoInputFieldType as p } from "./input-field.js";
+import { d } from "./chunks/dropdown.0d394d2f.js";
+import { u as L } from "./chunks/dropdown.0d394d2f.js";
+import { S as f } from "./chunks/search.6be3396b.js";
+import { C as m } from "./chunks/cross-circle-fill.0a1d738c.js";
+import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var n = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(n || {}), _ = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(_ || {});
+const y = {
+  "en-US": {
+    search: "Search",
+    clearSearch: "Clear search"
+  }
+}, b = o({
+  name: "bento-search-bar",
+  i18n: { messages: y },
+  components: {
+    CrossCircleFillIcon: m,
+    BentoInputField: i,
+    SearchIcon: f
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Text that labels an the search bar input element
+     */
+    inputFieldAriaLabel: { type: String, required: !0 },
+    /**
+     * Custom debounce time. Default: 300
+     */
+    debounceTime: { type: Number, default: 300 },
+    /**
+     * Text displayed as the placeholder of the input-field
+     */
+    placeholder: { type: String, default: "" },
+    /**
+     * Text displayed as the value being searched
+     */
+    value: { type: String, default: void 0 }
+  },
+  emits: [
+    n.INPUT,
+    n.CLEAR,
+    n.ESCAPE
+  ],
+  setup(r, { emit: e }) {
+    const a = s(r.value), t = s();
+    u(
+      () => r.value,
+      () => {
+        a.value = r.value;
+      },
+      { immediate: !0 }
+    );
+    const c = () => {
+      a.value = "", e(n.CLEAR), e(n.INPUT, "");
+    }, l = d(() => {
+      e(n.INPUT, a.value);
+    }, r.debounceTime);
+    return {
+      // Values
+      searchTerm: a,
+      bentoInputField: t,
+      // Emits
+      onClearSearch: c,
+      onInputEvent: l,
+      // Enums
+      BentoInputFieldType: p,
+      BentoSearchBarInternalEvent: n
+    };
+  }
+});
+var C = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-search-bar" }, [a("bento-input-field", { ref: "bentoInputField", attrs: { type: e.BentoInputFieldType.SEARCH, "aria-label": e.inputFieldAriaLabel, "aria-hidden": !1, placeholder: e.placeholder }, on: { input: e.onInputEvent, "escape-pressed": function(t) {
+    return e.$emit(e.BentoSearchBarInternalEvent.ESCAPE);
+  } }, scopedSlots: e._u([{ key: "defaultIconBefore", fn: function() {
+    return [a("search-icon", { attrs: { "svg-title": e.$t("search") } })];
+  }, proxy: !0 }, e.searchTerm ? { key: "iconAfter", fn: function() {
+    return [a("div", { staticClass: "b-search-bar__clear-search", attrs: { tabindex: "0", "data-testid": "b-search-bar-clear-search-button" }, on: { click: e.onClearSearch, keypress: function(t) {
+      return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onClearSearch.apply(null, arguments);
+    }, keyup: function(t) {
+      return !t.type.indexOf("key") && e._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+    } } }, [a("cross-circle-fill-icon", { attrs: { "svg-title": e.$t("clearSearch") } })], 1)];
+  }, proxy: !0 } : null], null, !0), model: { value: e.searchTerm, callback: function(t) {
+    e.searchTerm = t;
+  }, expression: "searchTerm" } })], 1);
+}, S = [], v = /* @__PURE__ */ h(
+  b,
+  C,
+  S,
+  !1,
+  null,
+  "269c80b9",
+  null,
+  null
+);
+const F = v.exports;
+export {
+  F as BentoSearchBar,
+  _ as BentoSearchBarEvent,
+  n as BentoSearchBarInternalEvent,
+  L as useSearchBarFilter
+};
+//# sourceMappingURL=search-bar.js.map

package/dist/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.js","sources":["../src/components/search-bar/search-bar.types.ts","../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-model=\"searchTerm\"\n            :type=\"BentoInputFieldType.SEARCH\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @escape-pressed=\"$emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #defaultIconBefore>\n                <search-icon :svg-title=\"$t('search')\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"$t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, ref , watch } from 'vue';\n    import { BentoInputFieldType } from '@/components/input-field/input-field.types';\n    import { debounce } from '@/utils/ts/debounce';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import messages from './messages.json';\n    \n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-modal=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear-search=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-search-bar',\n        i18n: { messages },\n        components: {\n            CrossCircleFillIcon,\n            BentoInputField,\n            SearchIcon,\n        },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text that labels an the search bar input element\n             */\n            inputFieldAriaLabel: { type: String, required: true },\n\n            /**\n             * Custom debounce time. Default: 300\n             */\n            debounceTime: { type: Number, default: 300 },\n\n            /**\n             * Text displayed as the placeholder of the input-field\n             */\n            placeholder: { type: String, default: '' },\n\n            /**\n             * Text displayed as the value being searched\n             */\n            value: { type: String, default: undefined },\n        },\n        emits: [\n            BentoSearchBarInternalEvent.INPUT,\n            BentoSearchBarInternalEvent.CLEAR,\n            BentoSearchBarInternalEvent.ESCAPE,\n        ],\n        setup(props, { emit }) {\n            const searchTerm = ref(props.value);\n            const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n            watch(\n                () => props.value,\n                () => {\n                    searchTerm.value = props.value;\n                },\n                { immediate: true }\n            );\n\n            const onClearSearch = () => {\n                searchTerm.value = '';\n                emit(BentoSearchBarInternalEvent.CLEAR);\n                emit(BentoSearchBarInternalEvent.INPUT, '');\n            };\n\n            const onInputEvent = debounce(() => {\n                emit(BentoSearchBarInternalEvent.INPUT, searchTerm.value);\n            }, props.debounceTime);\n\n            return {\n                // Values\n                searchTerm,\n                bentoInputField,\n\n                // Emits\n                onClearSearch,\n                onInputEvent,\n\n                // Enums\n                BentoInputFieldType,\n                BentoSearchBarInternalEvent,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","_sfc_main","defineComponent","messages","CrossCircleFillIcon","BentoInputField","SearchIcon","props","emit","searchTerm","ref","bentoInputField","watch","onClearSearch","onInputEvent","debounce","BentoInputFieldType"],"mappings":";;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GC8EZE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,YAAA;AAAA,IACA,qBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,qBAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,cAAA,EAAA,MAAA,QAAA,SAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA,EAKA;AAAA,EACA,OAAA;AAAA,IACAT,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAU,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,EAAA,KAAA,GACAI,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAL,EAAA;AAAA,MACA,MAAA;AAEA,QAAAE,EAAA,QAAAF,EAAA;AAAA,MAAA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IACA;AAGA,UAAAM,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAA,IACAD,EAAAX,EAAA,KAAA,GACAW,EAAAX,EAAA,OAAA,EAAA;AAAA,IAAA,GAGAiB,IAAAC,EAAA,MAAA;AACA,MAAAP,EAAAX,EAAA,OAAAY,EAAA,KAAA;AAAA,IAAA,GAAAF,EAAA,YAAA;AAGA,WAAA;AAAA;AAAA,MAAA,YAAAE;AAAA,MAEA,iBAAAE;AAAA;AAAA,MACA,eAAAE;AAAA,MAGA,cAAAC;AAAA;AAAA,MACA,qBAAAE;AAAA,MAGA,6BAAAnB;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/status.js

@@ -0,0 +1,47 @@
+import "./assets/index29.css";
+import { defineComponent as a, computed as n } from "vue";
+import { BentoTypography as o, BentoTypographyElement as l, BentoTypographyVariant as _ } from "./typography.js";
+import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var r = /* @__PURE__ */ ((t) => (t.BLUE = "blue", t.GREEN = "green", t.GREY = "grey", t.ORANGE = "orange", t.RED = "red", t.YELLOW = "yellow", t))(r || {});
+const p = a({
+  name: "bento-status",
+  components: { BentoTypography: o },
+  inheritAttrs: !1,
+  props: {
+    variant: {
+      type: String,
+      required: !0,
+      validator: (t) => Object.values(r).includes(t)
+    }
+  },
+  setup(t) {
+    return {
+      // Values
+      conditionalClass: n(() => ({
+        [`b-status__indicator--${t.variant}`]: !0
+      })),
+      // Enums
+      BentoTypographyElement: l,
+      BentoTypographyVariant: _
+    };
+  }
+});
+var c = function() {
+  var s = this, e = s._self._c;
+  return s._self._setupProxy, e("div", { staticClass: "b-status", attrs: { role: "status" } }, [e("span", { staticClass: "b-status__indicator", class: s.conditionalClass, attrs: { role: "presentation" } }), e("bento-typography", { staticClass: "b-status__label", attrs: { el: s.BentoTypographyElement.SPAN, variant: s.BentoTypographyVariant.BODY } }, [s._t("default")], 2)], 1);
+}, u = [], d = /* @__PURE__ */ i(
+  p,
+  c,
+  u,
+  !1,
+  null,
+  "db708a18",
+  null,
+  null
+);
+const b = d.exports;
+export {
+  b as BentoStatus,
+  r as BentoStatusVariant
+};
+//# sourceMappingURL=status.js.map

package/dist/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","sources":["../src/components/status/status.types.ts","../src/components/status/status.vue"],"sourcesContent":["export enum BentoStatusVariant {\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-status\" role=\"status\">\n        <span class=\"b-status__indicator\" :class=\"conditionalClass\" role=\"presentation\"></span>\n        <bento-typography\n            class=\"b-status__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\n            <slot></slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoStatusVariant } from './status.types';\n\n    /**\n     * A Status component is used to indicate a\n     * passage of time or a particular step of a process.\n     *\n     * @example\n     * import { BentoStatus, BentoStatusVariant } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStatus },\n     *     template: `\n     *          <bento-status :variant=\"BentoStatusVariant.RED\">\n     *              1 week ago\n     *          </bento-status>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-status',\n        components: { BentoTypography },\n        inheritAttrs: false,\n        props: {\n            variant: {\n                type: String as PropType<BentoStatusVariant>,\n                required: true,\n                validator: (type: BentoStatusVariant) => Object.values(BentoStatusVariant).includes(type),\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({\n                [`b-status__indicator--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClass,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./status.scss\" />\n"],"names":["BentoStatusVariant","BentoStatusVariant2","_sfc_main","defineComponent","BentoTypography","type","props","computed","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UANQA,IAAAD,KAAA,CAAA,CAAA;ACkCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAMA,WAAA;AAAA;AAAA,MAAA,kBAJAC,EAAA,OAAA;AAAA,QAAA,CAAA,wBAAAD,EAAA,SAAA,GAAA;AAAA,MACA,EAAA;AAAA;AAAA,MAKA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/structured-list.js

@@ -0,0 +1,98 @@
+import "./assets/index30.css";
+import { defineComponent as s } from "vue";
+import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { BentoTypography as n, BentoTypographyElement as i } from "./typography.js";
+import { B as c, a } from "./chunks/button.31b757d1.js";
+import { C as _ } from "./chunks/copy.fa9aa27e.js";
+import { S as l } from "./chunks/search.6be3396b.js";
+import { B as u } from "./chunks/tooltip.a4625a7b.js";
+const p = s({
+  name: "bento-structured-list",
+  inheritAttrs: !1
+});
+var d = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-structured-list" }, [t._t("default")], 2);
+}, m = [], f = /* @__PURE__ */ r(
+  p,
+  d,
+  m,
+  !1,
+  null,
+  "90809c21",
+  null,
+  null
+);
+const R = f.exports, v = {
+  "en-US": {
+    search: "Search"
+  }
+}, y = s({
+  i18n: { messages: v },
+  name: "bento-structured-list-item",
+  components: {
+    BentoTypography: n,
+    BentoButton: c,
+    Copy: _,
+    SearchIcon: l
+  },
+  directives: { BentoTooltipDirective: u },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Label to display for the value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text to copy when the user clicks `Copy` icon
+     */
+    copy: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Function to trigger when user clicks `Search` icon
+     */
+    search: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * Text to display when the user hovers over `Search` icon
+     */
+    searchTooltip: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup() {
+    return {
+      BentoButtonVariant: a,
+      BentoTypographyElement: i
+    };
+  }
+});
+var h = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-structured-list-item" }, [e("div", { staticClass: "b-structured-list-item__label" }, [e("bento-typography", [t._v(" " + t._s(t.label) + " ")])], 1), e("div", { staticClass: "b-structured-list-item__value" }, [t._t("default"), t.copy ? e("copy", { staticClass: "b-structured-list-item__icon", attrs: { text: t.copy } }) : t._e(), t.search ? e("bento-button", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:top", value: t.searchTooltip ? t.searchTooltip : t.$t("search"), expression: "searchTooltip ? searchTooltip : $t('search')", arg: "top" }], staticClass: "b-structured-list-item__icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.search }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("search-icon", { attrs: { "svg-title": t.$t("search") } })];
+  }, proxy: !0 }], null, !1, 1678634924) }) : t._e()], 2)]);
+}, b = [], B = /* @__PURE__ */ r(
+  y,
+  h,
+  b,
+  !1,
+  null,
+  "511c98f4",
+  null,
+  null
+);
+const A = B.exports;
+export {
+  R as BentoStructuredList,
+  A as BentoStructuredListItem
+};
+//# sourceMappingURL=structured-list.js.map

package/dist/structured-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"structured-list.js","sources":["../src/components/structured-list/structured-list.vue","../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <div class=\"b-structured-list\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" :type=\"BentoPaymentMethodType.KLARNA\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\">\n        <div class=\"b-structured-list-item__label\">\n            <bento-typography>\n                {{ label }}\n            </bento-typography>\n        </div>\n        <div class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import { BentoTooltipDirective } from '@/directives';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import messages from '../../messages.json';\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoTypography,\n            BentoButton,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            return {\n                BentoButtonVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","_sfc_main","messages","BentoTypography","BentoButton","Copy","SearchIcon","BentoTooltipDirective","BentoButtonVariant","BentoTypographyElement"],"mappings":";;;;;;;;AAgCA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,cAAA;AAEA,CAAA;;;;;;;;;;;;;;;;;;GCwBAC,IAAAD,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAE,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAEA,WAAA;AAAA,MAAA,oBAAAC;AAAA,MACA,wBAAAC;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}