apxor-rtm-ui 0.5.0 → 0.5.1

package/dist/apxor.rtm.js.bak

@@ -8007,7 +8007,7 @@
       scrollToView = _uiConfig$scrollToVie === void 0 ? true : _uiConfig$scrollToVie;
     var scrollTo = false;
     // when dim-dim_background is true and scrollToView is false and element is not in viewport then a black mask is applied to the webview and scrolling behaviour doesn't work, to resolve it the below case is written.
-    if (dim_background) {
+    if (dim_background && !isElementInViewport(getElementFromSelector(view_id))) {
       scrollTo = {
         behavior: "smooth",
         block: "center"
@@ -11464,6 +11464,7 @@
     modalOverlayMaskOpening: "tippyModalMaskOpening"
   };
   var createMask = function createMask(targetElement, elementHighlighterConfig) {
+    var _screen;
     var containerElement = _createModalContainer$1();
     var defsElement = document.createElementNS(svgNS$1, "defs");
     var maskContainer = _createMaskContainer$1();
@@ -11477,7 +11478,7 @@
       //setAttributes(maskOpening, { "scroll-behavior": "smooth" });
     });
 
-    screen.orientation.addEventListener("change", function () {
+    (_screen = screen) === null || _screen === void 0 || (_screen = _screen.orientation) === null || _screen === void 0 || _screen.addEventListener("change", function () {
       positionModalOpening$1(targetElement, maskOpening, maskOpeningBorderStyles, elementHighlighterConfig);
     });
     maskContainer.appendChild(maskRect);
@@ -13183,7 +13184,7 @@
        * @description Creates the styles for Marketing message.
        * @returns {string} css styles
        */
-      _defineProperty(this, "qPsc", function () {
+      _defineProperty(this, "AccS", function () {
         if (!_this.enable_marketing) {
           return "";
         }
@@ -13202,7 +13203,7 @@
        * @private
        * @description Sets the marketing content at the end of the Inline
        */
-      _defineProperty(this, "CjFL", function () {
+      _defineProperty(this, "LKpH", function () {
         if (_this.enable_marketing) {
           var marketingContainer = document.createElement("div");
           marketingContainer.classList.add("apx-inline-marketing".concat(_this.cssPostFix));
@@ -13306,6 +13307,7 @@
       this.updateSkid = null;
       this.initial_data_placement = this.position.position;
       this.recent_placement = this.position.position;
+      this.tippy_box_position = 0;
 
       //badge related config
       this.flag = true;
@@ -13763,7 +13765,7 @@
         if (apxor_tooltip_styles) {
           return;
         }
-        var styles = "\n      ".concat(this._getCustomFonts(), "  \n      ").concat(this._getBackgroundContainerStyles(), " \n      ").concat(this._getInLineContainerStyles(), " \n      ").concat(this._getScrollStyles(), " \n      ").concat(this._getControlsStyles(), " \n      ").concat(this._getInLineMediaContainerStyles(), "\n      ").concat(this._getInLineNonMediaContainerStyles(), "\n      ").concat(this._getTextConatinerStyles(), "\n      ").concat(this._getTitleStyles(), " \n      ").concat(this._getDescriptionStyles(), " \n      ").concat(this._getInLineButtonContainerStyles(), " \n      ").concat(this._getIconStyles(), " \n      ").concat(this._getImageStyles(), " \n      ").concat(this._getVideoStyles(), " \n      ").concat(this.qPsc(), "\n      ").concat(this._getTippyStyles(), "\n      ").concat(this._getFooterStyles(), "\n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
+        var styles = "\n      ".concat(this._getCustomFonts(), "  \n      ").concat(this._getBackgroundContainerStyles(), " \n      ").concat(this._getInLineContainerStyles(), " \n      ").concat(this._getScrollStyles(), " \n      ").concat(this._getControlsStyles(), " \n      ").concat(this._getInLineMediaContainerStyles(), "\n      ").concat(this._getInLineNonMediaContainerStyles(), "\n      ").concat(this._getTextConatinerStyles(), "\n      ").concat(this._getTitleStyles(), " \n      ").concat(this._getDescriptionStyles(), " \n      ").concat(this._getInLineButtonContainerStyles(), " \n      ").concat(this._getIconStyles(), " \n      ").concat(this._getImageStyles(), " \n      ").concat(this._getVideoStyles(), " \n      ").concat(this.AccS(), "\n      ").concat(this._getTippyStyles(), "\n      ").concat(this._getFooterStyles(), "\n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
         var styleNode = document.createElement("style");
         styleNode.setAttribute("apx-tooltip-styles", "");
         styleNode.innerHTML = styles;
@@ -14384,63 +14386,69 @@
         if (this.enable_arrow) {
           switch (this.arrow.type) {
             case "round":
-              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-12 + this.border.width, "px") : "-12px", ";\n          ");
+              this.tippy_box_position = this.enable_border ? 10 - this.border.width : 10;
+              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-10 + this.border.width, "px") : "-10px", ";\n          ");
               tippyTopArrowStyle = "\n          width:18px;\n          height:18px;\n          border-radius:5px;\n          transform: rotate(45deg);\n          background-color:".concat(this.arrow.color, ";\n          ");
-              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-5 + this.border.width, "px") : "-5px", ";\n          ");
+              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-10 + this.border.width, "px") : "-10px", ";\n          ");
               tippyRightArrowStyle = "\n          bottom:-10px;\n          width:18px;\n          height:18px;\n          border-radius:5px;\n          transform: rotate(45deg);\n          background-color:".concat(this.arrow.color, ";\n          ");
-              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-8 + this.border.width, "px") : "-8px", ";\n          ");
+              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-10 + this.border.width, "px") : "-10px", ";\n          ");
               tippyBottomArrowStyle = "\n          width:18px;\n          height:18px;\n          border-radius:5px;\n          transform: rotate(45deg);\n          background-color:".concat(this.arrow.color, ";\n          ");
-              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-15 + this.border.width, "px") : "-15px", ";\n          ");
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-10 + this.border.width, "px") : "-10px", ";\n          ");
               tippyLeftArrowStyle = "\n          top:-50%;\n          width:18px;\n          height:18px;\n          border-radius:5px;\n          transform: rotate(45deg);\n          background-color:".concat(this.arrow.color, ";\n          ");
               break;
             case "narrow":
