@adyen/bento-vue2 1.13.1 → 1.14.0

package/dist/chunks/checkbox.51cdb397.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.51cdb397.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["export type BentoMultiCheckboxType = Array<string | number>;\nexport type BentoCheckboxType = boolean | BentoMultiCheckboxType;\n\nexport enum BentoCheckboxState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\">\n        <div class=\"b-checkbox__input-container\">\n            <!-- Don't change order because it matters for CSS. Icons first -->\n            <minus-small-icon v-if=\"isIndeterminate\" class=\"b-checkbox__icon\" svg-title=\"intermediate\" />\n            <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox__icon\" svg-title=\"checked\" />\n            <input\n                ref=\"input\"\n                role=\"checkbox\"\n                class=\"b-checkbox__outline\"\n                type=\"checkbox\"\n                v-bind=\"$attrs\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-checked=\"ariaChecked\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :aria-invalid=\"ariaInvalid\"\n                :checked=\"isChecked\"\n                :disabled=\"disabled\"\n                :indeterminate.prop=\"isIndeterminate\"\n                :value=\"value\"\n                :class=\"conditionalClassOutline\"\n                :aria-readonly=\"readonly\"\n                @change=\"onChange\"\n                @click=\"onClick\"\n            />\n        </div>\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <slot></slot>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__text-requirement\" el=\"span\">\n                    ({{ t('optional') }})\n                </bento-typography>\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__text-requirement\" el=\"span\">\n                    ({{ t('required') }})\n                </bento-typography>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        BentoCheckboxType,\n        BentoMultiCheckboxType,\n    } from './checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTypography,\n            ErrorMessage,\n            CheckmarkSmallIcon,\n            MinusSmallIcon,\n        },\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n                isIndeterminate.value ? 'mixed' : `${!!isChecked.value}`\n            );\n\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: hasSlot('default')\n                    ? (getSlotText(slots)('default') as string)\n                    : t('ariaLabelFallback'),\n            });\n\n            const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(() => shouldShowError.value);\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n            const conditionalClassOutline = computed(() => ({\n                [`b-checkbox__outline--${BentoCheckboxState.UNCHECKED}`]: !isChecked.value && !isIndeterminate.value,\n                [`b-checkbox__outline--${BentoCheckboxState.ERROR}`]: shouldShowError.value,\n                [`b-checkbox__outline--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (readonly.value) {\n                    event.preventDefault();\n                }\n            };\n\n            const onChange = (event: Event) => {\n                if (disabled.value) {\n                    return;\n                }\n\n                const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n                if (isCheckboxGroup.value) {\n                    const newCheckedList = [...(modelValue.value as BentoMultiCheckboxType)];\n                    const index = newCheckedList.indexOf(value.value);\n\n                    if (index === -1) {\n                        newCheckedList.push(value.value);\n                    } else {\n                        newCheckedList.splice(index, 1);\n                    }\n                    emit(BentoCheckboxEvent.UPDATE, newCheckedList);\n                    emit(BentoCheckboxEvent.INPUT, newCheckedList);\n                } else {\n                    emit(BentoCheckboxEvent.UPDATE, newValue);\n                    emit(BentoCheckboxEvent.INPUT, newValue);\n                }\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaChecked,\n                ariaDescribedBy,\n                ariaInvalid,\n                computedAriaLabel,\n                conditionalClass,\n                conditionalClassOutline,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isCheckboxGroup,\n                isChecked,\n                isIndeterminate,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n\n                // Methods\n                hasSlot,\n                onChange,\n                onClick,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxState","BentoCheckboxState2","BentoCheckboxEvent","BentoCheckboxEvent2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoTypography","ErrorMessage","CheckmarkSmallIcon","MinusSmallIcon","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaChecked","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","computedAriaLabel","useAriaLabel","ariaInvalid","conditionalClass","conditionalClassOutline","event","newValue","newCheckedList","index"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/chunks/loading-button.7301cc2e.js

@@ -1,89 +0,0 @@
-import { defineComponent as c, computed as l } from "vue";
-import { BentoLoadingIndicator as d } from "../loading-indicator.js";
-import { a as o } from "./button.bb0d7584.js";
-import { C as p } from "./cross-circle-fill.27580c4b.js";
-import { C as u } from "./checkmark-circle-fill.345311d2.js";
-import { n as _ } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/loading-button.css";
-var n = /* @__PURE__ */ ((a) => (a.START = "start", a.LOADING = "loading", a.SUCCESS = "success", a.FAIL = "fail", a))(n || {});
-const f = {}, v = /* @__PURE__ */ c({
-  ...f,
-  __name: "loading-button",
-  props: {
-    /**
-     * Reduces sizing of button
-     */
-    condensed: {
-      type: o.props.condensed.type,
-      default: !1
-    },
-    /**
-     * Disables button functonality
-     */
-    disabled: {
-      type: o.props.disabled.type,
-      default: !1
-    },
-    /**
-     * Sets color set to inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * State of the button.
-     * @values start, loading, success, fail
-     */
-    state: {
-      type: String,
-      default: n.START,
-      validator: (a) => Object.values(n).includes(a)
-    },
-    /**
-     * Types of flavour of Button
-     * @values primary, secondary, tertiary
-     */
-    variant: {
-      type: o.props.variant.type,
-      default: "primary",
-      validator: o.props.variant.validator
-    }
-  },
-  emits: ["click"],
-  setup(a, { emit: s }) {
-    const t = a, e = l(() => ({
-      [`b-loading-button--${t.variant}-${n.LOADING}`]: t.state === n.LOADING && !t.disabled,
-      [`b-loading-button--${t.variant}-${n.SUCCESS}`]: t.state === n.SUCCESS,
-      ["b-loading-button--inverse"]: t.inverse
-    })), r = l(
-      () => t.variant === "primary" && !t.inverse || t.variant !== "primary" && t.inverse
-    );
-    return { __sfc: !0, props: t, emit: s, conditionalClasses: e, isInverseLoadingIndicator: r, onClick: (i) => {
-      i.stopPropagation(), t.state !== n.LOADING && s("click", i);
-    }, BentoLoadingIndicator: d, BentoButton: o, Cross: p, Checkmark: u };
-  }
-});
-var m = function() {
-  var s = this, t = s._self._c, e = s._self._setupProxy;
-  return t(e.BentoButton, { staticClass: "b-loading-button", class: e.conditionalClasses, attrs: { critical: s.state === "fail", variant: s.variant, condensed: s.condensed, disabled: s.disabled, inverse: s.inverse }, on: { "!click": function(r) {
-    return r.stopPropagation(), e.onClick.apply(null, arguments);
-  } }, scopedSlots: s._u([s.state !== "start" ? { key: "iconLeft", fn: function() {
-    return [t("span", { staticClass: "b-loading-button__icon", attrs: { "data-testid": "loading-button-rotating-icon" } }, [s.state === "fail" ? t(e.Cross, { attrs: { "svg-title": "failed" } }) : s.state === "success" ? t(e.Checkmark, { attrs: { "svg-title": "succeded" } }) : s.state === "loading" ? t(e.BentoLoadingIndicator, { attrs: { small: "", inverse: e.isInverseLoadingIndicator } }) : s._e()], 1)];
-  }, proxy: !0 } : null], null, !0) }, [s._t("default")], 2);
-}, C = [], b = /* @__PURE__ */ _(
-  v,
-  m,
-  C,
-  !1,
-  null,
-  "4b944533",
-  null,
-  null
-);
-const x = b.exports;
-export {
-  x as B,
-  n as a
-};
-//# sourceMappingURL=loading-button.7301cc2e.js.map

package/dist/chunks/loading-button.7301cc2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"loading-button.7301cc2e.js","sources":["../../src/components/button/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue"],"sourcesContent":["export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"state === 'fail'\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n        <template v-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" svg-title=\"failed\" />\n                <checkmark v-else-if=\"state === 'success'\" svg-title=\"succeded\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLoadingButtonState } from './loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-button.scss\" />\n"],"names":["BentoLoadingButtonState","BentoLoadingButtonState2","__default__","conditionalClasses","computed","props","isInverseLoadingIndicator","e","emit"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;AC0HR,MAAAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MAEuB,CAAA,qBAAAA,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA;AAAA,MAElB,CAAA,2BAAA,GAAAK,EAAA;AAAA,IACP,EAAA,GAGzCC,IAAAF;AAAA,MAAkC,MAAAC,EAAA,YAAA,aAAA,CAAAA,EAAA,WAAAA,EAAA,YAAA,aAAAA,EAAA;AAAA,IACiE;yGAGnG,CAAAE,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAF,EAAA,UAAAL,EAAA,WACIQ,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;"}