@pendo/agent 2.273.0 → 2.275.0

package/dist/pendo.module.js

@@ -3002,6 +3002,7 @@ var ConfigReader = (function () {
          */
         addOption('observeShadowRoots', [SNIPPET_SRC, PENDO_CONFIG_SRC], false);
         addOption('pendoCore', [PENDO_CONFIG_SRC], true);
+        addOption('pendoGlobalKey', [PENDO_CONFIG_SRC]);
         /**
          * By default, if there are multiple frames on the page that have the Agent installed, they will communicate
          * using `window.postMessage`. If set to `true` the Agent will instead use the browser's Broadcast Channel
@@ -3514,6 +3515,8 @@ var ConfigReader = (function () {
         addOption('forceParentDesigner', [SNIPPET_SRC]); // Only works in non-prod environments for automated testing
         // Embedded Guides
         addOption('enableAllEmbeddedGuideEvents', [PENDO_CONFIG_SRC], false);
+        // Form Validation
+        addOption('formValidation', [PENDO_CONFIG_SRC], false);
     }
     initializeOptions();
     var sourceGetters = {};
@@ -3888,8 +3891,8 @@ var SERVER = '';
 var ASSET_HOST = '';
 var ASSET_PATH = '';
 var DESIGNER_ENV = '';
-var VERSION = '2.273.0_';
-var PACKAGE_VERSION = '2.273.0';
+var VERSION = '2.275.0_';
+var PACKAGE_VERSION = '2.275.0';
 var LOADER = 'xhr';
 /* eslint-enable agent-eslint-rules/no-gulp-env-references */
 /**
@@ -9097,20 +9100,7 @@ var ajax = (function () {
         else {
             request.send();
         }
-        return aliasFailToCatch(deferred.promise);
-    }
-    function aliasFailToCatch(promise) {
-        // Custom code written by pro services uses fail, so we need to support that.
-        var wrappedThen = promise.then;
-        var wrappedCatch = promise['catch'];
-        promise.then = function () {
-            return aliasFailToCatch(wrappedThen.apply(this, arguments));
-        };
-        promise['catch'] = function () {
-            return aliasFailToCatch(wrappedCatch.apply(this, arguments));
-        };
-        promise.fail = promise['catch'];
-        return promise;
+        return deferred.promise;
     }
     function get(url, headers) {
         return ajax({
@@ -13505,6 +13495,9 @@ var isWalkthrough = function (guide) {
         guide.isMultiStep &&
         !(guide.attributes && guide.attributes.type === 'group');
 };
+var isForm = function (guide) {
+    return !!(_.get(guide, 'attributes.form'));
+};
 function isPreviewing() {
     /* global selmo */
     return (typeof selmo !== 'undefined' && !!selmo.isPreviewing);
@@ -13713,10 +13706,10 @@ var PublicEvents = (function () {
     return events;
 })();
 
-function postLoadGuideJs(url, payload, callback) {
-    return ajax.postJSON(url.replace(/\/guides\.js\//, '/guides.json/'), payload)
+function postLoadGuideJs(url, payload, pendo, callback) {
+    return pendo.ajax.postJSON(url.replace(/\/guides\.js\//, '/guides.json/'), payload)
         .then(function (response) {
-        pendo$1.guidesPayload(response.data);
+        pendo.guidesPayload(response.data);
         callback();
     });
 }
@@ -13729,10 +13722,10 @@ var XHRGuideLoader = {
      * @param {Function} done called with no arguments
      * @returns {ayepromise.Promise<undefined>}
      */
-    'load': function (url, done) {
-        return ajax.get(url)
+    'load': function (url, pendo, done) {
+        return pendo.ajax.get(url)
             .then(function (response) {
-            pendo$1.guidesPayload(response.data);
+            pendo.guidesPayload(response.data);
             done();
         });
     },
@@ -21367,7 +21360,7 @@ function setPreviewState(state) {
 function createPreviewBar() {
     var frame = document.createElement('iframe');
     frame.id = pendoPreview$1;
-    var previewModeStartingHeight = '70px';
+    var previewModeStartingHeight = '70px !important';
     setStyles(frame, {
         'border': 'none',
         'display': 'block !important',
@@ -21378,7 +21371,7 @@ function createPreviewBar() {
         'right': 0,
         'top': 0,
         'visibility': 'visible !important',
-        'width': '100%',
+        'width': '100% !important',
         'z-index': 400000
     });
     frame.onload = function () {
@@ -21869,7 +21862,7 @@ function previewGuideRequest(config, id) {
         }
         return guide;
     }).then(function (guide) {
-        if (guide.attributes && guide.attributes.isWatermark) {
+        if (guide && guide.attributes && guide.attributes.isWatermark) {
             guidesArray.push(guide);
         }
         // set pendo.guides at the very end to avoid mutation
@@ -22212,6 +22205,9 @@ var DesignerV2 = (function () {
         if (options.selectionOnly) {
             scriptTagAttributes['selection-only'] = true;
         }
+        if (ConfigReader.get('pendoGlobalKey')) {
+            scriptTagAttributes['data-pendo-global-key'] = ConfigReader.get('pendoGlobalKey');
+        }
         var designerAgentPluginsLoader = ConfigReader.get('designerAgentPluginsLoader');
         var forceNativeDesignerInDoubleAgentScenarios = window.__pendoExtensions && options.forceNativeDesigner;
         var nativeAgentOnly = !window.__pendoExtensions && !_.isFunction(designerAgentPluginsLoader);
@@ -22306,7 +22302,7 @@ var DesignerV2 = (function () {
         if (style) {
             setStyle(iframe, style);
         }
-        iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-top-navigation allow-forms allow-pointer-lock allow-popups');
+        iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-top-navigation allow-forms allow-pointer-lock allow-popups allow-storage-access-by-user-activation');
         iframe.src = src;
         return iframe;
     }
@@ -23304,16 +23300,19 @@ function createCrossFrameChannel(store) {
 }
 
 function onTurbolinksPageLoad(document, onPageLoad) {
-    if (typeof Turbolinks !== 'undefined') {
-        // Special case guide reloading for troublesome Rails component:
-        // https://github.com/rails/turbolinks
-        /* global Turbolinks */
-        var turboLinksPageLoad = Turbolinks && Turbolinks.EVENTS && Turbolinks.EVENTS.LOAD;
-        if (turboLinksPageLoad) {
-            return attachEventInternal(document, turboLinksPageLoad, onPageLoad);
-        }
+    var Turbolinks = window.Turbolinks, Turbo = window.Turbo;
+    var turboLinksPageLoad;
+    // Special case guide reloading for troublesome Rails component:
+    // https://github.com/rails/turbolinks
+    if (Turbolinks) {
+        turboLinksPageLoad = Turbolinks.EVENTS && Turbolinks.EVENTS.LOAD;
     }
-    return function () { };
+    // Updated version of Turbo library
+    // https://turbo.hotwired.dev/reference/events
+    if (Turbo && Turbo.visit) {
+        turboLinksPageLoad = 'turbo:load';
+    }
+    return turboLinksPageLoad ? attachEventInternal(document, turboLinksPageLoad, onPageLoad) : function () { };
 }
 
 var EMPTY_ARRAY_JZB = 'eJwFwIEIAAAAwDDQd3-N1QABFQC5';
@@ -24670,10 +24669,10 @@ var loadGuideJs = function (apiKey, params) {
         delete queryString.jzb;
         url = buildBaseDataUrl('guide.json', apiKey, queryString);
         var payload = _.extend({ 'events': jzb }, jwtOptions);
-        loadingPromise = guideLoaderImpl.post(url, payload, _.noop);
+        loadingPromise = guideLoaderImpl.post(url, payload, pendo$1, _.noop);
     }
     else {
-        loadingPromise = guideLoaderImpl.load(url, _.noop);
+        loadingPromise = guideLoaderImpl.load(url, pendo$1, _.noop);
     }
     return q.all([
         // eslint-disable-next-line dot-notation
@@ -25030,6 +25029,8 @@ function hasLegacyGuides(guides, pendo) {
     if (pendo && pendo.designer)
         return true;
     return _.any(guides, function (guide) {
+        if (isForm(guide))
+            return false;
         return _.any(guide.steps, function (step) {
             return !(step.domUrl || step.domJsonpUrl || step.domJson);
         });
@@ -26726,12 +26727,17 @@ var initialize = makeSafe(function (options) {
 function announceFrameToDesignerPlugin() {
     if (!window.parent || !window.parent.postMessage || typeof window.parent.postMessage != 'function')
         return;
+    var targetOrigin = SingletonMessageHandler.targetOrigin();
+    if (!targetOrigin) {
+        log.warn('Unable to announce frame to designer plugin, targetOrigin is not set. Check if broadcastChannel is enabled and cross origin frames are allowed.');
+        return;
+    }
     window.parent.postMessage({
         'type': 'announce-frame-initialized',
         'destination': 'pendo-designer-agent',
         'source': 'pendo-designer-agent',
         'localStorageRouter': true
-    }, SingletonMessageHandler.targetOrigin());
+    }, targetOrigin);
 }
 function isCallQueueEmpty(callQueue) {
     return (!_.isArray(callQueue) || _.isEmpty(callQueue));
@@ -30567,7 +30573,6 @@ var CloneDetection = /** @class */ (function () {
         this.name = 'CloneDetection';
     }
     CloneDetection.prototype.initialize = function () {
-        var _this = this;
         if (!_.isFunction(window.BroadcastChannel))
             return;
         /**
@@ -30583,32 +30588,39 @@ var CloneDetection = /** @class */ (function () {
         this.tabId = EventTracer.getTabId();
         this.id = randomString(16);
         this.channel = new BroadcastChannel("pendo-clone-detection-".concat(pendo$1.apiKey));
-        this.channel.onmessage = function (msg) {
-            var type = _.get(msg, 'data.type');
-            var tabId = _.get(msg, 'data.tabId');
-            var id = _.get(msg, 'data.id');
-            if (tabId !== _this.tabId)
-                return;
-            switch (type) {
-                case 'pendo-clone-test':
-                    if (id === _this.id)
-                        return;
-                    if (_this.isClonedSession(id)) {
-                        _this.sendMessage('pendo-change-tab-id', {
-                            tabId: tabId,
-                            id: id
-                        });
-                    }
-                    break;
-                case 'pendo-change-tab-id':
-                    if (id !== _this.id)
-                        return;
-                    _this.clearClonedStorage();
-                    break;
-            }
-        };
+        this.channel.addEventListener('message', _.bind(this.onmessage, this));
         this.detectClonedSession(this.id);
-        return this.teardown;
+        return _.bind(this.teardown, this);
+    };
+    CloneDetection.prototype.teardown = function () {
+        this.stopCloneDetectionTimer();
+        this.channel.removeEventListener('message', this.onmessage);
+        this.channel.close();
+        this.channel = null;
+    };
+    CloneDetection.prototype.onmessage = function (msg) {
+        var type = _.get(msg, 'data.type');
+        var tabId = _.get(msg, 'data.tabId');
+        var id = _.get(msg, 'data.id');
+        if (tabId !== this.tabId)
+            return;
+        switch (type) {
+            case 'pendo-clone-test':
+                if (id === this.id)
+                    return;
+                if (this.isClonedSession(id)) {
+                    this.sendMessage('pendo-change-tab-id', {
+                        tabId: tabId,
+                        id: id
+                    });
+                }
+                break;
+            case 'pendo-change-tab-id':
+                if (id !== this.id)
+                    return;
+                this.clearClonedStorage();
+                break;
+        }
     };
     CloneDetection.prototype.detectClonedSession = function (cd) {
         var cdToStore = pendoSessionStorage.getItem(SESSION_CLONE_DETECTION) || '';
@@ -31421,7 +31433,8 @@ var FramesModule = (function () {
         'isFollower': function (state) {
             return !!state.leaderId && state.leaderId !== state.frameId;
         },
-        'isTop': function (state) {
+        'isTop': function (state, getters) {
+            var window = getters.window();
             return state.topId === state.frameId || window == window.top;
         },
         'frameVisibility': function (state) {
@@ -31539,6 +31552,9 @@ var FramesModule = (function () {
         },
         'getMyFrame': function (state) {
             return state.frames[state.frameId];
+        },
+        'window': function () {
+            return window;
         }
     };
     return {
@@ -32937,6 +32953,9 @@ var DesignerConnect = (function () {
             pluginAPI.Events.appUnloaded.off(unloadListener);
             unloadListener = undefined;
         }
+        if (tempLaunchToken) {
+            tempLaunchToken = undefined;
+        }
     }
     function onConnectMessage(data, msg) {
         if (globalPendo.isSendingEvents()) {
@@ -35090,7 +35109,7 @@ var P1GuidePlugin = (function () {
     // Adds pendo credits to the guide unless disabled
     function Credits() {
         var step = this;
-        if (!step.hideCredits && !step.domJson && !step.domJsonpUrl) {
+        if (!step.hideCredits && !step.domJson && !step.domJsonpUrl && !isForm(step.guide)) {
             step.after('render', function () {
                 _addCredits(step.guideElement[0]);
             });
@@ -35138,7 +35157,7 @@ var Branding = (function () {
         link.href = 'https://www.pendo.io/pendo-free/nps?utm_source=pendo_app&utm_medium=branded-nps&utm_campaign=free-branded-nps';
         link.target = '_blank';
         var img = document.createElement('img');
-        img.setAttribute('src', getAssetHost() + '/img/nps-branding.png');
+        img.setAttribute('src', pluginApi.getAssetUrl('img/nps-branding.png'));
         link.appendChild(img);
         link.style.display = 'inline-block';
         var div = document.createElement('div');
@@ -35973,7 +35992,7 @@ var FrustrationEvent = (function () {
      */
     function addFrustrationType(event, type) {
         var _a = event.frustrationTypes, frustrationTypes = _a === void 0 ? [] : _a;
-        if (!frustrationTypes.includes(type)) {
+        if (!_.contains(frustrationTypes, type)) {
             frustrationTypes.push(type);
             event.frustrationTypes = frustrationTypes;
         }
@@ -36018,7 +36037,7 @@ var FrustrationEvent = (function () {
     }
     function handleClickEvent(eventData, browserEvent) {
         var isHyperlinked = browserEvent.target && browserEvent.target.tagName === 'A' && browserEvent.target.hasAttribute('href');
-        var isDeadClickEligibleTag = browserEvent.target && !deadClickIneligibleTags.includes(browserEvent.target.tagName);
+        var isDeadClickEligibleTag = browserEvent.target && !_.contains(deadClickIneligibleTags, browserEvent.target.tagName);
         if (canQueueDeadClicks && !hasHighlightedText && isDeadClickEligibleTag && !isHyperlinked) {
             queueDeadClick(eventData);
         }
@@ -36170,7 +36189,7 @@ var FrustrationEvent = (function () {
         if (eventData.type === 'submit' || eventData.type === 'change') {
             suspendDeadClickQueue();
         }
-        var isDeadClickIneligibleTag = _.has(browserEvent, 'target') && deadClickIneligibleTags.includes(browserEvent.target.tagName);
+        var isDeadClickIneligibleTag = _.has(browserEvent, 'target') && _.contains(deadClickIneligibleTags, browserEvent.target.tagName);
         if (eventData.type === 'focus' && isDeadClickIneligibleTag) {
             suspendDeadClickQueue();
         }
@@ -36910,7 +36929,10 @@ var WebAnalytics = /** @class */ (function () {
         var referrerValue = calculateReferrerValue({ referrer: referrer, currentHost: currentHost });
         // Check if this is a self-referral.
         if (referrerValue !== 'self') {
-            var query = this.api.util.parseUrl(url).query;
+            var parsedUrl = this.api.util.parseUrl(url);
+            if (!parsedUrl)
+                return {};
+            var query = parsedUrl.query;
             // It is not a self referral, therefore we should calculate the channel and track the visit
             var source = query.utm_source;
             var medium = query.utm_medium;
@@ -36931,6 +36953,9 @@ var WebAnalytics = /** @class */ (function () {
                 if (referrer && this.api.ConfigReader.get(CAPTURE_REFERRER_CONFIG_KEY)) {
                     utm.referrer = referrer;
                 }
+                else if (referrerValue !== 'direct') {
+                    utm.referrer = referrerValue;
+                }
                 return utm;
             }
         }
@@ -36992,6 +37017,524 @@ var WebAnalytics = /** @class */ (function () {
 }());
 var WebAnalytics$1 = new WebAnalytics();
 
+var buildFormStepBehaviors = function () {
+    if (!this.attributes) {
+        log.info('buildFormStepBehaviors called with invalid context');
+        return {};
+    }
+    var step = this;
+    var originalShow = step.show;
+    var originalHide = step.hide;
+    // Override the show method to respect validation state
+    var show = function (reason) {
+        if (step.attributes.validationHidden) {
+            return false;
+        }
+        return originalShow.call(step, reason);
+    };
+    // Override the hide method to track validation state
+    var hide = function (options) {
+        if (options && options.validationHidden) {
+            step.attributes.validationHidden = true;
+        }
+        return originalHide.call(step, options);
+    };
+    return { show: show, hide: hide };
+};
+
+var domJsonBase = {
+    'children': [],
+    'props': {
+        'class': '_pendo-step-container',
+        'data-layout': 'tooltipBlank',
+        'id': 'pendo-base'
+    },
+    'type': 'div'
+};
+var domJsonCss = {
+    'css': [],
+    'props': {
+        'scoped': 'scoped',
+        'type': 'text/css'
+    },
+    'type': 'style'
+};
+var layoutContainer = {
+    'children': [],
+    'props': {
+        'class': '_pendo-step-container-size',
+        'data-relative-alignment': true,
+        'data-vertical-alignment': 'Relative to Element',
+        'id': 'pendo-g-validation-tooltip-container',
+        'style': {
+            'display': 'block',
+            'width': '300px',
+            'z-index': 300000
+        }
+    },
+    'type': 'div'
+};
+var guideStepContainer = {
+    'children': [],
+    'props': {
+        'class': '_pendo-step-container-styles',
+        'id': 'pendo-guide-container',
+        'role': 'dialog',
+        'data-caret-enabled': true,
+        'data-caret-height': '15px',
+        'data-caret-width': '15px',
+        'style': {
+            'background-color': 'rgba(255, 255, 255, 1)',
+            'border': '1px solid #BBBBBB',
+            'border-radius': '5px',
+            'padding': '8px 12px',
+            'box-shadow': '0px 0px 10px 0px rgba(190, 190, 190, 0.5)'
+        },
+        'tabindex': -1
+    },
+    'type': 'div'
+};
+var textContainer = {
+    'children': [],
+    'props': {
+        'class': '_pendo-text-paragraph',
+        'style': {}
+    },
+    'type': 'div'
+};
+function createRuleBlock(id, text) {
+    var textChild = createTextBlock(id, text);
+    return {
+        'props': {
+            'id': "rule-".concat(id),
+            'class': 'text-row',
+            'style': { 'display': 'flex', 'align-items': 'center' }
+        },
+        'children': [textChild],
+        'type': 'div'
+    };
+}
+function createTextBlock(id, content) {
+    return {
+        'content': content,
+        'props': {
+            'id': "text-".concat(id),
+            'class': '_pendo-text-plain',
+            'style': { 'color': 'gray', 'margin': 0 }
+        },
+        'type': 'p'
+    };
+}
+function createIcon(svgString) {
+    var parser = new DOMParser();
+    var svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+    var svgElement = svgDoc.documentElement;
+    // Create a wrapper div with a margin right of 5px
+    var wrapperDiv = document.createElement('div');
+    wrapperDiv.style.marginRight = '5px';
+    wrapperDiv.appendChild(svgElement);
+    return wrapperDiv;
+}
+var defaultIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" \n    width=\"10\" height=\"10\" fill=\"none\"\n    stroke=\"gray\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \n    stroke-width=\"2\" viewBox=\"0 0 10 10\">\n    <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\"/>\n</svg>\n";
+var validIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" \n    width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" \n    fill=\"none\" stroke=\"green\" stroke-width=\"2\" \n    stroke-linecap=\"round\" stroke-linejoin=\"round\" \n    class=\"feather feather-check\">\n    <polyline points=\"2 5 4 7 8 2\"></polyline>\n</svg>\n";
+var invalidIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" \n    width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" \n    fill=\"none\" stroke=\"red\" stroke-width=\"2\" \n    stroke-linecap=\"round\" stroke-linejoin=\"round\" \n    class=\"feather feather-x\">\n    <line x1=\"2\" y1=\"2\" x2=\"8\" y2=\"8\"/>\n    <line x1=\"8\" y1=\"2\" x2=\"2\" y2=\"8\"/>\n</svg>\n";
+
+var regexPatterns = {
+    'emailRegex': /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+    'phoneRegex': /^(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
+    'urlRegex': /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/
+};
+var dateFormats = {
+    'MM-DD-YYYY': /^(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])-(19|20)\d\d$/,
+    'DD-MM-YYYY': /^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-(19|20)\d\d$/,
+    'MM/DD/YYYY': /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d\d$/,
+    'DD/MM/YYYY': /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d\d$/,
+    'YYYY-MM-DD': /^(19|20)\d\d-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
+};
+var validators = {
+    'email': function (value) {
+        return regexPatterns.emailRegex.test(value);
+    },
+    'phone': function (value) {
+        return regexPatterns.phoneRegex.test(value);
+    },
+    'date': function (value, options) {
+        if (options === void 0) { options = {}; }
+        var regex = dateFormats[options.format] || dateFormats['MM/DD/YYYY'];
+        return regex.test(value);
+    },
+    'url': function (value) {
+        return regexPatterns.urlRegex.test(value);
+    },
+    'number': function (value, options) {
+        if (options === void 0) { options = {}; }
+        if (value === '')
+            return false;
+        var min = options.min, max = options.max, allowDecimal = options.allowDecimal;
+        var hasMin = hasValue(min);
+        var hasMax = hasValue(max);
+        if (hasMin)
+            min = Number(min);
+        if (hasMax)
+            max = Number(max);
+        var num = Number(value);
+        if (isNaN(num))
+            return false;
+        if (hasMin && num < min)
+            return false;
+        if (hasMax && num > max)
+            return false;
+        if (!allowDecimal && num % 1 !== 0)
+            return false; // eslint-disable-line
+        return true;
+    },
+    'characterLength': function (value, options) {
+        if (options === void 0) { options = {}; }
+        var min = options.min, max = options.max;
+        var hasMin = hasValue(min);
+        var hasMax = hasValue(max);
+        if (hasMin)
+            min = Number(min);
+        if (hasMax)
+            max = Number(max);
+        if (hasMin && value.length < min)
+            return false;
+        if (hasMax && value.length > max)
+            return false; // eslint-disable-line
+        return true;
+    }
+};
+function hasValue(value) {
+    return value !== undefined && value !== null && value !== '';
+}
+
+var FormValidation = (function () {
+    var globalPendo;
+    var pluginApi;
+    var validationGuides = [];
+    var debouncedValidate;
+    var activeStep;
+    var activeField;
+    var activeFieldIsValid = null;
+    var designerModeCheckInterval;
+    return {
+        'name': 'FormValidation',
+        validationGuides: validationGuides,
+        debouncedValidate: debouncedValidate,
+        initialize: initialize,
+        teardown: teardown,
+        appendValidationStyles: appendValidationStyles,
+        getActiveStep: getActiveStep,
+        setActiveStep: setActiveStep,
+        setActiveField: setActiveField,
+        getActiveField: getActiveField,
+        getActiveFieldIsValid: getActiveFieldIsValid,
+        setActiveFieldIsValid: setActiveFieldIsValid,
+        getValidationGuides: getValidationGuides,
+        setValidationGuides: setValidationGuides,
+        initializeFormValidation: initializeFormValidation,
+        clearAllValidationGuides: clearAllValidationGuides,
+        extractValidationGuides: extractValidationGuides,
+        applyFormBehaviors: applyFormBehaviors,
+        checkValidationFieldVisibility: checkValidationFieldVisibility,
+        hideValidationTooltip: hideValidationTooltip,
+        focusField: focusField,
+        blurField: blurField,
+        findFieldByElement: findFieldByElement,
+        validateInput: validateInput,
+        validateField: validateField,
+        getRuleText: getRuleText,
+        setValidationStyle: setValidationStyle
+    };
+    function initialize(pendo, PluginAPI) {
+        var hasFormValidation = PluginAPI.ConfigReader.get('formValidation');
+        if (!hasFormValidation) {
+            return;
+        }
+        globalPendo = pendo;
+        pluginApi = PluginAPI;
+        debouncedValidate = _.debounce(validateInput, 100);
+        pluginApi.Events.on('deliverablesLoaded', clearAllValidationGuides);
+        pluginApi.Events.on('guideLoopStopped', hideValidationTooltip);
+        pluginApi.Events.on('guideListChanged', initializeFormValidation);
+        pluginApi.GuideLoop.addUpdatePhase(checkValidationFieldVisibility);
+        pluginApi.guides.addProcessor(extractValidationGuides);
+        var isInDesignerMode = !!(globalPendo === null || globalPendo === void 0 ? void 0 : globalPendo.designer);
+        // Set up an interval to check for designer mode
+        designerModeCheckInterval = setInterval(function () {
+            if (isInDesignerMode) {
+                teardown();
+                clearInterval(designerModeCheckInterval);
+                designerModeCheckInterval = null;
+                return;
+            }
+        }, 1000);
+        pendo.attachEvent(document, 'focusin', focusField);
+        pendo.attachEvent(document, 'focusout', blurField);
+        pendo.attachEvent(document, 'input', debouncedValidate);
+    }
+    function teardown() {
+        if (designerModeCheckInterval) {
+            clearInterval(designerModeCheckInterval);
+            designerModeCheckInterval = null;
+        }
+        pluginApi.Events.off('deliverablesLoaded', clearAllValidationGuides);
+        pluginApi.Events.off('guideLoopStopped', hideValidationTooltip);
+        pluginApi.Events.off('guideListChanged', initializeFormValidation);
+        pluginApi.GuideLoop.removeUpdatePhase(checkValidationFieldVisibility);
+        pluginApi.guides.removeProcessor(extractValidationGuides);
+        globalPendo.detachEvent(document, 'focusin', focusField);
+        globalPendo.detachEvent(document, 'focusout', blurField);
+        globalPendo.detachEvent(document, 'input', debouncedValidate);
+        debouncedValidate.cancel();
+        validationGuides = [];
+        activeStep = null;
+        activeField = null;
+        activeFieldIsValid = null;
+    }
+    function clearAllValidationGuides() {
+        pluginApi.guides.removeDisplayableGuides('validationGuides');
+        validationGuides = [];
+    }
+    function hideValidationTooltip() {
+        globalPendo.detachEvent(document, 'focusin', focusField);
+        if (activeField) {
+            activeField = null;
+            activeFieldIsValid = null;
+        }
+        if (activeStep) {
+            activeStep.hide({ 'validationHidden': true });
+            activeStep = null;
+        }
+    }
+    function initializeFormValidation() {
+        appendValidationStyles();
+        pluginApi.guides.registerDisplayableGuides('validationGuides', validationGuides);
+        applyFormBehaviors();
+    }
+    function applyFormBehaviors() {
+        _.map(validationGuides, function (guide) {
+            _.map(guide.steps, function (step) {
+                var stepBehaviors = buildFormStepBehaviors.call(step);
+                Object.assign(step, stepBehaviors);
+            });
+        });
+    }
+    function checkValidationFieldVisibility() {
+        var _a;
+        // If there is an active field/step, check if the associated element still exists
+        if (activeField) {
+            var element = globalPendo.Sizzle(activeStep.elementPathRule)[0];
+            // If element doesn't exist, dismiss the validation
+            if (!element || !globalPendo.isElementVisible(element)) {
+                activeField = null;
+                activeFieldIsValid = null;
+                activeStep.hide({ 'validationHidden': true });
+                activeStep = null;
+            }
+        }
+        // If focusin event listener was detached when guide loop stopped, attach it again
+        var docData = DomData$1.get(document);
+        var bubbleFocusEvents = ((_a = docData.bubbleEvents) === null || _a === void 0 ? void 0 : _a.focusin) || [];
+        var isFocusFieldAttached = bubbleFocusEvents.some(function (e) { return e.handler === focusField; });
+        if (!isFocusFieldAttached) {
+            globalPendo.attachEvent(document, 'focusin', focusField);
+        }
+    }
+    function extractValidationGuides(guide) {
+        if (guide.launchMethod === 'form') {
+            if (!_.some(validationGuides, function (_a) {
+                var id = _a.id;
+                return id === guide.id;
+            })) {
+                validationGuides.push(guide);
+            }
+        }
+        return true;
+    }
+    function appendValidationStyles() {
+        var style = document.createElement('style');
+        style.innerHTML = "\n            input[data-pendo-field-valid=\"false\"] {\n                border-color: red !important;\n                outline-color: red !important;\n            }\n        ";
+        document.head.appendChild(style);
+    }
+    function focusField(event) {
+        var _a, _b;
+        var target = event.target;
+        if (target.tagName === 'INPUT') {
+            var matchingField = findFieldByElement(target);
+            if (matchingField && activeStep) {
+                activeStep.attributes.validationHidden = false;
+                // if there is no domJson on the step,
+                // this is the first time the user is focusing on the field
+                // so add the text and icon
+                if (!activeStep.domJson) {
+                    appendDomJson();
+                }
+                activeStep.show('api');
+                var ruleElement = document.getElementById("rule-".concat((_a = activeField === null || activeField === void 0 ? void 0 : activeField.rules[0]) === null || _a === void 0 ? void 0 : _a.id));
+                if (ruleElement && ((_b = activeField === null || activeField === void 0 ? void 0 : activeField.rules[0]) === null || _b === void 0 ? void 0 : _b.type)) {
+                    // add the icon for the rule
+                    var icon = activeField.isValid === null ? createIcon(defaultIcon)
+                        : activeFieldIsValid ? createIcon(validIcon)
+                            : createIcon(invalidIcon);
+                    ruleElement.insertBefore(icon, ruleElement.firstChild);
+                }
+                if (matchingField.value !== '') {
+                    validateField(target);
+                }
+            }
+        }
+    }
+    function blurField(event) {
+        var target = event.target;
+        if (activeField && activeStep) {
+            var targetMatchesActiveField = globalPendo.Sizzle.matchesSelector(target, activeStep === null || activeStep === void 0 ? void 0 : activeStep.elementPathRule);
+            if (targetMatchesActiveField) {
+                setValidationStyle(target, activeFieldIsValid);
+            }
+            activeStep.hide({ 'validationHidden': true });
+            if (activeField.isValid === null && activeFieldIsValid === false) {
+                var ruleTextBlock = getRuleText();
+                ruleTextBlock.props.style.color = 'red';
+            }
+            activeField.isValid = activeFieldIsValid;
+            activeField = null;
+            activeStep = null;
+            activeFieldIsValid = null;
+        }
+    }
+    function findFieldByElement(element) {
+        var _a;
+        if (activeStep) {
+            activeStep.hide({ 'validationHidden': true });
+        }
+        activeStep = null;
+        activeField = null;
+        activeFieldIsValid = null;
+        // loop through fields to find a field that matches the event target
+        // to determine if there is a validation for that target
+        for (var _i = 0, validationGuides_1 = validationGuides; _i < validationGuides_1.length; _i++) {
+            var guide = validationGuides_1[_i];
+            var matchingStep = _.find(guide.steps, function (step) {
+                return globalPendo.Sizzle.matchesSelector(element, step.elementPathRule);
+            });
+            if (matchingStep) {
+                activeStep = matchingStep;
+                activeField = (_a = matchingStep.attributes) === null || _a === void 0 ? void 0 : _a.field;
+                activeFieldIsValid = activeField.isValid;
+                return activeField;
+            }
+        }
+        return null;
+    }
+    function appendDomJson() {
+        var rule = activeField.rules[0];
+        // Create text blocks
+        var helperContent = createTextBlock("context-".concat(activeField.id), activeField.context);
+        var ruleContent = (rule === null || rule === void 0 ? void 0 : rule.type) ? createRuleBlock(rule.id, rule.ruleText) : null;
+        // Filter out null values and check if we have any content
+        var textBlocks = [helperContent, ruleContent].filter(Boolean);
+        if (textBlocks.length === 0) {
+            return;
+        }
+        // compile the basic json building blocks
+        var stepBase = deepCopy(domJsonBase);
+        var stepCss = deepCopy(domJsonCss);
+        var stepLayoutContainer = deepCopy(layoutContainer);
+        var stepContainer = deepCopy(guideStepContainer);
+        var stepTextContainer = deepCopy(textContainer);
+        stepBase.children.push(stepCss, stepLayoutContainer);
+        stepLayoutContainer.children.push(stepContainer);
+        stepContainer.children.push(stepTextContainer);
+        stepTextContainer.children = textBlocks;
+        activeStep.domJson = stepBase;
+    }
+    function validateInput(event) {
+        var target = event.target;
+        // check if the user is typing in current active field
+        var targetMatchesActiveField = globalPendo.Sizzle.matchesSelector(target, activeStep === null || activeStep === void 0 ? void 0 : activeStep.elementPathRule);
+        if (targetMatchesActiveField) {
+            validateField(target);
+        }
+        else {
+            // if not, find the field that matches the event target
+            var matchingField = findFieldByElement(target);
+            if (matchingField) {
+                activeFieldIsValid = matchingField.isValid;
+                validateField(target);
+            }
+        }
+    }
+    function validateField(target) {
+        var rule = activeField === null || activeField === void 0 ? void 0 : activeField.rules[0];
+        if (!rule) {
+            return;
+        }
+        var validator = validators[rule.type];
+        if (!validator) {
+            return;
+        }
+        var isValid = validator(target.value, rule.options);
+        activeFieldIsValid = !!isValid;
+        var ruleTextBlock = getRuleText();
+        // don't show invalid if the user hasn't finished typing
+        var newIcon;
+        if (activeField.isValid === null) {
+            ruleTextBlock.props.style.color = isValid ? 'green' : 'gray';
+            newIcon = isValid ? createIcon(validIcon) : createIcon(defaultIcon);
+        }
+        else {
+            ruleTextBlock.props.style.color = isValid ? 'green' : 'red';
+            newIcon = isValid ? createIcon(validIcon) : createIcon(invalidIcon);
+            setValidationStyle(target, isValid);
+        }
+        activeStep.hide({ 'stepHidden': true });
+        activeStep.show('api');
+        var ruleElement = document.getElementById("rule-".concat(activeField.rules[0].id));
+        if (ruleElement) {
+            ruleElement.insertBefore(newIcon, ruleElement.firstChild);
+        }
+    }
+    function getRuleText() {
+        var ruleId = activeField.rules[0].id;
+        var ruleTextId = "text-".concat(ruleId);
+        var ruleTextBlock = findBlockById(ruleTextId, activeStep.domJson);
+        return ruleTextBlock;
+    }
+    function setValidationStyle(target, isValid) {
+        if (isValid === false) {
+            target.setAttribute('data-pendo-field-valid', false);
+        }
+        else {
+            target.removeAttribute('data-pendo-field-valid');
+        }
+    }
+    function getActiveStep() {
+        return activeStep;
+    }
+    function setActiveStep(step) {
+        activeStep = step;
+    }
+    function getActiveField() {
+        return activeField;
+    }
+    function setActiveField(field) {
+        activeField = field;
+    }
+    function getActiveFieldIsValid() {
+        return activeFieldIsValid;
+    }
+    function setActiveFieldIsValid(isValid) {
+        activeFieldIsValid = isValid;
+    }
+    function getValidationGuides() {
+        return validationGuides;
+    }
+    function setValidationGuides(guides) {
+        validationGuides = guides;
+    }
+})();
+
 function registerBuiltInPlugins() {
     registerPlugin(IFrameMonitor);
     registerPlugin(DOMActivation);
@@ -37008,6 +37551,7 @@ function registerBuiltInPlugins() {
     registerPlugin(SessionManager$1);
     registerPlugin(SegmentFlags$1);
     registerPlugin(WebAnalytics$1);
+    registerPlugin(FormValidation);
 }
 
 /*
@@ -43586,6 +44130,7 @@ var Feedback = (function () {
         var iframeContainer = globalPendo.dom(document.createElement('iframe'));
         iframeContainer.css(iframeContainerStyles);
         iframeContainer.attr('id', elemIds.feedbackIframe);
+        iframeContainer.attr('title', 'Feedback');
         iframeContainer.attr('src', getWidgetInitialSource());
         return iframeContainer;
     }
@@ -43836,14 +44381,20 @@ const testableMethods$1 = {
   MutationObserver: ["constructor"]
 };
 const untaintedBasePrototype$1 = {};
-const isAngularZonePresent$1 = () => {
-  return !!globalThis.Zone;
-};
+function angularZoneUnpatchedAlternative$1(key) {
+  var _a2, _b;
+  const angularUnpatchedVersionSymbol = (_b = (_a2 = globalThis == null ? void 0 : globalThis.Zone) == null ? void 0 : _a2.__symbol__) == null ? void 0 : _b.call(_a2, key);
+  if (angularUnpatchedVersionSymbol && globalThis[angularUnpatchedVersionSymbol]) {
+    return globalThis[angularUnpatchedVersionSymbol];
+  } else {
+    return void 0;
+  }
+}
 function getUntaintedPrototype$1(key) {
   if (untaintedBasePrototype$1[key])
     return untaintedBasePrototype$1[key];
-  const defaultObj = globalThis[key];
-  const defaultPrototype = defaultObj.prototype;
+  const candidate = angularZoneUnpatchedAlternative$1(key) || globalThis[key];
+  const defaultPrototype = candidate.prototype;
   const accessorNames = key in testableAccessors$1 ? testableAccessors$1[key] : void 0;
   const isUntaintedAccessors = Boolean(
     accessorNames && // @ts-expect-error 2345
@@ -43866,15 +44417,15 @@ function getUntaintedPrototype$1(key) {
       }
     )
   );
-  if (isUntaintedAccessors && isUntaintedMethods && !isAngularZonePresent$1()) {
-    untaintedBasePrototype$1[key] = defaultObj.prototype;
-    return defaultObj.prototype;
+  if (isUntaintedAccessors && isUntaintedMethods) {
+    untaintedBasePrototype$1[key] = candidate.prototype;
+    return candidate.prototype;
   }
   try {
     const iframeEl = document.createElement("iframe");
     document.body.appendChild(iframeEl);
     const win = iframeEl.contentWindow;
-    if (!win) return defaultObj.prototype;
+    if (!win) return candidate.prototype;
     const untaintedObject = win[key].prototype;
     document.body.removeChild(iframeEl);
     if (!untaintedObject) return defaultPrototype;
@@ -44040,6 +44591,7 @@ function stringifyStylesheet(s2) {
   }
 }
 function stringifyRule(rule, sheetHref) {
+  var _a2;
   if (isCSSImportRule(rule)) {
     let importStringified;
     try {
@@ -44050,7 +44602,7 @@ function stringifyRule(rule, sheetHref) {
     } catch (error) {
       importStringified = rule.cssText;
     }
-    if (rule.styleSheet.href) {
+    if ((_a2 = rule == null ? void 0 : rule.styleSheet) == null ? void 0 : _a2.href) {
       return absolutifyURLs(importStringified, rule.styleSheet.href);
     }
     return importStringified;
@@ -45256,14 +45808,20 @@ const testableMethods = {
   MutationObserver: ["constructor"]
 };
 const untaintedBasePrototype = {};
-const isAngularZonePresent = () => {
-  return !!globalThis.Zone;
-};
+function angularZoneUnpatchedAlternative(key) {
+  var _a2, _b;
+  const angularUnpatchedVersionSymbol = (_b = (_a2 = globalThis == null ? void 0 : globalThis.Zone) == null ? void 0 : _a2.__symbol__) == null ? void 0 : _b.call(_a2, key);
+  if (angularUnpatchedVersionSymbol && globalThis[angularUnpatchedVersionSymbol]) {
+    return globalThis[angularUnpatchedVersionSymbol];
+  } else {
+    return void 0;
+  }
+}
 function getUntaintedPrototype(key) {
   if (untaintedBasePrototype[key])
     return untaintedBasePrototype[key];
-  const defaultObj = globalThis[key];
-  const defaultPrototype = defaultObj.prototype;
+  const candidate = angularZoneUnpatchedAlternative(key) || globalThis[key];
+  const defaultPrototype = candidate.prototype;
   const accessorNames = key in testableAccessors ? testableAccessors[key] : void 0;
   const isUntaintedAccessors = Boolean(
     accessorNames && // @ts-expect-error 2345
@@ -45286,15 +45844,15 @@ function getUntaintedPrototype(key) {
       }
     )
   );
-  if (isUntaintedAccessors && isUntaintedMethods && !isAngularZonePresent()) {
-    untaintedBasePrototype[key] = defaultObj.prototype;
-    return defaultObj.prototype;
+  if (isUntaintedAccessors && isUntaintedMethods) {
+    untaintedBasePrototype[key] = candidate.prototype;
+    return candidate.prototype;
   }
   try {
     const iframeEl = document.createElement("iframe");
     document.body.appendChild(iframeEl);
     const win = iframeEl.contentWindow;
-    if (!win) return defaultObj.prototype;
+    if (!win) return candidate.prototype;
     const untaintedObject = win[key].prototype;
     document.body.removeChild(iframeEl);
     if (!untaintedObject) return defaultPrototype;
@@ -46164,7 +46722,7 @@ class MutationBuffer {
               }
               const old = this.unattachedDoc.createElement("span");
               if (m.oldValue) {
-                old.setAttribute("style", m.oldValue);
+                old.style.cssText = m.oldValue;
               }
               for (const pname of Array.from(target.style)) {
                 const newValue = target.style.getPropertyValue(pname);
@@ -49460,16 +50018,18 @@ SessionRecorder.prototype.initialize = function (pendo, PluginAPI) {
     // but ONLY for replay being enabled - all other values should be taken from the backend
     if (pendo._.isBoolean(snippetOverrideValue)) {
         isSessionReplayEnabled = snippetOverrideValue;
+        if (!isSessionReplayEnabled) {
+            this.api.log.info('Session Replay disabled via the snippet config');
+        }
     }
     else {
         isSessionReplayEnabled = this.config.enabled;
     }
     if (!isSessionReplayEnabled) {
-        this.logStopReason('RECORDING_DISABLED');
         return;
     }
     if (configReader.get('excludeNonGuideAnalytics')) {
-        this.logStopReason('ANALYTICS_DISABLED');
+        this.api.log.info('Session Replay is disabled because excludeNonGuideAnalytics is enabled');
         return;
     }
     var sessionIdKey = this.sessionIdKey = "".concat(SESSION_RECORDING_ID, ".").concat(pendo.apiKey);