-              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-22 + this.border.width, "px") : "-22px", ";\n          ");
+              this.tippy_box_position = this.enable_border ? 16 - this.border.width : 16;
+              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-16 + this.border.width, "px") : "-16px", ";\n          ");
               tippyTopArrowStyle = "\n          border-width:18px 5px 0;\n          ";
-              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-7 + this.border.width, "px") : "-7px", ";\n          ");
+              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-16 + this.border.width, "px") : "-16px", ";\n          ");
               tippyRightArrowStyle = "\n          border-width:5px 18px 5px 0;\n          ";
-              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-11 + this.border.width, "px") : "-11px", ";\n          ");
+              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-16 + this.border.width, "px") : "-16px", ";\n          ");
               tippyBottomArrowStyle = "\n          border-width:0 5px 18px;\n          ";
-              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-26 + this.border.width, "px") : "-26px", ";\n          ");
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-16 + this.border.width, "px") : "-16px", ";\n          ");
               tippyLeftArrowStyle = "\n          border-width:5px 0 5px 18px;\n          ";
               break;
             case "wide":
-              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-22 + this.border.width, "px") : "-22px", ";\n          ");
+              this.tippy_box_position = this.enable_border ? 10 - this.border.width : 10;
+              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-16 + this.border.width, "px") : "-16px", ";\n          ");
               tippyTopArrowStyle = "\n          left:-50%;\n          border-width:9px 18px 0;\n          ";
-              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(2 + this.border.width, "px") : "2px", ";\n          ");
+              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-8 + this.border.width, "px") : "-8px", ";\n          ");
               tippyRightArrowStyle = "\n          top:-50%;\n          border-width:18px 9px 18px 0;\n          ";
-              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(2 + this.border.width, "px") : "2px", ";\n          ");
+              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-5 + this.border.width, "px") : "-5px", ";\n          ");
               tippyBottomArrowStyle = "\n          left:-50%;\n          top:-8px;\n          border-width:0 18px 9px;\n          bottom:13px;\n          ";
-              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-26 + this.border.width, "px") : "-26px", ";\n          ");
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-18 + this.border.width, "px") : "-18px", ";\n          ");
               tippyLeftArrowStyle = "\n          top:-50%;\n          border-width:18px 0 18px 8px;\n          ";
               break;
             case "large":
-              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-19 + this.border.width, "px") : "-19px", ";\n          ");
+              this.tippy_box_position = this.enable_border ? 15 - this.border.width : 15;
+              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-15 + this.border.width, "px") : "-15px", ";\n          ");
               tippyTopArrowStyle = "\n          left:-50%;\n          border-width:16px 16px 0;\n          ";
-              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-5 + this.border.width, "px") : "-5px", ";\n          ");
+              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-15 + this.border.width, "px") : "-15px", ";\n          ");
               tippyRightArrowStyle = "\n          top:-50%;\n          border-width:16px 16px 16px 0;\n          ";
-              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-9 + this.border.width, "px") : "-9px", ";\n          ");
+              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-15 + this.border.width, "px") : "-15px", ";\n          ");
               tippyBottomArrowStyle = "\n          left:-50%;\n          border-width:0 16px 16px;\n          ";
-              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-23 + this.border.width, "px") : "-23px", ";\n          ");
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-15 + this.border.width, "px") : "-15px", ";\n          ");
               tippyLeftArrowStyle = "\n          top:-50%;\n          border-width:16px 0 16px 16px;\n          ";
               break;
             case "small":
