@4site/engrid-scripts 0.19.1

package/dist/mobile-cta.js

@@ -0,0 +1,71 @@
+// This component adds a floating CTA button to the page, which can be used to scroll to the top of the form
+import { ENGrid } from ".";
+export class MobileCTA {
+    constructor() {
+        var _a, _b, _c;
+        // Initialize options with the MobileCTA value or false
+        this.options = (_a = ENGrid.getOption("MobileCTA")) !== null && _a !== void 0 ? _a : false;
+        this.buttonLabel = "";
+        // Return early if the options object is falsy or the current page type is not in the options.pages array
+        if (!this.options ||
+            !((_b = this.options.pages) === null || _b === void 0 ? void 0 : _b.includes(ENGrid.getPageType())) ||
+            ENGrid.getPageNumber() !== 1)
+            return;
+        // Set the button label using the options.label or the default value "Take Action"
+        this.buttonLabel = (_c = this.options.label) !== null && _c !== void 0 ? _c : "Take Action";
+        this.renderButton();
+        this.addEventListeners();
+    }
+    renderButton() {
+        const engridDiv = document.querySelector("#engrid");
+        const formBlock = document.querySelector(".body-main .en__component--widgetblock:first-child, .en__component--formblock");
+        // Return early if engridDiv or formBlock are not found
+        if (!engridDiv || !formBlock)
+            return;
+        const buttonContainer = document.createElement("div");
+        const button = document.createElement("button");
+        // Add necessary classes and set the initial display style for the button container
+        buttonContainer.classList.add("engrid-mobile-cta-container");
+        buttonContainer.style.display = "none";
+        button.classList.add("primary");
+        // Set the button's innerHTML and add a click event listener
+        button.innerHTML = this.buttonLabel;
+        button.addEventListener("click", () => {
+            formBlock.scrollIntoView({ behavior: "smooth" });
+        });
+        // Append the button to the button container and the container to engridDiv
+        buttonContainer.appendChild(button);
+        engridDiv.appendChild(buttonContainer);
+    }
+    addEventListeners() {
+        const bodyMain = document.querySelector(".body-main");
+        // Return early if formBlock is not found
+        if (!bodyMain)
+            return;
+        // Define a function to toggle the button visibility based on the bodyMain position
+        const toggleButton = () => {
+            if (bodyMain.getBoundingClientRect().top <= window.innerHeight - 100) {
+                this.hideButton();
+            }
+            else {
+                this.showButton();
+            }
+        };
+        // Add event listeners for load, resize, and scroll events to toggle the button visibility
+        window.addEventListener("load", toggleButton);
+        window.addEventListener("resize", toggleButton);
+        window.addEventListener("scroll", toggleButton);
+    }
+    // Hide the button by setting the container's display style to "none"
+    hideButton() {
+        const buttonContainer = document.querySelector(".engrid-mobile-cta-container");
+        if (buttonContainer)
+            buttonContainer.style.display = "none";
+    }
+    // Show the button by setting the container's display style to "block"
+    showButton() {
+        const buttonContainer = document.querySelector(".engrid-mobile-cta-container");
+        if (buttonContainer)
+            buttonContainer.style.display = "block";
+    }
+}

package/dist/modal.d.ts

@@ -0,0 +1,19 @@
+interface ModalOptions {
+    onClickOutside: "close" | "bounce";
+    addCloseButton: boolean;
+    closeButtonLabel: string;
+}
+export declare abstract class Modal {
+    modalContent: NodeListOf<Element> | HTMLElement | String;
+    private modal;
+    private defaultOptions;
+    private options;
+    protected constructor(options: ModalOptions);
+    private createModal;
+    private addEventListeners;
+    private focusTrapHandler;
+    open(): void;
+    close(): void;
+    getModalContent(): NodeListOf<Element> | HTMLElement | String;
+}
+export {};

package/dist/modal.js

