apxor-rtm-ui 0.6.1 → 0.7.1

package/dist/apxor.rtm.js.bak

@@ -6394,7 +6394,8 @@
     BOTTOM_RIGHT: "bottom-right",
     TOP_CENTER: "top-center",
     BOTTOM_CENTER: "bottom-center",
-    CENTER: "center"
+    CENTER: "center",
+    FULL_SCREEN: "full-screen"
   };
   var imgWrapperStyles = {
     "margin-left": "marginLeft",
@@ -6404,6 +6405,14 @@
     "align-self": "alignSelf",
     width: "width"
   };
+  var imgWrapperStylesForStories = {
+    "margin-left": "marginLeft",
+    "margin-right": "marginRight",
+    "margin-top": "marginTop",
+    "margin-bottom": "marginBottom",
+    "align-self": "alignSelf",
+    width: "width"
+  };
   var DIRECTION = {
     HORIZONTAL: "horizontal",
     VERTICAL: "vertical"
@@ -6437,7 +6446,7 @@
   var EMBED_CARD_TYPE = {
     cell: "div",
     img: "img",
-    text: "div",
+    text: "span",
     button: "button"
   };
 
@@ -6552,7 +6561,7 @@
    * @returns
    */
   var _setFontFaceAtRule = function _setFontFaceAtRule(font) {
-    if (!font.source || font.source === "url") {
+    if (!font.source || font.source === "url" || font.source === "name") {
       return [font.family, ""];
     }
     var src;
@@ -6570,6 +6579,15 @@
     return ["".concat(font_family, ", ").concat(fallbackFont), font_face];
   };
 
+  /**
+   * @function getFileExtension
+   * @param {*} filename takes image or video url and returns extension
+   * @returns extension (jpg ,png etc)
+   */
+  function getFileExtension(filename) {
+    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
+  }
+
   /**
    * @function createNewTextElement
    * @description Creates a text element for the given text config. It could either be a title or a description.
@@ -6986,6 +7004,88 @@
     });
     return "\n  div .".concat(position, "-buttons-container  {\n    width:100%;\n    display: flex;\n    flex-direction:").concat(button_direction === DIRECTION.VERTICAL && position === BUTTON_CONTAINER_POSITION.BOTTOM ? "column" : "row", ";\n    justify-content:").concat(justifyContent, ";\n        align-items:").concat(button_direction === DIRECTION.HORIZONTAL ? "center" : getButtonPosition(button_alignment), ";\n    flex-wrap:wrap;\n  }\n  ").concat(buttons, "\n  ");
   };
+  var setImgAction = function setImgAction(action_config, ActionHandler, uuid, name) {
+    var configType = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : EVENT_PREFIX.INAPP;
+    var action = function action() {};
+    var _action = action_config === null || action_config === void 0 ? void 0 : action_config.action;
+    try {
+      switch (_action) {
+        case "done":
+        case "dismiss":
+          action = function action() {
+            ActionHandler.complete(false, "dismiss");
+            window.Apxor.logActionEvent(configType + "img" + "_Clicked", uuid, name);
+          };
+          break;
+        case "redirect":
+          action = function action() {
+            var _window$Apxor;
+            if (((_window$Apxor = window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.platform) === "ios") {
+              window.Apxor.logActionEvent(configType + "img" + "_Clicked", uuid, name);
+              ActionHandler.complete(false, "redirect");
+              window.Apxor.redirectTo(JSON.stringify(action_config));
+              var type = configType.toLowerCase();
+              window.Apxor.logActionEvent("".concat(type, "dismissed"), uuid, name);
+            } else {
+              ActionHandler.complete(true, "redirect");
+              window.Apxor.redirectTo("IN_APP", uuid, name, "img", JSON.stringify(action_config));
+            }
+            // if (redirectWithin || isExternal) {
+            //   window.open(url, redirectWithin ? "_self" : "_blank");
+            // } else {
+            //   rtmInstance.logClientEvent("REDIRECT", { url });
+            // }
+          };
+
+          break;
+        case "cancel":
+          action = function action() {
+            ActionHandler.cancel(true, "cancel");
+            ActionHandler._isCancelled = true;
+            window.Apxor.logActionEvent(configType + "img" + "_Clicked", uuid, name);
+            window.Apxor.logActionEvent("walk_through_cancelled", uuid, name);
+          };
+          break;
+        // case "submit":
+        //   action = () => {
+        //     ActionHandler.complete(false, "submit");
+        //     window.Apxor.logActionEvent(
+        //       configType + "img" + "_Clicked",
+        //       uuid,
+        //       name
+        //     );
+        //   };
+        //   break;
+        // case "skip":
+        //   action = () => {
+        //     ActionHandler.complete(false, "skip");
+        //     window.Apxor.logActionEvent(
+        //       configType + "img" + "_Clicked",
+        //       uuid,
+        //       name
+        //     );
+        //   };
+        //   break;
+        case "never":
+          action = function action() {
+            ActionHandler.cancel(true, "cancel");
+            ActionHandler._isCancelled = true;
+            window.Apxor.logActionEvent(configType + "img" + "_Clicked", uuid, name);
+            window.Apxor.neverShow(uuid, name, "IN_APP");
+            window.Apxor.logActionEvent("never_show_clicked", uuid, name);
+          };
+          break;
+        default:
+          action = function action() {
+            ActionHandler.cancel(false, "cancel");
+            window.Apxor.logActionEvent(configType + "img" + "_Clicked", uuid, name);
+          };
+      }
+    } catch (e) {
+      console.error("Error setting actions on the image:" + e);
+    }
+    return action;
+  };
   var generateButtonsFromConfig = function generateButtonsFromConfig() {
     var buttons_config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var ActionHandler = arguments.length > 1 ? arguments[1] : undefined;
@@ -7078,8 +7178,8 @@
             break;
           case "redirect":
             action = function action() {
-              var _window$Apxor;
-              if (((_window$Apxor = window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.platform) === "ios") {
+              var _window$Apxor2;
+              if (((_window$Apxor2 = window.Apxor) === null || _window$Apxor2 === void 0 ? void 0 : _window$Apxor2.platform) === "ios") {
                 window.Apxor.logActionEvent(configType + text + "_Clicked", uuid, name);
                 ActionHandler.complete(false, "redirect");
                 window.Apxor.redirectTo(JSON.stringify(action_config));
@@ -11660,8 +11760,8 @@
     var _this = this,
       _config$termination;
     _classCallCheck(this, TemplateContent);
-    _defineProperty(this, "hJkH", function () {
-      var element = _this.jtyP(_this.layout);
+    _defineProperty(this, "KyAi", function () {
+      var element = _this.HjRo(_this.layout);
       //document.body.appendChild(element);
       var tooltipStyles = document.createElement("style");
       tooltipStyles.innerHTML = _this.initialStyles;
@@ -11677,7 +11777,7 @@
       }
       return element;
     });
-    _defineProperty(this, "jtyP", function (config) {
+    _defineProperty(this, "HjRo", function (config) {
       var _window$Apxor;
       var element;
       switch (config.type) {
@@ -11808,7 +11908,7 @@
       if (config.absolute_position_children && config.absolute_position_children.length > 0) {
         element.style.position = "relative";
         config.absolute_position_children.forEach(function (childConfig) {
-          var childElement = _this.jtyP(childConfig);
+          var childElement = _this.HjRo(childConfig);
           childElement.style.position = "absolute";
           for (var _prop in childConfig.offset) {
             childElement.style[_prop] = childConfig.offset[_prop];
@@ -11826,7 +11926,7 @@
         // }
 
         config.children.forEach(function (childConfig) {
-          var childElement = _this.jtyP(childConfig);
+          var childElement = _this.HjRo(childConfig);
           element.appendChild(childElement);
         });
       }
@@ -12729,7 +12829,7 @@
     }, {
       key: "_setInLineContent",
       value: function _setInLineContent() {
-        this.inLineContainer = this.templateContent.hJkH();
+        this.inLineContainer = this.templateContent.KyAi();
       }
     }, {
       key: "_setObservors",
@@ -13285,7 +13385,7 @@
    *  }
    * }
    */
-  var Image = /*#__PURE__*/function () {
+  var Image$1 = /*#__PURE__*/function () {
     function Image() {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       _classCallCheck(this, Image);
@@ -13296,6 +13396,8 @@
       this.background_image = new BackgroundImage(data.background_image);
       this.enable_border = data.enable_border;
       this.border = new Border(data.border);
+      this.enable_action = data === null || data === void 0 ? void 0 : data.enable_action;
+      if (this.enable_action) this.action = data === null || data === void 0 ? void 0 : data.action;
     }
     _createClass(Image, null, [{
       key: "isEnabled",
@@ -14277,7 +14379,7 @@
        * @description Creates the styles for Marketing message.
        * @returns {string} css styles
        */
-      _defineProperty(this, "RiAn", function () {
+      _defineProperty(this, "VrCy", function () {
         if (!_this.enable_marketing) {
           return "";
         }
@@ -14296,7 +14398,7 @@
        * @private
        * @description Sets the marketing content at the end of the Inline
        */
-      _defineProperty(this, "YrUN", function () {
+      _defineProperty(this, "wQRV", function () {
         if (_this.enable_marketing) {
           var marketingContainer = document.createElement("div");
           marketingContainer.classList.add("apx-inline-marketing".concat(_this.cssPostFix));
@@ -14358,7 +14460,7 @@
       this.enable_icon = config.enable_icon;
       if (this.enable_icon) this.icon = new Icon(config.icon);
       this.enable_image = config.enable_image;
-      if (this.enable_image) this.image = new Image(config.image);
+      if (this.enable_image) this.image = new Image$1(config.image);
       this.enable_video = config.enable_video;
       if (this.enable_video) this.video = new Video(config.video);
       this.enable_title = config.enable_title;
@@ -14776,12 +14878,16 @@
             this._setDimenstionFromResolution(this.video.width, this.video.height, scale, calculateFromHeight);
           }
         } else if (this.enable_icon) {
-          if (this.direction.nudge === DIRECTION.VERTICAL) {
-            this.inline_width = "".concat(this.getPixelsFromPercentage(this.width, false), "px");
-          } else {
-            //this.inline_height = `${this.height}%`;
-            this.min_width = "".concat(this.getPixelsFromPercentage(this.width, false), "px");
-          }
+          this.inline_width = "".concat(this.getPixelsFromPercentage(this.width, false), "px");
+          // if (this.direction.nudge === DIRECTION.VERTICAL) {
+          //   this.inline_width = `${this.getPixelsFromPercentage(
+          //     this.width,
+          //     false
+          //   )}px`;
+          // } else {
+          //   //this.inline_height = `${this.height}%`;
+          //   this.min_width = `${this.getPixelsFromPercentage(this.width, false)}px`;
+          // }
         } else {
           if (this.direction.nudge === DIRECTION.VERTICAL) {
             this.inline_width = "".concat(this.getPixelsFromPercentage(this.width, false), "px");
@@ -14898,7 +15004,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.RiAn(), "\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.VrCy(), "\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;
@@ -15708,7 +15814,7 @@
         this._setCloseButton();
 
         //Set the Marketing content
-        this.YrUN();
+        this.wQRV();
       }
 
       /**
@@ -18553,7 +18659,7 @@
     }, {
       key: "_setInAppModalContent",
       value: function _setInAppModalContent() {
-        this.inAppContainer = this.templateContent.hJkH();
+        this.inAppContainer = this.templateContent.KyAi();
         this.inAppContainer.style.zIndex = 99999;
         this.overlayElement.appendChild(this.inAppContainer);
       }
@@ -18701,7 +18807,7 @@
        * @description Creates the styles for Marketing message.
        * @returns {string} css styles
        */
-      _defineProperty(this, "RiAn", function () {
+      _defineProperty(this, "VrCy", function () {
         if (!_this.enable_marketing) {
           return "";
         }
@@ -18747,7 +18853,7 @@
        * @private
        * @description Get the response for Form content in the InApp modal.
        */
-      _defineProperty(this, "Ghij", function (form_elements) {
+      _defineProperty(this, "UrBX", function (form_elements) {
         var obj = {};
         var callback = "";
         form_elements.forEach(function (element) {
@@ -18787,7 +18893,7 @@
        * @private
        * @description Sets the marketing content at the end of the InApp
        */
-      _defineProperty(this, "YrUN", function () {
+      _defineProperty(this, "wQRV", function () {
         if (_this.enable_marketing) {
           var marketingContainer = document.createElement("div");
           marketingContainer.classList.add("apx-inapp-marketing".concat(_this.cssPostFix));
@@ -18827,7 +18933,7 @@
       this.enable_icon = config.enable_icon;
       if (this.enable_icon) this.icon = new Icon(config.icon);
       this.enable_image = config.enable_image;
-      if (this.enable_image) this.image = new Image(config.image);
+      if (this.enable_image) this.image = new Image$1(config.image);
       this.enable_video = config.enable_video;
       if (this.enable_video) this.video = new Video(config.video);
       this.enable_title = config.enable_title;
@@ -19040,7 +19146,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.RiAn(), " \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.VrCy(), " \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;
@@ -19130,6 +19236,9 @@
           case INAPP_POSITION.CENTER:
             positionStylesForContainer = "\n          left:50%;\n          top:50%;\n          -webkit-transform: translate(-50%, -50%);\n          -moz-transform: translate(-50%, -50%);\n        ";
             break;
+          case INAPP_POSITION.FULL_SCREEN:
+            positionStylesForContainer = "\n          top: 0px;\n          left: 0px;\n        ";
+            break;
           default:
             positionStylesForContainer = "\n          left:50%;\n          top:50%;\n          -webkit-transform: translate(-50%, -50%);\n          -moz-transform: translate(-50%, -50%);\n        ";
             break;
@@ -19158,7 +19267,7 @@
         flexStylesForContainer = " ".concat(flexStylesForContainer, "\n      justify-content:space-evenly;\n      align-items:center;\n      display:flex;\n    ");
         var maxWidth = "",
           maxHeight = "",
-          margin = "margin: auto";
+          margin = "margin: auto;";
         if (this.direction.nudge === DIRECTION.HORIZONTAL) {
           if (!(this.enable_image || this.enable_video || this.enable_icon)) {
             maxWidth = "max-width: ".concat(this.max_width);
@@ -19176,7 +19285,7 @@
         }
         //justify-content: space-evenly;
         //align-items:stretch
-        var inappContainerStyles = "\n      .apx-inapp-container".concat(this.cssPostFix, " {\n        height:").concat(this.inapp_height, ";\n        width:").concat(this.inapp_width, ";\n        background-color:").concat(this.background_color, ";\n        z-index:9999;\n        opacity:0;\n        transition:all .5s cubic-bezier(.96,.23,.07,.8);\n        position:fixed;\n        visibility:hidden;\n\n        ").concat(minWidthStyle, "\n        ").concat(flexStylesForContainer, "\n        ").concat(paddingStylesForContainer, "\n        ").concat(borderStylesForContainer, "\n        ").concat(gradientStylesForContainer, "\n        ").concat(shadowStylesForContainer, "\n        ").concat(positionStylesForContainer, "\n        ").concat(maxWidth, "\n        ").concat(maxHeight, "\n        ").concat(margin, "\n      }\n      \n      .apx-inapp-container").concat(this.cssPostFix, ".open{\n        opacity:1;\n        visibility:visible;\n      }\n    ");
+        var inappContainerStyles = "\n      .apx-inapp-container".concat(this.cssPostFix, " {\n        height:").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "100%" : this.inapp_height, ";\n        width:").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "100%" : this.inapp_width, ";\n        background-color:").concat(this.background_color, ";\n        z-index:9999;\n        opacity:0;\n        transition:all .5s cubic-bezier(.96,.23,.07,.8);\n        position:fixed;\n        visibility:hidden;\n\n        ").concat(minWidthStyle, "\n        ").concat(flexStylesForContainer, "\n        ").concat(paddingStylesForContainer, "\n        ").concat(borderStylesForContainer, "\n        ").concat(gradientStylesForContainer, "\n        ").concat(shadowStylesForContainer, "\n        ").concat(positionStylesForContainer, "\n        ").concat(maxWidth, "\n        ").concat(maxHeight, "\n        ").concat(margin, "\n        ").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "box-sizing: border-box" : "", "\n      }\n      \n      .apx-inapp-container").concat(this.cssPostFix, ".open{\n        opacity:1;\n        visibility:visible;\n      }\n    ");
         return inappContainerStyles;
       }
 
@@ -19229,7 +19338,7 @@
     }, {
       key: "_getInAppMediaContainerStyles",
       value: function _getInAppMediaContainerStyles() {
-        var inappMediaContainerStyles = "\n    .apx-inapp-media-container".concat(this.cssPostFix, "{\n      ").concat(this.enable_icon ? "align-self:".concat(this.icon.alignment, ";") : "", "\n      ").concat(this.enable_image || this.enable_video ? "display:flex;" : "", "\n      }");
+        var inappMediaContainerStyles = "\n    .apx-inapp-media-container".concat(this.cssPostFix, "{\n      ").concat(this.enable_icon ? "align-self:".concat(this.icon.alignment, ";") : "", "\n      ").concat(this.enable_image || this.enable_video ? "display:flex;" : "", "\n      ").concat(this.position.position === INAPP_POSITION.FULL_SCREEN && (this.enable_image || this.enable_video) ? "flex-grow:1" : "", "\n      }");
         return inappMediaContainerStyles;
       }
 
@@ -19406,7 +19515,7 @@
             if (this.image.enable_border) {
               imageBorderStyles = "\n          border-radius:".concat(this.image.border.radius, "%;\n          border:").concat(this.image.border.width, "px ").concat(this.image.border.style, " ").concat(this.image.border.color, ";\n          ");
             }
-            imageStyles = "\n        .apx-inapp-image".concat(this.cssPostFix, "{\n          height: ").concat(this.media_height, ";\n          width: ").concat(this.media_width, ";\n          ").concat(imageBorderStyles, "\n        }\n      ");
+            imageStyles = "\n        .apx-inapp-image".concat(this.cssPostFix, "{\n          height: ").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "100%" : this.media_height, ";\n          width: ").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "100%" : this.media_width, ";\n          ").concat(imageBorderStyles, "\n          ").concat(this.position.position === INAPP_POSITION.FULL_SCREEN ? "box-sizing: border-box;" : "", "\n        }\n      ");
           }
         }
         return imageStyles;
@@ -19517,7 +19626,7 @@
         this._setCloseButton();
 
         //Set the Marketing content
-        this.YrUN();
+        this.wQRV();
       }
 
       /**
@@ -19560,15 +19669,42 @@
     }, {
       key: "_setImageOptions",
       value: function _setImageOptions() {
+        var _this4 = this;
         if (this.enable_image) {
+          var action;
+          if (this.image.enable_action) {
+            var overlay = this.overlayElement;
+            var actionCallback = function actionCallback(isCancelled, action) {
+              clearTimeout(_this4.terminationTimeoutId);
+              _this4.closeCallback(overlay, action, "new-inline".concat(_this4.cssPostFix), _this4.closeListener, _this4.redirectionListener);
+            };
+            var next_Callback = function next_Callback(id, action) {
+              actionCallback(false, "next");
+              _this4.stepperCallBack(id, action);
+            };
+            var prev_Callback = function prev_Callback(id, action) {
+              actionCallback(false, "prev");
+              _this4.stepperCallBack(id, action);
+            };
+            var actionHandler = {
+              next: next_Callback,
+              prev: prev_Callback,
+              complete: actionCallback,
+              cancel: actionCallback,
+              _isCancelled: false,
+              action: ""
+            };
+            action = setImgAction(this.image.action, actionHandler, this.configId, this.name);
+          }
           if (this.image.enable_background_image) {
             this.inAppContainer.classList.add("apx-inapp-image".concat(this.cssPostFix));
           } else {
-            //const imgDiv = document.createElement("div");
             var imgElement = document.createElement("img");
             imgElement.src = this.image.path;
             imgElement.classList.add("apx-inapp-image".concat(this.cssPostFix));
-            //imgDiv.appendChild(imgElement);
+            if (this.image.enable_action) imgElement.onclick = function () {
+              return action();
+            };
             this.mediaContainer.appendChild(imgElement);
           }
         }
@@ -19708,7 +19844,7 @@
        * @description Sets the form content in the InApp modal.
        */
       function _setFormContent() {
-        var _this4 = this;
+        var _this5 = this;
         if (this.enable_form) {
           var _this$form$elements;
           var formContainer = document.createElement("form");
@@ -19722,14 +19858,14 @@
           var form = document.querySelector(".apx-inapp-form-container".concat(this.cssPostFix));
           form.addEventListener("submit", function (e) {
             e.preventDefault();
-            var _this4$generateRespon = _this4.Ghij(_this4.form.elements),
-              obj = _this4$generateRespon.obj,
-              callback = _this4$generateRespon.callback;
+            var _this5$generateRespon = _this5.UrBX(_this5.form.elements),
+              obj = _this5$generateRespon.obj,
+              callback = _this5$generateRespon.callback;
             var evalString = "(obj)=>" + callback + "(obj)";
             var evalFunction = eval(evalString);
             evalFunction(obj);
-            clearTimeout(_this4.terminationTimeoutId);
-            _this4.closeCallback(_this4.overlayElement, "dismiss", ".apx-inapp-container".concat(_this4.cssPostFix), _this4.closeListener, _this4.redirectionListener);
+            clearTimeout(_this5.terminationTimeoutId);
+            _this5.closeCallback(_this5.overlayElement, "dismiss", ".apx-inapp-container".concat(_this5.cssPostFix), _this5.closeListener, _this5.redirectionListener);
           });
         }
       }
@@ -19829,23 +19965,23 @@
     }, {
       key: "_setButtons",
       value: function _setButtons(position) {
-        var _this5 = this;
+        var _this6 = this;
         if (!this.enable_buttons) {
           return;
         }
         if (position === BUTTON_CONTAINER_POSITION.TOP && this.buttons.enable_top || position === BUTTON_CONTAINER_POSITION.CENTER && this.buttons.enable_center || position === BUTTON_CONTAINER_POSITION.BOTTOM && this.buttons.enable_bottom) {
           var overlay = this.overlayElement;
           var actionCallback = function actionCallback(isCancelled, action) {
-            clearTimeout(_this5.terminationTimeoutId);
-            _this5.closeCallback(overlay, action, "new-inline".concat(_this5.cssPostFix), _this5.closeListener, _this5.redirectionListener);
+            clearTimeout(_this6.terminationTimeoutId);
+            _this6.closeCallback(overlay, action, "new-inline".concat(_this6.cssPostFix), _this6.closeListener, _this6.redirectionListener);
           };
           var next_Callback = function next_Callback(id, action) {
             actionCallback(false, "next");
-            _this5.stepperCallBack(id, action);
+            _this6.stepperCallBack(id, action);
           };
           var prev_Callback = function prev_Callback(id, action) {
             actionCallback(false, "prev");
-            _this5.stepperCallBack(id, action);
+            _this6.stepperCallBack(id, action);
           };
           var actionHandler = {
             next: next_Callback,
@@ -19887,7 +20023,7 @@
     }, {
       key: "_setCloseButton",
       value: function _setCloseButton() {
-        var _this6 = this;
+        var _this7 = this;
         if (this.enable_close_button) {
           var closeButton = document.createElement("span");
           // Close button SVG is decided based on the type of the button in the config.
@@ -19904,13 +20040,13 @@
           }
           closeButton.classList.add("apx-inapp-close".concat(this.cssPostFix));
           closeButton.addEventListener("click", function () {
-            if (_this6.close_button.action === "dismiss") {
-              window.Apxor.logActionEvent(EVENT_PREFIX.INAPP + "InAppXIconClicked" + "_Clicked", _this6.configId, _this6.name);
-            } else if (_this6.close_button.action === "cancel") {
-              window.Apxor.logActionEvent("walk_through_cancelled", _this6.configId, _this6.name);
+            if (_this7.close_button.action === "dismiss") {
+              window.Apxor.logActionEvent(EVENT_PREFIX.INAPP + "InAppXIconClicked" + "_Clicked", _this7.configId, _this7.name);
+            } else if (_this7.close_button.action === "cancel") {
+              window.Apxor.logActionEvent("walk_through_cancelled", _this7.configId, _this7.name);
             }
-            clearTimeout(_this6.terminationTimeoutId);
-            _this6.closeCallback(_this6.overlayElement, _this6.close_button.action, ".apx-inapp-container".concat(_this6.cssPostFix), _this6.closeListener, _this6.redirectionListener);
+            clearTimeout(_this7.terminationTimeoutId);
+            _this7.closeCallback(_this7.overlayElement, _this7.close_button.action, ".apx-inapp-container".concat(_this7.cssPostFix), _this7.closeListener, _this7.redirectionListener);
           });
           this.direction.non_media === DIRECTION.VERTICAL || this.direction.nudge === DIRECTION.VERTICAL ? this.inAppContainer.appendChild(closeButton) : this.buttonContainer.appendChild(closeButton);
         }
@@ -19924,10 +20060,10 @@
        * @description If the auto dismiss is enabled, sets the timeout to call the InApp close.
        */
       function _setAutoTerminate() {
-        var _this7 = this;
+        var _this8 = this;
         if (this.terminationConfig.auto_dismiss === true) {
           this.terminationTimeoutId = window.setTimeout(function () {
-            _this7.closeCallback(_this7.overlayElement, "dismiss", ".apx-inapp-container".concat(_this7.cssPostFix), _this7.closeListener, _this7.redirectionListener);
+            _this8.closeCallback(_this8.overlayElement, "dismiss", ".apx-inapp-container".concat(_this8.cssPostFix), _this8.closeListener, _this8.redirectionListener);
           }, this.terminationConfig.duration);
         }
       }
@@ -20080,7 +20216,7 @@
             };
           } else {
             // As the video player is hidden by default, unhide if the mode is not PIP.
-            _this.qlGO();
+            _this.lZpS();
           }
           _this.showCallback();
         } catch (e) {
@@ -20101,7 +20237,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, "Vjvf", function () {
+      _defineProperty(this, "Bntg", function () {
         var _getHeightWidthFromRe = getHeightWidthFromResolution(_this.video, 1),
           width = _getHeightWidthFromRe.width,
           height = _getHeightWidthFromRe.height;
@@ -20113,7 +20249,7 @@
        * @private
        * @description Removes the video player style element.
        */
-      _defineProperty(this, "MXZq", function () {
+      _defineProperty(this, "mCTB", function () {
         var playerStyles = document.getElementById("apx-mpl-styles");
         if (playerStyles) {
           playerStyles.remove();
@@ -20124,7 +20260,7 @@
        * @private
        * @description Attach listeners on the video controls
        */
-      _defineProperty(this, "SZZs", function () {
+      _defineProperty(this, "vJMI", 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");
@@ -20239,7 +20375,7 @@
        * @private
        * @description Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
        */
-      _defineProperty(this, "ULkp", function () {
+      _defineProperty(this, "sHYh", 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,
@@ -20279,7 +20415,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, "FYKO", function () {
+      _defineProperty(this, "WaDM", function () {
         _this.enable_close_button;
         if (_this.enable_close_button) {
           var closeButton = document.createElement("span");
@@ -20326,21 +20462,21 @@
        * @function hideVideoPlayer
        * @description Sets the visibility of the video player to hidden.
        */
-      _defineProperty(this, "rupR", function () {
+      _defineProperty(this, "TNFE", function () {
         _this.videoPlayer.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function unhideVideoPlayer
        * @description Unhides video player.
        */
-      _defineProperty(this, "qlGO", function () {
+      _defineProperty(this, "lZpS", function () {
         _this.videoPlayer.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function getVideoElement
        * @returns {HTMLElement} Video ekement
        */
-      _defineProperty(this, "UFZT", function () {
+      _defineProperty(this, "FXhx", function () {
         return _this.videoElement;
       });
       this.videoPlayer = null;
@@ -20392,7 +20528,7 @@
         this.videoPlayer.style.backgroundColor = this.bg_color;
 
         // Video has a resolution, not deviating from the resolution set the height and width.
-        this.Vjvf();
+        this.Bntg();
         //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.
@@ -20400,16 +20536,16 @@
         //Create a video element,set the source and add to the container.
         this._setPlayerContent();
         //Set the listeners on the video control buttons.
-        this.SZZs();
+        this.vJMI();
         //Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
-        this.ULkp();
+        this.sHYh();
         //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.FYKO();
+        this.WaDM();
         //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.rupR();
+        this.TNFE();
         //If the auto dismiss is enabled, sets the timeout to call the InApp close.
         this._setAutoTerminate();
         document.body.appendChild(this.videoPlayer);
@@ -20524,7 +20660,7 @@
             }
           }
           this.videoPlayer.remove();
-          this.MXZq();
+          this.mCTB();
           if (closeButtonName !== "auto_dismiss") {
             var _window$ApxorRTM9;
             (_window$ApxorRTM9 = window.ApxorRTM) === null || _window$ApxorRTM9 === void 0 || _window$ApxorRTM9.logEvent("apx_video_inapp_close_button_clicked", {
@@ -20594,7 +20730,7 @@
                 replayCount: _this3.replayCount
               });
               _this3.videoPlayer.remove();
-              _this3.MXZq();
+              _this3.mCTB();
               _this3.hideCallback();
             } catch (e) {
               console.log("Can't close the video player\n".concat(e));
@@ -20681,17 +20817,23 @@
 
   var EmbedCards = /*#__PURE__*/_createClass(function EmbedCards(_config, configId, name, showCallback, closeCallback) {
     var _this = this,
+      _config$wait_interval,
       _config$termination;
     _classCallCheck(this, EmbedCards);
     _defineProperty(this, "showEmbedCards", function () {
       try {
         var _window;
         (_window = window) === null || _window === void 0 || (_window = _window.ApxorLogger) === null || _window === void 0 || _window.debug("called showEmbedCards");
-        var element = _this.QrCq(_this.layout);
-        _this.GVvf();
+        var element = _this.VvNT(_this.layout);
+        _this.XCRi();
         window.onresize = function () {
-          _this.Kitu();
+          _this.NiOI();
         };
+        _this.imageElements.forEach(function (img) {
+          img.addEventListener("error", function () {
+            _this.YaYk("provided image doesn't exists");
+          });
+        });
         var rootContainer = document.createElement("div");
         rootContainer.style.display = "flex";
         rootContainer.style.justifyContent = "center";
@@ -20700,7 +20842,7 @@
         var styleElement = document.createElement("style");
         styleElement.innerHTML = _this.styleContent;
         document.head.appendChild(styleElement);
-        _this.QOPs(_this.termination);
+        _this.SafO(_this.termination);
         try {
           eval(_this.script);
         } catch (e) {
@@ -20708,55 +20850,44 @@
           console.log("found error while executing script: ".concat(e));
           (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.ApxorLogger) === null || _window2 === void 0 || _window2.error("found error while executing script: ".concat(e === null || e === void 0 ? void 0 : e.name, " ").concat(e === null || e === void 0 ? void 0 : e.message));
         }
-        var videoStatusCheck = function videoStatusCheck() {
-          _this.intervalToCheckVideoStatus = setInterval(function () {
-            _this.waitInterval = _this.waitInterval - 1;
-            if (_this.waitInterval === 0) {
-              var _window$ApxorRTM, _window3;
-              clearInterval(_this.intervalToCheckVideoStatus);
-              (_window$ApxorRTM = window.ApxorRTM) === null || _window$ApxorRTM === void 0 || _window$ApxorRTM.logEvent("apx_nudge_not_shown", {
-                campaignName: _this.name,
-                id: _this.configId,
-                apx_nudge_type: "sticky_card",
-                apx_notshown_type: "error",
-                apx_reason: "provided video doesn't exists"
-              });
-              window.onresize = null;
-              (_window3 = window) === null || _window3 === void 0 || (_window3 = _window3.ApxorWidget) === null || _window3 === void 0 || _window3.removeEmbedCard(_this.configId);
-              _this.waitInterval = 30;
-            }
-            if (_this.BhLQ()) {
-              _this.waitInterval = 30;
-              _this.Kitu();
-              clearInterval(_this.intervalToCheckVideoStatus);
+        _this.intervalToCheckMediaLoadingStatus = setInterval(function () {
+          _this.wait_interval -= 1;
+          if (_this.wait_interval <= 0) {
+            _this.YaYk("provided media doesn't exists");
+          } else {
+            if (_this.PXQj() && _this.DZYh()) {
+              _this.NiOI();
+              clearInterval(_this.intervalToCheckMediaLoadingStatus);
             }
-          }, 100);
-        };
-        _this.intervalToCheckImgStatus = setInterval(function () {
-          _this.waitInterval = _this.waitInterval - 1;
-          if (_this.waitInterval === 0) {
-            clearInterval(_this.intervalToCheckImgStatus);
-            _this.waitInterval = 30;
-          }
-          if (_this.wMuZ()) {
-            _this.waitInterval = 30;
-            clearInterval(_this.intervalToCheckImgStatus);
-            _this.videoElements.length > 0 ? videoStatusCheck() : _this.Kitu();
           }
         }, 100);
       } catch (e) {
-        var _window4;
+        var _window3;
         console.log("failed while creating embed card with error ".concat(e));
-        (_window4 = window) === null || _window4 === void 0 || (_window4 = _window4.ApxorLogger) === null || _window4 === void 0 || _window4.error("failed while creating embed card with error: ".concat(e === null || e === void 0 ? void 0 : e.name, " ").concat(e === null || e === void 0 ? void 0 : e.message));
+        (_window3 = window) === null || _window3 === void 0 || (_window3 = _window3.ApxorLogger) === null || _window3 === void 0 || _window3.error("failed while creating embed card with error: ".concat(e === null || e === void 0 ? void 0 : e.name, " ").concat(e === null || e === void 0 ? void 0 : e.message));
       }
     });
-    _defineProperty(this, "GVvf", function () {
+    _defineProperty(this, "YaYk", function (reason) {
+      var _window$ApxorRTM, _window4;
+      !_this.loggedNudgeNotShownEvent && ((_window$ApxorRTM = window.ApxorRTM) === null || _window$ApxorRTM === void 0 ? void 0 : _window$ApxorRTM.logEvent("apx_nudge_not_shown", {
+        campaignName: _this.name,
+        id: _this.configId,
+        apx_nudge_type: "sticky_card",
+        apx_notshown_type: "error",
+        apx_reason: reason
+      }));
+      _this.loggedNudgeNotShownEvent = true;
+      window.onresize = null;
+      clearInterval(_this.intervalToCheckMediaLoadingStatus);
+      (_window4 = window) === null || _window4 === void 0 || (_window4 = _window4.ApxorWidget) === null || _window4 === void 0 || _window4.removeEmbedCard(_this.configId);
+    });
+    _defineProperty(this, "XCRi", function () {
       var EmbeddedCardsStyles = document.createElement("style");
       EmbeddedCardsStyles.innerHTML = _this.initialStyles;
       EmbeddedCardsStyles.setAttribute("apx-tooltip-styles", "");
       document.head.appendChild(EmbeddedCardsStyles);
     });
-    _defineProperty(this, "QrCq", function (config) {
+    _defineProperty(this, "VvNT", function (config) {
       var _window$Apxor;
       var element;
       switch (config.type) {
@@ -20948,7 +21079,7 @@
       if (config.absolute_position_children && config.absolute_position_children.length > 0) {
         element.style.position = "relative";
         config.absolute_position_children.forEach(function (childConfig) {
-          var childElement = _this.jtyP(childConfig);
+          var childElement = _this.HjRo(childConfig);
           childElement.style.position = "absolute";
           for (var _prop in childConfig.offset) {
             childElement.style[_prop] = childConfig.offset[_prop];
@@ -20966,7 +21097,7 @@
         // }
 
         config.children.forEach(function (childConfig) {
-          var childElement = _this.QrCq(childConfig);
+          var childElement = _this.VvNT(childConfig);
           element.appendChild(childElement);
         });
       }
@@ -20992,7 +21123,7 @@
       }
       return element;
     });
-    _defineProperty(this, "QOPs", function (config) {
+    _defineProperty(this, "SafO", function (config) {
       config.forEach(function (id) {
         var element = document.getElementById(id);
         if (element) {
@@ -21000,17 +21131,21 @@
         }
       });
     });
-    _defineProperty(this, "wMuZ", function () {
+    _defineProperty(this, "DZYh", function () {
+      //This logic is to make sure that image has loaded, it doesn't check whether image is broken
+      //refer: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete#value
+      if (_this.imageElements.length === 0) return true;
       return _this.imageElements.every(function (img) {
         return img.complete;
       });
     });
-    _defineProperty(this, "BhLQ", function () {
+    _defineProperty(this, "PXQj", function () {
+      if (_this.videoElements.length === 0) return true;
       return _this.videoElements.every(function (video) {
         return video.readyState >= 3;
       });
     });
-    _defineProperty(this, "Kitu", function () {
+    _defineProperty(this, "NiOI", function () {
       var _window6, _window7;
       var width = window.document.querySelector("html").offsetWidth;
       var height = window.document.querySelector("html").offsetHeight;
@@ -21027,29 +21162,1602 @@
     this.closeCallback = closeCallback;
     this.layout = _config.layout;
     this.styleContent = _config.css;
+    this.wait_interval = (_config$wait_interval = _config === null || _config === void 0 ? void 0 : _config.wait_interval) !== null && _config$wait_interval !== void 0 ? _config$wait_interval : 5000 / 100;
     this.termination = (_config$termination = _config.termination) !== null && _config$termination !== void 0 ? _config$termination : [];
     this.script = _config.script;
     this.initialStyles = "";
     this.imageElements = [];
     this.videoElements = [];
-    this.intervalToCheckImgStatus;
-    this.waitInterval = 30;
+    this.intervalToCheckMediaLoadingStatus = null;
     this.loggedNudgeShownEvent = false;
+    this.loggedNudgeNotShownEvent = false;
   });
 
+  /**
+   * @constructor ProgressBar
+   * @example
+   * Example of a ProgressBar model is
+   *
+   * progress_bar: {
+   *    seen_color : #e0d210,
+   *    unseen_color : #ffffff,
+   * }
+   */
+  var ProgressBar$1 = /*#__PURE__*/_createClass(function ProgressBar() {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, ProgressBar);
+    this.seen_color = getColorOrDefault(data === null || data === void 0 ? void 0 : data.seen_color, "#FFFFFF");
+    this.unseen_color = getColorOrDefault(data === null || data === void 0 ? void 0 : data.unseen_color, "#000000");
+  });
+
+  var Stories = /*#__PURE__*/function () {
+    function Stories(_config, configId, name, position, slidesSeenCount, view_id, showCallback, closeCallback) {
+      var _this = this;
+      _classCallCheck(this, Stories);
+      _defineProperty(this, "showStories", function () {
+        _this.storyContainer = document.createElement("div");
+        _this.storyContainer.classList.add("pause");
+        _this.storyContainer.style = "height:100%;display:flex;align-items:center;";
+        _this.progressContainer = document.createElement("div");
+        _this._getStoriesStyles();
+        _this.progressContainer.classList.add("progress-container");
+
+        // Create custom loader element
+        _this.loader = document.createElement("div");
+        _this.loader.classList.add("loader-1", "center");
+        var loaderSpan = document.createElement("span");
+        _this.loader.appendChild(loaderSpan);
+        _this.storyContainer.appendChild(_this.loader);
+        var loaderStyles = "\n          *,\n          ::after,\n          ::before {\n            box-sizing: border-box;\n          }\n          .loader-1 {\n            height: 32px;\n            width: 32px;\n            animation: loader-1-1 4.8s linear infinite;\n          }\n          @keyframes loader-1-1 {\n            0% {\n              transform: rotate(0deg);\n            }\n            100% {\n              transform: rotate(360deg);\n            }\n          }\n          .loader-1 span {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            margin: auto;\n            height: 32px;\n            width: 32px;\n            clip: rect(0, 32px, 32px, 16px);\n            animation: loader-1-2 1.2s linear infinite;\n          }\n          @keyframes loader-1-2 {\n            0% {\n              transform: rotate(0deg);\n            }\n            100% {\n              transform: rotate(220deg);\n            }\n          }\n          .loader-1 span::after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            margin: auto;\n            height: 32px;\n            width: 32px;\n            clip: rect(0, 32px, 32px, 16px);\n            border: 3px solid #fff;\n            border-radius: 50%;\n            animation: loader-1-3 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;\n          }\n          @keyframes loader-1-3 {\n            0% {\n              transform: rotate(-140deg);\n            }\n            50% {\n              transform: rotate(-160deg);\n            }\n            100% {\n              transform: rotate(140deg);\n            }\n          }\n          .center {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            margin: auto;\n          }\n        ";
+        var styleSheet = document.createElement("style");
+        styleSheet.type = "text/css";
+        styleSheet.innerText = loaderStyles;
+        document.head.appendChild(styleSheet);
+        _this.slides.forEach(function (slide, index) {
+          var progressSlide = document.createElement("div");
+          progressSlide.classList.add("slide".concat(index));
+          progressSlide.classList.add("progress");
+          var slide_duration = slide.duration / 1000;
+          progressSlide.style.animationDuration = "".concat(slide_duration, "s");
+          _this.progressContainer.appendChild(progressSlide);
+        });
+        _this.storyContainer.appendChild(_this.progressContainer);
+        var breakElement = document.createElement("br");
+        _this.storyContainer.appendChild(breakElement);
+        var currentElement = document.createElement("div");
+        currentElement.classList.add("slide-header");
+        currentElement.style = "position:relative;top:20px;";
+        var slideDetails = document.createElement("div");
+        slideDetails.classList.add("slide-details");
+        slideDetails.style = "display:flex;align-items:center;height:auto;width:100%";
+        _this.storyContainer.appendChild(currentElement);
+        _this.storyContainer.appendChild(slideDetails);
+        document.body.appendChild(_this.storyContainer);
+        _this.UhcC();
+        _this.yUQd();
+        _this.progress = Array.from(document.querySelectorAll(".progress"));
+        var current_slide = document.querySelector(".slide-details");
+        var playNext = function playNext(e) {
+          var _absolute_header, _window2, _window2$logInternalE, _window$ApxorRTM4;
+          var current = e && e.target;
+          var next;
+          var progress1 = Array.from(document.querySelectorAll(".progress"));
+          var activeIndex1 = progress1.findIndex(function (el) {
+            return el.classList.contains("active");
+          });
+          var current_time = Date.now();
+          var time_taken;
+          time_taken = (current_time - _this.slideStartTime) / 1000;
+          if (activeIndex1 != -1) {
+            var _window$ApxorRTM;
+            (_window$ApxorRTM = window.ApxorRTM) === null || _window$ApxorRTM === void 0 || _window$ApxorRTM.logEvent("apx_slide_completed", {
+              apx_nudge_id: _this.config[_this.position].id,
+              apx_nudge_name: _this.config[_this.position].campaign_name,
+              apx_template_name: "stories",
+              apx_variant_code: _this.config[_this.position].variant_code,
+              apx_slide_number: activeIndex1 + 1,
+              apx_slide_label: _this.current_slide_config.slide_label,
+              apx_time_taken: time_taken
+            });
+          }
+          if (current) {
+            var currentIndex = _this.progress.indexOf(current);
+            if (currentIndex < _this.progress.length - 1) {
+              // If there are more slides in the current story group
+              _this.storyContainer.removeEventListener("touchend", _this.boundSwipeUpHandling);
+              var _existingAbsoluteElements = document.querySelectorAll(".apx-slide-header");
+              _existingAbsoluteElements.forEach(function (element) {
+                element.remove();
+              });
+              var currentSlideDetails = document.querySelector(".slide-details");
+              currentSlideDetails.innerHTML = "";
+              next = _this.progress[currentIndex + 1];
+            } else {
+              _this.storyContainer.removeEventListener("touchend", _this.boundSwipeUpHandling);
+              // If it's the last slide of the current story group
+              // Check if there's a next story group
+              var _existingAbsoluteElements2 = document.querySelectorAll(".apx-slide-header");
+              _existingAbsoluteElements2.forEach(function (element) {
+                element.remove();
+              });
+              // this.Voll();
+              var _currentSlideDetails = document.querySelector(".slide-details");
+              _currentSlideDetails.innerHTML = "";
+              _this.position = _this.position + 1;
+              var nextGroupIndex = _this.position;
+              if (nextGroupIndex < _this.config.length) {
+                var _window$ApxorRTM2;
+                _this.progressContainer.innerHTML = "";
+                // Redirect to the first slide of the next story group
+                var nextGroupSlides = _this.config[nextGroupIndex].slides;
+                _this.progress_bar = new ProgressBar$1(_this.config[nextGroupIndex].progress_bar);
+                _this.slides = nextGroupSlides;
+                _this.slides.forEach(function (slide, index) {
+                  var progressSlide = document.createElement("div");
+                  progressSlide.classList.add("slide".concat(index));
+                  progressSlide.classList.add("progress");
+                  var slide_duration = slide.duration / 1000;
+                  progressSlide.style.animationDuration = "".concat(slide_duration, "s");
+                  _this.progressContainer.appendChild(progressSlide);
+                });
+                _this.progress = Array.from(document.querySelectorAll(".progress"));
+                _this.progress.map(function (el) {
+                  return el.addEventListener("animationend", playNext, false);
+                });
+                next = _this.progress[0];
+                _this.current_slide_config = _this.config[_this.position].slides;
+                _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                var timeTaken;
+                var _current_time = Date.now();
+                timeTaken = (_current_time - _this.slideStartTime) / 1000;
+                (_window$ApxorRTM2 = window.ApxorRTM) === null || _window$ApxorRTM2 === void 0 || _window$ApxorRTM2.logEvent("apx_story_changed", {
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_template_name: "stories",
+                  apx_variant_code: _this.config[_this.position].variant_code,
+                  apx_slide_number: 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType,
+                  apx_change_action: "autoplay",
+                  apx_time_taken: timeTaken
+                });
+              } else {
+                if (currentIndex === _this.progress.length - 1) {
+                  var _window, _window$logInternalEv, _window$ApxorRTM3;
+                  //this is the last slide of last story group hence close the current story group
+
+                  var progressContainer = document.querySelector(".progress-container");
+                  var progressSegments = progressContainer.querySelectorAll(".progress");
+                  progressSegments[progressSegments.length - 1].classList.add("passed");
+                  (_window = window) === null || _window === void 0 || (_window = _window.Apxor) === null || _window === void 0 || (_window$logInternalEv = _window.logInternalEvent) === null || _window$logInternalEv === void 0 || _window$logInternalEv.call(_window, "story_slides_closed");
+                  _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                  (_window$ApxorRTM3 = window.ApxorRTM) === null || _window$ApxorRTM3 === void 0 || _window$ApxorRTM3.logEvent("apx_slide_closed", {
+                    apx_nudge_id: _this.config[_this.position].id,
+                    apx_nudge_name: _this.config[_this.position].campaign_name,
+                    apx_template_name: "stories",
+                    apx_variant_code: _this.config[_this.position].variant_code,
+                    apx_slide_number: currentIndex + 1,
+                    apx_slide_label: _this.current_slide_config.slide_label,
+                    apx_slide_type: _this.currentMediaType
+                  });
+                  return;
+                }
+              }
+            }
+            current.classList.remove("active");
+            current.classList.add("passed");
+          }
+          if (!next) {
+            _this.progress.forEach(function (el) {
+              el.classList.remove("active");
+              el.classList.remove("passed");
+            });
+            next = _this.progress[_this.slidesSeenCount];
+            var _progressContainer = document.querySelector(".progress-container");
+            var _progressSegments = _progressContainer.querySelectorAll(".progress");
+            for (var i = 0; i < _this.slidesSeenCount; i++) {
+              var _progressSegments$i;
+              (_progressSegments$i = _progressSegments[i]) === null || _progressSegments$i === void 0 || _progressSegments$i.classList.add("passed");
+            }
+          }
+          next.classList.add("active");
+          var current_slide_from_config = _this.slides[_this.progress.indexOf(next)];
+          _this.current_slide_config = current_slide_from_config;
+          var slide_header = document.querySelectorAll(".slide_header");
+          if (slide_header.length > 0) {
+            slide_header[0].remove();
+          }
+          //remove existing existing header elements
+          var existingAbsoluteElements = document.querySelectorAll(".apx-slide-header");
+          existingAbsoluteElements.forEach(function (element) {
+            element.remove();
+          });
+          var absolute_header;
+          absolute_header = document.createElement("div");
+          current_slide_from_config.layout.absolute_position_children.forEach(function (current_element) {
+            var current_absolute_element;
+            current_absolute_element = _this.HjRo(current_element);
+            absolute_header.appendChild(current_absolute_element);
+          });
+          (_absolute_header = absolute_header) === null || _absolute_header === void 0 || _absolute_header.classList.add("apx-slide-header");
+          document.body.appendChild(absolute_header);
+          var element;
+          if (current_slide_from_config.media_type === "image") {
+            var _window$Apxor;
+            element = document.createElement("div");
+            var image_src;
+            var image_ext;
+            if (((_window$Apxor = window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.platform) != "ios") {
+              image_ext = getFileExtension(current_slide_from_config.media_url);
+              image_src = window.Apxor.getFilePath(_this.config[_this.position].id, current_slide_from_config.media_url, image_ext);
+              if (image_src && image_src != "") {
+                document.body.style.backgroundImage = "url(".concat(image_src, ")");
+                document.body.style.backgroundSize = "100% auto";
+                document.body.style.backgroundPosition = "center";
+                document.body.style.backgroundRepeat = "no-repeat";
+              } else {
+                document.body.style.backgroundImage = "url(".concat(current_slide_from_config.media_url, ")");
+                document.body.style.backgroundSize = "100% auto";
+                document.body.style.backgroundPosition = "center";
+                document.body.style.backgroundRepeat = "no-repeat";
+              }
+            } else {
+              document.body.style.backgroundImage = "url(".concat(current_slide_from_config.media_url, ")");
+              document.body.style.backgroundSize = "100% auto";
+              document.body.style.backgroundPosition = "center";
+              document.body.style.backgroundRepeat = "no-repeat";
+            }
+            document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+            document.body.style.margin = "0px";
+          } else if (current_slide_from_config.media_type === "video") {
+            var _window$Apxor2;
+            document.body.style.backgroundImage = "";
+            document.body.style.backgroundSize = "";
+            document.body.style.backgroundPosition = "";
+            document.body.style.backgroundRepeat = "";
+            element = document.createElement("video");
+            element.classList.add("apx-story-video");
+            element.disablePictureInPicture = true;
+            element.autoplay = true;
+            var sourceElement = document.createElement("source");
+            //Set the video tag attributes
+            sourceElement.setAttribute("src", current_slide_from_config.media_url);
+            sourceElement.setAttribute("type", "video/mp4");
+            if (((_window$Apxor2 = window.Apxor) === null || _window$Apxor2 === void 0 ? void 0 : _window$Apxor2.platform) === "ios") {
+              element.playsInline = true;
+            }
+            element.appendChild(sourceElement);
+            element.style = "width:100%;height:auto;align-items:center;display:flex;align-items:center;object-fit:cover";
+            document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+            document.body.style.margin = "0px";
+          } else if (current_slide_from_config.media_type === "none") {
+            document.body.style.backgroundImage = "";
+            document.body.style.backgroundSize = "";
+            document.body.style.backgroundPosition = "";
+            document.body.style.backgroundRepeat = "";
+            var updated_layout_without_absolute_elements = JSON.parse(JSON.stringify(current_slide_from_config.layout));
+            delete updated_layout_without_absolute_elements["absolute_position_children"];
+            element = _this.HjRo(updated_layout_without_absolute_elements);
+            document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+            document.body.style.margin = "0px";
+          }
+          if (current_slide.children.length > 0) {
+            current_slide.removeChild(current_slide.children[0]);
+          }
+          current_slide.appendChild(element);
+          _this.Jwju();
+          window.intervalToCheckImgStatus = setInterval(function () {
+            if (_this.rnGL()) {
+              clearInterval(window.intervalToCheckImgStatus);
+            }
+          }, 500);
+          (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.Apxor) === null || _window2 === void 0 || (_window2$logInternalE = _window2.logInternalEvent) === null || _window2$logInternalE === void 0 || _window2$logInternalE.call(_window2, "story_slide_seen", JSON.stringify({
+            config_id: _this.config[_this.position].id,
+            position: _this.position,
+            index: parseInt(_this.progress.indexOf(next)) + 1,
+            view_id: _this.view_id
+          }));
+          var currentTime = Date.now();
+          _this.slideStartTime = currentTime;
+          _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+          (_window$ApxorRTM4 = window.ApxorRTM) === null || _window$ApxorRTM4 === void 0 || _window$ApxorRTM4.logEvent("apx_slide_viewed", {
+            apx_nudge_id: _this.config[_this.position].id,
+            apx_nudge_name: _this.config[_this.position].campaign_name,
+            apx_template_name: "stories",
+            apx_variant_code: _this.config[_this.position].variant_code,
+            apx_slide_number: parseInt(_this.progress.indexOf(next)) + 1,
+            apx_slide_label: _this.current_slide_config.slide_label,
+            apx_slide_type: _this.currentMediaType
+          });
+        };
+        _this.progress.map(function (el) {
+          return el.addEventListener("animationend", playNext, false);
+        });
+        playNext();
+      });
+      _defineProperty(this, "Voll", function () {
+        document.body.classList.add("slide-right");
+        var animationEndCounter = 0;
+        var onAnimationEnd = function onAnimationEnd() {
+          animationEndCounter++;
+          if (animationEndCounter === 2) {
+            document.body.classList.remove("slide-right");
+            document.body.removeEventListener("animationend", onAnimationEnd);
+          }
+        };
+        document.body.addEventListener("animationend", onAnimationEnd);
+      });
+      _defineProperty(this, "HjRo", function (config) {
+        var _window$Apxor3;
+        var element;
+        var startY;
+        var progress_bar;
+        var slide_header;
+        var slide_details;
+        switch (config.type) {
+          case "cell":
+          case "text":
+          case "button":
+            element = document.createElement(EMBED_CARD_TYPE[config.type]);
+            break;
+          case "img":
+            element = document.createElement(EMBED_CARD_TYPE[config.type]);
+            element.addEventListener("error", function () {
+              element.style.visibility = "hidden";
+              var ele = document.querySelector(".loader-1");
+              _this.continueLoading = true;
+              ele.style.display = "block";
+              ele.style.visibility = "visible";
+              progress_bar = document.querySelector(".progress-container");
+              progress_bar.style.visibility = "hidden";
+              slide_header = document.querySelector(".apx-slide-header");
+              slide_header.style.visibility = "hidden";
+              slide_details = document.querySelector(".slide-details");
+              slide_details.style.visibility = "hidden";
+            });
+            break;
+          case "copy_button":
+            element = document.createElement("div");
+            break;
+          case "floating_button":
+            element = document.createElement("button");
+            break;
+          case "swipe_up_button":
+            element = document.createElement("div");
+            element.style.animation = "moveUpDownButton 1000ms ease-in-out infinite alternate";
+            break;
+          case "swipe_up_icon":
+            element = document.createElement("div");
+            element.innerHTML = "<svg width=\"30\" height=\"26\" viewBox=\"0 0 30 26\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.1338 22.1335C21.8994 22.3679 21.5815 22.4995 21.25 22.4995C20.9186 22.4995 20.6007 22.3679 20.3663 22.1335L15 16.7673L9.63377 22.1335C9.51847 22.2529 9.38053 22.3481 9.22803 22.4137C9.07552 22.4792 8.9115 22.5136 8.74552 22.5151C8.57955 22.5165 8.41495 22.4849 8.26133 22.4221C8.10771 22.3592 7.96815 22.2664 7.85078 22.149C7.73341 22.0317 7.6406 21.8921 7.57775 21.7385C7.51489 21.5848 7.48327 21.4202 7.48471 21.2543C7.48615 21.0883 7.52064 20.9243 7.58615 20.7718C7.65166 20.6193 7.74688 20.4813 7.86627 20.366L14.1163 14.116C14.3507 13.8817 14.6686 13.75 15 13.75C15.3315 13.75 15.6494 13.8817 15.8838 14.116L22.1338 20.366C22.3681 20.6004 22.4998 20.9183 22.4998 21.2498C22.4998 21.5812 22.3681 21.8991 22.1338 22.1335ZM22.1338 14.6335C21.8994 14.8679 21.5815 14.9995 21.25 14.9995C20.9186 14.9995 20.6007 14.8679 20.3663 14.6335L15 9.26728L9.63377 14.6335C9.39802 14.8612 9.08227 14.9872 8.75452 14.9844C8.42678 14.9815 8.11326 14.8501 7.8815 14.6183C7.64974 14.3865 7.51828 14.073 7.51543 13.7453C7.51258 13.4175 7.63857 13.1018 7.86627 12.866L14.1163 6.61603C14.3507 6.38169 14.6686 6.25004 15 6.25004C15.3315 6.25004 15.6494 6.38169 15.8838 6.61603L22.1338 12.866C22.3681 13.1004 22.4998 13.4183 22.4998 13.7498C22.4998 14.0812 22.3681 14.3991 22.1338 14.6335Z\"/>\n        </svg>";
+            break;
+          case "cross_button":
+            element = document.createElement("div");
+            element.innerHTML = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.46995 5.46983C5.61058 5.32938 5.8012 5.25049 5.99995 5.25049C6.1987 5.25049 6.38933 5.32938 6.52995 5.46983L18.53 17.4698C18.6036 17.5385 18.6627 17.6213 18.7037 17.7133C18.7447 17.8053 18.7668 17.9046 18.7685 18.0053C18.7703 18.106 18.7518 18.206 18.7141 18.2994C18.6764 18.3928 18.6202 18.4776 18.549 18.5489C18.4778 18.6201 18.3929 18.6762 18.2995 18.714C18.2062 18.7517 18.1061 18.7702 18.0054 18.7684C17.9047 18.7666 17.8054 18.7446 17.7134 18.7036C17.6214 18.6626 17.5386 18.6035 17.4699 18.5298L5.46995 6.52983C5.3295 6.3892 5.25061 6.19858 5.25061 5.99983C5.25061 5.80108 5.3295 5.61045 5.46995 5.46983Z\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.53 5.46983C18.6704 5.61045 18.7493 5.80108 18.7493 5.99983C18.7493 6.19858 18.6704 6.3892 18.53 6.52983L6.52997 18.5298C6.38779 18.6623 6.19975 18.7344 6.00545 18.731C5.81114 18.7276 5.62576 18.6489 5.48835 18.5114C5.35093 18.374 5.27222 18.1887 5.26879 17.9944C5.26537 17.8 5.33749 17.612 5.46997 17.4698L17.47 5.46983C17.6106 5.32938 17.8012 5.25049 18 5.25049C18.1987 5.25049 18.3893 5.32938 18.53 5.46983Z\" />\n        </svg>";
+            break;
+          case "unmute_icon":
+            element = document.createElement("div");
+            element.innerHTML = "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.5 4.16667L10.3229 6.34375L12.5 8.52083M4.44792 3.125L3.125 4.44792L8.05208 9.375H3.125V15.625H7.29167L12.5 20.8333V13.8229L16.9271 18.2604C16.2292 18.7917 15.4479 19.2292 14.5833 19.4792V21.6354C16.0208 21.3021 17.3229 20.6458 18.4167 19.75L20.5521 21.875L21.875 20.5521L12.5 11.1771M19.7917 12.5C19.7917 13.4792 19.5833 14.3958 19.2292 15.25L20.8021 16.8229C21.5051 15.4903 21.8733 14.0067 21.875 12.5C21.875 8.04167 18.75 4.3125 14.5833 3.36458V5.51042C17.5938 6.40625 19.7917 9.19792 19.7917 12.5ZM17.1875 12.5C17.1875 10.6562 16.1458 9.07292 14.5833 8.30208V10.6042L17.1354 13.1562C17.1875 12.9479 17.1875 12.7188 17.1875 12.5Z\" />\n        </svg>";
+            break;
+          case "mute_icon":
+            element = document.createElement("div");
+            element.innerHTML = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.375 4L10.1979 6.17708L7.92708 9.20833H3V15.4583H7.16667L12.375 20.6667V4Z\" fill=\"currentColor\" />\n        <path d=\"M14.4905 20.2167C18.9193 20.2167 22.5095 16.6265 22.5095 12.1977C22.5095 7.76894 18.9193 4.17871 14.4905 4.17871\" stroke=\"currentColor\" fill =\"transparent\" stroke-width=\"1.782\"/>\n        <path d=\"M14.4905 15.7618C16.4588 15.7618 18.0545 14.1661 18.0545 12.1978C18.0545 10.2294 16.4588 8.63379 14.4905 8.63379\" stroke=\"currentColor\" fill=\"transparent\" stroke-width=\"1.782\"/>\n        </svg>";
+            element.id = "apx-mute-icon";
+            element.addEventListener("touchstart", function (event) {
+              _this.CfIa(event);
+            });
+            break;
+          case "copy_icon":
+            element = document.createElement("div");
+            element.innerHTML = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 1.25H10.944C9.106 1.25 7.65 1.25 6.511 1.403C5.339 1.561 4.39 1.893 3.641 2.641C2.893 3.39 2.561 4.339 2.403 5.511C2.25 6.651 2.25 8.106 2.25 9.944V16C2.25002 16.8934 2.56894 17.7575 3.14934 18.4367C3.72974 19.1159 4.53351 19.5657 5.416 19.705C5.553 20.469 5.818 21.121 6.348 21.652C6.95 22.254 7.708 22.512 8.608 22.634C9.475 22.75 10.578 22.75 11.945 22.75H15.055C16.422 22.75 17.525 22.75 18.392 22.634C19.292 22.512 20.05 22.254 20.652 21.652C21.254 21.05 21.512 20.292 21.634 19.392C21.75 18.525 21.75 17.422 21.75 16.055V10.945C21.75 9.578 21.75 8.475 21.634 7.608C21.512 6.708 21.254 5.95 20.652 5.348C20.121 4.818 19.469 4.553 18.705 4.416C18.5657 3.53351 18.1159 2.72974 17.4367 2.14934C16.7575 1.56894 15.8934 1.25002 15 1.25ZM17.13 4.271C16.9779 3.827 16.6909 3.44166 16.3089 3.16893C15.927 2.89619 15.4693 2.74971 15 2.75H11C9.093 2.75 7.739 2.752 6.71 2.89C5.705 3.025 5.125 3.279 4.702 3.702C4.279 4.125 4.025 4.705 3.89 5.711C3.752 6.739 3.75 8.093 3.75 10V16C3.74971 16.4693 3.89619 16.927 4.16892 17.3089C4.44166 17.6908 4.827 17.9779 5.271 18.13C5.25 17.52 5.25 16.83 5.25 16.055V10.945C5.25 9.578 5.25 8.475 5.367 7.608C5.487 6.708 5.747 5.95 6.348 5.348C6.95 4.746 7.708 4.488 8.608 4.367C9.475 4.25 10.578 4.25 11.945 4.25H15.055C15.83 4.25 16.52 4.25 17.13 4.271ZM7.408 6.41C7.685 6.133 8.073 5.953 8.808 5.854C9.562 5.753 10.564 5.751 11.999 5.751H14.999C16.434 5.751 17.435 5.753 18.191 5.854C18.925 5.953 19.313 6.134 19.59 6.41C19.867 6.687 20.047 7.075 20.146 7.81C20.247 8.564 20.249 9.566 20.249 11.001V16.001C20.249 17.436 20.247 18.437 20.146 19.193C20.047 19.927 19.866 20.315 19.59 20.592C19.313 20.869 18.925 21.049 18.19 21.148C17.435 21.249 16.434 21.251 14.999 21.251H11.999C10.564 21.251 9.562 21.249 8.807 21.148C8.073 21.049 7.685 20.868 7.408 20.592C7.131 20.315 6.951 19.927 6.852 19.192C6.751 18.437 6.749 17.436 6.749 16.001V11.001C6.749 9.566 6.751 8.564 6.852 7.809C6.951 7.075 7.132 6.687 7.408 6.41Z\"/>\n        </svg>";
+            break;
+          case "video":
+            element = document.createElement("video");
+            element.style.width = "100%";
+            element.style.height = "auto";
+            element.controlsList = "noplaybackrate nodownload nofullscreen";
+            // element.controls = true;
+            element.disablePictureInPicture = true;
+            element.autoplay = true;
+            if (((_window$Apxor3 = window.Apxor) === null || _window$Apxor3 === void 0 ? void 0 : _window$Apxor3.platform) === "ios") {
+              element.playsInline = true;
+            }
+            element.addEventListener("error", function () {
+              element.style.visibility = "hidden";
+              progress_bar = document.querySelector(".progress-container");
+              progress_bar.style.visibility = "hidden";
+              slide_header = document.querySelector(".apx-slide-header");
+              slide_header.style.visibility = "hidden";
+              slide_details = document.querySelector(".slide-details");
+              slide_details.style.visibility = "hidden";
+            });
+            break;
+          default:
+            element = document.createElement(config.type);
+        }
+        if (config.properties) {
+          // eslint-disable-next-line no-unused-vars
+          for (var prop in config.properties) {
+            if (config.type === "img" && prop === "src" || config.type === "img" && prop === "format") continue;
+            if (config.type === "video" && prop === "source") {
+              var sourceElement = document.createElement("source");
+              // eslint-disable-next-line no-unused-vars
+              for (var srcprop in (_config$properties = config.properties) === null || _config$properties === void 0 ? void 0 : _config$properties[prop]) {
+                var _config$properties, _config$properties2;
+                sourceElement[srcprop] = (_config$properties2 = config.properties) === null || _config$properties2 === void 0 || (_config$properties2 = _config$properties2[prop]) === null || _config$properties2 === void 0 ? void 0 : _config$properties2[srcprop];
+              }
+              sourceElement["type"] = "video/mp4";
+              element.appendChild(sourceElement);
+              continue;
+            }
+            element[prop] = config.properties[prop];
+          }
+        }
+        element.classList.add(config._id);
+        if (config.css) {
+          if (config.type == "img") {
+            var styleObject = parseCSS(config.css);
+            var imgStyleObject = removeKeys(styleObject, Object.keys(imgWrapperStylesForStories));
+            var styles;
+            styles = objectToCSS(imgStyleObject);
+            element.style = styles;
+          } else {
+            element.style = config.css;
+          }
+        }
+        if (config.enable_actions && config.actions.length > 0) {
+          var slide_details_to_be_deleted;
+          var updated_action;
+          var updated_swipe_action;
+          config.actions.forEach(function (action) {
+            switch (action.type) {
+              case "activity":
+              case "deeplink":
+                element.ontouchstart = function (e) {
+                  var _window$ApxorRTM5;
+                  _this.redirectionFlag = true;
+                  e.stopPropagation();
+                  updated_action = _objectSpread2(_objectSpread2({}, action), {}, {
+                    display_type: "stories"
+                  });
+                  window.Apxor.redirect(JSON.stringify(updated_action));
+                  var progress = Array.from(document.querySelectorAll(".progress"));
+                  var activeIndex = progress.findIndex(function (el) {
+                    return el.classList.contains("active");
+                  });
+                  _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                  var current_time = Date.now();
+                  var time_taken;
+                  time_taken = (current_time - _this.slideStartTime) / 1000;
+                  (_window$ApxorRTM5 = window.ApxorRTM) === null || _window$ApxorRTM5 === void 0 || _window$ApxorRTM5.logEvent("apx_slide_interaction", {
+                    apx_nudge_id: _this.config[_this.position].id,
+                    apx_nudge_name: _this.config[_this.position].campaign_name,
+                    apx_template_name: "stories",
+                    apx_variant_code: _this.config[_this.position].variant_code,
+                    apx_slide_number: activeIndex + 1,
+                    apx_slide_label: _this.current_slide_config.slide_label,
+                    apx_slide_type: _this.currentMediaType,
+                    apx_interaction_type: "cta-clicked",
+                    apx_time_taken: time_taken
+                  });
+                };
+                break;
+              case "swipe_redirect_deeplink":
+              case "swipe_redirect_activity":
+                updated_swipe_action = _objectSpread2(_objectSpread2({}, action), {}, {
+                  display_type: "stories"
+                });
+                _this.storyContainer.addEventListener("touchstart", function (event) {
+                  event.stopPropagation();
+                  startY = event.touches[0].clientY;
+                  _this.startY = startY;
+                  _this.swipe_action = updated_swipe_action;
+                });
+                _this.storyContainer.addEventListener("touchend", _this.boundSwipeUpHandling);
+                break;
+              case "dismiss":
+                element.ontouchstart = function (e) {
+                  var _window$ApxorRTM6, _window3, _window3$logInternalE;
+                  e.stopPropagation();
+                  _this.dismissFlag = true;
+                  slide_details_to_be_deleted = document.querySelector(".slide-details");
+                  var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+                  for (var i = 0; i < childElements.length; i++) {
+                    var child = childElements[i];
+                    if (child.tagName.toLowerCase() === "video") {
+                      child.muted = true;
+                    }
+                  }
+                  var progress = Array.from(document.querySelectorAll(".progress"));
+                  var activeIndex = progress.findIndex(function (el) {
+                    return el.classList.contains("active");
+                  });
+                  _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                  (_window$ApxorRTM6 = window.ApxorRTM) === null || _window$ApxorRTM6 === void 0 || _window$ApxorRTM6.logEvent("apx_slide_closed", {
+                    apx_nudge_id: _this.config[_this.position].id,
+                    apx_nudge_name: _this.config[_this.position].campaign_name,
+                    apx_template_name: "stories",
+                    apx_variant_code: _this.config[_this.position].variant_code,
+                    apx_slide_number: activeIndex + 1,
+                    apx_slide_label: _this.current_slide_config.slide_label,
+                    apx_slide_type: _this.currentMediaType
+                  });
+                  (_window3 = window) === null || _window3 === void 0 || (_window3 = _window3.Apxor) === null || _window3 === void 0 || (_window3$logInternalE = _window3.logInternalEvent) === null || _window3$logInternalE === void 0 || _window3$logInternalE.call(_window3, "story_slides_closed");
+                  return;
+                };
+                return;
+              case "never":
+                element.onclick = function () {
+                  window.Apxor.neverShow(_this.config[_this.position].id, _this.name, "IN_APP");
+                  window.Apxor.logActionEvent("never_show_clicked", _this.config[_this.position].id, _this.name);
+                };
+                break;
+              case "copy-content":
+                element.ontouchstart = function (e) {
+                  var _window4, _window4$logInternalE, _window$ApxorRTM7;
+                  e.stopPropagation();
+                  e.stopImmediatePropagation();
+                  e.preventDefault();
+                  var textToCopy = action.content;
+                  (_window4 = window) === null || _window4 === void 0 || (_window4 = _window4.Apxor) === null || _window4 === void 0 || (_window4$logInternalE = _window4.logInternalEvent) === null || _window4$logInternalE === void 0 || _window4$logInternalE.call(_window4, "TextCopied", JSON.stringify({
+                    text_to_copy: textToCopy.toString()
+                  }));
+                  var progress = Array.from(document.querySelectorAll(".progress"));
+                  var activeIndex = progress.findIndex(function (el) {
+                    return el.classList.contains("active");
+                  });
+                  _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                  var current_time = Date.now();
+                  var time_taken;
+                  time_taken = (current_time - _this.slideStartTime) / 1000;
+                  (_window$ApxorRTM7 = window.ApxorRTM) === null || _window$ApxorRTM7 === void 0 || _window$ApxorRTM7.logEvent("apx_slide_interaction", {
+                    apx_nudge_id: _this.config[_this.position].id,
+                    apx_nudge_name: _this.config[_this.position].campaign_name,
+                    apx_template_name: "stories",
+                    apx_variant_code: _this.config[_this.position].variant_code,
+                    apx_slide_number: activeIndex + 1,
+                    apx_slide_label: _this.current_slide_config.slide_label,
+                    apx_slide_type: _this.currentMediaType,
+                    apx_interaction_type: "cta-clicked",
+                    apx_time_taken: time_taken
+                  });
+                  return;
+                };
+                break;
+              case "log-app-event":
+                element.onclick = function () {
+                  window.Apxor.logAppEvent(action === null || action === void 0 ? void 0 : action.event_name);
+                };
+                break;
+              case "log-client-event":
+                element.onclick = function () {
+                  window.Apxor.logClientEvent(action === null || action === void 0 ? void 0 : action.event_name);
+                };
+            }
+          });
+        }
+        if (config.absolute_position_children && config.absolute_position_children.length > 0) {
+          config.absolute_position_children.forEach(function (childConfig) {
+            var childElement = _this.HjRo(childConfig);
+            element.appendChild(childElement);
+          });
+        }
+
+        // Process children
+        if (config.children && config.children.length > 0) {
+          config.children.forEach(function (childConfig) {
+            var childElement = _this.HjRo(childConfig);
+            element.appendChild(childElement);
+          });
+        }
+        if (config.type === "img") {
+          var _config$properties3, _config$properties4, _window5, _window5$getFilePath;
+          var src = config === null || config === void 0 || (_config$properties3 = config.properties) === null || _config$properties3 === void 0 ? void 0 : _config$properties3.src;
+          var format = config === null || config === void 0 || (_config$properties4 = config.properties) === null || _config$properties4 === void 0 ? void 0 : _config$properties4.format;
+          element["src"] = src && format ? ((_window5 = window) === null || _window5 === void 0 || (_window5 = _window5.Apxor) === null || _window5 === void 0 || (_window5$getFilePath = _window5.getFilePath) === null || _window5$getFilePath === void 0 ? void 0 : _window5$getFilePath.call(_window5, _this.config[_this.position].id, src, format)) || src : src;
+          _this.imageElements.push(element);
+          var imgWrapper = document.createElement("div");
+          var _styleObject = parseCSS(config.css);
+          Object.keys(imgWrapperStylesForStories).forEach(function (prop) {
+            if (prop in _styleObject) {
+              imgWrapper.style[imgWrapperStylesForStories[prop]] = _styleObject[prop];
+              if (prop === "width") {
+                element.style.width = _styleObject[prop];
+              }
+            }
+          });
+          imgWrapper.appendChild(element);
+          return imgWrapper;
+        } else if (config.type === "video") {
+          _this.videoElements.push(element);
+        }
+        return element;
+      });
+      _defineProperty(this, "CfIa", function (event) {
+        var slide_details_to_be_deleted;
+        var mute_child_elements;
+        var unmute_child_elements;
+        _this.muteElement = document.getElementById("apx-mute-icon");
+        event.stopPropagation();
+        if (_this.videoAudioState === "unmute") {
+          _this.muteElement.innerHTML = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 25 25\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.5 4.16667L10.3229 6.34375L12.5 8.52083M4.44792 3.125L3.125 4.44792L8.05208 9.375H3.125V15.625H7.29167L12.5 20.8333V13.8229L16.9271 18.2604C16.2292 18.7917 15.4479 19.2292 14.5833 19.4792V21.6354C16.0208 21.3021 17.3229 20.6458 18.4167 19.75L20.5521 21.875L21.875 20.5521L12.5 11.1771M19.7917 12.5C19.7917 13.4792 19.5833 14.3958 19.2292 15.25L20.8021 16.8229C21.5051 15.4903 21.8733 14.0067 21.875 12.5C21.875 8.04167 18.75 4.3125 14.5833 3.36458V5.51042C17.5938 6.40625 19.7917 9.19792 19.7917 12.5ZM17.1875 12.5C17.1875 10.6562 16.1458 9.07292 14.5833 8.30208V10.6042L17.1354 13.1562C17.1875 12.9479 17.1875 12.7188 17.1875 12.5Z\" />\n        </svg>";
+          _this.videoAudioState = "mute";
+          slide_details_to_be_deleted = document.querySelector(".slide-details");
+          mute_child_elements = slide_details_to_be_deleted.querySelectorAll("video");
+          for (var i = 0; i < mute_child_elements.length; i++) {
+            var child = mute_child_elements[i];
+            if (child.tagName.toLowerCase() === "video") {
+              child.muted = true;
+            }
+          }
+        } else if (_this.videoAudioState === "mute") {
+          _this.muteElement.innerHTML = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12.375 4L10.1979 6.17708L7.92708 9.20833H3V15.4583H7.16667L12.375 20.6667V4Z\" fill=\"currentColor\" />\n      <path d=\"M14.4905 20.2167C18.9193 20.2167 22.5095 16.6265 22.5095 12.1977C22.5095 7.76894 18.9193 4.17871 14.4905 4.17871\" stroke=\"currentColor\" fill =\"transparent\" stroke-width=\"1.782\"/>\n      <path d=\"M14.4905 15.7618C16.4588 15.7618 18.0545 14.1661 18.0545 12.1978C18.0545 10.2294 16.4588 8.63379 14.4905 8.63379\" stroke=\"currentColor\" fill=\"transparent\" stroke-width=\"1.782\"/>\n      </svg>";
+          _this.videoAudioState = "unmute";
+          slide_details_to_be_deleted = document.querySelector(".slide-details");
+          unmute_child_elements = slide_details_to_be_deleted.querySelectorAll("video");
+          for (var j = 0; j < unmute_child_elements.length; j++) {
+            var child2 = unmute_child_elements[j];
+            if (child2.tagName.toLowerCase() === "video") {
+              child2.muted = false;
+            }
+          }
+          // this.muteElement.addEventListener("touchstart", (event) => {
+          //   event.stopPropagation();
+          //   this.CfIa(event);
+          // });
+        }
+      });
+      _defineProperty(this, "yUQd", function () {
+        var tapTimeout;
+        var tapThreshold = 0.5; // Assuming 0.5 is the center of the WebView
+        var longPressDuration = 200;
+        _this.storyContainer.addEventListener("touchstart", function (event) {
+          _this.gestureTouch = true;
+          var touchX = event.touches[0].clientX - _this.storyContainer.getBoundingClientRect().left;
+          var webViewWidth = _this.storyContainer.offsetWidth;
+          var relativeX = touchX / webViewWidth;
+          clearTimeout(tapTimeout);
+          tapTimeout = setTimeout(function () {
+            if (!_this.swipe_up_redirect) {
+              var _window$ApxorRTM8;
+              var progress = Array.from(document.querySelectorAll(".progress"));
+              var activeIndex = progress.findIndex(function (el) {
+                return el.classList.contains("active");
+              });
+              progress[activeIndex].style.animationPlayState = "paused";
+              _this.slidePaused = true;
+              _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+              var current_time = Date.now();
+              var time_taken;
+              time_taken = (current_time - _this.slideStartTime) / 1000;
+              (_window$ApxorRTM8 = window.ApxorRTM) === null || _window$ApxorRTM8 === void 0 || _window$ApxorRTM8.logEvent("apx_slide_paused", {
+                apx_nudge_id: _this.config[_this.position].id,
+                apx_nudge_name: _this.config[_this.position].campaign_name,
+                apx_template_name: "stories",
+                apx_variant_code: _this.config[_this.position].variant_code,
+                apx_slide_number: activeIndex + 1,
+                apx_slide_label: _this.current_slide_config.slide_label,
+                apx_slide_type: _this.currentMediaType,
+                apx_time_taken: time_taken
+              });
+              var slide_details_to_be_deleted;
+              slide_details_to_be_deleted = document.querySelector(".slide-details");
+              var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+              for (var i = 0; i < childElements.length; i++) {
+                var child = childElements[i];
+                if (child.tagName.toLowerCase() === "video") {
+                  child.pause();
+                }
+              }
+            } else {
+              _this.swipe_up_redirect = false;
+            }
+          }, longPressDuration);
+          event.target.dataset.relativeX = relativeX;
+        });
+        _this.storyContainer.addEventListener("touchend", function (event) {
+          setTimeout(function () {
+            if (_this.gestureTouch && !_this.swipeUpTouch) {
+              _this.gestureTouch = false;
+              clearTimeout(tapTimeout);
+              var progress = Array.from(document.querySelectorAll(".progress"));
+              var activeIndex = progress.findIndex(function (el) {
+                return el.classList.contains("active");
+              });
+              progress[activeIndex].style.animationPlayState = "running";
+              if (_this.slidePaused) {
+                var _window$ApxorRTM9;
+                _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                var current_time = Date.now();
+                var time_taken;
+                time_taken = (current_time - _this.slideStartTime) / 1000;
+                (_window$ApxorRTM9 = window.ApxorRTM) === null || _window$ApxorRTM9 === void 0 || _window$ApxorRTM9.logEvent("apx_slide_resumed", {
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_template_name: "stories",
+                  apx_variant_code: _this.config[_this.position].variant_code,
+                  apx_slide_number: activeIndex + 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType,
+                  apx_time_taken: time_taken
+                });
+                _this.slidePaused = false;
+              }
+              var slide_details_to_be_deleted;
+              slide_details_to_be_deleted = document.querySelector(".slide-details");
+              var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+              for (var i = 0; i < childElements.length; i++) {
+                var child = childElements[i];
+                if (child.tagName.toLowerCase() === "video") {
+                  child.play();
+                }
+              }
+              if (event.timeStamp - event.target.dataset.touchStartTime < longPressDuration) {
+                var relativeX = event.target.dataset.relativeX;
+                if (!_this.swipeDownFlag) {
+                  if (relativeX > tapThreshold) {
+                    var _slide_details_to_be_deleted = document.querySelector(".slide-details");
+                    var _childElements = _slide_details_to_be_deleted.children;
+                    for (var _i = 0; _i < _childElements.length; _i++) {
+                      var _child = _childElements[_i];
+                      if (_child.tagName.toLowerCase() === "video") {
+                        _child.muted = true;
+                      }
+                    }
+                    if (!_this.dismissFlag && !_this.swipeDownFlag) {
+                      if (!_this.swipeLeft && !_this.swipeRight) {
+                        _this.moveToNextSlide();
+                      } else {
+                        _this.swipeLeft = false;
+                        _this.swipeRight = false;
+                      }
+                    }
+                  } else if (relativeX < tapThreshold) {
+                    if (!_this.swipeLeft && !_this.swipeRight) {
+                      _this.moveToPreviousSlide();
+                    } else {
+                      _this.swipeLeft = false;
+                      _this.swipeRight = false;
+                    }
+                  }
+                }
+              }
+            } else {
+              _this.swipeUpTouch = false;
+            }
+          }, 50);
+        });
+        _this.storyContainer.addEventListener("touchstart", function (event) {
+          event.target.dataset.touchStartTime = event.timeStamp;
+        });
+      });
+      _defineProperty(this, "UhcC", function () {
+        var startY, startX;
+        _this.storyContainer.addEventListener("touchstart", function (event) {
+          _this.swipeTouch = true;
+          startX = event.touches[0].clientX;
+          startY = event.touches[0].clientY;
+        });
+        _this.storyContainer.addEventListener("touchend", function (event) {
+          setTimeout(function () {
+            if (_this.swipeTouch && !_this.swipeUpTouch) {
+              var endX = event.changedTouches[0].clientX;
+              var endY = event.changedTouches[0].clientY;
+              var deltaY = startY - endY;
+              var deltaX = startX - endX;
+              event.stopPropagation();
+              event.preventDefault();
+              var progress = Array.from(document.querySelectorAll(".progress"));
+              var activeIndex = progress.findIndex(function (el) {
+                return el.classList.contains("active");
+              });
+              _this.swipeTouch = false;
+              if (deltaY < -50 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                var _window6, _window6$logInternalE;
+                _this.swipeDownFlag = true;
+                var slide_details_to_be_deleted;
+                slide_details_to_be_deleted = document.querySelector(".slide-details");
+                var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+                for (var i = 0; i < childElements.length; i++) {
+                  var child = childElements[i];
+                  if (child.tagName.toLowerCase() === "video") {
+                    child.muted = true;
+                  }
+                }
+                (_window6 = window) === null || _window6 === void 0 || (_window6 = _window6.Apxor) === null || _window6 === void 0 || (_window6$logInternalE = _window6.logInternalEvent) === null || _window6$logInternalE === void 0 || _window6$logInternalE.call(_window6, "story_slides_closed");
+                return;
+              } else if (deltaX > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                var _progress$activeIndex, _progress$activeIndex2, _window8, _window8$logInternalE, _window$ApxorRTM10, _window$ApxorRTM11;
+                _this.swipeRight = true;
+                if (_this.position === _this.config.length - 1) {
+                  var _window7, _window7$logInternalE;
+                  // If it's the last group, log event and return
+                  (_window7 = window) === null || _window7 === void 0 || (_window7 = _window7.Apxor) === null || _window7 === void 0 || (_window7$logInternalE = _window7.logInternalEvent) === null || _window7$logInternalE === void 0 || _window7$logInternalE.call(_window7, "story_slides_closed");
+                  var _slide_details_to_be_deleted2 = document.querySelector(".slide-details");
+                  var mute_child_elements = _slide_details_to_be_deleted2.querySelectorAll("video");
+                  for (var j = 0; j < mute_child_elements.length; j++) {
+                    var child1 = mute_child_elements[j];
+                    if (child1.tagName.toLowerCase() === "video") {
+                      child1.muted = true;
+                    }
+                  }
+                  return;
+                }
+                _this.position++;
+                _this.progress_bar = new ProgressBar$1(_this.config[_this.position].progress_bar);
+                _this.slides = _this.config[_this.position].slides;
+                var slideToStart;
+                if (_this.slides.length === _this.config[_this.position].slides_seen) {
+                  slideToStart = 0;
+                } else if (_this.config[_this.position].slides_seen === 0) {
+                  slideToStart = 0;
+                } else {
+                  slideToStart = _this.config[_this.position].slides_seen;
+                }
+                (_progress$activeIndex = progress[activeIndex]) === null || _progress$activeIndex === void 0 || _progress$activeIndex.classList.remove("active");
+                (_progress$activeIndex2 = progress[activeIndex]) === null || _progress$activeIndex2 === void 0 || _progress$activeIndex2.classList.add("passed");
+                var progressContainer = document.querySelector(".progress-container");
+                progressContainer.innerHTML = "";
+                _this.slides.forEach(function (slide, index) {
+                  var progressSlide = document.createElement("div");
+                  progressSlide.classList.add("slide".concat(index));
+                  progressSlide.classList.add("progress");
+                  var slide_duration = slide.duration / 1000;
+                  progressSlide.style.animationDuration = "".concat(slide_duration, "s");
+                  progressContainer.appendChild(progressSlide);
+                });
+                var progressSegments = progressContainer.querySelectorAll(".progress");
+                for (var _i2 = 0; _i2 < slideToStart; _i2++) {
+                  var _progressSegments$_i;
+                  (_progressSegments$_i = progressSegments[_i2]) === null || _progressSegments$_i === void 0 || _progressSegments$_i.classList.add("passed");
+                }
+                progressSegments[slideToStart].classList.add("active");
+                Array.from(progressSegments).map(function (el) {
+                  return el.addEventListener("animationend", function () {
+                    _this.moveToNextSlide();
+                  }, false);
+                });
+                _this._getStoriesStyles();
+                _this.storyContainer.removeEventListener("touchend", _this.boundSwipeUpHandling);
+                _this.updateSlideDetails(0);
+                (_window8 = window) === null || _window8 === void 0 || (_window8 = _window8.Apxor) === null || _window8 === void 0 || (_window8$logInternalE = _window8.logInternalEvent) === null || _window8$logInternalE === void 0 || _window8$logInternalE.call(_window8, "story_slide_seen", JSON.stringify({
+                  config_id: _this.config[_this.position].id,
+                  position: _this.position,
+                  index: slideToStart + 1,
+                  view_id: _this.view_id
+                }));
+                (_window$ApxorRTM10 = window.ApxorRTM) === null || _window$ApxorRTM10 === void 0 || _window$ApxorRTM10.logEvent("apx_slide_viewed", {
+                  apx_slide_number: slideToStart + 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType,
+                  apx_template_name: "stories",
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_variant_code: _this.config[_this.position].variant_code
+                });
+                var current_time = Date.now();
+                var time_taken;
+                time_taken = (current_time - _this.slideStartTime) / 1000;
+                (_window$ApxorRTM11 = window.ApxorRTM) === null || _window$ApxorRTM11 === void 0 || _window$ApxorRTM11.logEvent("apx_story_changed", {
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_template_name: "stories",
+                  apx_variant_code: _this.config[_this.position].variant_code,
+                  apx_slide_number: slideToStart + 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType,
+                  apx_change_action: "swiped-right",
+                  apx_time_taken: time_taken
+                });
+                var currentTime = Date.now();
+                _this.slideStartTime = currentTime;
+                return;
+              } else if (deltaX < -50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                var _progress$activeIndex3, _progress$activeIndex4, _window9, _window9$logInternalE, _window$ApxorRTM12, _window$ApxorRTM13;
+                _this.swipeLeft = true;
+                if (activeIndex === 0 && _this.position === 0) {
+                  return;
+                }
+                if (_this.position === 0) {
+                  return;
+                }
+                _this.position--;
+                _this.progress_bar = new ProgressBar$1(_this.config[_this.position].progress_bar);
+                _this.slides = _this.config[_this.position].slides;
+                var lastSlideIndex;
+                if (_this.slides.length === _this.config[_this.position].slides_seen) {
+                  lastSlideIndex = 0;
+                } else if (_this.config[_this.position].slides_seen === 0) {
+                  lastSlideIndex = 0;
+                } else {
+                  lastSlideIndex = _this.config[_this.position].slides_seen;
+                }
+                (_progress$activeIndex3 = progress[activeIndex]) === null || _progress$activeIndex3 === void 0 || _progress$activeIndex3.classList.remove("active");
+                (_progress$activeIndex4 = progress[activeIndex]) === null || _progress$activeIndex4 === void 0 || _progress$activeIndex4.classList.add("passed");
+                var _progressContainer2 = document.querySelector(".progress-container");
+                _progressContainer2.innerHTML = "";
+                _this.slides.forEach(function (slide, index) {
+                  var progressSlide = document.createElement("div");
+                  progressSlide.classList.add("slide".concat(index));
+                  progressSlide.classList.add("progress");
+                  var slide_duration = slide.duration / 1000;
+                  progressSlide.style.animationDuration = "".concat(slide_duration, "s");
+                  _progressContainer2.appendChild(progressSlide);
+                });
+                var _progressSegments2 = _progressContainer2.querySelectorAll(".progress");
+                if (_progressSegments2.length > 0) {
+                  for (var _i3 = 0; _i3 < lastSlideIndex; _i3++) {
+                    var _progressSegments2$_i;
+                    (_progressSegments2$_i = _progressSegments2[_i3]) === null || _progressSegments2$_i === void 0 || _progressSegments2$_i.classList.add("passed");
+                  }
+                  _progressSegments2[lastSlideIndex].classList.add("active");
+                }
+                Array.from(_progressSegments2).map(function (el) {
+                  return el.addEventListener("animationend", function () {
+                    _this.moveToNextSlide();
+                  }, false);
+                });
+                _this._getStoriesStyles();
+                _this.storyContainer.removeEventListener("touchend", _this.boundSwipeUpHandling);
+                _this.updateSlideDetails(lastSlideIndex);
+                (_window9 = window) === null || _window9 === void 0 || (_window9 = _window9.Apxor) === null || _window9 === void 0 || (_window9$logInternalE = _window9.logInternalEvent) === null || _window9$logInternalE === void 0 || _window9$logInternalE.call(_window9, "story_slide_seen", JSON.stringify({
+                  config_id: _this.config[_this.position].id,
+                  position: _this.position,
+                  index: lastSlideIndex + 1,
+                  view_id: _this.view_id
+                }));
+                _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+                (_window$ApxorRTM12 = window.ApxorRTM) === null || _window$ApxorRTM12 === void 0 || _window$ApxorRTM12.logEvent("apx_slide_viewed", {
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_template_name: "stories",
+                  apx_variant_code: _this.config[_this.position].variant_code,
+                  apx_slide_number: lastSlideIndex + 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType
+                });
+                var _current_time2 = Date.now();
+                var _time_taken;
+                _time_taken = (_current_time2 - _this.slideStartTime) / 1000;
+                (_window$ApxorRTM13 = window.ApxorRTM) === null || _window$ApxorRTM13 === void 0 || _window$ApxorRTM13.logEvent("apx_story_changed", {
+                  apx_nudge_id: _this.config[_this.position].id,
+                  apx_nudge_name: _this.config[_this.position].campaign_name,
+                  apx_template_name: "stories",
+                  apx_variant_code: _this.config[_this.position].variant_code,
+                  apx_slide_number: lastSlideIndex + 1,
+                  apx_slide_label: _this.current_slide_config.slide_label,
+                  apx_slide_type: _this.currentMediaType,
+                  apx_change_action: "swiped-left",
+                  apx_time_taken: _time_taken
+                });
+                var _currentTime = Date.now();
+                _this.slideStartTime = _currentTime;
+                return;
+              }
+            }
+          }, 50);
+        });
+      });
+      _defineProperty(this, "Jwju", function () {
+        _this.loader.style.display = "block";
+        var progress = Array.from(document.querySelectorAll(".progress"));
+        var activeIndex = progress.findIndex(function (el) {
+          return el.classList.contains("active");
+        });
+        progress[activeIndex].style.animationPlayState = "paused";
+        var slide_details_to_be_deleted = document.querySelector(".slide-details");
+        var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+        for (var i = 0; i < childElements.length; i++) {
+          var child = childElements[i];
+          if (child.tagName.toLowerCase() === "video") {
+            child.style.opacity = 0;
+          }
+        }
+      });
+      _defineProperty(this, "vCTl", function () {
+        if (!_this.continueLoading) {
+          var slide_details_to_be_deleted = document.querySelector(".slide-details");
+          var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+          for (var i = 0; i < childElements.length; i++) {
+            var child = childElements[i];
+            if (child.tagName.toLowerCase() === "video") {
+              child.style.opacity = 1;
+            }
+          }
+          var progress = Array.from(document.querySelectorAll(".progress"));
+          var activeIndex = progress.findIndex(function (el) {
+            return el.classList.contains("active");
+          });
+          progress[activeIndex].style.animationPlayState = "running";
+          var ele = document.querySelector(".loader-1");
+          ele.style.display = "none";
+          _this.loader.style.display = "none";
+        }
+      });
+      _defineProperty(this, "DZYh", function () {
+        if (_this.imageElements.length === 0) return true;
+        return _this.imageElements.every(function (img) {
+          return img.complete;
+        });
+      });
+      _defineProperty(this, "PXQj", function () {
+        if (_this.videoElements.length === 0) return true;
+        return _this.videoElements.every(function (video) {
+          return video.readyState >= 3;
+        });
+      });
+      _defineProperty(this, "rnGL", function () {
+        var bodyStyles = window.getComputedStyle(document.body);
+        var backgroundImage = bodyStyles.backgroundImage;
+        if (backgroundImage && backgroundImage !== "none" && _this.current_slide_config.media_type === "image") {
+          var imageUrl = backgroundImage.slice(5, -2);
+          var loader_ele = document.createElement("div");
+          loader_ele.classList.add = "wrapper";
+          var img = new Image();
+          img.src = imageUrl;
+          if (img.complete) {
+            _this.vCTl();
+            return true;
+          }
+          return false;
+        } else if (_this.current_slide_config.media_type === "video") {
+          var slide_details_to_be_deleted = document.querySelector(".slide-details");
+          var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+          if (childElements[0].readyState >= 3) {
+            _this.vCTl();
+            return true;
+          }
+          return false;
+        } else {
+          if (_this.videoElements.length == 0 && _this.imageElements.length == 0) {
+            _this.vCTl();
+            return true;
+          } else if (_this.DZYh() && _this.PXQj()) {
+            _this.vCTl();
+            return true;
+          }
+        }
+      });
+      _defineProperty(this, "tBkX", function (event, startY, action) {
+        event.stopPropagation();
+        var endY = event.changedTouches[0].clientY;
+        var deltaY = startY - endY;
+        if (!_this.redirectionFlag) {
+          if (deltaY > 50) {
+            var _window$ApxorRTM14;
+            _this.swipe_up_redirect = true;
+            _this.swipeUpTouch = true;
+            window.Apxor.redirect(JSON.stringify(action));
+            var progress = Array.from(document.querySelectorAll(".progress"));
+            var activeIndex = progress.findIndex(function (el) {
+              return el.classList.contains("active");
+            });
+            _this.current_slide_config.media_type === "none" ? _this.currentMediaType = "builder" : _this.currentMediaType = _this.current_slide_config.media_type;
+            var current_time = Date.now();
+            var time_taken;
+            time_taken = (current_time - _this.slideStartTime) / 1000;
+            (_window$ApxorRTM14 = window.ApxorRTM) === null || _window$ApxorRTM14 === void 0 || _window$ApxorRTM14.logEvent("apx_slide_interaction", {
+              apx_nudge_id: _this.config[_this.position].id,
+              apx_nudge_name: _this.config[_this.position].campaign_name,
+              apx_template_name: "stories",
+              apx_variant_code: _this.config[_this.position].variant_code,
+              apx_slide_number: activeIndex + 1,
+              apx_slide_label: _this.current_slide_config.slide_label,
+              apx_slide_type: _this.currentMediaType,
+              apx_interaction_type: "gesture",
+              apx_time_taken: time_taken
+            });
+            progress[activeIndex].style.animationPlayState = "running";
+            var slide_details_to_be_deleted;
+            slide_details_to_be_deleted = document.querySelector(".slide-details");
+            var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+            for (var i = 0; i < childElements.length; i++) {
+              var child = childElements[i];
+              if (child.tagName.toLowerCase() === "video") {
+                child.play();
+              }
+            }
+            return;
+          }
+        } else {
+          _this.redirectionFlag = false;
+        }
+      });
+      this.config = _config;
+      this.configId = configId;
+      this.name = name;
+      this.position = position;
+      this.slidesSeenCount = slidesSeenCount;
+      this.view_id = view_id;
+      this.showCallback = showCallback;
+      this.closeCallback = closeCallback;
+      this.progress_bar = new ProgressBar$1(_config[position].progress_bar);
+      this.slides = _config[position].slides;
+      if (this.slides.length === this.slidesSeenCount) {
+        this.slidesSeenCount = 0;
+      }
+      if (this.slidesSeenCount > this.slides.length) {
+        var _window10, _window10$logInternal;
+        (_window10 = window) === null || _window10 === void 0 || (_window10 = _window10.Apxor) === null || _window10 === void 0 || (_window10$logInternal = _window10.logInternalEvent) === null || _window10$logInternal === void 0 || _window10$logInternal.call(_window10, "story_slides_closed");
+      }
+      this.storiesStyles = "";
+      this.progressContainer;
+      this.storyContainer;
+      this.dismissFlag = false;
+      this.videoAudioState = "unmute";
+      this.muteElement;
+      this.progress = [];
+      this.swipeDownFlag = false;
+      this.current_slide_config;
+      this.imageElements = [];
+      this.videoElements = [];
+      this.swipeTouch = false;
+      this.gestureTouch = false;
+      this.swipeLeft = false;
+      this.swipeRight = false;
+      this.slidePaused = false;
+      this.currentMediaType;
+      this.slideStartTime;
+      this.swipeUpTouch = false;
+      this.swipe_up_redirect = false;
+      this.boundSwipeUpHandling;
+      this.redirectionFlag = false;
+      this.startY;
+      this.swipe_action;
+      this.continueLoading = false;
+      this.boundSwipeUpHandling = function (event) {
+        return _this.tBkX(event, _this.startY, _this.swipe_action);
+      };
+    }
+    _createClass(Stories, [{
+      key: "_getStoriesStyles",
+      value: function _getStoriesStyles() {
+        var head = document.head || document.getElementsByTagName("head")[0];
+        var styleNodes = head.querySelectorAll(".apx-progressbar-styles");
+        styleNodes.forEach(function (node) {
+          node.parentNode.removeChild(node);
+        });
+        this.storiesStyles = "\n    .progress-container {\n      position:absolute;\n      top:12px;\n      display: flex;\n      flex-direction: row;\n      width:100%;\n    }\n\n    *,:before,:after {\n      box-sizing: border-box;\n      -webkit-user-select: none;\n      -webkit-touch-callout: none;\n      border-width: 0;\n      border-style: solid;\n      border-color: #e5e7eb\n  }\n\n    .progress {\n      height: 4px;\n      flex-grow: 1;\n      border-radius: 4px;\n      margin: 0 4px;\n      display: flex;\n      background-image: linear-gradient(\n        to right,\n        ".concat(this.progress_bar.seen_color, " 0%,\n        ").concat(this.progress_bar.seen_color, " 50%,\n        ").concat(this.progress_bar.unseen_color, " 50%,\n        ").concat(this.progress_bar.unseen_color, " 100%\n      );\n      background-repeat: no-repeat;\n      background-size: 200%;\n      background-position: 100% 50%;\n      animation-timing-function: linear;\n      animation-delay: 0.2s;\n    }\n\n    .progress.active {\n      animation-name: Loader;\n    }\n\n    .progress.passed { \n      background-position: 0 0;\n    }\n\n    .slide-right {\n      animation: 0.5s slide-right forwards;\n      background: linear-gradient(to right, rgba(225, 219, 30, 0.99), rgb(36, 202, 238)); \n      background-size: 200% 100%;\n    }\n    \n    @keyframes slide-right {\n      from {\n        background-position: 0% 0;\n      }\n      to {\n        background-position: 100% 0;\n      }\n    }\n\n    @-webkit-keyframes Loader {\n      0% {\n        background-position: 100% 0;\n      }\n      100% {\n        background-position: 0 0;\n      }\n    }\n\n    @keyframes moveUpDownButton {\n      0%,\n      100% {\n        bottom: 12px;\n      }\n      50% {\n        bottom: 32px;\n      }\n    }    \n\n    body {\n      background: #121216;\n    }\n      ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
+        var styleNode = document.createElement("style");
+        styleNode.setAttribute("apx-stories-styles", "");
+        styleNode.classList.add("apx-progressbar-styles");
+        styleNode.innerHTML = this.storiesStyles;
+        document.head.appendChild(styleNode);
+        return this.storiesStyles;
+      }
+    }, {
+      key: "moveToNextSlide",
+      value: function moveToNextSlide() {
+        var _window$ApxorRTM15, _progress$activeIndex7, _progress$activeIndex8, _progress$nextIndex, _window13, _window13$logInternal, _window$ApxorRTM19, _window$ApxorRTM20;
+        this.storyContainer.removeEventListener("touchend", this.boundSwipeUpHandling);
+        var progress1 = Array.from(document.querySelectorAll(".progress"));
+        var activeIndex1 = progress1.findIndex(function (el) {
+          return el.classList.contains("active");
+        });
+        var current_time_new = Date.now();
+        var time_taken_new;
+        time_taken_new = (current_time_new - this.slideStartTime) / 1000;
+        (_window$ApxorRTM15 = window.ApxorRTM) === null || _window$ApxorRTM15 === void 0 || _window$ApxorRTM15.logEvent("apx_slide_completed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex1 + 1,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_time_taken: time_taken_new
+        });
+        var progress = Array.from(document.querySelectorAll(".progress"));
+        var activeIndex = progress.findIndex(function (el) {
+          return el.classList.contains("active");
+        });
+        if (activeIndex === progress.length - 1) {
+          // If at the last slide of the current group
+          if (this.position === this.config.length - 1) {
+            var _window11, _window11$logInternal;
+            // If it's the last group, log event and return
+            (_window11 = window) === null || _window11 === void 0 || (_window11 = _window11.Apxor) === null || _window11 === void 0 || (_window11$logInternal = _window11.logInternalEvent) === null || _window11$logInternal === void 0 || _window11$logInternal.call(_window11, "story_slides_closed");
+            var slide_details_to_be_deleted;
+            slide_details_to_be_deleted = document.querySelector(".slide-details");
+            var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+            for (var i = 0; i < childElements.length; i++) {
+              var child = childElements[i];
+              if (child.tagName.toLowerCase() === "video") {
+                child.muted = true;
+              }
+            }
+            return;
+          } else {
+            var _progress$activeIndex5, _progress$activeIndex6, _progress$, _window12, _window12$logInternal, _window$ApxorRTM16, _window$ApxorRTM17, _window$ApxorRTM18;
+            // Move to the first slide of the next group
+            // this.Voll();
+            this.position++;
+            this.progress_bar = new ProgressBar$1(this.config[this.position].progress_bar);
+            this.slides = this.config[this.position].slides;
+            this.updateProgressBarSegments();
+            (_progress$activeIndex5 = progress[activeIndex]) === null || _progress$activeIndex5 === void 0 || _progress$activeIndex5.classList.remove("active");
+            (_progress$activeIndex6 = progress[activeIndex]) === null || _progress$activeIndex6 === void 0 || _progress$activeIndex6.classList.add("passed");
+            (_progress$ = progress[0]) === null || _progress$ === void 0 || _progress$.classList.add("active");
+            this.updateSlideDetails(0);
+            (_window12 = window) === null || _window12 === void 0 || (_window12 = _window12.Apxor) === null || _window12 === void 0 || (_window12$logInternal = _window12.logInternalEvent) === null || _window12$logInternal === void 0 || _window12$logInternal.call(_window12, "story_slide_seen", JSON.stringify({
+              config_id: this.config[this.position].id,
+              position: this.position,
+              index: 1,
+              view_id: this.view_id
+            }));
+            var _time_taken2;
+            var _current_time3 = Date.now();
+            _time_taken2 = (_current_time3 - this.slideStartTime) / 1000;
+            this.current_slide_config.media_type === "none" ? this.currentMediaType = "builder" : this.currentMediaType = this.current_slide_config.media_type;
+            (_window$ApxorRTM16 = window.ApxorRTM) === null || _window$ApxorRTM16 === void 0 || _window$ApxorRTM16.logEvent("apx_slide_changed", {
+              apx_nudge_id: this.config[this.position].id,
+              apx_nudge_name: this.config[this.position].campaign_name,
+              apx_template_name: "stories",
+              apx_variant_code: this.config[this.position].variant_code,
+              apx_slide_number: 1,
+              apx_slide_label: this.current_slide_config.slide_label,
+              apx_slide_type: this.currentMediaType,
+              apx_change_action: "next-clicked",
+              apx_time_taken: _time_taken2
+            });
+            (_window$ApxorRTM17 = window.ApxorRTM) === null || _window$ApxorRTM17 === void 0 || _window$ApxorRTM17.logEvent("apx_slide_viewed", {
+              apx_nudge_id: this.config[this.position].id,
+              apx_nudge_name: this.config[this.position].campaign_name,
+              apx_template_name: "stories",
+              apx_variant_code: this.config[this.position].variant_code,
+              apx_slide_number: 1,
+              apx_slide_label: this.current_slide_config.slide_label,
+              apx_slide_type: this.currentMediaType
+            });
+            (_window$ApxorRTM18 = window.ApxorRTM) === null || _window$ApxorRTM18 === void 0 || _window$ApxorRTM18.logEvent("apx_story_changed", {
+              apx_nudge_id: this.config[this.position].id,
+              apx_nudge_name: this.config[this.position].campaign_name,
+              apx_template_name: "stories",
+              apx_variant_code: this.config[this.position].variant_code,
+              apx_slide_number: 1,
+              apx_slide_label: this.current_slide_config.slide_label,
+              apx_slide_type: this.currentMediaType,
+              apx_change_action: "autoplay",
+              apx_time_taken: _time_taken2
+            });
+            var _currentTime2 = Date.now();
+            this.slideStartTime = _currentTime2;
+            return;
+          }
+        }
+
+        // Move to the next slide within the current group
+        var nextIndex = activeIndex + 1;
+        (_progress$activeIndex7 = progress[activeIndex]) === null || _progress$activeIndex7 === void 0 || _progress$activeIndex7.classList.remove("active");
+        (_progress$activeIndex8 = progress[activeIndex]) === null || _progress$activeIndex8 === void 0 || _progress$activeIndex8.classList.add("passed");
+        (_progress$nextIndex = progress[nextIndex]) === null || _progress$nextIndex === void 0 || _progress$nextIndex.classList.add("active");
+        this.updateSlideDetails(nextIndex);
+        (_window13 = window) === null || _window13 === void 0 || (_window13 = _window13.Apxor) === null || _window13 === void 0 || (_window13$logInternal = _window13.logInternalEvent) === null || _window13$logInternal === void 0 || _window13$logInternal.call(_window13, "story_slide_seen", JSON.stringify({
+          config_id: this.config[this.position].id,
+          position: this.position,
+          index: activeIndex + 2,
+          view_id: this.view_id
+        }));
+        this.current_slide_config.media_type === "none" ? this.currentMediaType = "builder" : this.currentMediaType = this.current_slide_config.media_type;
+        var time_taken;
+        var current_time = Date.now();
+        time_taken = (current_time - this.slideStartTime) / 1000;
+        (_window$ApxorRTM19 = window.ApxorRTM) === null || _window$ApxorRTM19 === void 0 || _window$ApxorRTM19.logEvent("apx_slide_changed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex + 2,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_slide_type: this.currentMediaType,
+          apx_change_action: "next-clicked",
+          apx_time_taken: time_taken
+        });
+        (_window$ApxorRTM20 = window.ApxorRTM) === null || _window$ApxorRTM20 === void 0 || _window$ApxorRTM20.logEvent("apx_slide_viewed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex + 2,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_slide_type: this.currentMediaType
+        });
+        var currentTime = Date.now();
+        this.slideStartTime = currentTime;
+      }
+    }, {
+      key: "moveToPreviousSlide",
+      value: function moveToPreviousSlide() {
+        var _window$ApxorRTM21, _progress$activeIndex11, _progress$activeIndex12, _progress$previousInd, _progress$previousInd2, _window15, _window15$logInternal, _window$ApxorRTM25, _window$ApxorRTM26;
+        this.storyContainer.removeEventListener("touchend", this.boundSwipeUpHandling);
+        var progress1 = Array.from(document.querySelectorAll(".progress"));
+        var activeIndex1 = progress1.findIndex(function (el) {
+          return el.classList.contains("active");
+        });
+        var current_time_new = Date.now();
+        var time_taken_new;
+        time_taken_new = (current_time_new - this.slideStartTime) / 1000;
+        (_window$ApxorRTM21 = window.ApxorRTM) === null || _window$ApxorRTM21 === void 0 || _window$ApxorRTM21.logEvent("apx_slide_completed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex1 + 1,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_time_taken: time_taken_new
+        });
+        var progress = Array.from(document.querySelectorAll(".progress"));
+        var activeIndex = progress.findIndex(function (el) {
+          return el.classList.contains("active");
+        });
+        if (activeIndex === 0 && this.position === 0) {
+          return;
+        }
+        if (activeIndex === 0) {
+          var _progress$activeIndex9, _progress$activeIndex10, _progress$lastSlideIn, _window14, _window14$logInternal, _window$ApxorRTM22, _window$ApxorRTM23, _window$ApxorRTM24;
+          // If at the first slide of the current group, move to the last slide of the previous group
+          // this.Voll();
+          this.position--;
+          this.progress_bar = new ProgressBar$1(this.config[this.position].progress_bar);
+          this.slides = this.config[this.position].slides;
+          this.updateProgressBarSegments(true);
+          var lastSlideIndex = this.slides.length - 1;
+          (_progress$activeIndex9 = progress[activeIndex]) === null || _progress$activeIndex9 === void 0 || _progress$activeIndex9.classList.remove("active");
+          (_progress$activeIndex10 = progress[activeIndex]) === null || _progress$activeIndex10 === void 0 || _progress$activeIndex10.classList.add("passed");
+          (_progress$lastSlideIn = progress[lastSlideIndex]) === null || _progress$lastSlideIn === void 0 || _progress$lastSlideIn.classList.add("active");
+          this.updateSlideDetails(lastSlideIndex);
+          (_window14 = window) === null || _window14 === void 0 || (_window14 = _window14.Apxor) === null || _window14 === void 0 || (_window14$logInternal = _window14.logInternalEvent) === null || _window14$logInternal === void 0 || _window14$logInternal.call(_window14, "story_slide_seen", JSON.stringify({
+            config_id: this.config[this.position].id,
+            position: this.position,
+            index: lastSlideIndex + 1,
+            view_id: this.view_id
+          }));
+          this.current_slide_config.media_type === "none" ? this.currentMediaType = "builder" : this.currentMediaType = this.current_slide_config.media_type;
+          var _time_taken3;
+          var _current_time4 = Date.now();
+          _time_taken3 = (_current_time4 - this.slideStartTime) / 1000;
+          (_window$ApxorRTM22 = window.ApxorRTM) === null || _window$ApxorRTM22 === void 0 || _window$ApxorRTM22.logEvent("apx_slide_changed", {
+            apx_nudge_id: this.config[this.position].id,
+            apx_nudge_name: this.config[this.position].campaign_name,
+            apx_template_name: "stories",
+            apx_variant_code: this.config[this.position].variant_code,
+            apx_slide_number: lastSlideIndex + 1,
+            apx_slide_label: this.current_slide_config.slide_label,
+            apx_slide_type: this.currentMediaType,
+            apx_change_action: "previous-clicked",
+            apx_time_taken: _time_taken3
+          });
+          (_window$ApxorRTM23 = window.ApxorRTM) === null || _window$ApxorRTM23 === void 0 || _window$ApxorRTM23.logEvent("apx_slide_viewed", {
+            apx_nudge_id: this.config[this.position].id,
+            apx_nudge_name: this.config[this.position].campaign_name,
+            apx_template_name: "stories",
+            apx_variant_code: this.config[this.position].variant_code,
+            apx_slide_number: lastSlideIndex + 1,
+            apx_slide_label: this.current_slide_config.slide_label,
+            apx_slide_type: this.currentMediaType
+          });
+          (_window$ApxorRTM24 = window.ApxorRTM) === null || _window$ApxorRTM24 === void 0 || _window$ApxorRTM24.logEvent("apx_story_changed", {
+            apx_nudge_id: this.config[this.position].id,
+            apx_nudge_name: this.config[this.position].campaign_name,
+            apx_template_name: "stories",
+            apx_variant_code: this.config[this.position].variant_code,
+            apx_slide_number: lastSlideIndex + 1,
+            apx_slide_label: this.current_slide_config.slide_label,
+            apx_slide_type: this.currentMediaType,
+            apx_change_action: "autoplay",
+            apx_time_taken: _time_taken3
+          });
+          var _currentTime3 = Date.now();
+          this.slideStartTime = _currentTime3;
+          return;
+        }
+        // Move to the previous slide within the current group
+        var previousIndex = activeIndex - 1;
+        (_progress$activeIndex11 = progress[activeIndex]) === null || _progress$activeIndex11 === void 0 || _progress$activeIndex11.classList.remove("active");
+        (_progress$activeIndex12 = progress[activeIndex]) === null || _progress$activeIndex12 === void 0 || _progress$activeIndex12.classList.add("passed");
+        (_progress$previousInd = progress[previousIndex]) === null || _progress$previousInd === void 0 || _progress$previousInd.classList.remove("passed");
+        (_progress$previousInd2 = progress[previousIndex]) === null || _progress$previousInd2 === void 0 || _progress$previousInd2.classList.add("active");
+        var noOfSegments = progress.length;
+        for (var i = activeIndex; i < noOfSegments; i++) {
+          var _progress$i;
+          (_progress$i = progress[i]) === null || _progress$i === void 0 || _progress$i.classList.remove("passed");
+        }
+        this.updateSlideDetails(previousIndex);
+        (_window15 = window) === null || _window15 === void 0 || (_window15 = _window15.Apxor) === null || _window15 === void 0 || (_window15$logInternal = _window15.logInternalEvent) === null || _window15$logInternal === void 0 || _window15$logInternal.call(_window15, "story_slide_seen", JSON.stringify({
+          config_id: this.config[this.position].id,
+          position: this.position,
+          index: activeIndex,
+          view_id: this.view_id
+        }));
+        var currentTime = Date.now();
+        this.current_slide_config.media_type === "none" ? this.currentMediaType = "builder" : this.currentMediaType = this.current_slide_config.media_type;
+        var time_taken;
+        var current_time = Date.now();
+        time_taken = (current_time - this.slideStartTime) / 1000;
+        (_window$ApxorRTM25 = window.ApxorRTM) === null || _window$ApxorRTM25 === void 0 || _window$ApxorRTM25.logEvent("apx_slide_changed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_slide_type: this.currentMediaType,
+          apx_change_action: "previous-clicked",
+          apx_time_taken: time_taken
+        });
+        (_window$ApxorRTM26 = window.ApxorRTM) === null || _window$ApxorRTM26 === void 0 || _window$ApxorRTM26.logEvent("apx_slide_viewed", {
+          apx_nudge_id: this.config[this.position].id,
+          apx_nudge_name: this.config[this.position].campaign_name,
+          apx_template_name: "stories",
+          apx_variant_code: this.config[this.position].variant_code,
+          apx_slide_number: activeIndex,
+          apx_slide_label: this.current_slide_config.slide_label,
+          apx_slide_type: this.currentMediaType
+        });
+        this.slideStartTime = currentTime;
+      }
+    }, {
+      key: "updateSlideDetails",
+      value: function updateSlideDetails(activeIndex) {
+        var _this2 = this;
+        // Update slide details for the new active slide
+        var existingAbsoluteElements = document.querySelectorAll(".apx-slide-header");
+        existingAbsoluteElements.forEach(function (element) {
+          element.remove();
+        });
+        var currentSlideDetails = document.querySelector(".slide-details");
+        currentSlideDetails.style.display = "none";
+        currentSlideDetails.innerHTML = "";
+        currentSlideDetails.style.display = "flex";
+
+        // Get details of the new active slide
+        var current_slide_from_config = this.slides[activeIndex];
+        this.current_slide_config = current_slide_from_config;
+
+        // Update slide details
+        var slideHeader = document.createElement("div");
+        slideHeader.classList.add("slide-header");
+        slideHeader.style.position = "relative";
+        slideHeader.style.top = "20px";
+        // Append slide header to slide details container
+        currentSlideDetails.appendChild(slideHeader);
+
+        // Update slide content
+        var element;
+        if ((current_slide_from_config === null || current_slide_from_config === void 0 ? void 0 : current_slide_from_config.media_type) === "image") {
+          var _window$Apxor4;
+          element = document.createElement("div");
+          var image_src;
+          var image_ext;
+          if (((_window$Apxor4 = window.Apxor) === null || _window$Apxor4 === void 0 ? void 0 : _window$Apxor4.platform) != "ios") {
+            image_ext = getFileExtension(current_slide_from_config.media_url);
+            image_src = window.Apxor.getFilePath(this.config[this.position].id, current_slide_from_config.media_url, image_ext);
+            if (image_src && image_src != "") {
+              document.body.style.backgroundImage = "url(".concat(image_src, ")");
+              document.body.style.backgroundSize = "100% auto";
+              document.body.style.backgroundPosition = "center";
+              document.body.style.backgroundRepeat = "no-repeat";
+            } else {
+              document.body.style.backgroundImage = "url(".concat(current_slide_from_config.media_url, ")");
+              document.body.style.backgroundSize = "100% auto";
+              document.body.style.backgroundPosition = "center";
+              document.body.style.backgroundRepeat = "no-repeat";
+            }
+          } else {
+            document.body.style.backgroundImage = "url(".concat(current_slide_from_config.media_url, ")");
+            document.body.style.backgroundSize = "100% auto";
+            document.body.style.backgroundPosition = "center";
+            document.body.style.backgroundRepeat = "no-repeat";
+          }
+          document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+          document.body.style.margin = "0px";
+        } else if ((current_slide_from_config === null || current_slide_from_config === void 0 ? void 0 : current_slide_from_config.media_type) === "video") {
+          var _window$Apxor5;
+          document.body.style.backgroundImage = "";
+          document.body.style.backgroundSize = "";
+          document.body.style.backgroundPosition = "";
+          document.body.style.backgroundRepeat = "";
+          element = document.createElement("video");
+          element.classList.add("apx-story-video");
+          element.disablePictureInPicture = true;
+          element.autoplay = true;
+          var sourceElement = document.createElement("source");
+          sourceElement.setAttribute("src", current_slide_from_config.media_url);
+          sourceElement.setAttribute("type", "video/mp4");
+          element.appendChild(sourceElement);
+          element.style.width = "100%";
+          element.style.height = "auto";
+          document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+          document.body.style.margin = "0px";
+          if (((_window$Apxor5 = window.Apxor) === null || _window$Apxor5 === void 0 ? void 0 : _window$Apxor5.platform) === "ios") {
+            element.playsInline = true;
+          }
+          element.style.alignItems = "center";
+          element.style.objectFit = "cover";
+          element.style.display = "flex";
+          element.style.alignItems = "center";
+        } else if ((current_slide_from_config === null || current_slide_from_config === void 0 ? void 0 : current_slide_from_config.media_type) === "none") {
+          document.body.style.backgroundImage = "";
+          document.body.style.backgroundSize = "";
+          document.body.style.backgroundPosition = "";
+          document.body.style.backgroundRepeat = "";
+          // If media type is none ,build each element in story using builder approach
+          // Create custom content
+          var updated_layout_without_absolute_elements = JSON.parse(JSON.stringify(current_slide_from_config.layout));
+          delete updated_layout_without_absolute_elements["absolute_position_children"];
+          element = this.HjRo(updated_layout_without_absolute_elements);
+        }
+        // Append slide content to slide details container
+
+        document.body.style.backgroundColor = current_slide_from_config.media_background_color;
+        document.body.style.margin = "0px";
+        currentSlideDetails.appendChild(element);
+        this.Jwju();
+
+        // Handle absolute position children
+        if (current_slide_from_config.layout.absolute_position_children && current_slide_from_config.layout.absolute_position_children.length > 0) {
+          current_slide_from_config.layout.absolute_position_children.forEach(function (childConfig) {
+            var childElement = _this2.HjRo(childConfig);
+            // Append absolute position children to slide details container
+            currentSlideDetails.appendChild(childElement);
+          });
+        }
+        window.intervalToCheckImgStatus2 = setInterval(function () {
+          if (_this2.rnGL()) {
+            clearInterval(window.intervalToCheckImgStatus2);
+          }
+        }, 500);
+      }
+    }, {
+      key: "updateProgressBarSegments",
+      value: function updateProgressBarSegments() {
+        var _this3 = this;
+        var previousChecker = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        // Update progress bar segments based on the number of slides in the current group
+        var progressContainer = document.querySelector(".progress-container");
+        progressContainer.innerHTML = "";
+        this.slides.forEach(function (slide, index) {
+          var progressSlide = document.createElement("div");
+          progressSlide.classList.add("slide".concat(index));
+          progressSlide.classList.add("progress");
+          var slide_duration = slide.duration / 1000;
+          progressSlide.style.animationDuration = "".concat(slide_duration, "s");
+          progressContainer.appendChild(progressSlide);
+        });
+        var progressSegments = progressContainer.querySelectorAll(".progress");
+        if (progressSegments.length > 0) {
+          if (previousChecker) {
+            for (var i = 0; i < progressSegments.length - 1; i++) {
+              var _progressSegments$i2;
+              (_progressSegments$i2 = progressSegments[i]) === null || _progressSegments$i2 === void 0 || _progressSegments$i2.classList.add("passed");
+            }
+            progressSegments[progressSegments.length - 1].classList.add("active");
+          } else {
+            progressSegments[0].classList.add("active");
+          }
+        }
+        Array.from(progressSegments).map(function (el) {
+          return el.addEventListener("animationend", function () {
+            _this3.moveToNextSlide();
+          }, false);
+        });
+        this._getStoriesStyles();
+      }
+    }]);
+    return Stories;
+  }();
+
   var RTM = /*#__PURE__*/_createClass(function RTM() {
     var _this = this;
     _classCallCheck(this, RTM);
-    _defineProperty(this, "ZeeY", {});
+    _defineProperty(this, "RxKq", {});
     _defineProperty(this, "isShowingAction", false);
     _defineProperty(this, "currentAction", null);
-    _defineProperty(this, "XhLY", null);
-    _defineProperty(this, "version", 61);
+    _defineProperty(this, "sOOz", null);
+    _defineProperty(this, "version", 71);
     _defineProperty(this, "isInitialised", false);
-    _defineProperty(this, "bBhw", {});
-    _defineProperty(this, "QDeD", false);
+    _defineProperty(this, "jkaK", {});
+    _defineProperty(this, "pNeK", false);
     _defineProperty(this, "_isShownECCalled", false);
-    _defineProperty(this, "DuFv", function () {
+    _defineProperty(this, "BYKy", function () {
       _this.isInitialised = true;
       var oldPushState = history.pushState;
       history.pushState = function pushState() {
@@ -21074,7 +22782,7 @@
     });
     _defineProperty(this, "show", function (uiJson, duration, uuid, name) {
       if (!_this.isInitialised) {
-        _this.DuFv();
+        _this.BYKy();
       }
       window.addEventListener("pagehide", function () {
         var _window$Apxor, _window$Apxor$pageUnl;
@@ -21101,7 +22809,7 @@
         } else if (ui_config.display_type === "new-inline" || ui_config.action_class === "tooltip_builder") {
           _this.createInLineToolTip(ui_config, duration, uuid, name, ui_config.action_class === "tooltip_builder" ? "tooltip_builder" : "new-inline");
         } else if (ui_config.display_type === "coach_mark_v2") {
-          _this.QCTE(ui_config, duration, uuid, name);
+          _this.iGMR(ui_config, duration, uuid, name);
         } else {
           showCoachmarkWithDelay(_this, ui_config, {
             configId: uuid,
@@ -21198,17 +22906,45 @@
       });
       cardsContainer.showEmbedCards();
     });
+    _defineProperty(this, "showStories", function (config, duration, configId, name, position, slidesSeenCount, view_id) {
+      try {
+        config = config.split("\n").join("\\n");
+        var ui_config = JSON.parse(config);
+        _this.jQXU(ui_config, configId, name, position, slidesSeenCount, view_id);
+      } catch (e) {
+        var _window$Apxor3;
+        if (((_window$Apxor3 = window.Apxor) === null || _window$Apxor3 === void 0 ? void 0 : _window$Apxor3.platform) === "ios") {
+          var _window14, _window14$logInternal, _window15, _window15$updateFlag;
+          (_window14 = window) === null || _window14 === void 0 || (_window14 = _window14.Apxor) === null || _window14 === void 0 || (_window14$logInternal = _window14.logInternalEvent) === null || _window14$logInternal === void 0 || _window14$logInternal.call(_window14, "story_slides_closed");
+          (_window15 = window) === null || _window15 === void 0 || (_window15 = _window15.Apxor) === null || _window15 === void 0 || (_window15$updateFlag = _window15.updateFlag) === null || _window15$updateFlag === void 0 || _window15$updateFlag.call(_window15, false, "IN_APP");
+        } else {
+          var _window16, _window16$updateFlag;
+          (_window16 = window) === null || _window16 === void 0 || (_window16 = _window16.Apxor) === null || _window16 === void 0 || (_window16$updateFlag = _window16.updateFlag) === null || _window16$updateFlag === void 0 || _window16$updateFlag.call(_window16, "IN_APP", false);
+        }
+        console.error(e);
+      }
+    });
+    _defineProperty(this, "jQXU", function (config, configId, name, position, slidesSeenCount, view_id) {
+      var cardsContainer = new Stories(config, configId, name, position, slidesSeenCount, view_id, function () {
+        window.Apxor.logAppEvent("apx_nudge_shown", {
+          campaignName: name,
+          id: configId,
+          apx_nudge_type: "stories"
+        });
+      }, function () {});
+      cardsContainer.showStories();
+    });
     _defineProperty(this, "removeAll", function () {
-      var _window14, _window14$updateFlag;
-      (_window14 = window) === null || _window14 === void 0 || (_window14 = _window14.Apxor) === null || _window14 === void 0 || (_window14$updateFlag = _window14.updateFlag) === null || _window14$updateFlag === void 0 || _window14$updateFlag.call(_window14, false);
+      var _window17, _window17$updateFlag;
+      (_window17 = window) === null || _window17 === void 0 || (_window17 = _window17.Apxor) === null || _window17 === void 0 || (_window17$updateFlag = _window17.updateFlag) === null || _window17$updateFlag === void 0 || _window17$updateFlag.call(_window17, false);
       if (_this.currentAction !== null && _this.currentAction !== undefined) {
         _this.isShowingAction = false;
         try {
-          var _window15;
+          var _window18;
           _this.currentAction();
           _this.currentAction = null;
           console.log("Callback is called");
-          (_window15 = window) === null || _window15 === void 0 || (_window15 = _window15.ApxorLogger) === null || _window15 === void 0 || _window15.debug("Callback is called");
+          (_window18 = window) === null || _window18 === void 0 || (_window18 = _window18.ApxorLogger) === null || _window18 === void 0 || _window18.debug("Callback is called");
         } catch (e) {}
       }
     });
@@ -21220,48 +22956,48 @@
       var onShow = function onShow() {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
-          var _window16, _window16$updateFlag, _window17, _window17$updateCount;
-          (_window16 = window) === null || _window16 === void 0 || (_window16 = _window16.Apxor) === null || _window16 === void 0 || (_window16$updateFlag = _window16.updateFlag) === null || _window16$updateFlag === void 0 || _window16$updateFlag.call(_window16, true);
+          var _window19, _window19$updateFlag, _window20, _window20$updateCount;
+          (_window19 = window) === null || _window19 === void 0 || (_window19 = _window19.Apxor) === null || _window19 === void 0 || (_window19$updateFlag = _window19.updateFlag) === null || _window19$updateFlag === void 0 || _window19$updateFlag.call(_window19, true);
           window.Apxor.logActionEvent("inline_shown", uuid, name);
-          (_window17 = window) === null || _window17 === void 0 || (_window17 = _window17.Apxor) === null || _window17 === void 0 || (_window17$updateCount = _window17.updateCount) === null || _window17$updateCount === void 0 || _window17$updateCount.call(_window17, uuid);
+          (_window20 = window) === null || _window20 === void 0 || (_window20 = _window20.Apxor) === null || _window20 === void 0 || (_window20$updateCount = _window20.updateCount) === null || _window20$updateCount === void 0 || _window20$updateCount.call(_window20, uuid);
           if (ui_config !== null && ui_config !== void 0 && ui_config.is_preview) {
             setTimeout(function () {
-              var _window18, _window18$logInternal;
-              (_window18 = window) === null || _window18 === void 0 || (_window18 = _window18.Apxor) === null || _window18 === void 0 || (_window18$logInternal = _window18.logInternalEvent) === null || _window18$logInternal === void 0 || _window18$logInternal.call(_window18, "capt");
+              var _window21, _window21$logInternal;
+              (_window21 = window) === null || _window21 === void 0 || (_window21 = _window21.Apxor) === null || _window21 === void 0 || (_window21$logInternal = _window21.logInternalEvent) === null || _window21$logInternal === void 0 || _window21$logInternal.call(_window21, "capt");
             }, 500);
           }
         }
       };
       var onHide = function onHide(isCancelled) {
-        var _window19, _window19$updateFlag, _window20;
+        var _window22, _window22$updateFlag, _window23;
         _this.isShowingAction = false;
         _this.currentAction = null;
-        _this.XhLY = null;
-        (_window19 = window) === null || _window19 === void 0 || (_window19 = _window19.Apxor) === null || _window19 === void 0 || (_window19$updateFlag = _window19.updateFlag) === null || _window19$updateFlag === void 0 || _window19$updateFlag.call(_window19, false);
+        _this.sOOz = null;
+        (_window22 = window) === null || _window22 === void 0 || (_window22 = _window22.Apxor) === null || _window22 === void 0 || (_window22$updateFlag = _window22.updateFlag) === null || _window22$updateFlag === void 0 || _window22$updateFlag.call(_window22, false);
         if (window.Apxor && window.Apxor.logActionEvent && !isCancelled) {
           window.Apxor.logActionEvent("inline_dismissed", uuid, name);
         }
-        if (((_window20 = window) === null || _window20 === void 0 || (_window20 = _window20.ApxorWebView) === null || _window20 === void 0 ? void 0 : _window20.getLayoutType()) === "web-inline") {
-          var _window21;
-          (_window21 = window) === null || _window21 === void 0 || (_window21 = _window21.ApxorWebView) === null || _window21 === void 0 || _window21.removeWebView();
+        if (((_window23 = window) === null || _window23 === void 0 || (_window23 = _window23.ApxorWebView) === null || _window23 === void 0 ? void 0 : _window23.getLayoutType()) === "web-inline") {
+          var _window24;
+          (_window24 = window) === null || _window24 === void 0 || (_window24 = _window24.ApxorWebView) === null || _window24 === void 0 || _window24.removeWebView();
         }
       };
       if (action_class === "new-inline") {
-        _this.XhLY = new InLineTooltip(ui_config, [], [], terminationConfig, {
+        _this.sOOz = new InLineTooltip(ui_config, [], [], terminationConfig, {
           configId: uuid,
           configName: name
         }, _this, onShow, onHide, function () {}, false, 0);
       } else if (action_class === "tooltip_builder") {
-        _this.XhLY = new NewInLineTooltip(ui_config, terminationConfig, {
+        _this.sOOz = new NewInLineTooltip(ui_config, terminationConfig, {
           configId: uuid,
           configName: name
         }, _this, onShow, onHide);
       }
       setTimeout(function () {
-        _this.XhLY.createNewTooltip();
+        _this.sOOz.createNewTooltip();
       }, ui_config.delay);
     });
-    _defineProperty(this, "QCTE", function (ui_config, duration, uuid, name) {
+    _defineProperty(this, "iGMR", function (ui_config, duration, uuid, name) {
       var terminationConfig = {};
       terminationConfig["auto_dismiss"] = duration > 0;
       terminationConfig["duration"] = duration;
@@ -21271,35 +23007,35 @@
       }, _this, function () {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
-          var _window22, _window22$updateFlag;
-          (_window22 = window) === null || _window22 === void 0 || (_window22 = _window22.Apxor) === null || _window22 === void 0 || (_window22$updateFlag = _window22.updateFlag) === null || _window22$updateFlag === void 0 || _window22$updateFlag.call(_window22, true);
+          var _window25, _window25$updateFlag;
+          (_window25 = window) === null || _window25 === void 0 || (_window25 = _window25.Apxor) === null || _window25 === void 0 || (_window25$updateFlag = _window25.updateFlag) === null || _window25$updateFlag === void 0 || _window25$updateFlag.call(_window25, true);
           window.Apxor.logActionEvent("inline_shown", uuid, name);
           if (ui_config !== null && ui_config !== void 0 && ui_config.is_preview) {
             setTimeout(function () {
-              var _window23, _window23$logInternal;
-              (_window23 = window) === null || _window23 === void 0 || (_window23 = _window23.Apxor) === null || _window23 === void 0 || (_window23$logInternal = _window23.logInternalEvent) === null || _window23$logInternal === void 0 || _window23$logInternal.call(_window23, "capt");
+              var _window26, _window26$logInternal;
+              (_window26 = window) === null || _window26 === void 0 || (_window26 = _window26.Apxor) === null || _window26 === void 0 || (_window26$logInternal = _window26.logInternalEvent) === null || _window26$logInternal === void 0 || _window26$logInternal.call(_window26, "capt");
             }, 500);
           }
         }
       }, function (isCancelled) {
-        var _window24, _window24$updateFlag, _window25;
+        var _window27, _window27$updateFlag, _window28;
         _this.isShowingAction = false;
         _this.currentAction = null;
-        _this.XhLY = null;
-        (_window24 = window) === null || _window24 === void 0 || (_window24 = _window24.Apxor) === null || _window24 === void 0 || (_window24$updateFlag = _window24.updateFlag) === null || _window24$updateFlag === void 0 || _window24$updateFlag.call(_window24, false);
+        _this.sOOz = null;
+        (_window27 = window) === null || _window27 === void 0 || (_window27 = _window27.Apxor) === null || _window27 === void 0 || (_window27$updateFlag = _window27.updateFlag) === null || _window27$updateFlag === void 0 || _window27$updateFlag.call(_window27, false);
         if (window.Apxor && window.Apxor.logActionEvent && !isCancelled) {
           window.Apxor.logActionEvent("inline_dismissed", uuid, name);
         }
-        if (((_window25 = window) === null || _window25 === void 0 || (_window25 = _window25.ApxorWebView) === null || _window25 === void 0 ? void 0 : _window25.getLayoutType()) === "web-inline") {
-          var _window26;
-          (_window26 = window) === null || _window26 === void 0 || (_window26 = _window26.ApxorWebView) === null || _window26 === void 0 || _window26.removeWebView();
+        if (((_window28 = window) === null || _window28 === void 0 || (_window28 = _window28.ApxorWebView) === null || _window28 === void 0 ? void 0 : _window28.getLayoutType()) === "web-inline") {
+          var _window29;
+          (_window29 = window) === null || _window29 === void 0 || (_window29 = _window29.ApxorWebView) === null || _window29 === void 0 || _window29.removeWebView();
         }
       }, _this.stepperCallback, false, 0);
       _this._currentCoachmark.createNewCoachMark();
     });
     _defineProperty(this, "updateElementPositionOnScroll", function (top, left, height, width) {
-      if (_this.XhLY) {
-        _this.XhLY.updateElementPositionOnScroll(top, left, height, width);
+      if (_this.sOOz) {
+        _this.sOOz.updateElementPositionOnScroll(top, left, height, width);
       }
     });
     _defineProperty(this, "createInAppVideo", function (config, duration, configId, name) {
@@ -21316,15 +23052,15 @@
       var VideoInAppInstance = new VideoInApp(videoConfig, terminationConfig, configId, name, function () {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
-          var _window27, _window27$updateFlag;
-          (_window27 = window) === null || _window27 === void 0 || (_window27 = _window27.Apxor) === null || _window27 === void 0 || (_window27$updateFlag = _window27.updateFlag) === null || _window27$updateFlag === void 0 || _window27$updateFlag.call(_window27, true);
+          var _window30, _window30$updateFlag;
+          (_window30 = window) === null || _window30 === void 0 || (_window30 = _window30.Apxor) === null || _window30 === void 0 || (_window30$updateFlag = _window30.updateFlag) === null || _window30$updateFlag === void 0 || _window30$updateFlag.call(_window30, true);
           window.Apxor.logActionEvent("inapp_shown", configId, name);
         }
       }, function () {
-        var _window28, _window28$updateFlag;
+        var _window31, _window31$updateFlag;
         _this.isShowingAction = false;
         _this.currentAction = null;
-        (_window28 = window) === null || _window28 === void 0 || (_window28 = _window28.Apxor) === null || _window28 === void 0 || (_window28$updateFlag = _window28.updateFlag) === null || _window28$updateFlag === void 0 || _window28$updateFlag.call(_window28, false);
+        (_window31 = window) === null || _window31 === void 0 || (_window31 = _window31.Apxor) === null || _window31 === void 0 || (_window31$updateFlag = _window31.updateFlag) === null || _window31$updateFlag === void 0 || _window31$updateFlag.call(_window31, false);
         if (window.Apxor && window.Apxor.logActionEvent) {
           window.Apxor.logActionEvent("inapp_dismissed", configId, name);
         }
@@ -21350,19 +23086,19 @@
       var onShow = function onShow() {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
-          var _window$Apxor3;
-          if (((_window$Apxor3 = window.Apxor) === null || _window$Apxor3 === void 0 ? void 0 : _window$Apxor3.platform) === "ios") {
-            var _window29, _window29$updateFlag;
-            (_window29 = window) === null || _window29 === void 0 || (_window29 = _window29.Apxor) === null || _window29 === void 0 || (_window29$updateFlag = _window29.updateFlag) === null || _window29$updateFlag === void 0 || _window29$updateFlag.call(_window29, true, "IN_APP");
+          var _window$Apxor4;
+          if (((_window$Apxor4 = window.Apxor) === null || _window$Apxor4 === void 0 ? void 0 : _window$Apxor4.platform) === "ios") {
+            var _window32, _window32$updateFlag;
+            (_window32 = window) === null || _window32 === void 0 || (_window32 = _window32.Apxor) === null || _window32 === void 0 || (_window32$updateFlag = _window32.updateFlag) === null || _window32$updateFlag === void 0 || _window32$updateFlag.call(_window32, true, "IN_APP");
           } else {
-            var _window30, _window30$updateFlag;
-            (_window30 = window) === null || _window30 === void 0 || (_window30 = _window30.Apxor) === null || _window30 === void 0 || (_window30$updateFlag = _window30.updateFlag) === null || _window30$updateFlag === void 0 || _window30$updateFlag.call(_window30, "IN_APP", true);
+            var _window33, _window33$updateFlag;
+            (_window33 = window) === null || _window33 === void 0 || (_window33 = _window33.Apxor) === null || _window33 === void 0 || (_window33$updateFlag = _window33.updateFlag) === null || _window33$updateFlag === void 0 || _window33$updateFlag.call(_window33, "IN_APP", true);
           }
           window.Apxor.logActionEvent("inapp_shown", configId, name);
         }
       };
       var onHide = function onHide(backgroundDiv, action) {
-        var _dialogContent$classL, _window$Apxor4;
+        var _dialogContent$classL, _window$Apxor5;
         var cssClass = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".apx-dlg-c";
         var closeListener = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
         var redirectionListener = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
@@ -21373,12 +23109,12 @@
         // setTimeout(() => {
         backgroundDiv.remove();
         _this.isShowingAction = false;
-        if (((_window$Apxor4 = window.Apxor) === null || _window$Apxor4 === void 0 ? void 0 : _window$Apxor4.platform) === "ios") {
-          var _window31, _window31$updateFlag;
-          (_window31 = window) === null || _window31 === void 0 || (_window31 = _window31.Apxor) === null || _window31 === void 0 || (_window31$updateFlag = _window31.updateFlag) === null || _window31$updateFlag === void 0 || _window31$updateFlag.call(_window31, false, "IN_APP");
+        if (((_window$Apxor5 = window.Apxor) === null || _window$Apxor5 === void 0 ? void 0 : _window$Apxor5.platform) === "ios") {
+          var _window34, _window34$updateFlag;
+          (_window34 = window) === null || _window34 === void 0 || (_window34 = _window34.Apxor) === null || _window34 === void 0 || (_window34$updateFlag = _window34.updateFlag) === null || _window34$updateFlag === void 0 || _window34$updateFlag.call(_window34, false, "IN_APP");
         } else {
-          var _window32, _window32$updateFlag;
-          (_window32 = window) === null || _window32 === void 0 || (_window32 = _window32.Apxor) === null || _window32 === void 0 || (_window32$updateFlag = _window32.updateFlag) === null || _window32$updateFlag === void 0 || _window32$updateFlag.call(_window32, "IN_APP", false);
+          var _window35, _window35$updateFlag;
+          (_window35 = window) === null || _window35 === void 0 || (_window35 = _window35.Apxor) === null || _window35 === void 0 || (_window35$updateFlag = _window35.updateFlag) === null || _window35$updateFlag === void 0 || _window35$updateFlag.call(_window35, "IN_APP", false);
         }
         _this.currentAction = null;
         if (window.Apxor && window.Apxor.logActionEvent && !(action == "cancel" || action == "redirect")) {
@@ -21393,11 +23129,11 @@
       inappModal.createInAppModal();
     });
     _defineProperty(this, "showPlaceHolder", function () {
-      var _window33;
-      if (_this.QDeD) {
+      var _window36;
+      if (_this.pNeK) {
         return;
       }
-      _this.QDeD = true;
+      _this.pNeK = true;
       var ele = document.createElement("div");
       ele.innerHTML = "place your immersive card here";
       ele.style.backgroundColor = "#f5f5f5";
@@ -21407,20 +23143,62 @@
       ele.style.padding = "12px";
       ele.style.fontSize = "14px";
       document.body.appendChild(ele);
-      (_window33 = window) === null || _window33 === void 0 || (_window33 = _window33.ApxorWidget) === null || _window33 === void 0 || _window33.setDimensions(window.document.querySelector("html").offsetWidth, window.document.querySelector("html").offsetHeight);
+      (_window36 = window) === null || _window36 === void 0 || (_window36 = _window36.ApxorWidget) === null || _window36 === void 0 || _window36.setDimensions(window.document.querySelector("html").offsetWidth, window.document.querySelector("html").offsetHeight);
+    });
+    _defineProperty(this, "pauseStories", function () {
+      var progress = Array.from(document.querySelectorAll(".progress"));
+      var activeIndex = progress.findIndex(function (el) {
+        return el.classList.contains("active");
+      });
+      progress[activeIndex].style.animationPlayState = "paused";
+      var slide_details_to_be_deleted;
+      slide_details_to_be_deleted = document.querySelector(".slide-details");
+      var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+      for (var i = 0; i < childElements.length; i++) {
+        var child = childElements[i];
+        if (child.tagName.toLowerCase() === "video") {
+          child.pause();
+        }
+      }
+    });
+    _defineProperty(this, "resumeStories", function () {
+      var progress = Array.from(document.querySelectorAll(".progress"));
+      var activeIndex = progress.findIndex(function (el) {
+        return el.classList.contains("active");
+      });
+      progress[activeIndex].style.animationPlayState = "running";
+      var slide_details_to_be_deleted;
+      slide_details_to_be_deleted = document.querySelector(".slide-details");
+      var childElements = slide_details_to_be_deleted.querySelectorAll("video");
+      for (var i = 0; i < childElements.length; i++) {
+        var child = childElements[i];
+        if (child.tagName.toLowerCase() === "video") {
+          child.play();
+        }
+      }
     });
     // createSurvey = (config, configId, name) => {
     //   const survey_obj = new NewSurveys(configId, name, config, []);
     //   survey_obj.createSurvey();
     // };
     _defineProperty(this, "logEvent", function (name, additional_info) {
-      var _window$Apxor5;
-      if (((_window$Apxor5 = window.Apxor) === null || _window$Apxor5 === void 0 ? void 0 : _window$Apxor5.platform) === "ios") {
+      var _window$Apxor6;
+      if (((_window$Apxor6 = window.Apxor) === null || _window$Apxor6 === void 0 ? void 0 : _window$Apxor6.platform) === "ios") {
         window.Apxor.logAppEvent(name, additional_info);
       } else {
         window.Apxor.logAppEvent(name, JSON.stringify(additional_info));
       }
     });
+    _defineProperty(this, "pauseVideos", function () {
+      var videos_to_be_paused = document.querySelector(".slide-details");
+      var childElements = videos_to_be_paused.querySelectorAll("video");
+      for (var i = 0; i < childElements.length; i++) {
+        var child = childElements[i];
+        if (child.tagName.toLowerCase() === "video") {
+          child.muted = true;
+        }
+      }
+    });
   });
 
   /* eslint-disable no-empty */