-              tippyTopArrowAdjustment = "\n          bottom:-12px;\n          ";
+              this.tippy_box_position = this.enable_border ? 6 - this.border.width : 6;
+              tippyTopArrowAdjustment = "\n                    bottom:".concat(this.enable_border ? "".concat(-6 + this.border.width, "px") : "-6px", ";\n          ");
               tippyTopArrowStyle = "\n          left:-50%;\n          border-width:16px 16px 0;\n          ";
-              tippyRightArrowAdjustment = "\n          left: 3px;\n          ";
+              tippyRightArrowAdjustment = "\n          left:".concat(this.enable_border ? "".concat(-6 + this.border.width, "px") : "-6px", ";\n          ");
               tippyRightArrowStyle = "\n          top:-50%;\n          border-width:16px 16px 16px 0;\n          ";
-              tippyBottomArrowAdjustment = "\n          top: -1px;\n          ";
+              tippyBottomArrowAdjustment = "\n          top:".concat(this.enable_border ? "".concat(-6 + this.border.width, "px") : "-6px", ";\n          ");
               tippyBottomArrowStyle = "\n          left:-50%;\n          border-width:0 16px 16px;\n          ";
-              tippyLeftArrowAdjustment = "\n          right: -16px;\n          ";
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-6 + this.border.width, "px") : "-6px", ";\n          ");
               tippyLeftArrowStyle = "\n          top:-50%;\n          border-width:16px 0 16px 16px;\n          ";
               break;
             default:
-              tippyTopArrowAdjustment = "\n                              bottom:".concat(this.enable_border && this.border.width > 5 ? "".concat(-15 + this.border.width - 5, "px") : "-15px", ";\n          ");
+              this.tippy_box_position = this.enable_border ? 11 - this.border.width : 11;
+              tippyTopArrowAdjustment = "\n                              bottom:".concat(this.enable_border ? "".concat(-11 + this.border.width, "px") : "-11px", ";\n          ");
               tippyTopArrowStyle = "\n          left:-50%;\n          border-width:16px 16px 0;\n          ";
-              tippyRightArrowAdjustment = "\n                              left:".concat(this.enable_border && this.border.width > 5 ? "".concat(-1 + this.border.width - 5, "px") : "-1px", ";\n          ");
+              tippyRightArrowAdjustment = "\n                              left:".concat(this.enable_border ? "".concat(-11 + this.border.width, "px") : "-11px", ";\n          ");
               tippyRightArrowStyle = "\n          top:-50%;\n          border-width:16px 16px 16px 0;\n          ";
-              tippyBottomArrowAdjustment = "\n                              top:".concat(this.enable_border && this.border.width > 5 ? "".concat(-5 + this.border.width - 5, "px") : "-5px", ";\n          ");
+              tippyBottomArrowAdjustment = "\n                              top:".concat(this.enable_border ? "".concat(-11 + this.border.width, "px") : "-11px", ";\n          ");
               tippyBottomArrowStyle = "\n          left:-50%;\n          border-width:0 16px 16px;\n          ";
-              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border && this.border.width > 4 ? "".concat(-20 + this.border.width - 4, "px") : "-20px", ";\n          ");
+              tippyLeftArrowAdjustment = "\n                              right:".concat(this.enable_border ? "".concat(-11 + this.border.width, "px") : "-11px", ";\n          ");
               tippyLeftArrowStyle = "\n          top:-50%;\n          border-width:16px 0 16px 16px;\n          ";
               break;
           }
@@ -14473,7 +14481,8 @@
           animationStyles = "\n        @-webkit-keyframes ".concat(this.animation.type, " {\n          0% { transform: ").concat(translateDir(this.position.position, 0), "; }\n          50% { transform: ").concat(translateDir(this.position.position, 50), "; }\n          100% { transform: ").concat(translateDir(this.position.position, 100), "; }\n         }\n  \n         @keyframes ").concat(this.animation.type, " {\n          0% { transform: ").concat(translateDir(this.position.position, 0), "; }\n          50% { transform: ").concat(translateDir(this.position.position, 50), "; }\n          100% { transform: ").concat(translateDir(this.position.position, 100), "; }\n         }\n  \n         .tippy-box {\n           animation-name: ").concat(this.animation.type, ";\n           animation-duration: ").concat(this.animation.duration, "ms;\n           animation-timing-function: ").concat(this.animation.anim_function, ";\n           animation-iteration-count: ").concat(this.animation.iteration_count, ";\n         }\n        ");
         }
         // Do not modify these. These tippy styles.
