@inleads/inleads-widgets
Version:
Widgets for chatbot, WhatsApp, nps, contact-form
104 lines (99 loc) • 8.55 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-63f146e2.js';
const contactFormWidgetCss = ":host{display:block !important;all:initial}.contact-form-container{width:100%;position:relative}.material-input .form-group{position:relative;margin-bottom:12px}.material-input .form-group .form-control{letter-spacing:0.5px;transition:0.2s ease all;height:54px;font-weight:400;border-radius:4px;border:1px solid #D8D8D8;background:#fff;color:#14193A;font-size:14px;padding:32px 12px 20px !important;box-shadow:0 0 24px rgba(91, 94, 222, 0.16);box-sizing:border-box}.material-input .form-group .form-control:focus,.material-input .form-group .form-control:not(:placeholder-shown){outline:none}.material-input .form-group .form-control~label{color:#70738C;font-size:16px;position:absolute;left:12px;top:10px;pointer-events:none;transition:0.2s ease all}.material-input .form-group .form-control:focus~label,.material-input .form-group .form-control:not(:placeholder-shown)~label{font-size:12px;top:6px;left:10px;font-weight:500}input,textarea{width:100%;font-family:'system-ui'}label{font-family:'system-ui'}textarea{height:110px !important;padding:-10px 12px 20px !important}.timeline-section{padding:10px 0}button.submitBTN,button.btn-close{background-color:#2196f3;color:#fff;box-shadow:0 5px 45px rgba(0, 0, 0, 0.2);transition:all 0.3s linear;padding:14px 40px;border-radius:50px;font-size:16px;font-weight:500;text-transform:uppercase;border:none;font-family:'system-ui';cursor:pointer}form{max-width:100%;margin:20px auto}.submit-message{text-align:center;font-family:'system-ui'}.showModal{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(186, 202, 216, 0.9)}.modal-body{text-align:center;font-family:'system-ui';padding:20px 40px;font-size:18px;background-color:#fff;border-radius:4px}.submit-message{font-family:'system-ui';font-size:16px;font-weight:400}";
const ContactFormWidgetStyle0 = contactFormWidgetCss;
const ContactFormWidget$1 = /*@__PURE__*/ proxyCustomElement(class ContactFormWidget extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.handleInputChange = (event, field) => {
const input = event.target;
this[field] = input.value;
};
this.handleSubmit = (event) => {
event.preventDefault();
if (this.name === '') {
alert('Please enter your name');
return;
}
if (this.email === '' || !this.validateEmail(this.email)) {
alert('Please enter a valid email address');
return;
}
if (this.phoneNumber === '' || this.phoneNumber.length < 8) {
alert('Please enter a valid phone number');
return;
}
if (this.message === '') {
alert('Please enter a message');
return;
}
this.isSubmitting = true;
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.setUser(this.email, this.name, { 'phoneNumber': this.phoneNumber, 'description': this.message });
setTimeout(() => {
this.isSubmitting = false;
this.showModal = true;
this.name = "";
this.email = "";
this.phoneNumber = "";
this.message = "";
setTimeout(this.closeModal, 2000);
}, 2000);
};
this.closeModal = () => {
this.showModal = false;
};
this.apiKey = undefined;
this.name = '';
this.email = '';
this.phoneNumber = '';
this.message = '';
this.isSubmitting = false;
this.showModal = false;
}
componentDidLoad() {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/@inleads/event-logger/dist/events.js";
script.type = 'text/javascript';
script.onload = () => {
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.init(this.apiKey);
};
document.body.appendChild(script);
}
validateEmail(email) {
const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\\.,;:\s@"]+\.)+[^<>()[\]\\.,;:\s@"]{2,})$/i;
return reg.test(email);
}
render() {
return (h("div", { key: '102365004099bfbf44ef5a604eb10cda7f9fe101', class: "contact-form-container" }, h("form", { key: 'f150005f1bcc20ee2b3e28501c7823aec054460d', onSubmit: this.handleSubmit, id: "contact-form", novalidate: true }, h("div", { key: 'a6bb8b6594b4495c3f3b80ba36345d091d565b0a', class: "contact-widget-entireSection" }, h("div", { key: '9a350699624e11afc5ac03740e5a7b7fa7a7f548', class: "screen-one screens" }, h("div", { key: '7241499d39564d155df8c240b9aaa063cb825f3e', class: "body-content" }, h("div", { key: '5d4c83f5811eeb014a34dd522b31f67051f131cc', class: "material-input" }, h("div", { key: '58f3962d9c77bb0314e5ed93d3cbfff288aae2bf', class: "form-group" }, h("input", { key: 'c999706db5722bce588683c81bf448f42e80a3bb', type: "text", id: "contact-name", class: "form-control", placeholder: " ", value: this.name, onInput: (event) => this.handleInputChange(event, 'name') }), h("label", { key: '24db579b7990b17ba910297ae38cd9a543105289', htmlFor: "contact-name" }, "Name")), h("div", { key: '6070a8601949f0de15cd13d8da3fd45d1a3de268', class: "form-group" }, h("input", { key: '5f13bed8e5ae3ede1694a84d4157123b72046341', type: "email", id: "contact-email", class: "form-control", placeholder: " ", value: this.email, onInput: (event) => this.handleInputChange(event, 'email') }), h("label", { key: '78beef4e346bbc8536d0eb2d00b6ff5368f683b5', htmlFor: "contact-email" }, "Email")), h("div", { key: 'f04a9b5a88388c413ffe1a76c8ad89aa3ab80a37', class: "form-group" }, h("input", { key: 'c43df1fdaa332ad0f0aad118136cc709488f7222', type: "text", id: "contact-phonenumber", class: "form-control", placeholder: " ", value: this.phoneNumber, onInput: (event) => this.handleInputChange(event, 'phoneNumber') }), h("label", { key: 'fb2ab6a7b3c51cb74155f888eb7b7e93ee46ba45', htmlFor: "contact-phonenumber" }, "Phone Number")), h("div", { key: 'caff9de2a8b1bcf1eda0514c376db3430d007a75', class: "description-section" }, h("div", { key: '7015f9886259c6266c493d86b85623b87e9ce2fa', class: "form-group" }, h("textarea", { key: '16d5675a65c4d9a4b303ce826cba3e2d01a19b40', maxlength: "10000", class: "form-control descriptionText", placeholder: " ", id: "contact-description", value: this.message, onInput: (event) => this.handleInputChange(event, 'message') }), h("label", { key: '6c9b916fa85d17c1e58dce39341af11b3ac0d586', htmlFor: "contact-description" }, "Message")))), h("div", { key: '07eee7fdd0e155b4719668fab1c6b9d8ded619bd', class: "timeline-section" }, h("div", { key: 'ee249af99f370a863f0367574a93bc4f67c944c8', class: "screen1" }, h("button", { key: 'bf61b039c7df7972501c4a4962bf468c4a832466', type: "submit", class: "btn btn-primary submitBTN", disabled: this.isSubmitting }, this.isSubmitting ? 'Submitting...' : 'SUBMIT')))))), this.showModal && (h("div", { key: 'd423e8caf061d57d8ed46e830e6b023aea434bbd', class: "showModal", id: "successModal", role: "dialog" }, h("div", { key: '0d6a29062a806d99ef1678d5e3542ffefeca8938', class: "modal-body text-center" }, h("p", { key: '87906c464087d2c08197bc10c667482e58d77995', class: "submit-message" }, "Thanks for contacting. We will get back to you shortly.")))))));
}
static get style() { return ContactFormWidgetStyle0; }
}, [1, "contact-form-widget", {
"apiKey": [1, "api-key"],
"name": [32],
"email": [32],
"phoneNumber": [32],
"message": [32],
"isSubmitting": [32],
"showModal": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["contact-form-widget"];
components.forEach(tagName => { switch (tagName) {
case "contact-form-widget":
if (!customElements.get(tagName)) {
customElements.define(tagName, ContactFormWidget$1);
}
break;
} });
}
defineCustomElement$1();
const ContactFormWidget = ContactFormWidget$1;
const defineCustomElement = defineCustomElement$1;
export { ContactFormWidget, defineCustomElement };
//# sourceMappingURL=contact-form-widget.js.map