npm - @adyen/bento-vue3 - Versions diffs - 1.77.0 → 1.78.0 - Mend

@adyen/bento-vue3 1.77.0 → 1.78.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../vue2/src/composables/use-bento-base-filter/utils/utils.ts","../../vue2/src/composables/use-bento-base-filter/use-bento-base-filter.ts","../../vue2/src/composables/use-form-validate/use-form.ts","../../vue2/src/composables/use-bento-theme/use-bento-theme.types.ts","../../vue2/src/composables/use-bento-theme/use-bento-theme.ts","../../vue2/src/composables/use-bento-toast-controller/install.ts","../../vue2/src/composables/use-bento-theme/install.types.ts","../../vue2/src/composables/use-bento-theme/install.ts","../../vue2/src/install.ts","../../vue2/src/types/base-filter.ts"],"sourcesContent":["/*\n Checks if a value is a plain object.\n \n @param value The value to check.\n * @returns Whether the value is a plain object.\n /\nexport const isPlainObject = (value: unknown) => {\n if (value === null \|\| typeof value !== 'object') {\n return false;\n }\n\n return Object.prototype.toString.call(value) === '[object Object]';\n};\n\n/\n Checks if a value is an array.\n \n @param value The value to check.\n * @returns Whether the value is an array.\n /\nexport const isArray = <T>(value: T) => Array.isArray(value);\n\n/\n Checks if a value is empty.\n * If the value is an array, it checks if the array is empty or if all elements are empty strings.\n * If the value is not an array, it checks if the value is falsy.\n \n @param value The value to check.\n * @returns Whether the value is empty.\n /\nexport const isValueEmpty = <T>(value: T) =>\n isArray(value) ? (value as []).length === 0 \|\| (value as Array<T>).every(el => el === '') : !value;\n\n/\n Checks if two objects are deeply equal by comparing their JSON string representations.\n \n @param first The first value.\n * @param second The second value.\n * @returns Whether the values are equal.\n /\nexport const isEqual = <T>(first: T, second: T) => JSON.stringify(first) === JSON.stringify(second);\n\n/\n Creates a deep copy of a value.\n * If the value is a plain object, it uses `JSON.parse(JSON.stringify(value))` to create a deep copy.\n * Otherwise, it returns the value as is.\n \n @param value The value to copy.\n * @returns The deep copied value or the original value if it's not a plain object.\n /\nexport const deepCopy = <T>(value: T) =>\n isPlainObject(value) \|\| isArray(value) ? (JSON.parse(JSON.stringify(value)) as T) : value;\n\n/\n Copies the structure of a plain object, setting all values to `undefined`.\n * If the value is not a plain object, it returns `undefined`.\n \n @param value The object whose structure to copy.\n * @returns An object with the same keys as the input object but with all values set to `undefined`, or `undefined` if the input is not a plain object.\n /\nexport const copyStructure = <T>(value: T) =>\n isPlainObject(value) ? Object.fromEntries(Object.keys(value).map(key => [key, undefined])) : undefined;\n","import { computed, onMounted, ref, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport { copyStructure, deepCopy, isEqual, isValueEmpty } from './utils';\n\n/\n A composable to wire the `bento-base-filter` component for the mandatory fields and events.\n \n @usage\n * ```vue\n * <template>\n * <bento-base-filter\n * :disable-apply-button=\"isApplyButtonDisabled\"\n * :disable-secondary-button=\"isSecondaryButtonDisabled\"\n * @ apply=\"updateFilter\"\n * @ clear=\"clearFilter(updateFilter)\"\n * @ open=\"openFilter\"\n * @ reset=\"resetFilter(updateFilter)\"\n * >\n * <!-- CONTENT HERE -->\n * </bento-base-filter>\n * </template>\n * <script>\n * import { ref } from 'vue'\n * import { useBentoBaseFilter, BentoBaseFilter, BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n type CustomFilterValue = boolean\n * const props = defineProps<BentoBaseFilterProps<CustomFilterValue>>();\n \n const {\n * // Values\n * internalFilterValue,\n * isSecondaryButtonDisabled,\n * isApplyButtonDisabled,\n \n // Methods\n * clearFilter,\n * resetFilter,\n * openFilter,\n * } = useBentoBaseFilter<CustomFilterValue>(toRef(props, 'value'), toRef(props, 'defaultValue'));\n * </script>\n * ```\n \n @param appliedFilter The currently applied filter value.\n * @param defaultFilter The default filter value (if available).\n * @returns An object containing refs and functions:\n * - `internalFilterValue`: The temporary state of the filter before it's applied.\n * - `isSecondaryButtonDisabled`: `true` if the secondary (clear/reset) button should be disabled.\n * - `isApplyButtonDisabled`: `true` if the apply button should be disabled.\n * - `clearFilter`: Clears the filter to its initial or default state.\n * - `resetFilter`: Resets the filter to its default state.\n * - `openFilter`: Syncs the internal state with the applied filter.\n /\nexport function useBentoBaseFilter<T>(appliedFilter: Ref<T>, defaultFilter: Ref<T>) {\n /\n Handles the internal value. Kept in sync when the new value is applied\n /\n const internalFilterValue = ref<T>();\n const initialStructureOrValue = ref<T>();\n\n onMounted(() => {\n /\n Copy initial structure as long as the value is not \"undefined\"\n /\n if (appliedFilter.value != null) {\n initialStructureOrValue.value = copyStructure<T>(appliedFilter.value) as T;\n }\n });\n\n watch(\n () => appliedFilter.value,\n newValue => {\n internalFilterValue.value = deepCopy<T>(newValue);\n },\n { immediate: true }\n );\n\n /\n Indicates if the filter has a value applied (active).\n * - inactive (`true`): `appliedFilter` is empty (`undefined`) or all of its properties are empty for object values\n /\n const isFilterInactive = computed(\n () => isValueEmpty(appliedFilter.value) \|\| isEqual<T>(appliedFilter.value, initialStructureOrValue.value)\n );\n\n /\n Indicates if the secondary (clear/reset) button should be disabled.\n * - disabled (`true`): No filter value is applied or `appliedFilter` value is the same as the `defaultFilter` (persistent) value\n /\n const isSecondaryButtonDisabled = computed(() =>\n defaultFilter.value != null ? isEqual<T>(defaultFilter.value, appliedFilter.value) : isFilterInactive.value\n );\n\n const isApplyButtonDisabled = computed(() => {\n const isValueUnchanged = isEqual<T>(internalFilterValue.value, appliedFilter.value);\n return isValueUnchanged \|\| (isValueEmpty(internalFilterValue.value) && isFilterInactive.value);\n });\n\n /\n Clears the non-persistent filters (not used in persistent filters).\n \n Receives a callback to execute additional tasks required when clearing a filter\n \n - `object`: Sets all properties to `undefined`\n * - non-`object`: Sets to `undefined`\n * @param callback Function to be called when clearing a filter\n /\n function clearFilter(callback?: (newValue: T) => void) {\n internalFilterValue.value = deepCopy<T>(initialStructureOrValue.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n /\n Resets the persistent filters (not used in non-persistent filters).\n * Sets the `internalFilterValue`\n \n Receives a callback to execute additional tasks required when resetting a filter.\n * @param callback Function to be called when resetting a filter\n /\n function resetFilter(callback?: (newValue: T) => void) {\n internalFilterValue.value = deepCopy<T>(defaultFilter.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n /\n Sets the value to what is applied when opening a filter.\n * @param callback Function to be called when opening a filter\n /\n function openFilter(callback?: (newValue: T) => void) {\n // Reset value every time it opens\n internalFilterValue.value = deepCopy<T>(appliedFilter.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n return {\n // Values\n internalFilterValue,\n isSecondaryButtonDisabled,\n isApplyButtonDisabled,\n\n // Methods\n clearFilter,\n resetFilter,\n openFilter,\n };\n}\n","import { type Ref, ref, shallowRef } from 'vue';\nimport as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { type allKeys, type ErrorBag, type UseForm } from './use-form.types';\n\n/*\n Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n \n This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n \n @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead.\n \n @param formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns Schema transformed\n /\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n return formSchema;\n}\n\n/\n Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n \n @example\n * const validationSchema = toTypedSchema(\n * z.object({\n * name: z\n * .string()\n * .min(3, { message: 'Name is required' })\n * .startsWith('Jane')\n * .max(4, { message: 'Name cannot be longer than 4 characters' })\n * .default('Joe'),\n * })\n * );\n * getInitialFormValues(validationSchema)\n \n Will return:\n \n {\n * name: 'Joe'\n * }\n \n /\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n if (!!z && schema instanceof z.ZodObject) {\n return Object.fromEntries(\n Object.entries(schema.shape).map(([key, value]) => {\n if (!!z && value instanceof z.ZodDefault) {\n // eslint-disable-next-line no-underscore-dangle\n return [key, value._def.defaultValue()];\n }\n\n if (!!z && value instanceof z.ZodObject) {\n return [key, getInitialFormValues(value)];\n }\n\n return [key, undefined];\n })\n ) as z.infer<typeof schema>;\n }\n\n return undefined;\n}\n\n/*\n Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n /\nfunction normalizeFormPath(issue: z.ZodIssue) {\n return issue.path.join('.');\n}\n\n/\n Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n \n For Vue3 implementations use Vee-Validate.\n \n This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n \n @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead.\n \n @param props Form configuration object\n * @param extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns response.errors Object with all the form values and the first error found for that field (if any)\n * @returns response.values Object with all the form values and their current value\n * @returns response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n * When the validation is successful it calls the callback so the submit process can continue\n \n @example\n * const validationSchema = toTypedSchema(\n * z.object({\n * name: z\n * .string()\n * .min(3, { message: 'Name is required' })\n * .startsWith('Jane')\n * .max(4, { message: 'Name cannot be longer than 4 characters' })\n * .default('Joe'),\n * })\n * );\n \n const { values, errors, errorBag, submitForm, handleReset } = useForm({\n * validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n * // Send data to API here\n * })\n \n /\nexport function useForm<T extends ZodSchema>({\n validationSchema,\n}: UseForm<T>): {\n errorBag: Ref<{\n [P in allKeys<(typeof validationSchema)['_type']>]?: Array<string>;\n }>;\n errors: Ref<{\n [P in allKeys<(typeof validationSchema)['_type']>]?: string;\n }>;\n values: Ref<(typeof validationSchema)['_type']>;\n handleReset: () => void;\n submitForm: (submitted: any) => () => void;\n} {\n // Errors per field\n const errors = shallowRef<z.infer<typeof validationSchema>>({});\n // All errors per field\n const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n const values: Ref<z.TypeOf<T>> = ref(getInitialFormValues<T>(validationSchema));\n\n const cleanErrors = () => {\n errors.value = {};\n errorBag.value = {};\n };\n\n const resetForm = () => {\n cleanErrors();\n values.value = getInitialFormValues<T>(validationSchema);\n };\n\n const submitForm = submitted => () => {\n cleanErrors();\n\n // Run validations on the form data through the schema\n const validSchema = validationSchema.safeParse(values.value);\n\n // Update errors\n if (!validSchema.success) {\n (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n const path = normalizeFormPath(error);\n\n // Add the first ocurrance of a fild error to the \"errors\" object\n if (!errors.value[path]) {\n errors.value[path] = error.message;\n }\n\n // Add each error to the \"errorBag\" per field array\n if (!errorBag.value[path]) {\n errorBag.value[path] = [error.message];\n } else {\n errorBag.value[path].push(error.message);\n }\n });\n } else {\n submitted(values.value);\n }\n };\n\n return {\n // Values\n errorBag,\n errors,\n values,\n\n // Methods\n handleReset: () => resetForm(),\n submitForm,\n };\n}\n","import { type BentoTheme } from './install.types';\n\nexport const useBentoThemeKey = Symbol('use-bento-theme');\n\nexport interface UseBentoTheme {\n getTheme: () => string;\n setTheme: (theme: BentoTheme \| `${BentoTheme}`) => void;\n}\n","import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { getCurrentInstance, inject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport { type UseBentoTheme, useBentoThemeKey } from './use-bento-theme.types';\n\n/*\n Composable that handles theming-related capabilities for the Bento component library.\n * Requires the use of `BentoPlugin`.\n \n @example\n * <script setup lang=\"ts\">\n * import { useBentoTheme, BentoTheme } from '@adyen/bento-vue2';\n \n const { setTheme } = useBentoTheme();\n \n setTheme(BentoTheme.BENTO_DARK)\n * </script>\n \n @returns {UseBentoTheme} An object with getter and setter method for the Bento theme.\n * @returns {Function} getTheme - Returns the current theme in the string form of BentoTheme enum.\n * @returns {Function} setTheme - Sets the theme of the Bento component library.\n \n /\nexport function useBentoTheme(): UseBentoTheme {\n const bentoThemeController = isVue2\n ? getCurrentInstance()?.proxy[useBentoThemeKey]\n : inject(useBentoThemeKey, null);\n\n if (!bentoThemeController) {\n printDevelopmentWarning('useBentoTheme does not work without Vue.use(BentoPlugin)');\n\n // Return placeholder functions so client code won't break, but theme won't toggle\n return {\n getTheme: () => undefined,\n setTheme: () => undefined,\n };\n }\n\n // Return a new object so unintentional reassigning its properties won't override a global state\n return { ...bentoThemeController };\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/*\n This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n /\nexport default Vue => {\n if (isVue2) {\n // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n } else {\n (Vue as App).provide(toastStackInjectionKey, createToastStack());\n }\n};\n","export enum BentoTheme {\n /\n @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n /\n LEGACY = 'b-legacy-theme',\n STYLEGUIDE = 'b-styleguide-theme',\n\n /\n @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n /\n BENTO = '',\n\n BENTO_LIGHT = 'b-light-theme',\n BENTO_DARK = 'b-dark-theme',\n BENTO_SYSTEM = 'b-system',\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { useBentoThemeKey } from './use-bento-theme.types';\nimport { BentoTheme } from './install.types';\n\nconst getTheme = () => document.body.className.match(/b-\\w+-theme/)?.[0] ?? '';\nconst getThemeForSystemPreference = () => {\n const preferredDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n if (preferredDarkMode) {\n return BentoTheme.BENTO_DARK;\n }\n\n return BentoTheme.BENTO_LIGHT;\n};\n\nexport const setTheme = (theme: BentoTheme) => {\n const currentTheme = getTheme();\n const systemTheme = getThemeForSystemPreference();\n const themeToSet = theme === BentoTheme.BENTO_SYSTEM ? systemTheme : theme;\n\n if (themeToSet === BentoTheme.BENTO_LIGHT \|\| themeToSet === BentoTheme.BENTO) {\n document.documentElement.style.colorScheme = 'light';\n } else if (themeToSet === BentoTheme.BENTO_DARK) {\n document.documentElement.style.colorScheme = 'dark';\n }\n\n // if theme is different from current and it is not `BentoTheme.BENTO`\n if (currentTheme.length && currentTheme !== themeToSet) {\n document.body.classList.remove(currentTheme);\n }\n\n // if theme is not `BentoTheme.BENTO`\n if (themeToSet.length) {\n document.body.classList.add(themeToSet);\n }\n};\n\n/\n This function is used to create and register global reactive state necessary for theme to operate.\n * @param {Vue} Vue A context application to register global state with.\n /\nexport default Vue => {\n const themeProvider = {\n getTheme,\n setTheme,\n };\n\n if (isVue2) {\n // Add theme as a global property as there is no \"app.provide\" functionality in Vue2\n // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n (Vue as typeof Vue2).prototype[useBentoThemeKey] = themeProvider;\n } else {\n (Vue as App).provide(useBentoThemeKey, themeProvider);\n }\n};\n","import installToast from './composables/use-bento-toast-controller/install';\nimport installTheme, { setTheme } from './composables/use-bento-theme/install';\nimport { deprecate } from './utils/ts/deprecate';\nimport { BentoTheme } from './composables/use-bento-theme/install.types';\nimport type { PluginObject } from 'vue';\n\ninterface BentoVuePlugin {\n theme?: BentoTheme;\n withToast?: boolean;\n withUtilityClasses?: boolean;\n withDesignTokensCSSInjection?: boolean;\n}\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n name: 'BentoVue',\n install: async (\n Vue,\n {\n theme = BentoTheme.BENTO_LIGHT,\n withToast = false,\n withUtilityClasses = false,\n withDesignTokensCSSInjection = true,\n }: BentoVuePlugin\n ) => {\n installTheme(Vue);\n\n if (withToast) {\n installToast(Vue);\n }\n if (withDesignTokensCSSInjection) {\n deprecate(\n 'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin',\n 'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables',\n '2.0.0'\n );\n // Make sure to put all awaited CSS imports below this point and not above!\n if (theme === BentoTheme.STYLEGUIDE) {\n await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n } else {\n await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n }\n\n if (withUtilityClasses) {\n await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n }\n }\n\n if (theme === BentoTheme.STYLEGUIDE) {\n setTheme(BentoTheme.STYLEGUIDE);\n } else if (theme === BentoTheme.BENTO_SYSTEM) {\n setTheme(BentoTheme.BENTO_SYSTEM);\n } else if (theme === BentoTheme.BENTO_DARK) {\n setTheme(BentoTheme.BENTO_DARK);\n } else if (theme === BentoTheme.BENTO) {\n deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0');\n setTheme(BentoTheme.BENTO_LIGHT);\n } else {\n setTheme(BentoTheme.BENTO_LIGHT);\n }\n },\n};\n\nexport { BentoTheme };\nexport default plugin;\n","/\n Defines the props used by `bento-base-filter` that must be implemented\n * on every filter as `defineProps`.\n \n The interface can be extended if new values are required.\n * The object can be extended if new values are required.\n \n @template CustomValue Defines the type of the `value` and `defaultValue` props.\n * @template CustomOptions Defines the type of the options used by the filter (default: `undefined`).\n \n @example\n * Using the interface\n \n ```typescript\n * import { type BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n interface CustomOptions {\n * option: string;\n * }\n \n withDefaults(defineProps<BentoBaseFilterProps<string, CustomOptions>>(), {\n * defaultValue: undefined,\n * })\n * ```\n \n @example\n * Using the object\n \n ```typescript\n * import { BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n defineProps({\n * ...BentoBaseFilterProps,\n * options: {\n * type: Object,\n * default: () => ({\n * option: null\n * })\n * }\n * })\n * ```\n /\nexport interface BentoBaseFilterProps<CustomValue, CustomOptions = undefined> {\n /\n Disables the filter from being interacted with.\n /\n disabled?: boolean;\n\n /\n Default value of the filter to reset to.\n /\n defaultValue?: CustomValue;\n\n /\n Filter name/key referencing the actual property name in the data set.\n * Should be unique per filter bar.\n /\n field: string;\n\n /\n Label text to be displayed\n /\n label: string;\n\n /\n Renders the base filter's slot content only - leaving out the button and the popover.\n * Used for the allFiltersModal component.\n /\n onlySlot?: boolean;\n\n /\n List of options that are needed to setup the filter\n * Available options:\n * - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n * - isDateDisabled: Indicate if a date should be disabled or not\n * - tooltipPosition: The position of the tooltip attached to the filter button\n * - tooltipText: The content of the tooltip attached to the filter button\n /\n options?: CustomOptions;\n\n /\n Current value of the filter\n /\n value: CustomValue;\n}\n\nexport const BentoBaseFilterProps = Object.freeze({\n /\n Disables the filter from being interacted with.\n /\n disabled: { type: Boolean, default: false },\n\n /\n Default value of the filter to reset to.\n /\n defaultValue: {\n type: [Object, Number, Boolean, Array, String, Date],\n default: null,\n },\n\n /\n Filter name/key referencing the actual property name in the data set.\n * Should be unique per filter bar.\n /\n field: { type: String, required: true },\n\n /\n Label text to be displayed\n /\n label: { type: String, required: true },\n\n /\n Renders the base filter's slot content only - leaving out the button and the popover.\n * Used for the allFiltersModal component.\n /\n onlySlot: { type: Boolean, default: false },\n\n /\n The current value of the filter, used for v-model.\n /\n value: {\n type: [Object, Number, Boolean, Array, String, Date],\n default: undefined,\n },\n});\n\n/\n Defines the mandatory emits that need to be defined by the implementation of any filter\n \n @template CustomValue Defines the type of the value being passed to the emit. Same as the type set in `BentoBaseFilterProps`\n \n @example\n * Using the interface\n \n ```typescript\n * import { type BentoBaseFilterEvents } from '@adyen/bento-vue2'\n \n defineEmits<BentoBaseFilterEvents<string>>()\n * ```\n \n @example\n * Using the object\n \n ```typescript\n * import { BentoBaseFilterEvents } from '@adyen/bento-vue2'\n \n defineEmits(BentoBaseFilterEvents)\n * ```\n /\nexport interface BentoBaseFilterEvents<CustomValue> {\n /\n Used in the All filters modal\n /\n (e: 'input', newFilterValue: CustomValue): void;\n\n /\n Used in the Filter Bar\n */\n (e: 'update', newFilterValue: CustomValue): void;\n}\n\nexport const BentoBaseFilterEvents = ['input', 'update'];\n"],"names":["isPlainObject","value","isArray","isValueEmpty","el","isEqual","first","second","deepCopy","copyStructure","key","useBentoBaseFilter","appliedFilter","defaultFilter","internalFilterValue","ref","initialStructureOrValue","onMounted","watch","newValue","isFilterInactive","computed","isSecondaryButtonDisabled","isApplyButtonDisabled","clearFilter","callback","resetFilter","openFilter","toTypedSchema","formSchema","getInitialFormValues","schema","z","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","values","cleanErrors","resetForm","validSchema","submitted","error","path","useBentoThemeKey","useBentoTheme","bentoThemeController","inject","printDevelopmentWarning","installToast","Vue","toastStackInjectionKey","createToastStack","BentoTheme","getTheme","_a","getThemeForSystemPreference","setTheme","theme","currentTheme","systemTheme","themeToSet","installTheme","themeProvider","plugin","withToast","withUtilityClasses","withDesignTokensCSSInjection","deprecate","BentoBaseFilterProps","BentoBaseFilterEvents"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../vue2/src/composables/use-bento-base-filter/utils/utils.ts","../../vue2/src/composables/use-bento-base-filter/use-bento-base-filter.ts","../../vue2/src/composables/use-form-validate/use-form.ts","../../vue2/src/composables/use-bento-theme/use-bento-theme.types.ts","../../vue2/src/composables/use-bento-theme/use-bento-theme.ts","../../vue2/src/directives/highlight/highlight.ts","../../vue2/src/composables/use-bento-toast-controller/install.ts","../../vue2/src/composables/use-bento-theme/install.types.ts","../../vue2/src/composables/use-bento-theme/install.ts","../../vue2/src/install.ts","../../vue2/src/types/base-filter.ts"],"sourcesContent":["/*\n Checks if a value is a plain object.\n \n @param value The value to check.\n * @returns Whether the value is a plain object.\n /\nexport const isPlainObject = (value: unknown) => {\n if (value === null \|\| typeof value !== 'object') {\n return false;\n }\n\n return Object.prototype.toString.call(value) === '[object Object]';\n};\n\n/\n Checks if a value is an array.\n \n @param value The value to check.\n * @returns Whether the value is an array.\n /\nexport const isArray = <T>(value: T) => Array.isArray(value);\n\n/\n Checks if a value is empty.\n * If the value is an array, it checks if the array is empty or if all elements are empty strings.\n * If the value is not an array, it checks if the value is falsy.\n \n @param value The value to check.\n * @returns Whether the value is empty.\n /\nexport const isValueEmpty = <T>(value: T) =>\n isArray(value) ? (value as []).length === 0 \|\| (value as Array<T>).every(el => el === '') : !value;\n\n/\n Checks if two objects are deeply equal by comparing their JSON string representations.\n \n @param first The first value.\n * @param second The second value.\n * @returns Whether the values are equal.\n /\nexport const isEqual = <T>(first: T, second: T) => JSON.stringify(first) === JSON.stringify(second);\n\n/\n Creates a deep copy of a value.\n * If the value is a plain object, it uses `JSON.parse(JSON.stringify(value))` to create a deep copy.\n * Otherwise, it returns the value as is.\n \n @param value The value to copy.\n * @returns The deep copied value or the original value if it's not a plain object.\n /\nexport const deepCopy = <T>(value: T) =>\n isPlainObject(value) \|\| isArray(value) ? (JSON.parse(JSON.stringify(value)) as T) : value;\n\n/\n Copies the structure of a plain object, setting all values to `undefined`.\n * If the value is not a plain object, it returns `undefined`.\n \n @param value The object whose structure to copy.\n * @returns An object with the same keys as the input object but with all values set to `undefined`, or `undefined` if the input is not a plain object.\n /\nexport const copyStructure = <T>(value: T) =>\n isPlainObject(value) ? Object.fromEntries(Object.keys(value).map(key => [key, undefined])) : undefined;\n","import { computed, onMounted, ref, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport { copyStructure, deepCopy, isEqual, isValueEmpty } from './utils';\n\n/\n A composable to wire the `bento-base-filter` component for the mandatory fields and events.\n \n @usage\n * ```vue\n * <template>\n * <bento-base-filter\n * :disable-apply-button=\"isApplyButtonDisabled\"\n * :disable-secondary-button=\"isSecondaryButtonDisabled\"\n * @ apply=\"updateFilter\"\n * @ clear=\"clearFilter(updateFilter)\"\n * @ open=\"openFilter\"\n * @ reset=\"resetFilter(updateFilter)\"\n * >\n * <!-- CONTENT HERE -->\n * </bento-base-filter>\n * </template>\n * <script>\n * import { ref } from 'vue'\n * import { useBentoBaseFilter, BentoBaseFilter, BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n type CustomFilterValue = boolean\n * const props = defineProps<BentoBaseFilterProps<CustomFilterValue>>();\n \n const {\n * // Values\n * internalFilterValue,\n * isSecondaryButtonDisabled,\n * isApplyButtonDisabled,\n \n // Methods\n * clearFilter,\n * resetFilter,\n * openFilter,\n * } = useBentoBaseFilter<CustomFilterValue>(toRef(props, 'value'), toRef(props, 'defaultValue'));\n * </script>\n * ```\n \n @param appliedFilter The currently applied filter value.\n * @param defaultFilter The default filter value (if available).\n * @returns An object containing refs and functions:\n * - `internalFilterValue`: The temporary state of the filter before it's applied.\n * - `isSecondaryButtonDisabled`: `true` if the secondary (clear/reset) button should be disabled.\n * - `isApplyButtonDisabled`: `true` if the apply button should be disabled.\n * - `clearFilter`: Clears the filter to its initial or default state.\n * - `resetFilter`: Resets the filter to its default state.\n * - `openFilter`: Syncs the internal state with the applied filter.\n /\nexport function useBentoBaseFilter<T>(appliedFilter: Ref<T>, defaultFilter: Ref<T>) {\n /\n Handles the internal value. Kept in sync when the new value is applied\n /\n const internalFilterValue = ref<T>();\n const initialStructureOrValue = ref<T>();\n\n onMounted(() => {\n /\n Copy initial structure as long as the value is not \"undefined\"\n /\n if (appliedFilter.value != null) {\n initialStructureOrValue.value = copyStructure<T>(appliedFilter.value) as T;\n }\n });\n\n watch(\n () => appliedFilter.value,\n newValue => {\n internalFilterValue.value = deepCopy<T>(newValue);\n },\n { immediate: true }\n );\n\n /\n Indicates if the filter has a value applied (active).\n * - inactive (`true`): `appliedFilter` is empty (`undefined`) or all of its properties are empty for object values\n /\n const isFilterInactive = computed(\n () => isValueEmpty(appliedFilter.value) \|\| isEqual<T>(appliedFilter.value, initialStructureOrValue.value)\n );\n\n /\n Indicates if the secondary (clear/reset) button should be disabled.\n * - disabled (`true`): No filter value is applied or `appliedFilter` value is the same as the `defaultFilter` (persistent) value\n /\n const isSecondaryButtonDisabled = computed(() =>\n defaultFilter.value != null ? isEqual<T>(defaultFilter.value, appliedFilter.value) : isFilterInactive.value\n );\n\n const isApplyButtonDisabled = computed(() => {\n const isValueUnchanged = isEqual<T>(internalFilterValue.value, appliedFilter.value);\n return isValueUnchanged \|\| (isValueEmpty(internalFilterValue.value) && isFilterInactive.value);\n });\n\n /\n Clears the non-persistent filters (not used in persistent filters).\n \n Receives a callback to execute additional tasks required when clearing a filter\n \n - `object`: Sets all properties to `undefined`\n * - non-`object`: Sets to `undefined`\n * @param callback Function to be called when clearing a filter\n /\n function clearFilter(callback?: (newValue: T) => void) {\n internalFilterValue.value = deepCopy<T>(initialStructureOrValue.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n /\n Resets the persistent filters (not used in non-persistent filters).\n * Sets the `internalFilterValue`\n \n Receives a callback to execute additional tasks required when resetting a filter.\n * @param callback Function to be called when resetting a filter\n /\n function resetFilter(callback?: (newValue: T) => void) {\n internalFilterValue.value = deepCopy<T>(defaultFilter.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n /\n Sets the value to what is applied when opening a filter.\n * @param callback Function to be called when opening a filter\n /\n function openFilter(callback?: (newValue: T) => void) {\n // Reset value every time it opens\n internalFilterValue.value = deepCopy<T>(appliedFilter.value);\n if (callback) {\n callback(internalFilterValue.value);\n }\n }\n\n return {\n // Values\n internalFilterValue,\n isSecondaryButtonDisabled,\n isApplyButtonDisabled,\n\n // Methods\n clearFilter,\n resetFilter,\n openFilter,\n };\n}\n","import { type Ref, ref, shallowRef } from 'vue';\nimport as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { type allKeys, type ErrorBag, type UseForm } from './use-form.types';\n\n/*\n Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n \n This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n \n @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead.\n \n @param formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns Schema transformed\n /\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n return formSchema;\n}\n\n/\n Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n \n @example\n * const validationSchema = toTypedSchema(\n * z.object({\n * name: z\n * .string()\n * .min(3, { message: 'Name is required' })\n * .startsWith('Jane')\n * .max(4, { message: 'Name cannot be longer than 4 characters' })\n * .default('Joe'),\n * })\n * );\n * getInitialFormValues(validationSchema)\n \n Will return:\n \n {\n * name: 'Joe'\n * }\n \n /\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n if (!!z && schema instanceof z.ZodObject) {\n return Object.fromEntries(\n Object.entries(schema.shape).map(([key, value]) => {\n if (!!z && value instanceof z.ZodDefault) {\n // eslint-disable-next-line no-underscore-dangle\n return [key, value._def.defaultValue()];\n }\n\n if (!!z && value instanceof z.ZodObject) {\n return [key, getInitialFormValues(value)];\n }\n\n return [key, undefined];\n })\n ) as z.infer<typeof schema>;\n }\n\n return undefined;\n}\n\n/*\n Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n /\nfunction normalizeFormPath(issue: z.ZodIssue) {\n return issue.path.join('.');\n}\n\n/\n Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n \n For Vue3 implementations use Vee-Validate.\n \n This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n \n @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead.\n \n @param props Form configuration object\n * @param extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns response.errors Object with all the form values and the first error found for that field (if any)\n * @returns response.values Object with all the form values and their current value\n * @returns response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n * When the validation is successful it calls the callback so the submit process can continue\n \n @example\n * const validationSchema = toTypedSchema(\n * z.object({\n * name: z\n * .string()\n * .min(3, { message: 'Name is required' })\n * .startsWith('Jane')\n * .max(4, { message: 'Name cannot be longer than 4 characters' })\n * .default('Joe'),\n * })\n * );\n \n const { values, errors, errorBag, submitForm, handleReset } = useForm({\n * validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n * // Send data to API here\n * })\n \n /\nexport function useForm<T extends ZodSchema>({\n validationSchema,\n}: UseForm<T>): {\n errorBag: Ref<{\n [P in allKeys<(typeof validationSchema)['_type']>]?: Array<string>;\n }>;\n errors: Ref<{\n [P in allKeys<(typeof validationSchema)['_type']>]?: string;\n }>;\n values: Ref<(typeof validationSchema)['_type']>;\n handleReset: () => void;\n submitForm: (submitted: any) => () => void;\n} {\n // Errors per field\n const errors = shallowRef<z.infer<typeof validationSchema>>({});\n // All errors per field\n const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n const values: Ref<z.TypeOf<T>> = ref(getInitialFormValues<T>(validationSchema));\n\n const cleanErrors = () => {\n errors.value = {};\n errorBag.value = {};\n };\n\n const resetForm = () => {\n cleanErrors();\n values.value = getInitialFormValues<T>(validationSchema);\n };\n\n const submitForm = submitted => () => {\n cleanErrors();\n\n // Run validations on the form data through the schema\n const validSchema = validationSchema.safeParse(values.value);\n\n // Update errors\n if (!validSchema.success) {\n (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n const path = normalizeFormPath(error);\n\n // Add the first ocurrance of a fild error to the \"errors\" object\n if (!errors.value[path]) {\n errors.value[path] = error.message;\n }\n\n // Add each error to the \"errorBag\" per field array\n if (!errorBag.value[path]) {\n errorBag.value[path] = [error.message];\n } else {\n errorBag.value[path].push(error.message);\n }\n });\n } else {\n submitted(values.value);\n }\n };\n\n return {\n // Values\n errorBag,\n errors,\n values,\n\n // Methods\n handleReset: () => resetForm(),\n submitForm,\n };\n}\n","import { type BentoTheme } from './install.types';\n\nexport const useBentoThemeKey = Symbol('use-bento-theme');\n\nexport interface UseBentoTheme {\n getTheme: () => string;\n setTheme: (theme: BentoTheme \| `${BentoTheme}`) => void;\n}\n","import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { getCurrentInstance, inject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport { type UseBentoTheme, useBentoThemeKey } from './use-bento-theme.types';\n\n/*\n Composable that handles theming-related capabilities for the Bento component library.\n * Requires the use of `BentoPlugin`.\n \n @example\n * <script setup lang=\"ts\">\n * import { useBentoTheme, BentoTheme } from '@adyen/bento-vue2';\n \n const { setTheme } = useBentoTheme();\n \n setTheme(BentoTheme.BENTO_DARK)\n * </script>\n \n @returns {UseBentoTheme} An object with getter and setter method for the Bento theme.\n * @returns {Function} getTheme - Returns the current theme in the string form of BentoTheme enum.\n * @returns {Function} setTheme - Sets the theme of the Bento component library.\n \n /\nexport function useBentoTheme(): UseBentoTheme {\n const bentoThemeController = isVue2\n ? getCurrentInstance()?.proxy[useBentoThemeKey]\n : inject(useBentoThemeKey, null);\n\n if (!bentoThemeController) {\n printDevelopmentWarning('useBentoTheme does not work without Vue.use(BentoPlugin)');\n\n // Return placeholder functions so client code won't break, but theme won't toggle\n return {\n getTheme: () => undefined,\n setTheme: () => undefined,\n };\n }\n\n // Return a new object so unintentional reassigning its properties won't override a global state\n return { ...bentoThemeController };\n}\n","const getSize = ({ modifiers, value }) => Object.keys(modifiers)[0] \|\| value?.size \|\| 'small';\n\nconst toggleHighlight = (el, binding, enabled) => {\n const extraPadding = binding.value?.extraPadding ?? false;\n const rounded = binding.value?.rounded ?? false;\n const size = getSize(binding);\n\n el.classList.toggle('b-highlight', enabled);\n el.classList.toggle('b-highlight--extra-padding', enabled && extraPadding);\n el.classList.toggle('b-highlight--rounded', enabled && rounded);\n\n ['small', 'medium', 'large'].forEach(s => {\n el.classList.toggle(`b-highlight--${s}`, enabled && s === size);\n });\n};\n\nconst applyHighlight = (el, binding) => {\n toggleHighlight(el, binding, binding.value !== false);\n};\n\nconst updateHighlight = (el, binding) => {\n toggleHighlight(el, binding, binding.value !== false);\n};\n\nconst removeHighlight = (el, binding) => {\n toggleHighlight(el, binding, false);\n};\n\nexport const BentoHighlightDirective = {\n // Vue 2\n bind: applyHighlight,\n update: updateHighlight,\n unbind: removeHighlight,\n\n // Vue 3\n beforeMount: applyHighlight,\n mounted: updateHighlight,\n updated: updateHighlight,\n unmounted: removeHighlight,\n};\n\nimport './highlight.scss';\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/*\n This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n /\nexport default Vue => {\n if (isVue2) {\n // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n } else {\n (Vue as App).provide(toastStackInjectionKey, createToastStack());\n }\n};\n","export enum BentoTheme {\n /\n @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n /\n LEGACY = 'b-legacy-theme',\n STYLEGUIDE = 'b-styleguide-theme',\n\n /\n @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.\n /\n BENTO = '',\n\n BENTO_LIGHT = 'b-light-theme',\n BENTO_DARK = 'b-dark-theme',\n BENTO_SYSTEM = 'b-system',\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { useBentoThemeKey } from './use-bento-theme.types';\nimport { BentoTheme } from './install.types';\n\nconst getTheme = () => document.body.className.match(/b-\\w+-theme/)?.[0] ?? '';\nconst getThemeForSystemPreference = () => {\n const preferredDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n if (preferredDarkMode) {\n return BentoTheme.BENTO_DARK;\n }\n\n return BentoTheme.BENTO_LIGHT;\n};\n\nexport const setTheme = (theme: BentoTheme) => {\n const currentTheme = getTheme();\n const systemTheme = getThemeForSystemPreference();\n const themeToSet = theme === BentoTheme.BENTO_SYSTEM ? systemTheme : theme;\n\n if (themeToSet === BentoTheme.BENTO_LIGHT \|\| themeToSet === BentoTheme.BENTO) {\n document.documentElement.style.colorScheme = 'light';\n } else if (themeToSet === BentoTheme.BENTO_DARK) {\n document.documentElement.style.colorScheme = 'dark';\n }\n\n // if theme is different from current and it is not `BentoTheme.BENTO`\n if (currentTheme.length && currentTheme !== themeToSet) {\n document.body.classList.remove(currentTheme);\n }\n\n // if theme is not `BentoTheme.BENTO`\n if (themeToSet.length) {\n document.body.classList.add(themeToSet);\n }\n};\n\n/\n This function is used to create and register global reactive state necessary for theme to operate.\n * @param {Vue} Vue A context application to register global state with.\n /\nexport default Vue => {\n const themeProvider = {\n getTheme,\n setTheme,\n };\n\n if (isVue2) {\n // Add theme as a global property as there is no \"app.provide\" functionality in Vue2\n // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n (Vue as typeof Vue2).prototype[useBentoThemeKey] = themeProvider;\n } else {\n (Vue as App).provide(useBentoThemeKey, themeProvider);\n }\n};\n","import installToast from './composables/use-bento-toast-controller/install';\nimport installTheme, { setTheme } from './composables/use-bento-theme/install';\nimport { deprecate } from './utils/ts/deprecate';\nimport { BentoTheme } from './composables/use-bento-theme/install.types';\nimport type { PluginObject } from 'vue';\n\ninterface BentoVuePlugin {\n theme?: BentoTheme;\n withToast?: boolean;\n withUtilityClasses?: boolean;\n withDesignTokensCSSInjection?: boolean;\n}\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n name: 'BentoVue',\n install: async (\n Vue,\n {\n theme = BentoTheme.BENTO_LIGHT,\n withToast = false,\n withUtilityClasses = false,\n withDesignTokensCSSInjection = true,\n }: BentoVuePlugin\n ) => {\n installTheme(Vue);\n\n if (withToast) {\n installToast(Vue);\n }\n if (withDesignTokensCSSInjection) {\n deprecate(\n 'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin',\n 'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables',\n '2.0.0'\n );\n // Make sure to put all awaited CSS imports below this point and not above!\n if (theme === BentoTheme.STYLEGUIDE) {\n await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n } else {\n await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n }\n\n if (withUtilityClasses) {\n await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n }\n }\n\n if (theme === BentoTheme.STYLEGUIDE) {\n setTheme(BentoTheme.STYLEGUIDE);\n } else if (theme === BentoTheme.BENTO_SYSTEM) {\n setTheme(BentoTheme.BENTO_SYSTEM);\n } else if (theme === BentoTheme.BENTO_DARK) {\n setTheme(BentoTheme.BENTO_DARK);\n } else if (theme === BentoTheme.BENTO) {\n deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0');\n setTheme(BentoTheme.BENTO_LIGHT);\n } else {\n setTheme(BentoTheme.BENTO_LIGHT);\n }\n },\n};\n\nexport { BentoTheme };\nexport default plugin;\n","/\n Defines the props used by `bento-base-filter` that must be implemented\n * on every filter as `defineProps`.\n \n The interface can be extended if new values are required.\n * The object can be extended if new values are required.\n \n @template CustomValue Defines the type of the `value` and `defaultValue` props.\n * @template CustomOptions Defines the type of the options used by the filter (default: `undefined`).\n \n @example\n * Using the interface\n \n ```typescript\n * import { type BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n interface CustomOptions {\n * option: string;\n * }\n \n withDefaults(defineProps<BentoBaseFilterProps<string, CustomOptions>>(), {\n * defaultValue: undefined,\n * })\n * ```\n \n @example\n * Using the object\n \n ```typescript\n * import { BentoBaseFilterProps } from '@adyen/bento-vue2'\n \n defineProps({\n * ...BentoBaseFilterProps,\n * options: {\n * type: Object,\n * default: () => ({\n * option: null\n * })\n * }\n * })\n * ```\n /\nexport interface BentoBaseFilterProps<CustomValue, CustomOptions = undefined> {\n /\n Disables the filter from being interacted with.\n /\n disabled?: boolean;\n\n /\n Default value of the filter to reset to.\n /\n defaultValue?: CustomValue;\n\n /\n Filter name/key referencing the actual property name in the data set.\n * Should be unique per filter bar.\n /\n field: string;\n\n /\n Label text to be displayed\n /\n label: string;\n\n /\n Renders the base filter's slot content only - leaving out the button and the popover.\n * Used for the allFiltersModal component.\n /\n onlySlot?: boolean;\n\n /\n List of options that are needed to setup the filter\n * Available options:\n * - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n * - isDateDisabled: Indicate if a date should be disabled or not\n * - tooltipPosition: The position of the tooltip attached to the filter button\n * - tooltipText: The content of the tooltip attached to the filter button\n /\n options?: CustomOptions;\n\n /\n Current value of the filter\n /\n value: CustomValue;\n}\n\nexport const BentoBaseFilterProps = Object.freeze({\n /\n Disables the filter from being interacted with.\n /\n disabled: { type: Boolean, default: false },\n\n /\n Default value of the filter to reset to.\n /\n defaultValue: {\n type: [Object, Number, Boolean, Array, String, Date],\n default: null,\n },\n\n /\n Filter name/key referencing the actual property name in the data set.\n * Should be unique per filter bar.\n /\n field: { type: String, required: true },\n\n /\n Label text to be displayed\n /\n label: { type: String, required: true },\n\n /\n Renders the base filter's slot content only - leaving out the button and the popover.\n * Used for the allFiltersModal component.\n /\n onlySlot: { type: Boolean, default: false },\n\n /\n The current value of the filter, used for v-model.\n /\n value: {\n type: [Object, Number, Boolean, Array, String, Date],\n default: undefined,\n },\n});\n\n/\n Defines the mandatory emits that need to be defined by the implementation of any filter\n \n @template CustomValue Defines the type of the value being passed to the emit. Same as the type set in `BentoBaseFilterProps`\n \n @example\n * Using the interface\n \n ```typescript\n * import { type BentoBaseFilterEvents } from '@adyen/bento-vue2'\n \n defineEmits<BentoBaseFilterEvents<string>>()\n * ```\n \n @example\n * Using the object\n \n ```typescript\n * import { BentoBaseFilterEvents } from '@adyen/bento-vue2'\n \n defineEmits(BentoBaseFilterEvents)\n * ```\n /\nexport interface BentoBaseFilterEvents<CustomValue> {\n /\n Used in the All filters modal\n /\n (e: 'input', newFilterValue: CustomValue): void;\n\n /\n Used in the Filter Bar\n */\n (e: 'update', newFilterValue: CustomValue): void;\n}\n\nexport const BentoBaseFilterEvents = ['input', 'update'];\n"],"names":["isPlainObject","value","isArray","isValueEmpty","el","isEqual","first","second","deepCopy","copyStructure","key","useBentoBaseFilter","appliedFilter","defaultFilter","internalFilterValue","ref","initialStructureOrValue","onMounted","watch","newValue","isFilterInactive","computed","isSecondaryButtonDisabled","isApplyButtonDisabled","clearFilter","callback","resetFilter","openFilter","toTypedSchema","formSchema","getInitialFormValues","schema","z","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","values","cleanErrors","resetForm","submitted","validSchema","error","path","useBentoThemeKey","useBentoTheme","bentoThemeController","inject","printDevelopmentWarning","getSize","modifiers","toggleHighlight","binding","enabled","extraPadding","_a","rounded","_b","size","s","applyHighlight","updateHighlight","removeHighlight","BentoHighlightDirective","installToast","Vue","toastStackInjectionKey","createToastStack","BentoTheme","BentoTheme2","getTheme","getThemeForSystemPreference","setTheme","theme","currentTheme","systemTheme","themeToSet","installTheme","themeProvider","plugin","withToast","withUtilityClasses","withDesignTokensCSSInjection","deprecate","BentoBaseFilterProps","BentoBaseFilterEvents"],"mappings":"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"}

