{"version":3,"file":"ButtonPanel.vue_vue_type_script_setup_true_lang-CFFbOzJb.js","sources":["../../src/components/ButtonPanel.vue"],"sourcesContent":["<template>\r\n    <div :class=\"['flex h-24 w-full items-center bg-button-panel-background px-0 py-2.5 shadow-button-panel-box-shadow xl:p-0', props.finishState ? 'justify-center' : 'justify-between']\">\r\n        <slot name=\"leftside\">\r\n            <Button\r\n                v-if=\"!props.finishState\"\r\n                class=\"btn-cancel\"\r\n                type=\"button\"\r\n                @click=\"onCancel\"\r\n                :title=\"$t('go-back-title')\"\r\n                :label=\"$t('go-back-title')\"\r\n                :pt-options=\"{\r\n                    mergeProps: true,\r\n                    mergeSections: true,\r\n                }\"\r\n                :pt=\"{\r\n                    root: () => ({\r\n                        class: [\r\n                            `w-52 text-sm ml-5 mr-5 xl:ml-12 !rounded-md border border-button-panel-cancel-border-c bg-button-panel-cancel-bg-c hover:!border-button-panel-cancel-border-hover-c \r\n                         hover:!bg-button-panel-cancel-bg-hover-c`,\r\n                            props.showCancel === true ? '' : '!invisible',\r\n                        ],\r\n                    }),\r\n                    label: { class: 'text-button-panel-cancel-text-c !font-normal' },\r\n                }\"\r\n            >\r\n            </Button>\r\n        </slot>\r\n        <div v-if=\"!props.finishState && props.hintComplete !== true\" :class=\"['flex items-center', !props.hintText ? 'invisible' : '']\">\r\n            <div\r\n                v-if=\"!props.hintTextIsError\"\r\n                v-tooltip.focus.top=\"{\r\n                    value: props.hintText,\r\n                    disabled: !isMobile,\r\n                }\"\r\n                tabindex=\"1\"\r\n            >\r\n                <FontAwesomeLayers class=\"fa-2x !pt-10 text-button-panel-hint-c\">\r\n                    <FontAwesomeIcon icon=\"fa-sharp fa-thin fa-circle\" />\r\n                    <FontAwesomeIcon icon=\"fa-sharp fa-solid fa-question\" transform=\"shrink-7\" />\r\n                </FontAwesomeLayers>\r\n            </div>\r\n            <p :class=\"['ml-2.5 hidden text-sm text-button-panel-hint-c xl:block', props.hintTextIsError ? 'text-red-500' : 'text-button-panel-hint-c']\">{{ props.hintText }}</p>\r\n        </div>\r\n        <div class=\"invisible w-32\" v-if=\"!showSubmit\"></div>\r\n        <Button\r\n            v-if=\"showSubmit\"\r\n            type=\"button\"\r\n            @click=\"onSubmit\"\r\n            :disabled=\"props.submitDisabled || props.loading\"\r\n            :label=\"props.submitTitle\"\r\n            :loading=\"props.loading\"\r\n            :title=\"props.submitTitle\"\r\n            :size=\"props.submitSize\"\r\n            :pt-options=\"{\r\n                mergeProps: true,\r\n                mergeSections: true,\r\n            }\"\r\n            :pt=\"{\r\n                root: () => ({\r\n                    class: [\r\n                        'w-52 ml-5 text-sm border-none rounded-md !py-4',\r\n                        props.finishState ? ' mr-0' : 'mr-5 xl:mr-12',\r\n                        props.errorBtn ? 'bg-danger' : 'bg-button-panel-select-bg-c',\r\n                        props.showSubmit === true ? '' : 'invisible',\r\n                        props.submitDisabled ? 'hover:!bg-button-panel-select-bg-c' : 'hover:opacity-40',\r\n                    ],\r\n                }),\r\n                label: { class: '!text-button-panel-select-text-c !font-normal' },\r\n            }\"\r\n        >\r\n        </Button>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';\r\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse/core/index';\r\nimport { PropType } from 'vue';\r\n\r\nconst props = defineProps({\r\n    finishState: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    showCancel: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    showSubmit: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: true,\r\n    },\r\n    submitDisabled: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    loading: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    submitTitle: {\r\n        type: String as PropType<string>,\r\n        required: false,\r\n        default: '',\r\n    },\r\n    errorBtn: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    hintText: {\r\n        type: String as PropType<string>,\r\n        required: false,\r\n        default: '',\r\n    },\r\n    hintTextIsError: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    hintComplete: {\r\n        type: Boolean as PropType<boolean>,\r\n        required: false,\r\n        default: false,\r\n    },\r\n    submitSize: {\r\n        type: String as PropType<'small' | 'large'>,\r\n        required: false,\r\n        default: null,\r\n    },\r\n});\r\n\r\nconst emits = defineEmits(['cancel', 'submit']);\r\n\r\nconst breakpoints = useBreakpoints(breakpointsTailwind);\r\n\r\nconst isMobile = breakpoints.smaller('xl');\r\n\r\nconst onCancel = () => {\r\n    emits('cancel');\r\n};\r\n\r\nconst onSubmit = () => {\r\n    if (props.submitDisabled) {\r\n        return;\r\n    }\r\n\r\n    emits('submit');\r\n};\r\n</script>\r\n"],"names":["props","__props","emits","__emit","isMobile","useBreakpoints","breakpointsTailwind","onCancel","onSubmit"],"mappings":"w2BA+EA,MAAMA,EAAQC,EA0DRC,EAAQC,EAIRC,EAFcC,EAAeC,CAAmB,EAEzB,QAAQ,IAAI,EAEnCC,EAAW,IAAM,CACnBL,EAAM,QAAQ,CAAA,EAGZM,EAAW,IAAM,CACfR,EAAM,gBAIVE,EAAM,QAAQ,CAAA;"}