-        var tippyStyles = "\n        .tippy-box[data-animation=\"fade\"][data-state=hidden]{\n          opacity:0;\n        } \n       [data-tippy-root] {\n          width:".concat(this.inline_width, ";\n          max-width:calc(100vw - ").concat(this.enable_arrow && this.arrow.enable_border ? this.arrow.border.width : 0, "px);\n        } \n       .tippy-box { \n          width:").concat(this.inline_width, ";\n          position:relative;\n          line-height:1.4;\n          white-space:normal;\n          outline:0;\n          transition-property:transform,visibility,opacity;\n        } \n       .tippy-box[data-placement^=top] > .tippy-arrow {\n          ").concat(tippyTopArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=top] > .tippy-arrow:before {\n          ").concat(tippyTopArrowStyle, "\n          border-top-color:initial;\n          transform-origin:center top;\n        } \n       .tippy-box[data-placement^=bottom] > .tippy-arrow {\n          ").concat(tippyBottomArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=bottom] > .tippy-arrow:before {\n          ").concat(tippyBottomArrowStyle, "\n          border-bottom-color:initial;\n          transform-origin:center bottom;\n        } \n       .tippy-box[data-placement^=left] > .tippy-arrow {\n          ").concat(tippyLeftArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=left] > .tippy-arrow:before {\n          ").concat(tippyLeftArrowStyle, "\n          border-left-color:initial;\n          transform-origin:center left;\n        } \n       .tippy-box[data-placement^=right] > .tippy-arrow {\n          ").concat(tippyRightArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=right] > .tippy-arrow:before {\n          ").concat(tippyRightArrowStyle, "\n          border-right-color:initial;\n          transform-origin:center right;\n        } \n       .tippy-box[data-inertia][data-state=visible] {\n          transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)\n        } \n       .tippy-arrow {\n          z-index:9999;\n          width:18px;\n          height:18px;\n          color:").concat(this.enable_arrow ? this.arrow.color : "transparent", ";\n          opacity:0;\n          visibility:hidden;\n       } \n       .tippy-arrow.open {\n          opacity:1;\n          visibility:visible;\n       }\n       .tippy-arrow:before{ \n          transform: scale(").concat(this.fontMultiplier, ");\n          content:\"\";\n          position:absolute;\n          border-color:transparent;\n          border-style:").concat(this.enable_arrow && this.arrow.enable_border ? this.arrow.border.style : "solid", ";\n       } \n       .tippy-content {\n        width:").concat(this.inline_width, ";\n        padding: 0.3125rem 0.5625rem;\n          position:relative;\n          z-index:9998;\n       } \n      ").concat(animationStyles, "\n    ");
+        var tippyStyles = "\n        .tippy-box[data-animation=\"fade\"][data-state=hidden]{\n          opacity:0;\n        } \n       [data-tippy-root] {\n          width:".concat(this.inline_width, ";\n          max-width:calc(100vw - ").concat(this.enable_arrow && this.arrow.enable_border ? this.arrow.border.width : 0, "px);\n        } \n       .tippy-box { \n          width:").concat(this.inline_width, ";\n          position:relative;\n          line-height:1.4;\n          white-space:normal;\n          outline:0;\n          transition-property:transform,visibility,opacity;\n        } \n       .tippy-box[data-placement^=top] > .tippy-arrow {\n          ").concat(tippyTopArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=top] > .tippy-arrow:before {\n          ").concat(tippyTopArrowStyle, "\n          border-top-color:initial;\n          transform-origin:center top;\n        } \n       .tippy-box[data-placement^=bottom] > .tippy-arrow {\n          ").concat(tippyBottomArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=bottom] > .tippy-arrow:before {\n          ").concat(tippyBottomArrowStyle, "\n          border-bottom-color:initial;\n          transform-origin:center bottom;\n        } \n       .tippy-box[data-placement^=left] > .tippy-arrow {\n          ").concat(tippyLeftArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=left] > .tippy-arrow:before {\n          ").concat(tippyLeftArrowStyle, "\n          border-left-color:initial;\n          transform-origin:center left;\n        } \n       .tippy-box[data-placement^=right] > .tippy-arrow {\n          ").concat(tippyRightArrowAdjustment, "\n        } \n       .tippy-box[data-placement^=right] > .tippy-arrow:before {\n          ").concat(tippyRightArrowStyle, "\n          border-right-color:initial;\n          transform-origin:center right;\n        } \n       .tippy-box[data-inertia][data-state=visible] {\n          transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)\n        } \n       .tippy-arrow {\n          z-index:9999;\n          width:18px;\n          height:18px;\n          color:").concat(this.enable_arrow ? this.arrow.color : "transparent", ";\n          opacity:0;\n          visibility:hidden;\n       } \n       .tippy-arrow.open {\n          opacity:1;\n          visibility:visible;\n       }\n       .tippy-arrow:before{ \n          transform: scale(").concat(this.fontMultiplier, ");\n          content:\"\";\n          position:absolute;\n          border-color:transparent;\n          border-style:").concat(this.enable_arrow && this.arrow.enable_border ? this.arrow.border.style : "solid", ";\n       } \n       .tippy-content {\n        width:").concat(this.inline_width, ";\n          position:relative;\n          z-index:9998;\n       } \n      ").concat(animationStyles, "\n    ");
+        //padding: 0.3125rem 0.5625rem;    causing arrow distortion
         var tippyTheme = "\n       ".concat(tippyStyles, "\n    ");
         return tippyTheme;
         //transition:all .5s cubic-bezier(.96,.23,.07,.8);   // declaration in .tippy-arrow