package/dist/input-field-password.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { i as a, m as s, r as i, b as c, c as u, a as o } from "./chunks/input-field-password.BZBYVyAb.js";
+import { i as a, m as s, r as i, b as c, c as u, a as o } from "./chunks/input-field-password.COET8hlJ.js";
 export {
   a as BentoInputFieldPassword,
   s as minLength,

package/dist/input-field-phone-number.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { i as o, B as t } from "./chunks/input-field-phone-number.a8Mw5PAW.js";
+import { i as o, B as t } from "./chunks/input-field-phone-number.rBDPxxxe.js";
 export {
   o as BentoInputFieldPhoneNumber,
   t as BentoInputFieldPhoneNumberCountries

package/dist/input-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.CYGGIK48.js";
+import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.GEIdI0nu.js";
 export {
   n as BentoInputField,
   a as BentoInputFieldElementPosition,

package/dist/pagination.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.CYdGcyMA.js";
+import { B as n } from "./chunks/pagination.BZbMpRHw.js";
 export {
   n as BentoPagination
 };

package/dist/radio-group.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { b as t, B as e, a as n } from "./chunks/radio-group.B_8R6vGx.js";
+import { b as t, B as e, a as n } from "./chunks/radio-group.D3GbOHUx.js";
 import { R as B } from "./chunks/radio-input.CBNE-AkM.js";
 export {
   t as BentoRadioButton,

package/dist/search-bar.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.D3Ri_RUK.js";
-import { u as o } from "./chunks/dropdown.DYDHM__3.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.eP4fk79T.js";
+import { u as o } from "./chunks/dropdown.cUORKsFC.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,

package/dist/secondary-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.CAb20jWW.js";
+import { s as e } from "./chunks/secondary-nav.CKA07_TU.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/selection-card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.F8alOPtl.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.B8Uoar3X.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/styles/bento-dark.css CHANGED Viewed

@@ -110,6 +110,9 @@
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
   --b-input-field-password-validation-title-font-weight: 700;
+  --b-highlight-box-shadow-ripple-color: rgba(0, 161, 82, 0.4);
+  --b-highlight-box-shadow-shadow-color: rgba(0, 161, 82, 0.2);
+  --b-highlight-box-shadow-outline-color: #00a152;
   --b-header-actions-margin-top-desktop: 0;
   --b-header-with-views-all-views-popover-menu-item-dragging-z-index: 1;
   --b-filter-button-label-line-height: 20px;
@@ -1137,6 +1140,8 @@
   --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
   --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
+  --b-highlight-extra-padding-inset: calc(0px - var(--b-spacer-030)) calc(0px - var(--b-spacer-040));
+  --b-highlight-rounded-border-radius: var(--b-border-radius-m);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);

package/dist/styles/bento-light.css CHANGED Viewed

@@ -109,6 +109,9 @@
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
   --b-input-field-password-validation-title-font-weight: 700;
+  --b-highlight-box-shadow-ripple-color: rgba(0, 161, 82, 0.4);
+  --b-highlight-box-shadow-shadow-color: rgba(0, 161, 82, 0.2);
+  --b-highlight-box-shadow-outline-color: #00a152;
   --b-header-actions-margin-top-desktop: 0;
   --b-header-with-views-all-views-popover-menu-item-dragging-z-index: 1;
   --b-filter-button-label-line-height: 20px;
@@ -1136,6 +1139,8 @@
   --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
   --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
+  --b-highlight-extra-padding-inset: calc(0px - var(--b-spacer-030)) calc(0px - var(--b-spacer-040));
+  --b-highlight-rounded-border-radius: var(--b-border-radius-m);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);

package/dist/styles/bento.css CHANGED Viewed

@@ -109,6 +109,9 @@
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
   --b-input-field-password-validation-title-font-weight: 700;
+  --b-highlight-box-shadow-ripple-color: rgba(0, 161, 82, 0.4);
+  --b-highlight-box-shadow-shadow-color: rgba(0, 161, 82, 0.2);
+  --b-highlight-box-shadow-outline-color: #00a152;
   --b-header-actions-margin-top-desktop: 0;
   --b-header-with-views-all-views-popover-menu-item-dragging-z-index: 1;
   --b-filter-button-label-line-height: 20px;
@@ -1136,6 +1139,8 @@
   --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
   --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
+  --b-highlight-extra-padding-inset: calc(0px - var(--b-spacer-030)) calc(0px - var(--b-spacer-040));
+  --b-highlight-rounded-border-radius: var(--b-border-radius-m);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);

package/dist/styles/legacy.css CHANGED Viewed

@@ -109,6 +109,9 @@
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
   --b-input-field-password-validation-title-font-weight: 700;
+  --b-highlight-box-shadow-ripple-color: rgba(0, 161, 82, 0.4);
+  --b-highlight-box-shadow-shadow-color: rgba(0, 161, 82, 0.2);
+  --b-highlight-box-shadow-outline-color: #00a152;
   --b-header-actions-margin-top-desktop: 0;
   --b-header-with-views-all-views-popover-menu-item-dragging-z-index: 1;
   --b-filter-button-label-line-height: 20px;
@@ -1136,6 +1139,8 @@
   --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
   --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
+  --b-highlight-extra-padding-inset: calc(0px - var(--b-spacer-030)) calc(0px - var(--b-spacer-040));
+  --b-highlight-rounded-border-radius: var(--b-border-radius-m);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);

