{"version":3,"file":"CZTVvG9k.js","sources":["../../../../components/HeatPumpFive.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { FormKitLazyProvider } from '@formkit/vue' \n    \n    import { VueTelInput } from 'vue-tel-input';\n    import 'vue-tel-input/vue-tel-input.css';\n\n    const emit = defineEmits([\n        'contactNumber',\n        'emailAddress'\n    ])\n\n    const props = defineProps({\n        checkContactNumber: {\n            type: Boolean,\n            default: true\n        },\n        checkEmailAddress: {\n            type: Boolean,\n            default: true\n        },\n    })\n\n    const fullName = ref('')\n    const contactNumber = ref('')\n    const emailAddress = ref('')\n    const projectType = ref(['1803'])\n    const anyOtherTechnologiesOfInterest = ref(['1806'])\n    const preferredMethod = ref(['1810'])\n    const termsAndConditions = ref(true)\n    const emailMarketing = ref(true)\n\n    watch(() => contactNumber.value, () => {\n        emit('contactNumber')\n    })\n\n    watch(() => emailAddress.value, () => {\n        emit('emailAddress')\n    })\n\n</script>\n\n<template>\n    <div class=\"flex flex-col items-center gap-6 md:gap-8 lg:gap-10 mb-6 md:mb-8 lg:mb-10\">\n        \n<FormKitLazyProvider config-file=\"true\">\n<h3 class=\"font-hass-display text-h2_mobile md:text-h2_tablet lg:text-h2_desktop font-medium text-elephant-950 [&>em]:not-italic [&>em]:text-lima-600\">How should we get in touch?</h3>\n        <div class=\"grid grid-cols-2 gap-y-2 gap-x-4 w-full h-auto\">\n            <div class=\"form--text col-span-2 lg:col-span-1\">\n                <FormKit\n                    type=\"text\"\n                    name=\"fullName\"\n                    label=\"Full Name *\"\n                    placeholder=\"Full Name\"\n                    v-model=\"fullName\"\n                    validation=\"required\"\n                    validation-label=\"Full name\"\n                />\n            </div>\n            <div class=\"form--tel col-span-2 lg:col-span-1 relative flex flex-col\">\n                <span class=\"font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500 mb-1\">Contact Number *</span>\n                <div class=\"relative\">\n                    <vue-tel-input v-model=\"contactNumber\" mode=\"international\" defaultCountry=\"GB\" :inputOptions=\"{placeholder: 'Contact Number'}\"/>\n                    <FormKit\n                        type=\"tel\"\n                        name=\"contactNumber\"\n                        placeholder=\"Contact Number\"\n                        v-model=\"contactNumber\"\n                        validation=\"required\"\n                        :validation-messages=\"{\n                            required: 'Contact number is required.',\n                        }\"\n                    />\n                    <span v-if=\"!checkContactNumber\" class=\"block m-0 mt-1 p-0 font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-medium text-[#f31e2b]\">Contact number is invalid.</span>\n                </div>\n            </div>\n            <div class=\"form--email col-span-2\">\n                <FormKit\n                    type=\"email\"\n                    name=\"emailAddress\"\n                    label=\"Email Address *\"\n                    placeholder=\"Email Address\"\n                    v-model=\"emailAddress\"\n                    validation=\"required\"\n                    :validation-messages=\"{\n                        required: 'Email address is required.',\n                    }\"\n                />\n                <span v-if=\"!checkEmailAddress\" class=\"block m-0 mt-1 p-0 font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-medium text-[#f31e2b]\">Email address is invalid.</span>\n            </div>\n\n            <div class=\"form--radios col-span-2\">\n                <FormKit\n                    type=\"checkbox\"\n                    name=\"options\"\n                    label=\"What is your preferred method of communication? *\"\n                    :options=\"[\n                        {\n                            label: 'Phone',\n                            value: '1810'\n                        }, \n                        {\n                            label: 'Email',\n                            value: '1811'\n                        }, \n                        {\n                            label: 'WhatsApp',\n                            value: '1812'\n                        } \n                    ]\"\n                    v-model=\"preferredMethod\"\n                    validation=\"required\"\n                    validation-label=\"Preferred method\"\n                />\n            </div>\n\n            <div class=\"form--radios col-span-2\">\n                <FormKit\n                    type=\"checkbox\"\n                    name=\"projectType\"\n                    label=\"Project Type *\"\n                    :options=\"[\n                        {\n                            label: 'Retrofit',\n                            value: '1803'\n                        }, \n                        {\n                            label: 'Renovation',\n                            value: '1804'\n                        }, \n                        {\n                            label: 'New Build',\n                            value: '1805'\n                        } \n                    ]\"\n                    v-model=\"projectType\"\n                    validation=\"required\"\n                    validation-label=\"Project Type\"\n                />\n            </div>\n\n            <div class=\"form--radios col-span-2\">\n                <FormKit\n                    type=\"checkbox\"\n                    name=\"anyOtherTechnologiesOfInterest\"\n                    label=\"Any other technologies of interest?\"\n                    :options=\"[\n                        {\n                            label: 'Underfloor Heating',\n                            value: '1806'\n                        }, \n                        {\n                            label: 'Solar',\n                            value: '1807'\n                        }, \n                        {\n                            label: 'Battery',\n                            value: '1808'\n                        },\n                        {\n                            label: 'MVHR',\n                            value: '1809'\n                        }  \n                    ]\"\n                    v-model=\"anyOtherTechnologiesOfInterest\"\n                />\n            </div>\n            \n\n            <div class=\"form--checkboxes col-span-2 flex flex-wrap gap-y-2 gap-x-4 w-full h-auto border-t border-b border-mystic-200 m-0 py-4\">\n                <FormKit\n                    type=\"checkbox\"\n                    name=\"termsAndConditions\"\n                    label=\"I agree to the terms & conditions\"\n                    v-model=\"termsAndConditions\"\n                    validation=\"accepted\"\n                    validation-label=\"Terms & conditions\"\n                >\n                    <template #label=\"context\">\n                        <span :class=\"context.classes.label\">I agree to the <a class=\"text-lima-600 underline\" href=\"https://epc-improvements.co.uk/terms-and-conditions\" target=\"_blank\">Terms & Conditions</a></span>\n                    </template>\n                </FormKit>\n                <FormKit\n                    type=\"checkbox\"\n                    name=\"emailMarketing\"\n                    label=\"I'd like to subscribe to email marketing\"\n                    v-model=\"emailMarketing\"\n                />\n            </div>\n        </div>\n</FormKitLazyProvider>\n\n    </div>\n</template>"],"names":["emit","__emit","fullName","ref","contactNumber","emailAddress","projectType","anyOtherTechnologiesOfInterest","preferredMethod","termsAndConditions","emailMarketing","watch"],"mappings":"u9DAMI,MAAMA,EAAOC,EAgBPC,EAAWC,EAAI,EAAE,EACjBC,EAAgBD,EAAI,EAAE,EACtBE,EAAeF,EAAI,EAAE,EACrBG,EAAcH,EAAI,CAAC,MAAM,CAAC,EAC1BI,EAAiCJ,EAAI,CAAC,MAAM,CAAC,EAC7CK,EAAkBL,EAAI,CAAC,MAAM,CAAC,EAC9BM,EAAqBN,EAAI,EAAI,EAC7BO,EAAiBP,EAAI,EAAI,EAEzB,OAAAQ,EAAA,IAAMP,EAAc,MAAO,IAAM,CACnCJ,EAAK,eAAe,CAAA,CACvB,EAEKW,EAAA,IAAMN,EAAa,MAAO,IAAM,CAClCL,EAAK,cAAc,CAAA,CACtB"}