@@ -14566,7 +14575,7 @@
         this._setCloseButton();
 
         //Set the Marketing content
-        this.CjFL();
+        this.LKpH();
       }
 
       /**
@@ -14924,12 +14933,12 @@
           var closeButton = document.createElement("span");
           // Close button SVG is decided based on the type of the button in the config.
           if (this.close_button.type === CLOSE_BUTTON_STYLE.NORMAL) {
-            closeButton.innerHTML = getCloseSVG(this.close_button.width, this.close_button.height, this.close_button.color);
+            closeButton.innerHTML = getCloseSVG(this.close_button.width * this.fontMultiplier, this.close_button.height * this.fontMultiplier, this.close_button.color);
           } else if (this.close_button.type === CLOSE_BUTTON_STYLE.FILL) {
             if (this.close_button.shape === "circle") {
-              closeButton.innerHTML = getCloseWithCircleSVG(this.close_button.width, this.close_button.height, this.close_button.fill_color, this.close_button.color);
+              closeButton.innerHTML = getCloseWithCircleSVG(this.close_button.width * this.fontMultiplier, this.close_button.height * this.fontMultiplier, this.close_button.fill_color, this.close_button.color);
             } else {
-              closeButton.innerHTML = getCloseWithRectangleSVG(this.close_button.width, this.close_button.height, this.close_button.fill_color, this.close_button.color);
+              closeButton.innerHTML = getCloseWithRectangleSVG(this.close_button.width * this.fontMultiplier, this.close_button.height * this.fontMultiplier, this.close_button.fill_color, this.close_button.color);
             }
           } else {
             closeButton.innerHTML = "<img src=\"".concat(this.close_button.path, "\" width=\"").concat(this.close_button.width, "px\" height=\"").concat(this.close_button.height, "px\"></img>");
@@ -15260,22 +15269,49 @@
               var tippyStyleElementContent = document.querySelector("[apx-tooltip-styles]").innerHTML;
               //const tippyContent = document.querySelector(".tippy-content");
               var placement = tippyBox.getAttribute("data-placement");
-              var rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+              // var rootFontSize = parseFloat(
+              //   window.getComputedStyle(document.documentElement).fontSize
+              // );
+              _this12.tippy_box_position = _this12.enable_animation ? _this12.tippy_box_position - 10 : _this12.tippy_box_position;
+              _this12.tippy_box_position = _this12.set_font_to_scale && _this12.fontMultiplier > 1 ? _this12.tippy_box_position + 26 : _this12.tippy_box_position;
               if (placement === "left" || placement === "right") {
                 tippyRoot.style.top = "".concat(_this12.position.offset.skid, "px");
-                if (_this12.initial_data_placement !== placement) {
-                  tippyRoot.style.left = placement === "left" ? "".concat(-0.3125 * 2 * rootFontSize - (_this12.enable_animation ? 16 : 0), "px") : "".concat(0.3125 * 2 * rootFontSize + (_this12.enable_animation ? 10 : 0), "px");
-                }
+                tippyRoot.style.left = "".concat(placement === "left" ? -_this12.tippy_box_position : _this12.tippy_box_position, "px");
+                // if (this.initial_data_placement !== placement) {
+                //   tippyRoot.style.left =
+                //     placement === "left"
+                //       ? `${
+                //           -0.3125 * 2 * rootFontSize -
+                //           (this.enable_animation ? 16 : 0)
+                //         }px`
+                //       : `${
+                //           0.3125 * 2 * rootFontSize +
+                //           (this.enable_animation ? 10 : 0)
+                //         }px`;
+                // }
               } else if (placement === "top" || placement === "bottom") {
                 tippyRoot.style.left = "".concat(_this12.position.offset.skid, "px");
-                if (_this12.initial_data_placement !== placement) {
-                  tippyRoot.style.top = placement === "top" ? "".concat(-0.5625 * 2 * rootFontSize - (_this12.enable_animation ? 16 : 0), "px") : "".concat(0.5625 * 2 * rootFontSize + (_this12.enable_animation ? 10 : 0), "px");
-                }
+                tippyRoot.style.top = "".concat(placement === "bottom" ? _this12.tippy_box_position : -_this12.tippy_box_position, "px");
+                // if (this.initial_data_placement !== placement) {
+                //   tippyRoot.style.top =
+                //     placement === "top"
+                //       ? `${
+                //           -0.5625 * 2 * rootFontSize -
+                //           (this.enable_animation ? 16 : 0)
+                //         }px`
+                //       : `${
+                //           0.5625 * 2 * rootFontSize +
+                //           (this.enable_animation ? 10 : 0)
+                //         }px`;
+                // }
               }
+
               if (_this12.recent_placement !== placement) {
-                tippyStyleElementContent = tippyStyleElementContent.replace("@-webkit-keyframes ".concat(_this12.animation.type, " {\n          0% { transform: ").concat(translateDir(_this12.recent_placement, 0), "; }\n          50% { transform: ").concat(translateDir(_this12.recent_placement, 50), "; }\n          100% { transform: ").concat(translateDir(_this12.recent_placement, 100), "; }\n         }\n  \n         @keyframes ").concat(_this12.animation.type, " {\n          0% { transform: ").concat(translateDir(_this12.recent_placement, 0), "; }\n          50% { transform: ").concat(translateDir(_this12.recent_placement, 50), "; }\n          100% { transform: ").concat(translateDir(_this12.recent_placement, 100), "; }\n         }").replaceAll("\n", "").replace(/[\s]{2,999}/g, ""), "@-webkit-keyframes ".concat(_this12.animation.type, " {\n          0% { transform: ").concat(translateDir(placement, 0), "; }\n          50% { transform: ").concat(translateDir(placement, 50), "; }\n          100% { transform: ").concat(translateDir(placement, 100), "; }\n         }\n  \n         @keyframes ").concat(_this12.animation.type, " {\n          0% { transform: ").concat(translateDir(placement, 0), "; }\n          50% { transform: ").concat(translateDir(placement, 50), "; }\n          100% { transform: ").concat(translateDir(placement, 100), "; }\n         }").replaceAll("\n", "").replace(/[\s]{2,999}/g, ""));
-                document.querySelector("[apx-tooltip-styles]").innerHTML = tippyStyleElementContent;
-                _this12.recent_placement = placement;
+                if (_this12.enable_animation) {
+                  tippyStyleElementContent = tippyStyleElementContent.replace("@-webkit-keyframes ".concat(_this12.animation.type, " {\n                  0% { transform: ").concat(translateDir(_this12.recent_placement, 0), "; }\n                  50% { transform: ").concat(translateDir(_this12.recent_placement, 50), "; }\n                  100% { transform: ").concat(translateDir(_this12.recent_placement, 100), "; }\n                }\n                \n                @keyframes ").concat(_this12.animation.type, " {\n                  0% { transform: ").concat(translateDir(_this12.recent_placement, 0), "; }\n                  50% { transform: ").concat(translateDir(_this12.recent_placement, 50), "; }\n                  100% { transform: ").concat(translateDir(_this12.recent_placement, 100), "; }\n                }").replaceAll("\n", "").replace(/[\s]{2,999}/g, ""), "@-webkit-keyframes ".concat(_this12.animation.type, " {\n                  0% { transform: ").concat(translateDir(placement, 0), "; }\n                  50% { transform: ").concat(translateDir(placement, 50), "; }\n                  100% { transform: ").concat(translateDir(placement, 100), "; }\n                }\n                \n                @keyframes ").concat(_this12.animation.type, " {\n                  0% { transform: ").concat(translateDir(placement, 0), "; }\n                  50% { transform: ").concat(translateDir(placement, 50), "; }\n                  100% { transform: ").concat(translateDir(placement, 100), "; }\n                }").replaceAll("\n", "").replace(/[\s]{2,999}/g, ""));
+                  document.querySelector("[apx-tooltip-styles]").innerHTML = tippyStyleElementContent;
+                  _this12.recent_placement = placement;
+                }
               }
             };
             _this12.updateSkid();
@@ -15533,7 +15569,7 @@
        * @description Creates the styles for Marketing message.
        * @returns {string} css styles
        */
