@pendo/agent 2.306.1 → 2.307.0

package/dist/dom.esm.js

@@ -7360,7 +7360,7 @@ function getScreenPosition(element) {
     };
 }
 
-var VERSION = '2.306.1_';
+var VERSION = '2.307.0_';
 
 var decodeURIComponent = _.isFunction(window.decodeURIComponent) ? window.decodeURIComponent : _.identity;
 

package/dist/pendo.module.js

@@ -3905,8 +3905,8 @@ let SERVER = '';
 let ASSET_HOST = '';
 let ASSET_PATH = '';
 let DESIGNER_SERVER = '';
-let VERSION = '2.306.1_';
-let PACKAGE_VERSION = '2.306.1';
+let VERSION = '2.307.0_';
+let PACKAGE_VERSION = '2.307.0';
 let LOADER = 'xhr';
 /* eslint-enable agent-eslint-rules/no-gulp-env-references */
 /**
@@ -13920,7 +13920,12 @@ var whenLoadedCall = function (callback, win) {
         callback();
     }
     else {
-        return attachEventInternal(win, 'load', callback);
+        return attachEventInternal(win, 'load', function () {
+            // some apps fire "fake" load events APP-139170 (https://github.com/rtCamp/rt-optimizer/blob/main/rt-scripts-optimizer.php#L173)
+            if (document.readyState === 'complete') {
+                callback();
+            }
+        });
     }
     return _.noop;
 };
@@ -15495,29 +15500,55 @@ function addInlineStyles(config, id, styles, element = document.head) {
     return styleTag;
 }
 
-function syncColorMode(step, rerender = false) {
+const DARK_MODE_ATTR = 'data-pendo-dark-mode';
+/**
+ * Applies data-pendo-dark-mode attribute for CSS pseudo-styles. Requires step.guideElement.
+ */
+function applyDarkModeAttr(step) {
+    if (!step.guideElement)
+        return;
+    const guideContainer = dom('#pendo-guide-container', step.guideElement)[0];
+    if (!guideContainer)
+        return;
+    if (step.isDarkMode) {
+        guideContainer.setAttribute(DARK_MODE_ATTR, '');
+    }
+    else {
+        guideContainer.removeAttribute(DARK_MODE_ATTR);
+    }
+}
+/**
+ * Sets step.isDarkMode based on selector. Call before buildNodeFromJSON.
+ */
+function detectColorMode(step) {
     const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
     if (!darkModeSelector)
         return;
-    // 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
         try {
             targetDarkMode = pendo$1.Sizzle(darkModeSelector).length > 0;
         }
         catch (e) {
-            // Invalid selector - default to light mode
             targetDarkMode = false;
         }
     }