package/dist/styles/styleguide.css CHANGED Viewed

@@ -109,6 +109,9 @@
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
   --b-input-field-password-validation-title-font-weight: 700;
+  --b-highlight-box-shadow-ripple-color: rgba(0, 161, 82, 0.4);
+  --b-highlight-box-shadow-shadow-color: rgba(0, 161, 82, 0.2);
+  --b-highlight-box-shadow-outline-color: #00a152;
   --b-header-actions-margin-top-desktop: 0;
   --b-header-with-views-all-views-popover-menu-item-dragging-z-index: 1;
   --b-filter-button-label-line-height: 20px;
@@ -1191,6 +1194,8 @@
   --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
   --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
+  --b-highlight-extra-padding-inset: calc(0px - var(--b-spacer-030)) calc(0px - var(--b-spacer-040));
+  --b-highlight-rounded-border-radius: var(--b-border-radius-m);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);

package/dist/web-types.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.77.0",
+  "version": "1.78.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.77.0",
+  "version": "1.78.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -45,7 +45,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.77.0"
+    "@adyen/bento-design-tokens": "1.78.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -114,11 +114,11 @@
     "vue-router": "~4.1",
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
+    "@adyen/bento-tailwind": "0.7.3",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.7.2",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-icons-16": "7.3.2",
-    "@adyen/ui-assets-payment-method-icons": "10.4.2"
+    "@adyen/ui-assets-icons-16": "7.3.3",
+    "@adyen/ui-assets-payment-method-icons": "10.4.3"
   },
   "scripts": {
     "build": "pnpm run build:prod",
@@ -153,6 +153,6 @@
     "e2e:update": "../vue2/test/bin/e2e-docker.sh vue3 --update-snapshots",
     "e2e:ci": "pnpm run e2e:clean && playwright test -c playwright.integration.config.ts",
     "e2e:ci:update": "pnpm run e2e:clean && playwright test -c playwright.integration.config.ts --update-snapshots",
-    "netlify": "pnpm run --filter @adyen/bento-design-tokens build:dev && pnpm run --filter @adyen/bento-tailwind build && pnpm run build:prod && pnpm run build:storybook"
+    "netlify": "pnpm run --filter @adyen/bento-design-tokens build:dev && pnpm run --filter @adyen/bento-tailwind build && pnpm run build:prod && pnpm run build:storybook && pnpm run --filter @adyen/bento-storybook-ai build"
   }
 }

