@pendo/agent 2.297.0 → 2.298.0

package/dist/dom.esm.js

@@ -7314,7 +7314,7 @@ function getScreenPosition(element) {
     };
 }
 
-var VERSION = '2.297.0_';
+var VERSION = '2.298.0_';
 
 var decodeURIComponent = _.isFunction(window.decodeURIComponent) ? window.decodeURIComponent : _.identity;
 
@@ -7334,7 +7334,7 @@ function allowKey(storageKey) {
 // Handles cases where localStorage is either not defined or inaccessible
 // by providing a do-nothing implementation
 // NOTE: Recently added a LocalStorage preference over cookies that is implemented
-// `agentStorage` in `browserStorage.js`. These two should be reconciled but for
+// `agentStorage` in `browser-storage.js`. These two should be reconciled but for
 // now this shim was only used from Designer related parts of the Agent so the
 // separation was an easy thing to maintain.
 function wrapStorageMethod(storage, storageMethod, errorReturnValue) {

package/dist/pendo.module.js

@@ -3904,8 +3904,8 @@ let SERVER = '';
 let ASSET_HOST = '';
 let ASSET_PATH = '';
 let DESIGNER_SERVER = '';
-let VERSION = '2.297.0_';
-let PACKAGE_VERSION = '2.297.0';
+let VERSION = '2.298.0_';
+let PACKAGE_VERSION = '2.298.0';
 let LOADER = 'xhr';
 /* eslint-enable agent-eslint-rules/no-gulp-env-references */
 /**
@@ -4336,7 +4336,7 @@ function allowKey(storageKey) {
 // Handles cases where localStorage is either not defined or inaccessible
 // by providing a do-nothing implementation
 // NOTE: Recently added a LocalStorage preference over cookies that is implemented
-// `agentStorage` in `browserStorage.js`. These two should be reconciled but for
+// `agentStorage` in `browser-storage.js`. These two should be reconciled but for
 // now this shim was only used from Designer related parts of the Agent so the
 // separation was an easy thing to maintain.
 function wrapStorageMethod(storage, storageMethod, errorReturnValue) {
@@ -12841,7 +12841,7 @@ function createSendQueue(options, send, guaranteedSend) {
             }
         });
         queue.onTimeout = function () {
-            _PerformanceMonitor.track(`${options.beacon}-gif-failure`);
+            _PerformanceMonitor.count(`${options.beacon}-gif-failure`);
         };
         queue.retryPending = true;
         return queue;
@@ -15351,6 +15351,8 @@ function addInlineStyles(config, id, styles, element = document.head) {
 }
 
 var BuildingBlockTemplates = (function () {
+    var textElementTypes = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'div',
+        'li', 'ul', 'ol', 'strong', 'em', 'b', 'i', 'small', 'label'];
     return {
         buildNodesFromTemplate,
         generateUnreadAnnouncementMiniBubble,
@@ -15482,6 +15484,21 @@ var BuildingBlockTemplates = (function () {
             var notificationBubbleConfig = _.get(homeView, 'attributes.notificationBubble');
             var notificationsObj = _.get(homeView, 'attributes.notifications');
             if (notificationBubbleConfig && notificationsObj) {
+                // Check for dark mode and use dark mode colors if available
+                if (homeView.steps && homeView.steps[0] && homeView.steps[0].isDarkMode) {
+                    var darkModeBackgroundColor = _.get(homeView, 'attributes.darkMode.notificationBubble.background-color');
+                    var darkModeTextColor = _.get(homeView, 'attributes.darkMode.notificationBubble.color');
+                    if (darkModeBackgroundColor || darkModeTextColor) {
+                        // Create a copy of the config with dark mode colors
+                        notificationBubbleConfig = _.clone(notificationBubbleConfig);
+                        if (darkModeBackgroundColor) {
+                            notificationBubbleConfig['background-color'] = darkModeBackgroundColor;
+                        }
+                        if (darkModeTextColor) {
+                            notificationBubbleConfig.color = darkModeTextColor;
+                        }
+                    }
+                }
                 var notificationId;
                 if (_.get(guide, 'attributes.resourceCenter.moduleId') === 'AnnouncementsModule') {
                     notificationId = guide.id;
@@ -15720,6 +15737,7 @@ var BuildingBlockTemplates = (function () {
                 bubbleConfig.dir = 'rtl';
             }
         }
+        var announcementsModule = step.getGuide();
         return _.map(announcementGuides, function (guide, index) {
             var isP1WhatsNewGuide = _.get(guide, 'attributes.type') === 'whatsnew';
             var listItem = JSON.parse(JSON.stringify(templateJson)); // underscore doesn't have deep clone
@@ -15729,15 +15747,54 @@ var BuildingBlockTemplates = (function () {
             if (isP1WhatsNewGuide) {
                 return renderWhatsNew(guide, listItem, bubbleConfig, buildNodeFromJSON);
             }
-            return renderAnnouncement(guide, listItem, bubbleConfig, buildNodeFromJSON);
+            return renderAnnouncement(guide, listItem, bubbleConfig, buildNodeFromJSON, announcementsModule);
         });
     }
-    function renderAnnouncement(guide, listItem, bubbleConfig, buildNodeFromJSON) {
+    function renderAnnouncement(guide, listItem, bubbleConfig, buildNodeFromJSON, announcementsModule) {
         var miniBubble;
         var processedGuide = GuideFactory(guide);
         var announcementStep = guide.steps[0];
         GuideRuntime.runCustomScripts(announcementStep, processedGuide);
         var announcementDomJson = JSON.parse(JSON.stringify(announcementStep.domJson)); // underscore doesn't have deep clone
+        // Apply dark mode color overrides if enabled
+        var darkModeOverrides = _.get(announcementsModule, 'attributes.darkModeColorOverrides');
+        if (darkModeOverrides && darkModeOverrides.enabled) {
+            // Cache frequently accessed objects
+            var announcementStepAttrs = announcementStep.attributes;
+            var announcementStepDarkMode = _.get(announcementStepAttrs, 'darkMode');
+            var announcementsModuleDarkMode = _.get(announcementsModule, 'attributes.darkMode');
+            var darkModeSelector = _.get(announcementsModuleDarkMode, 'selector', '');
+            // Cascade dark mode selector from announcements module to announcement guide
+            if (darkModeSelector && announcementStepAttrs) {
+                if (!announcementStepDarkMode) {
+                    announcementStepAttrs.darkMode = { selector: '' };
+                    announcementStepDarkMode = announcementStepAttrs.darkMode;
+                }
+                announcementStepDarkMode.selector = darkModeSelector;
+            }
+            // Determine if dark mode is active
+            var isDarkModeActive = false;
+            var effectiveSelector = _.get(announcementStepDarkMode, 'selector', '') || darkModeSelector;
+            if (pendo$1.designerEnabled) {
+                // In designer mode, check override values
+                isDarkModeActive = _.get(announcementStepDarkMode, 'override') ||
+                    _.get(announcementsModule, 'steps.0.attributes.darkMode.override', false);
+            }
+            else if (effectiveSelector) {
+                // In client mode, detect based on selector
+                isDarkModeActive = pendo$1.Sizzle(effectiveSelector).length > 0;
+            }
+            if (isDarkModeActive) {
+                // Only apply overrides if we have actual color values to apply
+                var hasValidOverrides = darkModeOverrides.guideBackground ||
+                    darkModeOverrides.textColor ||
+                    darkModeOverrides.linkColor ||
+                    darkModeOverrides.borderColor;
+                if (hasValidOverrides) {
+                    applyDarkModeColorOverrides(announcementDomJson, darkModeOverrides);
+                }
+            }
+        }
         listItem.children = [announcementDomJson];
         if (bubbleConfig) {
             miniBubble = generateUnreadAnnouncementMiniBubble(bubbleConfig);
@@ -15874,6 +15931,41 @@ var BuildingBlockTemplates = (function () {
         };
         listItemRow.children.splice(textContainerIndex + 1, 0, notificationBubble);
     }
+    function applyDarkModeColorOverrides(domJson, overrides) {
+        var props = _.get(domJson, 'props');
+        if (!domJson || !props)
+            return;
+        if (!props.style)
+            props.style = {};
+        var style = props.style;
+        var elementId = _.get(props, 'id', '');
+        if (elementId.indexOf('pendo-guide-container') !== -1) {
+            if (overrides.guideBackground) {
+                style['background-color'] = overrides.guideBackground;
+            }
+            if (overrides.borderColor) {
+                style['border-color'] = overrides.borderColor;
+            }
+        }
+        var isLink = domJson.type === 'a';
+        if (isLink && overrides.linkColor) {
+            style.color = overrides.linkColor;
+        }
+        var textColor = overrides.textColor;
+        if (!isLink && textColor) {
+            var content = _.get(domJson, 'content', '');
+            var hasTextContent = content && typeof content === 'string' && content.trim().length > 0;
+            if (textElementTypes.indexOf(domJson.type) !== -1 || hasTextContent) {
+                style.color = textColor;
+            }
+        }
+        var children = _.get(domJson, 'children', []);
+        if (_.isArray(children)) {
+            _.each(children, function (child) {
+                applyDarkModeColorOverrides(child, overrides);
+            });
+        }
+    }
 })();
 
 var BuildingBlockSvgs = (function () {
@@ -15881,18 +15973,18 @@ var BuildingBlockSvgs = (function () {
         buildSvgNode,
         createProgressCircleSvg
     };
-    function buildSvgNode(widgetId, json) {
+    function buildSvgNode(widgetId, json, isDarkMode) {
         // eslint-disable-next-line default-case
         switch (widgetId) {
             case 'onboardingProgressCircle':
             case 'taskListProgressCircle':
-                return createProgressCircleSvg(json);
+                return createProgressCircleSvg(json, isDarkMode);
         }
     }
-    function createProgressCircleSvg(bbJson) {
+    function createProgressCircleSvg(bbJson, isDarkMode) {
         if (isOldIE(9))
-            return createProgressCircleIEFallback(bbJson);
-        var svgAttributes = bbJson.svgAttributes;
+            return createProgressCircleIEFallback(bbJson, isDarkMode);
+        var svgAttributes = getSvgAttributes(bbJson, isDarkMode);
         var percentComplete = svgAttributes.fillCircle.percentComplete || 0;
         var isComplete = percentComplete >= 100;
         if (isComplete) {
@@ -15936,8 +16028,8 @@ var BuildingBlockSvgs = (function () {
         }
         return svgElement;
     }
-    function createProgressCircleIEFallback(bbJson) {
-        var svgAttributes = bbJson.svgAttributes;
+    function createProgressCircleIEFallback(bbJson, isDarkMode) {
+        var svgAttributes = getSvgAttributes(bbJson, isDarkMode);
         var fillColor = svgAttributes.fillCircle.stroke;
         var backgroundColor = svgAttributes.backgroundCircle.stroke;
         var percentComplete = svgAttributes.fillCircle.percentComplete || 0;
@@ -15963,6 +16055,22 @@ var BuildingBlockSvgs = (function () {
         }
         return fallbackSquare;
     }
+    function getSvgAttributes(bbJson, isDarkMode) {
+        // Always start with the regular SVG attributes
+        var svgAttributes = _.clone(bbJson.svgAttributes);
+        // If dark mode is active and dark mode attributes exist, override only the stroke colors
+        if (isDarkMode && bbJson.darkModeSvgAttributes) {
+            var backgroundCircleStroke = _.get(bbJson.darkModeSvgAttributes, 'backgroundCircle.stroke');
+            if (backgroundCircleStroke) {
+                svgAttributes.backgroundCircle.stroke = backgroundCircleStroke;
+            }
+            var fillCircleStroke = _.get(bbJson.darkModeSvgAttributes, 'fillCircle.stroke');
+            if (fillCircleStroke) {
+                svgAttributes.fillCircle.stroke = fillCircleStroke;
+            }
+        }
+        return svgAttributes;
+    }
 })();
 
 var isLessThan = function (x, y) { return x < y; };
@@ -16187,7 +16295,11 @@ function addStylesToBackdrops(backdrops, step) {
     _.each(originalBackdrop.props, function (propValue, propKey) {
         _.each(backdrops, function (backdrop, index) {
             if (propKey === 'style') {
-                backdrop.css(originalBackdrop.props.style);
+                let nodeStyle = originalBackdrop.props.style;
+                if (step.isDarkMode && originalBackdrop.darkModeProps) {
+                    nodeStyle = Object.assign(Object.assign({}, originalBackdrop.props.style), originalBackdrop.darkModeProps.style);
+                }
+                backdrop.css(nodeStyle);
             }
             else if (propKey === 'class') {
                 backdrop.addClass(propValue);
@@ -18021,7 +18133,7 @@ function buildNodeFromJSON(json, step, guides) {
         }
     }
     if (json.svgWidgetId) {
-        var svg = BuildingBlockSvgs.buildSvgNode(json.svgWidgetId, json);
+        var svg = BuildingBlockSvgs.buildSvgNode(json.svgWidgetId, json, step.isDarkMode);
         svg.appendTo(curNode);
     }
     if (json.actions && json.actions.length) {
@@ -20719,10 +20831,19 @@ function syncColorMode(step, rerender = false) {
     const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
     if (!darkModeSelector)
         return;
-    const isDarkMode = pendo$1.Sizzle(darkModeSelector).length > 0;
-    const darkModeChanged = step.isDarkMode !== isDarkMode;
-    if (darkModeChanged) {
-        step.isDarkMode = isDarkMode;
+    // Determine the target dark mode state
+    let targetDarkMode;
+    if (pendo$1.designerEnabled && _.has(step, 'attributes.darkMode.override')) {
+        // In designer mode, use the override value
+        targetDarkMode = step.attributes.darkMode.override;
+    }
+    else {
+        // In client mode, detect based on selector
+        targetDarkMode = pendo$1.Sizzle(darkModeSelector).length > 0;
+    }
+    // Update and rerender if the state changed
+    if (step.isDarkMode !== targetDarkMode) {
+        step.isDarkMode = targetDarkMode;
         if (rerender) {
             step.hide();
             step.show(step.seenReason);
@@ -26474,15 +26595,15 @@ class NetworkRequestIntercept {
         const $stringLength = 8;
         return 'req_' + Date.now() + '_' + pendo$1.randomString($stringLength);
     }
-    safelyReadResponse(response) {
+    safelyReadBody(config, type) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const contentType = response.headers.get('content-type') || '';
+                const contentType = config.headers.get('content-type') || '';
                 if (contentType.indexOf('application/json') !== -1) {
-                    return yield response.json();
+                    return yield config.json();
                 }
                 else if (contentType.indexOf('text/') !== -1) {
-                    return yield response.text();
+                    return yield config.text();
                 }
                 else {
                     // For binary or unknown content types, just capture metadata
@@ -26490,14 +26611,14 @@ class NetworkRequestIntercept {
                 }
             }
             catch (e) {
-                return '[Unable to read response body]';
+                return `[Unable to read ${type} body]`;
             }
         });
     }
-    extractResponseHeaders(response) {
+    extractConfigHeaders(config) {
         let headers = {};
-        if (response.headers) {
-            const headerEntries = Array.from(response.headers.entries());
+        if (config.headers) {
+            const headerEntries = Array.from(config.headers.entries());
             headers = this.entriesToObject(headerEntries);
         }
         return headers;
@@ -26515,19 +26636,44 @@ class NetworkRequestIntercept {
         });
         return headers;
     }
+    safelyReadRequestBody(request, isRequestObject) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!request)
+                return '';
+            const networkInterceptor = this;
+            if (isRequestObject) {
+                return networkInterceptor.safelyReadBody(request, 'request');
+            }
+            return networkInterceptor.safelySerializeBody(request.body);
+        });
+    }
+    extractRequestHeaders(request, isRequestObject) {
+        const networkInterceptor = this;
+        if (isRequestObject) {
+            return networkInterceptor.extractConfigHeaders(request);
+        }
+        return networkInterceptor.extractHeaders(request.headers);
+    }
     patchFetch() {
         const networkInterceptor = this;
         networkInterceptor._originalFetch = window.fetch;
         window.fetch = function (...args) {
             return __awaiter(this, void 0, void 0, function* () {
-                const [url, config = {}] = args;
+                let [url, config = {}] = args;
+                let isRequestObject = false;
+                if (_.isObject(args[0])) {
+                    isRequestObject = true;
+                    url = args[0].url;
+                    // Clone the Request object to avoid consuming the body
+                    config = args[0].clone();
+                }
                 const transformedUrl = getTransformedUrl(url);
                 const method = config.method || 'GET';
                 const requestId = networkInterceptor.generateRequestId();
                 // Capture request data
                 try {
-                    const headers = networkInterceptor.extractHeaders(config.headers);
-                    const body = networkInterceptor.safelySerializeBody(config.body);
+                    const headers = networkInterceptor.extractRequestHeaders(config, isRequestObject);
+                    const body = yield networkInterceptor.safelyReadRequestBody(config, isRequestObject);
                     _.each(networkInterceptor.callbackFns, ({ request }) => {
                         if (_.isFunction(request))
                             request({ requestId, method, url: transformedUrl, body, headers });
@@ -26546,9 +26692,9 @@ class NetworkRequestIntercept {
                     const responseClone = res.clone();
                     try {
                         // Capture response data
-                        const responseBody = yield networkInterceptor.safelyReadResponse(responseClone);
+                        const responseBody = yield networkInterceptor.safelyReadBody(responseClone, 'response');
                         const { status, statusText } = res;
-                        const headers = networkInterceptor.extractResponseHeaders(res);
+                        const headers = networkInterceptor.extractConfigHeaders(res);
                         _.each(networkInterceptor.callbackFns, ({ response }) => {
                             if (_.isFunction(response)) {
                                 response({
@@ -39200,6 +39346,8 @@ class DOMPrompt {
     constructor(pendo, PluginAPI, id, privacyFilters, inputCssSelectors, submitCssSelectors) {
         this.listeners = [];
         this.latestPromptValue = '';
+        this.isActive = true;
+        this.lastSubmitTime = 0;
         this.dom = pendo.dom;
         this._ = pendo._;
         this.api = PluginAPI;
@@ -39290,9 +39438,15 @@ class DOMPrompt {
         return candidateValue.replace(filtersToUse, 'redacted');
     }
     submit(origVal) {
-        if (!origVal) {
+        if (!origVal || !this.isActive) {
+            return;
+        }
+        // Prevent duplicate submissions within 2ms
+        const now = Date.now();
+        if (now - this.lastSubmitTime < 2) {
             return;
         }
+        this.lastSubmitTime = now;
         const val = this.applyPrivacyFilter(origVal);
         const payload = {
             agentId: this.id,
@@ -39338,6 +39492,22 @@ class DOMPrompt {
     onSubmit(callback) {
         this.listeners.push(callback);
     }
+    suspend() {
+        this.isActive = false;
+    }
+    resume() {
+        this.isActive = true;
+        this._.each(this.inputEls, (inputEl) => {
+            if (inputEl) {
+                inputEl.get();
+            }
+        });
+        this._.each(this.submitEls, (submitEl) => {
+            if (submitEl) {
+                submitEl.get();
+            }
+        });
+    }
     teardown() {
         if (this.promptContainer) {
             this.promptContainer.teardown();
@@ -39426,13 +39596,17 @@ class PromptPlugin {
     reEvaluatePageRules() {
         const currentUrl = getNormalizedUrl();
         const allAgents = this.api.ConfigReader.get(this.configName) || [];
-        const currentlyActiveIds = this._.map(this.prompts, prompt => prompt.id);
-        // Remove agents that no longer match from active tracking
-        this.prompts = this._.filter(this.prompts, prompt => {
+        this._.each(this.prompts, prompt => {
             const agent = this.findAgentById(prompt.id);
-            return agent && this.testPageRule(agent.pageRule, currentUrl, agent.id);
+            const shouldBeActive = agent && this.testPageRule(agent.pageRule, currentUrl, agent.id);
+            if (shouldBeActive) {
+                prompt.resume();
+            }
+            else {
+                prompt.suspend();
+            }
         });
-        // Set up new agents that should now match
+        const currentlyActiveIds = this._.map(this._.filter(this.prompts, prompt => prompt.isActive), prompt => prompt.id);
         this._.each(allAgents, aiAgent => {
             const isCurrentlyActive = this._.contains(currentlyActiveIds, aiAgent.id);
             const shouldBeActive = this.testPageRule(aiAgent.pageRule, currentUrl, aiAgent.id);
@@ -39531,14 +39705,14 @@ class PromptPlugin {
         return selectors;
     }
     sendEvent(promptEvent) {
-        const currentUrl = getNormalizedUrl();
-        const agent = this.findAgentById(promptEvent.agentId);
-        // Block event if page rule doesn't match
-        if (agent && !this.testPageRule(agent.pageRule, currentUrl, agent.id)) {
+        // Block event if the prompt is suspended
+        const prompt = this._.find(this.prompts, p => p.id === promptEvent.agentId);
+        if (prompt && !prompt.isActive) {
             return;
         }
         const event = this._.extend({
-            promptType: 'request'
+            promptType: 'request',
+            agentType: 'prompt'
         }, promptEvent);
         this.api.analytics.collectEvent('prompt', event);
     }