-      _defineProperty(this, "qPsc", function () {
+      _defineProperty(this, "AccS", function () {
         if (!_this.enable_marketing) {
           return "";
         }
@@ -15579,7 +15615,7 @@
        * @private
        * @description Get the response for Form content in the InApp modal.
        */
-      _defineProperty(this, "TiXf", function (form_elements) {
+      _defineProperty(this, "arrC", function (form_elements) {
         var obj = {};
         var callback = "";
         form_elements.forEach(function (element) {
@@ -15619,7 +15655,7 @@
        * @private
        * @description Sets the marketing content at the end of the InApp
        */
-      _defineProperty(this, "CjFL", function () {
+      _defineProperty(this, "LKpH", function () {
         if (_this.enable_marketing) {
           var marketingContainer = document.createElement("div");
           marketingContainer.classList.add("apx-inapp-marketing".concat(_this.cssPostFix));
@@ -15872,7 +15908,7 @@
     }, {
       key: "_setStyles",
       value: function _setStyles() {
-        var styles = "\n      ".concat(this._getCustomFonts(), " \n      ").concat(this._getBackgroundContainerStyles(), " \n      ").concat(this._getInAppContainerStyles(), " \n      ").concat(this._getScrollStyles(), " \n      ").concat(this._getControlsStyles(), " \n      ").concat(this._getInAppMediaContainerStyles(), "\n      ").concat(this._getInAppNonMediaContainerStyles(), "\n      ").concat(this._getTextConatinerStyles(), "\n      ").concat(this._getTitleStyles(), " \n      ").concat(this._getDescriptionStyles(), " \n      ").concat(this._getFormStyles(), "\n      ").concat(this._getInAppButtonContainerStyles(), "\n      ").concat(this._getIconStyles(), " \n      ").concat(this._getImageStyles(), " \n      ").concat(this._getVideoStyles(), " \n      ").concat(this.qPsc(), " \n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
+        var styles = "\n      ".concat(this._getCustomFonts(), " \n      ").concat(this._getBackgroundContainerStyles(), " \n      ").concat(this._getInAppContainerStyles(), " \n      ").concat(this._getScrollStyles(), " \n      ").concat(this._getControlsStyles(), " \n      ").concat(this._getInAppMediaContainerStyles(), "\n      ").concat(this._getInAppNonMediaContainerStyles(), "\n      ").concat(this._getTextConatinerStyles(), "\n      ").concat(this._getTitleStyles(), " \n      ").concat(this._getDescriptionStyles(), " \n      ").concat(this._getFormStyles(), "\n      ").concat(this._getInAppButtonContainerStyles(), "\n      ").concat(this._getIconStyles(), " \n      ").concat(this._getImageStyles(), " \n      ").concat(this._getVideoStyles(), " \n      ").concat(this.AccS(), " \n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
         var styleNode = document.createElement("style");
         styleNode.setAttribute("id", "apxor-style-" + this.configId);
         styleNode.innerHTML = styles;
@@ -16349,7 +16385,7 @@
         this._setCloseButton();
 
         //Set the Marketing content
-        this.CjFL();
+        this.LKpH();
       }
 
       /**
@@ -16554,7 +16590,7 @@
           var form = document.querySelector(".apx-inapp-form-container".concat(this.cssPostFix));
           form.addEventListener("submit", function (e) {
             e.preventDefault();
-            var _this4$generateRespon = _this4.TiXf(_this4.form.elements),
+            var _this4$generateRespon = _this4.arrC(_this4.form.elements),
               obj = _this4$generateRespon.obj,
               callback = _this4$generateRespon.callback;
             var evalString = "(obj)=>" + callback + "(obj)";
@@ -16867,7 +16903,7 @@
        * @function showVideoInApp
        * @description Shows the video InApp with the configured mode.
        */
-      _defineProperty(this, "vYvZ", function () {
+      _defineProperty(this, "CXVQ", function () {
         _this.createPlayer();
         try {
           // In PIP mode, only after the video metadata is loaded, show the PIP.
@@ -16909,7 +16945,7 @@
             };
           } else {
             // As the video player is hidden by default, unhide if the mode is not PIP.
-            _this.BXgz();
+            _this.ZtjN();
           }
           _this.showCallback();
         } catch (e) {
@@ -16929,7 +16965,7 @@
        * For portrait - width is set to 50% of the screen and height is auto adjusted based on resolution.
        * For landscape - height is set to 50% of the screen and width is auto adjusted based on resolution.
        */
-      _defineProperty(this, "SxBJ", function () {
+      _defineProperty(this, "uwcj", function () {
         var _getHeightWidthFromRe = getHeightWidthFromResolution(_this.video, 1),
           width = _getHeightWidthFromRe.width,
           height = _getHeightWidthFromRe.height;
@@ -16941,7 +16977,7 @@
        * @private
        * @description Removes the video player style element.
        */
-      _defineProperty(this, "GTjT", function () {
+      _defineProperty(this, "uSCp", function () {
         var playerStyles = document.getElementById("apx-mpl-styles");
         if (playerStyles) {
           playerStyles.remove();
@@ -16952,7 +16988,7 @@
        * @private
        * @description Attach listeners on the video controls
        */
-      _defineProperty(this, "MQMm", function () {
+      _defineProperty(this, "tFVB", function () {
         // Listener for the video end. Display the CTA's when the video ends.
         _this.videoElement.addEventListener("ended", function () {
           var ctaButtons = document.getElementById("apx-cta-btn");
@@ -17063,7 +17099,7 @@
        * @private
        * @description Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
        */
-      _defineProperty(this, "SGcf", function () {
+      _defineProperty(this, "SbsY", function () {
         var _this$terminationConf;
         if (_this.mode === "PIP" && !((_this$terminationConf = _this.terminationConfig) !== null && _this$terminationConf !== void 0 && _this$terminationConf.auto_dismiss)) {
           // On Exit of the PIP,
@@ -17103,7 +17139,7 @@
        * @private Sets the custom controls on the video player.
        * PIP and close are the custom controls that are created and positions on the video.
        */
-      _defineProperty(this, "ASua", function () {
+      _defineProperty(this, "NmxX", function () {
         _this.enable_close_button;
         if (_this.enable_close_button) {
           var closeButton = document.createElement("span");
@@ -17150,21 +17186,21 @@
        * @function hideVideoPlayer
        * @description Sets the visibility of the video player to hidden.
        */
-      _defineProperty(this, "Whkk", function () {
+      _defineProperty(this, "SJeU", function () {
         _this.videoPlayer.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function unhideVideoPlayer
        * @description Unhides video player.
        */
-      _defineProperty(this, "BXgz", function () {
+      _defineProperty(this, "ZtjN", function () {
         _this.videoPlayer.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function getVideoElement
        * @returns {HTMLElement} Video ekement
        */
-      _defineProperty(this, "pdnj", function () {
+      _defineProperty(this, "hjZT", function () {
         return _this.videoElement;
       });
       this.videoPlayer = null;
@@ -17216,7 +17252,7 @@
         this.videoPlayer.style.backgroundColor = this.bg_color;
 
         // Video has a resolution, not deviating from the resolution set the height and width.
-        this.SxBJ();
+        this.uwcj();
         //Generate the styles and add them to the document head.
         this._setVideoPlayerStyles();
         //Set the position of the video player with in the 5 possible positions.
@@ -17224,16 +17260,16 @@
         //Create a video element,set the source and add to the container.
         this._setPlayerContent();
         //Set the listeners on the video control buttons.
-        this.MQMm();
+        this.tFVB();
         //Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
-        this.SGcf();
+        this.SbsY();
         //Set the custom close and PIP controls. Not using the defaults from the html video element.
         //Reason - We want to position them at the top right and left positions.
-        this.ASua();
+        this.NmxX();
         //Generate and postion the CTA buttons on the video. By default hidden, visible only when video is completed
         this._setButtons(BUTTON_CONTAINER_POSITION.CENTER);
         //Hide the video player. Display it based on the video mode. Videoplayer for "video" mode and a direct PIP  for "PIP" mode.
-        this.Whkk();
+        this.SJeU();
         //If the auto dismiss is enabled, sets the timeout to call the InApp close.
         this._setAutoTerminate();
         document.body.appendChild(this.videoPlayer);
@@ -17347,7 +17383,7 @@
             }
           }
           this.videoPlayer.remove();
-          this.GTjT();
+          this.uSCp();
           if (closeButtonName !== "auto_dismiss") {
             window.Apxor.logAppEvent("apx_video_inapp_close_button_clicked", {
               message_name: this.name,
@@ -17415,7 +17451,7 @@
                 replayCount: _this3.replayCount
               });
               _this3.videoPlayer.remove();
-              _this3.GTjT();
+              _this3.uSCp();
               _this3.hideCallback();
             } catch (e) {
               console.log("Can't close the video player\n".concat(e));
@@ -17503,14 +17539,14 @@
   var RTM = /*#__PURE__*/_createClass(function RTM() {
     var _this = this;
     _classCallCheck(this, RTM);
-    _defineProperty(this, "tPHq", {});
+    _defineProperty(this, "Lbzn", {});
     _defineProperty(this, "isShowingAction", false);
     _defineProperty(this, "currentAction", null);
-    _defineProperty(this, "Jvri", null);
-    _defineProperty(this, "version", 50);
+    _defineProperty(this, "slkw", null);
+    _defineProperty(this, "version", 51);
     _defineProperty(this, "isInitialised", false);
     _defineProperty(this, "_eventsInDynamicText", {});
-    _defineProperty(this, "qOSx", function () {
+    _defineProperty(this, "YILU", function () {
       _this.isInitialised = true;
       var oldPushState = history.pushState;
       history.pushState = function pushState() {
@@ -17535,7 +17571,7 @@
     });
     _defineProperty(this, "show", function (uiJson, duration, uuid, name) {
       if (!_this.isInitialised) {
-        _this.qOSx();
+        _this.YILU();
       }
       window.addEventListener("pagehide", function () {
         var _window$Apxor, _window$Apxor$pageUnl;
@@ -17631,7 +17667,7 @@
       var terminationConfig = {};
       terminationConfig["auto_dismiss"] = duration > 0;
       terminationConfig["duration"] = duration;
-      _this.Jvri = new InLineTooltip(ui_config, [], [], terminationConfig, {
+      _this.slkw = new InLineTooltip(ui_config, [], [], terminationConfig, {
         configId: uuid,
         configName: name
       }, _this, function () {
@@ -17651,14 +17687,14 @@
         var _window10, _window10$updateFlag;
         _this.isShowingAction = false;
         _this.currentAction = null;
-        _this.Jvri = null;
+        _this.slkw = null;
         (_window10 = window) === null || _window10 === void 0 || (_window10 = _window10.Apxor) === null || _window10 === void 0 || (_window10$updateFlag = _window10.updateFlag) === null || _window10$updateFlag === void 0 || _window10$updateFlag.call(_window10, false);
         if (window.Apxor && window.Apxor.logActionEvent && !isCancelled) {
           window.Apxor.logActionEvent("inline_dismissed", uuid, name);
         }
       }, function () {}, false, 0);
       setTimeout(function () {
-        _this.Jvri.createNewTooltip();
+        _this.slkw.createNewTooltip();
       }, ui_config.delay);
     });
     _defineProperty(this, "createInAppVideo", function (config, duration, configId, name) {
@@ -17688,7 +17724,7 @@
           window.Apxor.logActionEvent("inapp_dismissed", configId, name);
         }
       });
-      VideoInAppInstance.vYvZ();
+      VideoInAppInstance.CXVQ();
     });
     /**
      * Creates a modal for the given config and displays it.