@@ -0,0 +1,129 @@
+import { ENGrid } from "./engrid";
+export class Modal {
+    constructor(options) {
+        this.modal = null;
+        this.defaultOptions = {
+            onClickOutside: "close",
+            addCloseButton: false,
+            closeButtonLabel: "Okay!",
+        };
+        this.focusTrapHandler = (e) => {
+            const modalElement = this.modal;
+            const focusableElements = [
+                ...modalElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+            ];
+            const firstFocusable = focusableElements[0];
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+            const isTabPressed = e.key === "Tab";
+            if (!isTabPressed) {
+                return;
+            }
+            if (e.shiftKey) {
+                if (document.activeElement === firstFocusable) {
+                    e.preventDefault();
+                    lastFocusable.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastFocusable) {
+                    e.preventDefault();
+                    firstFocusable.focus();
+                }
+            }
+        };
+        this.options = Object.assign(Object.assign({}, this.defaultOptions), options);
+        this.modalContent = this.getModalContent();
+        this.createModal();
+    }
+    createModal() {
+        var _a;
+        this.modal = document.createElement("div");
+        this.modal.classList.add("engrid-modal", "modal--hidden");
+        this.modal.setAttribute("aria-hidden", "true");
+        this.modal.setAttribute("role", "dialog");
+        this.modal.setAttribute("aria-modal", "true");
+        this.modal.setAttribute("tabindex", "-1");
+        this.modal.innerHTML = `
+      <div class="engrid-modal__overlay" tabindex="-1">
+        <div class="engrid-modal__container" tabindex="0">
+          <div class="engrid-modal__close" role="button" tabindex="0" aria-label="Close">
+            X
+          </div>
+          <div class="engrid-modal__body"></div>
+        </div>
+      </div>
+    `;
+        (_a = document.getElementById("engrid")) === null || _a === void 0 ? void 0 : _a.appendChild(this.modal);
+        const modalBody = this.modal.querySelector(".engrid-modal__body");
+        if (this.modalContent instanceof NodeList) {
+            this.modalContent.forEach((content) => {
+                modalBody === null || modalBody === void 0 ? void 0 : modalBody.appendChild(content);
+            });
+        }
+        else if (typeof this.modalContent === "string") {
+            modalBody === null || modalBody === void 0 ? void 0 : modalBody.insertAdjacentHTML("beforeend", this.modalContent);
+        }
+        else {
+            modalBody === null || modalBody === void 0 ? void 0 : modalBody.appendChild(this.modalContent);
+        }
+        if (this.options.addCloseButton) {
+            const button = document.createElement("button");
+            button.classList.add("engrid-modal__button");
+            button.textContent = this.options.closeButtonLabel;
+            button.addEventListener("click", () => {
+                this.close();
+            });
+            modalBody === null || modalBody === void 0 ? void 0 : modalBody.appendChild(button);
+        }
+        this.addEventListeners();
+    }
+    addEventListeners() {
+        var _a, _b, _c, _d, _e;
+        // Close event on top X
+        (_b = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelector(".engrid-modal__close")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", () => {
+            this.close();
+        });
+        // Bounce scale when clicking outside of modal
+        (_d = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector(".engrid-modal__overlay")) === null || _d === void 0 ? void 0 : _d.addEventListener("click", (event) => {
+            if (event.target === event.currentTarget) {
+                if (this.options.onClickOutside === "close") {
+                    this.close();
+                }
+                else if (this.options.onClickOutside === "bounce") {
+                    const modal = document.querySelector(".engrid-modal");
+                    if (modal) {
+                        modal.classList.remove("engrid-modal--scale");
+                        void modal.clientWidth;
+                        modal.classList.add("engrid-modal--scale");
+                    }
+                }
+            }
+        });
+        // Close on "modal__close" click
+        const closeEls = (_e = this.modal) === null || _e === void 0 ? void 0 : _e.querySelectorAll(".modal__close");
+        closeEls === null || closeEls === void 0 ? void 0 : closeEls.forEach((el) => {
+            el.addEventListener("click", () => {
+                this.close();
+            });
+        });
+    }
+    open() {
+        var _a, _b, _c, _d;
+        ENGrid.setBodyData("has-lightbox", "true");
+        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.classList.remove("modal--hidden");
+        (_b = this.modal) === null || _b === void 0 ? void 0 : _b.removeAttribute("aria-hidden");
+        const container = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector(".engrid-modal__container");
+        container === null || container === void 0 ? void 0 : container.focus({ preventScroll: true });
+        (_d = this.modal) === null || _d === void 0 ? void 0 : _d.addEventListener("keydown", this.focusTrapHandler);
+    }
+    close() {
+        var _a, _b, _c;
+        ENGrid.setBodyData("has-lightbox", false);
+        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.classList.add("modal--hidden");
+        (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
+        (_c = this.modal) === null || _c === void 0 ? void 0 : _c.removeEventListener("keydown", this.focusTrapHandler);
+    }
+    getModalContent() {
+        return "<h1>Default Modal Content</h1>";
+    }
+}