-    // Update and rerender if the state changed
-    if (step.isDarkMode !== targetDarkMode) {
-        step.isDarkMode = targetDarkMode;
+    step.isDarkMode = targetDarkMode;
+}
+/**
+ * Syncs color mode for live updates. Detects, applies attribute, and optionally rerenders.
+ */
+function syncColorMode(step, rerender = false) {
+    const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
+    if (!darkModeSelector)
+        return;
+    const previousMode = step.isDarkMode;
+    detectColorMode(step);
+    if (previousMode !== step.isDarkMode) {
+        applyDarkModeAttr(step);
         if (rerender) {
             step.hide();
             step.show(step.seenReason);
@@ -16603,7 +16634,6 @@ var BuildingBlockTooltips = (function () {
         var caretDimensions = {
             height: parseInt(containerDomJson.props['data-caret-height'], 10) || 0,
             width: parseInt(containerDomJson.props['data-caret-width'], 10) || 0,
-            backgroundColor: containerDomJson.props.style['background-color'],
             offset: TOOLTIP_CONSTANTS.DEFAULT_CARET_OFFSET,
             borderWidth: 0
         };
@@ -16623,6 +16653,16 @@ var BuildingBlockTooltips = (function () {
             caretDimensions.borderColor = guideBorderArray[2];
             caretDimensions.borderWidth = parseInt(guideBorderArray[0], 10) || 0;
         }
+        const lightStyle = _.get(containerDomJson, 'props.style');
+        const darkModeStyle = _.get(containerDomJson, 'darkModeProps.style');
+        const backgroundColor = _.get(lightStyle, 'background-color');
+        const darkModeBackgroundColor = _.get(darkModeStyle, 'background-color');
+        if (step && step.isDarkMode && darkModeBackgroundColor) {
+            caretDimensions.backgroundColor = darkModeBackgroundColor;
+        }
+        else if (backgroundColor) {
+            caretDimensions.backgroundColor = backgroundColor;
+        }
         const tooltipSizes = {
             width: guideContainer.offsetWidth,
             height: guideContainer.offsetHeight,
@@ -18293,11 +18333,12 @@ function buildNodeFromJSON(json, step, guides) {
         }
         let css = json.css;
         if (json.forDarkMode) {
-            const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
+            // Use data attribute on pendo-guide-container as the selector prefix
+            // syncColorMode toggles this attribute, making dark mode styles apply/not apply
             css = _.map(css, function (rule) {
                 return {
                     styles: rule.styles,
-                    selector: `${darkModeSelector} ${rule.selector}`
+                    selector: `[data-pendo-dark-mode] ${rule.selector}`
                 };
             });
         }
@@ -19123,7 +19164,7 @@ var BuildingBlockResourceCenter = (function () {
             renderNativeIntegration(integrationProvider);
         var step = module.steps[0];
         if (step.isDarkMode === undefined) {
-            syncColorMode(step);
+            detectColorMode(step);
         }
         var domJsonToRender = updatePseudoStyleSelectors(step.domJson);
         domJsonToRender.props['data-pendo-guide-id'] = module.id;
@@ -19157,6 +19198,8 @@ var BuildingBlockResourceCenter = (function () {
         }
         step.guideElement = dom(resourceCenterContainer);
         step.elements.push(step.guideElement[0]);
+        // Apply data-pendo-dark-mode attribute for CSS pseudo-styles
+        applyDarkModeAttr(step);
         // At this point, the RC is in a state where both the module/homeView currently shown and the
         // module/homeView we are transitioning to are in the DOM. guideContainer is the module/homeView
         // we are transitioning to so we send that to adjustResourceCenterWidth so it's width can be
@@ -28831,8 +28874,9 @@ var BuildingBlockGuides = (function () {
     function renderGuideFromJSON(json, step, guides, options) {
         options = options || {};
         var guide = step.getGuide();
+        // Set step.isDarkMode before build (used for inline styles, SVGs, dark mode props)
         if (step.isDarkMode === undefined) {
-            syncColorMode(step);
+            detectColorMode(step);
         }
         var containerJSON = findGuideContainerJSON(json);
         var isResourceCenter = _.get(guide, 'attributes.resourceCenter');
@@ -28848,6 +28892,8 @@ var BuildingBlockGuides = (function () {
         var modifiableJSON = unwrapFirefoxObject(json);
         var guideToAppend = BuildingBlockGuides.buildNodeFromJSON(modifiableJSON, step, guides);
         step.guideElement = guideToAppend;
+        // Apply data-pendo-dark-mode attribute to guide container for CSS pseudo-styles
+        applyDarkModeAttr(step);
         var guideContainer = guideToAppend.find('#' + step.containerId);
         var verticalAlignmentAttr = 'data-vertical-alignment';
         var relativeToElement = guideContainer.attr(verticalAlignmentAttr) === 'Relative to Element';
@@ -38390,6 +38436,12 @@ const EmbeddedGuides = (function () {
     function processEmbeddedGuides() {
         _.forEach(embeddedGuides, function (guide) {
             guide.process();
+            if (guide.isShownInThisFrame()) {
+                const activeStep = guide.getActiveStep();
+                if (activeStep) {
+                    syncColorMode(activeStep, true);
+                }
+            }
         });
     }
     function hideAllEmbeddedGuides() {