package/dist/chunks/checkbox-group.COUx8Ne8.js DELETED Viewed

@@ -1,192 +0,0 @@
-import { defineComponent as B, toRef as I, computed as l, watch as y, ref as T, resolveComponent as m, createElementBlock as v, openBlock as n, createVNode as N, createBlock as E, createCommentVNode as V, normalizeClass as w, withCtx as s, Fragment as O, renderList as A, createSlots as G, createTextVNode as k, toDisplayString as S, renderSlot as L, mergeProps as _ } from "vue";
-import { a as d, B as U } from "./checkbox.SffuKyNj.js";
-import { g as P } from "./generate-uid.NJ8tVoha.js";
-import { d as R } from "./typography.yBEME_Gu.js";
-import { u as q } from "./use-form-layout-loading.D3lALhtC.js";
-import { E as $ } from "./field-label.C97CrBI_.js";
-import { C as z } from "./controls-group.cbGiHr7n.js";
-import { _ as D } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/checkbox-group.css";
-var i = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e))(i || {});
-const C = "bento-checkbox-group", F = B({
-  name: C,
-  components: { BentoCheckbox: U, ControlsGroup: z, ErrorMessage: $ },
-  model: { prop: "modelValue" },
-  props: {
-    /**
-     * Descriptive supporting text visbile underneath the label.
-     */
-    description: { type: String, default: null },
-    /**
-     * If set to true, renders all checkboxes in the group in a disabled state.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Renders all checkboxes in an error state with an error message.
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * 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 checkboxes in the group in an error state.
-     *
-     * @deprecated Use "errorMessage" prop instead
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * Shows/hides the group label.
-     */
-    hideLabel: { type: Boolean, default: null },
-    /**
-     * The checkbox group's items.
-     */
-    items: { type: Array, required: !0 },
-    /**
-     * 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 BentoCheckboxButtonItem's value.
-     * Defaults to no value selected.
-     */
-    modelValue: { type: Array, default: () => [] },
-    /**
-     * Indicates the field is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * If set to true, renders all checkboxes in the group in a readonly state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Indicates the field is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
-     */
-    variant: {
-      type: String,
-      default: i.VERTICAL,
-      validator: (e) => Object.values(i).includes(e)
-    }
-  },
-  emits: [d.UPDATE, d.INPUT],
-  setup(e, { emit: u, slots: b }) {
-    const f = P("error"), { isReadOnly: a } = q(I(e, "readonly")), g = l(
-      () => !e.disabled && !a.value && (!!e.errorMessage || e.hasError)
-    ), c = l(
-      () => !e.disabled && !a.value && !!e.errorMessage
-    ), p = l(() => ({
-      "b-checkbox-group__checkboxes--horizontal": e.variant === i.HORIZONTAL
-    })), t = (r) => !!b[r], o = l(() => t("content") && e.variant !== "vertical");
-    y(
-      o,
-      (r) => {
-        if (r)
-          throw new Error("The content slot is only available for the vertical checkbox group layout");
-      },
-      { immediate: !0 }
-    );
-    const h = T(e.modelValue);
-    y(
-      () => e.modelValue,
-      () => {
-        h.value = e.modelValue;
-      }
-    );
-    const M = (r) => {
-      h.value = r, u(d.UPDATE, r), u(d.INPUT, r);
-    };
-    return e.hasError && R(
-      'BentoCheckboxGroup "hasError" property',
-      `Use the BentoCheckboxGroup "errorMessage" property instead to indicate that there is a modifier error.
-                    Having the field as "undefined" will hide/remove the error.
-                    <bento-checkbox-group errorMessage="Error message text" />`,
-      "2.0.0"
-    ), {
-      // Values
-      COMPONENT_NAME: C,
-      errorId: f,
-      isReadOnly: a,
-      shouldShowGroupError: g,
-      shouldShowGroupErrorMessage: c,
-      conditionalClasses: p,
-      inputValue: h,
-      hasContentSlot: t,
-      // Methods
-      onInput: M
-    };
-  }
-}), H = { class: "b-checkbox-group" };
-function Z(e, u, b, f, a, g) {
-  const c = m("bento-checkbox"), p = m("controls-group"), t = m("error-message");
-  return n(), v("div", H, [
-    N(p, {
-      class: w(["b-checkbox-group__checkboxes", e.conditionalClasses]),
-      "aria-describedby": e.shouldShowGroupErrorMessage ? e.errorId : "",
-      "component-name": e.COMPONENT_NAME,
-      description: e.description,
-      disabled: e.disabled,
-      form: e.formId,
-      "hide-label": e.hideLabel,
-      label: e.label,
-      optional: e.optional,
-      required: e.required,
-      "tooltip-text": e.tooltipText
-    }, {
-      default: s(() => [
-        (n(!0), v(O, null, A(e.items, (o) => (n(), E(c, {
-          key: o.value,
-          "model-value": e.inputValue,
-          value: o.value,
-          disabled: e.disabled || o.disabled,
-          "has-error": e.shouldShowGroupError || o.hasError,
-          "error-message": e.shouldShowGroupError ? null : o.errorMessage,
-          readonly: e.isReadOnly || o.readonly,
-          tag: o.tag,
-          "onUpdate:modelValue": e.onInput
-        }, G({
-          default: s(() => [
-            k(S(o.label), 1)
-          ]),
-          _: 2
-        }, [
-          o.description ? {
-            name: "description",
-            fn: s(() => [
-              k(S(o.description), 1)
-            ]),
-            key: "0"
-          } : void 0,
-          e.hasContentSlot("content") ? {
-            name: "content",
-            fn: s(() => [
-              L(e.$slots, "content", _({ ref_for: !0 }, o), void 0, !0)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "value", "disabled", "has-error", "error-message", "readonly", "tag", "onUpdate:modelValue"]))), 128))
-      ]),
-      _: 3
-    }, 8, ["aria-describedby", "component-name", "class", "description", "disabled", "form", "hide-label", "label", "optional", "required", "tooltip-text"]),
-    e.shouldShowGroupErrorMessage ? (n(), E(t, {
-      key: 0,
-      id: e.errorId,
-      "error-message": e.errorMessage,
-      class: "b-checkbox-group__error-message"
-    }, null, 8, ["id", "error-message"])) : V("", !0)
-  ]);
-}
-const ee = /* @__PURE__ */ D(F, [["render", Z], ["__scopeId", "data-v-8aebecb2"]]);
-export {
-  i as B,
-  ee as c
-};
-//# sourceMappingURL=checkbox-group.COUx8Ne8.js.map

package/dist/chunks/checkbox-group.COUx8Ne8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"checkbox-group.COUx8Ne8.js","sources":["../../../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n\ninterface BentoCheckboxGroupItem {\n value: string | number;\n label: string;\n description?: string;\n disabled?: boolean;\n hasError?: boolean;\n errorMessage?: string;\n readonly?: boolean;\n tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n <div class=\"b-checkbox-group\">\n <controls-group\n class=\"b-checkbox-group__checkboxes\"\n :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n :component-name=\"COMPONENT_NAME\"\n :class=\"conditionalClasses\"\n :description=\"description\"\n :disabled=\"disabled\"\n :form=\"formId\"\n :hide-label=\"hideLabel\"\n :label=\"label\"\n :optional=\"optional\"\n :required=\"required\"\n :tooltip-text=\"tooltipText\"\n >\n <bento-checkbox\n v-for=\"item in items\"\n :key=\"item.value\"\n :model-value=\"inputValue\"\n :value=\"item.value\"\n :disabled=\"disabled || item.disabled\"\n :has-error=\"shouldShowGroupError || item.hasError\"\n :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n :readonly=\"isReadOnly || item.readonly\"\n :tag=\"item.tag\"\n @update:model-value=\"onInput\"\n >\n <template #default>{{ item.label }}</template>\n <template v-if=\"item.description\" #description>{{ item.description }}</template>\n <template v-if=\"hasContentSlot('content')\" #content>\n <slot name=\"content\" v-bind=\"item\"></slot>\n </template>\n </bento-checkbox>\n </controls-group>\n <error-message\n v-if=\"shouldShowGroupErrorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-checkbox-group__error-message\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, type PropType, ref, toRef, watch } from 'vue';\n import { ControlsGroup } from '@/components/internal/controls-group';\n import { ErrorMessage } from '@/components/internal/error-message';\n import { type BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n import { BentoCheckboxEvent } from '../../checkbox.types';\n import { generateUid } from '@/core/utils/ts';\n import { deprecate } from '@/utils/ts/deprecate';\n import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n /**\n * The name of the component to be used in the Vue devtools and console warnings.\n */\n const COMPONENT_NAME = 'bento-checkbox-group';\n\n /**\n * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n *\n * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n *\n * export default {\n * components: { BentoCheckboxGroup },\n * template: `\n * <bento-checkbox-group\n * label=\"Your group label\"\n * :items=\"[\n * { value: 1, label: 'Your label' },\n * { value: 2, label: 'Another label', description: 'Your sub label' },\n * ]\"\n * />\n * `\n * };\n */\n export default defineComponent({\n name: COMPONENT_NAME,\n components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n model: { prop: 'modelValue' },\n props: {\n /**\n * Descriptive supporting text visbile underneath the label.\n */\n description: { type: String, default: null },\n\n /**\n * If set to true, renders all checkboxes in the group in a disabled state.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Renders all checkboxes in an error state with an error message.\n */\n errorMessage: { type: String, default: null },\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: { type: String, default: null },\n\n /**\n * If set to true, renders all checkboxes in the group in an error state.\n *\n * @deprecated Use \"errorMessage\" prop instead\n */\n hasError: { type: Boolean, default: false },\n\n /**\n * Shows/hides the group label.\n */\n hideLabel: { type: Boolean, default: null },\n\n /**\n * The checkbox group's items.\n */\n items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n /**\n * The name associated with the group. Required for accessibility purposes.\n */\n label: { type: String, required: true },\n\n /**\n * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n * Defaults to no value selected.\n */\n modelValue: { type: Array<number | string | null>, default: () => [] },\n\n /**\n * Indicates the field is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * If set to true, renders all checkboxes in the group in a readonly state.\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Indicates the field is required.\n */\n required: { type: Boolean, default: false },\n\n /**\n * Tooltip message.\n */\n tooltipText: { type: String, default: null },\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<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n default: BentoCheckboxGroupVariant.VERTICAL,\n validator: (value: BentoCheckboxGroupVariant) =>\n Object.values(BentoCheckboxGroupVariant).includes(value),\n },\n },\n emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n setup(props, { emit, slots }) {\n const errorId = generateUid('error');\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n const shouldShowGroupError = computed(\n () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n );\n const shouldShowGroupErrorMessage = computed(\n () => !props.disabled && !isReadOnly.value && !!props.errorMessage\n );\n\n const conditionalClasses = computed(() => ({\n 'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n }));\n\n // Slots logic\n // Temporary, use-has-slots composable doesn't currently work for\n // vue3 named scoped slots\n const hasContentSlot = name => !!slots[name];\n const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n watch(\n shouldShowSlotsError,\n newValue => {\n if (newValue) {\n throw new Error('The content slot is only available for the vertical checkbox group layout');\n }\n },\n { immediate: true }\n );\n\n const inputValue = ref(props.modelValue);\n watch(\n () => props.modelValue,\n () => {\n inputValue.value = props.modelValue;\n }\n );\n\n const onInput = value => {\n inputValue.value = value;\n emit(BentoCheckboxEvent.UPDATE, value);\n emit(BentoCheckboxEvent.INPUT, value);\n };\n\n if (props.hasError) {\n deprecate(\n 'BentoCheckboxGroup \"hasError\" property',\n `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n Having the field as \"undefined\" will hide/remove the error.\n <bento-checkbox-group errorMessage=\"Error message text\" />`,\n '2.0.0'\n );\n }\n\n return {\n // Values\n COMPONENT_NAME,\n errorId,\n isReadOnly,\n shouldShowGroupError,\n shouldShowGroupErrorMessage,\n conditionalClasses,\n inputValue,\n hasContentSlot,\n\n // Methods\n onInput,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","slots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onInput","deprecate","openBlock","createElementBlock","_hoisted_1","_ctx","hideLabel","label","optional","required","Fragment","renderList","item","createBlock","_component_bento_checkbox","disabled","createSlots","withCtx","createTextVNode","toDisplayString","renderSlot","mergeProps","_component_error_message","createCommentVNode"],"mappings":"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"}