apxor-rtm-ui 0.1.0-qa.1 → 0.1.0-qa.2

package/dist/apxor.rtm.js.bak

@@ -157,13 +157,12 @@
     return typeof key === "symbol" ? key : String(key);
   }
 
-  /*! shepherd.js 4.0.0-beta.1 */
-
   /* eslint-disable no-unused-vars */
   /* eslint-disable no-useless-escape */
   /* eslint-disable no-empty */
   /* eslint-disable no-unsafe-finally */
   /* eslint-disable no-func-assign */
+  /*! shepherd.js 4.0.0-beta.1 */
 
   function _typeof$1(obj) {
     if (typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol") {
@@ -228,7 +227,7 @@
       if (i % 2) {
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
+        if (typeof Object.getOwnPropertySymbols === "function") {
           ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
             return Object.getOwnPropertyDescriptor(source, sym).enumerable;
           }));
@@ -325,7 +324,7 @@
    */
 
   function isFunction(value) {
-    return typeof value === 'function';
+    return typeof value === "function";
   }
   /**
    * Checks if `value` is classified as a `Number` object.
@@ -333,7 +332,7 @@
    */
 
   function isNumber(value) {
-    return typeof value === 'number';
+    return typeof value === "number";
   }
   /**
    * Checks if `value` is classified as a `String` object.
@@ -341,7 +340,7 @@
    */
 
   function isString(value) {
-    return typeof value === 'string';
+    return typeof value === "string";
   }
   /**
    * Checks if `value` is undefined.
@@ -371,27 +370,27 @@
     };
     return _extends$1.apply(this, arguments);
   }
-  var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
-  var ua = isBrowser ? navigator.userAgent : '';
+  var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+  var ua = isBrowser ? navigator.userAgent : "";
   var isIE = /MSIE |Trident\//.test(ua);
   var isUCBrowser = /UCBrowser\//.test(ua);
   var isIOS = isBrowser && /iPhone|iPad|iPod/.test(navigator.platform);
   var defaultProps = {
     allowHTML: true,
     animateFill: false,
-    animation: 'fade',
+    animation: "fade",
     appendTo: function appendTo() {
       return document.body;
     },
-    aria: 'describedby',
+    aria: "describedby",
     arrow: true,
-    boundary: 'scrollParent',
-    content: '',
+    boundary: "scrollParent",
+    content: "",
     delay: 0,
     distance: 10,
     duration: [325, 275],
     flip: true,
-    flipBehavior: 'flip',
+    flipBehavior: "flip",
     flipOnUpdate: false,
     hideOnClick: true,
     ignoreAttributes: false,
@@ -411,20 +410,20 @@
     onShown: function onShown() {},
     onTrigger: function onTrigger() {},
     onUntrigger: function onUntrigger() {},
-    placement: 'top',
+    placement: "top",
     popperOptions: {},
-    role: 'tooltip',
+    role: "tooltip",
     showOnCreate: false,
     sticky: false,
-    theme: '',
+    theme: "",
     touch: true,
-    trigger: 'mouseenter focus',
+    trigger: "mouseenter focus",
     triggerTarget: null,
     updateDuration: 0,
     wait: null,
     zIndex: 9999
   };
-  var POPPER_INSTANCE_DEPENDENCIES = ['arrow', 'boundary', 'distance', 'flip', 'flipBehavior', 'flipOnUpdate', 'offset', 'placement', 'popperOptions'];
+  var POPPER_INSTANCE_DEPENDENCIES = ["arrow", "boundary", "distance", "flip", "flipBehavior", "flipOnUpdate", "offset", "placement", "popperOptions"];
   var PASSIVE = {
     passive: true
   };
@@ -463,7 +462,7 @@
       document.body.classList.add(IOS_CLASS);
     }
     if (window.performance) {
-      document.addEventListener('mousemove', onDocumentMouseMove);
+      document.addEventListener("mousemove", onDocumentMouseMove);
     }
   }
   /**
@@ -476,7 +475,7 @@
     var now = performance.now();
     if (now - lastMouseMoveTime < 20) {
       currentInput.isTouch = false;
-      document.removeEventListener('mousemove', onDocumentMouseMove);
+      document.removeEventListener("mousemove", onDocumentMouseMove);
       if (!isIOS) {
         document.body.classList.remove(IOS_CLASS);
       }
@@ -503,10 +502,10 @@
    */
 
   function bindGlobalEventListeners() {
-    document.addEventListener('touchstart', onDocumentTouchStart, _extends$1({}, PASSIVE, {
+    document.addEventListener("touchstart", onDocumentTouchStart, _extends$1({}, PASSIVE, {
       capture: true
     }));
-    window.addEventListener('blur', onWindowBlur);
+    window.addEventListener("blur", onWindowBlur);
   }
   var keys = Object.keys(defaultProps);
   /**
@@ -515,11 +514,11 @@
 
   function getDataAttributeProps(reference) {
     var props = keys.reduce(function (acc, key) {
-      var valueAsString = (reference.getAttribute("data-tippy-" + key) || '').trim();
+      var valueAsString = (reference.getAttribute("data-tippy-" + key) || "").trim();
       if (!valueAsString) {
         return acc;
       }
-      if (key === 'content') {
+      if (key === "content") {
         acc[key] = valueAsString;
       } else {
         try {
@@ -599,14 +598,14 @@
    */
 
   function innerHTML() {
-    return 'innerHTML';
+    return "innerHTML";
   }
   /**
    * Evaluates a function if one, or returns the value
    */
 
   function invokeWithArgsOrReturn(value, args) {
-    return typeof value === 'function' ? value.apply(null, args) : value;
+    return typeof value === "function" ? value.apply(null, args) : value;
   }
   /**
    * Sets a popperInstance `flip` modifier's enabled state
@@ -614,15 +613,21 @@
 
   function setFlipModifierEnabled(modifiers, value) {
     modifiers.filter(function (m) {
-      return m.name === 'flip';
+      return m.name === "flip";
     })[0].enabled = value;
   }
+  function setEscapeWithReference(modifiers, value) {
+    modifiers.filter(function (m) {
+      return m.name === "preventOverflow";
+    })[0].escapeWithReference = value;
+  }
+
   /**
    * Returns a new `div` element
    */
 
   function div() {
-    return document.createElement('div');
+    return document.createElement("div");
   }
   /**
    * Applies a transition duration to a list of elements
@@ -642,7 +647,7 @@
   function setVisibilityState(els, state) {
     els.forEach(function (el) {
       if (el) {
-        el.setAttribute('data-state', state);
+        el.setAttribute("data-state", state);
       }
     });
   }
@@ -732,10 +737,10 @@
 
   function setContent(contentEl, props) {
     if (isRealElement(props.content)) {
-      setInnerHTML(contentEl, '');
+      setInnerHTML(contentEl, "");
       contentEl.appendChild(props.content);
-    } else if (typeof props.content !== 'function') {
-      var key = props.allowHTML ? 'innerHTML' : 'textContent';
+    } else if (typeof props.content !== "function") {
+      var key = props.allowHTML ? "innerHTML" : "textContent";
       contentEl[key] = props.content;
     }
   }
@@ -756,14 +761,14 @@
    */
 
   function addInertia(tooltip) {
-    tooltip.setAttribute('data-inertia', '');
+    tooltip.setAttribute("data-inertia", "");
   }
   /**
    * Removes `data-inertia` attribute
    */
 
   function removeInertia(tooltip) {
-    tooltip.removeAttribute('data-inertia');
+    tooltip.removeAttribute("data-inertia");
   }
   /**
    * Creates an arrow element and returns it
@@ -778,7 +783,7 @@
       if (isRealElement(arrow)) {
         arrowElement.appendChild(arrow);
       } else {
-        setInnerHTML(arrowElement, arrow === 'round' ? ROUND_ARROW_INNER_HTML : arrow);
+        setInnerHTML(arrowElement, arrow === "round" ? ROUND_ARROW_INNER_HTML : arrow);
       }
     }
     return arrowElement;
@@ -790,7 +795,7 @@
   function createBackdropElement(isVisible) {
     var backdrop = div();
     backdrop.className = BACKDROP_CLASS;
-    backdrop.setAttribute('data-state', isVisible ? 'visible' : 'hidden');
+    backdrop.setAttribute("data-state", isVisible ? "visible" : "hidden");
     return backdrop;
   }
   /**
@@ -798,29 +803,29 @@
    */
 
   function addInteractive(tooltip) {
-    tooltip.setAttribute('data-interactive', '');
+    tooltip.setAttribute("data-interactive", "");
   }
   /**
    * Removes interactive-related attributes
    */
 
   function removeInteractive(tooltip) {
-    tooltip.removeAttribute('data-interactive');
+    tooltip.removeAttribute("data-interactive");
   }
   /**
    * Add/remove transitionend listener from tooltip
    */
 
   function updateTransitionEndListener(tooltip, action, listener) {
-    var eventName = isUCBrowser && document.body.style.webkitTransition !== undefined ? 'webkitTransitionEnd' : 'transitionend';
-    tooltip[action + 'EventListener'](eventName, listener);
+    var eventName = isUCBrowser && document.body.style.webkitTransition !== undefined ? "webkitTransitionEnd" : "transitionend";
+    tooltip[action + "EventListener"](eventName, listener);
   }
   /**
    * Returns the popper's placement, ignoring shifting (top-start, etc)
    */
 
   function getBasePlacement(placement) {
-    return placement.split('-')[0];
+    return placement.split("-")[0];
   }
   /**
    * Triggers reflow
@@ -834,7 +839,7 @@
    */
 
   function updateTheme(tooltip, action, theme) {
-    theme.split(' ').forEach(function (name) {
+    theme.split(" ").forEach(function (name) {
       if (name) {
         tooltip.classList[action](name + "-theme");
       }
@@ -847,28 +852,28 @@
   function createPopperElement(id, props) {
     var popper = div();
     popper.className = POPPER_CLASS;
-    popper.style.position = 'absolute';
-    popper.style.top = '0';
-    popper.style.left = '0';
+    popper.style.position = "absolute";
+    popper.style.top = "0";
+    popper.style.left = "0";
     var tooltip = div();
     tooltip.className = TOOLTIP_CLASS;
     tooltip.id = "tippy-" + id;
-    tooltip.setAttribute('data-state', 'hidden');
-    tooltip.setAttribute('tabindex', '-1');
-    updateTheme(tooltip, 'add', props.theme);
+    tooltip.setAttribute("data-state", "hidden");
+    tooltip.setAttribute("tabindex", "-1");
+    updateTheme(tooltip, "add", props.theme);
     var content = div();
     content.className = CONTENT_CLASS;
-    content.setAttribute('data-state', 'hidden');
+    content.setAttribute("data-state", "hidden");
     if (props.interactive) {
       addInteractive(tooltip);
     }
     if (props.arrow) {
-      tooltip.setAttribute('data-arrow', '');
+      tooltip.setAttribute("data-arrow", "");
       tooltip.appendChild(createArrowElement(props.arrow));
     }
     if (props.animateFill) {
       tooltip.appendChild(createBackdropElement(false));
-      tooltip.setAttribute('data-animatefill', '');
+      tooltip.setAttribute("data-animatefill", "");
     }
     if (props.inertia) {
       addInertia(tooltip);
@@ -889,13 +894,13 @@
       content = _getChildren.content,
       backdrop = _getChildren.backdrop,
       arrow = _getChildren.arrow;
-    popper.style.zIndex = '' + nextProps.zIndex;
-    tooltip.setAttribute('data-animation', nextProps.animation);
-    tooltip.style.maxWidth = nextProps.maxWidth + (typeof nextProps.maxWidth === 'number' ? 'px' : '');
+    popper.style.zIndex = "" + nextProps.zIndex;
+    tooltip.setAttribute("data-animation", nextProps.animation);
+    tooltip.style.maxWidth = nextProps.maxWidth + (typeof nextProps.maxWidth === "number" ? "px" : "");
     if (nextProps.role) {
-      tooltip.setAttribute('role', nextProps.role);
+      tooltip.setAttribute("role", nextProps.role);
     } else {
-      tooltip.removeAttribute('role');
+      tooltip.removeAttribute("role");
     }
     if (prevProps.content !== nextProps.content) {
       setContent(content, nextProps);
@@ -903,20 +908,20 @@
 
     if (!prevProps.animateFill && nextProps.animateFill) {
       tooltip.appendChild(createBackdropElement(isVisible));
-      tooltip.setAttribute('data-animatefill', '');
+      tooltip.setAttribute("data-animatefill", "");
     } else if (prevProps.animateFill && !nextProps.animateFill) {
       tooltip.removeChild(backdrop);
-      tooltip.removeAttribute('data-animatefill');
+      tooltip.removeAttribute("data-animatefill");
     } // arrow
 
     if (!prevProps.arrow && nextProps.arrow) {
       // false to true
       tooltip.appendChild(createArrowElement(nextProps.arrow));
-      tooltip.setAttribute('data-arrow', '');
+      tooltip.setAttribute("data-arrow", "");
     } else if (prevProps.arrow && !nextProps.arrow) {
       // true to false
       tooltip.removeChild(arrow);
-      tooltip.removeAttribute('data-arrow');
+      tooltip.removeAttribute("data-arrow");
     } else if (prevProps.arrow !== nextProps.arrow) {
       // true to 'round' or vice-versa
       tooltip.removeChild(arrow);
@@ -936,8 +941,8 @@
     } // theme
 
     if (prevProps.theme !== nextProps.theme) {
-      updateTheme(tooltip, 'remove', prevProps.theme);
-      updateTheme(tooltip, 'add', nextProps.theme);
+      updateTheme(tooltip, "remove", prevProps.theme);
+      updateTheme(tooltip, "add", nextProps.theme);
     }
   }
   /**
@@ -953,10 +958,10 @@
       y = event.clientY;
     var interactiveBorder = props.interactiveBorder,
       distance = props.distance;
-    var exceedsTop = popperRect.top - y > (popperPlacement === 'top' ? interactiveBorder + distance : interactiveBorder);
-    var exceedsBottom = y - popperRect.bottom > (popperPlacement === 'bottom' ? interactiveBorder + distance : interactiveBorder);
-    var exceedsLeft = popperRect.left - x > (popperPlacement === 'left' ? interactiveBorder + distance : interactiveBorder);
-    var exceedsRight = x - popperRect.right > (popperPlacement === 'right' ? interactiveBorder + distance : interactiveBorder);
+    var exceedsTop = popperRect.top - y > (popperPlacement === "top" ? interactiveBorder + distance : interactiveBorder);
+    var exceedsBottom = y - popperRect.bottom > (popperPlacement === "bottom" ? interactiveBorder + distance : interactiveBorder);
+    var exceedsLeft = popperRect.left - x > (popperPlacement === "left" ? interactiveBorder + distance : interactiveBorder);
+    var exceedsRight = x - popperRect.right > (popperPlacement === "right" ? interactiveBorder + distance : interactiveBorder);
     return exceedsTop || exceedsBottom || exceedsLeft || exceedsRight;
   }
 
@@ -984,8 +989,8 @@
    * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    * SOFTWARE.
    */
-  var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined';
-  var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
+  var isBrowser$1 = typeof window !== "undefined" && typeof document !== "undefined";
+  var longerTimeoutBrowsers = ["Edge", "Trident", "Firefox"];
   var timeoutDuration = 0;
   for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
     if (isBrowser$1 && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
@@ -1040,7 +1045,7 @@
    */
   function isFunction$1(functionToCheck) {
     var getType = {};
-    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+    return functionToCheck && getType.toString.call(functionToCheck) === "[object Function]";
   }
 
   /**
@@ -1068,7 +1073,7 @@
    * @returns {Element} parent
    */
   function getParentNode(element) {
-    if (element.nodeName === 'HTML') {
+    if (element.nodeName === "HTML") {
       return element;
     }
     return element.parentNode || element.host;
@@ -1087,10 +1092,10 @@
       return document.body;
     }
     switch (element.nodeName) {
-      case 'HTML':
-      case 'BODY':
+      case "HTML":
+      case "BODY":
         return element.ownerDocument.body;
-      case '#document':
+      case "#document":
         return element.body;
     }
 
@@ -1145,23 +1150,23 @@
       offsetParent = (element = element.nextElementSibling).offsetParent;
     }
     var nodeName = offsetParent && offsetParent.nodeName;
-    if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
+    if (!nodeName || nodeName === "BODY" || nodeName === "HTML") {
       return element ? element.ownerDocument.documentElement : document.documentElement;
     }
 
     // .offsetParent will return the closest TH, TD or TABLE in case
     // no offsetParent is present, I hate this job...
-    if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
+    if (["TH", "TD", "TABLE"].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, "position") === "static") {
       return getOffsetParent(offsetParent);
     }
     return offsetParent;
   }
   function isOffsetContainer(element) {
     var nodeName = element.nodeName;
-    if (nodeName === 'BODY') {
+    if (nodeName === "BODY") {
       return false;
     }
-    return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
+    return nodeName === "HTML" || getOffsetParent(element.firstElementChild) === element;
   }
 
   /**
@@ -1230,10 +1235,10 @@
    * @returns {number} amount of scrolled pixels
    */
   function getScroll(element) {
-    var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
-    var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
+    var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "top";
+    var upperSide = side === "top" ? "scrollTop" : "scrollLeft";
     var nodeName = element.nodeName;
-    if (nodeName === 'BODY' || nodeName === 'HTML') {
+    if (nodeName === "BODY" || nodeName === "HTML") {
       var html = element.ownerDocument.documentElement;
       var scrollingElement = element.ownerDocument.scrollingElement || html;
       return scrollingElement[upperSide];
@@ -1252,8 +1257,8 @@
    */
   function includeScroll(rect, element) {
     var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var scrollTop = getScroll(element, 'top');
-    var scrollLeft = getScroll(element, 'left');
+    var scrollTop = getScroll(element, "top");
+    var scrollLeft = getScroll(element, "left");
     var modifier = subtract ? -1 : 1;
     rect.top += scrollTop * modifier;
     rect.bottom += scrollTop * modifier;
@@ -1273,20 +1278,20 @@
    */
 
   function getBordersSize(styles, axis) {
-    var sideA = axis === 'x' ? 'Left' : 'Top';
-    var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
-    return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10);
+    var sideA = axis === "x" ? "Left" : "Top";
+    var sideB = sideA === "Left" ? "Right" : "Bottom";
+    return parseFloat(styles["border" + sideA + "Width"], 10) + parseFloat(styles["border" + sideB + "Width"], 10);
   }
   function getSize(axis, body, html, computedStyle) {
-    return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE$1(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
+    return Math.max(body["offset" + axis], body["scroll" + axis], html["client" + axis], html["offset" + axis], html["scroll" + axis], isIE$1(10) ? parseInt(html["offset" + axis]) + parseInt(computedStyle["margin" + (axis === "Height" ? "Top" : "Left")]) + parseInt(computedStyle["margin" + (axis === "Height" ? "Bottom" : "Right")]) : 0);
   }
   function getWindowSizes(document) {
     var body = document.body;
     var html = document.documentElement;
     var computedStyle = isIE$1(10) && getComputedStyle(html);
     return {
-      height: getSize('Height', body, html, computedStyle),
-      width: getSize('Width', body, html, computedStyle)
+      height: getSize("Height", body, html, computedStyle),
+      width: getSize("Width", body, html, computedStyle)
     };
   }
   var classCallCheck = function classCallCheck(instance, Constructor) {
@@ -1365,8 +1370,8 @@
     try {
       if (isIE$1(10)) {
         rect = element.getBoundingClientRect();
-        var scrollTop = getScroll(element, 'top');
-        var scrollLeft = getScroll(element, 'left');
+        var scrollTop = getScroll(element, "top");
+        var scrollLeft = getScroll(element, "left");
         rect.top += scrollTop;
         rect.left += scrollLeft;
         rect.bottom += scrollTop;
@@ -1383,7 +1388,7 @@
     };
 
     // subtract scrollbar size from sizes
-    var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
+    var sizes = element.nodeName === "HTML" ? getWindowSizes(element.ownerDocument) : {};
     var width = sizes.width || element.clientWidth || result.right - result.left;
     var height = sizes.height || element.clientHeight || result.bottom - result.top;
     var horizScrollbar = element.offsetWidth - width;
@@ -1393,8 +1398,8 @@
     // we make this check conditional for performance reasons
     if (horizScrollbar || vertScrollbar) {
       var styles = getStyleComputedProperty(element);
-      horizScrollbar -= getBordersSize(styles, 'x');
-      vertScrollbar -= getBordersSize(styles, 'y');
+      horizScrollbar -= getBordersSize(styles, "x");
+      vertScrollbar -= getBordersSize(styles, "y");
       result.width -= horizScrollbar;
       result.height -= vertScrollbar;
     }
@@ -1403,7 +1408,7 @@
   function getOffsetRectRelativeToArbitraryNode(children, parent) {
     var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var isIE10 = isIE$1(10);
-    var isHTML = parent.nodeName === 'HTML';
+    var isHTML = parent.nodeName === "HTML";
     var childrenRect = getBoundingClientRect(children);
     var parentRect = getBoundingClientRect(parent);
     var scrollParent = getScrollParent(children);
@@ -1441,7 +1446,7 @@
       offsets.marginTop = marginTop;
       offsets.marginLeft = marginLeft;
     }
-    if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
+    if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== "BODY") {
       offsets = includeScroll(offsets, parent);
     }
     return offsets;
@@ -1453,7 +1458,7 @@
     var width = Math.max(html.clientWidth, window.innerWidth || 0);
     var height = Math.max(html.clientHeight, window.innerHeight || 0);
     var scrollTop = !excludeScroll ? getScroll(html) : 0;
-    var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
+    var scrollLeft = !excludeScroll ? getScroll(html, "left") : 0;
     var offset = {
       top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
       left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
@@ -1473,10 +1478,10 @@
    */
   function isFixed(element) {
     var nodeName = element.nodeName;
-    if (nodeName === 'BODY' || nodeName === 'HTML') {
+    if (nodeName === "BODY" || nodeName === "HTML") {
       return false;
     }
-    if (getStyleComputedProperty(element, 'position') === 'fixed') {
+    if (getStyleComputedProperty(element, "position") === "fixed") {
       return true;
     }
     var parentNode = getParentNode(element);
@@ -1500,7 +1505,7 @@
       return document.documentElement;
     }
     var el = element.parentElement;
-    while (el && getStyleComputedProperty(el, 'transform') === 'none') {
+    while (el && getStyleComputedProperty(el, "transform") === "none") {
       el = el.parentElement;
     }
     return el || document.documentElement;
@@ -1529,17 +1534,17 @@
     var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
 
     // Handle viewport case
-    if (boundariesElement === 'viewport') {
+    if (boundariesElement === "viewport") {
       boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
     } else {
       // Handle other cases based on DOM element used as boundaries
       var boundariesNode = void 0;
-      if (boundariesElement === 'scrollParent') {
+      if (boundariesElement === "scrollParent") {
         boundariesNode = getScrollParent(getParentNode(reference));
-        if (boundariesNode.nodeName === 'BODY') {
+        if (boundariesNode.nodeName === "BODY") {
           boundariesNode = popper.ownerDocument.documentElement;
         }
-      } else if (boundariesElement === 'window') {
+      } else if (boundariesElement === "window") {
         boundariesNode = popper.ownerDocument.documentElement;
       } else {
         boundariesNode = boundariesElement;
@@ -1547,7 +1552,7 @@
       var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
 
       // In case of HTML, we need a different computation
-      if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
+      if (boundariesNode.nodeName === "HTML" && !isFixed(offsetParent)) {
         var _getWindowSizes = getWindowSizes(popper.ownerDocument),
           height = _getWindowSizes.height,
           width = _getWindowSizes.width;
@@ -1563,7 +1568,7 @@
 
     // Add paddings
     padding = padding || 0;
-    var isPaddingNumber = typeof padding === 'number';
+    var isPaddingNumber = typeof padding === "number";
     boundaries.left += isPaddingNumber ? padding : padding.left || 0;
     boundaries.top += isPaddingNumber ? padding : padding.top || 0;
     boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
@@ -1587,7 +1592,7 @@
    */
   function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
     var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
-    if (placement.indexOf('auto') === -1) {
+    if (placement.indexOf("auto") === -1) {
       return placement;
     }
     var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
@@ -1624,8 +1629,8 @@
       return width >= popper.clientWidth && height >= popper.clientHeight;
     });
     var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
-    var variation = placement.split('-')[1];
-    return computedPlacement + (variation ? '-' + variation : '');
+    var variation = placement.split("-")[1];
+    return computedPlacement + (variation ? "-" + variation : "");
   }
 
   /**
@@ -1672,10 +1677,10 @@
    */
   function getOppositePlacement(placement) {
     var hash = {
-      left: 'right',
-      right: 'left',
-      bottom: 'top',
-      top: 'bottom'
+      left: "right",
+      right: "left",
+      bottom: "top",
+      top: "bottom"
     };
     return placement.replace(/left|right|bottom|top/g, function (matched) {
       return hash[matched];
@@ -1693,7 +1698,7 @@
    * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
    */
   function getPopperOffsets(popper, referenceOffsets, placement) {
-    placement = placement.split('-')[0];
+    placement = placement.split("-")[0];
 
     // Get popper node sizes
     var popperRect = getOuterSizes(popper);
@@ -1705,11 +1710,11 @@
     };
 
     // depending by the popper placement we have to compute its offsets slightly differently
-    var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
-    var mainSide = isHoriz ? 'top' : 'left';
-    var secondarySide = isHoriz ? 'left' : 'top';
-    var measurement = isHoriz ? 'height' : 'width';
-    var secondaryMeasurement = !isHoriz ? 'height' : 'width';
+    var isHoriz = ["right", "left"].indexOf(placement) !== -1;
+    var mainSide = isHoriz ? "top" : "left";
+    var secondarySide = isHoriz ? "left" : "top";
+    var measurement = isHoriz ? "height" : "width";
+    var secondaryMeasurement = !isHoriz ? "height" : "width";
     popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
     if (placement === secondarySide) {
       popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
@@ -1773,13 +1778,13 @@
    * @returns {dataObject}
    */
   function runModifiers(modifiers, data, ends) {
-    var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
+    var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, "name", ends));
     modifiersToRun.forEach(function (modifier) {
-      if (modifier['function']) {
+      if (modifier["function"]) {
         // eslint-disable-line dot-notation
-        console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
+        console.warn("`modifier.function` is deprecated, use `modifier.fn`!");
       }
-      var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
+      var fn = modifier["function"] || modifier.fn; // eslint-disable-line dot-notation
       if (modifier.enabled && isFunction$1(fn)) {
         // Add properties to offsets to make them a complete clientRect object
         // we do this before each modifier to make sure the previous one doesn't
@@ -1827,7 +1832,7 @@
 
     // compute the popper offsets
     data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
-    data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
+    data.offsets.popper.position = this.options.positionFixed ? "fixed" : "absolute";
 
     // run the modifiers
     data = runModifiers(this.modifiers, data);
@@ -1864,12 +1869,12 @@
    * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
    */
   function getSupportedPropertyName(property) {
-    var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
+    var prefixes = [false, "ms", "Webkit", "Moz", "O"];
     var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
     for (var i = 0; i < prefixes.length; i++) {
       var prefix = prefixes[i];
-      var toCheck = prefix ? '' + prefix + upperProp : property;
-      if (typeof document.body.style[toCheck] !== 'undefined') {
+      var toCheck = prefix ? "" + prefix + upperProp : property;
+      if (typeof document.body.style[toCheck] !== "undefined") {
         return toCheck;
       }
     }
@@ -1885,15 +1890,15 @@
     this.state.isDestroyed = true;
 
     // touch DOM only if `applyStyle` modifier is enabled
-    if (isModifierEnabled(this.modifiers, 'applyStyle')) {
-      this.popper.removeAttribute('x-placement');
-      this.popper.style.position = '';
-      this.popper.style.top = '';
-      this.popper.style.left = '';
-      this.popper.style.right = '';
-      this.popper.style.bottom = '';
-      this.popper.style.willChange = '';
-      this.popper.style[getSupportedPropertyName('transform')] = '';
+    if (isModifierEnabled(this.modifiers, "applyStyle")) {
+      this.popper.removeAttribute("x-placement");
+      this.popper.style.position = "";
+      this.popper.style.top = "";
+      this.popper.style.left = "";
+      this.popper.style.right = "";
+      this.popper.style.bottom = "";
+      this.popper.style.willChange = "";
+      this.popper.style[getSupportedPropertyName("transform")] = "";
     }
     this.disableEventListeners();
 
@@ -1915,7 +1920,7 @@
     return ownerDocument ? ownerDocument.defaultView : window;
   }
   function attachToScrollParents(scrollParent, event, callback, scrollParents) {
-    var isBody = scrollParent.nodeName === 'BODY';
+    var isBody = scrollParent.nodeName === "BODY";
     var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
     target.addEventListener(event, callback, {
       passive: true
@@ -1935,13 +1940,13 @@
   function setupEventListeners(reference, options, state, updateBound) {
     // Resize event listener on window
     state.updateBound = updateBound;
-    getWindow(reference).addEventListener('resize', state.updateBound, {
+    getWindow(reference).addEventListener("resize", state.updateBound, {
       passive: true
     });
 
     // Scroll event listener on scroll parents
     var scrollElement = getScrollParent(reference);
-    attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
+    attachToScrollParents(scrollElement, "scroll", state.updateBound, state.scrollParents);
     state.scrollElement = scrollElement;
     state.eventsEnabled = true;
     return state;
@@ -1967,11 +1972,11 @@
    */
   function removeEventListeners(reference, state) {
     // Remove resize event listener on window
-    getWindow(reference).removeEventListener('resize', state.updateBound);
+    getWindow(reference).removeEventListener("resize", state.updateBound);
 
     // Remove scroll event listener on scroll parents
     state.scrollParents.forEach(function (target) {
-      target.removeEventListener('scroll', state.updateBound);
+      target.removeEventListener("scroll", state.updateBound);
     });
 
     // Reset state
@@ -2004,7 +2009,7 @@
    * @return {Boolean}
    */
   function isNumeric(n) {
-    return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
+    return n !== "" && !isNaN(parseFloat(n)) && isFinite(n);
   }
 
   /**
@@ -2017,10 +2022,10 @@
    */
   function setStyles(element, styles) {
     Object.keys(styles).forEach(function (prop) {
-      var unit = '';
+      var unit = "";
       // add unit if the value is numeric and is one of the following
-      if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
-        unit = 'px';
+      if (["width", "height", "top", "right", "bottom", "left"].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
+        unit = "px";
       }
       element.style[prop] = styles[prop] + unit;
     });
@@ -2090,12 +2095,12 @@
     // modifiers will be able to edit `placement` if needed
     // and refer to originalPlacement to know the original value
     var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
-    popper.setAttribute('x-placement', placement);
+    popper.setAttribute("x-placement", placement);
 
     // Apply `position` to popper before anything else because
     // without the position applied we can't guarantee correct computations
     setStyles(popper, {
-      position: options.positionFixed ? 'fixed' : 'absolute'
+      position: options.positionFixed ? "fixed" : "absolute"
     });
     return options;
   }
@@ -2130,8 +2135,8 @@
     };
     var referenceWidth = round(reference.width);
     var popperWidth = round(popper.width);
-    var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
-    var isVariation = data.placement.indexOf('-') !== -1;
+    var isVertical = ["left", "right"].indexOf(data.placement) !== -1;
+    var isVariation = data.placement.indexOf("-") !== -1;
     var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
     var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
     var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
@@ -2160,10 +2165,10 @@
     // Remove this legacy support in Popper.js v2
 
     var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
-      return modifier.name === 'applyStyle';
+      return modifier.name === "applyStyle";
     }).gpuAcceleration;
     if (legacyGpuAccelerationOption !== undefined) {
-      console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
+      console.warn("WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!");
     }
     var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
     var offsetParent = getOffsetParent(data.instance.popper);
@@ -2174,13 +2179,13 @@
       position: popper.position
     };
     var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
-    var sideA = x === 'bottom' ? 'top' : 'bottom';
-    var sideB = y === 'right' ? 'left' : 'right';
+    var sideA = x === "bottom" ? "top" : "bottom";
+    var sideB = y === "right" ? "left" : "right";
 
     // if gpuAcceleration is set to `true` and transform is supported,
     //  we use `translate3d` to apply the position to the popper we
     // automatically use the supported prefixed version if needed
-    var prefixedProperty = getSupportedPropertyName('transform');
+    var prefixedProperty = getSupportedPropertyName("transform");
 
     // now, let's make a step back and look at this code closely (wtf?)
     // If the content of the popper grows once it's been positioned, it
@@ -2193,10 +2198,10 @@
     // its bottom.
     var left = void 0,
       top = void 0;
-    if (sideA === 'bottom') {
+    if (sideA === "bottom") {
       // when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
       // and not the bottom of the html element
-      if (offsetParent.nodeName === 'HTML') {
+      if (offsetParent.nodeName === "HTML") {
         top = -offsetParent.clientHeight + offsets.bottom;
       } else {
         top = -offsetParentRect.height + offsets.bottom;
@@ -2204,8 +2209,8 @@
     } else {
       top = offsets.top;
     }
-    if (sideB === 'right') {
-      if (offsetParent.nodeName === 'HTML') {
+    if (sideB === "right") {
+      if (offsetParent.nodeName === "HTML") {
         left = -offsetParent.clientWidth + offsets.right;
       } else {
         left = -offsetParentRect.width + offsets.right;
@@ -2214,22 +2219,22 @@
       left = offsets.left;
     }
     if (gpuAcceleration && prefixedProperty) {
-      styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
+      styles[prefixedProperty] = "translate3d(" + left + "px, " + top + "px, 0)";
       styles[sideA] = 0;
       styles[sideB] = 0;
-      styles.willChange = 'transform';
+      styles.willChange = "transform";
     } else {
       // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
-      var invertTop = sideA === 'bottom' ? -1 : 1;
-      var invertLeft = sideB === 'right' ? -1 : 1;
+      var invertTop = sideA === "bottom" ? -1 : 1;
+      var invertLeft = sideB === "right" ? -1 : 1;
       styles[sideA] = top * invertTop;
       styles[sideB] = left * invertLeft;
-      styles.willChange = sideA + ', ' + sideB;
+      styles.willChange = sideA + ", " + sideB;
     }
 
     // Attributes
     var attributes = {
-      'x-placement': data.placement
+      "x-placement": data.placement
     };
 
     // Update `data` attributes, styles and arrowStyles
@@ -2258,9 +2263,9 @@
       return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
     });
     if (!isRequired) {
-      var _requesting = '`' + requestingName + '`';
-      var requested = '`' + requestedName + '`';
-      console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
+      var _requesting = "`" + requestingName + "`";
+      var requested = "`" + requestedName + "`";
+      console.warn(requested + " modifier is required by " + _requesting + " modifier in order to work, be sure to include it before " + _requesting + "!");
     }
     return isRequired;
   }
@@ -2276,13 +2281,13 @@
     var _data$offsets$arrow;
 
     // arrow depends on keepTogether in order to work
-    if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
+    if (!isModifierRequired(data.instance.modifiers, "arrow", "keepTogether")) {
       return data;
     }
     var arrowElement = options.element;
 
     // if arrowElement is a string, suppose it's a CSS selector
-    if (typeof arrowElement === 'string') {
+    if (typeof arrowElement === "string") {
       arrowElement = data.instance.popper.querySelector(arrowElement);
 
       // if arrowElement is not found, don't run the modifier
@@ -2293,20 +2298,20 @@
       // if the arrowElement isn't a query selector we must check that the
       // provided DOM node is child of its popper node
       if (!data.instance.popper.contains(arrowElement)) {
-        console.warn('WARNING: `arrow.element` must be child of its popper element!');
+        console.warn("WARNING: `arrow.element` must be child of its popper element!");
         return data;
       }
     }
-    var placement = data.placement.split('-')[0];
+    var placement = data.placement.split("-")[0];
     var _data$offsets = data.offsets,
       popper = _data$offsets.popper,
       reference = _data$offsets.reference;
-    var isVertical = ['left', 'right'].indexOf(placement) !== -1;
-    var len = isVertical ? 'height' : 'width';
-    var sideCapitalized = isVertical ? 'Top' : 'Left';
+    var isVertical = ["left", "right"].indexOf(placement) !== -1;
+    var len = isVertical ? "height" : "width";
+    var sideCapitalized = isVertical ? "Top" : "Left";
     var side = sideCapitalized.toLowerCase();
-    var altSide = isVertical ? 'left' : 'top';
-    var opSide = isVertical ? 'bottom' : 'right';
+    var altSide = isVertical ? "left" : "top";
+    var opSide = isVertical ? "bottom" : "right";
     var arrowElementSize = getOuterSizes(arrowElement)[len];
 
     //
@@ -2330,14 +2335,14 @@
     // Compute the sideValue using the updated popper offsets
     // take popper margin in account because we don't have this info available
     var css = getStyleComputedProperty(data.instance.popper);
-    var popperMarginSide = parseFloat(css['margin' + sideCapitalized], 10);
-    var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width'], 10);
+    var popperMarginSide = parseFloat(css["margin" + sideCapitalized], 10);
+    var popperBorderSide = parseFloat(css["border" + sideCapitalized + "Width"], 10);
     var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
 
     // prevent arrowElement from being placed not contiguously to its popper
     sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
     data.arrowElement = arrowElement;
-    data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
+    data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ""), _data$offsets$arrow);
     return data;
   }
 
@@ -2349,10 +2354,10 @@
    * @returns {String} flipped placement variation
    */
   function getOppositeVariation(variation) {
-    if (variation === 'end') {
-      return 'start';
-    } else if (variation === 'start') {
-      return 'end';
+    if (variation === "end") {
+      return "start";
+    } else if (variation === "start") {
+      return "end";
     }
     return variation;
   }
@@ -2388,7 +2393,7 @@
    * @method placements
    * @memberof Popper
    */
-  var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
+  var placements = ["auto-start", "auto", "auto-end", "top-start", "top", "top-end", "right-start", "right", "right-end", "bottom-end", "bottom", "bottom-start", "left-end", "left", "left-start"];
 
   // Get rid of `auto` `auto-start` and `auto-end`
   var validPlacements = placements.slice(3);
@@ -2410,9 +2415,9 @@
     return counter ? arr.reverse() : arr;
   }
   var BEHAVIORS = {
-    FLIP: 'flip',
-    CLOCKWISE: 'clockwise',
-    COUNTERCLOCKWISE: 'counterclockwise'
+    FLIP: "flip",
+    CLOCKWISE: "clockwise",
+    COUNTERCLOCKWISE: "counterclockwise"
   };
 
   /**
@@ -2424,7 +2429,7 @@
    */
   function flip(data, options) {
     // if `inner` modifier is enabled, we can't use the `flip` modifier
-    if (isModifierEnabled(data.instance.modifiers, 'inner')) {
+    if (isModifierEnabled(data.instance.modifiers, "inner")) {
       return data;
     }
     if (data.flipped && data.placement === data.originalPlacement) {
@@ -2432,9 +2437,9 @@
       return data;
     }
     var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
-    var placement = data.placement.split('-')[0];
+    var placement = data.placement.split("-")[0];
     var placementOpposite = getOppositePlacement(placement);
-    var variation = data.placement.split('-')[1] || '';
+    var variation = data.placement.split("-")[1] || "";
     var flipOrder = [];
     switch (options.behavior) {
       case BEHAVIORS.FLIP:
@@ -2453,28 +2458,28 @@
       if (placement !== step || flipOrder.length === index + 1) {
         return data;
       }
-      placement = data.placement.split('-')[0];
+      placement = data.placement.split("-")[0];
       placementOpposite = getOppositePlacement(placement);
       var popperOffsets = data.offsets.popper;
       var refOffsets = data.offsets.reference;
 
       // using floor because the reference offsets may contain decimals we are not going to consider here
       var floor = Math.floor;
-      var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
+      var overlapsRef = placement === "left" && floor(popperOffsets.right) > floor(refOffsets.left) || placement === "right" && floor(popperOffsets.left) < floor(refOffsets.right) || placement === "top" && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === "bottom" && floor(popperOffsets.top) < floor(refOffsets.bottom);
       var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
       var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
       var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
       var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
-      var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
+      var overflowsBoundaries = placement === "left" && overflowsLeft || placement === "right" && overflowsRight || placement === "top" && overflowsTop || placement === "bottom" && overflowsBottom;
 
       // flip the variation if required
-      var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
+      var isVertical = ["top", "bottom"].indexOf(placement) !== -1;
 
       // flips variation if reference element overflows boundaries
-      var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
+      var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === "start" && overflowsLeft || isVertical && variation === "end" && overflowsRight || !isVertical && variation === "start" && overflowsTop || !isVertical && variation === "end" && overflowsBottom);
 
       // flips variation if popper content overflows boundaries
-      var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
+      var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === "start" && overflowsRight || isVertical && variation === "end" && overflowsLeft || !isVertical && variation === "start" && overflowsBottom || !isVertical && variation === "end" && overflowsTop);
       var flippedVariation = flippedVariationByRef || flippedVariationByContent;
       if (overlapsRef || overflowsBoundaries || flippedVariation) {
         // this boolean to detect any flip loop
@@ -2485,12 +2490,12 @@
         if (flippedVariation) {
           variation = getOppositeVariation(variation);
         }
-        data.placement = placement + (variation ? '-' + variation : '');
+        data.placement = placement + (variation ? "-" + variation : "");
 
         // this object contains `position`, we want to preserve it along with
         // any additional property we may add in the future
         data.offsets.popper = _extends$2({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
-        data = runModifiers(data.instance.modifiers, data, 'flip');
+        data = runModifiers(data.instance.modifiers, data, "flip");
       }
     });
     return data;
@@ -2507,12 +2512,12 @@
     var _data$offsets = data.offsets,
       popper = _data$offsets.popper,
       reference = _data$offsets.reference;
-    var placement = data.placement.split('-')[0];
+    var placement = data.placement.split("-")[0];
     var floor = Math.floor;
-    var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
-    var side = isVertical ? 'right' : 'bottom';
-    var opSide = isVertical ? 'left' : 'top';
-    var measurement = isVertical ? 'width' : 'height';
+    var isVertical = ["top", "bottom"].indexOf(placement) !== -1;
+    var side = isVertical ? "right" : "bottom";
+    var opSide = isVertical ? "left" : "top";
+    var measurement = isVertical ? "width" : "height";
     if (popper[side] < floor(reference[opSide])) {
       data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
     }
@@ -2544,23 +2549,23 @@
     if (!value) {
       return str;
     }
-    if (unit.indexOf('%') === 0) {
+    if (unit.indexOf("%") === 0) {
       var element = void 0;
       switch (unit) {
-        case '%p':
+        case "%p":
           element = popperOffsets;
           break;
-        case '%':
-        case '%r':
+        case "%":
+        case "%r":
         default:
           element = referenceOffsets;
       }
       var rect = getClientRect(element);
       return rect[measurement] / 100 * value;
-    } else if (unit === 'vh' || unit === 'vw') {
+    } else if (unit === "vh" || unit === "vw") {
       // if is a vh or vw, we calculate the size based on the viewport
       var size = void 0;
-      if (unit === 'vh') {
+      if (unit === "vh") {
         size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
       } else {
         size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
@@ -2590,7 +2595,7 @@
     // Use height if placement is left or right and index is 0 otherwise use width
     // in this way the first offset will use an axis and the second one
     // will use the other one
-    var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
+    var useHeight = ["right", "left"].indexOf(basePlacement) !== -1;
 
     // Split the offset string to obtain a list of values and operands
     // The regex addresses values with the plus or minus sign in front (+10, -20, etc)
@@ -2603,8 +2608,8 @@
     var divider = fragments.indexOf(find(fragments, function (frag) {
       return frag.search(/,|\s/) !== -1;
     }));
-    if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
-      console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
+    if (fragments[divider] && fragments[divider].indexOf(",") === -1) {
+      console.warn("Offsets separated by white space(s) are deprecated, use a comma (,) instead.");
     }
 
     // If divider is found, we divide the list of values and operands to divide
@@ -2615,13 +2620,13 @@
     // Convert the values with units to absolute pixels to allow our computations
     ops = ops.map(function (op, index) {
       // Most of the units rely on the orientation of the popper
-      var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
+      var measurement = (index === 1 ? !useHeight : useHeight) ? "height" : "width";
       var mergeWithPrevious = false;
       return op
       // This aggregates any `+` or `-` sign that aren't considered operators
       // e.g.: 10 + +5 => [10, +, +5]
       .reduce(function (a, b) {
-        if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
+        if (a[a.length - 1] === "" && ["+", "-"].indexOf(b) !== -1) {
           a[a.length - 1] = b;
           mergeWithPrevious = true;
           return a;
@@ -2643,7 +2648,7 @@
     ops.forEach(function (op, index) {
       op.forEach(function (frag, index2) {
         if (isNumeric(frag)) {
-          offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
+          offsets[index] += frag * (op[index2 - 1] === "-" ? -1 : 1);
         }
       });
     });
@@ -2665,23 +2670,23 @@
       _data$offsets = data.offsets,
       popper = _data$offsets.popper,
       reference = _data$offsets.reference;
-    var basePlacement = placement.split('-')[0];
+    var basePlacement = placement.split("-")[0];
     var offsets = void 0;
     if (isNumeric(+offset)) {
       offsets = [+offset, 0];
     } else {
       offsets = parseOffset(offset, popper, reference, basePlacement);
     }
-    if (basePlacement === 'left') {
+    if (basePlacement === "left") {
       popper.top += offsets[0];
       popper.left -= offsets[1];
-    } else if (basePlacement === 'right') {
+    } else if (basePlacement === "right") {
       popper.top += offsets[0];
       popper.left += offsets[1];
-    } else if (basePlacement === 'top') {
+    } else if (basePlacement === "top") {
       popper.left += offsets[0];
       popper.top -= offsets[1];
-    } else if (basePlacement === 'bottom') {
+    } else if (basePlacement === "bottom") {
       popper.left += offsets[0];
       popper.top += offsets[1];
     }
@@ -2709,14 +2714,14 @@
     // NOTE: DOM access here
     // resets the popper's position so that the document size can be calculated excluding
     // the size of the popper element itself
-    var transformProp = getSupportedPropertyName('transform');
+    var transformProp = getSupportedPropertyName("transform");
     var popperStyles = data.instance.popper.style; // assignment to help minification
     var top = popperStyles.top,
       left = popperStyles.left,
       transform = popperStyles[transformProp];
-    popperStyles.top = '';
-    popperStyles.left = '';
-    popperStyles[transformProp] = '';
+    popperStyles.top = "";
+    popperStyles.left = "";
+    popperStyles[transformProp] = "";
     var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);
 
     // NOTE: DOM access here
@@ -2736,16 +2741,16 @@
         return defineProperty({}, placement, value);
       },
       secondary: function secondary(placement) {
-        var mainSide = placement === 'right' ? 'left' : 'top';
+        var mainSide = placement === "right" ? "left" : "top";
         var value = popper[mainSide];
         if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
-          value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
+          value = Math.min(popper[mainSide], boundaries[placement] - (placement === "right" ? popper.width : popper.height));
         }
         return defineProperty({}, mainSide, value);
       }
     };
     order.forEach(function (placement) {
-      var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
+      var side = ["left", "top"].indexOf(placement) !== -1 ? "primary" : "secondary";
       popper = _extends$2({}, popper, check[side](placement));
     });
     data.offsets.popper = popper;
@@ -2761,17 +2766,17 @@
    */
   function shift(data) {
     var placement = data.placement;
-    var basePlacement = placement.split('-')[0];
-    var shiftvariation = placement.split('-')[1];
+    var basePlacement = placement.split("-")[0];
+    var shiftvariation = placement.split("-")[1];
 
     // if shift shiftvariation is specified, run the modifier
     if (shiftvariation) {
       var _data$offsets = data.offsets,
         reference = _data$offsets.reference,
         popper = _data$offsets.popper;
-      var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
-      var side = isVertical ? 'left' : 'top';
-      var measurement = isVertical ? 'width' : 'height';
+      var isVertical = ["bottom", "top"].indexOf(basePlacement) !== -1;
+      var side = isVertical ? "left" : "top";
+      var measurement = isVertical ? "width" : "height";
       var shiftOffsets = {
         start: defineProperty({}, side, reference[side]),
         end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
@@ -2789,12 +2794,12 @@
    * @returns {Object} The data object, properly modified
    */
   function hide(data) {
-    if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
+    if (!isModifierRequired(data.instance.modifiers, "hide", "preventOverflow")) {
       return data;
     }
     var refRect = data.offsets.reference;
     var bound = find(data.instance.modifiers, function (modifier) {
-      return modifier.name === 'preventOverflow';
+      return modifier.name === "preventOverflow";
     }).boundaries;
     if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
       // Avoid unnecessary DOM access if visibility hasn't changed
@@ -2802,14 +2807,14 @@
         return data;
       }
       data.hide = true;
-      data.attributes['x-out-of-boundaries'] = '';
+      data.attributes["x-out-of-boundaries"] = "";
     } else {
       // Avoid unnecessary DOM access if visibility hasn't changed
       if (data.hide === false) {
         return data;
       }
       data.hide = false;
-      data.attributes['x-out-of-boundaries'] = false;
+      data.attributes["x-out-of-boundaries"] = false;
     }
     return data;
   }
@@ -2823,13 +2828,13 @@
    */
   function inner(data) {
     var placement = data.placement;
-    var basePlacement = placement.split('-')[0];
+    var basePlacement = placement.split("-")[0];
     var _data$offsets = data.offsets,
       popper = _data$offsets.popper,
       reference = _data$offsets.reference;
-    var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
-    var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
-    popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
+    var isHoriz = ["left", "right"].indexOf(basePlacement) !== -1;
+    var subtractLength = ["top", "left"].indexOf(basePlacement) === -1;
+    popper[isHoriz ? "left" : "top"] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? "width" : "height"] : 0);
     data.placement = getOppositePlacement(placement);
     data.offsets.popper = getClientRect(popper);
     return data;
@@ -2952,7 +2957,7 @@
        * Popper will try to prevent overflow following these priorities by default,
        * then, it could overflow on the left and on top of the `boundariesElement`
        */
-      priority: ['left', 'right', 'top', 'bottom'],
+      priority: ["left", "right", "top", "bottom"],
       /**
        * @prop {number} padding=5
        * Amount of pixel used to define a minimum distance between the boundaries
@@ -2965,7 +2970,7 @@
        * Boundaries used by the modifier. Can be `scrollParent`, `window`,
        * `viewport` or any DOM element.
        */
-      boundariesElement: 'scrollParent'
+      boundariesElement: "scrollParent"
     },
     /**
      * Modifier used to make sure the reference and its popper stay near each other
@@ -3002,7 +3007,7 @@
       /** @prop {ModifierFn} */
       fn: arrow,
       /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
-      element: '[x-arrow]'
+      element: "[x-arrow]"
     },
     /**
      * Modifier used to flip the popper's placement when it starts to overlap its
@@ -3028,7 +3033,7 @@
        * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
        * placements (with optional variations)
        */
-      behavior: 'flip',
+      behavior: "flip",
       /**
        * @prop {number} padding=5
        * The popper will flip if it hits the edges of the `boundariesElement`
@@ -3040,7 +3045,7 @@
        * The popper will never be placed outside of the defined boundaries
        * (except if `keepTogether` is enabled)
        */
-      boundariesElement: 'viewport',
+      boundariesElement: "viewport",
       /**
        * @prop {Boolean} flipVariations=false
        * The popper will switch placement variation between `-start` and `-end` when
@@ -3124,13 +3129,13 @@
        * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
        * Change this if your popper should grow in a direction different from `bottom`
        */
-      x: 'bottom',
+      x: "bottom",
       /**
        * @prop {string} [x='left']
        * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
        * Change this if your popper should grow in a direction different from `right`
        */
-      y: 'right'
+      y: "right"
     },
     /**
      * Applies the computed styles to the popper element.
@@ -3206,7 +3211,7 @@
      * Popper's placement.
      * @prop {Popper.placements} placement='bottom'
      */
-    placement: 'bottom',
+    placement: "bottom",
     /**
      * Set this to true if you want popper to position it self in 'fixed' mode
      * @prop {Boolean} positionFixed=false
@@ -3334,22 +3339,22 @@
     // class prototype and break stuff like Sinon stubs
 
     createClass(Popper, [{
-      key: 'update',
+      key: "update",
       value: function update$$1() {
         return update.call(this);
       }
     }, {
-      key: 'destroy',
+      key: "destroy",
       value: function destroy$$1() {
         return destroy.call(this);
       }
     }, {
-      key: 'enableEventListeners',
+      key: "enableEventListeners",
       value: function enableEventListeners$$1() {
         return enableEventListeners.call(this);
       }
     }, {
-      key: 'disableEventListeners',
+      key: "disableEventListeners",
       value: function disableEventListeners$$1() {
         return disableEventListeners.call(this);
       }
@@ -3401,7 +3406,7 @@
    * An ES6 getter that will return the height of the virtual reference element.
    */
 
-  Popper.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
+  Popper.Utils = (typeof window !== "undefined" ? window : global).PopperUtils;
   Popper.placements = placements;
   Popper.Defaults = Defaults;
 
@@ -3498,14 +3503,14 @@
     } // Prevent a tippy with a delay from hiding if the cursor left then returned
     // before it started hiding
 
-    popper.addEventListener('mouseenter', function () {
-      if (instance.props.interactive && instance.state.isVisible && lastTriggerEventType === 'mouseenter') {
+    popper.addEventListener("mouseenter", function () {
+      if (instance.props.interactive && instance.state.isVisible && lastTriggerEventType === "mouseenter") {
         instance.clearDelayTimeouts();
       }
     });
-    popper.addEventListener('mouseleave', function () {
-      if (instance.props.interactive && lastTriggerEventType === 'mouseenter') {
-        document.addEventListener('mousemove', debouncedOnMouseMove);
+    popper.addEventListener("mouseleave", function () {
+      if (instance.props.interactive && lastTriggerEventType === "mouseenter") {
+        document.addEventListener("mousemove", debouncedOnMouseMove);
       }
     });
     props.onCreate(instance);
@@ -3513,17 +3518,17 @@
     /* ======================= 🔒 Private methods 🔒 ======================= */
 
     function getIsVerticalPlacement() {
-      return includes(['top', 'bottom'], getBasePlacement(instance.state.currentPlacement));
+      return includes(["top", "bottom"], getBasePlacement(instance.state.currentPlacement));
     }
     function getIsOppositePlacement() {
-      return includes(['bottom', 'right'], getBasePlacement(instance.state.currentPlacement));
+      return includes(["bottom", "right"], getBasePlacement(instance.state.currentPlacement));
     }
     function getNormalizedTouchSettings() {
       var touch = instance.props.touch;
       return Array.isArray(touch) ? touch : [touch, 0];
     }
     function getIsCustomTouchBehavior() {
-      return getNormalizedTouchSettings()[0] === 'hold';
+      return getNormalizedTouchSettings()[0] === "hold";
     }
     function getTransitionableElements() {
       return [tooltip, content, instance.popperChildren.backdrop];
@@ -3532,8 +3537,8 @@
       return instance.props.triggerTarget || reference;
     }
     function cleanupInteractiveMouseListeners() {
-      document.body.removeEventListener('mouseleave', scheduleHide);
-      document.removeEventListener('mousemove', debouncedOnMouseMove);
+      document.body.removeEventListener("mouseleave", scheduleHide);
+      document.removeEventListener("mousemove", debouncedOnMouseMove);
       mouseMoveListeners = mouseMoveListeners.filter(function (listener) {
         return listener !== debouncedOnMouseMove;
       });
@@ -3548,7 +3553,7 @@
         if (currentInput.isTouch) {
           return;
         }
-        if (instance.state.isVisible && includes(instance.props.trigger, 'click')) {
+        if (instance.state.isVisible && includes(instance.props.trigger, "click")) {
           return;
         }
       }
@@ -3570,10 +3575,10 @@
       }
     }
     function addDocumentMouseDownListener() {
-      document.addEventListener('mousedown', onDocumentMouseDown, true);
+      document.addEventListener("mousedown", onDocumentMouseDown, true);
     }
     function removeDocumentMouseDownListener() {
-      document.removeEventListener('mousedown', onDocumentMouseDown, true);
+      document.removeEventListener("mousedown", onDocumentMouseDown, true);
     }
     function makeSticky() {
       setTransitionDuration([popper], isIE ? 0 : instance.props.updateDuration);
@@ -3603,7 +3608,7 @@
        */
       function listener(event) {
         if (event.target === tooltip) {
-          updateTransitionEndListener(tooltip, 'remove', listener);
+          updateTransitionEndListener(tooltip, "remove", listener);
           callback();
         }
       } // Make callback synchronous if duration is 0
@@ -3612,8 +3617,8 @@
       if (duration === 0) {
         return callback();
       }
-      updateTransitionEndListener(tooltip, 'remove', currentTransitionEndListener);
-      updateTransitionEndListener(tooltip, 'add', listener);
+      updateTransitionEndListener(tooltip, "remove", currentTransitionEndListener);
+      updateTransitionEndListener(tooltip, "add", listener);
       currentTransitionEndListener = listener;
     }
     function on(eventType, handler, options) {
@@ -3629,28 +3634,28 @@
     }
     function addTriggersToEventListenersTarget() {
       if (getIsCustomTouchBehavior()) {
-        on('touchstart', onTrigger, PASSIVE);
-        on('touchend', onMouseLeave, PASSIVE);
+        on("touchstart", onTrigger, PASSIVE);
+        on("touchend", onMouseLeave, PASSIVE);
       } // `click` for keyboard. Mouse uses `mousedown` (onDocumentMouseDown)
 
-      if (!includes(instance.props.trigger, 'click')) {
-        on('click', function () {
+      if (!includes(instance.props.trigger, "click")) {
+        on("click", function () {
           if (!currentInput.isTouch && instance.props.hideOnClick === true) {
             instance.hide();
           }
         });
       }
-      instance.props.trigger.trim().split(' ').forEach(function (eventType) {
-        if (eventType === 'manual') {
+      instance.props.trigger.trim().split(" ").forEach(function (eventType) {
+        if (eventType === "manual") {
           return;
         }
         on(eventType, onTrigger);
         switch (eventType) {
-          case 'mouseenter':
-            on('mouseleave', onMouseLeave);
+          case "mouseenter":
+            on("mouseleave", onMouseLeave);
             break;
-          case 'focus':
-            on(isIE ? 'focusout' : 'blur', onBlur);
+          case "focus":
+            on(isIE ? "focusout" : "blur", onBlur);
             break;
         }
       });
@@ -3681,13 +3686,13 @@
         }
       } // Toggle show/hide when clicking click-triggered tooltips
 
-      if (event.type === 'click' && instance.props.hideOnClick !== false && instance.state.isVisible) {
+      if (event.type === "click" && instance.props.hideOnClick !== false && instance.state.isVisible) {
         scheduleHide(event);
       } else {
         var _getNormalizedTouchSe = getNormalizedTouchSettings(),
           value = _getNormalizedTouchSe[0],
           duration = _getNormalizedTouchSe[1];
-        if (currentInput.isTouch && value === 'hold' && duration) {
+        if (currentInput.isTouch && value === "hold" && duration) {
           // We can hijack the show timeout here, it will be cleared by
           // `scheduleHide()` when necessary
           showTimeout = setTimeout(function () {
@@ -3715,8 +3720,8 @@
         return;
       }
       if (instance.props.interactive) {
-        document.body.addEventListener('mouseleave', scheduleHide);
-        document.addEventListener('mousemove', debouncedOnMouseMove);
+        document.body.addEventListener("mouseleave", scheduleHide);
+        document.addEventListener("mousemove", debouncedOnMouseMove);
         mouseMoveListeners.push(debouncedOnMouseMove);
         return;
       }
@@ -3733,8 +3738,8 @@
       scheduleHide(event);
     }
     function isEventListenerStopped(event) {
-      var supportsTouch = ('ontouchstart' in window);
-      var isTouchEvent = includes(event.type, 'touch');
+      var supportsTouch = ("ontouchstart" in window);
+      var isTouchEvent = includes(event.type, "touch");
       var isCustomTouch = getIsCustomTouchBehavior();
       return supportsTouch && currentInput.isTouch && isCustomTouch && !isTouchEvent || currentInput.isTouch && !isCustomTouch && isTouchEvent;
     }
@@ -3743,11 +3748,11 @@
         popperOptions = _instance$props.popperOptions,
         placement = _instance$props.placement;
       var arrow = instance.popperChildren.arrow;
-      var preventOverflowModifier = getModifier(popperOptions, 'preventOverflow'); // Due to the virtual offsets normalization when using `followCursor`, we
+      var preventOverflowModifier = getModifier(popperOptions, "preventOverflow"); // Due to the virtual offsets normalization when using `followCursor`, we
       // need to use the opposite placement
 
-      var shift = instance.state.currentPlacement.split('-')[1];
-      normalizedPlacement = instance.props.followCursor && shift ? placement.replace(shift, shift === 'start' ? 'end' : 'start') : placement;
+      var shift = instance.state.currentPlacement.split("-")[1];
+      normalizedPlacement = instance.props.followCursor && shift ? placement.replace(shift, shift === "start" ? "end" : "start") : placement;
       function applyMutations(data) {
         instance.state.currentPlacement = data.placement;
         if (instance.props.flip && !instance.props.flipOnUpdate) {
@@ -3756,20 +3761,23 @@
           }
           setFlipModifierEnabled(instance.popperInstance.modifiers, false);
         }
-        tooltip.setAttribute('data-placement', instance.state.currentPlacement);
-        if (data.attributes['x-out-of-boundaries'] !== false) {
-          tooltip.setAttribute('data-out-of-boundaries', '');
+        if (instance.props.escapeWithReference) {
+          setEscapeWithReference(instance.popperInstance.modifiers, true);
+        }
+        tooltip.setAttribute("data-placement", instance.state.currentPlacement);
+        if (data.attributes["x-out-of-boundaries"] !== false) {
+          tooltip.setAttribute("data-out-of-boundaries", "");
         } else {
-          tooltip.removeAttribute('data-out-of-boundaries');
+          tooltip.removeAttribute("data-out-of-boundaries");
         } // Apply the `distance` prop
 
         var basePlacement = getBasePlacement(instance.state.currentPlacement);
         var tooltipStyles = tooltip.style;
-        tooltipStyles.top = '0';
-        tooltipStyles.left = '0';
-        tooltipStyles[getIsVerticalPlacement() ? 'top' : 'left'] = (getIsOppositePlacement() ? 1 : -1) * instance.props.distance + "px";
+        tooltipStyles.top = "0";
+        tooltipStyles.left = "0";
+        tooltipStyles[getIsVerticalPlacement() ? "top" : "left"] = (getIsOppositePlacement() ? 1 : -1) * instance.props.distance + "px";
         var padding = preventOverflowModifier && preventOverflowModifier.padding !== undefined ? preventOverflowModifier.padding : PREVENT_OVERFLOW_PADDING;
-        var isPaddingNumber = typeof padding === 'number';
+        var isPaddingNumber = typeof padding === "number";
         var computedPadding = _extends$1({
           top: isPaddingNumber ? padding : padding.top,
           bottom: isPaddingNumber ? padding : padding.bottom,
@@ -3778,7 +3786,7 @@
         }, !isPaddingNumber && padding);
         computedPadding[basePlacement] = isPaddingNumber ? padding + instance.props.distance : (padding[basePlacement] || 0) + instance.props.distance;
         instance.popperInstance.modifiers.filter(function (m) {
-          return m.name === 'preventOverflow';
+          return m.name === "preventOverflow";
         })[0].padding = computedPadding;
       }
       var config = _extends$1({
@@ -3793,17 +3801,17 @@
           arrow: _extends$1({
             element: arrow,
             enabled: !!arrow
-          }, getModifier(popperOptions, 'arrow')),
+          }, getModifier(popperOptions, "arrow")),
           flip: _extends$1({
             enabled: instance.props.flip,
             // The tooltip is offset by 10px from the popper in CSS,
             // we need to account for its distance
             padding: instance.props.distance + PREVENT_OVERFLOW_PADDING,
             behavior: instance.props.flipBehavior
-          }, getModifier(popperOptions, 'flip')),
+          }, getModifier(popperOptions, "flip")),
           offset: _extends$1({
             offset: instance.props.offset
-          }, getModifier(popperOptions, 'offset'))
+          }, getModifier(popperOptions, "offset"))
         }),
         onCreate: function onCreate(data) {
           applyMutations(data);
@@ -3830,7 +3838,7 @@
       // popperInstance update/create
       hasMountCallbackRun = false;
       var appendTo = instance.props.appendTo;
-      var parentNode = appendTo === 'parent' ? reference.parentNode : invokeWithArgsOrReturn(appendTo, [reference]); // The popper element needs to exist on the DOM before its position can be
+      var parentNode = appendTo === "parent" ? reference.parentNode : invokeWithArgsOrReturn(appendTo, [reference]); // The popper element needs to exist on the DOM before its position can be
       // updated as Popper.js needs to read its dimensions
 
       if (!parentNode.contains(popper)) {
@@ -3914,7 +3922,7 @@
       var nextProps = evaluateProps(reference, _extends$1({}, instance.props, partialProps, {
         ignoreAttributes: true
       }));
-      nextProps.ignoreAttributes = hasOwnProperty(partialProps, 'ignoreAttributes') ? partialProps.ignoreAttributes || false : prevProps.ignoreAttributes;
+      nextProps.ignoreAttributes = hasOwnProperty(partialProps, "ignoreAttributes") ? partialProps.ignoreAttributes || false : prevProps.ignoreAttributes;
       instance.props = nextProps;
       addTriggersToEventListenersTarget();
       cleanupInteractiveMouseListeners();
@@ -3957,14 +3965,14 @@
       // Firefox allows events on disabled elements, but Chrome doesn't.
       // Using a wrapper element (i.e. <span>) is recommended.
 
-      if (getEventListenersTarget().hasAttribute('disabled')) {
+      if (getEventListenersTarget().hasAttribute("disabled")) {
         return;
       }
       if (instance.props.onShow(instance) === false) {
         return;
       }
       addDocumentMouseDownListener();
-      popper.style.visibility = 'visible';
+      popper.style.visibility = "visible";
       instance.state.isVisible = true; // Prevent a transition of the popper from its previous position and of the
       // elements at a different placement.
 
@@ -3981,13 +3989,13 @@
         // tooltip element. `clip-path` is the other alternative but is not well-
         // supported and is buggy on some devices.
 
-        content.style.transitionDelay = instance.popperChildren.backdrop ? Math.round(duration / 12) + "ms" : '';
+        content.style.transitionDelay = instance.popperChildren.backdrop ? Math.round(duration / 12) + "ms" : "";
         if (instance.props.sticky) {
           makeSticky();
         }
         setTransitionDuration([popper], instance.props.updateDuration);
         setTransitionDuration(transitionableElements, duration);
-        setVisibilityState(transitionableElements, 'visible');
+        setVisibilityState(transitionableElements, "visible");
         onTransitionedIn(duration, function () {
           if (instance.props.aria) {
             getEventListenersTarget().setAttribute("aria-" + instance.props.aria, tooltip.id);
@@ -4012,12 +4020,12 @@
         return;
       }
       removeDocumentMouseDownListener();
-      popper.style.visibility = 'hidden';
+      popper.style.visibility = "hidden";
       instance.state.isVisible = false;
       instance.state.isShown = false;
       var transitionableElements = getTransitionableElements();
       setTransitionDuration(transitionableElements, duration);
-      setVisibilityState(transitionableElements, 'hidden');
+      setVisibilityState(transitionableElements, "hidden");
       onTransitionedOut(duration, function () {
         if (instance.props.aria) {
           getEventListenersTarget().removeAttribute("aria-" + instance.props.aria);
@@ -4100,8 +4108,8 @@
    */
 
   function autoInit() {
-    arrayFrom(document.querySelectorAll('[data-tippy]')).forEach(function (el) {
-      var content = el.getAttribute('data-tippy');
+    arrayFrom(document.querySelectorAll("[data-tippy]")).forEach(function (el) {
+      var content = el.getAttribute("data-tippy");
       if (content) {
         tippy(el, {
           content: content
@@ -4119,7 +4127,7 @@
    * MIT License
    */
 
-  var css = ".tippy-tooltip[data-animation=fade][data-state=hidden]{opacity:0}.tippy-iOS{cursor:pointer!important;-webkit-tap-highlight-color:transparent}.tippy-popper{pointer-events:none;max-width:calc(100% - 8px);transition-timing-function:cubic-bezier(.165,.84,.44,1)}.tippy-tooltip{position:relative;color:#fff;border-radius:.25rem;font-size:.875rem;line-height:1.4;background-color:#333;overflow:hidden;transition-property:visibility,opacity,transform;outline:0}.tippy-tooltip[data-placement^=top] .tippy-arrow{border-width:8px 8px 0;border-top-color:#333;margin:0 3px;transform-origin:50% 0;bottom:-7px}.tippy-tooltip[data-placement^=bottom] .tippy-arrow{border-width:0 8px 8px;border-bottom-color:#333;margin:0 3px;transform-origin:50% 7px;top:-7px}.tippy-tooltip[data-placement^=left] .tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#333;margin:3px 0;transform-origin:0 50%;right:-7px}.tippy-tooltip[data-placement^=right] .tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#333;margin:3px 0;transform-origin:7px 50%;left:-7px}.tippy-tooltip[data-arrow]{overflow:visible}.tippy-tooltip[data-animatefill]{background-color:transparent!important}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow{border-color:transparent;border-style:solid;position:absolute}.tippy-arrow[data-state=hidden]{opacity:0}.tippy-content{padding:.3125rem .5625rem}";
+  var css = ".tippy-tooltip[data-animation=fade][data-state=hidden]{opacity:0}.tippy-iOS{cursor:pointer!important;-webkit-tap-highlight-color:transparent}.tippy-popper{pointer-events:none;max-width:calc(100% - 8px);transition-timing-function:cubic-bezier(.165,.84,.44,1)}.tippy-tooltip{position:relative;color:#fff;border-radius:.25rem;font-size:.875rem;line-height:1.4;background-color:#333;overflow:hidden;transition-property:visibility,opacity,transform;outline:0}.tippy-tooltip[data-placement^=top] .tippy-arrow{border-width:8px 8px 0;border-top-color:#333;margin:0 3px;transform-origin:50% 0;bottom:-8px}.tippy-tooltip[data-placement^=bottom] .tippy-arrow{border-width:0 8px 8px;border-bottom-color:#333;margin:0 3px;transform-origin:50% 7px;top:-8px}.tippy-tooltip[data-placement^=left] .tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#333;margin:3px 0;transform-origin:0 50%;right:-8px}.tippy-tooltip[data-placement^=right] .tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#333;margin:3px 0;transform-origin:7px 50%;left:-8px}.tippy-tooltip[data-arrow]{overflow:visible}.tippy-tooltip[data-animatefill]{background-color:transparent!important}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow{border-color:transparent;border-style:solid;position:absolute}.tippy-arrow[data-state=hidden]{opacity:0}.tippy-content{padding:.3125rem .5625rem}";
 
   /**
    * Injects a string of CSS styles to a style node in <head>
@@ -4127,11 +4135,11 @@
 
   function injectCSS(css) {
     if (isBrowser) {
-      var style = document.createElement('style');
+      var style = document.createElement("style");
       style.textContent = css;
-      style.setAttribute('data-tippy-stylesheet', '');
+      style.setAttribute("data-tippy-stylesheet", "");
       var head = document.head;
-      var firstStyleOrLinkTag = head.querySelector('style,link');
+      var firstStyleOrLinkTag = head.querySelector("style,link");
       if (firstStyleOrLinkTag) {
         head.insertBefore(style, firstStyleOrLinkTag);
       } else {
@@ -4140,17 +4148,17 @@
     }
   }
   injectCSS(css);
-  var missingTippy = 'Using the attachment feature of Shepherd requires the Tippy.js library';
-  var addShepherdClass = _createClassModifier('shepherd');
-  var addHasTitleClass = _createClassModifier('shepherd-has-title');
+  var missingTippy = "Using the attachment feature of Shepherd requires the Tippy.js library";
+  var addShepherdClass = _createClassModifier("shepherd");
+  var addHasTitleClass = _createClassModifier("shepherd-has-title");
   var centeredStylePopperModifier = {
     computeStyle: {
       enabled: true,
       fn: function fn(data) {
         data.styles = _extends({}, data.styles, {
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)'
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)"
         });
         return data;
       }
@@ -4171,7 +4179,7 @@
    */
 
   function createFromHTML(html) {
-    var el = document.createElement('div');
+    var el = document.createElement("div");
     el.innerHTML = html;
     return el.children[0];
   }
@@ -4234,7 +4242,7 @@
     var attachToOpts = this.parseAttachTo();
     this.tooltip = _makeTippyInstance.call(this, attachToOpts);
     this.target = attachToOpts.element || document.body;
-    this.el.classList.add('shepherd-element');
+    this.el.classList.add("shepherd-element");
   }
   /**
    * Checks if options.attachTo.element is a string, and if so, tries to find the element
@@ -4251,7 +4259,8 @@
       // guarantee that the element will exist in the future.
       try {
         returnOpts.element = document.querySelector(options.element);
-      } catch (e) {// TODO
+      } catch (e) {
+        // TODO
       }
       if (!returnOpts.element) {
         console.error("The element for this Shepherd step was not found ".concat(options.element));
@@ -4302,7 +4311,7 @@
     var resultingTippyOptions = {
       content: this.el,
       flipOnUpdate: true,
-      placement: attachToOptions.on || 'right'
+      placement: attachToOptions.on || "right"
     };
     _extends(resultingTippyOptions, this.options.tippyOptions);
     if (this.options.title) {
@@ -4328,7 +4337,7 @@
   function _makeCenteredTippy() {
     var tippyOptions = _objectSpread2({
       content: this.el,
-      placement: 'top'
+      placement: "top"
     }, this.options.tippyOptions);
     tippyOptions.arrow = false;
     tippyOptions.popperOptions = tippyOptions.popperOptions || {};
@@ -4442,23 +4451,24 @@
       var el;
       try {
         el = document.querySelector(selector);
-      } catch (e) {// TODO
+      } catch (e) {
+        // TODO
       }
       if (!isUndefined(selector) && !el) {
         return console.error("No element was found for the selector supplied to advanceOn: ".concat(selector));
       } else if (el) {
         el.addEventListener(event, handler);
-        this.on('destroy', function () {
+        this.on("destroy", function () {
           return el.removeEventListener(event, handler);
         });
       } else {
         document.body.addEventListener(event, handler, true);
-        this.on('destroy', function () {
+        this.on("destroy", function () {
           return document.body.removeEventListener(event, handler, true);
         });
       }
     } else {
-      return console.error('advanceOn was defined, but no event name was passed.');
+      return console.error("advanceOn was defined, but no event name was passed.");
     }
   }
   /**
@@ -4488,8 +4498,8 @@
         el.dataset.buttonEvent = true;
         el.addEventListener(event, handler); // Cleanup event listeners on destroy
 
-        _this2.on('destroy', function () {
-          el.removeAttribute('data-button-event');
+        _this2.on("destroy", function () {
+          el.removeAttribute("data-button-event");
           el.removeEventListener(event, handler);
         });
       });
@@ -4502,7 +4512,7 @@
 
   function bindCancelLink(link) {
     var _this3 = this;
-    link.addEventListener('click', function (e) {
+    link.addEventListener("click", function (e) {
       e.preventDefault();
       _this3.cancel();
     });
@@ -4536,7 +4546,7 @@
         var d = document;
 
         // return if scroll behavior is supported and polyfill is not forced
-        if ('scrollBehavior' in d.documentElement.style && w.__forceSmoothScrollPolyfill__ !== true) {
+        if ("scrollBehavior" in d.documentElement.style && w.__forceSmoothScrollPolyfill__ !== true) {
           return;
         }
 
@@ -4562,15 +4572,15 @@
          * @returns {Boolean}
          */
         function isMicrosoftBrowser(userAgent) {
-          var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
-          return new RegExp(userAgentPatterns.join('|')).test(userAgent);
+          var userAgentPatterns = ["MSIE ", "Trident/", "Edge/"];
+          return new RegExp(userAgentPatterns.join("|")).test(userAgent);
         }
 
         /*
-        * IE has rounding bug rounding down clientHeight and clientWidth and
-        * rounding up scrollHeight and scrollWidth causing false positives
-        * on hasScrollableSpace
-        */
+         * IE has rounding bug rounding down clientHeight and clientWidth and
+         * rounding up scrollHeight and scrollWidth causing false positives
+         * on hasScrollableSpace
+         */
         var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
 
         /**
@@ -4602,18 +4612,18 @@
          * @returns {Boolean}
          */
         function shouldBailOut(firstArg) {
-          if (firstArg === null || _typeof(firstArg) !== 'object' || firstArg.behavior === undefined || firstArg.behavior === 'auto' || firstArg.behavior === 'instant') {
+          if (firstArg === null || _typeof(firstArg) !== "object" || firstArg.behavior === undefined || firstArg.behavior === "auto" || firstArg.behavior === "instant") {
             // first argument is not an object/null
             // or behavior is auto, instant or undefined
             return true;
           }
-          if (_typeof(firstArg) === 'object' && firstArg.behavior === 'smooth') {
+          if (_typeof(firstArg) === "object" && firstArg.behavior === "smooth") {
             // first argument is an object and behavior is smooth
             return false;
           }
 
           // throw error when behavior is not supported
-          throw new TypeError('behavior member of ScrollOptions ' + firstArg.behavior + ' is not a valid value for enumeration ScrollBehavior.');
+          throw new TypeError("behavior member of ScrollOptions " + firstArg.behavior + " is not a valid value for enumeration ScrollBehavior.");
         }
 
         /**
@@ -4624,10 +4634,10 @@
          * @returns {Boolean}
          */
         function hasScrollableSpace(el, axis) {
-          if (axis === 'Y') {
+          if (axis === "Y") {
             return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
           }
-          if (axis === 'X') {
+          if (axis === "X") {
             return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
           }
         }
@@ -4640,8 +4650,8 @@
          * @returns {Boolean}
          */
         function canOverflow(el, axis) {
-          var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
-          return overflowValue === 'auto' || overflowValue === 'scroll';
+          var overflowValue = w.getComputedStyle(el, null)["overflow" + axis];
+          return overflowValue === "auto" || overflowValue === "scroll";
         }
 
         /**
@@ -4652,8 +4662,8 @@
          * @returns {Boolean}
          */
         function isScrollable(el) {
-          var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
-          var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+          var isScrollableY = hasScrollableSpace(el, "Y") && canOverflow(el, "Y");
+          var isScrollableX = hasScrollableSpace(el, "X") && canOverflow(el, "X");
           return isScrollableY || isScrollableX;
         }
 
@@ -4748,7 +4758,7 @@
 
           // avoid smooth behavior if not required
           if (shouldBailOut(arguments[0]) === true) {
-            original.scroll.call(w, arguments[0].left !== undefined ? arguments[0].left : _typeof(arguments[0]) !== 'object' ? arguments[0] : w.scrollX || w.pageXOffset,
+            original.scroll.call(w, arguments[0].left !== undefined ? arguments[0].left : _typeof(arguments[0]) !== "object" ? arguments[0] : w.scrollX || w.pageXOffset,
             // use top prop, second argument if present or fallback to scrollY
             arguments[0].top !== undefined ? arguments[0].top : arguments[1] !== undefined ? arguments[1] : w.scrollY || w.pageYOffset);
             return;
@@ -4767,7 +4777,7 @@
 
           // avoid smooth behavior if not required
           if (shouldBailOut(arguments[0])) {
-            original.scrollBy.call(w, arguments[0].left !== undefined ? arguments[0].left : _typeof(arguments[0]) !== 'object' ? arguments[0] : 0, arguments[0].top !== undefined ? arguments[0].top : arguments[1] !== undefined ? arguments[1] : 0);
+            original.scrollBy.call(w, arguments[0].left !== undefined ? arguments[0].left : _typeof(arguments[0]) !== "object" ? arguments[0] : 0, arguments[0].top !== undefined ? arguments[0].top : arguments[1] !== undefined ? arguments[1] : 0);
             return;
           }
 
@@ -4785,12 +4795,12 @@
           // avoid smooth behavior if not required
           if (shouldBailOut(arguments[0]) === true) {
             // if one number is passed, throw error to match Firefox implementation
-            if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
-              throw new SyntaxError('Value could not be converted');
+            if (typeof arguments[0] === "number" && arguments[1] === undefined) {
+              throw new SyntaxError("Value could not be converted");
             }
             original.elementScroll.call(this,
             // use left prop, first number argument or fallback to scrollLeft
-            arguments[0].left !== undefined ? ~~arguments[0].left : _typeof(arguments[0]) !== 'object' ? ~~arguments[0] : this.scrollLeft,
+            arguments[0].left !== undefined ? ~~arguments[0].left : _typeof(arguments[0]) !== "object" ? ~~arguments[0] : this.scrollLeft,
             // use top prop, second argument or fallback to scrollTop
             arguments[0].top !== undefined ? ~~arguments[0].top : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop);
             return;
@@ -4799,7 +4809,7 @@
           var top = arguments[0].top;
 
           // LET THE SMOOTHNESS BEGIN!
-          smoothScroll.call(this, this, typeof left === 'undefined' ? this.scrollLeft : ~~left, typeof top === 'undefined' ? this.scrollTop : ~~top);
+          smoothScroll.call(this, this, typeof left === "undefined" ? this.scrollLeft : ~~left, typeof top === "undefined" ? this.scrollTop : ~~top);
         };
 
         // Element.prototype.scrollBy
@@ -4838,11 +4848,11 @@
             smoothScroll.call(this, scrollableParent, scrollableParent.scrollLeft + clientRects.left - parentRects.left, scrollableParent.scrollTop + clientRects.top - parentRects.top);
 
             // reveal parent in viewport unless is fixed
-            if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
+            if (w.getComputedStyle(scrollableParent).position !== "fixed") {
               w.scrollBy({
                 left: parentRects.left,
                 top: parentRects.top,
-                behavior: 'smooth'
+                behavior: "smooth"
               });
             }
           } else {
@@ -4850,7 +4860,7 @@
             w.scrollBy({
               left: clientRects.left,
               top: clientRects.top,
-              behavior: 'smooth'
+              behavior: "smooth"
             });
           }
         };
@@ -4969,7 +4979,7 @@
       _classCallCheck$1(this, Step);
       _this = _possibleConstructorReturn$1(this, _getPrototypeOf$1(Step).call(this, tour, options));
       _this.tour = tour;
-      bindMethods.call(_assertThisInitialized$1(_this), ['_show', 'cancel', 'complete', 'destroy', 'hide', 'isOpen', 'scrollTo', 'setupElements', 'show']);
+      bindMethods.call(_assertThisInitialized$1(_this), ["_show", "cancel", "complete", "destroy", "hide", "isOpen", "scrollTo", "setupElements", "show"]);
       _this.setOptions(options);
       _this.bindAdvance = bindAdvance.bind(_assertThisInitialized$1(_this));
       _this.bindButtonEvents = bindButtonEvents.bind(_assertThisInitialized$1(_this));
@@ -4990,10 +5000,10 @@
       value: function _addButtons(content) {
         var _this2 = this;
         if (Array.isArray(this.options.buttons) && this.options.buttons.length) {
-          var footer = document.createElement('footer');
-          footer.classList.add('shepherd-footer');
+          var footer = document.createElement("footer");
+          footer.classList.add("shepherd-footer");
           this.options.buttons.map(function (cfg) {
-            var button = createFromHTML("<button class=\"shepherd-button ".concat(cfg.classes || '', "\" tabindex=\"0\">").concat(cfg.text, "</button>"));
+            var button = createFromHTML('<button class="shepherd-button '.concat(cfg.classes || "", '" tabindex="0">').concat(cfg.text, "</button>"));
             footer.appendChild(button);
             _this2.bindButtonEvents(cfg, button);
           });
@@ -5012,7 +5022,7 @@
         if (this.options.showCancelLink) {
           var link = createFromHTML('<a href class="shepherd-cancel-link"></a>');
           header.appendChild(link);
-          element.classList.add('shepherd-has-cancel-link');
+          element.classList.add("shepherd-has-cancel-link");
           this.bindCancelLink(link);
         }
       }
@@ -5027,7 +5037,7 @@
     }, {
       key: "_addContent",
       value: function _addContent(content, descriptionId) {
-        var text = createFromHTML("<div class=\"shepherd-text\"\n       id=\"".concat(descriptionId, "\"\n       ></div>"));
+        var text = createFromHTML('<div class="shepherd-text"\n       id="'.concat(descriptionId, '"\n       ></div>'));
         var paragraphs = this.options.text;
         if (isFunction(paragraphs)) {
           paragraphs = paragraphs.call(this, text);
@@ -5065,7 +5075,7 @@
         var _focusableElements = _slicedToArray(focusableElements, 1),
           firstFocusableElement = _focusableElements[0];
         var lastFocusableElement = focusableElements[focusableElements.length - 1];
-        element.addEventListener('keydown', function (e) {
+        element.addEventListener("keydown", function (e) {
           switch (e.keyCode) {
             case KEY_TAB:
               if (focusableElements.length === 1) {
@@ -5108,27 +5118,27 @@
     }, {
       key: "_createTooltipContent",
       value: function _createTooltipContent() {
-        var content = document.createElement('div');
-        var classes = this.options.classes || '';
+        var content = document.createElement("div");
+        var classes = this.options.classes || "";
         var descriptionId = "".concat(this.id, "-description");
         var labelId = "".concat(this.id, "-label");
-        var element = createFromHTML("<div class=\"".concat(classes, "\"\n       data-shepherd-step-id=\"").concat(this.id, "\"\n       role=\"dialog\"\n       tabindex=\"0\">"));
-        var header = document.createElement('header');
+        var element = createFromHTML('<div class="'.concat(classes, '"\n       data-shepherd-step-id="').concat(this.id, '"\n       role="dialog"\n       tabindex="0">'));
+        var header = document.createElement("header");
         if (this.options.title) {
-          var title = document.createElement('h3');
-          title.classList.add('shepherd-title');
+          var title = document.createElement("h3");
+          title.classList.add("shepherd-title");
           title.innerHTML = "".concat(this.options.title);
           title.id = labelId;
-          element.setAttribute('aria-labeledby', labelId);
+          element.setAttribute("aria-labeledby", labelId);
           header.appendChild(title);
         }
-        content.classList.add('shepherd-content');
-        header.classList.add('shepherd-header');
+        content.classList.add("shepherd-content");
+        header.classList.add("shepherd-header");
         element.appendChild(content);
         content.appendChild(header);
         if (!isUndefined(this.options.text)) {
           this._addContent(content, descriptionId);
-          element.setAttribute('aria-describedby', descriptionId);
+          element.setAttribute("aria-describedby", descriptionId);
         }
         this._addButtons(content);
         this._addCancelLink(element, header);
@@ -5151,7 +5161,7 @@
       key: "cancel",
       value: function cancel() {
         this.tour.cancel();
-        this.trigger('cancel');
+        this.trigger("cancel");
       }
       /**
        * Complete the tour
@@ -5161,7 +5171,7 @@
       key: "complete",
       value: function complete() {
         this.tour.complete();
-        this.trigger('complete');
+        this.trigger("complete");
       }
       /**
        * Remove the step, delete the step's element, and destroy the tippy instance for the step
@@ -5170,18 +5180,20 @@
     }, {
       key: "destroy",
       value: function destroy() {
-        if (this.tooltip) {
-          this.tooltip.destroy();
-          this.tooltip = null;
-        }
-        if (isElement(this.el) && this.el.parentNode) {
-          this.el.parentNode.removeChild(this.el);
-          this.el = null;
-        }
-        if (this.target) {
-          this._updateStepTargetOnHide();
-        }
-        this.trigger('destroy');
+        try {
+          if (this.tooltip) {
+            this.tooltip.destroy();
+            this.tooltip = null;
+          }
+          if (isElement(this.el) && this.el.parentNode) {
+            this.el.parentNode.removeChild(this.el);
+            this.el = null;
+          }
+          if (this.target) {
+            this._updateStepTargetOnHide();
+          }
+          this.trigger("destroy");
+        } catch (e) {}
       }
       /**
        * Hide the step and destroy the tippy instance
@@ -5190,15 +5202,15 @@
       key: "hide",
       value: function hide() {
         this.tour.modal.hide();
-        this.trigger('before-hide');
-        document.body.removeAttribute('data-shepherd-step');
+        this.trigger("before-hide");
+        document.body.removeAttribute("data-shepherd-step");
         if (this.target) {
           this._updateStepTargetOnHide();
         }
         if (this.tooltip) {
           this.tooltip.hide();
         }
-        this.trigger('hide');
+        this.trigger("hide");
       }
       /**
        * Check if the step is open and visible
@@ -5293,19 +5305,19 @@
       value: function _show() {
         var _this6 = this;
         this.tour.beforeShowStep(this);
-        this.trigger('before-show');
+        this.trigger("before-show");
         if (!this.el) {
           this.setupElements();
         }
-        this.target.classList.add('shepherd-enabled', 'shepherd-target');
-        document.body.setAttribute('data-shepherd-step', this.id);
+        this.target.classList.add("shepherd-enabled", "shepherd-target");
+        document.body.setAttribute("data-shepherd-step", this.id);
         if (this.options.scrollTo) {
           setTimeout(function () {
             _this6.scrollTo(_this6.options.scrollTo);
           });
         }
         this.tooltip.show();
-        this.trigger('show');
+        this.trigger("show");
         this.el.focus();
       }
       /**
@@ -5319,29 +5331,29 @@
         if (this.options.highlightClass) {
           this.target.classList.remove(this.options.highlightClass);
         }
-        this.target.classList.remove('shepherd-enabled', 'shepherd-target');
+        this.target.classList.remove("shepherd-enabled", "shepherd-target");
       }
     }]);
     return Step;
   }(Evented);
-  var svgNS = 'http://www.w3.org/2000/svg';
+  var svgNS = "http://www.w3.org/2000/svg";
   var elementIds = {
-    modalOverlay: 'shepherdModalOverlayContainer',
-    modalOverlayMask: 'shepherdModalMask',
-    modalOverlayMaskRect: 'shepherdModalMaskRect',
-    modalOverlayMaskOpening: 'shepherdModalMaskOpening'
+    modalOverlay: "shepherdModalOverlayContainer",
+    modalOverlayMask: "shepherdModalMask",
+    modalOverlayMaskRect: "shepherdModalMaskRect",
+    modalOverlayMaskOpening: "shepherdModalMaskOpening"
   };
   var classNames = {
-    isVisible: 'shepherd-modal-is-visible',
-    modalTarget: 'shepherd-modal-target'
+    isVisible: "shepherd-modal-is-visible",
+    modalTarget: "shepherd-modal-target"
   };
   /**
    * <svg id="shepherdModalOverlayContainer" xmlns="http://www.w3.org/2000/svg">
    */
 
   function _createModalContainer() {
-    var element = document.createElementNS(svgNS, 'svg');
-    element.setAttributeNS(null, 'id', elementIds.modalOverlay);
+    var element = document.createElementNS(svgNS, "svg");
+    element.setAttributeNS(null, "id", elementIds.modalOverlay);
     return element;
   }
   /**
@@ -5349,13 +5361,13 @@
    */
 
   function _createMaskContainer() {
-    var element = document.createElementNS(svgNS, 'mask');
+    var element = document.createElementNS(svgNS, "mask");
     _setAttributes(element, {
-      height: '100%',
+      height: "100%",
       id: elementIds.modalOverlayMask,
-      width: '100%',
-      x: '0',
-      y: '0'
+      width: "100%",
+      x: "0",
+      y: "0"
     });
     return element;
   }
@@ -5364,14 +5376,14 @@
    */
 
   function _createMaskRect() {
-    var element = document.createElementNS(svgNS, 'rect');
+    var element = document.createElementNS(svgNS, "rect");
     _setAttributes(element, {
-      fill: '#FFFFFF',
-      height: '100%',
+      fill: "#FFFFFF",
+      height: "100%",
       id: elementIds.modalOverlayMaskRect,
-      width: '100%',
-      x: '0',
-      y: '0'
+      width: "100%",
+      x: "0",
+      y: "0"
     });
     return element;
   }
@@ -5380,9 +5392,9 @@
    */
 
   function _createMaskOpening() {
-    var element = document.createElementNS(svgNS, 'rect');
+    var element = document.createElementNS(svgNS, "rect");
     _setAttributes(element, {
-      fill: '#000000',
+      fill: "#000000",
       id: elementIds.modalOverlayMaskOpening
     });
     return element;
@@ -5392,35 +5404,35 @@
    */
 
   function _createMaskConsumer() {
-    var element = document.createElementNS(svgNS, 'rect');
+    var element = document.createElementNS(svgNS, "rect");
     _setAttributes(element, {
-      height: '100%',
-      width: '100%',
-      x: '0',
-      y: '0'
+      height: "100%",
+      width: "100%",
+      x: "0",
+      y: "0"
     });
-    element.setAttribute('mask', "url(#".concat(elementIds.modalOverlayMask, ")"));
+    element.setAttribute("mask", "url(#".concat(elementIds.modalOverlayMask, ")"));
     return element;
   }
   /**
-   * Generates an SVG with the following structure:
-   * ```html
-   *  <svg id="shepherdModalOverlayContainer" xmlns="http://www.w3.org/2000/svg">
-   <defs>
-   <mask id="shepherdModalMask" x="0" y="0" width="100%" height="100%" >
-   <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
-   <!-- This element will "punch a hole" through the mask by preventing it from rendering within the perimeter -->
-   <rect id="shepherdModalMaskOpening"/>
-   </mask>
-   </defs>
-   <rect x="0" y="0" width="100%" height="100%" mask="url(#shepherdModalMask)"/>
-   </svg>
-   * ```
-   */
+     * Generates an SVG with the following structure:
+     * ```html
+     *  <svg id="shepherdModalOverlayContainer" xmlns="http://www.w3.org/2000/svg">
+     <defs>
+     <mask id="shepherdModalMask" x="0" y="0" width="100%" height="100%" >
+     <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
+     <!-- This element will "punch a hole" through the mask by preventing it from rendering within the perimeter -->
+     <rect id="shepherdModalMaskOpening"/>
+     </mask>
+     </defs>
+     <rect x="0" y="0" width="100%" height="100%" mask="url(#shepherdModalMask)"/>
+     </svg>
+     * ```
+     */
 
   function createModalOverlay() {
     var containerElement = _createModalContainer();
-    var defsElement = document.createElementNS(svgNS, 'defs');
+    var defsElement = document.createElementNS(svgNS, "defs");
     var maskContainer = _createMaskContainer();
     var maskRect = _createMaskRect();
     var maskOpening = _createMaskOpening();
@@ -5461,10 +5473,10 @@
   function closeModalOpening(openingElement) {
     if (openingElement && openingElement instanceof SVGElement) {
       _setAttributes(openingElement, {
-        height: '0',
-        x: '0',
-        y: '0',
-        width: '0'
+        height: "0",
+        x: "0",
+        y: "0",
+        width: "0"
       });
     }
   }
@@ -5516,7 +5528,13 @@
     if (op instanceof HTMLElement) {
       return op;
     }
-    return document.querySelector(op);
+    if (op instanceof SVGElement) {
+      return op;
+    }
+    try {
+      return document.querySelector(op);
+    } catch (e) {}
+    return null;
   }
   /**
    * Return the element for a step
@@ -5534,9 +5552,9 @@
     }
     var type = _typeof$1(attachTo);
     var element;
-    if (type === 'string') {
+    if (type === "string") {
       element = getElementFromString(attachTo);
-    } else if (type === 'object') {
+    } else if (type === "object") {
       element = getElementFromObject(attachTo);
     } else {
       /* istanbul ignore next: cannot test undefined attachTo, but it does work! */
@@ -5554,26 +5572,26 @@
    */
 
   function getElementFromString(element) {
-    var _element$split = element.split(' '),
+    var _element$split = element.split(" "),
       _element$split2 = _slicedToArray(_element$split, 1),
       selector = _element$split2[0];
     return document.querySelector(selector);
   }
   function addStepEventListeners() {
-    if (typeof this._onScreenChange === 'function') {
-      window.removeEventListener('resize', this._onScreenChange, false);
-      window.removeEventListener('scroll', this._onScreenChange, true);
+    if (typeof this._onScreenChange === "function") {
+      window.removeEventListener("resize", this._onScreenChange, false);
+      window.removeEventListener("scroll", this._onScreenChange, true);
     }
-    window.addEventListener('resize', this._onScreenChange, false);
-    window.addEventListener('scroll', this._onScreenChange, true);
+    window.addEventListener("resize", this._onScreenChange, false);
+    window.addEventListener("scroll", this._onScreenChange, true);
     var overlay = document.querySelector("#".concat(elementIds.modalOverlay)); // Prevents window from moving on touch.
 
-    window.addEventListener('touchmove', preventModalBodyTouch, {
+    window.addEventListener("touchmove", preventModalBodyTouch, {
       passive: false
     }); // Allows content to move on touch.
 
     if (overlay) {
-      overlay.addEventListener('touchmove', preventModalOverlayTouch, false);
+      overlay.addEventListener("touchmove", preventModalOverlayTouch, false);
     }
   }
   var Modal = /*#__PURE__*/
@@ -5591,12 +5609,14 @@
     _createClass$1(Modal, [{
       key: "cleanup",
       value: function cleanup() {
-        var element = this._modalOverlayElem;
-        if (element && element instanceof SVGElement) {
-          element.parentNode.removeChild(element);
-        }
-        this._modalOverlayElem = null;
-        document.body.classList.remove(classNames.isVisible);
+        try {
+          var element = this._modalOverlayElem;
+          if (element && element instanceof SVGElement) {
+            element.parentNode.removeChild(element);
+          }
+          this._modalOverlayElem = null;
+          document.body.classList.remove(classNames.isVisible);
+        } catch (e) {}
       }
       /**
        * Create the modal overlay, if it does not already exist
@@ -5605,7 +5625,7 @@
       key: "createModalOverlay",
       value: function createModalOverlay$1() {
         if (!this._modalOverlayElem) {
-          var existingModal = document.getElementById('shepherdModalOverlayContainer');
+          var existingModal = document.getElementById("shepherdModalOverlayContainer");
           this._modalOverlayElem = existingModal || createModalOverlay();
           this._modalOverlayOpening = getModalMaskOpening(this._modalOverlayElem); // don't show yet -- each step will control that
 
@@ -5624,7 +5644,7 @@
       value: function hide() {
         document.body.classList.remove(classNames.isVisible);
         if (this._modalOverlayElem) {
-          this._modalOverlayElem.style.display = 'none';
+          this._modalOverlayElem.style.display = "none";
         }
       }
       /**
@@ -5649,7 +5669,7 @@
       value: function show() {
         document.body.classList.add(classNames.isVisible);
         if (this._modalOverlayElem) {
-          this._modalOverlayElem.style.display = 'block';
+          this._modalOverlayElem.style.display = "block";
         }
       }
       /**
@@ -5681,17 +5701,17 @@
   // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
 
   var hasPassiveEvents = false;
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     var passiveTestOptions = {
       get passive() {
         hasPassiveEvents = true;
         return undefined;
       }
     };
-    window.addEventListener('testPassive', null, passiveTestOptions);
-    window.removeEventListener('testPassive', null, passiveTestOptions);
+    window.addEventListener("testPassive", null, passiveTestOptions);
+    window.removeEventListener("testPassive", null, passiveTestOptions);
   }
-  var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform);
+  var isIosDevice = typeof window !== "undefined" && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform);
   var locks = [];
   var documentListenerAdded = false;
   var initialClientY = -1;
@@ -5740,7 +5760,7 @@
       // If previousBodyOverflowSetting is already set, don't set it again.
       if (previousBodyOverflowSetting === undefined) {
         previousBodyOverflowSetting = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
+        document.body.style.overflow = "hidden";
       }
     });
   };
@@ -5791,7 +5811,7 @@
       // called on this targetElement before.
       if (!targetElement) {
         // eslint-disable-next-line no-console
-        console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+        console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
         return;
       }
       if (targetElement && !locks.some(function (lock) {
@@ -5815,7 +5835,7 @@
           }
         };
         if (!documentListenerAdded) {
-          document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? {
+          document.addEventListener("touchmove", preventDefault, hasPassiveEvents ? {
             passive: false
           } : undefined);
           documentListenerAdded = true;
@@ -5838,7 +5858,7 @@
         lock.targetElement.ontouchmove = null;
       });
       if (documentListenerAdded) {
-        document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? {
+        document.removeEventListener("touchmove", preventDefault, hasPassiveEvents ? {
           passive: false
         } : undefined);
         documentListenerAdded = false;
@@ -5853,16 +5873,16 @@
     }
   };
   var defaults = {
-    trigger: 'manual',
+    trigger: "manual",
     arrow: true,
-    animation: 'fade',
+    animation: "fade",
     duration: 420,
     flip: true,
     animateFill: false,
     // https://atomiks.github.io/tippyjs/#animate-fill-option
     interactive: true,
     // https://atomiks.github.io/tippyjs/#interactive-option
-    hideOnClick: 'toggle',
+    hideOnClick: "toggle",
     // https://atomiks.github.io/tippyjs/#hide-on-click-option
     multiple: true // https://atomiks.github.io/tippyjs/#multiple-option
   };
@@ -5879,7 +5899,7 @@
         if (step.options && step.options.canClickTarget === false && step.options.attachTo) {
           var stepElement = getElementForStep(step);
           if (stepElement instanceof HTMLElement) {
-            stepElement.style.pointerEvents = 'auto';
+            stepElement.style.pointerEvents = "auto";
           }
         }
       });
@@ -5890,12 +5910,12 @@
    */
 
   function cleanupStepEventListeners() {
-    if (typeof this._onScreenChange === 'function') {
-      window.removeEventListener('resize', this._onScreenChange, false);
-      window.removeEventListener('scroll', this._onScreenChange, false);
+    if (typeof this._onScreenChange === "function") {
+      window.removeEventListener("resize", this._onScreenChange, false);
+      window.removeEventListener("scroll", this._onScreenChange, false);
       this._onScreenChange = null;
     }
-    window.removeEventListener('touchmove', preventModalBodyTouch, {
+    window.removeEventListener("touchmove", preventModalBodyTouch, {
       passive: false
     });
   }
@@ -5942,11 +5962,11 @@
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       _classCallCheck$1(this, Tour);
       _this = _possibleConstructorReturn$1(this, _getPrototypeOf$1(Tour).call(this, options));
-      bindMethods.call(_assertThisInitialized$1(_this), ['back', 'cancel', 'complete', 'hide', 'next']);
+      bindMethods.call(_assertThisInitialized$1(_this), ["back", "cancel", "complete", "hide", "next"]);
       _this.options = options;
       _this.steps = _this.options.steps || []; // Pass these events onto the global Shepherd object
 
-      var events = ['active', 'cancel', 'complete', 'inactive', 'show', 'start'];
+      var events = ["active", "cancel", "complete", "inactive", "show", "start"];
       events.map(function (event) {
         (function (e) {
           _this.on(e, function (opts) {
@@ -6006,13 +6026,13 @@
       key: "cancel",
       value: function cancel() {
         if (this.options.confirmCancel) {
-          var cancelMessage = this.options.confirmCancelMessage || 'Are you sure you want to stop the tour?';
+          var cancelMessage = this.options.confirmCancelMessage || "Are you sure you want to stop the tour?";
           var stopTour = window.confirm(cancelMessage);
           if (stopTour) {
-            this.done('cancel');
+            this.done("cancel");
           }
         } else {
-          this.done('cancel');
+          this.done("cancel");
         }
       }
       /**
@@ -6021,7 +6041,7 @@
     }, {
       key: "complete",
       value: function complete() {
-        this.done('complete');
+        this.done("complete");
       }
       /**
        * Called whenever the tour is cancelled or completed, basically anytime we exit the tour
@@ -6040,7 +6060,7 @@
         this.trigger(event);
         Shepherd.activeTour = null;
         this._removeBodyAttrs();
-        this.trigger('inactive', {
+        this.trigger("inactive", {
           tour: this
         });
         if (this.options.disableScroll) {
@@ -6168,7 +6188,7 @@
           if (shouldSkipStep) {
             this._skipStep(step, forward);
           } else {
-            this.trigger('show', {
+            this.trigger("show", {
               step: step,
               previous: this.currentStep
             });
@@ -6183,7 +6203,7 @@
     }, {
       key: "start",
       value: function start() {
-        this.trigger('start');
+        this.trigger("start");
         if (this.options.disableScroll) {
           disableBodyScroll();
         }
@@ -6200,7 +6220,7 @@
       value: function _setupActiveTour() {
         this.modal.createModalOverlay();
         this._addBodyAttrs();
-        this.trigger('active', {
+        this.trigger("active", {
           tour: this
         });
         Shepherd.activeTour = this;
@@ -6224,7 +6244,7 @@
           targetElement.classList.add(step.options.highlightClass);
         }
         if (step.options.canClickTarget === false) {
-          targetElement.style.pointerEvents = 'none';
+          targetElement.style.pointerEvents = "none";
         }
       }
       /**
@@ -6271,7 +6291,7 @@
     }, {
       key: "_setTourID",
       value: function _setTourID() {
-        var tourName = this.options.tourName || 'tour';
+        var tourName = this.options.tourName || "tour";
         var uuid = uniqueId$1();
         this.id = "".concat(tourName, "--").concat(uuid);
       }
@@ -6283,8 +6303,8 @@
     }, {
       key: "_addBodyAttrs",
       value: function _addBodyAttrs() {
-        document.body.setAttribute('data-shepherd-active-tour', this.id);
-        document.body.classList.add('shepherd-active');
+        document.body.setAttribute("data-shepherd-active-tour", this.id);
+        document.body.classList.add("shepherd-active");
       }
       /**
        * Removes the data-shepherd-active-tour attribute and the 'shepherd-active'
@@ -6294,8 +6314,8 @@
     }, {
       key: "_removeBodyAttrs",
       value: function _removeBodyAttrs() {
-        document.body.removeAttribute('data-shepherd-active-tour');
-        document.body.classList.remove('shepherd-active');
+        document.body.removeAttribute("data-shepherd-active-tour");
+        document.body.classList.remove("shepherd-active");
       }
     }]);
     return Tour;
@@ -6362,6 +6382,15 @@
   var isNull = function isNull(term) {
     return term === null;
   };
+
+  /**
+   *
+   * @param term
+   * @returns {boolean}
+   */
+  var isDefined = function isDefined(term) {
+    return typeof term !== "undefined" && !isNull(term);
+  };
   var isElementInViewport = function isElementInViewport(el) {
     var elementOffsetHight = el.offsetHeight;
     var elementOffsetWidth = el.offsetWidth;
@@ -7053,7 +7082,7 @@
     var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 24;
     var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 24;
     var color = arguments.length > 2 ? arguments[2] : undefined;
-    var closeSVG = "\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\" fill=").concat(color, " class=\"bi bi-x\" viewBox=\"0 0 16 16\">\n    <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"/>\n  </svg>");
+    var closeSVG = "\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\" fill=").concat(color, " class=\"bi bi-x\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n  </svg>");
     return closeSVG;
   };
 
@@ -7152,6 +7181,242 @@
     if (position === "left") return 1;else if (position === "center") return 3;else return 5;
   };
 
+  /**
+   * @function getElementFromSelector
+   * @description Finds the element in DOM for a given selector. Selector can be an ID, or any css selector. It can also be an XPath.
+   * @param {string} selector
+   * @returns {HTMLElement} Returns the HTML element that matches the given selector
+   */
+  var getElementFromSelector = function getElementFromSelector(selector) {
+    var iframe_id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    // Given selector can be an ID.
+    var element = document.getElementById(selector);
+    if (!element) {
+      try {
+        element = document.querySelector(selector);
+      } catch (e) {
+        //If there is an exception, it means it is not a valid selector.
+        window.ApxorLogger.error("Error finding element in DOM:" + e);
+      }
+    }
+    // If no element is found till now, it means it is neither an ID nor a valid css selector. It could be an XPath.
+    if (!element) {
+      element = getElementByXPath(selector);
+    }
+
+    // If no element is found, it means the selector is not an ID. It could be a css selector
+    if (!element && iframe_id.length > 0) {
+      var _document$getElementB, _document$getElementB2, _document$getElementB3;
+      element = (_document$getElementB = document.getElementById(iframe_id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.contentWindow) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.document) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.querySelector(selector);
+    }
+    return element;
+  };
+  var getElementByXPath = function getElementByXPath(path) {
+    var index = path.indexOf("svg");
+    if (index !== -1) {
+      path = path.substring(0, index) + "svg:svg";
+    }
+    try {
+      return document.evaluate(path, document, function (prefix) {
+        if (prefix === "svg") {
+          return "http://www.w3.org/2000/svg";
+        } else {
+          return null;
+        }
+      }, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+    } catch (e) {
+      window.ApxorLogger.error("Error finding element in DOM:" + e);
+    }
+    return null;
+  };
+  var generateButtons = function generateButtons() {
+    var buttons_config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var ActionHandler = arguments.length > 1 ? arguments[1] : undefined;
+    var uuid = arguments.length > 2 ? arguments[2] : undefined;
+    var name = arguments.length > 3 ? arguments[3] : undefined;
+    var configType = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "Inline_";
+    var rtmInstance = window.ApxorRTM;
+    var buttons_array = [];
+    var buttons_css = [];
+    buttons_config.forEach(function (button_config, index) {
+      var _button_config$action, _button_config$action2, _button_config$action3, _button_config$action4, _button_config$action5, _button_config$action6, _button_config$action7, _button_config$action8, _button_config$action9, _button_config$action10, _button_config$action11, _button_config$action12;
+      var _action = (_button_config$action = button_config === null || button_config === void 0 ? void 0 : (_button_config$action2 = button_config.action_config) === null || _button_config$action2 === void 0 ? void 0 : _button_config$action2.action) !== null && _button_config$action !== void 0 ? _button_config$action : "end";
+      var vMap = (_button_config$action3 = button_config === null || button_config === void 0 ? void 0 : (_button_config$action4 = button_config.action_config) === null || _button_config$action4 === void 0 ? void 0 : _button_config$action4.vmap) !== null && _button_config$action3 !== void 0 ? _button_config$action3 : {};
+      var url = (_button_config$action5 = button_config === null || button_config === void 0 ? void 0 : (_button_config$action6 = button_config.action_config) === null || _button_config$action6 === void 0 ? void 0 : _button_config$action6.url) !== null && _button_config$action5 !== void 0 ? _button_config$action5 : "";
+      var isExternal = (_button_config$action7 = button_config === null || button_config === void 0 ? void 0 : (_button_config$action8 = button_config.action_config) === null || _button_config$action8 === void 0 ? void 0 : _button_config$action8.is_external) !== null && _button_config$action7 !== void 0 ? _button_config$action7 : true;
+      var redirectWithin = (_button_config$action9 = button_config === null || button_config === void 0 ? void 0 : (_button_config$action10 = button_config.action_config) === null || _button_config$action10 === void 0 ? void 0 : _button_config$action10.is_within) !== null && _button_config$action9 !== void 0 ? _button_config$action9 : false;
+      var callbackFunction = (_button_config$action11 = button_config === null || button_config === void 0 ? void 0 : (_button_config$action12 = button_config.action_config) === null || _button_config$action12 === void 0 ? void 0 : _button_config$action12.callback_func) !== null && _button_config$action11 !== void 0 ? _button_config$action11 : "";
+      var action_config_str = JSON.stringify(button_config === null || button_config === void 0 ? void 0 : button_config.action_config);
+      _action = _action.toLowerCase();
+      var borders = button_config.borders,
+        color = button_config.color,
+        _button_config$text_c = button_config.text_config,
+        text = _button_config$text_c.text,
+        text_color = _button_config$text_c.color,
+        size = _button_config$text_c.size,
+        style = _button_config$text_c.style,
+        font_family = _button_config$text_c.font_family,
+        _button_config$gradie2 = button_config.gradient_config,
+        gradient_config = _button_config$gradie2 === void 0 ? {} : _button_config$gradie2;
+      var action;
+      try {
+        switch (_action) {
+          case "done":
+          case "dismiss":
+            action = function action() {
+              ActionHandler.complete();
+            };
+            break;
+          case "next":
+            action = function action() {
+              ActionHandler.next();
+              window.Apxor.logActionEvent(configType + text + "_Clicked", uuid, name);
+            };
+            break;
+          case "prev":
+            action = function action() {
+              ActionHandler.prev();
+              window.Apxor.logActionEvent(configType + text + "_Clicked", uuid, name);
+            };
+            break;
+          case "redirect":
+            action = function action() {
+              ActionHandler.complete();
+              window.Apxor.redirectTo(uuid, name, text, action_config_str);
+            };
+            break;
+          case "cancel":
+            action = function action() {
+              ActionHandler.cancel();
+            };
+            break;
+          default:
+            action = function action() {
+              ActionHandler.cancel();
+              window.Apxor.logActionEvent(configType + text + "_Clicked", uuid, name);
+            };
+        }
+      } catch (e) {
+        window.ApxorLogger.error("Error setting actions on the buttons:" + e);
+      }
+      buttons_css.push({
+        borders: borders,
+        bg_color: color,
+        text_color: text_color,
+        size: size,
+        style: style,
+        font_family: font_family,
+        gradient_config: gradient_config
+      });
+      buttons_array.push({
+        classes: index === 0 ? "button-o" : "button-t",
+        text: text,
+        action: action
+      });
+    });
+    return {
+      buttons_array: buttons_array,
+      buttons_css: buttons_css
+    };
+  };
+  var getButtonPosition = function getButtonPosition(position) {
+    switch (position) {
+      case "center":
+        return "center";
+      case "left":
+        return "flex-start";
+      case "right":
+        return "flex-end";
+      case "ends":
+        return "space-between";
+      default:
+        return "flex-end";
+    }
+  };
+  var getButtonsCSS = function getButtonsCSS(buttons_css) {
+    var button_position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "right";
+    var button_direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DIRECTION.HORIZONTAL;
+    var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
+    var buttons = "";
+    if (buttons_css.length > 0) {
+      var _buttons_css$ = buttons_css[0],
+        bg_color = _buttons_css$.bg_color,
+        text_color = _buttons_css$.text_color,
+        size = _buttons_css$.size,
+        font_family = _buttons_css$.font_family,
+        _buttons_css$$borders = _buttons_css$.borders,
+        stroke_color = _buttons_css$$borders.stroke_color,
+        radius = _buttons_css$$borders.radius,
+        enable_gradient = _buttons_css$.enable_gradient,
+        _buttons_css$$gradien = _buttons_css$.gradient,
+        gradient = _buttons_css$$gradien === void 0 ? {} : _buttons_css$$gradien;
+      var gradient_direction, gradient_c1, gradient_c2;
+      if (enable_gradient) {
+        gradient_direction = gradient.gradient_direction || "to right";
+        gradient_c1 = gradient.gradient_c1 || COLORS.BLACK;
+        gradient_c2 = gradient.gradient_c2 || COLORS.WHITE;
+      }
+      buttons = "\n    ".concat(prefix, " footer .shepherd-button.button-o {\n      cursor: pointer;\n      background-color: ").concat(bg_color === "#" ? "transparent" : bg_color, ";\n      color: ").concat(text_color, ";font-size: ").concat(size, "px;font-family: ").concat(font_family, ";\n      font-weight: ").concat(font_family !== "bold" ? "normal" : font_family, ";\n      font-style: ").concat(font_family === "italic" ? "italic" : "unset", ";\n      border: 0px solid ").concat(stroke_color, ";border-radius: ").concat(radius, "px;\n      ").concat(enable_gradient ? "background-image:linear-gradient(".concat(gradient_direction, ", ").concat(gradient_c1, ", ").concat(gradient_c2, ");") : "", "\n      margin-right:").concat(bg_color === "#" ? 0 : "12px", "\n    }\n    ");
+    }
+    if (buttons_css.length > 1) {
+      var _buttons_css$2 = buttons_css[1],
+        _bg_color = _buttons_css$2.bg_color,
+        _text_color = _buttons_css$2.text_color,
+        _size = _buttons_css$2.size,
+        _font_family = _buttons_css$2.font_family,
+        _buttons_css$2$border = _buttons_css$2.borders,
+        _stroke_color = _buttons_css$2$border.stroke_color,
+        _radius = _buttons_css$2$border.radius,
+        _buttons_css$2$gradie = _buttons_css$2.gradient_config,
+        gradient_config = _buttons_css$2$gradie === void 0 ? {} : _buttons_css$2$gradie;
+      var _gradient_direction, _gradient_c, _gradient_c2;
+      var _enable_gradient = gradient_config.enable_gradient || false;
+      if (_enable_gradient) {
+        _gradient_direction = gradient_config.gradient_direction || "to right";
+        _gradient_c = (gradient_config === null || gradient_config === void 0 ? void 0 : gradient_config.colors[0]) || COLORS.BLACK;
+        _gradient_c2 = (gradient_config === null || gradient_config === void 0 ? void 0 : gradient_config.colors[1]) || COLORS.WHITE;
+      }
+      buttons += "\n    ".concat(prefix, " footer .shepherd-button.button-t {\n      cursor: pointer;\n      background-color: ").concat(_bg_color === "#" ? "transparent" : _bg_color, ";\n      color: ").concat(_text_color, ";font-size: ").concat(_size, "px;font-family: ").concat(_font_family, ";\n      font-weight: ").concat(_font_family !== "bold" ? "normal" : _font_family, ";\n      font-style: ").concat(_font_family === "italic" ? "italic" : "unset", ";\n      ").concat(_enable_gradient ? "background-image:linear-gradient(".concat(_gradient_direction, ", ").concat(_gradient_c, ", ").concat(_gradient_c2, ");") : "", "\n      border: 0px solid ").concat(_stroke_color, ";border-radius: ").concat(_radius, "px;\n    }\n    ");
+    }
+    return "\n  ".concat(prefix, " footer .shepherd-button {\n    display: inline-block;\n    *display: inline;\n    vertical-align: middle;\n    *vertical-align: auto;\n    *zoom: 1;\n    border: 0;border-radius: 3px;cursor: pointer;display: inline;font-family: inherit;\n    font-size: .8em;letter-spacing: .01em;line-height: 18px;margin-right: 12px;\n    padding: 8px 16px;text-transform: none;transition: all .5s ease\n  }\n  ").concat(buttons, "\n  ").concat(prefix, " footer .shepherd-button:last-child {\n  }\n\n  ").concat(prefix, " footer {\n    border-bottom-left-radius: 5px;\n    border-bottom-right-radius: 5px;\n    display: flex;\n    flex-direction:").concat(button_direction === DIRECTION.HORIZONTAL ? "row" : "column", ";\n\n    align-items:center;\n    justify-content: ").concat(button_direction === DIRECTION.HORIZONTAL ? getButtonPosition(button_position) : "space-evenly", ";\n    padding: 0 .8em .8em;\n  }\n  ");
+  };
+
+  /**
+   * @function createTextElement
+   * @description Creates a text element for the given text config. It could either be a title or a description.
+   * @param {object} config
+   * @param {string} currentId
+   * @param {string} type - Title or Description type
+   * @returns
+   */
+  var createTextElement = function createTextElement(_ref2, currentId) {
+    var _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? "#000" : _ref2$color,
+      _ref2$font_family = _ref2.font_family,
+      font_family = _ref2$font_family === void 0 ? "cursive" : _ref2$font_family,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 14 : _ref2$size,
+      _ref2$style = _ref2.style,
+      style = _ref2$style === void 0 ? "bold" : _ref2$style,
+      text = _ref2.text,
+      segments = _ref2.segments,
+      quote = _ref2.quote,
+      _ref2$link_config = _ref2.link_config,
+      link_config = _ref2$link_config === void 0 ? [] : _ref2$link_config;
+    var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "desc";
+    var fontMultiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    size = size * fontMultiplier;
+    var element = document.createElement("span");
+    element.setAttribute("id", currentId + "-" + type);
+    element.className = "apx-class-".concat(currentId, "-").concat(type);
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = "\n    .apx-class-".concat(currentId, "-").concat(type, " {\n      z-index:99999;\n      color:").concat(color, " !important;\n      font-family:").concat(font_family, " !important;\n      font-size:").concat(size, "px !important;\n      font-weight:").concat(style, " !important;\n      font-style:").concat(style === "normal" || style === "italic" ? style + " !important" : "unset", ";\n      max-width:400px;\n    }\n  ");
+    element.appendChild(styleTag);
+    // If there are any styles to the text through inline edits, apply them.
+    element.appendChild(getStylisedText(text, segments, quote, link_config));
+    return element;
+  };
+
   /* eslint-disable no-unused-vars */
   var ApxorWalkthroughTour;
   var onClickCallback = function onClickCallback(configId, configName) {
@@ -7232,13 +7497,21 @@
           action = ApxorWalkthroughTour.complete;
           break;
         case "next":
-          action = ApxorWalkthroughTour.next;
+          action = function action() {
+            ApxorWalkthroughTour.complete();
+            window.Apxor.logActionEvent("inline_".concat(button_text, "_Clicked"), configId, configName);
+          };
+          break;
+        case "prev":
+          action = function action() {
+            ApxorWalkthroughTour.complete();
+            window.Apxor.logActionEvent("inline_".concat(button_text, "_Clicked"), configId, configName);
+          };
           break;
         case "redirect":
           action = function action() {
+            ApxorWalkthroughTour.complete();
             window.Apxor.redirectTo(configId, configName, button_text, action_config_str);
-            //window.Apxor.logActionEvent("redirection", configId, configName, url);
-            ApxorWalkthroughTour.cancel();
           };
           break;
         default:
@@ -7344,7 +7617,7 @@
       return dummySpan;
     }
     var styleSpan = applyCSS();
-    var targetElement = document.getElementById(view_id);
+    var targetElement = getElementFromSelector(view_id); //document.getElementById(view_id);
     var styleDiv = document.getElementById("apxor-".concat(configId, "-step-").concat(index));
     var clickListener = function clickListener(e) {
       onClickCallback(configId, configName, false, dismiss_target_touch);
@@ -7363,10 +7636,10 @@
       (_document$getElementB = document.getElementById("shepherdModalOverlayContainer")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
       styleSpan === null || styleSpan === void 0 ? void 0 : (_styleSpan$parentNode = styleSpan.parentNode) === null || _styleSpan$parentNode === void 0 ? void 0 : _styleSpan$parentNode.removeChild(styleSpan);
       styleDiv === null || styleDiv === void 0 ? void 0 : (_styleDiv$parentNode = styleDiv.parentNode) === null || _styleDiv$parentNode === void 0 ? void 0 : _styleDiv$parentNode.removeChild(styleDiv);
+      (_window = window) === null || _window === void 0 ? void 0 : (_window$Apxor = _window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.updateFlag(false);
       window.Apxor.logActionEvent("inline_dismissed", configId, configName);
       rtmInstance.isShowingAction = false;
       targetElement.removeEventListener("click", clickListener);
-      (_window = window) === null || _window === void 0 ? void 0 : (_window$Apxor = _window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.updateFlag(false);
     };
     var scrolledToView = false;
 
@@ -7416,7 +7689,8 @@
         hideOnClick: dismiss_outside_touch,
         theme: "apxor-".concat(configId, "-step-").concat(index),
         onShow: function onShow() {
-          window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(true);
+          var _window2, _window2$Apxor;
+          (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Apxor = _window2.Apxor) === null || _window2$Apxor === void 0 ? void 0 : _window2$Apxor.updateFlag(true);
           window.Apxor.logActionEvent("inline_shown", configId, configName);
           window.Apxor.updateCount(configId);
           rtmInstance.isShowingAction = true;
@@ -7538,138 +7812,107 @@
 
   var DEFAULT_PADDING = 5;
   var fontMultiplier = 1;
-  function makeid$1(length) {
-    var result = "";
-    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    var charactersLength = characters.length;
-    for (var i = 0; i < length; i++) {
-      result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-  }
-  var currentId = makeid$1(10);
+  var currentId = makeid(10);
   function getDocumentOffsetPosition(el) {
-    // var position = {
-    //   top: el.offsetTop,
-    //   left: el.offsetLeft,
-    // };
-    // if (el.offsetParent) {
-    //   var parentPosition = getDocumentOffsetPosition(el.offsetParent);
-    //   position.top += parentPosition.top;
-    //   position.left += parentPosition.left;
-    // }
-
-    return el.getBoundingClientRect();
-  }
-  function createTextElement(_ref) {
-    var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "#000" : _ref$color,
-      _ref$font_family = _ref.font_family,
-      font_family = _ref$font_family === void 0 ? "cursive" : _ref$font_family,
-      _ref$margin_config = _ref.margin_config,
-      margin = _ref$margin_config === void 0 ? {} : _ref$margin_config,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 14 : _ref$size,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? "bold" : _ref$style,
-      text = _ref.text;
-    var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "desc";
-    size = size * fontMultiplier;
-    var element = document.createElement("span");
-    element.setAttribute("id", currentId + "-" + key);
-    element.className = "apx-class-".concat(currentId, "-").concat(key);
-    // if (style === "normal" || style === "italic") {
-    //   element.style.fontStyle = style;
-    // }
-    // element.style.zIndex = 99999;
-    // element.style.textAlign = "initial";
-    // element.style.color = color;
-    // element.style.fontFamily = font_family;
-    // element.style.fontSize = size + "px";
-    // element.style.fontWeight = style;
-
-    var styleTag = document.createElement("style");
-    styleTag.innerHTML = "\n    .apx-class-".concat(currentId, "-").concat(key, " {\n      z-index: 99999; \n      text-align: initial; \n      color: ").concat(color, " !important; \n      font-family: ").concat(font_family, " !important; \n      font-size: ").concat(size, "px !important; \n      font-weight: ").concat(style, " !important;\n      font-style: ").concat(style === "normal" || style === "italic" ? style + " !important" : "unset", ";\n    }\n  ");
-    console.log(element, element.style, color, font_family, size, style);
-    if (Object.keys(margin).length > 0) {
-      element.style.margin = "".concat(margin.top, "px ").concat(margin.right, "px ").concat(margin.bottom, "px ").concat(margin.left, "px");
-    }
-    element.appendChild(styleTag);
-    element.innerHTML = element.innerHTML + text;
-    return element;
-  }
-
-  /**
-   * @function createButtons
-   * @private
-   * @description Creates a button and apply actions,styles to button and styles to text inside the button
-   * @returns {object} a button element
-   */
-
-  function createButtons(button, index) {
-    var button_classes = button.button_classes,
-      text = button.text,
-      action = button.action,
-      button_css = button.button_css;
-    var element = document.createElement("button");
-    element.setAttribute("id", currentId + "-" + index);
-    element.className = "apx-".concat(button_classes, "-").concat(currentId, "-").concat(index);
-    element.onclick = function () {
-      return action();
+    var rect = el.getBoundingClientRect();
+
+    // Add window scroll position to get the offset position
+    // relative to the document but not viewport.
+    var left = rect.left + window.scrollX;
+    var top = rect.top + window.scrollY;
+    var right = rect.right + window.scrollX;
+    var bottom = rect.bottom + window.scrollY;
+
+    // polyfill missing 'x' and 'y' rect properties not returned
+    // from getBoundingClientRect() by older browsers
+    var x = isDefined(rect.x) ? rect.x + window.scrollX : left;
+    var y = isDefined(rect.y) ? rect.y + window.scrollY : top;
+
+    // width and height are the same
+    var width = rect.width;
+    var height = rect.height;
+    return {
+      left: left,
+      top: top,
+      right: right,
+      bottom: bottom,
+      x: x,
+      y: y,
+      width: width,
+      height: height
     };
-    var elementStyleTag = document.createElement("style");
-    elementStyleTag.innerHTML = "\n  .apx-".concat(button_classes, "-").concat(currentId, "-").concat(index, " {\n    background-color: ").concat(button_css.color, ";\n    border-radius: ").concat(button_css.borders.radius, "px;\n    margin: ").concat(button_css.margin.top, "px ").concat(button_css.margin.right, "px ").concat(button_css.margin.bottom, "px ").concat(button_css.margin.left, "px;\n    padding: ").concat(button_css.padding.top, "px ").concat(button_css.padding.right, "px ").concat(button_css.padding.bottom, "px ").concat(button_css.padding.left, "px;\n    visibility: ").concat(button_css.visibility, ";\n  }\n  ");
-    element.appendChild(elementStyleTag);
-    var textElement = document.createElement("div");
-    textElement.setAttribute("id", currentId + "- text -" + index);
-    textElement.className = "apx-text-".concat(button_classes, "-").concat(currentId, "-").concat(index);
-    var textElementStyleTag = document.createElement("style");
-    textElementStyleTag.innerHTML = "\n    .apx-text-".concat(button_classes, "-").concat(currentId, "-").concat(index, " {\n      color:").concat(button_css.text_config.color, ";\n      padding:").concat(button_css.text_config.padding_config.top, "px ").concat(button_css.text_config.padding_config.right, "px ").concat(button_css.text_config.padding_config.bottom, "px ").concat(button_css.text_config.padding_config.left, "px;\n       margin:").concat(button_css.text_config.margin_config.top, "px ").concat(button_css.text_config.margin_config.right, "px ").concat(button_css.text_config.margin_config.bottom, "px ").concat(button_css.text_config.margin_config.left, "px;\n       font-family:").concat(button_css.text_config.font_family, ";\n       size:").concat(button_css.text_config.size, ";\n       style=").concat(button_css.text_config.style, "; \n    }\n  ");
-    textElement.appendChild(textElementStyleTag);
-    textElement.innerHTML = textElement.innerHTML + text;
-    element.appendChild(textElement);
-    return element;
   }
-  function createTitleDescriptionButtonElements(text_config) {
+  function createTitleDescriptionButtons(text_config) {
     var title_config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var button_arr = arguments.length > 2 ? arguments[2] : undefined;
+    var buttons_config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var button_position = arguments.length > 3 ? arguments[3] : undefined;
+    var button_direction = arguments.length > 4 ? arguments[4] : undefined;
+    var uuid = arguments.length > 5 ? arguments[5] : undefined;
+    var name = arguments.length > 6 ? arguments[6] : undefined;
+    var on_dismiss = arguments.length > 7 ? arguments[7] : undefined;
     var element = null;
-    var parent_element = document.createElement("div");
     if (!title_config && text_config) {
-      element = createTextElement(text_config);
+      element = createTextElement(text_config, currentId, "title", fontMultiplier);
+      /*element = document.createElement("div");
+      element.style.textAlign = text_config?.alignment || "center";
+      element.appendChild(createTextElement(text_config, currentId));*/
     } else if (title_config && text_config) {
       element = document.createElement("div");
       element.style.display = "inline-flex";
       element.style.flexDirection = "column";
-      element.style.visibility = "initial";
-      element.style.textAlign = "center";
-      element.style.position = "relative";
-      element.appendChild(createTextElement(title_config));
-      element.appendChild(createTextElement(text_config));
-    }
-    parent_element.style.position = "absolute";
-    parent_element.appendChild(element);
-    if (button_arr) {
-      var buttonelement = document.createElement("div");
-      buttonelement.style.zIndex = 999999;
-      buttonelement.style.visibility = 1;
-      buttonelement.style.textAlign = "initial";
-      //buttonelement.style.backgroundColor = button_arr[0].button_css.color;
-      button_arr.forEach(function (button, index) {
-        buttonelement.appendChild(createButtons(button, index));
+      element.style.visibility = "hidden";
+      element.style.textAlign = (text_config === null || text_config === void 0 ? void 0 : text_config.alignment) || "center";
+      element.style.lineHeight = "26px";
+      element.style.letterSpacing = "0.01em";
+      element.appendChild(createTextElement(title_config, currentId, "title", fontMultiplier));
+      element.appendChild(createTextElement(text_config, currentId, "desc", fontMultiplier));
+    }
+    if (buttons_config && buttons_config.length > 0) {
+      var buttons = document.createElement("footer");
+      buttons.className = "shepherd-footer";
+      buttons.style.zIndex = 99999;
+      buttons.style.margin = "8px";
+      buttons.style.padding = "0";
+      var hideCallback = function hideCallback() {
+        if (on_dismiss) on_dismiss();
+      };
+      var _generateButtons = generateButtons(buttons_config, {
+          prev: hideCallback,
+          next: hideCallback,
+          complete: hideCallback,
+          cancel: hideCallback
+        }, uuid, name),
+        buttons_array = _generateButtons.buttons_array,
+        buttons_css = _generateButtons.buttons_css;
+      var buttonsStyle = document.createElement("style");
+      buttonsStyle.innerHTML = getButtonsCSS(buttons_css, button_position, button_direction);
+      buttons.appendChild(buttonsStyle);
+      buttons_array.forEach(function (button_data) {
+        var classes = button_data.classes,
+          text = button_data.text,
+          action = button_data.action;
+        var newButton = document.createElement("button");
+        newButton.className = "shepherd-button " + classes;
+        newButton.innerHTML = text;
+        newButton.onclick = function () {
+          return action();
+        };
+        buttons.appendChild(newButton);
       });
-      //element.appendChild(buttonelement);
-      buttonelement.style.position = "relative";
-      parent_element.appendChild(buttonelement);
+      var template = document.createElement("div");
+      template.style.display = "inline-flex";
+      template.style.flexDirection = "column";
+      template.style.visibility = "hidden";
+      template.appendChild(element);
+      template.appendChild(buttons);
+      element = template;
     }
-
-    // element.style.position = "absolute";
-
-    document.body.appendChild(parent_element);
-    return parent_element;
+    element.style.position = "absolute";
+    document.body.appendChild(element);
+    return element;
   }
   function addRippleStyles(type, width, height) {
-    return "\n  <style>\n    .ripple-animator {\n      position: relative;\n      display: -webkit-box;\n      display: flex;\n      -webkit-box-orient: horizontal;\n      -webkit-box-direction: normal;\n              flex-direction: row;\n      -webkit-box-pack: center;\n              justify-content: center;\n      -webkit-box-align: center;\n              align-items: center;\n      height: ".concat(height, "px !important;\n      width: ").concat(width, "px !important;\n      border-radius: ").concat(type === "circle" ? "100%" : "0", ";\n    }\n    .ripple-animator span {\n      position: relative;\n      font-size: 72px;\n      top: 5px;\n      left: -5px;\n    }\n    \n\n    .ripple-animator:before,\n.ripple-animator:after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0; \n  right: 0; \n  bottom: 0; \n  left: 0;\n  opacity:1;\n  z-index:10;\n  border: 0px solid white;\n  border-radius: ").concat(type === "circle" ? "100%" : "0%", ";\n  z-index: 99999;\n}\n\n    .ripple-animator:before {\n  animation: ripple 1s infinite ease-out;\n    }\n\n   @keyframes ripple{\n  0% { \n    border: 0px solid white;\n    transform: scale(0.8); \n  }\n  100% { \n    border: 20px solid white;\n    transform: scale(1.5); \n    opacity:0; \n  }\n    \n  </style>");
+    return "\n<style>\n.ripple-animator {\n  position: relative;\n  display: -webkit-box;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  flex-direction: row;\n  -webkit-box-pack: center;\n  justify-content: center;\n  -webkit-box-align: center;\n  align-items: center;\n  height: ".concat(height, "px !important;\n  width: ").concat(width, "px !important;\n  border-radius: ").concat(type === "circle" ? "100%" : "0", ";\n}\n.ripple-animator span {\n  position: relative;\n  font-size: 72px;\n  top: 5px;left: -5px;\n}\n\n.ripple-animator:before,\n.ripple-animator:after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0; \n  right: 0; \n  bottom: 0; \n  left: 0;\n  opacity:1;\n  z-index:10;\n  border: 0px solid white;\n  border-radius: ").concat(type === "circle" ? "100%" : "0%", ";\n  z-index: 99999;\n}\n\n.ripple-animator:before {\n  animation: ripple 1s infinite ease-out;\n}\n\n@keyframes ripple{\n  0% { \n    border: 0px solid white;\n    transform: scale(0.8); \n  }\n  100% { \n    border: 20px solid white;\n    transform: scale(1.5); \n    opacity:0; \n  }\n}\n</style>");
   }
   function createInnerCircle(width, height, left, top, type, has_ripple) {
     var newWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
@@ -7737,7 +7980,7 @@
     svgElement.style.top = 0;
     svgElement.style.zIndex = 99998;
     svgElement.style.width = "100%";
-    svgElement.style.height = "100%";
+    svgElement.style.height = "99%";
     var svg = "";
     if (type === "circle") {
       svg = getCircleSVG(data);
@@ -7748,16 +7991,19 @@
     document.body.appendChild(svgElement);
     return svgElement;
   }
-  function showCoachmark(ui_config, messageconfig, termination_config, on_shown, on_dismissed) {
+  function showCoachmark(ui_config, campaignConfig, termination_config, on_shown, on_dismissed) {
     var bg_color = ui_config.bg_color,
+      _ui_config$buttons_co = ui_config.buttons_config,
+      buttons_config = _ui_config$buttons_co === void 0 ? [] : _ui_config$buttons_co,
+      button_position = ui_config.button_position,
+      _ui_config$button_dir = ui_config.button_direction,
+      button_direction = _ui_config$button_dir === void 0 ? DIRECTION.HORIZONTAL : _ui_config$button_dir,
       _ui_config$coach_mark = ui_config.coach_mark_details,
       _ui_config$coach_mark2 = _ui_config$coach_mark.has_ripple,
       has_ripple = _ui_config$coach_mark2 === void 0 ? false : _ui_config$coach_mark2,
       _ui_config$coach_mark3 = _ui_config$coach_mark.type,
       type = _ui_config$coach_mark3 === void 0 ? "circle" : _ui_config$coach_mark3,
       delay = ui_config.delay,
-      _ui_config$buttons_co = ui_config.buttons_config,
-      buttons_config = _ui_config$buttons_co === void 0 ? [] : _ui_config$buttons_co,
       _ui_config$dismiss_ou = ui_config.dismiss_outside_touch,
       dismiss_outside_touch = _ui_config$dismiss_ou === void 0 ? false : _ui_config$dismiss_ou,
       _ui_config$opacity = ui_config.opacity,
@@ -7768,141 +8014,29 @@
       _ui_config$title_conf = ui_config.title_config,
       title_config = _ui_config$title_conf === void 0 ? null : _ui_config$title_conf,
       view_id = ui_config.view_id,
+      _ui_config$iframe_id = ui_config.iframe_id,
+      iframe_id = _ui_config$iframe_id === void 0 ? "" : _ui_config$iframe_id,
       _ui_config$scroll_to_ = ui_config.scroll_to_view,
-      scroll_to_view = _ui_config$scroll_to_ === void 0 ? false : _ui_config$scroll_to_,
-      _ui_config$show_close = ui_config.show_close_icon,
-      _ui_config$set_font_t = ui_config.set_font_to_scale,
-      set_font_to_scale = _ui_config$set_font_t === void 0 ? false : _ui_config$set_font_t;
-    var configId = messageconfig.configId,
-      configName = messageconfig.configName;
-    fontMultiplier = set_font_to_scale ? getFontMultiplier() : 1;
-    fontMultiplier = fontMultiplier > 1 ? fontMultiplier : 1;
-    // Note: There are different possible ways to identify the element.
+      scroll_to_view = _ui_config$scroll_to_ === void 0 ? false : _ui_config$scroll_to_;
+    var configId = campaignConfig.configId,
+      configName = campaignConfig.configName;
 
-    var buttons_array = [];
-    buttons_config.forEach(function (button_config) {
-      var _button_config$action, _button_config$action2;
-      var button_classes,
-        button_text,
-        action,
-        button_css = {};
-      button_text = deepGet(button_config, ["text_config", "text"], null);
-      var _action = deepGet(button_config, ["action_config", "action"], "end");
-      var action_config = (button_config === null || button_config === void 0 ? void 0 : button_config.action_config) || {};
-      var action_config_str = JSON.stringify(action_config);
-      var url = (_button_config$action = button_config === null || button_config === void 0 ? void 0 : (_button_config$action2 = button_config.action_config) === null || _button_config$action2 === void 0 ? void 0 : _button_config$action2.url) !== null && _button_config$action !== void 0 ? _button_config$action : "";
-      var hideCallback = function hideCallback() {
-        if (will_dismiss) will_dismiss();
-      };
-      var ActionHandler = {
-        next: hideCallback,
-        complete: hideCallback,
-        cancel: hideCallback
-      };
-      switch (_action) {
-        case "done":
-        case "dismiss":
-          action = function action() {
-            ActionHandler.complete(false, "dismiss");
-          };
-          break;
-        case "next":
-          action = function action() {
-            ActionHandler.complete(false, "dismiss");
-          };
-          break;
-        case "prev":
-          action = function action() {
-            ActionHandler.complete(false, "prev");
-          };
-          break;
-        case "redirect":
-          action = function action() {
-            window.Apxor.redirectTo(configId, configName, button_text, action_config_str);
-            //window.Apxor.logActionEvent("redirection", configId, configName, url);
-            ActionHandler.next(false, "redirect");
-          };
-          break;
-        case "cancel":
-          action = function action() {
-            ActionHandler._isCancelled = true;
-            ActionHandler.cancel(true, "cancel");
-          };
-          break;
-        default:
-          action = function action() {
-            ActionHandler.cancel(false, "cancel");
-          };
-      }
-      button_classes = "shepherd-button";
-      button_classes += button_config.id === "okButton" ? "-secondary" : "";
-      button_css = {
-        borders: button_config.borders,
-        color: button_config.color,
-        margin: button_config.margin_config,
-        padding: button_config.padding_config,
-        text_config: button_config.text_config,
-        visibility: button_config.visibility
-      };
-      buttons_array.push({
-        classes: button_classes,
-        text: button_text,
-        action: action,
-        button_css: button_css
-      });
-    });
-    var textContentCSS = {
-      color: text_config.color,
-      fontSize: text_config.size * fontMultiplier,
-      fontFamily: text_config.font_family,
-      fontStyle: text_config.style
-    };
-    if (text_config.margin_config && Object.keys(text_config.margin_config).length > 0) {
-      var margin = text_config.margin_config;
-      textContentCSS.margin = "".concat(margin.top, "px ").concat(margin.right, "px ").concat(margin.bottom, "px ").concat(margin.left, "px");
-    }
-    var style = text_config.style;
-    if (style === "bold") {
-      textContentCSS.fontWeight = style;
-    }
-    var titleContentCSS = {
-      color: title_config.color,
-      fontSize: title_config.size * fontMultiplier,
-      fontFamily: title_config.font_family,
-      fontStyle: title_config.style
-    };
-    if (title_config.margin_config && Object.keys(title_config.margin_config).length > 0) {
-      var _margin = title_config.margin_config;
-      titleContentCSS.margin = "".concat(_margin.top, "px ").concat(_margin.right, "px ").concat(_margin.bottom, "px ").concat(_margin.left, "px");
-    }
-    style = title_config.style;
-    if (style === "bold") {
-      textContentCSS.fontWeight = style;
-    }
-    var element = document.getElementById(view_id);
-    if (!element) {
-      console.warn("Element not found with id: ", view_id);
-      return;
-    }
-    currentId = makeid$1(10);
-    var rect = getDocumentOffsetPosition(element);
-    var _rect$left = rect.left,
-      targetElementLeft = _rect$left === void 0 ? 0 : _rect$left,
-      _rect$top = rect.top,
-      targetElementTop = _rect$top === void 0 ? 0 : _rect$top,
-      _rect$width = rect.width,
-      targetElementWidth = _rect$width === void 0 ? 0 : _rect$width,
-      _rect$height = rect.height,
-      targetElementHeight = _rect$height === void 0 ? 0 : _rect$height;
-    if (!scroll_to_view && rect.top >= window.innerHeight) {
-      console.warn("Element ", view_id, " not in viewport. Can't show");
-      return;
-    }
-    var scrolledToView = false;
-    // Add MutationObserver to the target element
-    var targetDeletionObserver = new MutationObserver(function () {
-      if (!document.body.contains(element)) {
-        will_dismiss();
+    // TODO: There are different possible ways to identify the element.
+    var element = getElementFromSelector(view_id, iframe_id);
+    if (!element) {
+      console.warn("Element not found with id or path: ", view_id);
+      return;
+    }
+    currentId = makeid(10);
+    if (!scroll_to_view && !isElementInViewport(element)) {
+      console.warn("Element ", view_id, " not in viewport. Can't show");
+      return;
+    }
+    var scrolledToView = false;
+    // Add MutationObserver to the target element
+    var targetDeletionObserver = new MutationObserver(function () {
+      if (!document.body.contains(element)) {
+        will_dismiss();
       }
     });
     var viewPortObservor = new IntersectionObserver(function () {
@@ -7914,13 +8048,31 @@
         scrolledToView = true;
       }
     });
-    console.log(rect);
+    var rect = getDocumentOffsetPosition(element);
+    var _rect$left = rect.left,
+      targetElementLeft = _rect$left === void 0 ? 0 : _rect$left,
+      _rect$top = rect.top,
+      targetElementTop = _rect$top === void 0 ? 0 : _rect$top,
+      _rect$width = rect.width,
+      targetElementWidth = _rect$width === void 0 ? 0 : _rect$width,
+      _rect$height = rect.height,
+      targetElementHeight = _rect$height === void 0 ? 0 : _rect$height;
     var isFirstHalf = rect.left < window.innerWidth / 2;
     if (targetElementHeight === 0 || targetElementWidth === 0) {
       console.warn("Can't show on an invisible element: ", view_id);
       return;
     }
-    var textElement = createTitleDescriptionButtonElements(text_config, title_config, buttons_array);
+    var will_dismiss = function will_dismiss() {
+      // Detach the observer
+      targetDeletionObserver.disconnect();
+      viewPortObservor.disconnect();
+      svgElement.parentNode.removeChild(svgElement);
+      textElement.parentNode.removeChild(textElement);
+      transparentCircle.parentNode.removeChild(transparentCircle);
+      if (on_dismissed) on_dismissed();
+      if (autoDismissCallback) clearTimeout(autoDismissCallback);
+    };
+    var textElement = createTitleDescriptionButtons(text_config, title_config, buttons_config, button_position, button_direction, configId, configName, will_dismiss);
     var textElemOffsetWidth = textElement.offsetWidth;
     var textElemOffsetHeight = textElement.offsetHeight;
     var marginLeft = 0;
@@ -7954,6 +8106,8 @@
         outerCircleCenterY = innerCircleBottom - Math.abs(innerCircleBottom - textElementOffsetTop) / 2;
         break;
       case "BOTTOM":
+      case "RIGHT":
+      case "LEFT":
         left = innerCenterX - textElemOffsetWidth / 2;
         textElementOffsetLeft = left < 0 ? DEFAULT_PADDING : left;
         if (type === "circle") {
@@ -7963,9 +8117,8 @@
         }
         outerCircleCenterY = innerCircleTop + (textElementOffsetTop + textElemOffsetHeight - innerCircleTop) / 2;
         break;
-      case "LEFT":
-        break;
-      case "RIGHT":
+      default:
+        // We won't support LEFT and RIGHT positions
         break;
     }
     if (textElementOffsetLeft === -1 || textElementOffsetTop === -1 || outerCircleCenterY === -1) {
@@ -8012,29 +8165,24 @@
     textElement.style.visibility = "hidden";
     var autoDismissCallback = null;
     var dismissCallback = function dismissCallback(e) {
-      var isUserHitTarget = !e;
+      var isUserHitTarget = false;
+      var autoDismiss = false;
+      if (e === undefined) {
+        autoDismiss = true;
+      }
       var rect = element.getBoundingClientRect();
-      if (e && e.clientX >= rect.left && e.clientX <= rect.left + rect.width && e.clientY >= rect.top && e.clientY <= rect.top + rect.height) {
+      if (e !== undefined && e.clientX >= rect.left && e.clientX <= rect.left + rect.width && e.clientY >= rect.top && e.clientY <= rect.top + rect.height) {
         isUserHitTarget = true;
       }
-      console.warn("Dismiss:", e, isUserHitTarget, dismiss_outside_touch, e.clientX >= rect.left, e.clientX <= rect.left + rect.width, e.clientY >= rect.top, e.clientY <= rect.top + rect.height, e.clientX, e.clientY, rect.left, rect.top, rect.width, rect.height);
-      // if (!dismiss_outside_touch && e && e.preventDefault) {
-      //   e.preventDefault();
-      // }
-      if (dismiss_outside_touch || isUserHitTarget) {
+      if (dismiss_outside_touch || isUserHitTarget || autoDismiss) {
         will_dismiss();
+        // FIXME: Uncomment it, whenever you are confident!!
+        // if (isUserHitTarget && element.click) {
+        //   element.click();
+        // }
       }
     };
-    var will_dismiss = function will_dismiss() {
-      // Detach the observer
-      targetDeletionObserver.disconnect();
-      viewPortObservor.disconnect();
-      svgElement.parentNode.removeChild(svgElement);
-      textElement.parentNode.removeChild(textElement);
-      transparentCircle.parentNode.removeChild(transparentCircle);
-      if (on_dismissed) on_dismissed();
-      if (autoDismissCallback) clearTimeout(autoDismissCallback);
-    };
+
     if (termination_config && termination_config.auto_dismiss === true) {
       autoDismissCallback = setTimeout(function () {
         return dismissCallback();
@@ -8043,6 +8191,9 @@
     svgElement.style.visibility = "visible";
     transparentCircle.style.visibility = "visible";
     textElement.style.visibility = "visible";
+    if (textElement.childElementCount > 0) {
+      textElement.children[0].style.visibility = "visible";
+    }
     if (dismiss_outside_touch) {
       svgElement.addEventListener("click", dismissCallback);
     }
@@ -8091,39 +8242,27 @@
   }
 
   /**
-   * @constructor CloseButton
+   * @constructor Border
    * @example
-   * Example of a close button model is
+   * Example of a border model is
    *
-   * close_button: {
-   *  color: "#172B4D",
-   *  fill_color: "#FFFFFF",
-   *  type: "normal/filled/custom",
-   *  path: "<assets-path>",
-   *  offset_top: 8,
-   *  offset_right: 8,
-   *  height: 20,
-   *  width: 20,
-   *  action: "cancel/dismiss",
-   *  shape: "rectangle/circle"
+   * border: {
+   *  radius : 50,
+   *  color : "#FFFFFF",
+   *  width : 2,
+   *  style : "dotted"
    * }
    */
-  var CloseButton = /*#__PURE__*/function () {
-    function CloseButton() {
+  var Border = /*#__PURE__*/function () {
+    function Border() {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _classCallCheck(this, CloseButton);
+      _classCallCheck(this, Border);
+      this.radius = getNumberOrDefault(data.radius, 0);
       this.color = getColorOrDefault(data.color, "#FFFFFF");
-      this.fill_color = getColorOrDefault(data.fill_color, "#FFFFFF");
-      this.type = getStringOrDefault(data.type, "normal");
-      this.path = data.path;
-      this.offset_top = getNumberOrDefault(data.offset_top, 8);
-      this.offset_right = getNumberOrDefault(data.offset_right, 8);
-      this.height = getNumberOrDefault(data.height, 24);
-      this.width = getNumberOrDefault(data.width, 24);
-      this.action = getStringOrDefault(data.action, "dismiss");
-      this.shape = getStringOrDefault(data.shape, "circle");
+      this.width = getNumberOrDefault(data.width, 0);
+      this.style = getStringOrDefault(data.style, "solid");
     }
-    _createClass(CloseButton, null, [{
+    _createClass(Border, null, [{
       key: "isEnabled",
       value: function isEnabled(data) {
         if (isUndefined$1(data) || isNull(data) || isEmptyObject(data)) {
@@ -8133,31 +8272,31 @@
         }
       }
     }]);
-    return CloseButton;
+    return Border;
   }();
 
   /**
-   * @constructor Padding
+   * @constructor Margin
    * @example
-   * Example of a Padding model is
+   * Example of a margin model is
    *
-   * padding: {
+   * margin: {
    *  top : 10,
    *  bottom : 10,
    *  left : 12,
    *  right : 12
    * }
    */
-  var Padding = /*#__PURE__*/function () {
-    function Padding() {
+  var Margin = /*#__PURE__*/function () {
+    function Margin() {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _classCallCheck(this, Padding);
+      _classCallCheck(this, Margin);
       this.top = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.top, 8);
       this.bottom = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.bottom, 8);
       this.left = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.left, 8);
       this.right = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.right, 8);
     }
-    _createClass(Padding, null, [{
+    _createClass(Margin, null, [{
       key: "isEnabled",
       value: function isEnabled(data) {
         if (isUndefined$1(data) || isNull(data) || isEmptyObject(data)) {
@@ -8167,31 +8306,31 @@
         }
       }
     }]);
-    return Padding;
+    return Margin;
   }();
 
   /**
-   * @constructor Margin
+   * @constructor Padding
    * @example
-   * Example of a margin model is
+   * Example of a Padding model is
    *
-   * margin: {
+   * padding: {
    *  top : 10,
    *  bottom : 10,
    *  left : 12,
    *  right : 12
    * }
    */
-  var Margin = /*#__PURE__*/function () {
-    function Margin() {
+  var Padding = /*#__PURE__*/function () {
+    function Padding() {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _classCallCheck(this, Margin);
+      _classCallCheck(this, Padding);
       this.top = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.top, 8);
       this.bottom = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.bottom, 8);
       this.left = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.left, 8);
       this.right = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.right, 8);
     }
-    _createClass(Margin, null, [{
+    _createClass(Padding, null, [{
       key: "isEnabled",
       value: function isEnabled(data) {
         if (isUndefined$1(data) || isNull(data) || isEmptyObject(data)) {
@@ -8201,31 +8340,96 @@
         }
       }
     }]);
-    return Margin;
+    return Padding;
   }();
 
   /**
-   * @constructor Border
+   * @constructor Offset
    * @example
-   * Example of a border model is
+   * Example of a Offset model is
    *
-   * border: {
-   *  radius : 50,
-   *  color : "#FFFFFF",
-   *  width : 2,
-   *  style : "dotted"
+   * offset: {
+   *    skid : 10,
+   *    distance : 10,
    * }
    */
-  var Border = /*#__PURE__*/function () {
-    function Border() {
+  var Offset = /*#__PURE__*/_createClass(function Offset() {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, Offset);
+    this.skid = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.skid, 0);
+    this.distance = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.distance, 0);
+  });
+
+  /**
+   * @constructor Position
+   * @example
+   * Example of a Position model is
+   *
+   * position: {
+   *  position : "top-left",
+   *  offset: {
+   *    skid : 10,
+   *    distance : 10,
+   *    top: 0,
+   *    bottom : 0,
+   *    left: 0,
+   *    right : 0
+   *  }
+   * }
+   */
+  var Position = /*#__PURE__*/_createClass(function Position() {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, Position);
+    this.position = getStringOrDefault(data === null || data === void 0 ? void 0 : data.position, "top-left").toLowerCase();
+    this.enable_offset = data.enable_offset;
+    this.offset = new Offset(data.offset);
+  });
+
+  /**
+   * @constructor CloseButton
+   * @example
+   * Example of a close button model is
+   *
+   * close_button: {
+   *  color: "#172B4D",
+   *  fill_color: "#FFFFFF",
+   *  type: "normal/filled/custom",
+   *  path: "<assets-path>",
+   *  offset_top: 8,
+   *  offset_right: 8,
+   *  height: 20,
+   *  width: 20,
+   *  action: "cancel/dismiss",
+   *  shape: "rectangle/circle"
+   * }
+   */
+  var CloseButton = /*#__PURE__*/function () {
+    function CloseButton() {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _classCallCheck(this, Border);
-      this.radius = getNumberOrDefault(data.radius, 0);
+      _classCallCheck(this, CloseButton);
       this.color = getColorOrDefault(data.color, "#FFFFFF");
-      this.width = getNumberOrDefault(data.width, 0);
-      this.style = getStringOrDefault(data.style, "solid");
+      this.fill_color = getColorOrDefault(data.fill_color, "#FFFFFF");
+      this.type = getStringOrDefault(data.type, "normal");
+      this.path = data.path;
+      this.height = getNumberOrDefault(data.height, 24);
+      this.width = getNumberOrDefault(data.width, 24);
+      this.offset_top = getNumberOrDefault(data.offset_top, 8);
+      this.offset_right = getNumberOrDefault(data.offset_right, 8);
+      this.action = getStringOrDefault(data.action, "dismiss");
+      this.shape = getStringOrDefault(data.shape, "circle");
+
+      //surveys
+      if (data !== null && data !== void 0 && data.position) {
+        this.position = new Position(data.position);
+      }
+      this.enable_margin = data.enable_margin;
+      if (this.enable_margin) this.margin = new Margin(data.margin);
+      this.enable_padding = data.enable_padding;
+      if (this.enable_padding) this.padding = new Padding(data.padding);
+      this.enable_border = data.enable_border;
+      if (this.enable_border) this.border = new Border(data.border);
     }
-    _createClass(Border, null, [{
+    _createClass(CloseButton, null, [{
       key: "isEnabled",
       value: function isEnabled(data) {
         if (isUndefined$1(data) || isNull(data) || isEmptyObject(data)) {
@@ -8235,7 +8439,7 @@
         }
       }
     }]);
-    return Border;
+    return CloseButton;
   }();
 
   /**
@@ -8471,48 +8675,6 @@
     return Video;
   }();
 
-  /**
-   * @constructor Offset
-   * @example
-   * Example of a Offset model is
-   *
-   * offset: {
-   *    skid : 10,
-   *    distance : 10,
-   * }
-   */
-  var Offset = /*#__PURE__*/_createClass(function Offset() {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _classCallCheck(this, Offset);
-    this.skid = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.skid, 0);
-    this.distance = getNumberOrDefault(data === null || data === void 0 ? void 0 : data.distance, 0);
-  });
-
-  /**
-   * @constructor Position
-   * @example
-   * Example of a Position model is
-   *
-   * position: {
-   *  position : "top-left",
-   *  offset: {
-   *    skid : 10,
-   *    distance : 10,
-   *    top: 0,
-   *    bottom : 0,
-   *    left: 0,
-   *    right : 0
-   *  }
-   * }
-   */
-  var Position = /*#__PURE__*/_createClass(function Position() {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _classCallCheck(this, Position);
-    this.position = getStringOrDefault(data === null || data === void 0 ? void 0 : data.position, "top-left").toLowerCase();
-    this.enable_offset = data.enable_offset;
-    this.offset = new Offset(data.offset);
-  });
-
   /**
    * @constructor DimBackground
    * @example
@@ -9504,7 +9666,7 @@
        * @description Creates the styles for Marketing message.
        * @returns {string} css styles
        */
-      _defineProperty(this, "Hvlt", function () {
+      _defineProperty(this, "hNbt", function () {
         if (!_this.enable_marketing) {
           return "";
         }
@@ -9523,7 +9685,7 @@
        * @private
        * @description Get the response for Form content in the InApp modal.
        */
-      _defineProperty(this, "fKwP", function (form_elements) {
+      _defineProperty(this, "PXZN", function (form_elements) {
         var obj = {};
         var callback = "";
         form_elements.forEach(function (element) {
@@ -9565,7 +9727,7 @@
        * @private
        * @description Sets the marketing content at the end of the InApp
        */
-      _defineProperty(this, "sYVJ", function () {
+      _defineProperty(this, "EcYl", function () {
         if (_this.enable_marketing) {
           var marketingContainer = document.createElement("div");
           marketingContainer.classList.add("apx-inapp-marketing".concat(_this.cssPostFix));
@@ -9783,7 +9945,7 @@
     }, {
       key: "_setStyles",
       value: function _setStyles() {
-        var styles = " \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.Hvlt(), " \n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
+        var styles = " \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.hNbt(), " \n      ").concat(this._getProgressBarStyles(), "\n      ").concat(this._getBootstrapiconsStyles(), " \n    ").replaceAll("\n", "").replace(/[\s]{2,999}/g, "");
         var styleNode = document.createElement("style");
         styleNode.innerHTML = styles;
         this.overlayElement.appendChild(styleNode);
@@ -9900,8 +10062,9 @@
       key: "_getScrollStyles",
       value: function _getScrollStyles() {
         var scrollStyles = "";
+        var borderStyles = this.enable_scroll && this.scroll.enable_border ? "\n  border-top: ".concat(this.scroll.border.width, "px ").concat(this.scroll.border.style, " ").concat(this.scroll.border.color, ";\n  border-bottom : ").concat(this.scroll.border.width, "px ").concat(this.scroll.border.style, " ").concat(this.scroll.border.color, ";\n  ") : "";
         if (this.enable_scroll) {
-          scrollStyles = "\n      .apx-inapp-scroll".concat(this.cssPostFix, " {\n        overflow:scroll; \n        overflow-x: hidden;\n        height:").concat(this.scroll.height, "px;\n        border-top: ").concat(this.scroll.border.width, "px ").concat(this.scroll.border.style, " ").concat(this.scroll.border.color, ";\n        border-bottom : ").concat(this.scroll.border.width, "px ").concat(this.scroll.border.style, " ").concat(this.scroll.border.color, ";\n      }\n    ");
+          scrollStyles = "\n      .apx-inapp-scroll".concat(this.cssPostFix, " {\n        overflow:scroll; \n        overflow-x: hidden;\n        height:").concat(this.scroll.height, "px;\n        ").concat(borderStyles, "\n      }\n    ");
         } else {
           scrollStyles = "\n      .apx-inapp-scroll".concat(this.cssPostFix, " {\n        overflow : hidden;\n      }\n    ");
         }
@@ -10151,7 +10314,7 @@
       function _getProgressBarStyles() {
         var progressBarStyles = "";
         if (this.has_progress_bar) {
-          progressBarStyles = "\n      .apx-inapp-progress-bar".concat(this.cssPostFix, "{\n        position: absolute;\n        width:100%;\n        height:").concat(this.progressbar.width, "px;\n        ").concat(this.progressbar.position === "top" ? "top:0px;" : "bottom:0px;", "\n        left:0px;\n        z-index:999999;\n        overflow:hidden;\n        cursor: pointer;\n        background:").concat(this.progressbar.reamining_color, ";\n      }\n      .apx-inapp-bar").concat(this.cssPostFix, "{\n        width:100%;\n        height:100%;\n        background:").concat(this.progressbar.progress_color, ";\n      }");
+          progressBarStyles = "\n      .apx-inapp-progress-bar".concat(this.cssPostFix, "{\n        position: absolute;\n        width:100%;\n        height:").concat(this.progressbar.width, ";\n        ").concat(this.progressbar.position === "top" ? "top:0px;" : "bottom:0px;", "\n        left:0px;\n        z-index:999999;\n        overflow:hidden;\n        cursor: pointer;\n        background:").concat(this.progressbar.reamining_color, ";\n      }\n      .apx-inapp-bar").concat(this.cssPostFix, "{\n        width:100%;\n        height:100%;\n        background:").concat(this.progressbar.progress_color, ";\n      }");
         }
         return progressBarStyles;
       }
@@ -10225,7 +10388,7 @@
         this._setCloseButton();
 
         //Set the Marketing content
-        this.sYVJ();
+        this.EcYl();
       }
 
       /**
@@ -10418,7 +10581,7 @@
           var form = document.querySelector(".apx-inapp-form-container".concat(this.cssPostFix));
           form.addEventListener("submit", function (e) {
             e.preventDefault();
-            var _this3$generateRespon = _this3.fKwP(_this3.form.elements),
+            var _this3$generateRespon = _this3.PXZN(_this3.form.elements),
               obj = _this3$generateRespon.obj,
               callback = _this3$generateRespon.callback;
             var evalString = "(obj)=>" + callback + "(obj)";
@@ -10645,7 +10808,6 @@
    *  height: 20,
    *  width: 20,
    *  action: "cancel/dismiss",
-   *  shape: "rectangle/circle"
    * }
    */
   var PIPButton = /*#__PURE__*/function () {
@@ -10661,7 +10823,6 @@
       this.height = getNumberOrDefault(data.height, 24);
       this.width = getNumberOrDefault(data.width, 24);
       this.action = getStringOrDefault(data.action, "dismiss");
-      this.shape = getStringOrDefault(data.shape, "circle");
     }
     _createClass(PIPButton, null, [{
       key: "isEnabled",
@@ -10713,14 +10874,14 @@
      * @param {function} showCallback
      * @param {function} hideCallback
      */
-    function VideoInApp(config, configId, name, showCallback, _hideCallback) {
+    function VideoInApp(config, terminationConfig, configId, name, showCallback, _hideCallback) {
       var _this = this;
       _classCallCheck(this, VideoInApp);
       /**
        * @function showVideoInApp
        * @description Shows the video InApp with the configured mode.
        */
-      _defineProperty(this, "YZTN", function () {
+      _defineProperty(this, "gnAu", function () {
         _this.createPlayer();
         try {
           // In PIP mode, only after the video metadata is loaded, show the PIP.
@@ -10729,18 +10890,25 @@
             var hideCallback = _this.hideCallback;
             video.onloadedmetadata = function () {
               video.disablePictureInPicture = false;
-              video.requestPictureInPicture()["catch"](function (error) {
+              video.requestPictureInPicture().then(function () {
+                video.play();
+              })["catch"](function (error) {
                 Logger.error("Can't show PIP:".concat(error));
                 hideCallback();
               });
             };
           } else {
             // As the video player is hidden by default, unhide if the mode is not PIP.
-            _this.subX();
+            _this.qaRp();
           }
           _this.showCallback();
         } catch (e) {
           Logger.error("Can't show video:".concat(e));
+          window.Apxor.logAppEvent("apx_video_inapp_failed", {
+            campaignName: _this.name,
+            id: _this.configId,
+            failureReason: e
+          });
           _this.hideCallback();
         }
       });
@@ -10751,7 +10919,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, "yNbM", function () {
+      _defineProperty(this, "Spyd", function () {
         var _getHeightWidthFromRe = getHeightWidthFromResolution(_this.video),
           width = _getHeightWidthFromRe.width,
           height = _getHeightWidthFromRe.height;
@@ -10763,7 +10931,7 @@
        * @private
        * @description Removes the video player style element.
        */
-      _defineProperty(this, "erWH", function () {
+      _defineProperty(this, "uxBO", function () {
         var playerStyles = document.getElementById("apx-mpl-styles");
         if (playerStyles) {
           playerStyles.remove();
@@ -10774,52 +10942,146 @@
        * @private
        * @description Attach listeners on the video controls
        */
-      _defineProperty(this, "Xrri", function () {
+      _defineProperty(this, "LjmO", 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");
           if (ctaButtons) {
             ctaButtons.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
           }
+          if (!document.fullscreenElement) {
+            _this.totalDurationMinimised += Math.round(_this.videoElement.duration) - Math.round(_this.slotStartTime);
+            _this.durationMinimisedSlots.push("".concat(Math.round(_this.videoElement.duration), "-").concat(Math.round(_this.slotStartTime)));
+          } else {
+            _this.totalDurationMaximised += Math.round(_this.videoElement.duration) - Math.round(_this.slotStartTime);
+            _this.durationMaximisedSlots.push("".concat(Math.round(_this.videoElement.duration), "-").concat(Math.round(_this.slotStartTime)));
+          }
         });
 
         // Listener for the play button. After the video ended, CTA buttons are shown.
         // If the play button is clicked again, the CTA buttons should be removed.
         _this.videoElement.addEventListener("play", function () {
+          if (!_this.inAppShown) {
+            // Initialize the fields to keep the track of aditional info required for logging events.
+            _this.minimisedCount = 0;
+            _this.maximisedCount = 0;
+            _this.totalDurationMinimised = 0;
+            _this.totalDurationMaximised = 0;
+            _this.durationMinimisedSlots = [];
+            _this.durationMaximisedSlots = [];
+            _this.volumeClickedCount = 0;
+            _this.slotStartTime = 0; // to tract the start time of the minimize and maximize time slot.
+            _this.slotStartTimeVolumeChange = 0; // to track the start time of the volume change time slot.
+
+            window.Apxor.logAppEvent("inapp_shown", {
+              message_name: _this.name,
+              visibleScreen: location.pathname,
+              inappType: "PIP Inapp",
+              autoReplay: _this.videoElement.loop ? "On" : "Off",
+              defaultSound: _this.videoElement.muted ? "Mute" : "Unmute",
+              id: _this.configId,
+              videoDuration: Math.round(_this.videoElement.duration),
+              videoResolution: "".concat(_this.videoElement.videoWidth, "x").concat(_this.videoElement.videoHeight),
+              videoConfiguration: "Streaming"
+            });
+            _this.inAppShown = true;
+          }
+          if (_this.videoElement.currentTime === 0 || _this.videoElement.currentTime === _this.videoElement.duration) {
+            _this.replayCount++;
+            _this.slotStartTime = 0; // to tract the start time of the minimize and maximize time slot.
+            _this.slotStartTimeVolumeChange = 0; // to track the start time of the volume change time slot.
+          }
+
           var ctaButtons = document.getElementById("apx-cta-btn");
           if (ctaButtons) {
             ctaButtons.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
           }
         });
+        _this.videoElement.addEventListener("fullscreenchange", function () {
+          _this.slotEndTime = _this.videoElement.currentTime;
+          if (document.fullscreenElement) {
+            _this.maximisedCount++;
+            _this.durationMinimised = Math.round(_this.slotEndTime) - Math.round(_this.slotStartTime);
+            _this.totalDurationMinimised += _this.durationMinimised;
+            _this.durationMinimisedSlots.push("".concat(Math.round(_this.slotStartTime), "-").concat(Math.round(_this.slotEndTime)));
+            window.Apxor.logAppEvent("apx_video_inapp_maximised", {
+              message_name: _this.name,
+              durationMinimised: _this.durationMinimised,
+              durationSlotMinimised: "".concat(Math.round(_this.slotStartTime), "-").concat(Math.round(_this.slotEndTime)),
+              id: _this.configId,
+              totalDurationWatched: Math.round(_this.totalDurationMinimised),
+              totalDurationWatchedSlot: _this.durationMinimisedSlots,
+              maximisedCount: _this.maximisedCount
+            });
+          } else {
+            _this.minimisedCount++;
+            _this.durationMaximised = Math.round(_this.slotEndTime) - Math.round(_this.slotStartTime);
+            _this.totalDurationMaximised += _this.durationMaximised;
+            _this.durationMaximisedSlots.push("".concat(Math.round(_this.slotStartTime), "-").concat(Math.round(_this.slotEndTime)));
+            window.Apxor.logAppEvent("apx_video_inapp_minimised", {
+              message_name: _this.name,
+              durationMaximised: _this.durationMaximised,
+              durationSlotMaximised: "".concat(Math.round(_this.slotStartTime), "-").concat(Math.round(_this.slotEndTime)),
+              id: _this.configId,
+              totalDurationWatched: Math.round(_this.totalDurationMaximised),
+              totalDurationWatchedSlot: _this.durationMaximisedSlots,
+              minimisedCount: _this.minimisedCount
+            });
+          }
+          _this.slotStartTime = _this.videoElement.currentTime;
+        });
+        if (!isNaN(_this.slotStartTimeVolumeChange)) {
+          _this.videoElement.addEventListener("volumechange", function () {
+            _this.volumeClickedCount++;
+            window.Apxor.logAppEvent("apx_video_inapp_volume_button_clicked", {
+              message_name: _this.name,
+              id: _this.configId,
+              actionPerformed: _this.videoElement.muted ? "mute" : "unmute",
+              totalDurationWatchedSlot: "".concat(Math.round(_this.slotStartTimeVolumeChange), "-").concat(Math.round(_this.videoElement.currentTime)),
+              totalDurationWatched: Math.round(_this.videoElement.currentTime) - Math.round(_this.slotStartTimeVolumeChange)
+            });
+            _this.slotStartTimeVolumeChange = _this.videoElement.currentTime;
+          });
+        }
       });
       /**
        * @function _setPIPtoggleListeners
        * @private
        * @description Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
        */
-      _defineProperty(this, "ShAr", function () {
-        // Enable the PIP toggle listeners only if the config says so.
-        if (_this.enable_pip_button && _this.pip.enable_toggles) {
+      _defineProperty(this, "mMkN", 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,
-          // In PIP mode - Remove the PIP and alos remove the video player from DOM
-          // In Video Player mode(Note that PIP can be opened from video player) - Show the video player. It means that PIP merges to the video player.
-          var onExitPip = function onExitPip() {
-            _this.videoElement.disablePictureInPicture = true;
-            if (_this.mode === "PIP") {
-              _this.hideCallback();
-              _this.videoPlayer.remove();
+          // In PIP mode - Remove the PIP and also remove the video player from DOM
+          _this.videoElement.addEventListener("leavepictureinpicture", function () {
+            _this._onClose("web_pip_x_icon_clicked");
+          }, false);
+        } else if (_this.mode === "mini") {
+          if (_this.enable_pip_button) {
+            // On Enter of the PIP,
+            // Hide the video player. It is not a good idea to show both video player and PIP at the same time.
+            var onEnterPip = function onEnterPip() {
+              _this.videoPlayer.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
+            };
+            _this.videoElement.addEventListener("enterpictureinpicture", onEnterPip, false);
+            // Enable the PIP toggle listeners only if the config says so.
+            if (_this.pip.enable_toggles) {
+              // On Exit of the PIP,
+              // In Video Player mode(Note that PIP can be opened from video player) - Show the video player. It means that PIP merges to the video player.
+              var onExitPip = function onExitPip() {
+                _this.videoElement.disablePictureInPicture = true;
+                _this.videoPlayer.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
+              };
+              _this.videoElement.addEventListener("leavepictureinpicture", onExitPip, false);
             } else {
-              _this.videoPlayer.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
+              // on Exit of the PIP,
+              // when enable_toggles are off then, perform cleanup activities(remove the video player, remove styles and set the correct rtm status.) and log events.
+              _this.videoElement.addEventListener("leavepictureinpicture", function () {
+                _this._onClose("web_pip_x_icon_clicked");
+              }, false);
             }
-          };
-          _this.videoElement.addEventListener("leavepictureinpicture", onExitPip, false);
-
-          // On Exit of the PIP,
-          // Hide the video player. It is not a good idea to show both video player and PIP at the same time.
-          var onEnterPip = function onEnterPip() {
-            _this.videoPlayer.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
-          };
-          _this.videoElement.addEventListener("enterpictureinpicture", onEnterPip, false);
+          }
         }
       });
       /**
@@ -10827,7 +11089,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, "QkKD", function () {
+      _defineProperty(this, "WxQw", function () {
         _this.enable_close_button;
         if (_this.enable_close_button) {
           var closeButton = document.createElement("span");
@@ -10845,19 +11107,16 @@
           closeButton.classList.add("apx-video-close-btn".concat(_this.cssPostFix));
           // On click of the close button, remove the video player, remove styles and set the correct rtm status.
           closeButton.addEventListener("click", function () {
-            try {
-              _this.videoPlayer.remove();
-              _this.hideCallback("cancel");
-              _this.erWH();
-            } catch (e) {
-              console.log("Error \n ".concat(e, " \n occured while closing the video"));
-            }
+            _this._onClose();
           });
           _this.videoPlayer.appendChild(closeButton);
         }
         if (_this.enable_pip_button) {
           var pipButton = document.createElement("span");
           pipButton.innerHTML = getPIPSVG(_this.pip_button.width, _this.pip_button.height, _this.pip_button.color);
+          if (_this.pip_button.path) {
+            pipButton.innerHTML = "<img src=\"".concat(_this.pip_button.path, "\" width=\"").concat(_this.pip_button.width, "px\" height=\"").concat(_this.pip_button.height, "px\"></img>");
+          }
           pipButton.classList.add("apx-video-pip-btn".concat(_this.cssPostFix));
           // PIP button click listener.
           // To remove the default PIP option of the video element, PIP is disabled.
@@ -10877,32 +11136,35 @@
        * @function hideVideoPlayer
        * @description Sets the visibility of the video player to hidden.
        */
-      _defineProperty(this, "vgYS", function () {
+      _defineProperty(this, "GVEZ", function () {
         _this.videoPlayer.classList.add("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function unhideVideoPlayer
        * @description Unhides video player.
        */
-      _defineProperty(this, "subX", function () {
+      _defineProperty(this, "qaRp", function () {
         _this.videoPlayer.classList.remove("apx-video-hide-elmt".concat(_this.cssPostFix));
       });
       /**
        * @function getVideoElement
        * @returns {HTMLElement} Video ekement
        */
-      _defineProperty(this, "oPBv", function () {
+      _defineProperty(this, "qKZl", function () {
         return _this.videoElement;
       });
       this.videoPlayer = null;
       this.videoElement = null;
       this.showCallback = showCallback;
+      this.terminationConfig = terminationConfig;
       this.hideCallback = _hideCallback;
       this.height = 320;
       this.width = 320;
       this.configId = configId;
       this.name = name || "VideoPlayer";
       this.cssPostFix = "-".concat(this.configId, "-").concat(this.name).replaceAll(" ", "").replace(/[^\w\s]/gi, "");
+      this.replayCount = 0;
+      this.inAppShown = false; // This boolean restricts the "inapp_shown" event from logging multiple times.
 
       /********************************Configs*********************************************************/
       this.videoConfig = config;
@@ -10937,10 +11199,10 @@
         //Create a container for the video player and add the styles
         this.videoPlayer = document.createElement("div");
         this.videoPlayer.setAttribute("id", "apx-video-player");
-        this.videoPlayer.style = "background-color:".concat(this.bg_color, ";");
+        this.videoPlayer.style.backgroundColor = this.bg_color;
 
         // Video has a resolution, not deviating from the resolution set the height and width.
-        this.yNbM();
+        this.Spyd();
         //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.
@@ -10948,16 +11210,18 @@
         //Create a video element,set the source and add to the container.
         this._setPlayerContent();
         //Set the listeners on the video control buttons.
-        this.Xrri();
+        this.LjmO();
         //Attach listeners for the PIP toggle. i.e. for the PIP enter and PIP exit
-        this.ShAr();
+        this.mMkN();
         //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.QkKD();
+        this.WxQw();
         //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.vgYS();
+        this.GVEZ();
+        //If the auto dismiss is enabled, sets the timeout to call the InApp close.
+        this._setAutoTerminate();
         document.body.appendChild(this.videoPlayer);
       }
     }, {
@@ -10972,10 +11236,11 @@
         var playerStyles = document.getElementById("apx-mpl-styles");
         // If the styles are already added to the customers website, do not re-add.
         if (!playerStyles) {
-          var _this$close_button, _this$close_button2;
           var styleElement = document.createElement("style");
           styleElement.setAttribute("id", "apx-mpl-styles");
-          styleElement.innerHTML = "\n          div.apx-video-player".concat(this.cssPostFix, "--topLeft {\n            position: fixed;\n            top: 0;\n            left: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--topRight {\n            position: fixed;\n            top: 0;\n            right: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--bottomLeft {\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--bottomRight {\n            position: fixed;\n            bottom: 0;\n            right: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n\n          .apx-video-hide-elmt").concat(this.cssPostFix, " {\n            display : none;\n          }\n\n          .apx-video-pip-btn").concat(this.cssPostFix, " {\n            position: absolute;\n            top: 10px;\n            left: 10px;\n            width: ").concat(this.pip_button.width, "px;\n            height:  ").concat(this.pip_button.height, "px;\n            opacity: 0.3;\n            transition: opacity .3s ease;\n            cursor: pointer;\n          }\n\n          video:hover~.apx-video-pip-btn").concat(this.cssPostFix, " {\n            opacity: 1;\n          }\n          \n          .apx-video-close-btn").concat(this.cssPostFix, " {\n            position: absolute;\n            top: 10px;\n            top: ").concat((_this$close_button = this.close_button) === null || _this$close_button === void 0 ? void 0 : _this$close_button.offset_top, "px;\n            right: ").concat((_this$close_button2 = this.close_button) === null || _this$close_button2 === void 0 ? void 0 : _this$close_button2.offset_right, "px;\n            width: ").concat(this.close_button.width, "px;\n            height:  ").concat(this.close_button.height, "px;\n            opacity: 0.3;\n            transition: opacity .3s ease;\n            cursor: pointer;\n          }\n\n          video:hover~.apx-video-close-btn").concat(this.cssPostFix, " {\n            opacity: 1;\n          }\n\n          .apx-video-cta").concat(this.cssPostFix, " {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            -webkit-transform: translate(-50%, -50%);\n            -moz-transform: translate(-50%, -50%);\n            width: auto;\n            height: auto;\n            transition: opacity .3s ease;\n            cursor: pointer;\n          }\n          \n          .bi::before,\n          [class^=\"bi-\"]::before,\n          [class*=\" bi-\"]::before {\n            display: inline-block;\n            font-style: normal;\n            font-weight: normal !important;\n            font-variant: normal;\n            text-transform: none;\n            line-height: 1;\n            vertical-align: -.125em;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n          \n          .bi-pip::before { \n            content: \"\f4ef\"; \n          }\n\n          .bi-x-circle::before { \n            content: \"\f623\"; \n          }\n\n      ");
+          var pipButtonStyles = this.enable_pip_button ? "\n      width: ".concat(this.pip_button.width, "px;\n      height:  ").concat(this.pip_button.height, "px;\n      ") : "";
+          var closeButtonStyles = this.enable_close_button ? "\n      top: ".concat(this.close_button.offset_top, "px;\n      right: ").concat(this.close_button.offset_right, "px;\n      ") : "";
+          styleElement.innerHTML = "\n          #apx-video-player {\n            width: ".concat(this.width, "px;\n            height: ").concat(this.height, "px;\n          }\n\n          div.apx-video-player").concat(this.cssPostFix, "--topLeft {\n            position: fixed;\n            top: 0;\n            left: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--topRight {\n            position: fixed;\n            top: 0;\n            right: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--bottomLeft {\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n          \n          div.apx-video-player").concat(this.cssPostFix, "--bottomRight {\n            position: fixed;\n            bottom: 0;\n            right: 0;\n            background-color: ").concat(COLORS.BLACK, ";\n            z-index:99999999;\n          }\n\n          div.apx-video-player").concat(this.cssPostFix, "--center {\n            position: fixed;\n            left: 50%;\n            top: 50%;\n            background-color: ").concat(COLORS.BLACK, ";\n            transform: translate(-50%, -50%);\n            z-index:99999999;\n          }\n          .apx-video-hide-elmt").concat(this.cssPostFix, " {\n            display : none;\n          }\n\n          #apx-cta-btn.apx-video-hide-elmt").concat(this.cssPostFix, " {\n            display : none;\n          }\n\n          .apx-video-pip-btn").concat(this.cssPostFix, " {\n            position: absolute;\n            top: 10px;\n            left: 10px;\n            opacity: 0.3;\n            transition: opacity .3s ease;\n            cursor: pointer;\n            ").concat(pipButtonStyles, "\n          }\n\n          video:hover~.apx-video-pip-btn").concat(this.cssPostFix, " {\n            opacity: 1;\n          }\n          \n          .apx-video-close-btn").concat(this.cssPostFix, " {\n            position: absolute;\n            opacity: 0.3;\n            transition: opacity .3s ease;\n            cursor: pointer;\n            ").concat(closeButtonStyles, "\n          }\n\n          video:hover~.apx-video-close-btn").concat(this.cssPostFix, " {\n            opacity: 1;\n          }\n\n          .apx-video-cta").concat(this.cssPostFix, " {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            -webkit-transform: translate(-50%, -50%);\n            -moz-transform: translate(-50%, -50%);\n            width: auto;\n            height: auto;\n            transition: opacity .3s ease;\n            cursor: pointer;\n          }\n          \n          .bi::before,\n          [class^=\"bi-\"]::before,\n          [class*=\" bi-\"]::before {\n            display: inline-block;\n            font-style: normal;\n            font-weight: normal !important;\n            font-variant: normal;\n            text-transform: none;\n            line-height: 1;\n            vertical-align: -.125em;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n          \n          .bi-pip::before { \n            content: \"\f4ef\"; \n          }\n\n          .bi-x-circle::before { \n            content: \"\f623\"; \n          }\n\n      ");
           document.head.appendChild(styleElement);
         }
       }
@@ -11003,6 +11268,9 @@
           case INAPP_POSITION.BOTTOM_RIGHT:
             this.videoPlayer.classList.add("apx-video-player".concat(this.cssPostFix, "--bottomRight"));
             break;
+          case INAPP_POSITION.CENTER:
+            this.videoPlayer.classList.add("apx-video-player".concat(this.cssPostFix, "--center"));
+            break;
           default:
             this.videoPlayer.classList.add("apx-video-player".concat(this.cssPostFix, "--bottomRight"));
             break;
@@ -11021,13 +11289,14 @@
         this.videoElement = document.createElement("video");
         this.videoElement.width = this.width;
         this.videoElement.height = this.height;
-        this.videoElement.controlsList = "noplaybackrate nodownload";
+        this.videoElement.style.objectFit = "fill";
+        this.videoElement.controlsList = "nodownload";
         this.videoElement.controls = true;
         // By default disable the PIP. This is a hack to remove the default PIP option.
         // We want to have our own PIP button. On click of that button PIP will be enabled.
         this.videoElement.disablePictureInPicture = true;
         this.videoElement.autoplay = true;
-        if (this.video.enable_audio) {
+        if (!this.video.enable_audio) {
           this.videoElement.muted = true;
         }
         // Create a video source.
@@ -11039,25 +11308,84 @@
         this.videoPlayer.appendChild(this.videoElement);
       }
     }, {
-      key: "_setButtons",
+      key: "_onClose",
       value:
+      /**
+       * @function _onClose
+       * @private
+       * @description Performs cleanup activities and log events on close of the mini player
+       * @param {string} closeButtonName
+       */
+      function _onClose() {
+        var closeButtonName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "web_minimise_x_clicked";
+        try {
+          if (!document.fullscreenElement) {
+            this.totalDurationMinimised += Math.round(this.videoElement.currentTime) - Math.round(this.slotStartTime);
+            this.durationMinimisedSlots.push("".concat(Math.round(this.videoElement.currentTime), "-").concat(Math.round(this.slotStartTime)));
+          } else {
+            this.totalDurationMaximised += Math.round(this.videoElement.currentTime) - Math.round(this.slotStartTime);
+            this.durationMaximisedSlots.push("".concat(Math.round(this.videoElement.currentTime), "-").concat(Math.round(this.slotStartTime)));
+          }
+          this.videoPlayer.remove();
+          this.uxBO();
+          if (closeButtonName !== "auto_dismiss") {
+            window.Apxor.logAppEvent("apx_video_inapp_close_button_clicked", {
+              message_name: this.name,
+              id: this.configId,
+              totalDurationWatchedSlot: "0-".concat(Math.round(this.videoElement.currentTime)),
+              totalDurationWatched: Math.round(this.videoElement.currentTime),
+              closeButtonName: closeButtonName
+            });
+          }
+          window.Apxor.logAppEvent("apx_inapp_dismissed", {
+            campaignName: this.name,
+            id: this.configId,
+            totalDurationWatched: Math.round(this.videoElement.currentTime),
+            totalDurationWatchedSlot: "0-".concat(Math.round(this.videoElement.currentTime)),
+            totalReplayCount: this.replayCount,
+            totalMinimiseCount: this.minimisedCount,
+            totalMaximiseCount: this.maximisedCount,
+            totalDurationMinimised: Math.round(this.totalDurationMinimised),
+            totalDurationMaximised: Math.round(this.totalDurationMaximised),
+            dismissType: closeButtonName,
+            volumeClickedCount: this.volumeClickedCount,
+            inappType: "PIP Inapp",
+            apx_completed: this.videoElement.currentTime === this.videoElement.duration ? true : false,
+            apx_completion_percentage: this.videoElement.currentTime / this.videoElement.duration
+          });
+          this.hideCallback("cancel");
+        } catch (e) {
+          console.log("Error \n ".concat(e, " \n occured while closing the video"));
+        }
+      }
+
       /**
        * @function _setButtons
        * @private
        * @description Generate the Button's and append them to the specified button container.
        *
        */
-      function _setButtons(position) {
+    }, {
+      key: "_setButtons",
+      value: function _setButtons(position) {
         var _this2 = 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 removeCallback = function removeCallback() {
+        if (this.buttons.enable_top || this.buttons.enable_center || this.buttons.enable_bottom) {
+          var removeCallback = function removeCallback(isCancel, action, index) {
             try {
+              window.Apxor.logAppEvent("apx_video_inapp_button_clicked", {
+                buttonName: _this2.buttons.center.at(index).text.text,
+                redirection: _this2.buttons.center.at(index).action.type,
+                totalDurationWatched: Math.round(_this2.videoElement.currentTime),
+                message_name: _this2.name,
+                id: _this2.configId,
+                totalDurationWatchedSlot: "0-".concat(Math.round(_this2.videoElement.currentTime))
+              });
               _this2.videoPlayer.remove();
+              _this2.uxBO();
               _this2.hideCallback();
-              _this2.erWH();
             } catch (e) {
               console.log("Can't close the video player\n".concat(e));
             }
@@ -11071,9 +11399,9 @@
             action: ""
           };
           var buttons_config = {};
-          if (position === BUTTON_CONTAINER_POSITION.TOP) {
+          if (this.buttons.top.length > 0) {
             buttons_config = this.buttons.top;
-          } else if (position === BUTTON_CONTAINER_POSITION.CENTER) {
+          } else if (this.buttons.center.length > 0) {
             buttons_config = this.buttons.center;
           } else {
             buttons_config = this.buttons.bottom;
@@ -11085,6 +11413,27 @@
           this.videoPlayer.appendChild(buttons);
         }
       }
+    }, {
+      key: "_setAutoTerminate",
+      value:
+      /**
+       * @function _setAutoTerminate
+       * @private
+       * @description If the auto dismiss is enabled, sets the timeout to call the InApp close.
+       */
+      function _setAutoTerminate() {
+        var _this$terminationConf2,
+          _this3 = this;
+        if (((_this$terminationConf2 = this.terminationConfig) === null || _this$terminationConf2 === void 0 ? void 0 : _this$terminationConf2.auto_dismiss) === true) {
+          window.setTimeout(function () {
+            if (document.pictureInPictureEnabled && document.pictureInPictureElement) {
+              _this3.videoElement.pause();
+              document.exitPictureInPicture();
+            }
+            _this3._onClose("auto_dismiss");
+          }, this.terminationConfig.duration);
+        }
+      }
     }], [{
       key: "isAVideoBeingPlayed",
       value: function isAVideoBeingPlayed() {
@@ -11123,13 +11472,13 @@
   var RTM = /*#__PURE__*/_createClass(function RTM() {
     var _this = this;
     _classCallCheck(this, RTM);
-    _defineProperty(this, "ESSB", {});
+    _defineProperty(this, "xtAP", {});
     _defineProperty(this, "isShowingAction", false);
     _defineProperty(this, "currentAction", null);
-    _defineProperty(this, "version", 31);
+    _defineProperty(this, "version", 10);
     _defineProperty(this, "isInitialised", false);
     _defineProperty(this, "_eventsInDynamicText", {});
-    _defineProperty(this, "crkP", function () {
+    _defineProperty(this, "ILce", function () {
       _this.isInitialised = true;
       var oldPushState = history.pushState;
       history.pushState = function pushState() {
@@ -11154,7 +11503,7 @@
     });
     _defineProperty(this, "show", function (uiJson, duration, uuid, name) {
       if (!_this.isInitialised) {
-        _this.crkP();
+        _this.ILce();
       }
       try {
         // console.log("Showing action for uuid:", uuid, uiJson, this.currentAction);
@@ -11178,29 +11527,32 @@
           }, terminationConfig, function () {
             _this.isShowingAction = true;
             if (window.Apxor && window.Apxor.logActionEvent) {
+              var _window, _window$Apxor;
+              (_window = window) === null || _window === void 0 ? void 0 : (_window$Apxor = _window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.updateFlag(true);
               window.Apxor.logActionEvent("inline_shown", uuid, name);
-              window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(true);
             }
           }, function () {
+            var _window2, _window2$Apxor;
             _this.isShowingAction = false;
+            (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Apxor = _window2.Apxor) === null || _window2$Apxor === void 0 ? void 0 : _window2$Apxor.updateFlag(false);
+            _this.currentAction = null;
             if (window.Apxor && window.Apxor.logActionEvent) {
               window.Apxor.logActionEvent("inline_dismissed", uuid, name);
             }
-            _this.currentAction = null;
-            window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(false);
           }, function (callback) {
             _this.currentAction = callback;
           });
         }
       } catch (e) {
-        var _window, _window$Apxor;
+        var _window3, _window3$Apxor;
         _this.isShowingAction = false;
-        (_window = window) === null || _window === void 0 ? void 0 : (_window$Apxor = _window.Apxor) === null || _window$Apxor === void 0 ? void 0 : _window$Apxor.updateFlag(false);
+        (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Apxor = _window3.Apxor) === null || _window3$Apxor === void 0 ? void 0 : _window3$Apxor.updateFlag(false);
         console.error(e);
       }
     });
     _defineProperty(this, "removeAll", function () {
-      window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(false);
+      var _window4, _window4$Apxor;
+      (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$Apxor = _window4.Apxor) === null || _window4$Apxor === void 0 ? void 0 : _window4$Apxor.updateFlag(false);
       if (_this.currentAction !== null && _this.currentAction !== undefined) {
         _this.isShowingAction = false;
         try {
@@ -11210,7 +11562,7 @@
         } catch (e) {}
       }
     });
-    _defineProperty(this, "createInAppVideo", function (config, configId, name) {
+    _defineProperty(this, "createInAppVideo", function (config, duration, configId, name) {
       var videoConfig = JSON.parse(config);
       if (VideoInApp.isAVideoBeingPlayed()) {
         return;
@@ -11218,21 +11570,26 @@
       if (!VideoInApp.canShowVideoInApp(videoConfig)) {
         return;
       }
-      var VideoInAppInstance = new VideoInApp(videoConfig, configId, name, function () {
+      var terminationConfig = {};
+      terminationConfig["auto_dismiss"] = duration > 0;
+      terminationConfig["duration"] = duration;
+      var VideoInAppInstance = new VideoInApp(videoConfig, terminationConfig, configId, name, function () {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
+          var _window5, _window5$Apxor;
+          (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$Apxor = _window5.Apxor) === null || _window5$Apxor === void 0 ? void 0 : _window5$Apxor.updateFlag(true);
           window.Apxor.logActionEvent("inapp_shown", configId, name);
-          window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(true);
         }
       }, function () {
+        var _window6, _window6$Apxor;
         _this.isShowingAction = false;
+        _this.currentAction = null;
+        (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$Apxor = _window6.Apxor) === null || _window6$Apxor === void 0 ? void 0 : _window6$Apxor.updateFlag(false);
         if (window.Apxor && window.Apxor.logActionEvent) {
           window.Apxor.logActionEvent("inapp_dismissed", configId, name);
         }
-        _this.currentAction = null;
-        window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(false);
       });
-      VideoInAppInstance.YZTN();
+      VideoInAppInstance.gnAu();
     });
     /**
      * Creates a modal for the given config and displays it.
@@ -11243,27 +11600,31 @@
      * @param {function} showCallback
      * @param {function} closeCallback
      */
-    _defineProperty(this, "createInAppModal", function (inappconfig, configId, name) {
+    _defineProperty(this, "createInAppModal", function (inappconfig, duration, configId, name) {
       var config = JSON.parse(inappconfig);
-      var inappModal = new ModalInApp(config, configId, name, function () {
+      var terminationConfig = {};
+      terminationConfig["auto_dismiss"] = duration > 0;
+      terminationConfig["duration"] = duration;
+      var inappModal = new ModalInApp(config, terminationConfig, configId, name, function () {
         _this.isShowingAction = true;
         if (window.Apxor && window.Apxor.logActionEvent) {
+          var _window7, _window7$Apxor;
+          (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$Apxor = _window7.Apxor) === null || _window7$Apxor === void 0 ? void 0 : _window7$Apxor.updateFlag(true);
           window.Apxor.logActionEvent("inapp_shown", configId, name);
-          window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(true);
         }
       }, function (backgroundDiv, action) {
-        var _dialogContent$classL;
+        var _dialogContent$classL, _window8, _window8$Apxor;
         var cssClass = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".apx-dlg-c";
         var dialogContent = document.querySelector(cssClass);
         dialogContent === null || dialogContent === void 0 ? void 0 : (_dialogContent$classL = dialogContent.classList) === null || _dialogContent$classL === void 0 ? void 0 : _dialogContent$classL.toggle("open");
         // setTimeout(() => {
         backgroundDiv.remove();
         _this.isShowingAction = false;
+        (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$Apxor = _window8.Apxor) === null || _window8$Apxor === void 0 ? void 0 : _window8$Apxor.updateFlag(false);
+        _this.currentAction = null;
         if (window.Apxor && window.Apxor.logActionEvent) {
           window.Apxor.logActionEvent("inapp_dismissed", configId, name);
         }
-        _this.currentAction = null;
-        window.Apxor && window.Apxor.updateFlag && window.Apxor.updateFlag(false);
       }, function () {}, false, [], 0);
       inappModal.createInAppModal();
     });