@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/src/embedded_forms/EmbeddedForm.js

@@ -0,0 +1,638 @@
+import { __webpack_require__ } from "../../js/runtime.js";
+import { URL_REGEX } from "../validation_ts.js";
+import { QualifiedFormApi } from "../../widget/qualified_form/qualified_form_api.js";
+import { QualifiedFormField, ClassNames } from "./QualifiedFormField.js";
+import { getElementWithMostText } from "../personalizations/utils.js";
+import { getLoadingSpinnerHTMLForEmbeddedForm } from "./utils.js";
+import { _extends } from "../../js/4101.js";
+import "../../widget/utils/native_globals.js";
+
+/* provided dependency */ var EmbeddedForm_setTimeout = __webpack_require__(68034).pS;
+
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+
+var EmbeddedForm_FormEvent = /*#__PURE__*/ (/* unused pure expression or super */ null && (function(FormEvent) {
+    FormEvent["EmailSubmit"] = "qualifiedFormEmailSubmit";
+    FormEvent["FollowUpQuestionsSubmit"] = "qualifiedFormFollowUpQuestionsSubmit";
+    FormEvent["Success"] = "qualifiedFormSuccess";
+    return FormEvent;
+}({})));
+var EmbeddedForm_FormError = function(FormError) {
+    FormError[FormError["EmailBusinessRequired"] = (/* inlined export .EmailError.NON_BUSINESS */"non_business")] = "EmailBusinessRequired";
+    FormError[FormError["EmailInvalid"] = (/* inlined export .EmailError.INVALID */"invalid")] = "EmailInvalid";
+    return FormError;
+}(EmbeddedForm_FormError || {});
+var EmbeddedForm_FormState = /*#__PURE__*/ function(FormState) {
+    FormState["EmailPending"] = "emailPending";
+    FormState["EmailReady"] = "emailReady";
+    FormState["FollowUpQuestionsPending"] = "followUpQuestionsPending";
+    FormState["FollowUpQuestionsReady"] = "followUpQuestionsReady";
+    FormState["Success"] = "success";
+    return FormState;
+}({});
+/**
+ * Factory that returns a custom element class for use with `window.customElements.define()`. The
+ * class implements the abstract `EmbeddedForm` class, and binds info for server communication.
+ */ function createEmbeddedFormClass(param) {
+    let { channel, iframeManager } = param;
+    return class extends EmbeddedForm {
+        /**
+     * Defines the form's DOM and base CSS. Customers can customize the form's appearance by
+     * targeting the form's class names.
+     */ get template() {
+            // TODO (WEB-873): Move `template()` to a separate file when stable
+            //
+            // Embedded forms provide two sets of starter CSS:
+            //
+            // 1. The base CSS in this template focuses on making the embedded form render like a plain
+            //    `<div>`, as well as providing other common styles that most customers would need.
+            // 2. The snippet CSS (in `EmbeddedFormSnippet.ts`) provides aesthetic styles that the
+            //    customer can choose to completely delete.
+            //
+            // By default, add new class names to this base CSS. This reduces the chances that a customer
+            // will mention it in their custom styles, which would make it harder for us to change or
+            // remove the class name later. If we want to make a class name more obviously customizable,
+            // we can move it to the snippet CSS in `EmbeddedFormSnippet.ts`.
+            const template = document.createElement("template");
+            const emailInputId = "qualified-form-" + this.instanceId + "-email-input";
+            template.innerHTML = '\n        <style>\n          /* Functional/layout styles */\n\n          qualified-form {\n            display: block;\n            container-type: inline-size; /* Let website use container queries */\n          }\n\n          qualified-form[hidden],\n          .QualifiedForm-formError[hidden] {\n            display: none;\n          }\n\n          .QualifiedForm-successContainer[hidden] {\n            display: none !important; /* Override `display: flex` in starter CSS */\n          }\n\n          /* Cosmetic styles; could move to snippet for discoverability */\n\n          .QualifiedForm-followUpQuestionsContainer .QualifiedForm-formField {\n            margin-block-start: 16px;\n          }\n\n          .QualifiedForm-formControlContainer {\n            margin-block-start: 8px;\n          }\n\n          .QualifiedForm-formField--checkbox .QualifiedForm-formControlContainer {\n            display: inline-block;\n            margin-block-start: 0;\n          }\n\n\n          .QualifiedForm-formControl--textarea {\n            resize: vertical;\n          }\n\n          .QualifiedForm-formErrorsContainer {\n            margin-block-start: 8px;\n          }\n\n          .QualifiedForm-formError {\n            color: #E4251B;\n          }\n\n          .QualifiedForm-formError::before {\n            content: "⚠️ ";\n          }\n\n          .QualifiedForm-followUpQuestionsContainer {\n            height: auto;\n          }\n\n          .QualifiedForm-followUpQuestionsContainer[aria-hidden] {\n            height: 0;\n            overflow: hidden;\n          }\n\n          .QualifiedForm-submitButtonContainer {\n            margin-block-start: 16px;\n          }\n\n          qualified-form[data-form-state="emailPending"] .QualifiedForm-submitButton,\n          qualified-form[data-form-state="followUpQuestionsPending"] .QualifiedForm-submitButton {\n            cursor: wait;\n          }\n\n          @media (prefers-reduced-motion: no-preference) {\n            @supports (interpolate-size: allow-keywords) {\n              .QualifiedForm-followUpQuestionsContainer {\n                interpolate-size: allow-keywords;\n                transition: height 0.5s ease;\n              }\n            }\n          }\n          .QualifiedForm-visuallyHidden {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: 1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            border: 0;\n          }\n        </style>\n        \n        <section class="QualifiedForm-root">\n          <form aria-label="Qualified Form" class="QualifiedForm-form">\n            <div class="QualifiedForm-emailFieldContainer QualifiedForm-formField">\n              <label class="QualifiedForm-formLabel" for="' + emailInputId + '">Email</label>\n              <div class="QualifiedForm-formControlContainer">\n                <input\n                  class="' + ClassNames.FORM_CONTROL + " " + ClassNames.FORM_CONTROL_TEXT_INPUT + '"\n                  id="' + emailInputId + '"\n                  name="email"\n                  required\n                  type="email"\n                />\n              </div>\n              <div class="QualifiedForm-formErrorsContainer" role="alert">\n                <div class="QualifiedForm-formError QualifiedForm-formError--emailInvalid" hidden>\n                  Please enter a valid email address.\n                </div>\n                <div class="QualifiedForm-formError QualifiedForm-formError--emailBusinessRequired" hidden>\n                  Please enter a business email address.\n                </div>\n              </div>\n            </div>\n            <div aria-hidden="true" class="QualifiedForm-followUpQuestionsContainer"></div>\n            <div class="QualifiedForm-submitButtonContainer">\n              <button class="' + EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME + '" type="submit" aria-label="submit">\n                Submit\n              </button>\n            </div>\n          </form>\n          ' + '\n          <div role="status">\n            <div class="QualifiedForm-successContainer" hidden>\n              <div class="QualifiedForm-successMessage">Thank you for your submission!</div>\n            </div>\n          </div>\n        </section>\n      ';
+            return template;
+        }
+        constructor(...args){
+            super(...args), this.channel = channel, this.iframeManager = iframeManager, this.qualifiedFormApi = null;
+        }
+    };
+}
+/**
+ * Defines a custom element, `<qualified-form>`, which we use to embed a Qualified Form on a
+ * customer's website. The form's snippet provides:
+ *
+ * - A `<script>` element that uses `window.qualified("showForm", ...)` to render a
+ *   `<qualified-form>` element.
+ * - Starter CSS that the customer can customize to match their website's visual language.
+ *
+ * This custom element and its HTML attributes are an internal implementation detail. For the
+ * customer-facing public API, refer to the `window.qualified("showForm", ...)` implementation.
+ */ class EmbeddedForm extends HTMLElement {
+    connectedCallback() {
+        this.appendChild(this.template.content.cloneNode(true));
+        // Render content
+        this.setFormState("emailReady");
+        this.validateAttributes();
+        this.renderElements();
+        // Set up event handling
+        const emailInput = this.getElement("emailInput");
+        const form = this.getElement("form");
+        emailInput == null ? void 0 : emailInput.addEventListener("input", this.handleEmailInputInput);
+        form == null ? void 0 : form.addEventListener("submit", this.handleFormSubmit);
+        this.qualifiedFormApi = this.createQualifiedFormApi();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.validateAttributes([
+            name
+        ]);
+        this.renderElements();
+    }
+    printError(message) {
+        // eslint-disable-next-line no-console
+        console.error("[Qualified] Embedded form: " + message);
+    }
+    renderElements() {
+        this.renderEmailInput();
+        this.renderSubmitButton();
+        this.renderSuccessMessage();
+    }
+    createQualifiedFormApi() {
+        if (this.formExperienceApiName == null) {
+            this.printError("`formExperienceApiName` property is required");
+            return null;
+        }
+        return new QualifiedFormApi({
+            channel: this.channel,
+            config: {
+                validateBusinessEmail: this.validateBusinessEmail === "true"
+            },
+            formApiName: this.formExperienceApiName,
+            iframeManager: this.iframeManager,
+            source: (/* inlined export .QualifiedFormSource.EMBEDDED */"embedded")
+        });
+    }
+    /* Attributes/properties */ // Reflect attributes and properties so we can configure the custom element via either HTML or JS,
+    // similar to built-in elements. Treat attributes as the source of truth, and property accessors
+    // as JS convenience methods.
+    //
+    // Caution: Because this component extends the native `HTMLElement`, it might override future
+    // additions to the `HTMLElement` prototype.
+    setOrRemoveAttribute(name, value) {
+        if (value != null) {
+            this.setAttribute(name, value);
+        } else {
+            this.removeAttribute(name);
+        }
+    }
+    get emailInputLabelText() {
+        return this.getAttribute(EmbeddedForm.EMAIL_INPUT_LABEL_TEXT_ATTRIBUTE);
+    }
+    set emailInputLabelText(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.EMAIL_INPUT_LABEL_TEXT_ATTRIBUTE, value);
+    }
+    get emailInputPlaceholderText() {
+        return this.getAttribute(EmbeddedForm.EMAIL_INPUT_PLACEHOLDER_TEXT_ATTRIBUTE);
+    }
+    set emailInputPlaceholderText(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.EMAIL_INPUT_PLACEHOLDER_TEXT_ATTRIBUTE, value);
+    }
+    get emailSubmitButtonInnerHtml() {
+        return this.getAttribute(EmbeddedForm.EMAIL_SUBMIT_BUTTON_INNER_HTML_ATTRIBUTE);
+    }
+    set emailSubmitButtonInnerHtml(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.EMAIL_SUBMIT_BUTTON_INNER_HTML_ATTRIBUTE, value);
+    }
+    get formControlCheckboxClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_CHECKBOX_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlCheckboxClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_CHECKBOX_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formControlTextareaClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_TEXTAREA_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlTextareaClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_TEXTAREA_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formControlTextInputClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_TEXT_INPUT_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlTextInputClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_TEXT_INPUT_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formControlFormLabelClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_FORM_LABEL_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlFormLabelClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_FORM_LABEL_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formControlFormLabelOptionalClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_FORM_LABEL_OPTIONAL_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlFormLabelOptionalClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_FORM_LABEL_OPTIONAL_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formControlSelectClassName() {
+        return this.getAttribute(EmbeddedForm.FORM_CONTROL_SELECT_CLASS_NAME_ATTRIBUTE);
+    }
+    set formControlSelectClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_CONTROL_SELECT_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get formExperienceApiName() {
+        return this.getAttribute(EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE);
+    }
+    set formExperienceApiName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE, value);
+    }
+    get submitButtonClassName() {
+        return this.getAttribute(EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME_ATTRIBUTE);
+    }
+    set submitButtonClassName(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME_ATTRIBUTE, value);
+    }
+    get successMessageInnerHtml() {
+        return this.getAttribute(EmbeddedForm.SUCCESS_MESSAGE_INNER_HTML_ATTRIBUTE);
+    }
+    set successMessageInnerHtml(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.SUCCESS_MESSAGE_INNER_HTML_ATTRIBUTE, value);
+    }
+    get successRedirectUrl() {
+        const url = this.getAttribute(EmbeddedForm.SUCCESS_REDIRECT_URL_ATTRIBUTE);
+        return url != null && URL_REGEX.test(url) ? url : null;
+    }
+    set successRedirectUrl(value) {
+        if (value == null || URL_REGEX.test(value)) {
+            this.setOrRemoveAttribute(EmbeddedForm.SUCCESS_REDIRECT_URL_ATTRIBUTE, value);
+        }
+    }
+    get validateBusinessEmail() {
+        return this.getAttribute(EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE);
+    }
+    set validateBusinessEmail(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE, value);
+    }
+    get version() {
+        return this.getAttribute(EmbeddedForm.VERSION_ATTRIBUTE);
+    }
+    set version(value) {
+        this.setOrRemoveAttribute(EmbeddedForm.VERSION_ATTRIBUTE, value);
+    }
+    validateAttributes(attributeNames) {
+        if (attributeNames === void 0) attributeNames = EmbeddedForm.observedAttributes;
+        if (attributeNames.includes(EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE)) {
+            if (this.formExperienceApiName == null || this.formExperienceApiName === "") {
+                this.printError("The `" + EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE + "` attribute is required");
+            }
+        }
+        if (attributeNames.includes(EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE)) {
+            if (this.validateBusinessEmail != null && this.validateBusinessEmail !== "true") {
+                this.printError("Invalid `" + EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE + "` attribute value: " + this.validateBusinessEmail);
+            }
+        }
+        if (attributeNames.includes(EmbeddedForm.VERSION_ATTRIBUTE)) {
+            if (this.version == null || this.version === "") {
+                this.printError("The `q-version` attribute is required");
+            } else if (this.version !== "0") {
+                this.printError("Invalid `" + EmbeddedForm.VERSION_ATTRIBUTE + "` attribute value: " + this.version);
+            }
+        }
+    }
+    /* Rendering */ getElement(elementName) {
+        let selector;
+        if (elementName === "emailInput") {
+            selector = ".QualifiedForm-emailFieldContainer ." + ClassNames.FORM_CONTROL;
+        } else if (elementName === "emailInputLabel") {
+            selector = ".QualifiedForm-emailFieldContainer .QualifiedForm-formLabel";
+        } else if (elementName === "followUpQuestionsContainer") {
+            selector = ".QualifiedForm-followUpQuestionsContainer";
+        } else if (elementName === "form") {
+            selector = ".QualifiedForm-form";
+        } else if (elementName === "formErrorEmailBusinessRequired") {
+            selector = ".QualifiedForm-formError--emailBusinessRequired";
+        } else if (elementName === "formErrorEmailInvalid") {
+            selector = ".QualifiedForm-formError--emailInvalid";
+        } else if (elementName === "submitButton") {
+            selector = "." + EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME;
+        } else if (elementName === "successContainer") {
+            selector = ".QualifiedForm-successContainer";
+        } else if (elementName === "successMessage") {
+            selector = ".QualifiedForm-successMessage";
+        }
+        if (selector != null) {
+            return this.querySelector(selector);
+        } else {
+            throw new Error("Unknown element name: " + elementName);
+        }
+    }
+    getFormState() {
+        const state = this.getAttribute(EmbeddedForm.FORM_STATE_ATTRIBUTE);
+        if (!Object.values(EmbeddedForm_FormState).includes(state)) {
+            throw new Error("Unknown form state: " + state);
+        }
+        return state;
+    }
+    setFormState(formState) {
+        // If this method grows to affect more elements, consider replacing it with an observer pattern.
+        const emailInput = this.getElement("emailInput");
+        const form = this.getElement("form");
+        const followUpQuestionsContainer = this.getElement("followUpQuestionsContainer");
+        const submitButton = this.getElement("submitButton");
+        const successContainer = this.getElement("successContainer");
+        // Let the customer apply form-wide styling based on the form state
+        this.setAttribute(EmbeddedForm.FORM_STATE_ATTRIBUTE, formState);
+        // Accessibility caveat: If the user had focus on the email input or submit button, then we
+        // disable that element, focus might be lost. The customer may want to handle this by tracking
+        // the current/next focusable elements on the page, then advancing focus when this form is
+        // submitted. We may not want this form to manage focus for elements outside of itself.
+        if (emailInput) {
+            emailInput.disabled = formState === "emailPending" || formState === "success";
+        }
+        if (followUpQuestionsContainer) {
+            if (formState === "followUpQuestionsReady") {
+                followUpQuestionsContainer.removeAttribute("aria-hidden");
+            } else {
+                followUpQuestionsContainer.setAttribute("aria-hidden", "true");
+            }
+        }
+        if (form) {
+            if (formState === "success") {
+                // We use the form's natural size to prop open `successContainer` to the same dimensions.
+                // When `successContainer` is visible (as an overlay in the starter CSS), the form uses
+                // `aria-hidden` — not `hidden` — to hide it from screen readers but still prop open
+                // `successContainer` to the original size.
+                form.setAttribute("aria-hidden", "true");
+            } else {
+                form.removeAttribute("aria-hidden");
+            }
+        }
+        if (submitButton) {
+            submitButton.disabled = formState === "emailPending" || formState === "success";
+            if (formState === "emailReady" || formState === "followUpQuestionsPending" || formState === "followUpQuestionsReady") {
+                // TODO (WEB-1248): Support customizing the submit button text for follow-up questions
+                submitButton.innerHTML = "Submit";
+            }
+        }
+        if (successContainer) {
+            successContainer.hidden = formState !== "success";
+        }
+    }
+    renderEmailInput() {
+        var _this_emailInputPlaceholderText;
+        const emailInput = this.getElement("emailInput");
+        const emailInputLabel = this.getElement("emailInputLabel");
+        if (!emailInput || !emailInputLabel) {
+            return;
+        }
+        // apply custom class names to email text input label
+        const formLabelClassName = this.formControlFormLabelClassName;
+        if (formLabelClassName != null) {
+            const formLabelClassNames = formLabelClassName.split(/\s+/);
+            emailInputLabel.className = [
+                ClassNames.FORM_CONTROL_FORM_LABEL,
+                ...formLabelClassNames
+            ].join(" ");
+        }
+        // apply custom class names to email text input
+        const textInputclassName = this.formControlTextInputClassName;
+        const defaultPlaceholderText = this.validateBusinessEmail === "true" ? "Business email" : "Email";
+        const placeholderText = (_this_emailInputPlaceholderText = this.emailInputPlaceholderText) != null ? _this_emailInputPlaceholderText : defaultPlaceholderText;
+        if (textInputclassName != null) {
+            const textInputclassNames = textInputclassName.split(/\s+/);
+            emailInput.className = [
+                ClassNames.FORM_CONTROL,
+                ClassNames.FORM_CONTROL_TEXT_INPUT,
+                ...textInputclassNames
+            ].join(" ");
+        }
+        emailInput.setAttribute("placeholder", placeholderText);
+    }
+    renderSubmitButton() {
+        const submitButton = this.getElement("submitButton");
+        if (!submitButton) {
+            return;
+        }
+        const currentFormState = this.getFormState();
+        if ([
+            "emailPending",
+            "followUpQuestionsPending"
+        ].includes(currentFormState)) {
+            // get color attribute for loading spinner icon
+            const submitButtonTextElement = getElementWithMostText(submitButton);
+            const { color } = getComputedStyle(submitButtonTextElement || submitButton);
+            submitButton.innerHTML = getLoadingSpinnerHTMLForEmbeddedForm(color, 11);
+            return;
+        }
+        const className = this.submitButtonClassName;
+        if (className != null) {
+            const newClassNames = className.split(" ");
+            submitButton.className = [
+                EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME,
+                ...newClassNames
+            ].join(" ");
+        }
+        const innerHtml = this.emailSubmitButtonInnerHtml;
+        if (innerHtml != null) {
+            submitButton.innerHTML = innerHtml;
+        }
+    }
+    renderSuccessMessage() {
+        const successMessage = this.getElement("successMessage");
+        if (!successMessage) {
+            return;
+        }
+        const innerHtml = this.successMessageInnerHtml;
+        if (innerHtml != null) {
+            successMessage.innerHTML = innerHtml;
+        }
+    }
+    getFormData() {
+        const form = this.getElement("form");
+        const formData = new FormData(form);
+        const formDataKeys = Array.from(new Set(formData.keys()));
+        // The form may eventually accept custom HTML for additional controls, such as captcha
+        // validation. Don't include these input values; find only our expected controls.
+        const followUpQuestionEntries = formDataKeys.reduce((entries, key)=>{
+            if (key.startsWith("followUpQuestions[")) {
+                var _formData_getAll_at;
+                // Checkboxes (boolean fields) can have multiple values in the DOM: `false` as the
+                // default, and `true` when checked. Use the last value.
+                const value = (_formData_getAll_at = formData.getAll(key).at(-1)) != null ? _formData_getAll_at : "";
+                return entries.concat([
+                    [
+                        key,
+                        value
+                    ]
+                ]);
+            }
+            return entries;
+        }, []);
+        const result = {
+            email: formData.get("email")
+        };
+        if (followUpQuestionEntries.length > 0) {
+            result.followUpQuestions = followUpQuestionEntries;
+        }
+        return result;
+    }
+    applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, followUpQuestionElementsSelector, classesToApply) {
+        var _ref;
+        const classNames = (_ref = classesToApply == null ? void 0 : classesToApply.split(/\s+/)) != null ? _ref : [];
+        followUpQuestionsContainer.querySelectorAll("." + followUpQuestionElementsSelector).forEach((element)=>{
+            element.classList.add(...classNames);
+        });
+    }
+    renderFollowUpQuestions(questionsForm) {
+        const { inputFields } = questionsForm;
+        const formFields = inputFields.map((inputFieldData)=>{
+            const formControl = new QualifiedFormField(inputFieldData, {
+                fieldNamespace: "followUpQuestions"
+            });
+            return formControl.toHtml();
+        });
+        const formFieldsHtml = formFields.join("");
+        const followUpQuestionsContainer = this.getElement("followUpQuestionsContainer");
+        if (followUpQuestionsContainer) {
+            followUpQuestionsContainer.innerHTML = formFieldsHtml;
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_CONTROL_TEXT_INPUT, this.formControlTextInputClassName);
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_CONTROL_TEXTAREA, this.formControlTextareaClassName);
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_FIELD_CHECKBOX, this.formControlCheckboxClassName);
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_CONTROL_FORM_LABEL, this.formControlFormLabelClassName);
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_CONTROL_FORM_LABEL_OPTIONAL, this.formControlFormLabelOptionalClassName);
+            this.applyFollowUpQuestionFormFieldClasses(followUpQuestionsContainer, ClassNames.FORM_CONTROL_SELECT, this.formControlSelectClassName);
+        }
+    }
+    showErrorMessage(errorKey) {
+        let errorElement;
+        let invalidElement;
+        if (errorKey === EmbeddedForm_FormError.EmailBusinessRequired) {
+            errorElement = this.getElement("formErrorEmailBusinessRequired");
+            invalidElement = this.getElement("emailInput");
+        } else if (errorKey === EmbeddedForm_FormError.EmailInvalid) {
+            errorElement = this.getElement("formErrorEmailInvalid");
+            invalidElement = this.getElement("emailInput");
+        }
+        if (errorElement && invalidElement) {
+            errorElement.removeAttribute("hidden");
+            invalidElement.setAttribute("aria-invalid", "true");
+        } else {
+            this.printError("Unknown error key: " + errorKey);
+        }
+    }
+    hideErrorMessages() {
+        var _this_querySelectorAll;
+        const errorElements = (_this_querySelectorAll = this.querySelectorAll("." + EmbeddedForm.FORM_ERROR_CLASS_NAME)) != null ? _this_querySelectorAll : [];
+        for (const errorElement of errorElements){
+            errorElement.setAttribute("hidden", "true");
+        }
+        this.querySelectorAll("[aria-invalid]").forEach((element)=>{
+            element.removeAttribute("aria-invalid");
+        });
+    }
+    /** Either show the `Success` state or redirect to a customer-defined URL. */ doSuccessStep(formData) {
+        // If the form will redirect after success, don't flash the success message, since its
+        // contents might not match the target page.
+        if (!this.successRedirectUrl) {
+            this.setFormState("success");
+        }
+        // Even if the form will redirect after success, first trigger a success event so customers
+        // have a brief chance to run custom logic, such as calling an analytics service.
+        this.triggerEvent("qualifiedFormSuccess", {
+            formData
+        });
+        if (this.successRedirectUrl) {
+            window.location.href = this.successRedirectUrl;
+        }
+    }
+    /* Events */ triggerEvent(eventName, eventData) {
+        const detail = _extends({
+            formExperienceApiName: this.formExperienceApiName
+        }, eventData);
+        const event = new CustomEvent(eventName, {
+            bubbles: true,
+            detail
+        });
+        this.dispatchEvent(event);
+    }
+    constructor(...args){
+        super(...args), this.instanceId = EmbeddedForm.instanceId++, this.handleEmailInputInput = ()=>{
+            if (this.getFormState() === "emailReady") {
+                return;
+            }
+            const followUpQuestionsContainer = this.getElement("followUpQuestionsContainer");
+            if (!followUpQuestionsContainer) {
+                return;
+            }
+            this.setFormState("emailReady");
+            // Clear follow-up questions after CSS transition ends
+            EmbeddedForm_setTimeout(()=>{
+                followUpQuestionsContainer.innerHTML = "";
+            }, 500);
+        }, this.handleFormSubmit = async (event)=>{
+            // Don't do a normal form submission; we submit form data via the WebSocket channel instead.
+            event.preventDefault();
+            const formState = this.getFormState();
+            if (formState === "emailReady") {
+                this.handleFormEmailSubmit(event);
+            } else if (formState === "followUpQuestionsReady") {
+                this.handleFormFollowUpQuestionsSubmit(event);
+            } else {
+                throw new Error("Invalid form state: " + formState);
+            }
+        }, this.handleFormEmailSubmit = async (event)=>{
+            const formData = this.getFormData();
+            if (formData.email == null || this.qualifiedFormApi == null) {
+                return;
+            }
+            this.triggerEvent("qualifiedFormEmailSubmit", {
+                formData
+            });
+            // Read `formData` first, *then* set the form state to `EmailPending`, because the latter
+            // disables form controls and excludes them from `formData`.
+            this.setFormState("emailPending");
+            this.hideErrorMessages();
+            const response = this.qualifiedFormApi.submitEmail(formData.email);
+            if (response.success) {
+                const result = await response.result;
+                if (result.form) {
+                    this.renderFollowUpQuestions(result.form);
+                    this.setFormState("followUpQuestionsReady");
+                } else {
+                    this.doSuccessStep(formData);
+                }
+            } else {
+                // `response.error` is an `EmailError`, which intersects with `FormError`. Cast it to a
+                // `FormError` and let `showErrorMessage()` handle it if the value is not part of `FormError`.
+                this.showErrorMessage(response.error);
+                this.setFormState("emailReady");
+            }
+        }, this.handleFormFollowUpQuestionsSubmit = async (event)=>{
+            const formData = this.getFormData();
+            const followUpQuestionEntries = formData.followUpQuestions;
+            const followUpQuestionValues = followUpQuestionEntries.map((param)=>{
+                let [, value] = param;
+                return value;
+            });
+            if (followUpQuestionValues.length === 0 || this.qualifiedFormApi == null) {
+                return;
+            }
+            // TODO (WEB-1201): Write unit test for `QualifiedEmbeddedForm` -> `onFollowUpQuestionsSubmit`
+            this.triggerEvent("qualifiedFormFollowUpQuestionsSubmit", {
+                formData
+            });
+            // Read `formData` first, *then* set the form state to `FollowUpQuestionsPending`, because the
+            // latter disables form controls and excludes them from `formData`.
+            this.setFormState("followUpQuestionsPending");
+            this.hideErrorMessages();
+            const response = this.qualifiedFormApi.submitFollowUpQuestions(followUpQuestionValues);
+            if (response.success) {
+                this.doSuccessStep(formData);
+            } else if (response.errors) {
+                Object.entries(response.errors).forEach((param)=>{
+                    let [fieldName, error] = param;
+                    const formField = this.querySelector('[data-qualified-form-field-name="' + fieldName + '"]');
+                    const formFieldControl = formField == null ? void 0 : formField.querySelector("input, select");
+                    const formFieldError = formField == null ? void 0 : formField.querySelector(".QualifiedForm-formError--" + error.type);
+                    formFieldControl == null ? void 0 : formFieldControl.setAttribute("aria-invalid", "true");
+                    formFieldError == null ? void 0 : formFieldError.removeAttribute("hidden");
+                });
+                this.setFormState("followUpQuestionsReady");
+            }
+        };
+    }
+}
+EmbeddedForm.instanceId = 0;
+// These HTML attributes are for internal use only. Customers should use the
+// `window.qualified("showForm", ...)` public API instead.
+EmbeddedForm.EMAIL_INPUT_LABEL_TEXT_ATTRIBUTE = "q-email-input-label-text";
+EmbeddedForm.EMAIL_INPUT_PLACEHOLDER_TEXT_ATTRIBUTE = "q-email-input-placeholder-text";
+EmbeddedForm.EMAIL_SUBMIT_BUTTON_INNER_HTML_ATTRIBUTE = "q-email-submit-button-inner-html";
+EmbeddedForm.FORM_CONTROL_CHECKBOX_CLASS_NAME_ATTRIBUTE = "q-checkbox-class-name";
+EmbeddedForm.FORM_CONTROL_FORM_LABEL_CLASS_NAME_ATTRIBUTE = "q-form-label-class-name";
+EmbeddedForm.FORM_CONTROL_FORM_LABEL_OPTIONAL_CLASS_NAME_ATTRIBUTE = "q-form-label-optional-class-name";
+EmbeddedForm.FORM_CONTROL_TEXTAREA_CLASS_NAME_ATTRIBUTE = "q-textarea-class-name";
+EmbeddedForm.FORM_CONTROL_TEXT_INPUT_CLASS_NAME_ATTRIBUTE = "q-text-input-class-name";
+EmbeddedForm.FORM_CONTROL_SELECT_CLASS_NAME_ATTRIBUTE = "q-select-class-name";
+EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE = "q-form-experience-api-name";
+EmbeddedForm.FORM_STATE_ATTRIBUTE = "data-form-state";
+EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME_ATTRIBUTE = "q-submit-button-class-name";
+EmbeddedForm.SUCCESS_MESSAGE_INNER_HTML_ATTRIBUTE = "q-success-message-inner-html";
+EmbeddedForm.SUCCESS_REDIRECT_URL_ATTRIBUTE = "q-success-redirect-url";
+EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE = "q-validate-business-email";
+EmbeddedForm.VERSION_ATTRIBUTE = "q-version";
+// SUIT naming conventions:
+// https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
+EmbeddedForm.FORM_ERROR_CLASS_NAME = "QualifiedForm-formError";
+EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME = "QualifiedForm-submitButton";
+// Attributes that trigger `attributeChangedCallback()` when changed
+EmbeddedForm.observedAttributes = [
+    EmbeddedForm.FORM_CONTROL_CHECKBOX_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.FORM_CONTROL_FORM_LABEL_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.FORM_CONTROL_FORM_LABEL_OPTIONAL_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.FORM_CONTROL_TEXTAREA_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.FORM_CONTROL_TEXT_INPUT_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.FORM_CONTROL_SELECT_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.EMAIL_INPUT_LABEL_TEXT_ATTRIBUTE,
+    EmbeddedForm.EMAIL_INPUT_PLACEHOLDER_TEXT_ATTRIBUTE,
+    EmbeddedForm.EMAIL_SUBMIT_BUTTON_INNER_HTML_ATTRIBUTE,
+    EmbeddedForm.FORM_EXPERIENCE_API_NAME_ATTRIBUTE,
+    EmbeddedForm.SUBMIT_BUTTON_CLASS_NAME_ATTRIBUTE,
+    EmbeddedForm.SUCCESS_MESSAGE_INNER_HTML_ATTRIBUTE,
+    EmbeddedForm.SUCCESS_REDIRECT_URL_ATTRIBUTE,
+    EmbeddedForm.VALIDATE_BUSINESS_EMAIL_ATTRIBUTE,
+    EmbeddedForm.VERSION_ATTRIBUTE,
+    EmbeddedForm.FORM_STATE_ATTRIBUTE
+];
+
+var EmbeddedForm_EmbeddedForm = /* unused export */ undefined;
+var embedded_forms_EmbeddedForm_FormEvent = /* unused export */ undefined;
+var embedded_forms_EmbeddedForm_FormState = /* unused export */ undefined;
+export { EmbeddedForm_EmbeddedForm as EmbeddedForm, createEmbeddedFormClass, embedded_forms_EmbeddedForm_FormEvent as FormEvent, embedded_forms_EmbeddedForm_FormState as FormState };