@4site/engrid-scripts 0.25.2 → 0.25.6

package/dist/a11y.d.ts

@@ -1,9 +1,22 @@
 export declare class A11y {
+    private logger;
+    private observer;
     constructor();
+    private addErrorAlertArea;
     private addGroupRole;
     private addRequired;
     private addLabel;
     private updateFrequencyLabel;
     private setAutoGeneratedAltTags;
+    /**
+     * Observe #engrid for .en__field__error additions and removals, mirroring
+     * text into the per-field .en__field__error__alert live region and toggling
+     * aria-invalid / aria-describedby on the corresponding input. Runs for the
+     * lifetime of the page so async validators (NeverBounce, VGS, server
+     * re-renders) are caught without timing assumptions.
+     */
+    private observeErrorMessages;
+    private moveErrorMessage;
+    private clearErrorMessage;
     private manageErrorListAlertRole;
 }

package/dist/a11y.js

@@ -1,7 +1,11 @@
+import { EngridLogger } from "./logger";
 // a11y means accessibility
 // This Component is supposed to be used as a helper for Aria Attributes & Other Accessibility Features
 export class A11y {
     constructor() {
+        this.logger = new EngridLogger("A11y", "#FFFFFF", "#811212", "👁️‍🗨️");
+        this.observer = null;
+        this.addErrorAlertArea();
         this.addRequired();
         this.addLabel();
         this.addGroupRole();
@@ -9,6 +13,21 @@ export class A11y {
         const ecardImages = document.querySelectorAll('.en__ecarditems__list img');
         this.setAutoGeneratedAltTags(ecardImages);
         this.manageErrorListAlertRole();
+        this.observeErrorMessages();
+    }
+    addErrorAlertArea() {
+        const fieldElements = document.querySelectorAll('.en__field .en__field__element');
+        fieldElements.forEach((fieldElement) => {
+            var _a;
+            if ((_a = fieldElement.nextElementSibling) === null || _a === void 0 ? void 0 : _a.classList.contains('en__field__error__alert'))
+                return;
+            const errorAlert = document.createElement('div');
+            errorAlert.setAttribute('aria-live', 'polite');
+            errorAlert.setAttribute('aria-atomic', 'true');
+            errorAlert.classList.add('en__field__error__alert');
+            errorAlert.id = `en__field__error__alert--${Math.random().toString(36).slice(2, 7)}`;
+            fieldElement.insertAdjacentElement('afterend', errorAlert);
+        });
     }
     addGroupRole() {
         // Add role="group" to all EN Radio fields
@@ -90,10 +109,101 @@ export class A11y {
                 img.alt = altText;
             }
             catch (error) {
-                console.error(`Error processing image: ${img.src}`, error);
+                this.logger.danger(`Error processing image: ${img.src}`, error);
             }
         });
     }