package/dist/neverbounce.d.ts

@@ -0,0 +1,23 @@
+import { EnForm } from "./events";
+export declare class NeverBounce {
+    private apiKey;
+    dateField: string | null;
+    statusField: string | null;
+    dateFormat: string | undefined;
+    form: EnForm;
+    emailField: HTMLInputElement | null;
+    emailWrapper: HTMLDivElement;
+    nbDate: HTMLInputElement | null;
+    nbStatus: HTMLInputElement | null;
+    private logger;
+    private shouldRun;
+    private nbLoaded;
+    constructor(apiKey: string, dateField: string | null, statusField: string | null, dateFormat: string | undefined);
+    private init;
+    private clearStatus;
+    private deleteENFieldError;
+    private setEmailStatus;
+    private insertAfter;
+    private wrap;
+    private validate;
+}

package/dist/neverbounce.js

@@ -0,0 +1,244 @@
+import { ENGrid, EngridLogger } from ".";
+import { EnForm } from "./events";
+export class NeverBounce {
+    constructor(apiKey, dateField = null, statusField = null, dateFormat) {
+        this.apiKey = apiKey;
+        this.dateField = dateField;
+        this.statusField = statusField;
+        this.dateFormat = dateFormat;
+        this.form = EnForm.getInstance();
+        this.emailField = null;
+        this.emailWrapper = document.querySelector(".en__field--emailAddress");
+        this.nbDate = null;
+        this.nbStatus = null;
+        this.logger = new EngridLogger("NeverBounce", "#039bc4", "#dfdfdf", "📧");
+        this.shouldRun = true;
+        this.nbLoaded = false;
+        this.emailField = document.getElementById("en__field_supporter_emailAddress");
+        window._NBSettings = {
+            apiKey: this.apiKey,
+            autoFieldHookup: false,
+            inputLatency: 1500,
+            displayPoweredBy: false,
+            loadingMessage: "Validating...",
+            softRejectMessage: "Invalid email",
+            acceptedMessage: "Email validated!",
+            feedback: false,
+        };
+        ENGrid.loadJS("https://cdn.neverbounce.com/widget/dist/NeverBounce.js");
+        if (this.emailField) {
+            if (this.emailField.value) {
+                this.logger.log("E-mail Field Found");
+                this.shouldRun = false;
+            }
+            this.emailField.addEventListener("change", (e) => {
+                var _a;
+                if (!this.nbLoaded) {
+                    this.shouldRun = true;
+                    this.init();
+                    if ((_a = this.emailField) === null || _a === void 0 ? void 0 : _a.value) {
+                        setTimeout(function () {
+                            window._nb.fields
+                                .get(document.querySelector("[data-nb-id]"))[0]
+                                .forceUpdate();
+                        }, 100);
+                    }
+                }
+            });
+            window.setTimeout(() => {
+                if (this.emailField && this.emailField.value) {
+                    this.logger.log("E-mail Filled Programatically");
+                    this.shouldRun = false;
+                }
+                this.init();
+            }, 1000);
+        }
+        this.form.onValidate.subscribe(this.validate.bind(this));
+    }
+    init() {
+        if (!this.shouldRun) {
+            this.logger.log("Should Not Run");
+            return;
+        }
+        if (this.nbLoaded) {
+            this.logger.log("Already Loaded");
+            return;
+        }
+        this.logger.log("Init Function");
+        if (this.dateField && document.getElementsByName(this.dateField).length)
+            this.nbDate = document.querySelector("[name='" + this.dateField + "']");
+        if (this.statusField && document.getElementsByName(this.statusField).length)
+            this.nbStatus = document.querySelector("[name='" + this.statusField + "']");
+        if (!this.emailField) {
+            this.logger.log("E-mail Field Not Found");
+            return;
+        }
+        this.wrap(this.emailField, document.createElement("div"));
+        const parentNode = this.emailField.parentNode;
+        parentNode.id = "nb-wrapper";
+        // Define HTML structure for a Custom NB Message and insert it after Email field
+        const nbCustomMessageHTML = document.createElement("div");
+        nbCustomMessageHTML.innerHTML =
+            '<div id="nb-feedback" class="en__field__error nb-hidden">Enter a valid email.</div>';
+        this.insertAfter(nbCustomMessageHTML, this.emailField);
+        const NBClass = this;
+        document.body.addEventListener("nb:registered", function (event) {
+            const field = document.querySelector('[data-nb-id="' + event.detail.id + '"]');
+            field.addEventListener("nb:loading", function (e) {
+                ENGrid.disableSubmit("Validating Your Email");
+            });
+            // Never Bounce: Do work when input changes or when API responds with an error
+            field.addEventListener("nb:clear", function (e) {
+                NBClass.setEmailStatus("clear");
+                ENGrid.enableSubmit();
+                if (NBClass.nbDate)
+                    NBClass.nbDate.value = "";
+                if (NBClass.nbStatus)
+                    NBClass.nbStatus.value = "";
+            });
+            // Never Bounce: Do work when results have an input that does not look like an email (i.e. missing @ or no .com/.net/etc...)
+            field.addEventListener("nb:soft-result", function (e) {
+                NBClass.setEmailStatus("soft-result");
+                if (NBClass.nbDate)
+                    NBClass.nbDate.value = "";
+                if (NBClass.nbStatus)
+                    NBClass.nbStatus.value = "";
+                ENGrid.enableSubmit();
+            });
+            // Never Bounce: When results have been received
+            field.addEventListener("nb:result", function (e) {
+                if (e.detail.result.is(window._nb.settings.getAcceptedStatusCodes())) {
+                    NBClass.setEmailStatus("valid");
+                    if (NBClass.nbDate)
+                        NBClass.nbDate.value = ENGrid.formatDate(new Date(), NBClass.dateFormat);
+                    if (NBClass.nbStatus)
+                        NBClass.nbStatus.value = (e).detail.result.response.result;
+                }
+                else {
+                    NBClass.setEmailStatus("invalid");
+                    if (NBClass.nbDate)
+                        NBClass.nbDate.value = "";
+                    if (NBClass.nbStatus)
+                        NBClass.nbStatus.value = "";
+                }
+                ENGrid.enableSubmit();
+            });
+        });
+        // Never Bounce: Register field with the widget and broadcast nb:registration event
+        window._nb.fields.registerListener(NBClass.emailField, true);
+        this.nbLoaded = true;
+    }
+    clearStatus() {
+        if (!this.emailField) {
+            this.logger.log("E-mail Field Not Found");
+            return;
+        }
+        this.emailField.classList.remove("rm-error");
+        // Search page for the NB Wrapper div and set as variable
+        const nb_email_field_wrapper = (document.getElementById("nb-wrapper"));
+        // Search page for the NB Feedback div and set as variable
+        const nb_email_feedback_field = (document.getElementById("nb-feedback"));
+        nb_email_field_wrapper.className = "";
+        nb_email_feedback_field.className = "en__field__error nb-hidden";
+        nb_email_feedback_field.innerHTML = "";
+        this.emailWrapper.classList.remove("en__field--validationFailed");
+    }
+    deleteENFieldError() {
+        const errorField = (document.querySelector(".en__field--emailAddress>div.en__field__error"));
+        if (errorField)
+            errorField.remove();
+    }
+    setEmailStatus(status) {
+        this.logger.log("Status:", status);
+        if (!this.emailField) {
+            this.logger.log("E-mail Field Not Found");
+            return;
+        }
+        // Search page for the NB Wrapper div and set as variable
+        const nb_email_field_wrapper = (document.getElementById("nb-wrapper"));
+        // Search page for the NB Feedback div and set as variable
+        let nb_email_feedback_field = (document.getElementById("nb-feedback"));
+        // classes to add or remove based on neverbounce results
+        const nb_email_field_wrapper_success = "nb-success";
+        const nb_email_field_wrapper_error = "nb-error";
+        const nb_email_feedback_hidden = "nb-hidden";
+        const nb_email_feedback_loading = "nb-loading";
+        const nb_email_field_error = "rm-error";
+        if (!nb_email_feedback_field) {
+            const nbWrapperDiv = nb_email_field_wrapper.querySelector("div");
+            if (nbWrapperDiv)
+                nbWrapperDiv.innerHTML =
+                    '<div id="nb-feedback" class="en__field__error nb-hidden">Enter a valid email.</div>';
+            nb_email_feedback_field = (document.getElementById("nb-feedback"));
+        }
+        if (status == "valid") {
+            this.clearStatus();
+        }
+        else {
+            nb_email_field_wrapper.classList.remove(nb_email_field_wrapper_success);
+            nb_email_field_wrapper.classList.add(nb_email_field_wrapper_error);
+            switch (status) {
+                case "required": // special case status that we added ourselves -- doesn't come from NB
+                    this.deleteENFieldError();
+                    nb_email_feedback_field.innerHTML = "A valid email is required";
+                    nb_email_feedback_field.classList.remove(nb_email_feedback_loading);
+                    nb_email_feedback_field.classList.remove(nb_email_feedback_hidden);
+                    this.emailField.classList.add(nb_email_field_error);
+                    break;
+                case "soft-result":
+                    if (this.emailField.value) {
+                        this.deleteENFieldError();
+                        nb_email_feedback_field.innerHTML = "Invalid email";
+                        nb_email_feedback_field.classList.remove(nb_email_feedback_hidden);
+                        this.emailField.classList.add(nb_email_field_error);
+                    }
+                    else {
+                        this.clearStatus();
+                    }
+                    break;
+                case "invalid":
+                    this.deleteENFieldError();
+                    nb_email_feedback_field.innerHTML = "Invalid email";
+                    nb_email_feedback_field.classList.remove(nb_email_feedback_loading);
+                    nb_email_feedback_field.classList.remove(nb_email_feedback_hidden);
+                    this.emailField.classList.add(nb_email_field_error);
+                    break;
+                case "loading":
+                case "clear":
+                default:
+                    this.clearStatus();
+                    break;
+            }
+        }
+    }
+    // Function to insert HTML after a DIV
+    insertAfter(el, referenceNode) {
+        var _a;
+        (_a = referenceNode === null || referenceNode === void 0 ? void 0 : referenceNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(el, referenceNode.nextSibling);
+    }
+    //  to Wrap HTML around a DIV
+    wrap(el, wrapper) {
+        var _a;
+        (_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, el);
+        wrapper.appendChild(el);
+    }
+    validate() {
+        var _a;
+        if (!this.form.validate)
+            return;
+        const nbResult = ENGrid.getFieldValue("nb-result");
+        if (!this.emailField || !this.shouldRun || !this.nbLoaded || !nbResult) {
+            this.logger.log("validate(): Should Not Run. Returning true.");
+            return;
+        }
+        if (this.nbStatus) {
+            this.nbStatus.value = nbResult;
+        }
+        if (!["catchall", "unknown", "valid"].includes(nbResult)) {
+            this.setEmailStatus("required");
+            (_a = this.emailField) === null || _a === void 0 ? void 0 : _a.focus();
+            this.logger.log("NB-Result:", ENGrid.getFieldValue("nb-result"));
+            this.form.validate = false;
+        }
+    }
+}

package/dist/other-amount.d.ts

@@ -0,0 +1,6 @@
+export declare class OtherAmount {
+    private logger;
+    private _amount;
+    constructor();
+    private setRadioInput;
+}

package/dist/other-amount.js

@@ -0,0 +1,70 @@
+// This class automatically select other radio input when an amount is entered into it.
+import { EngridLogger, ENGrid, DonationAmount } from ".";
+export class OtherAmount {
+    constructor() {
+        this.logger = new EngridLogger("OtherAmount", "green", "black", "💰");
+        this._amount = DonationAmount.getInstance();
+        "focusin input".split(" ").forEach((e) => {
+            var _a;
+            // We're attaching this event to the body because sometimes the other amount input is not in the DOM yet and comes via AJAX.
+            (_a = document.querySelector("body")) === null || _a === void 0 ? void 0 : _a.addEventListener(e, (event) => {
+                const target = event.target;
+                if (target.classList.contains("en__field__input--other")) {
+                    this.logger.log("Other Amount Field Focused");
+                    this.setRadioInput();
+                }
+            });
+        });
+        const otherAmountField = document.querySelector("[name='transaction.donationAmt.other'");
+        if (otherAmountField) {
+            otherAmountField.setAttribute("inputmode", "decimal");
+            // ADD THE MISSING LABEL FOR IMPROVED ACCESSABILITY
+            otherAmountField.setAttribute("aria-label", "Enter your custom donation amount");
+            otherAmountField.setAttribute("autocomplete", "off");
+            otherAmountField.setAttribute("data-lpignore", "true");
+            otherAmountField.addEventListener("change", (e) => {
+                const target = e.target;
+                const amount = target.value;
+                const cleanAmount = ENGrid.cleanAmount(amount);
+                if (amount !== cleanAmount.toString()) {
+                    this.logger.log(`Other Amount Field Changed: ${amount} => ${cleanAmount}`);
+                    if ("dataLayer" in window) {
+                        window.dataLayer.push({
+                            event: "otherAmountTransformed",
+                            otherAmountTransformation: `${amount} => ${cleanAmount}`,
+                        });
+                    }
+                    target.value =
+                        cleanAmount % 1 != 0
+                            ? cleanAmount.toFixed(2)
+                            : cleanAmount.toString();
+                }
+            });
+            // On blur, if the amount is 0, select the previous amount
+            otherAmountField.addEventListener("blur", (e) => {
+                const target = e.target;
+                const amount = target.value;
+                const cleanAmount = ENGrid.cleanAmount(amount);
+                if (cleanAmount === 0) {
+                    this.logger.log("Other Amount Field Blurred with 0 amount");
+                    // Get Live Amount
+                    const liveAmount = this._amount.amount;
+                    if (liveAmount > 0) {
+                        this._amount.setAmount(liveAmount, false);
+                    }
+                }
+            });
+        }
+    }
+    setRadioInput() {
+        const target = document.querySelector(".en__field--donationAmt .en__field__input--other");
+        if (target && target.parentNode && target.parentNode.parentNode) {
+            const targetWrapper = target.parentNode;
+            targetWrapper.classList.remove("en__field__item--hidden");
+            if (targetWrapper.parentNode) {
+                const lastRadioInput = targetWrapper.parentNode.querySelector(".en__field__item:nth-last-child(2) input");
+                lastRadioInput.checked = !0;
+            }
+        }
+    }
+}

package/dist/page-background.d.ts

@@ -0,0 +1,7 @@
+export declare class PageBackground {
+    private pageBackground;
+    constructor();
+    private setDataAttributes;
+    private hasVideoBackground;
+    private hasImageBackground;
+}

package/dist/page-background.js

@@ -0,0 +1,55 @@
+import { ENGrid } from "./engrid";
+export class PageBackground {
+    constructor() {
+        // @TODO: Change page-backgroundImage to page-background
+        this.pageBackground = document.querySelector(".page-backgroundImage");
+        // Finds any <img> added to the "backgroundImage" ENGRid section and sets it as the "--engrid__page-backgroundImage_url" CSS Custom Property
+        if (this.pageBackground) {
+            const pageBackgroundImg = this.pageBackground.querySelector("img");
+            let pageBackgroundImgDataSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.getAttribute("data-src");
+            let pageBackgroundImgSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.src;
+            if (this.pageBackground && pageBackgroundImgDataSrc) {
+                if (ENGrid.debug)
+                    console.log("A background image set in the page was found with a data-src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
+                pageBackgroundImgDataSrc = "url('" + pageBackgroundImgDataSrc + "')";
+                this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
+            }
+            else if (this.pageBackground && pageBackgroundImgSrc) {
+                if (ENGrid.debug)
+                    console.log("A background image set in the page was found with a src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgSrc);
+                pageBackgroundImgSrc = "url('" + pageBackgroundImgSrc + "')";
+                this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgSrc);
+            }
+            else if (pageBackgroundImg) {
+                if (ENGrid.debug)
+                    console.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
+            }
+            else {
+                if (ENGrid.debug)
+                    console.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
+            }
+        }
+        else {
+            if (ENGrid.debug)
+                console.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
+        }
+        this.setDataAttributes();
+    }
+    setDataAttributes() {
+        if (this.hasVideoBackground())
+            return ENGrid.setBodyData("page-background", "video");
+        if (this.hasImageBackground())
+            return ENGrid.setBodyData("page-background", "image");
+        return ENGrid.setBodyData("page-background", "empty");
+    }
+    hasVideoBackground() {
+        if (this.pageBackground) {
+            return !!this.pageBackground.querySelector("video");
+        }
+    }
+    hasImageBackground() {
+        if (this.pageBackground) {
+            return (!this.hasVideoBackground() && !!this.pageBackground.querySelector("img"));
+        }
+    }
+}

package/dist/plaid.d.ts

@@ -0,0 +1,6 @@
+export declare class Plaid {
+    private logger;
+    private _form;
+    constructor();
+    submit(): void;
+}