+    /**
+     * Observe #engrid for .en__field__error additions and removals, mirroring
+     * text into the per-field .en__field__error__alert live region and toggling
+     * aria-invalid / aria-describedby on the corresponding input. Runs for the
+     * lifetime of the page so async validators (NeverBounce, VGS, server
+     * re-renders) are caught without timing assumptions.
+     */
+    observeErrorMessages() {
+        var _a;
+        const root = (_a = document.getElementById('engrid')) !== null && _a !== void 0 ? _a : document.body;
+        this.observer = new MutationObserver(records => {
+            for (const record of records) {
+                if (record.type !== 'childList')
+                    continue;
+                record.addedNodes.forEach(node => {
+                    if (node instanceof HTMLElement && node.classList.contains('en__field__error')) {
+                        this.moveErrorMessage(node);
+                    }
+                });
+                record.removedNodes.forEach(node => {
+                    var _a, _b;
+                    if (!(node instanceof HTMLElement))
+                        return;
+                    if (!node.classList.contains('en__field__error'))
+                        return;
+                    // node.parentElement is null after removal; record.target is the
+                    // former parent. Walk up to the enclosing .en__field to be defensive
+                    // against deeper nesting.
+                    const fieldWrapper = (_b = (_a = record.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.en__field');
+                    const alert = fieldWrapper === null || fieldWrapper === void 0 ? void 0 : fieldWrapper.querySelector('.en__field__error__alert');
+                    if (alert)
+                        this.clearErrorMessage(alert);
+                });
+            }
+        });
+        this.observer.observe(root, { childList: true, subtree: true });
+        // Initial sweep for errors rendered server-side or by scripts that ran
+        // before this observer was attached.
+        document.querySelectorAll('.en__field').forEach(field => {
+            const error = field.querySelector('.en__field__error');
+            const alert = field.querySelector('.en__field__error__alert');
+            if (error)
+                this.moveErrorMessage(error);
+            else if (alert)
+                this.clearErrorMessage(alert);
+        });
+    }
+    moveErrorMessage(field) {
+        var _a;
+        if (field.closest('.en__field__error__alert'))
+            return;
+        const fieldWrapper = field.closest('.en__field');
+        if (!fieldWrapper)
+            return;
+        const alertContainer = fieldWrapper.querySelector('.en__field__error__alert');
+        if (!alertContainer)
+            return;
+        alertContainer.textContent = field.textContent;
+        field.classList.add('en__field__error--hidden-by-a11y');
+        const inputElement = fieldWrapper.querySelector('.en__field__element input, .en__field__element select, .en__field__element textarea');
+        if (!inputElement)
+            return;
+        inputElement.setAttribute('aria-invalid', 'true');
+        const describedBy = ((_a = inputElement.getAttribute('aria-describedby')) !== null && _a !== void 0 ? _a : '')
+            .split(/\s+/)
+            .filter(Boolean);
+        if (describedBy.indexOf(alertContainer.id) === -1) {
+            describedBy.push(alertContainer.id);
+        }
+        inputElement.setAttribute('aria-describedby', describedBy.join(' '));
+    }
+    clearErrorMessage(alert) {
+        var _a;
+        alert.textContent = '';
+        const fieldWrapper = alert.closest('.en__field');
+        if (!fieldWrapper)
+            return;
+        const inputElement = fieldWrapper.querySelector('.en__field__element input, .en__field__element select, .en__field__element textarea');
+        if (!inputElement)
+            return;
+        inputElement.removeAttribute('aria-invalid');
+        const remaining = ((_a = inputElement.getAttribute('aria-describedby')) !== null && _a !== void 0 ? _a : '')
+            .split(/\s+/)
+            .filter(id => id && id !== alert.id);
+        if (remaining.length) {
+            inputElement.setAttribute('aria-describedby', remaining.join(' '));
+        }
+        else {
+            inputElement.removeAttribute('aria-describedby');
+        }
+    }
     manageErrorListAlertRole() {
         const errorList = document.querySelector('ul.en__errorList');
         if (!errorList)

package/dist/click-to-expand.js

@@ -6,29 +6,60 @@ export class ClickToExpand {
     constructor() {
         this.clickToExpandWrapper = document.querySelectorAll("div.click-to-expand");
         if (this.clickToExpandWrapper.length) {
-            this.clickToExpandWrapper.forEach((element) => {
-                const content = element.innerHTML;
-                const wrapper_html = '<div class="click-to-expand-cta"></div><div class="click-to-expand-text-wrapper" tabindex="0">' +
-                    content +
-                    "</div>";
-                element.innerHTML = wrapper_html;
-                element.addEventListener("click", (event) => {
-                    if (event) {
-                        if (ENGrid.debug)
-                            console.log("A click-to-expand div was clicked");
-                        element.classList.add("expanded");
+            this.clickToExpandWrapper.forEach((element, index) => {
+                var _a;
+                const textWrapperId = `click-to-expand-text-${index}`;
+                const ctaId = `click-to-expand-cta-${index}`;
+                // Extract screen reader tip from the live DOM
+                const screenReaderTip = element.querySelector(".click-to-expand-screenreader-tip");
+                let ariaLabel = "Show more";
+                if (screenReaderTip) {
+                    const tipText = (_a = screenReaderTip.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+                    if (tipText) {
+                        ariaLabel = `Show more: ${tipText}`;
                     }
+                    screenReaderTip.remove();
+                }
+                // Capture all original child nodes before restructuring
+                const originalChildren = Array.from(element.childNodes);
+                element.innerHTML = "";
+                // Create the text wrapper
+                const textWrapper = document.createElement("div");
+                textWrapper.className = "click-to-expand-text-wrapper";
+                textWrapper.id = textWrapperId;
+                textWrapper.setAttribute("aria-hidden", "true");
+                textWrapper.setAttribute("aria-label", "Expanded content" + (ariaLabel ? `${ariaLabel.replace('Show more', '')}` : ""));
+                textWrapper.setAttribute("tabindex", "-1");
+                originalChildren.forEach((child) => {
+                    textWrapper.appendChild(child);
                 });
+                const cta = document.createElement("div");
+                cta.className = "click-to-expand-cta";
+                cta.id = ctaId;
+                cta.setAttribute("role", "button");
+                cta.setAttribute("tabindex", "0");
+                cta.setAttribute("aria-expanded", "false");
+                cta.setAttribute("aria-controls", textWrapperId);
+                cta.setAttribute("aria-label", ariaLabel);
+                element.appendChild(textWrapper);
+                element.appendChild(cta);
+                const expand = () => {
+                    if (ENGrid.debug) {
+                        console.log("A click-to-expand div was expanded");
+                    }
+                    element.classList.add("expanded");
+                    cta.setAttribute("aria-expanded", "true");
+                    cta.setAttribute("aria-hidden", "true");
+                    textWrapper.setAttribute("aria-hidden", "false");
+                    textWrapper.focus(); // Move focus to revealed content for screen reader announcement
+                };
+                element.addEventListener("click", expand);
                 element.addEventListener("keydown", (event) => {
                     if (event.key === "Enter") {
-                        if (ENGrid.debug)
-                            console.log("A click-to-expand div had the 'Enter' key pressed on it");
-                        element.classList.add("expanded");
+                        expand();
                     }
                     else if (event.key === " ") {
-                        if (ENGrid.debug)
-                            console.log("A click-to-expand div had the 'Spacebar' key pressed on it");
-                        element.classList.add("expanded");
+                        expand();
                         event.preventDefault(); // Prevents the page from scrolling
                         event.stopPropagation(); // Prevent a console error generated by LastPass https://github.com/KillerCodeMonkey/ngx-quill/issues/351#issuecomment-476017960
                     }

package/dist/data-layer.d.ts

@@ -27,4 +27,6 @@ export declare class DataLayer {
     private storeEndOfGiftProcessData;
     private addEndOfGiftProcessEventsToDataLayer;
     private getEndOfGiftProcessData;
+    pushVariable(variableName: string, variableValue?: any): void;
+    pushEvent(eventName: string, eventProperties?: object): void;
 }

package/dist/data-layer.js

@@ -346,4 +346,12 @@ export class DataLayer {
         let eventsData = window.sessionStorage.getItem(this.endOfGiftProcessStorageKey);
         return !eventsData ? [] : JSON.parse(eventsData);
     }
+    pushVariable(variableName, variableValue = "") {
+        this.dataLayer.push({
+            [variableName.toUpperCase()]: variableValue,
+        });
+    }
+    pushEvent(eventName, eventProperties = {}) {
+        this.dataLayer.push(Object.assign({ event: eventName }, eventProperties));
+    }
 }

package/dist/interfaces/options.d.ts

@@ -16,6 +16,7 @@ export interface Options {
     MinAmountMessage?: string;
     MaxAmountMessage?: string;
     UseAmountValidatorFromEN?: boolean;
+    DisableMinMaxLiveValidation?: boolean;
     SkipToMainContentLink?: boolean;
     SrcDefer?: boolean;
     SuppressPurchaseEcard?: boolean;

package/dist/min-max-amount.d.ts

@@ -6,6 +6,7 @@ export declare class MinMaxAmount {
     private maxAmount;
     private minAmountMessage;
     private maxAmountMessage;
+    private disableLiveValidation;
     private enAmountValidator;
     private logger;
     constructor();

package/dist/min-max-amount.js

@@ -10,6 +10,7 @@ export class MinMaxAmount {
         this.maxAmount = (_b = ENGrid.getOption("MaxAmount")) !== null && _b !== void 0 ? _b : 100000;
         this.minAmountMessage = ENGrid.getOption("MinAmountMessage");
         this.maxAmountMessage = ENGrid.getOption("MaxAmountMessage");
+        this.disableLiveValidation = ENGrid.getOption("DisableMinMaxLiveValidation");
         this.enAmountValidator = null;
         this.logger = new EngridLogger("MinMaxAmount", "white", "purple", "🔢");
         if (!this.shouldRun()) {
@@ -17,8 +18,10 @@ export class MinMaxAmount {
             return;
         }
         this.setValidationConfigFromEN();
-        this._amount.onAmountChange.subscribe((s) => window.setTimeout(this.liveValidate.bind(this), 1000) // Wait 1 second for the amount to be updated
-        );
+        if (!this.disableLiveValidation) {
+            this._amount.onAmountChange.subscribe((s) => window.setTimeout(this.liveValidate.bind(this), 1000) // Wait 1 second for the amount to be updated
+            );
+        }
         this._form.onValidate.subscribe(this.enOnValidate.bind(this));
     }
     // Should we run the script?
@@ -36,6 +39,14 @@ export class MinMaxAmount {
                 otherAmount.focus();
             }
             this._form.validate = false;
+            if (this.disableLiveValidation) {
+                this.logger.log("Setting error on enOnValidate: " +
+                    (this.minAmountMessage || "Invalid Amount"));
+                // Defer so EN's own onValidate pass can't overwrite the error
+                window.setTimeout(() => {
+                    ENGrid.setError(".en__field--withOther", this.minAmountMessage || "Invalid Amount");
+                }, 300);
+            }
         }
         else if (this._amount.amount > this.maxAmount) {
             this.logger.log("Amount is greater than max amount: " + this.maxAmount);
@@ -43,11 +54,29 @@ export class MinMaxAmount {
                 otherAmount.focus();
             }
             this._form.validate = false;
+            if (this.disableLiveValidation) {
+                this.logger.log("Setting error on enOnValidate: " +
+                    (this.maxAmountMessage || "Invalid Amount"));
+                // Defer so EN's own onValidate pass can't overwrite the error
+                window.setTimeout(() => {
+                    ENGrid.setError(".en__field--withOther", this.maxAmountMessage || "Invalid Amount");
+                }, 300);
+            }
+        }
+        else if (this.disableLiveValidation) {
+            // Amount is in range — clear any stale error left over from a previous submit
+            ENGrid.removeError(".en__field--withOther");
+        }
+        if (!this.disableLiveValidation) {
+            window.setTimeout(this.liveValidate.bind(this), 300);
         }
-        window.setTimeout(this.liveValidate.bind(this), 300);
     }
     // Disable Submit Button if the amount is not valid
     liveValidate() {
+        if (this.disableLiveValidation) {
+            this.logger.log("disableLiveValidation is set to true. Skipping live validation");
+            return;
+        }
         const amount = ENGrid.cleanAmount(this._amount.amount.toString());
         const activeElement = document.activeElement;
         if (activeElement &&

package/dist/optin-ladder.d.ts

@@ -1,11 +1,13 @@
 export declare class OptInLadder {
     private logger;
     private _form;
+    private _dataLayer;
     constructor();
     private runAsParent;
     private runAsChildRegular;
     private runAsChildThankYou;
     private inIframe;
+    private listenForParentInfo;
     private saveStepToSessionStorage;
     private saveOptInsToSessionStorage;
     private isEmbeddedThankYouPage;
@@ -13,4 +15,5 @@ export declare class OptInLadder {
     private getFirstPageUrl;
     private hidePage;
     private clearSessionStorage;
+    private isFollowupStep;
 }

package/dist/optin-ladder.js

@@ -6,19 +6,23 @@
  * If the page is embedded in an iframe and on a Thank You Page, and the child iFrame is also a Thank You Page, we will look for a sessionStorage that has the current ladder step and the total number of steps.
  * If the current step is less than the total number of steps, we will redirect to the first page. If the current step is equal to the total number of steps, we will show the Thank You Page.
  */
-import { EngridLogger, ENGrid, EnForm } from ".";
+import { EngridLogger, ENGrid, EnForm, DataLayer } from ".";
 export class OptInLadder {
     constructor() {
         this.logger = new EngridLogger("OptInLadder", "lightgreen", "darkgreen", "✔");
         this._form = EnForm.getInstance();
+        this._dataLayer = DataLayer.getInstance();
         if (!this.inIframe()) {
             this.runAsParent();
         }
-        else if (ENGrid.getPageNumber() === 1) {
-            this.runAsChildRegular();
-        }
         else {
-            this.runAsChildThankYou();
+            this.listenForParentInfo();
+            if (ENGrid.getPageNumber() === 1) {
+                this.runAsChildRegular();
+            }
+            else {
+                this.runAsChildThankYou();
+            }
         }
     }
     runAsParent() {
@@ -64,6 +68,17 @@ export class OptInLadder {
                 return;
             }
             placement.appendChild(iframe);
+            iframe.addEventListener("load", () => {
+                var _a;
+                if (iframe.contentWindow) {
+                    iframe.contentWindow.postMessage({
+                        type: "engrid-optin-ladder-parent-info",
+                        pageID: ENGrid.getPageID(),
+                        pageName: ((_a = window === null || window === void 0 ? void 0 : window.pageJson) === null || _a === void 0 ? void 0 : _a.pageName) || "",
+                        pageType: ENGrid.getPageType(),
+                    }, "*");
+                }
+            });
         }
         else {
             // Grab all the checkboxes with the name starting with "supporter.questions"
@@ -83,6 +98,7 @@ export class OptInLadder {
         }
     }
     runAsChildRegular() {
+        var _a;
         if (!this.isEmbeddedThankYouPage()) {
             this.logger.log("Not Embedded on a Thank You Page");
             return;
@@ -106,6 +122,8 @@ export class OptInLadder {
         let totalSteps = optInHeaders.length;
         let currentHeader = null;
         let currentFormBlock = null;
+        let submissionCount = Number(sessionStorage.getItem("engrid.optin-ladder-submission-count")) ||
+            0;
         for (let i = 0; i < optInHeaders.length; i++) {
             const header = optInHeaders[i];
             // Get the optin number from the .optin-ladder-XXXX class
@@ -168,8 +186,23 @@ export class OptInLadder {
         });
         // Save the current step to sessionStorage
         this.saveStepToSessionStorage(currentStep, totalSteps);
+        if (!this.isFollowupStep()) {
+            this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_FIRST_STEP_ID", ((_a = currentHeader === null || currentHeader === void 0 ? void 0 : currentHeader.className.match(/optin-ladder-(\d+)/)) === null || _a === void 0 ? void 0 : _a[1]) || "");
+            this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_FIRST_STEP_NAME", (currentHeader === null || currentHeader === void 0 ? void 0 : currentHeader.innerText.trim()) || "");
+        }
         // On form submit, save the checkbox values to sessionStorage
         this._form.onSubmit.subscribe(() => {
+            var _a, _b;
+            submissionCount++;
+            this._dataLayer.pushEvent("ENGRID_OPTIN_LADDER_SUBMIT", {
+                opt_in_label: (_a = currentHeader === null || currentHeader === void 0 ? void 0 : currentHeader.innerText.trim()) !== null && _a !== void 0 ? _a : "Unknown",
+                opt_in_id: ((_b = currentHeader === null || currentHeader === void 0 ? void 0 : currentHeader.className.match(/optin-ladder-(\d+)/)) === null || _b === void 0 ? void 0 : _b[1]) || "",
+                opt_in_step: currentStep,
+                opt_in_total_steps: totalSteps,
+                submission_count: submissionCount,
+            });
+            this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_SUBMISSION_COUNT", submissionCount);
+            sessionStorage.setItem("engrid.optin-ladder-submission-count", submissionCount.toString());
             this.saveOptInsToSessionStorage("child");
             // Save the current step to sessionStorage
             currentStep++;
@@ -221,6 +254,16 @@ export class OptInLadder {
             return true;
         }
     }
+    listenForParentInfo() {
+        window.addEventListener("message", (event) => {
+            var _a, _b, _c;
+            if (event.data && event.data.type === "engrid-optin-ladder-parent-info") {
+                this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_PARENT_ID", ((_a = event.data) === null || _a === void 0 ? void 0 : _a.pageID) || "");
+                this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_PARENT_NAME", ((_b = event.data) === null || _b === void 0 ? void 0 : _b.pageName) || "");
+                this._dataLayer.pushVariable("ENGRID_OPTIN_LADDER_PARENT_TYPE", ((_c = event.data) === null || _c === void 0 ? void 0 : _c.pageType) || "");
+            }
+        });
+    }
     saveStepToSessionStorage(step, totalSteps) {
         sessionStorage.setItem("engrid.optin-ladder", JSON.stringify({ step, totalSteps }));
         this.logger.log(`Saved step ${step} of ${totalSteps} to sessionStorage`);
@@ -258,7 +301,12 @@ export class OptInLadder {
         const url = new URL(window.location.href);
         const path = url.pathname.split("/");
         path[path.length - 1] = String(page);
-        return url.origin + path.join("/") + (chain ? "?chain" : "");
+        url.pathname = path.join("/");
+        if (chain) {
+            url.searchParams.set("chain", "true");
+        }
+        url.searchParams.set("engrid_optin_ladder_followup", "true");
+        return url.toString();
     }
     getFirstPageUrl() {
         return this.getPageUrl(1, true);
@@ -281,5 +329,12 @@ export class OptInLadder {
         sessionStorage.removeItem("engrid.optin-ladder");
         sessionStorage.removeItem("engrid.optin-ladder-stop");
         sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
+        sessionStorage.removeItem("engrid.optin-ladder-submission-count");
+    }
+    isFollowupStep() {
+        const searchParams = new URLSearchParams(window.location.search);
+        const fromUrl = searchParams.get("engrid_optin_ladder_followup") === "true";
+        const fromStorage = Number(sessionStorage.getItem("engrid.optin-ladder-submission-count")) > 0;
+        return fromUrl || fromStorage;
     }
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.25.2";
+export declare const AppVersion = "0.25.6";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.25.2";
+export const AppVersion = "0.25.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.25.2",
+  "version": "0.25.6",
   "description": "Scripts for the ENGRID Project",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "strongly-typed-events": "^2.0.9"
   },
   "homepage": "https://github.com/4site-interactive-studios/engrid#readme",
-  "gitHead": "9ca2921968167be0cea2cfdbb35a85109e9d46bc",
+  "gitHead": "e538e7e8e084d63b785781e581159f3dee15b8b4",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }