@gemx-dev/clarity-visualize 0.8.67 → 0.8.69

package/build/clarity.visualize.module.js

@@ -14,20 +14,6 @@ PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise */
 
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
 
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -37,34 +23,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
 }
 
 // tslint:disable: no-bitwise
@@ -97,8 +55,10 @@ function __spreadArray(to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 }
+// Pre-computed exclude class names (replaces Constant.ExcludeClassNames.split())
+var ExcludeClassNamesList = ["load", "active", "fixed", "visible", "focus", "show", "collaps", "animat"];
 
-var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
+var excludeClassNames = ExcludeClassNamesList;
 var extraExcludeClassNames = [];
 var selectorMap = {};
 function reset$8() {
@@ -239,61 +199,59 @@ function lookup(hash) {
 
 var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
 
-var _a$1;
-var DataHelper = /** @class */ (function () {
-    function DataHelper(state) {
-        var _this = this;
+class DataHelper {
+    constructor(state) {
         this.regionMap = {};
         this.regions = {};
         this.metrics = {};
         this.lean = false;
-        this.reset = function () {
-            _this.metrics = {};
-            _this.lean = false;
-            _this.regions = {};
-            _this.regionMap = {};
+        this.reset = () => {
+            this.metrics = {};
+            this.lean = false;
+            this.regions = {};
+            this.regionMap = {};
         };
-        this.metric = function (event) {
+        this.metric = (event) => {
             var _a;
-            if (_this.state.options.metadata) {
-                var metricMarkup = [];
-                var regionMarkup = [];
+            if (this.state.options.metadata) {
+                let metricMarkup = [];
+                let regionMarkup = [];
                 // Copy over metrics for future reference
-                for (var m in event.data) {
-                    var eventType = typeof event.data[m];
+                for (let m in event.data) {
+                    const eventType = typeof event.data[m];
                     if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
-                        if (!(m in _this.metrics)) {
-                            _this.metrics[m] = 0;
+                        if (!(m in this.metrics)) {
+                            this.metrics[m] = 0;
                         }
-                        var key = parseInt(m, 10);
-                        var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
+                        let key = parseInt(m, 10);
+                        let value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
                         if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
-                            _this.metrics[m] = value;
+                            this.metrics[m] = value;
                         }
                         else {
-                            _this.metrics[m] += value;
+                            this.metrics[m] += value;
                         }
-                        _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
+                        this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : this.lean;
                     }
                 }
-                for (var entry in _this.metrics) {
+                for (let entry in this.metrics) {
                     if (entry in DataHelper.METRIC_MAP) {
-                        var m = _this.metrics[entry];
-                        var map = DataHelper.METRIC_MAP[entry];
-                        var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
-                        metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
+                        let m = this.metrics[entry];
+                        let map = DataHelper.METRIC_MAP[entry];
+                        let unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
+                        metricMarkup.push(`<li><h2>${this.value(m, unit)}<span>${this.key(unit)}</span></h2>${map.name}</li>`);
                     }
                 }
                 // Append region information to metadata
-                for (var name_1 in _this.regions) {
-                    var r = _this.regions[name_1];
-                    var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
-                    regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
+                for (let name in this.regions) {
+                    let r = this.regions[name];
+                    let className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
+                    regionMarkup.push(`<span class="${className}">${name}</span>`);
                 }
-                _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
+                this.state.options.metadata.innerHTML = `<ul>${metricMarkup.join("" /* Data.Constant.Empty */)}</ul><div>${regionMarkup.join("" /* Data.Constant.Empty */)}</div>`;
             }
         };
-        this.key = function (unit) {
+        this.key = (unit) => {
             switch (unit) {
                 case "html-price":
                 case "ld-price":
@@ -302,7 +260,7 @@ var DataHelper = /** @class */ (function () {
                 default: return unit;
             }
         };
-        this.value = function (num, unit) {
+        this.value = (num, unit) => {
             switch (unit) {
                 case "KB": return Math.round(num / 1024);
                 case "s": return Math.round(num / 10) / 100;
@@ -313,55 +271,52 @@ var DataHelper = /** @class */ (function () {
         };
         this.state = state;
     }
-    DataHelper.prototype.region = function (event) {
-        var data = event.data;
-        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-            var r = data_1[_i];
+    region(event) {
+        let data = event.data;
+        for (let r of data) {
             if (!(r.name in this.regions)) {
                 this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
             }
             this.regionMap[r.id] = r.name;
         }
-    };
-    DataHelper.METRIC_MAP = (_a$1 = {},
-        _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
-        _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
-        _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
-        _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
-        _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
-        _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
-        _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
-        _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
-        _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
-        _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
-        _a$1);
-    return DataHelper;
-}());
-
-var EnrichHelper = /** @class */ (function () {
-    function EnrichHelper() {
-        var _this = this;
-        this.reset = function () {
-            _this.children = {};
-            _this.nodes = {};
+    }
+}
+DataHelper.METRIC_MAP = {
+    [2 /* Data.Metric.TotalBytes */]: { name: "Total Bytes", unit: "KB" },
+    [4 /* Data.Metric.TotalCost */]: { name: "Total Cost", unit: "ms" },
+    [3 /* Data.Metric.LayoutCost */]: { name: "Layout Cost", unit: "ms" },
+    [8 /* Data.Metric.LargestPaint */]: { name: "LCP", unit: "s" },
+    [9 /* Data.Metric.CumulativeLayoutShift */]: { name: "CLS", unit: "cls" },
+    [7 /* Data.Metric.LongTaskCount */]: { name: "Long Tasks" },
+    [24 /* Data.Metric.CartTotal */]: { name: "Cart Total", unit: "html-price" },
+    [13 /* Data.Metric.ProductPrice */]: { name: "Product Price", unit: "ld-price" },
+    [6 /* Data.Metric.ThreadBlockedTime */]: { name: "Thread Blocked", unit: "ms" },
+    [37 /* Data.Dimension.InteractionNextPaint */]: { name: "INP", unit: "ms" }
+};
+
+class EnrichHelper {
+    constructor() {
+        this.reset = () => {
+            this.children = {};
+            this.nodes = {};
             helper.selector.reset();
         };
-        this.selectors = function (event) {
-            event.data.forEach && event.data.forEach(function (d) {
-                var parent = _this.nodes[d.parent];
-                var children = _this.children[d.parent] || [];
-                var node = _this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
-                var attributes = d.attributes || {};
+        this.selectors = (event) => {
+            event.data.forEach && event.data.forEach(d => {
+                let parent = this.nodes[d.parent];
+                let children = this.children[d.parent] || [];
+                let node = this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
+                let attributes = d.attributes || {};
                 /* Track parent-child relationship for this element */
                 if (node.parent !== d.parent) {
-                    var childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
+                    let childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
                     children.splice(childIndex, 0, d.id);
                     // Stop tracking this node from children of previous parent
                     if (node.parent !== d.parent) {
-                        var exParent = _this.children[node.parent];
-                        var nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
+                        let exParent = this.children[node.parent];
+                        let nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
                         if (nodeIndex >= 0) {
-                            _this.children[node.parent].splice(nodeIndex, 1);
+                            this.children[node.parent].splice(nodeIndex, 1);
                         }
                     }
                     node.parent = d.parent;
@@ -370,31 +325,31 @@ var EnrichHelper = /** @class */ (function () {
                     children.push(d.id);
                 }
                 /* Get current position */
-                node.position = _this.position(d.id, d.tag, node, children, children.map(function (c) { return _this.nodes[c]; }));
+                node.position = this.position(d.id, d.tag, node, children, children.map(c => this.nodes[c]));
                 /* For backward compatibility, continue populating current selector and hash like before in addition to beta selector and hash */
-                var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
+                let input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes };
                 // Get stable selector
                 // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
-                var selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
+                let selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
                 d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
                 d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
                 // Get beta selector
-                var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
+                let selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
                 d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
                 d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
                 /* Track state for future reference */
                 node.alpha = selectorAlpha;
                 node.beta = selectorBeta;
-                _this.nodes[d.id] = node;
+                this.nodes[d.id] = node;
                 if (d.parent) {
-                    _this.children[d.parent] = children;
+                    this.children[d.parent] = children;
                 }
             });
             return event;
         };
-        this.position = function (id, tag, child, children, siblings) {
+        this.position = (id, tag, child, children, siblings) => {
             child.position = 1;
-            var idx = children ? children.indexOf(id) : -1;
+            let idx = children ? children.indexOf(id) : -1;
             while (idx-- > 0) {
                 if (tag === siblings[idx].tag) {
                     child.position = siblings[idx].position + 1;
@@ -405,8 +360,7 @@ var EnrichHelper = /** @class */ (function () {
         };
         this.reset();
     }
-    return EnrichHelper;
-}());
+}
 
 /**
  * Creates a canvas as sibling to the iframe (same parent container)
@@ -423,31 +377,31 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
         throw new Error('Not in iframe: ' + iframeDoc.defaultView);
     }
     try {
-        var parentWindow = (_b = iframeDoc.defaultView) === null || _b === void 0 ? void 0 : _b.parent;
-        var parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
+        const parentWindow = (_b = iframeDoc.defaultView) === null || _b === void 0 ? void 0 : _b.parent;
+        const parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
         if (!parentDoc)
             throw new Error('Parent document not found');
-        var iframeId = "clarity-iframe-".concat(portalCanvasId);
-        var iframe = parentDoc.getElementById(iframeId);
+        const iframeId = `clarity-iframe-${portalCanvasId}`;
+        const iframe = parentDoc.getElementById(iframeId);
         if (!iframe)
             throw new Error('Iframe not found');
-        var targetIframe = iframe;
-        var iframeParent = targetIframe.parentElement;
+        const targetIframe = iframe;
+        const iframeParent = targetIframe.parentElement;
         if (!iframeParent)
             throw new Error('Iframe parent not found');
         // Create canvas as sibling to iframe
-        var canvasId = "".concat("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */, "-").concat(portalCanvasId);
-        var canvas_1 = parentDoc.getElementById(canvasId);
-        if (canvas_1 === null) {
-            canvas_1 = parentDoc.createElement('canvas');
-            canvas_1.id = canvasId;
-            canvas_1.classList.add("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
-            canvas_1.width = 0;
-            canvas_1.height = 0;
-            canvas_1.style.position = "absolute" /* Constant.Absolute */;
+        const canvasId = `${"clarity-heatmap-canvas" /* Constant.HeatmapCanvas */}-${portalCanvasId}`;
+        let canvas = parentDoc.getElementById(canvasId);
+        if (canvas === null) {
+            canvas = parentDoc.createElement('canvas');
+            canvas.id = canvasId;
+            canvas.classList.add("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
+            canvas.width = 0;
+            canvas.height = 0;
+            canvas.style.position = "absolute" /* Constant.Absolute */;
             // canvas.style.zIndex = `${Setting.ZIndex}`;
-            canvas_1.style.pointerEvents = 'none'; // Allow clicks to pass through
-            iframeParent.appendChild(canvas_1);
+            canvas.style.pointerEvents = 'none'; // Allow clicks to pass through
+            iframeParent.appendChild(canvas);
         }
         // // Set canvas size to match iframe
         // const updateCanvasSize = () => {
@@ -460,16 +414,16 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
         // Update size on resize
         // const handleUpdate = () => updateCanvasSize();
         // parentWindow!.addEventListener('resize', handleUpdate, true);
-        var cleanup = function () {
+        const cleanup = () => {
             // parentWindow!.removeEventListener('resize', handleUpdate, true);
-            if (canvas_1.parentNode) {
-                canvas_1.parentNode.removeChild(canvas_1);
+            if (canvas.parentNode) {
+                canvas.parentNode.removeChild(canvas);
             }
         };
         return {
-            canvas: canvas_1,
+            canvas,
             iframe: targetIframe,
-            cleanup: cleanup
+            cleanup
         };
     }
     catch (e) {
@@ -486,9 +440,9 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
  * Used to track when all dialogs have finished rendering
  * Uses Set to avoid counting the same dialog multiple times
  */
-var pendingDialogs = new Set();
-var resolveDialogsRendered = null;
-var dialogsRenderedPromise = null;
+let pendingDialogs = new Set();
+let resolveDialogsRendered = null;
+let dialogsRenderedPromise = null;
 /**
  * Returns a promise that resolves when all pending dialogs are rendered
  */
@@ -502,7 +456,7 @@ function waitForDialogsRendered() {
         return dialogsRenderedPromise;
     }
     // Create new promise
-    dialogsRenderedPromise = new Promise(function (resolve) {
+    dialogsRenderedPromise = new Promise((resolve) => {
         resolveDialogsRendered = resolve;
     });
     return dialogsRenderedPromise;
@@ -557,7 +511,7 @@ function showDialog(dialogElement, isModal, onError) {
             dialogElement.show();
         }
         // Wait for animations/transitions to complete
-        waitForDialogAnimation(dialogElement).then(function () {
+        waitForDialogAnimation(dialogElement).then(() => {
             notifyDialogComplete(dialogElement);
         });
     }
@@ -575,10 +529,10 @@ function showDialog(dialogElement, isModal, onError) {
  * Listens for animationend and transitionend events with timeout fallback
  */
 function waitForDialogAnimation(dialogElement) {
-    return new Promise(function (resolve) {
-        var resolved = false;
-        var timeoutMs = 1000; // Maximum wait time for animations
-        var complete = function () {
+    return new Promise((resolve) => {
+        let resolved = false;
+        const timeoutMs = 1000; // Maximum wait time for animations
+        const complete = () => {
             if (resolved)
                 return;
             resolved = true;
@@ -586,20 +540,20 @@ function waitForDialogAnimation(dialogElement) {
             resolve();
         };
         // Fallback timeout in case no animation events fire
-        var timeout = setTimeout(complete, timeoutMs);
+        const timeout = setTimeout(complete, timeoutMs);
         // Listen for animation end
-        var onAnimationEnd = function (e) {
+        const onAnimationEnd = (e) => {
             if (e.target === dialogElement) {
                 complete();
             }
         };
         // Listen for transition end
-        var onTransitionEnd = function (TransitionEvent) {
+        const onTransitionEnd = (TransitionEvent) => {
             if (TransitionEvent.target === dialogElement) {
                 complete();
             }
         };
-        var cleanup = function () {
+        const cleanup = () => {
             clearTimeout(timeout);
             dialogElement.removeEventListener('animationend', onAnimationEnd);
             dialogElement.removeEventListener('transitionend', onTransitionEnd);
@@ -607,10 +561,10 @@ function waitForDialogAnimation(dialogElement) {
         dialogElement.addEventListener('animationend', onAnimationEnd, { once: true });
         dialogElement.addEventListener('transitionend', onTransitionEnd, { once: true });
         // If no animations/transitions, resolve after one frame
-        requestAnimationFrame(function () {
-            var computedStyle = window.getComputedStyle(dialogElement);
-            var hasAnimation = computedStyle.animationName !== 'none';
-            var hasTransition = computedStyle.transitionDuration !== '0s';
+        requestAnimationFrame(() => {
+            const computedStyle = window.getComputedStyle(dialogElement);
+            const hasAnimation = computedStyle.animationName !== 'none';
+            const hasTransition = computedStyle.transitionDuration !== '0s';
             if (!hasAnimation && !hasTransition) {
                 complete();
             }
@@ -638,12 +592,12 @@ function notifyDialogComplete(dialogElement) {
  * @param onError - Optional error callback
  */
 function renderDialog(dialogElement, options, onError) {
-    var isModal = options.isModal, shouldBeOpen = options.shouldBeOpen, isExistingDialog = options.isExistingDialog;
+    const { isModal, shouldBeOpen, isExistingDialog } = options;
     if (!shouldBeOpen)
         return;
     // Add dialog to pending set (Set automatically handles duplicates)
     pendingDialogs.add(dialogElement);
-    var doShow = function () { return showDialog(dialogElement, isModal, onError); };
+    const doShow = () => showDialog(dialogElement, isModal, onError);
     if (isExistingDialog) {
         doShow();
     }
@@ -652,9 +606,8 @@ function renderDialog(dialogElement, options, onError) {
     }
 }
 
-var HeatmapHelper = /** @class */ (function () {
-    function HeatmapHelper(state, layout) {
-        var _this = this;
+class HeatmapHelper {
+    constructor(state, layout) {
         this.data = null;
         this.scrollData = null;
         this.max = null;
@@ -667,35 +620,35 @@ var HeatmapHelper = /** @class */ (function () {
         this.scrollAvgFold = null;
         this.addScrollMakers = false;
         this.parentCanvasInfo = null;
-        this.reset = function () {
-            _this.data = null;
-            _this.scrollData = null;
-            _this.max = null;
-            _this.offscreenRing = null;
-            _this.gradientPixels = null;
-            _this.timeout = null;
+        this.reset = () => {
+            this.data = null;
+            this.scrollData = null;
+            this.max = null;
+            this.offscreenRing = null;
+            this.gradientPixels = null;
+            this.timeout = null;
             // Cleanup parent canvas if it exists
-            if (_this.parentCanvasInfo) {
-                _this.parentCanvasInfo.cleanup();
-                _this.parentCanvasInfo = null;
+            if (this.parentCanvasInfo) {
+                this.parentCanvasInfo.cleanup();
+                this.parentCanvasInfo = null;
             }
             // Reset resize observer
-            if (_this.observer) {
-                _this.observer.disconnect();
-                _this.observer = null;
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
             }
             // Remove scroll and resize event listeners
-            if (_this.state && _this.state.window) {
-                var win = _this.state.window;
-                win.removeEventListener("scroll", _this.redraw, true);
-                win.removeEventListener("resize", _this.redraw, true);
+            if (this.state && this.state.window) {
+                let win = this.state.window;
+                win.removeEventListener("scroll", this.redraw, true);
+                win.removeEventListener("resize", this.redraw, true);
             }
         };
-        this.clear = function () {
-            var doc = _this.state.window.document;
-            var win = _this.state.window;
-            var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
-            var de = doc.documentElement;
+        this.clear = () => {
+            let doc = this.state.window.document;
+            let win = this.state.window;
+            let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
+            let de = doc.documentElement;
             if (canvas) {
                 canvas.width = de.clientWidth;
                 canvas.height = de.clientHeight;
@@ -704,72 +657,59 @@ var HeatmapHelper = /** @class */ (function () {
                 canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
             }
             // Cleanup parent canvas before reset
-            if (_this.parentCanvasInfo) {
-                _this.parentCanvasInfo.cleanup();
-                _this.parentCanvasInfo = null;
-            }
-            _this.reset();
-        };
-        this.scroll = function (activity, avgFold, addMarkers) { return __awaiter(_this, void 0, void 0, function () {
-            var canvas, context, doc, body, de, height, grd, _i, _a, currentCombination, huePercentView, percentView, hue;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, this.waitForDialogs()];
-                    case 1:
-                        _b.sent();
-                        this.scrollData = this.scrollData || activity;
-                        this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
-                        this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
-                        canvas = this.overlay();
-                        context = canvas.getContext("2d" /* Constant.Context */);
-                        doc = this.state.window.document;
-                        body = doc.body;
-                        de = doc.documentElement;
-                        height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-                        canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
-                        canvas.style.top = 0 + "px" /* Constant.Pixel */;
-                        if (canvas.width > 0 && canvas.height > 0) {
-                            if (this.scrollData) {
-                                grd = context.createLinearGradient(0, 0, 0, canvas.height);
-                                for (_i = 0, _a = this.scrollData; _i < _a.length; _i++) {
-                                    currentCombination = _a[_i];
-                                    huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
-                                    percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
-                                    hue = huePercentView * 240 /* Setting.MaxHue */;
-                                    if (percentView <= 1) {
-                                        grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
-                                    }
-                                }
-                                // Fill with gradient
-                                context.fillStyle = grd;
-                                context.fillRect(0, 0, canvas.width, canvas.height);
-                                if (this.addScrollMakers) {
-                                    this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
-                                }
-                            }
+            if (this.parentCanvasInfo) {
+                this.parentCanvasInfo.cleanup();
+                this.parentCanvasInfo = null;
+            }
+            this.reset();
+        };
+        this.scroll = (activity, avgFold, addMarkers) => __awaiter(this, void 0, void 0, function* () {
+            yield this.waitForDialogs();
+            this.scrollData = this.scrollData || activity;
+            this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
+            this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
+            let canvas = this.overlay();
+            let context = canvas.getContext("2d" /* Constant.Context */);
+            let doc = this.state.window.document;
+            var body = doc.body;
+            var de = doc.documentElement;
+            var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+            canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
+            canvas.style.top = 0 + "px" /* Constant.Pixel */;
+            if (canvas.width > 0 && canvas.height > 0) {
+                if (this.scrollData) {
+                    const grd = context.createLinearGradient(0, 0, 0, canvas.height);
+                    for (const currentCombination of this.scrollData) {
+                        const huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
+                        const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
+                        const hue = huePercentView * 240 /* Setting.MaxHue */;
+                        if (percentView <= 1) {
+                            grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
                         }
-                        return [2 /*return*/];
+                    }
+                    // Fill with gradient
+                    context.fillStyle = grd;
+                    context.fillRect(0, 0, canvas.width, canvas.height);
+                    if (this.addScrollMakers) {
+                        this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
+                    }
                 }
-            });
-        }); };
-        this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
-            _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
-            var markers = [75, 50, 25];
-            var _loop_1 = function (marker) {
-                var closest = scrollMapInfo.reduce(function (prev, curr) {
+            }
+        });
+        this.addInfoMarkers = (context, scrollMapInfo, width, height, avgFold) => {
+            this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
+            const markers = [75, 50, 25];
+            for (const marker of markers) {
+                const closest = scrollMapInfo.reduce((prev, curr) => {
                     return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
                 });
                 if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
-                    var markerLine = (closest.scrollReachY / 100) * height;
-                    _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
+                    const markerLine = (closest.scrollReachY / 100) * height;
+                    this.addMarker(context, width, `${marker}%`, markerLine, 35 /* Setting.MarkerSmallWidth */);
                 }
-            };
-            for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
-                var marker = markers_1[_i];
-                _loop_1(marker);
             }
         };
-        this.addMarker = function (context, heatmapWidth, label, markerY, markerWidth) {
+        this.addMarker = (context, heatmapWidth, label, markerY, markerWidth) => {
             context.beginPath();
             context.moveTo(0, markerY);
             context.lineTo(heatmapWidth, markerY);
@@ -783,51 +723,52 @@ var HeatmapHelper = /** @class */ (function () {
             context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
             context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
         };
-        this.click = function (activity) { return __awaiter(_this, void 0, void 0, function () {
-            var heat, canvas, ctx, ring, gradient, _i, heat_1, entry, pixels, i, alpha, offset;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.waitForDialogs()];
-                    case 1:
-                        _a.sent();
-                        this.data = this.data || activity;
-                        heat = this.transform();
-                        canvas = this.overlay();
-                        ctx = canvas.getContext("2d" /* Constant.Context */);
-                        if (canvas.width > 0 && canvas.height > 0) {
-                            ring = this.getRing();
-                            gradient = this.getGradient();
-                            // Render activity for each (x,y) coordinate in our data
-                            for (_i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
-                                entry = heat_1[_i];
-                                ctx.globalAlpha = entry.a;
-                                ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
-                            }
-                            pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                            for (i = 0; i < pixels.data.length; i += 4) {
-                                alpha = pixels.data[i + 3];
-                                if (alpha > 0) {
-                                    offset = (alpha - 1) * 4;
-                                    pixels.data[i] = gradient.data[offset];
-                                    pixels.data[i + 1] = gradient.data[offset + 1];
-                                    pixels.data[i + 2] = gradient.data[offset + 2];
-                                }
-                            }
-                            ctx.putImageData(pixels, 0, 0);
-                        }
-                        return [2 /*return*/];
+        this.click = (activity) => __awaiter(this, void 0, void 0, function* () {
+            yield this.waitForDialogs();
+            this.data = this.data || activity;
+            let heat = this.transform();
+            let canvas = this.overlay();
+            let ctx = canvas.getContext("2d" /* Constant.Context */);
+            if (canvas.width > 0 && canvas.height > 0) {
+                // TODO: GEMX DEBUG Draw a test rectangle to verify canvas is working
+                // ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
+                // ctx.fillRect(10, 10, 100, 100);
+                // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
+                // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
+                // Pre-render similar primitives or repeating objects on an offscreen canvas
+                let ring = this.getRing();
+                let gradient = this.getGradient();
+                // Render activity for each (x,y) coordinate in our data
+                for (let entry of heat) {
+                    ctx.globalAlpha = entry.a;
+                    ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
+                }
+                // Add color to the canvas based on alpha value of each pixel
+                let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                for (let i = 0; i < pixels.data.length; i += 4) {
+                    // For each pixel, we have 4 entries in data array: (r,g,b,a)
+                    // To pick the right color from gradient pixels, we look at the alpha value of the pixel
+                    // Alpha value ranges from 0-255
+                    let alpha = pixels.data[i + 3];
+                    if (alpha > 0) {
+                        let offset = (alpha - 1) * 4;
+                        pixels.data[i] = gradient.data[offset];
+                        pixels.data[i + 1] = gradient.data[offset + 1];
+                        pixels.data[i + 2] = gradient.data[offset + 2];
+                    }
                 }
-            });
-        }); };
-        this.overlay = function () {
+                ctx.putImageData(pixels, 0, 0);
+            }
+        });
+        this.overlay = () => {
             // Create canvas for visualizing heatmap
-            var doc = _this.state.window.document;
-            var win = _this.state.window;
-            var de = doc.documentElement;
-            var isPortalCanvas = !!_this.state.options.portalCanvasId;
+            let doc = this.state.window.document;
+            let win = this.state.window;
+            let de = doc.documentElement;
+            const isPortalCanvas = !!this.state.options.portalCanvasId;
             if (isPortalCanvas)
-                return _this.createPortalCanvas(doc, win, de);
-            var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
+                return this.createPortalCanvas(doc, win, de);
+            let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
             if (canvas === null) {
                 canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
                 canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
@@ -835,13 +776,13 @@ var HeatmapHelper = /** @class */ (function () {
                 canvas.width = 0;
                 canvas.height = 0;
                 canvas.style.position = "absolute" /* Constant.Absolute */;
-                canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
+                canvas.style.zIndex = `${2147483647 /* Setting.ZIndex */}`;
                 de.appendChild(canvas);
-                win.addEventListener("scroll", _this.redraw, true);
-                win.addEventListener("resize", _this.redraw, true);
-                _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
-                if (_this.observer) {
-                    _this.observer.observe(doc.body);
+                win.addEventListener("scroll", this.redraw, true);
+                win.addEventListener("resize", this.redraw, true);
+                this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
+                if (this.observer) {
+                    this.observer.observe(doc.body);
                 }
             }
             // Ensure canvas is positioned correctly
@@ -852,13 +793,13 @@ var HeatmapHelper = /** @class */ (function () {
             canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
             return canvas;
         };
-        this.getRing = function () {
-            if (_this.offscreenRing === null) {
-                var doc = _this.state.window.document;
-                _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
-                _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
-                _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
-                var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
+        this.getRing = () => {
+            if (this.offscreenRing === null) {
+                let doc = this.state.window.document;
+                this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
+                this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
+                this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
+                let ctx = this.offscreenRing.getContext("2d" /* Constant.Context */);
                 ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
                 ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
                 ctx.shadowColor = "black" /* Constant.Black */;
@@ -867,90 +808,88 @@ var HeatmapHelper = /** @class */ (function () {
                 ctx.closePath();
                 ctx.fill();
             }
-            return _this.offscreenRing;
+            return this.offscreenRing;
         };
-        this.getGradient = function () {
-            if (_this.gradientPixels === null) {
-                var doc = _this.state.window.document;
-                var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
+        this.getGradient = () => {
+            if (this.gradientPixels === null) {
+                let doc = this.state.window.document;
+                let offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
                 offscreenGradient.width = 1;
                 offscreenGradient.height = 256 /* Setting.Colors */;
-                var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
-                var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
-                var step = 1 / HeatmapHelper.COLORS.length;
-                for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
+                let ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
+                let gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
+                let step = 1 / HeatmapHelper.COLORS.length;
+                for (let i = 0; i < HeatmapHelper.COLORS.length; i++) {
                     gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
                 }
                 ctx.fillStyle = gradient;
                 ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
-                _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
+                this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
             }
-            return _this.gradientPixels;
+            return this.gradientPixels;
         };
-        this.redraw = function (event) {
-            if (_this.data) {
-                if (_this.timeout) {
-                    clearTimeout(_this.timeout);
+        this.redraw = (event) => {
+            if (this.data) {
+                if (this.timeout) {
+                    clearTimeout(this.timeout);
                 }
-                _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
+                this.timeout = setTimeout(this.click, 30 /* Setting.Interval */);
             }
-            else if (_this.scrollData) {
+            else if (this.scrollData) {
                 if (event.type != 'scroll') {
-                    if (_this.timeout) {
-                        clearTimeout(_this.timeout);
+                    if (this.timeout) {
+                        clearTimeout(this.timeout);
                     }
-                    _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
+                    this.timeout = setTimeout(this.scroll, 30 /* Setting.Interval */);
                 }
             }
         };
-        this.transform = function () {
-            var output = [];
-            var points = {};
-            var localMax = 0;
-            var height = _this.state.window && _this.state.window.document ? _this.state.window.document.documentElement.clientHeight : 0;
+        this.transform = () => {
+            let output = [];
+            let points = {};
+            let localMax = 0;
+            let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
             // DEBUG LOG
-            console.group("[Heatmap] transform \u2014 total elements: ".concat(_this.data.length, ", height: ").concat(height, ", max: ").concat(_this.max));
-            for (var _i = 0, _a = _this.data; _i < _a.length; _i++) {
-                var element = _a[_i];
-                var el = _this.layout.get(element.hash);
+            console.group(`[Heatmap] transform — total elements: ${this.data.length}, height: ${height}, max: ${this.max}`);
+            for (let element of this.data) {
+                let el = this.layout.get(element.hash);
                 if (!el) {
-                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 element not found in DOM"));
+                    console.warn(`[Heatmap] SKIP hash="${element.hash}" — element not found in DOM`);
                     continue;
                 }
                 if (typeof el.getBoundingClientRect !== "function") {
-                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 getBoundingClientRect not available"), el);
+                    console.warn(`[Heatmap] SKIP hash="${element.hash}" — getBoundingClientRect not available`, el);
                     continue;
                 }
-                var r = el.getBoundingClientRect();
-                var isDebugHash = element.hash === "270qs0pw7";
-                var v = _this.visible(el, r, height, isDebugHash ? element.hash : undefined);
-                if (!v && _this.max !== null) {
-                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 not visible on re-render"), { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: _this.max !== null });
+                let r = el.getBoundingClientRect();
+                const isDebugHash = element.hash === "270qs0pw7";
+                let v = this.visible(el, r, height, isDebugHash ? element.hash : undefined);
+                if (!v && this.max !== null) {
+                    console.warn(`[Heatmap] SKIP hash="${element.hash}" — not visible on re-render`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: this.max !== null });
                     continue;
                 }
                 if (el && typeof el.getBoundingClientRect === "function") {
-                    console.log("[Heatmap] PROCESS hash=\"".concat(element.hash, "\" visible=").concat(v, " points=").concat(element.points), { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
+                    console.log(`[Heatmap] PROCESS hash="${element.hash}" visible=${v} points=${element.points}`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
                     // Process clicks for only visible elements
-                    if (_this.max === null || v) {
-                        for (var i = 0; i < element.points; i++) {
-                            var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
-                            var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
-                            var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
+                    if (this.max === null || v) {
+                        for (let i = 0; i < element.points; i++) {
+                            let x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
+                            let y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
+                            let k = `${x}${"X" /* Constant.Separator */}${y}${"X" /* Constant.Separator */}${v ? 1 : 0}`;
                             points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
                             localMax = Math.max(points[k], localMax);
-                            console.log("  point[".concat(i, "] x=").concat(x, " y=").concat(y, " visible=").concat(v, " clicks=").concat(element.clicks[i]));
+                            console.log(`  point[${i}] x=${x} y=${y} visible=${v} clicks=${element.clicks[i]}`);
                         }
                     }
                 }
             }
             // Set the max value from the firs t
-            _this.max = _this.max ? _this.max : localMax;
+            this.max = this.max ? this.max : localMax;
             // Once all points are accounted for, convert everything into absolute (x, y)
-            var skippedInvisible = 0;
-            for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
-                var coordinates = _c[_b];
-                var parts = coordinates.split("X" /* Constant.Separator */);
-                var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
+            let skippedInvisible = 0;
+            for (let coordinates of Object.keys(points)) {
+                let parts = coordinates.split("X" /* Constant.Separator */);
+                let alpha = Math.min((points[coordinates] / this.max) + 0.15 /* Setting.AlphaBoost */, 1);
                 if (parts[2] === "1") {
                     output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
                 }
@@ -958,34 +897,33 @@ var HeatmapHelper = /** @class */ (function () {
                     skippedInvisible++;
                 }
             }
-            console.log("[Heatmap] Result \u2014 drawn: ".concat(output.length, ", skipped invisible: ").concat(skippedInvisible, ", max: ").concat(_this.max));
+            console.log(`[Heatmap] Result — drawn: ${output.length}, skipped invisible: ${skippedInvisible}, max: ${this.max}`);
             console.groupEnd();
             return output;
         };
-        this.visible = function (el, r, height, debugHash) {
-            var doc = _this.state.window.document;
-            var visibility = r.height > height ? true : false;
+        this.visible = (el, r, height, debugHash) => {
+            let doc = this.state.window.document;
+            let visibility = r.height > height ? true : false;
             if (debugHash) {
-                console.group("[Heatmap visible] hash=".concat(debugHash, " tag=").concat(el === null || el === void 0 ? void 0 : el.tagName));
-                console.log("  rect: top=".concat(r.top.toFixed(1), " bottom=").concat(r.bottom.toFixed(1), " left=").concat(r.left.toFixed(1), " width=").concat(r.width.toFixed(1), " height=").concat(r.height.toFixed(1)));
-                console.log("  viewport height=".concat(height, " | r.height > height? ").concat(r.height > height));
+                console.group(`[Heatmap visible] hash=${debugHash} tag=${el === null || el === void 0 ? void 0 : el.tagName}`);
+                console.log(`  rect: top=${r.top.toFixed(1)} bottom=${r.bottom.toFixed(1)} left=${r.left.toFixed(1)} width=${r.width.toFixed(1)} height=${r.height.toFixed(1)}`);
+                console.log(`  viewport height=${height} | r.height > height? ${r.height > height}`);
             }
             if (visibility === false && r.width > 0 && r.height > 0) {
-                var checkX = r.left + (r.width / 2);
-                var checkY = r.top + (r.height / 2);
+                const checkX = r.left + (r.width / 2);
+                const checkY = r.top + (r.height / 2);
                 if (debugHash) {
-                    console.log("  elementsFromPoint(".concat(checkX.toFixed(1), ", ").concat(checkY.toFixed(1), ")"));
+                    console.log(`  elementsFromPoint(${checkX.toFixed(1)}, ${checkY.toFixed(1)})`);
                 }
                 while (!visibility && doc) {
-                    var shadowElement = null;
-                    var elements = doc.elementsFromPoint(checkX, checkY);
+                    let shadowElement = null;
+                    let elements = doc.elementsFromPoint(checkX, checkY);
                     if (debugHash) {
-                        var topElements = elements.slice(0, 5).map(function (e) { return "".concat(e.tagName).concat(e.id ? '#' + e.id : '').concat(e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''); });
-                        console.log("  top elements at center: [".concat(topElements.join(', '), "]"));
-                        console.log("  is el in top elements? ".concat(elements.includes(el), " | el matches first non-canvas? ").concat(elements.find(function (e) { return !(e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)); }) === el));
+                        const topElements = elements.slice(0, 5).map(e => `${e.tagName}${e.id ? '#' + e.id : ''}${e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''}`);
+                        console.log(`  top elements at center: [${topElements.join(', ')}]`);
+                        console.log(`  is el in top elements? ${elements.includes(el)} | el matches first non-canvas? ${elements.find(e => !(e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0))) === el}`);
                     }
-                    for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
-                        var e = elements_1[_i];
+                    for (let e of elements) {
                         // Ignore if top element ends up being the canvas element we added for heatmap visualization
                         if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
                             continue;
@@ -1001,46 +939,38 @@ var HeatmapHelper = /** @class */ (function () {
             }
             else if (debugHash) {
                 if (r.width === 0 || r.height === 0) {
-                    console.log("  SKIP elementsFromPoint \u2014 zero dimension: width=".concat(r.width, " height=").concat(r.height));
+                    console.log(`  SKIP elementsFromPoint — zero dimension: width=${r.width} height=${r.height}`);
                 }
             }
-            var result = visibility && r.bottom >= 0 && r.top <= height;
+            const result = visibility && r.bottom >= 0 && r.top <= height;
             if (debugHash) {
-                console.log("  visibility=".concat(visibility, " | r.bottom(").concat(r.bottom.toFixed(1), ") >= 0? ").concat(r.bottom >= 0, " | r.top(").concat(r.top.toFixed(1), ") <= height(").concat(height, ")? ").concat(r.top <= height));
-                console.log("  => final result: ".concat(result));
+                console.log(`  visibility=${visibility} | r.bottom(${r.bottom.toFixed(1)}) >= 0? ${r.bottom >= 0} | r.top(${r.top.toFixed(1)}) <= height(${height})? ${r.top <= height}`);
+                console.log(`  => final result: ${result}`);
                 console.groupEnd();
             }
             return result;
         };
-        this.waitForDialogs = function () { return __awaiter(_this, void 0, void 0, function () {
-            var isPortalCanvas;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        isPortalCanvas = !!this.state.options.portalCanvasId;
-                        if (!isPortalCanvas)
-                            return [2 /*return*/];
-                        return [4 /*yield*/, waitForDialogsRendered()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        this.createPortalCanvas = function (doc, win, de) {
+        this.waitForDialogs = () => __awaiter(this, void 0, void 0, function* () {
+            const isPortalCanvas = !!this.state.options.portalCanvasId;
+            if (!isPortalCanvas)
+                return;
+            yield waitForDialogsRendered();
+            return;
+        });
+        this.createPortalCanvas = (doc, win, de) => {
             var _a;
-            var canvas = null;
+            let canvas = null;
             try {
-                canvas = (_a = _this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
+                canvas = (_a = this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
                 if (!canvas) {
-                    _this.parentCanvasInfo = createParentWindowCanvas(doc, _this.state.options.portalCanvasId);
-                    canvas = _this.parentCanvasInfo.canvas;
+                    this.parentCanvasInfo = createParentWindowCanvas(doc, this.state.options.portalCanvasId);
+                    canvas = this.parentCanvasInfo.canvas;
                     // Add event listeners only once when canvas is created
-                    win.addEventListener("scroll", _this.redraw, true);
-                    win.addEventListener("resize", _this.redraw, true);
-                    _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
-                    if (_this.observer) {
-                        _this.observer.observe(doc.body);
+                    win.addEventListener("scroll", this.redraw, true);
+                    win.addEventListener("resize", this.redraw, true);
+                    this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
+                    if (this.observer) {
+                        this.observer.observe(doc.body);
                     }
                 }
                 canvas.width = de.clientWidth;
@@ -1048,20 +978,19 @@ var HeatmapHelper = /** @class */ (function () {
                 canvas.style.top = '0';
                 canvas.style.left = '0';
                 canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
-                _this.parentCanvasInfo.canvas = canvas;
+                this.parentCanvasInfo.canvas = canvas;
                 return canvas;
             }
             catch (error) {
-                console.error("[Heatmap] createPortalCanvas:", error);
+                console.error(`[Heatmap] createPortalCanvas:`, error);
             }
             return null;
         };
         this.state = state;
         this.layout = layout;
     }
-    HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
-    return HeatmapHelper;
-}());
+}
+HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
 
 var pointerSvg = `background: url("data:image/svg+xml,%3Csvg width='25' height='33' viewBox='0 0 25 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_1588_56448)'%3E%3Cpath d='M4.01802 5.55275C4.01946 3.50367 6.4952 2.47998 7.93878 3.93422C11.8224 7.84649 15.637 11.722 19.5308 15.6444C20.9744 17.0986 19.9461 19.6118 17.8974 19.6538C16.3364 19.6858 14.7609 19.7179 13.1178 19.7275C12.4996 19.7312 11.9077 19.9799 11.4721 20.4186C10.3166 21.582 9.15585 22.7133 7.98174 23.8569C6.50994 25.2904 4.00066 24.2454 4.00207 22.1909C4.00592 16.5949 4.01415 11.0883 4.01802 5.55275Z' fill='%23D97705'/%3E%3Cpath d='M4.74233 6.01561C4.74223 4.45449 6.63136 3.6747 7.73247 4.78135C11.4175 8.48492 15.0357 12.1199 18.7088 15.7882C19.8134 16.8914 19.0329 18.8059 17.4722 18.8401C15.8726 18.8751 14.2495 18.9145 12.5497 18.9237C12.0819 18.9263 11.6339 19.1135 11.3029 19.4441C10.1408 20.6046 8.9704 21.7251 7.78073 22.8738C6.6557 23.96 4.74395 23.1646 4.74384 21.6008C4.7435 16.3797 4.74267 11.2488 4.74233 6.01561Z' fill='white'/%3E%3Cpath d='M17.6946 16.2002C18.322 16.8308 17.8753 17.913 16.9858 17.9268C15.4482 17.9505 13.8862 17.9868 12.2788 17.9971C11.7369 18.0006 11.2189 18.2206 10.8377 18.6059C9.7303 19.7249 8.58978 20.8151 7.42447 21.9628C6.78436 22.5932 5.68359 22.1428 5.68359 21.2443C5.68359 16.2568 5.68359 11.3772 5.68359 6.55071C5.68359 5.6585 6.76347 5.21291 7.3927 5.84545C10.813 9.28377 14.2599 12.7473 17.6946 16.2002Z' fill='%23FFC35F'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1588_56448' x='0.00390625' y='3.25171' width='24.1992' height='29.2681' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1588_56448'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1588_56448' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center center;`;
 
@@ -1097,29 +1026,28 @@ var clickStyle = `.clarity-click,
     transition: visibility 0s 1s, opacity 1s linear;
 }`;
 
-var InteractionHelper = /** @class */ (function () {
-    function InteractionHelper(state, layout, vnext) {
-        var _this = this;
+class InteractionHelper {
+    constructor(state, layout, vnext) {
         this.hoverId = null;
         this.targetId = null;
         this.points = [];
         this.scrollPointIndex = 0;
         this.clickAudio = null;
         this.visualizedClicks = [];
-        this.reset = function () {
-            _this.points = [];
-            _this.scrollPointIndex = 0;
-            _this.clickAudio = null;
-            _this.hoverId = null;
-            _this.targetId = null;
-            _this.layout.reset();
-        };
-        this.scroll = function (event) {
-            var data = event.data;
-            var doc = _this.state.window.document;
-            var de = doc.documentElement;
-            var scrollTarget = _this.layout.element(data.target) || doc.body;
-            var scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
+        this.reset = () => {
+            this.points = [];
+            this.scrollPointIndex = 0;
+            this.clickAudio = null;
+            this.hoverId = null;
+            this.targetId = null;
+            this.layout.reset();
+        };
+        this.scroll = (event) => {
+            let data = event.data;
+            let doc = this.state.window.document;
+            let de = doc.documentElement;
+            let scrollTarget = this.layout.element(data.target) || doc.body;
+            let scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
             if (scrollTarget && scrollable) {
                 scrollTarget.scrollTo(data.x, data.y);
                 // In an edge case, scrolling API doesn't work when css on HTML element has height:100% and overflow:auto
@@ -1132,36 +1060,36 @@ var InteractionHelper = /** @class */ (function () {
             // Position canvas relative to scroll events on the parent page
             if (scrollTarget === de || scrollTarget === doc.body) {
                 if (!scrollable) {
-                    _this.state.window.scrollTo(data.x, data.y);
+                    this.state.window.scrollTo(data.x, data.y);
                 }
-                var canvas = _this.overlay();
+                let canvas = this.overlay();
                 if (canvas) {
                     canvas.style.left = data.x + "px" /* Constant.Pixel */;
                     canvas.style.top = data.y + "px" /* Constant.Pixel */;
                     canvas.width = de.clientWidth;
                     canvas.height = de.clientHeight;
                 }
-                _this.scrollPointIndex = _this.points.length;
+                this.scrollPointIndex = this.points.length;
             }
         };
-        this.resize = function (event) {
-            var data = event.data;
-            var width = data.width;
-            var height = data.height;
-            if (_this.state.options.onresize) {
-                _this.state.options.onresize(width, height);
+        this.resize = (event) => {
+            let data = event.data;
+            let width = data.width;
+            let height = data.height;
+            if (this.state.options.onresize) {
+                this.state.options.onresize(width, height);
             }
         };
-        this.visibility = function (event) {
-            var doc = _this.state.window.document;
+        this.visibility = (event) => {
+            let doc = this.state.window.document;
             if (doc && doc.documentElement && event.data.visible === 0 /* BooleanFlag.False */) {
                 // if the website has styles on the <html> node then we need to save the reference to them before we change them
                 // to indicate the window was hidden. This is to ensure that we can restore the original styles when the window is visible again.
-                var bg = doc.documentElement.style.backgroundColor;
+                const bg = doc.documentElement.style.backgroundColor;
                 if (bg) {
                     doc.documentElement.setAttribute("data-clarity-background-color" /* Constant.OriginalBackgroundColor */, bg);
                 }
-                var o = doc.documentElement.style.opacity;
+                const o = doc.documentElement.style.opacity;
                 if (o) {
                     doc.documentElement.setAttribute("data-clarity-opacity" /* Constant.OriginalOpacity */, o);
                 }
@@ -1183,9 +1111,9 @@ var InteractionHelper = /** @class */ (function () {
                 }
             }
         };
-        this.input = function (event) {
-            var data = event.data;
-            var el = _this.layout.element(data.target);
+        this.input = (event) => {
+            let data = event.data;
+            let el = this.layout.element(data.target);
             if (el) {
                 switch (el.type) {
                     case "checkbox":
@@ -1201,73 +1129,72 @@ var InteractionHelper = /** @class */ (function () {
                 }
             }
         };
-        this.selection = function (event) {
-            var data = event.data;
-            var doc = _this.state.window.document;
-            var s = doc.getSelection();
+        this.selection = (event) => {
+            let data = event.data;
+            let doc = this.state.window.document;
+            let s = doc.getSelection();
             // Wrapping selection code inside a try / catch to avoid throwing errors when dealing with elements inside the shadow DOM.
             try {
-                s.setBaseAndExtent(_this.layout.element(data.start), data.startOffset, _this.layout.element(data.end), data.endOffset);
+                s.setBaseAndExtent(this.layout.element(data.start), data.startOffset, this.layout.element(data.end), data.endOffset);
             }
             catch (ex) {
                 console.warn("Exception encountered while trying to set selection: " + ex);
             }
         };
-        this.pointer = function (event) {
-            if (!_this.state.options.pointer) {
+        this.pointer = (event) => {
+            if (!this.state.options.pointer) {
                 return;
             }
-            var data = event.data;
-            var type = event.event;
-            var doc = _this.state.window.document;
-            var de = doc.documentElement;
-            var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
-            var pointerWidth = 29 /* Setting.PointerWidth */;
-            var pointerHeight = 38 /* Setting.PointerHeight */;
+            let data = event.data;
+            let type = event.event;
+            let doc = this.state.window.document;
+            let de = doc.documentElement;
+            let p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
+            let pointerWidth = 29 /* Setting.PointerWidth */;
+            let pointerHeight = 38 /* Setting.PointerHeight */;
             if (p === null) {
                 p = doc.createElement("DIV");
                 p.id = "clarity-pointer" /* Constant.PointerLayer */;
                 de.appendChild(p);
                 // Add custom styles
-                var style = doc.createElement("STYLE");
+                let style = doc.createElement("STYLE");
                 style.textContent =
                     "@keyframes pulsate-one { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(3, 3); opacity: 0; } }" +
                         "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
                         "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
                         "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
-                        "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
-                        "#".concat("clarity-pointer" /* Constant.PointerLayer */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, ") no-repeat left center; width: ").concat(pointerWidth, "px; height: ").concat(pointerHeight, "px; }") +
-                        _this.getClickLayerStyle() +
-                        ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
-                        ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
-                        ".".concat("clarity-pointer-click" /* Constant.PointerClickLayer */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Asset.Click */, "); }") +
-                        ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
-                        _this.getPointerStyle();
+                        `#${"clarity-interaction-canvas" /* Constant.InteractionCanvas */} { position: absolute; left: 0; top: 0; z-index: ${2147483647 /* Setting.ZIndex */}; background: none; }` +
+                        `#${"clarity-pointer" /* Constant.PointerLayer */} { position: absolute; z-index: ${2147483647 /* Setting.ZIndex */}; url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */}) no-repeat left center; width: ${pointerWidth}px; height: ${pointerHeight}px; }` +
+                        this.getClickLayerStyle() +
+                        `.${"clarity-touch" /* Constant.TouchLayer */} { background: radial-gradient(rgba(242,97,12,1), transparent); }` +
+                        `.${"clarity-touch-ring" /* Constant.TouchRing */} { background: transparent; border: 1px solid rgba(242,97,12,0.8); }` +
+                        `.${"clarity-pointer-click" /* Constant.PointerClickLayer */} { background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Asset.Click */}); }` +
+                        `.${"clarity-pointer-none" /* Constant.PointerNone */} { background: none; }` +
+                        this.getPointerStyle();
                 p.appendChild(style);
             }
             p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
             p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
-            var title = "Pointer";
+            let title = "Pointer";
             switch (type) {
                 case 9 /* Data.Event.Click */:
                     title = "Click";
-                    _this.visualizedClicks.push({
+                    this.visualizedClicks.push({
                         doc: de,
-                        click: _this.drawClick(doc, data.x, data.y, title),
+                        click: this.drawClick(doc, data.x, data.y, title),
                         time: event.time
                     });
-                    if (_this.state.options.onclickMismatch) {
-                        var originalTarget = _this.layout.element(data.target);
-                        var correctTargetHit = false;
-                        var elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
-                        for (var _i = 0, elementsUnderClick_1 = elementsUnderClick; _i < elementsUnderClick_1.length; _i++) {
-                            var elementUnderClick = elementsUnderClick_1[_i];
+                    if (this.state.options.onclickMismatch) {
+                        const originalTarget = this.layout.element(data.target);
+                        let correctTargetHit = false;
+                        const elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
+                        for (const elementUnderClick of elementsUnderClick) {
                             if (originalTarget === elementUnderClick) {
                                 correctTargetHit = true;
                             }
                         }
                         if (!correctTargetHit) {
-                            _this.state.options.onclickMismatch({
+                            this.state.options.onclickMismatch({
                                 time: event.time,
                                 x: data.x,
                                 y: data.y,
@@ -1279,9 +1206,9 @@ var InteractionHelper = /** @class */ (function () {
                     break;
                 case 16 /* Data.Event.DoubleClick */:
                     title = "Click";
-                    _this.visualizedClicks.push({
+                    this.visualizedClicks.push({
                         doc: de,
-                        click: _this.drawClick(doc, data.x, data.y, title),
+                        click: this.drawClick(doc, data.x, data.y, title),
                         time: event.time
                     });
                     p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -1290,9 +1217,9 @@ var InteractionHelper = /** @class */ (function () {
                 case 18 /* Data.Event.TouchEnd */:
                 case 20 /* Data.Event.TouchCancel */:
                     title = "Touch";
-                    _this.visualizedClicks.push({
+                    this.visualizedClicks.push({
                         doc: de,
-                        click: _this.drawTouch(doc, data.x, data.y, title),
+                        click: this.drawTouch(doc, data.x, data.y, title),
                         time: event.time
                     });
                     p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -1304,37 +1231,37 @@ var InteractionHelper = /** @class */ (function () {
                 case 12 /* Data.Event.MouseMove */:
                     title = "Mouse Move";
                     p.className = "clarity-pointer-move" /* Constant.PointerMove */;
-                    _this.addPoint({ time: event.time, x: data.x, y: data.y });
-                    _this.targetId = data.target;
+                    this.addPoint({ time: event.time, x: data.x, y: data.y });
+                    this.targetId = data.target;
                     break;
                 default:
                     p.className = "clarity-pointer-move" /* Constant.PointerMove */;
                     break;
             }
-            p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
+            p.setAttribute("title" /* Constant.Title */, `${title} (${data.x}${"px" /* Constant.Pixel */}, ${data.y}${"px" /* Constant.Pixel */})`);
         };
-        this.clearOldClickVisualizations = function (currentTimestamp) {
-            if (_this.vnext) {
-                while (_this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
-                    var visualizedClick = _this.visualizedClicks.shift();
-                    _this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
+        this.clearOldClickVisualizations = (currentTimestamp) => {
+            if (this.vnext) {
+                while (this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
+                    const visualizedClick = this.visualizedClicks.shift();
+                    this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
                 }
-                var tooOldClicks = _this.visualizedClicks.filter(function (click) { return currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */; });
-                tooOldClicks.forEach(function (click) {
-                    _this.fadeOutElement(click.click, click.doc);
-                    _this.visualizedClicks.splice(_this.visualizedClicks.indexOf(click), 1);
+                var tooOldClicks = this.visualizedClicks.filter(click => currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */);
+                tooOldClicks.forEach(click => {
+                    this.fadeOutElement(click.click, click.doc);
+                    this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
                 });
             }
         };
-        this.fadeOutElement = function (element, document) {
+        this.fadeOutElement = (element, document) => {
             element.classList.add("clarity-click-hidden");
-            setTimeout(function () { document.removeChild(element); }, 10000);
+            setTimeout(() => { document.removeChild(element); }, 10000);
         };
-        this.hover = function () {
-            if (_this.targetId && _this.targetId !== _this.hoverId) {
-                var depth = 0;
+        this.hover = () => {
+            if (this.targetId && this.targetId !== this.hoverId) {
+                let depth = 0;
                 // First, remove any previous hover class assignments
-                var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
+                let hoverNode = this.hoverId ? this.layout.element(this.hoverId) : null;
                 while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
                     if ("removeAttribute" in hoverNode) {
                         hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
@@ -1344,7 +1271,7 @@ var InteractionHelper = /** @class */ (function () {
                 }
                 // Then, add hover class on elements that are below the pointer
                 depth = 0;
-                var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
+                let targetNode = this.targetId ? this.layout.element(this.targetId) : null;
                 while (targetNode && depth < 7 /* Setting.HoverDepth */) {
                     if ("setAttribute" in targetNode) {
                         targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
@@ -1353,30 +1280,30 @@ var InteractionHelper = /** @class */ (function () {
                     depth++;
                 }
                 // Finally, update hoverId to reflect the new node
-                _this.hoverId = _this.targetId;
+                this.hoverId = this.targetId;
             }
         };
-        this.addPoint = function (point) {
-            var last = _this.points.length > 0 ? _this.points[_this.points.length - 1] : null;
+        this.addPoint = (point) => {
+            let last = this.points.length > 0 ? this.points[this.points.length - 1] : null;
             if (last && point.x === last.x && point.y === last.y) {
                 last.time = point.time;
             }
             else {
-                _this.points.push(point);
+                this.points.push(point);
             }
         };
-        this.drawTouch = function (doc, x, y, title) {
-            var de = doc.documentElement;
-            var touch = doc.createElement("DIV");
+        this.drawTouch = (doc, x, y, title) => {
+            let de = doc.documentElement;
+            let touch = doc.createElement("DIV");
             touch.className = "clarity-touch" /* Constant.TouchLayer */;
-            touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
+            touch.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
             touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             touch.style.animation = "disappear 1 1s";
             touch.style.animationFillMode = "forwards";
             de.appendChild(touch);
             // First pulsating ring
-            var ringOne = touch.cloneNode();
+            let ringOne = touch.cloneNode();
             ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
             ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
             ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
@@ -1385,48 +1312,48 @@ var InteractionHelper = /** @class */ (function () {
             touch.appendChild(ringOne);
             return touch;
         };
-        this.drawClick = function (doc, x, y, title) {
-            var de = doc.documentElement;
-            var click = doc.createElement("DIV");
+        this.drawClick = (doc, x, y, title) => {
+            let de = doc.documentElement;
+            let click = doc.createElement("DIV");
             click.className = "clarity-click" /* Constant.ClickLayer */;
-            click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
+            click.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
             click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             // First pulsating ring
-            var ringOne = click.cloneNode();
+            let ringOne = click.cloneNode();
             ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
             ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
             ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
             ringOne.style.animation = "pulsate-one 1 1s";
             ringOne.style.animationFillMode = "forwards";
             click.appendChild(ringOne);
-            if (_this.vnext) {
-                var center = doc.createElement("DIV");
-                center.className = "".concat("clarity-click" /* Constant.ClickLayer */, "-center");
+            if (this.vnext) {
+                let center = doc.createElement("DIV");
+                center.className = `${"clarity-click" /* Constant.ClickLayer */}-center`;
                 click.appendChild(center);
             }
             else {
                 // Second pulsating ring
-                var ringTwo = ringOne.cloneNode();
+                let ringTwo = ringOne.cloneNode();
                 ringTwo.style.animation = "pulsate-two 1 1s";
                 click.appendChild(ringTwo);
             }
             de.appendChild(click);
             // Play sound
             if (typeof Audio !== "undefined" /* Constant.Undefined */) {
-                if (_this.clickAudio === null) {
-                    _this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
-                    click.appendChild(_this.clickAudio);
+                if (this.clickAudio === null) {
+                    this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
+                    click.appendChild(this.clickAudio);
                 }
-                _this.clickAudio.play();
+                this.clickAudio.play();
             }
             return click;
         };
-        this.overlay = function () {
+        this.overlay = () => {
             // Create canvas for visualizing interactions
-            var doc = _this.state.window.document;
-            var de = doc.documentElement;
-            var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
+            let doc = this.state.window.document;
+            let de = doc.documentElement;
+            let canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
             if (canvas === null) {
                 canvas = doc.createElement("canvas");
                 canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
@@ -1440,13 +1367,13 @@ var InteractionHelper = /** @class */ (function () {
             }
             return canvas;
         };
-        this.match = function (time) {
-            var p = [];
-            for (var i = _this.points.length - 1; i > 0; i--) {
+        this.match = (time) => {
+            let p = [];
+            for (let i = this.points.length - 1; i > 0; i--) {
                 // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
                 // We reset the trail after every scroll event to avoid drawing weird looking trail.
-                if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
-                    p.push(_this.points[i]);
+                if (i >= this.scrollPointIndex && time - this.points[i].time < 3000 /* Setting.PixelLife */) {
+                    p.push(this.points[i]);
                 }
                 else {
                     break;
@@ -1454,32 +1381,32 @@ var InteractionHelper = /** @class */ (function () {
             }
             return p.slice(0, 75 /* Setting.MaxTrailPoints */);
         };
-        this.trail = function (now) {
-            var canvas = _this.overlay();
-            if (_this.state.options.canvas && canvas) {
-                var ctx = canvas.getContext('2d');
-                var path = _this.state.options.keyframes ? _this.curve(_this.points.reverse()) : _this.curve(_this.match(now));
+        this.trail = (now) => {
+            const canvas = this.overlay();
+            if (this.state.options.canvas && canvas) {
+                const ctx = canvas.getContext('2d');
+                const path = this.state.options.keyframes ? this.curve(this.points.reverse()) : this.curve(this.match(now));
                 // Update hovered elements
-                _this.hover();
+                this.hover();
                 // We need at least two points to create a line
                 if (path.length > 1) {
-                    var last = path[0];
+                    let last = path[0];
                     // Start off by clearing whatever was on the canvas before
                     // The current implementation is inefficient. We have to redraw canvas all over again for every point.
                     // In future we should batch pointer events and minimize the number of times we have to redraw canvas.
                     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-                    var count = path.length;
-                    var offsetX = canvas.offsetLeft;
-                    var offsetY = canvas.offsetTop;
-                    for (var i = 1; i < count; i++) {
-                        var current = path[i];
+                    let count = path.length;
+                    let offsetX = canvas.offsetLeft;
+                    let offsetY = canvas.offsetTop;
+                    for (let i = 1; i < count; i++) {
+                        let current = path[i];
                         // Compute percentage position of these points compared to all points in the path
-                        var lastFactor = 1 - ((i - 1) / count);
-                        var currentFactor = 1 - (i / count);
+                        let lastFactor = 1 - ((i - 1) / count);
+                        let currentFactor = 1 - (i / count);
                         // Generate a color gradient that goes from red -> yellow -> green -> light blue -> blue
-                        var gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
-                        gradient.addColorStop(1, _this.color(currentFactor));
-                        gradient.addColorStop(0, _this.color(lastFactor));
+                        let gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
+                        gradient.addColorStop(1, this.color(currentFactor));
+                        gradient.addColorStop(0, this.color(lastFactor));
                         // Line width of the trail shrinks as the position of the point goes farther away.
                         ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
                         ctx.lineCap = "round" /* Constant.Round */;
@@ -1497,25 +1424,25 @@ var InteractionHelper = /** @class */ (function () {
                     }
                 }
                 // If we are only rendering key frames, clear points array after each key frame
-                if (_this.state.options.keyframes) {
-                    _this.points = [];
+                if (this.state.options.keyframes) {
+                    this.points = [];
                 }
             }
         };
-        this.color = function (factor) {
-            var s = InteractionHelper.TRAIL_START_COLOR;
-            var e = InteractionHelper.TRAIL_END_COLOR;
-            var c = [];
-            for (var i = 0; i < 3; i++) {
+        this.color = (factor) => {
+            let s = InteractionHelper.TRAIL_START_COLOR;
+            let e = InteractionHelper.TRAIL_END_COLOR;
+            let c = [];
+            for (let i = 0; i < 3; i++) {
                 c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
             }
-            return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
+            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${factor})`;
         };
         // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
-        this.curve = function (path) {
-            var tension = 0.5;
-            var p = [];
-            var output = [];
+        this.curve = (path) => {
+            const tension = 0.5;
+            let p = [];
+            let output = [];
             // Make a copy of the input points so we don't make any side effects
             p = path.slice(0);
             // The algorithm require a valid previous and next point for each point in the original input
@@ -1524,57 +1451,56 @@ var InteractionHelper = /** @class */ (function () {
             p.unshift(path[0]);
             p.push(path[path.length - 1]);
             // Loop through the points, and generate intermediate points to make a smooth trail
-            for (var i = 1; i < p.length - 2; i++) {
-                var time = p[i].time;
-                var segments = Math.max(Math.min(Math.round(_this.distance(p[i], p[i - 1])), 10), 1);
-                for (var t = 0; t <= segments; t++) {
+            for (let i = 1; i < p.length - 2; i++) {
+                const time = p[i].time;
+                const segments = Math.max(Math.min(Math.round(this.distance(p[i], p[i - 1])), 10), 1);
+                for (let t = 0; t <= segments; t++) {
                     // Compute tension vectors
-                    var t1 = { time: time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
-                    var t2 = { time: time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
-                    var step = t / segments;
+                    let t1 = { time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
+                    let t2 = { time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
+                    let step = t / segments;
                     // Compute cardinals
-                    var c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
-                    var c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
-                    var c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
-                    var c4 = Math.pow(step, 3) - Math.pow(step, 2);
+                    let c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
+                    let c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
+                    let c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
+                    let c4 = Math.pow(step, 3) - Math.pow(step, 2);
                     // Compute new point with common control vectors
-                    var x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
-                    var y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
-                    output.push({ time: time, x: x, y: y });
+                    let x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
+                    let y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
+                    output.push({ time, x, y });
                 }
             }
             return output;
         };
-        this.distance = function (a, b) {
-            var dx = a.x - b.x;
-            var dy = a.y - b.y;
+        this.distance = (a, b) => {
+            const dx = a.x - b.x;
+            const dy = a.y - b.y;
             return Math.sqrt(dx * dx + dy * dy);
         };
-        this.getPointerStyle = function () {
-            if (_this.vnext) {
-                return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { ").concat(pointerSvg, " }");
+        this.getPointerStyle = () => {
+            if (this.vnext) {
+                return `.${"clarity-pointer-move" /* Constant.PointerMove */} { ${pointerSvg} }`;
             }
             else {
-                return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, "); }");
+                return `.${"clarity-pointer-move" /* Constant.PointerMove */} { background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */}); }`;
             }
         };
-        this.getClickLayerStyle = function () {
-            if (_this.vnext) {
+        this.getClickLayerStyle = () => {
+            if (this.vnext) {
                 return clickStyle;
             }
             else {
-                return ".".concat("clarity-click" /* Constant.ClickLayer */, ", .").concat("clarity-click-ring" /* Constant.ClickRing */, ", .").concat("clarity-touch" /* Constant.TouchLayer */, ", .").concat("clarity-touch-ring" /* Constant.TouchRing */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ").concat(22 /* Setting.ClickRadius */, "px; height: ").concat(22 /* Setting.ClickRadius */, "px;}") +
-                    ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }");
+                return `.${"clarity-click" /* Constant.ClickLayer */}, .${"clarity-click-ring" /* Constant.ClickRing */}, .${"clarity-touch" /* Constant.TouchLayer */}, .${"clarity-touch-ring" /* Constant.TouchRing */} { position: absolute; z-index: ${2147483647 /* Setting.ZIndex */}; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ${22 /* Setting.ClickRadius */}px; height: ${22 /* Setting.ClickRadius */}px;}` +
+                    `.${"clarity-click-ring" /* Constant.ClickRing */} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
             }
         };
         this.state = state;
         this.layout = layout;
         this.vnext = vnext;
     }
-    InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
-    InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
-    return InteractionHelper;
-}());
+}
+InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
+InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
 
 var sharedStyle = `iframe[data-clarity-unavailable-small], iframe[data-clarity-unavailable], img[data-clarity-blob-hide=sb], img[data-clarity-blob-hide=lb], img[data-clarity-hide=sb], img[data-clarity-hide=lb] {
     background-color: #FBFBFE;
@@ -1667,7 +1593,7 @@ var imageMaskedSvgItalian = `background: url("data:image/svg+xml,%3Csvg width='1
 
 var imageMaskedSvgPortuguese = `background: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='80' fill='%23FBFBFE'/%3E%3Cpath d='M40.2197 10.2197C39.9534 10.4859 39.9292 10.9026 40.1471 11.1962L40.2197 11.2803L44.2542 15.3149C42.3322 16.6644 40.8958 18.6799 40.2989 21.0644C40.1983 21.4662 40.4425 21.8735 40.8443 21.9741C41.2461 22.0746 41.6534 21.8305 41.754 21.4286C42.2835 19.3135 43.5911 17.5395 45.3342 16.3945L47.1438 18.2043C46.4363 18.9258 46 19.9143 46 21.0046C46 23.2138 47.7909 25.0046 50 25.0046C51.0904 25.0046 52.0788 24.5683 52.8004 23.8608L58.7197 29.7803C59.0126 30.0732 59.4874 30.0732 59.7803 29.7803C60.0466 29.5141 60.0708 29.0974 59.8529 28.8038L59.7803 28.7197L53.6668 22.6055L53.668 22.604L52.4679 21.4061L49.598 18.5368L49.6 18.536L46.7188 15.6578L46.72 15.656L45.5867 14.5255L41.2803 10.2197C40.9874 9.92678 40.5126 9.92678 40.2197 10.2197ZM48.2041 19.2655L51.7392 22.8006C51.2892 23.2364 50.6759 23.5046 50 23.5046C48.6193 23.5046 47.5 22.3853 47.5 21.0046C47.5 20.3287 47.7682 19.7154 48.2041 19.2655ZM50 13.5C48.9997 13.5 48.0291 13.6481 47.1111 13.925L48.3481 15.1612C48.8839 15.0553 49.4364 15 50 15C53.9231 15 57.3099 17.6803 58.2471 21.4332C58.3475 21.835 58.7546 22.0794 59.1565 21.9791C59.5584 21.8787 59.8028 21.4716 59.7024 21.0697C58.5994 16.6527 54.6155 13.5 50 13.5ZM50.1947 17.0093L53.996 20.81C53.8942 18.7531 52.2472 17.1076 50.1947 17.0093Z' fill='%23020057'/%3E%3Cpath d='M23.3281 53.1406C22.1367 53.1406 21.1816 52.748 20.4629 51.9629C19.748 51.1777 19.3906 50.1562 19.3906 48.8984C19.3906 47.5469 19.7559 46.4688 20.4863 45.6641C21.2168 44.8594 22.2109 44.457 23.4688 44.457C24.6289 44.457 25.5625 44.8477 26.2695 45.6289C26.9805 46.4102 27.3359 47.4316 27.3359 48.6934C27.3359 50.0645 26.9727 51.1484 26.2461 51.9453C25.5195 52.7422 24.5469 53.1406 23.3281 53.1406ZM23.3984 45.3477C22.5156 45.3477 21.7988 45.666 21.248 46.3027C20.6973 46.9395 20.4219 47.7754 20.4219 48.8105C20.4219 49.8457 20.6895 50.6797 21.2246 51.3125C21.7637 51.9414 22.4648 52.2559 23.3281 52.2559C24.25 52.2559 24.9766 51.9551 25.5078 51.3535C26.0391 50.752 26.3047 49.9102 26.3047 48.8281C26.3047 47.7188 26.0469 46.8613 25.5312 46.2559C25.0156 45.6504 24.3047 45.3477 23.3984 45.3477ZM36.9746 50.2402H32.7383C32.7539 50.9082 32.9336 51.4238 33.2773 51.7871C33.6211 52.1504 34.0938 52.332 34.6953 52.332C35.3711 52.332 35.9922 52.1094 36.5586 51.6641V52.5664C36.0312 52.9492 35.334 53.1406 34.4668 53.1406C33.6191 53.1406 32.9531 52.8691 32.4688 52.3262C31.9844 51.7793 31.7422 51.0117 31.7422 50.0234C31.7422 49.0898 32.0059 48.3301 32.5332 47.7441C33.0645 47.1543 33.7227 46.8594 34.5078 46.8594C35.293 46.8594 35.9004 47.1133 36.3301 47.6211C36.7598 48.1289 36.9746 48.834 36.9746 49.7363V50.2402ZM35.9902 49.4258C35.9863 48.8711 35.8516 48.4395 35.5859 48.1309C35.3242 47.8223 34.959 47.668 34.4902 47.668C34.0371 47.668 33.6523 47.8301 33.3359 48.1543C33.0195 48.4785 32.8242 48.9023 32.75 49.4258H35.9902ZM39.3945 53H38.4336V44.1172H39.3945V53ZM46.1621 50.2402H41.9258C41.9414 50.9082 42.1211 51.4238 42.4648 51.7871C42.8086 52.1504 43.2812 52.332 43.8828 52.332C44.5586 52.332 45.1797 52.1094 45.7461 51.6641V52.5664C45.2188 52.9492 44.5215 53.1406 43.6543 53.1406C42.8066 53.1406 42.1406 52.8691 41.6562 52.3262C41.1719 51.7793 40.9297 51.0117 40.9297 50.0234C40.9297 49.0898 41.1934 48.3301 41.7207 47.7441C42.252 47.1543 42.9102 46.8594 43.6953 46.8594C44.4805 46.8594 45.0879 47.1133 45.5176 47.6211C45.9473 48.1289 46.1621 48.834 46.1621 49.7363V50.2402ZM45.1777 49.4258C45.1738 48.8711 45.0391 48.4395 44.7734 48.1309C44.5117 47.8223 44.1465 47.668 43.6777 47.668C43.2246 47.668 42.8398 47.8301 42.5234 48.1543C42.207 48.4785 42.0117 48.9023 41.9375 49.4258H45.1777ZM56.1406 53H55.1797V49.5547C55.1797 48.8906 55.0762 48.4102 54.8691 48.1133C54.666 47.8164 54.3223 47.668 53.8379 47.668C53.4277 47.668 53.0781 47.8555 52.7891 48.2305C52.5039 48.6055 52.3613 49.0547 52.3613 49.5781V53H51.4004V49.4375C51.4004 48.2578 50.9453 47.668 50.0352 47.668C49.6133 47.668 49.2656 47.8457 48.9922 48.2012C48.7188 48.5527 48.582 49.0117 48.582 49.5781V53H47.6211V47H48.582V47.9492H48.6055C49.0312 47.2227 49.6523 46.8594 50.4688 46.8594C50.8789 46.8594 51.2363 46.9746 51.541 47.2051C51.8457 47.4316 52.0547 47.7305 52.168 48.1016C52.6133 47.2734 53.2773 46.8594 54.1602 46.8594C55.4805 46.8594 56.1406 47.6738 56.1406 49.3027V53ZM62.7793 50.2402H58.543C58.5586 50.9082 58.7383 51.4238 59.082 51.7871C59.4258 52.1504 59.8984 52.332 60.5 52.332C61.1758 52.332 61.7969 52.1094 62.3633 51.6641V52.5664C61.8359 52.9492 61.1387 53.1406 60.2715 53.1406C59.4238 53.1406 58.7578 52.8691 58.2734 52.3262C57.7891 51.7793 57.5469 51.0117 57.5469 50.0234C57.5469 49.0898 57.8105 48.3301 58.3379 47.7441C58.8691 47.1543 59.5273 46.8594 60.3125 46.8594C61.0977 46.8594 61.7051 47.1133 62.1348 47.6211C62.5645 48.1289 62.7793 48.834 62.7793 49.7363V50.2402ZM61.7949 49.4258C61.791 48.8711 61.6562 48.4395 61.3906 48.1309C61.1289 47.8223 60.7637 47.668 60.2949 47.668C59.8418 47.668 59.457 47.8301 59.1406 48.1543C58.8242 48.4785 58.6289 48.9023 58.5547 49.4258H61.7949ZM69.2188 53H68.2578V49.5781C68.2578 48.3047 67.793 47.668 66.8633 47.668C66.3828 47.668 65.9844 47.8496 65.668 48.2129C65.3555 48.5723 65.1992 49.0273 65.1992 49.5781V53H64.2383V47H65.1992V47.9961H65.2227C65.6758 47.2383 66.332 46.8594 67.1914 46.8594C67.8477 46.8594 68.3496 47.0723 68.6973 47.498C69.0449 47.9199 69.2188 48.5312 69.2188 49.332V53ZM73.8184 52.9414C73.5918 53.0664 73.293 53.1289 72.9219 53.1289C71.8711 53.1289 71.3457 52.543 71.3457 51.3711V47.8203H70.3145V47H71.3457V45.5352L72.3066 45.2246V47H73.8184V47.8203H72.3066V51.2012C72.3066 51.6035 72.375 51.8906 72.5117 52.0625C72.6484 52.2344 72.875 52.3203 73.1914 52.3203C73.4336 52.3203 73.6426 52.2539 73.8184 52.1211V52.9414ZM77.6094 53.1406C76.7227 53.1406 76.0137 52.8613 75.4824 52.3027C74.9551 51.7402 74.6914 50.9961 74.6914 50.0703C74.6914 49.0625 74.9668 48.2754 75.5176 47.709C76.0684 47.1426 76.8125 46.8594 77.75 46.8594C78.6445 46.8594 79.3418 47.1348 79.8418 47.6855C80.3457 48.2363 80.5977 49 80.5977 49.9766C80.5977 50.9336 80.3262 51.7012 79.7832 52.2793C79.2441 52.8535 78.5195 53.1406 77.6094 53.1406ZM77.6797 47.668C77.0625 47.668 76.5742 47.8789 76.2148 48.3008C75.8555 48.7188 75.6758 49.2969 75.6758 50.0352C75.6758 50.7461 75.8574 51.3066 76.2207 51.7168C76.584 52.127 77.0703 52.332 77.6797 52.332C78.3008 52.332 78.7773 52.1309 79.1094 51.7285C79.4453 51.3262 79.6133 50.7539 79.6133 50.0117C79.6133 49.2617 79.4453 48.6836 79.1094 48.2773C78.7773 47.8711 78.3008 47.668 77.6797 47.668ZM14.5918 66.2402H10.3555C10.3711 66.9082 10.5508 67.4238 10.8945 67.7871C11.2383 68.1504 11.7109 68.332 12.3125 68.332C12.9883 68.332 13.6094 68.1094 14.1758 67.6641V68.5664C13.6484 68.9492 12.9512 69.1406 12.084 69.1406C11.2363 69.1406 10.5703 68.8691 10.0859 68.3262C9.60156 67.7793 9.35938 67.0117 9.35938 66.0234C9.35938 65.0898 9.62305 64.3301 10.1504 63.7441C10.6816 63.1543 11.3398 62.8594 12.125 62.8594C12.9102 62.8594 13.5176 63.1133 13.9473 63.6211C14.377 64.1289 14.5918 64.834 14.5918 65.7363V66.2402ZM13.6074 65.4258C13.6035 64.8711 13.4688 64.4395 13.2031 64.1309C12.9414 63.8223 12.5762 63.668 12.1074 63.668C11.6543 63.668 11.2695 63.8301 10.9531 64.1543C10.6367 64.4785 10.4414 64.9023 10.3672 65.4258H13.6074ZM15.6875 68.7832V67.752C16.2109 68.1387 16.7871 68.332 17.416 68.332C18.2598 68.332 18.6816 68.0508 18.6816 67.4883C18.6816 67.3281 18.6445 67.1934 18.5703 67.084C18.5 66.9707 18.4023 66.8711 18.2773 66.7852C18.1562 66.6992 18.0117 66.623 17.8438 66.5566C17.6797 66.4863 17.502 66.4141 17.3105 66.3398C17.0449 66.2344 16.8105 66.1289 16.6074 66.0234C16.4082 65.9141 16.2402 65.793 16.1035 65.6602C15.9707 65.5234 15.8691 65.3691 15.7988 65.1973C15.7324 65.0254 15.6992 64.8242 15.6992 64.5938C15.6992 64.3125 15.7637 64.0645 15.8926 63.8496C16.0215 63.6309 16.1934 63.4492 16.4082 63.3047C16.623 63.1562 16.8672 63.0449 17.1406 62.9707C17.418 62.8965 17.7031 62.8594 17.9961 62.8594C18.5156 62.8594 18.9805 62.9492 19.3906 63.1289V64.1016C18.9492 63.8125 18.4414 63.668 17.8672 63.668C17.6875 63.668 17.5254 63.6895 17.3809 63.7324C17.2363 63.7715 17.1113 63.8281 17.0059 63.9023C16.9043 63.9766 16.8242 64.0664 16.7656 64.1719C16.7109 64.2734 16.6836 64.3867 16.6836 64.5117C16.6836 64.668 16.7109 64.7988 16.7656 64.9043C16.8242 65.0098 16.9082 65.1035 17.0176 65.1855C17.127 65.2676 17.2598 65.3418 17.416 65.4082C17.5723 65.4746 17.75 65.5469 17.9492 65.625C18.2148 65.7266 18.4531 65.832 18.6641 65.9414C18.875 66.0469 19.0547 66.168 19.2031 66.3047C19.3516 66.4375 19.4648 66.5918 19.543 66.7676C19.625 66.9434 19.666 67.1523 19.666 67.3945C19.666 67.6914 19.5996 67.9492 19.4668 68.168C19.3379 68.3867 19.1641 68.5684 18.9453 68.7129C18.7266 68.8574 18.4746 68.9648 18.1895 69.0352C17.9043 69.1055 17.6055 69.1406 17.293 69.1406C16.6758 69.1406 16.1406 69.0215 15.6875 68.7832ZM23.9316 68.9414C23.7051 69.0664 23.4062 69.1289 23.0352 69.1289C21.9844 69.1289 21.459 68.543 21.459 67.3711V63.8203H20.4277V63H21.459V61.5352L22.4199 61.2246V63H23.9316V63.8203H22.4199V67.2012C22.4199 67.6035 22.4883 67.8906 22.625 68.0625C22.7617 68.2344 22.9883 68.3203 23.3047 68.3203C23.5469 68.3203 23.7559 68.2539 23.9316 68.1211V68.9414ZM29.5098 69H28.5488V68.0625H28.5254C28.1074 68.7812 27.4922 69.1406 26.6797 69.1406C26.082 69.1406 25.6133 68.9824 25.2734 68.666C24.9375 68.3496 24.7695 67.9297 24.7695 67.4062C24.7695 66.2852 25.4297 65.6328 26.75 65.4492L28.5488 65.1973C28.5488 64.1777 28.1367 63.668 27.3125 63.668C26.5898 63.668 25.9375 63.9141 25.3555 64.4062V63.4219C25.9453 63.0469 26.625 62.8594 27.3945 62.8594C28.8047 62.8594 29.5098 63.6055 29.5098 65.0977V69ZM28.5488 65.9648L27.1016 66.1641C26.6562 66.2266 26.3203 66.3379 26.0938 66.498C25.8672 66.6543 25.7539 66.9336 25.7539 67.3359C25.7539 67.6289 25.8574 67.8691 26.0645 68.0566C26.2754 68.2402 26.5547 68.332 26.9023 68.332C27.3789 68.332 27.7715 68.166 28.0801 67.834C28.3926 67.498 28.5488 67.0742 28.5488 66.5625V65.9648ZM28.6777 59.9414L27.1426 61.8633H26.3984L27.7051 59.9414H28.6777ZM43.1328 69H42.1719V65.5547C42.1719 64.8906 42.0684 64.4102 41.8613 64.1133C41.6582 63.8164 41.3145 63.668 40.8301 63.668C40.4199 63.668 40.0703 63.8555 39.7812 64.2305C39.4961 64.6055 39.3535 65.0547 39.3535 65.5781V69H38.3926V65.4375C38.3926 64.2578 37.9375 63.668 37.0273 63.668C36.6055 63.668 36.2578 63.8457 35.9844 64.2012C35.7109 64.5527 35.5742 65.0117 35.5742 65.5781V69H34.6133V63H35.5742V63.9492H35.5977C36.0234 63.2227 36.6445 62.8594 37.4609 62.8594C37.8711 62.8594 38.2285 62.9746 38.5332 63.2051C38.8379 63.4316 39.0469 63.7305 39.1602 64.1016C39.6055 63.2734 40.2695 62.8594 41.1523 62.8594C42.4727 62.8594 43.1328 63.6738 43.1328 65.3027V69ZM49.2441 69H48.2832V68.0625H48.2598C47.8418 68.7812 47.2266 69.1406 46.4141 69.1406C45.8164 69.1406 45.3477 68.9824 45.0078 68.666C44.6719 68.3496 44.5039 67.9297 44.5039 67.4062C44.5039 66.2852 45.1641 65.6328 46.4844 65.4492L48.2832 65.1973C48.2832 64.1777 47.8711 63.668 47.0469 63.668C46.3242 63.668 45.6719 63.9141 45.0898 64.4062V63.4219C45.6797 63.0469 46.3594 62.8594 47.1289 62.8594C48.5391 62.8594 49.2441 63.6055 49.2441 65.0977V69ZM48.2832 65.9648L46.8359 66.1641C46.3906 66.2266 46.0547 66.3379 45.8281 66.498C45.6016 66.6543 45.4883 66.9336 45.4883 67.3359C45.4883 67.6289 45.5918 67.8691 45.7988 68.0566C46.0098 68.2402 46.2891 68.332 46.6367 68.332C47.1133 68.332 47.5059 68.166 47.8145 67.834C48.127 67.498 48.2832 67.0742 48.2832 66.5625V65.9648ZM50.6914 68.7832V67.752C51.2148 68.1387 51.791 68.332 52.4199 68.332C53.2637 68.332 53.6855 68.0508 53.6855 67.4883C53.6855 67.3281 53.6484 67.1934 53.5742 67.084C53.5039 66.9707 53.4062 66.8711 53.2812 66.7852C53.1602 66.6992 53.0156 66.623 52.8477 66.5566C52.6836 66.4863 52.5059 66.4141 52.3145 66.3398C52.0488 66.2344 51.8145 66.1289 51.6113 66.0234C51.4121 65.9141 51.2441 65.793 51.1074 65.6602C50.9746 65.5234 50.873 65.3691 50.8027 65.1973C50.7363 65.0254 50.7031 64.8242 50.7031 64.5938C50.7031 64.3125 50.7676 64.0645 50.8965 63.8496C51.0254 63.6309 51.1973 63.4492 51.4121 63.3047C51.627 63.1562 51.8711 63.0449 52.1445 62.9707C52.4219 62.8965 52.707 62.8594 53 62.8594C53.5195 62.8594 53.9844 62.9492 54.3945 63.1289V64.1016C53.9531 63.8125 53.4453 63.668 52.8711 63.668C52.6914 63.668 52.5293 63.6895 52.3848 63.7324C52.2402 63.7715 52.1152 63.8281 52.0098 63.9023C51.9082 63.9766 51.8281 64.0664 51.7695 64.1719C51.7148 64.2734 51.6875 64.3867 51.6875 64.5117C51.6875 64.668 51.7148 64.7988 51.7695 64.9043C51.8281 65.0098 51.9121 65.1035 52.0215 65.1855C52.1309 65.2676 52.2637 65.3418 52.4199 65.4082C52.5762 65.4746 52.7539 65.5469 52.9531 65.625C53.2188 65.7266 53.457 65.832 53.668 65.9414C53.8789 66.0469 54.0586 66.168 54.207 66.3047C54.3555 66.4375 54.4688 66.5918 54.5469 66.7676C54.6289 66.9434 54.6699 67.1523 54.6699 67.3945C54.6699 67.6914 54.6035 67.9492 54.4707 68.168C54.3418 68.3867 54.168 68.5684 53.9492 68.7129C53.7305 68.8574 53.4785 68.9648 53.1934 69.0352C52.9082 69.1055 52.6094 69.1406 52.2969 69.1406C51.6797 69.1406 51.1445 69.0215 50.6914 68.7832ZM60.2422 68.7246C59.7812 69.002 59.2344 69.1406 58.6016 69.1406C57.7461 69.1406 57.0547 68.8633 56.5273 68.3086C56.0039 67.75 55.7422 67.0273 55.7422 66.1406C55.7422 65.1523 56.0254 64.3594 56.5918 63.7617C57.1582 63.1602 57.9141 62.8594 58.8594 62.8594C59.3867 62.8594 59.8516 62.957 60.2539 63.1523V64.1367C59.8086 63.8242 59.332 63.668 58.8242 63.668C58.2109 63.668 57.707 63.8887 57.3125 64.3301C56.9219 64.7676 56.7266 65.3438 56.7266 66.0586C56.7266 66.7617 56.9102 67.3164 57.2773 67.7227C57.6484 68.1289 58.1445 68.332 58.7656 68.332C59.2891 68.332 59.7812 68.1582 60.2422 67.8105V68.7246ZM65.9902 69H65.0293V68.0625H65.0059C64.5879 68.7812 63.9727 69.1406 63.1602 69.1406C62.5625 69.1406 62.0938 68.9824 61.7539 68.666C61.418 68.3496 61.25 67.9297 61.25 67.4062C61.25 66.2852 61.9102 65.6328 63.2305 65.4492L65.0293 65.1973C65.0293 64.1777 64.6172 63.668 63.793 63.668C63.0703 63.668 62.418 63.9141 61.8359 64.4062V63.4219C62.4258 63.0469 63.1055 62.8594 63.875 62.8594C65.2852 62.8594 65.9902 63.6055 65.9902 65.0977V69ZM65.0293 65.9648L63.582 66.1641C63.1367 66.2266 62.8008 66.3379 62.5742 66.498C62.3477 66.6543 62.2344 66.9336 62.2344 67.3359C62.2344 67.6289 62.3379 67.8691 62.5449 68.0566C62.7559 68.2402 63.0352 68.332 63.3828 68.332C63.8594 68.332 64.252 68.166 64.5605 67.834C64.873 67.498 65.0293 67.0742 65.0293 66.5625V65.9648ZM70.9297 63.9727C70.7617 63.8438 70.5195 63.7793 70.2031 63.7793C69.793 63.7793 69.4492 63.9727 69.1719 64.3594C68.8984 64.7461 68.7617 65.2734 68.7617 65.9414V69H67.8008V63H68.7617V64.2363H68.7852C68.9219 63.8145 69.1309 63.4863 69.4121 63.252C69.6934 63.0137 70.0078 62.8945 70.3555 62.8945C70.6055 62.8945 70.7969 62.9219 70.9297 62.9766V63.9727ZM76.2676 69H75.3066V68.0625H75.2832C74.8652 68.7812 74.25 69.1406 73.4375 69.1406C72.8398 69.1406 72.3711 68.9824 72.0312 68.666C71.6953 68.3496 71.5273 67.9297 71.5273 67.4062C71.5273 66.2852 72.1875 65.6328 73.5078 65.4492L75.3066 65.1973C75.3066 64.1777 74.8945 63.668 74.0703 63.668C73.3477 63.668 72.6953 63.9141 72.1133 64.4062V63.4219C72.7031 63.0469 73.3828 62.8594 74.1523 62.8594C75.5625 62.8594 76.2676 63.6055 76.2676 65.0977V69ZM75.3066 65.9648L73.8594 66.1641C73.4141 66.2266 73.0781 66.3379 72.8516 66.498C72.625 66.6543 72.5117 66.9336 72.5117 67.3359C72.5117 67.6289 72.6152 67.8691 72.8223 68.0566C73.0332 68.2402 73.3125 68.332 73.6602 68.332C74.1367 68.332 74.5293 68.166 74.8379 67.834C75.1504 67.498 75.3066 67.0742 75.3066 66.5625V65.9648ZM83.1992 69H82.2383V67.9805H82.2148C81.7695 68.7539 81.082 69.1406 80.1523 69.1406C79.3984 69.1406 78.7949 68.873 78.3418 68.3379C77.8926 67.7988 77.668 67.0664 77.668 66.1406C77.668 65.1484 77.918 64.3535 78.418 63.7559C78.918 63.1582 79.584 62.8594 80.416 62.8594C81.2402 62.8594 81.8398 63.1836 82.2148 63.832H82.2383V60.1172H83.1992V69ZM82.2383 66.2871V65.4023C82.2383 64.918 82.0781 64.5078 81.7578 64.1719C81.4375 63.8359 81.0312 63.668 80.5391 63.668C79.9531 63.668 79.4922 63.8828 79.1562 64.3125C78.8203 64.7422 78.6523 65.3359 78.6523 66.0938C78.6523 66.7852 78.8125 67.332 79.1328 67.7344C79.457 68.1328 79.8906 68.332 80.4336 68.332C80.9688 68.332 81.4023 68.1387 81.7344 67.752C82.0703 67.3652 82.2383 66.877 82.2383 66.2871ZM87.6523 69.1406C86.7656 69.1406 86.0566 68.8613 85.5254 68.3027C84.998 67.7402 84.7344 66.9961 84.7344 66.0703C84.7344 65.0625 85.0098 64.2754 85.5605 63.709C86.1113 63.1426 86.8555 62.8594 87.793 62.8594C88.6875 62.8594 89.3848 63.1348 89.8848 63.6855C90.3887 64.2363 90.6406 65 90.6406 65.9766C90.6406 66.9336 90.3691 67.7012 89.8262 68.2793C89.2871 68.8535 88.5625 69.1406 87.6523 69.1406ZM87.7227 63.668C87.1055 63.668 86.6172 63.8789 86.2578 64.3008C85.8984 64.7188 85.7188 65.2969 85.7188 66.0352C85.7188 66.7461 85.9004 67.3066 86.2637 67.7168C86.627 68.127 87.1133 68.332 87.7227 68.332C88.3438 68.332 88.8203 68.1309 89.1523 67.7285C89.4883 67.3262 89.6562 66.7539 89.6562 66.0117C89.6562 65.2617 89.4883 64.6836 89.1523 64.2773C88.8203 63.8711 88.3438 63.668 87.7227 63.668Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
 
-var blobUnavailableSvg = {
+const blobUnavailableSvg = {
     "de-de": blobUnavailableSvgGerman,
     "en-gb": blobUnavailableSvgEnglish,
     "en-us": blobUnavailableSvgEnglish,
@@ -1683,7 +1609,7 @@ var blobUnavailableSvg = {
     "zh-hans": blobUnavailableSvgChineseSimplified,
     "zh-hant": blobUnavailableSvgChineseTraditional,
 };
-var iframeUnavailableSvg = {
+const iframeUnavailableSvg = {
     "de-de": iframeUnavailableSvgGerman,
     "en-gb": iframeUnavailableSvgEnglish,
     "en-us": iframeUnavailableSvgEnglish,
@@ -1699,7 +1625,7 @@ var iframeUnavailableSvg = {
     "zh-hans": iframeUnavailableSvgChineseSimplified,
     "zh-hant": iframeUnavailableSvgChineseTraditional,
 };
-var imageMaskedSvg = {
+const imageMaskedSvg = {
     "de-de": imageMaskedSvgGerman,
     "en-gb": imageMaskedSvgEnglish,
     "en-us": imageMaskedSvgEnglish,
@@ -1716,12 +1642,8 @@ var imageMaskedSvg = {
     "zh-hant": imageMaskedSvgChineseTraditional,
 };
 /* END imageMaskedSvgs */
-var LayoutHelper = /** @class */ (function () {
-    function LayoutHelper(state, isMobile, vNext, locale) {
-        if (isMobile === void 0) { isMobile = false; }
-        if (vNext === void 0) { vNext = false; }
-        if (locale === void 0) { locale = 'en-us'; }
-        var _this = this;
+class LayoutHelper {
+    constructor(state, isMobile = false, vNext = false, locale = 'en-us') {
         this.primaryHtmlNodeId = null;
         this.stylesheets = [];
         this.fonts = [];
@@ -1734,44 +1656,44 @@ var LayoutHelper = /** @class */ (function () {
         this.state = null;
         this.stylesToApply = {};
         this.BackgroundImageEligibleElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'ASIDE', 'NAV', 'SPAN', 'P', 'MAIN'];
-        this.MaskedBackgroundImageStyle = "#CCC no-repeat center url(\"".concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */, "\")");
-        this.reset = function () {
-            _this.nodes = {};
-            _this.stylesheets = [];
-            _this.fonts = [];
-            _this.events = {};
-            _this.hashMapAlpha = {};
-            _this.hashMapBeta = {};
-            _this.primaryHtmlNodeId = null;
+        this.MaskedBackgroundImageStyle = `#CCC no-repeat center url("${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */}")`;
+        this.reset = () => {
+            this.nodes = {};
+            this.stylesheets = [];
+            this.fonts = [];
+            this.events = {};
+            this.hashMapAlpha = {};
+            this.hashMapBeta = {};
+            this.primaryHtmlNodeId = null;
             // Reset dialog render state for new render cycle
             resetDialogRenderState();
         };
-        this.get = function (hash) {
-            if (hash in _this.hashMapBeta && _this.hashMapBeta[hash].isConnected) {
-                return _this.hashMapBeta[hash];
+        this.get = (hash) => {
+            if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
+                return this.hashMapBeta[hash];
             }
-            else if (hash in _this.hashMapAlpha && _this.hashMapAlpha[hash].isConnected) {
-                return _this.hashMapAlpha[hash];
+            else if (hash in this.hashMapAlpha && this.hashMapAlpha[hash].isConnected) {
+                return this.hashMapAlpha[hash];
             }
             return null;
         };
-        this.addToHashMap = function (data, parent) {
+        this.addToHashMap = (data, parent) => {
             // In case of selector collision, prefer the first inserted node
-            _this.hashMapAlpha[data.hashAlpha] = _this.get(data.hashAlpha) || parent;
-            _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
+            this.hashMapAlpha[data.hashAlpha] = this.get(data.hashAlpha) || parent;
+            this.hashMapBeta[data.hashBeta] = this.get(data.hashBeta) || parent;
         };
-        this.resize = function (el, width, height) {
+        this.resize = (el, width, height) => {
             if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
                 el.style.width = width + "px" /* Layout.Constant.Pixel */;
                 el.style.height = height + "px" /* Layout.Constant.Pixel */;
                 el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
             }
         };
-        this.element = function (nodeId) {
-            return nodeId !== null && nodeId > 0 && nodeId in _this.nodes ? _this.nodes[nodeId] : null;
+        this.element = (nodeId) => {
+            return nodeId !== null && nodeId > 0 && nodeId in this.nodes ? this.nodes[nodeId] : null;
         };
-        this.animateChange = function (event) {
-            var animation = _this.animations[event.data.id];
+        this.animateChange = (event) => {
+            let animation = this.animations[event.data.id];
             if (!animation && event.data.operation !== 0 /* AnimationOperation.Create */) {
                 // We didn't have a reference to this animation. This shouldn't happen, but returning here
                 // to ensure we don't throw any errors.
@@ -1779,10 +1701,10 @@ var LayoutHelper = /** @class */ (function () {
             }
             switch (event.data.operation) {
                 case 0 /* AnimationOperation.Create */:
-                    var target = _this.element(event.data.targetId);
+                    let target = this.element(event.data.targetId);
                     // only create the animation if we successfully found the target, an animation without a target will throw an error
                     if (target) {
-                        _this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
+                        this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
                     }
                     break;
                 case 3 /* AnimationOperation.Cancel */:
@@ -1802,39 +1724,32 @@ var LayoutHelper = /** @class */ (function () {
                     break;
             }
         };
-        this.dom = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
-            var doc;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!event) return [3 /*break*/, 2];
-                        doc = this.state.window.document;
-                        if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
-                        doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
-                        // Render all DOM events to reconstruct the page
-                        this.markup(event, useproxy);
-                        // Wait on all stylesheets and fonts to finish loading
-                        return [4 /*yield*/, Promise.all(this.stylesheets.concat(this.fonts))];
-                    case 1:
-                        // Wait on all stylesheets and fonts to finish loading
-                        _a.sent();
-                        // Toggle back the visibility of target window
-                        doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+        this.dom = (event, useproxy) => __awaiter(this, void 0, void 0, function* () {
+            if (event) {
+                // When setting up rendering for the first time, start off with hidden target window
+                // This ensures we do not show flickers to the end user
+                let doc = this.state.window.document;
+                if (doc && doc.documentElement) {
+                    doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
+                    // Render all DOM events to reconstruct the page
+                    this.markup(event, useproxy);
+                    // Wait on all stylesheets and fonts to finish loading
+                    yield Promise.all(this.stylesheets.concat(this.fonts));
+                    // Toggle back the visibility of target window
+                    doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
                 }
-            });
-        }); };
-        this.styleChange = function (event) {
+            }
+        });
+        this.styleChange = (event) => {
             switch (event.event) {
                 case 46 /* Data.Event.StyleSheetUpdate */:
-                    var styleSheet = _this.adoptedStyleSheets[event.data.id];
+                    let styleSheet = this.adoptedStyleSheets[event.data.id];
                     if (!styleSheet && event.data.operation !== 0 /* StyleSheetOperation.Create */) {
                         return;
                     }
                     switch (event.data.operation) {
                         case 0 /* StyleSheetOperation.Create */:
-                            _this.adoptedStyleSheets[event.data.id] = new _this.state.window.CSSStyleSheet();
+                            this.adoptedStyleSheets[event.data.id] = new this.state.window.CSSStyleSheet();
                             break;
                         case 1 /* StyleSheetOperation.Replace */:
                             styleSheet.replace(event.data.cssRules);
@@ -1845,61 +1760,63 @@ var LayoutHelper = /** @class */ (function () {
                     }
                     break;
                 case 45 /* Data.Event.StyleSheetAdoption */:
-                    _this.setDocumentStyles(event.data.id, event.data.newIds);
+                    this.setDocumentStyles(event.data.id, event.data.newIds);
                     break;
             }
         };
-        this.customElement = function (event) {
-            if (!_this.state.window.customElements.get(event.data.name)) {
-                _this.state.window.customElements.define(event.data.name, /** @class */ (function (_super) {
-                    __extends(class_1, _super);
-                    function class_1() {
-                        return _super !== null && _super.apply(this, arguments) || this;
-                    }
-                    return class_1;
-                }(_this.state.window.HTMLElement)));
+        this.customElement = (event) => {
+            const tagName = event.data.name;
+            if (!this.state.window.customElements.get(tagName)) {
+                try {
+                    // Use eval to create class in target window context (avoids ES5 transpilation issues)
+                    const EmptyElement = this.state.window.eval('(class extends HTMLElement { constructor() { super(); } })');
+                    this.state.window.customElements.define(tagName, EmptyElement);
+                }
+                catch (e) {
+                    console.error(`Failed to define custom element ${tagName}:`, e);
+                }
             }
         };
-        this.exists = function (hash) {
+        this.exists = (hash) => {
             if (hash) {
-                var match = _this.get(hash);
+                let match = this.get(hash);
                 if (match) {
-                    var rectangle = match.getBoundingClientRect();
+                    let rectangle = match.getBoundingClientRect();
                     return rectangle && rectangle.width > 0 && rectangle.height > 0;
                 }
             }
             return false;
         };
-        this.markup = function (event, useproxy) {
+        this.markup = (event, useproxy) => {
             var _a, _b, _c, _d, _e;
-            var data = event.data;
-            var type = event.event;
-            var doc = _this.state.window.document;
-            var retryEvent = {
+            let data = event.data;
+            let type = event.event;
+            let doc = this.state.window.document;
+            let retryEvent = {
                 data: [],
                 time: event.time,
                 event: event.event
             };
-            var _loop_1 = function (node) {
-                var parent_1 = _this.element(node.parent);
-                var pivot = _this.element(node.previous);
-                var insert = _this.insertAfter;
-                var tag = node.tag;
+            for (let node of data) {
+                let parent = this.element(node.parent);
+                let pivot = this.element(node.previous);
+                let insert = this.insertAfter;
+                let tag = node.tag;
                 if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
                     tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
                 }
-                if (parent_1 === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
+                if (parent === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
                     // We are referencing a parent for this node that hasn't been created yet. Push it to a list of nodes to
                     // try once we are finished with other nodes within this event. Though we don't require HTML tags to
                     // have a parent as they are typically the root.
                     retryEvent.data.push(node);
-                    return "continue";
+                    continue;
                 }
                 switch (tag) {
                     case "*D" /* Layout.Constant.DocumentTag */:
-                        var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
+                        let tagDoc = tag !== node.tag ? (parent ? parent.contentDocument : null) : doc;
                         if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
-                            _this.reset();
+                            this.reset();
                         }
                         if (typeof XMLSerializer !== "undefined" && tagDoc) {
                             tagDoc.open();
@@ -1910,49 +1827,49 @@ var LayoutHelper = /** @class */ (function () {
                     case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
                         // In case of polyfill, map shadow dom to it's parent for rendering purposes
                         // All its children should be inserted as regular children to the parent node.
-                        _this.nodes[node.id] = parent_1;
-                        _this.addToHashMap(node, parent_1);
+                        this.nodes[node.id] = parent;
+                        this.addToHashMap(node, parent);
                         break;
                     case "*S" /* Layout.Constant.ShadowDomTag */:
-                        if (parent_1) {
-                            var shadowRoot = _this.element(node.id);
-                            shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
-                            _this.nodes[node.id] = shadowRoot;
-                            _this.addToHashMap(node, shadowRoot);
-                            _this.addStyles(node.id);
+                        if (parent) {
+                            let shadowRoot = this.element(node.id);
+                            shadowRoot = shadowRoot ? shadowRoot : parent.attachShadow({ mode: "open" });
+                            this.nodes[node.id] = shadowRoot;
+                            this.addToHashMap(node, shadowRoot);
+                            this.addStyles(node.id);
                         }
                         break;
                     case "*T" /* Layout.Constant.TextTag */:
-                        var textElement = _this.element(node.id);
+                        let textElement = this.element(node.id);
                         textElement = textElement ? textElement : doc.createTextNode(null);
                         textElement.nodeValue = node.value;
-                        insert(node, parent_1, textElement, pivot);
+                        insert(node, parent, textElement, pivot);
                         break;
                     case "*M" /* Layout.Constant.SuspendMutationTag */:
-                        var suspendedElement = _this.element(node.id);
+                        let suspendedElement = this.element(node.id);
                         if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
                             suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
                         }
                         break;
                     case "HTML":
-                        if (_this.primaryHtmlNodeId === null) {
-                            _this.primaryHtmlNodeId = node.id;
+                        if (this.primaryHtmlNodeId === null) {
+                            this.primaryHtmlNodeId = node.id;
                         }
-                        var isIframe = tag !== node.tag;
+                        let isIframe = tag !== node.tag;
                         // when we see multiple HTML nodes in the same document we should treat subsequent ones as child elements
                         // rather than redefining our visualization base on them. It's technically illegal HTML but enough sites have
                         // this structure that we are robust against it.
-                        if (_this.primaryHtmlNodeId !== node.id && !isIframe) {
-                            _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
+                        if (this.primaryHtmlNodeId !== node.id && !isIframe) {
+                            this.insertDefaultElement(node, parent, pivot, doc, insert);
                             break;
                         }
-                        var htmlDoc = isIframe ? (parent_1 ? parent_1.contentDocument : null) : doc;
+                        let htmlDoc = isIframe ? (parent ? parent.contentDocument : null) : doc;
                         if (htmlDoc !== null) {
-                            var docElement = _this.element(node.id);
+                            let docElement = this.element(node.id);
                             if (docElement === null) {
-                                var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
+                                let newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
                                 docElement = newDoc.documentElement;
-                                var p = htmlDoc.importNode(docElement, true);
+                                let p = htmlDoc.importNode(docElement, true);
                                 htmlDoc.replaceChild(p, htmlDoc.documentElement);
                                 if (htmlDoc.head) {
                                     htmlDoc.head.parentNode.removeChild(htmlDoc.head);
@@ -1961,164 +1878,159 @@ var LayoutHelper = /** @class */ (function () {
                                     htmlDoc.body.parentNode.removeChild(htmlDoc.body);
                                 }
                             }
-                            _this.setAttributes(htmlDoc.documentElement, node);
+                            this.setAttributes(htmlDoc.documentElement, node);
                             // If we are still processing discover events, keep the markup hidden until we are done
-                            if (type === 5 /* Data.Event.Discover */ && !parent_1) {
+                            if (type === 5 /* Data.Event.Discover */ && !parent) {
                                 htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
                             }
-                            _this.nodes[node.id] = htmlDoc.documentElement;
-                            _this.addToHashMap(node, htmlDoc.documentElement);
+                            this.nodes[node.id] = htmlDoc.documentElement;
+                            this.addToHashMap(node, htmlDoc.documentElement);
                         }
                         break;
                     case "HEAD":
-                        var headElement = _this.element(node.id);
+                        let headElement = this.element(node.id);
                         if (headElement === null) {
                             headElement = doc.createElement(node.tag);
                             if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
-                                var base = doc.createElement("base");
+                                let base = doc.createElement("base");
                                 base.href = node.attributes["*B" /* Layout.Constant.Base */];
                                 headElement.appendChild(base);
                             }
                             // Add custom styles to assist with visualization
-                            var custom = doc.createElement("style");
+                            let custom = doc.createElement("style");
                             custom.setAttribute("clarity-custom-styles" /* Constant.CustomStyleTag */, "true");
-                            custom.innerText = _this.getCustomStyle();
+                            custom.innerText = this.getCustomStyle();
                             headElement.appendChild(custom);
                         }
-                        _this.setAttributes(headElement, node);
-                        insert(node, parent_1, headElement, pivot);
+                        this.setAttributes(headElement, node);
+                        insert(node, parent, headElement, pivot);
                         break;
                     case "LINK":
-                        var linkElement_1 = _this.element(node.id);
-                        linkElement_1 = linkElement_1 ? linkElement_1 : _this.createElement(doc, node.tag);
+                        let linkElement = this.element(node.id);
+                        linkElement = linkElement ? linkElement : this.createElement(doc, node.tag);
                         if (!node.attributes) {
                             node.attributes = {};
                         }
-                        _this.setAttributes(linkElement_1, node);
+                        this.setAttributes(linkElement, node);
                         if ("rel" in node.attributes) {
                             if (node.attributes["rel"] === "stylesheet" /* Constant.StyleSheet */) {
-                                _this.stylesheets.push(new Promise(function (resolve) {
-                                    var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
+                                this.stylesheets.push(new Promise((resolve) => {
+                                    const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
                                     if (proxy) {
-                                        if (linkElement_1.integrity) {
-                                            linkElement_1.removeAttribute('integrity');
+                                        if (linkElement.integrity) {
+                                            linkElement.removeAttribute('integrity');
                                         }
-                                        linkElement_1.href = proxy(linkElement_1.href, linkElement_1.id, "stylesheet" /* Constant.StyleSheet */);
+                                        linkElement.href = proxy(linkElement.href, linkElement.id, "stylesheet" /* Constant.StyleSheet */);
                                     }
-                                    linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
+                                    linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
                                     setTimeout(resolve, LayoutHelper.TIMEOUT);
                                 }));
                             }
                             else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
                                 && (((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.as) === "style" || ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.as) === "font")) {
-                                _this.fonts.push(new Promise(function (resolve) {
-                                    var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
-                                    linkElement_1.href = proxy ? proxy(linkElement_1.href, linkElement_1.id, node.attributes.as) : linkElement_1.href;
-                                    linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
+                                this.fonts.push(new Promise((resolve) => {
+                                    const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
+                                    linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
+                                    linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
                                     setTimeout(resolve, LayoutHelper.TIMEOUT);
                                 }));
                             }
                         }
-                        insert(node, parent_1, linkElement_1, pivot);
+                        insert(node, parent, linkElement, pivot);
                         break;
                     case "IMG" /* Layout.Constant.ImageTag */:
-                        var imgElement = (_c = _this.element(node.id)) !== null && _c !== void 0 ? _c : _this.createElement(doc, node.tag);
-                        var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
+                        let imgElement = (_c = this.element(node.id)) !== null && _c !== void 0 ? _c : this.createElement(doc, node.tag);
+                        const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
                         if (proxy && !!((_d = node.attributes) === null || _d === void 0 ? void 0 : _d.src)) {
                             node.attributes.src = proxy(node.attributes.src, node.attributes.id, "IMG" /* Layout.Constant.ImageTag */);
                         }
-                        _this.setAttributes(imgElement, node);
-                        _this.resize(imgElement, node.width, node.height);
-                        insert(node, parent_1, imgElement, pivot);
+                        this.setAttributes(imgElement, node);
+                        this.resize(imgElement, node.width, node.height);
+                        insert(node, parent, imgElement, pivot);
                         break;
                     case "STYLE":
-                        var styleElement = (_e = _this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
-                        _this.setAttributes(styleElement, node);
+                        let styleElement = (_e = this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
+                        this.setAttributes(styleElement, node);
                         styleElement.textContent = node.value;
-                        insert(node, parent_1, styleElement, pivot);
-                        _this.style(styleElement);
+                        insert(node, parent, styleElement, pivot);
+                        this.style(styleElement);
                         break;
                     case "IFRAME":
-                        var iframeElement = _this.element(node.id);
-                        iframeElement = iframeElement ? iframeElement : _this.createElement(doc, node.tag);
+                        let iframeElement = this.element(node.id);
+                        iframeElement = iframeElement ? iframeElement : this.createElement(doc, node.tag);
                         if (!node.attributes) {
                             node.attributes = {};
                         }
-                        _this.setAttributes(iframeElement, node);
-                        insert(node, parent_1, iframeElement, pivot);
+                        this.setAttributes(iframeElement, node);
+                        insert(node, parent, iframeElement, pivot);
                         break;
                     case "SCRIPT":
                         {
                             node.id = -1; // We want to ensure children of script tags are not processed
                             node.value = null; // We don't want to set any potential script content
-                            _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
+                            this.insertDefaultElement(node, parent, pivot, doc, insert);
                             break;
                         }
                     case "DIALOG":
                         {
-                            _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
-                            var domElement = _this.element(node.id);
-                            var renderOptions = getDialogRenderOptions(node.attributes, domElement);
-                            renderDialog(domElement, renderOptions, _this.state.options.logerror);
+                            this.insertDefaultElement(node, parent, pivot, doc, insert);
+                            const domElement = this.element(node.id);
+                            const renderOptions = getDialogRenderOptions(node.attributes, domElement);
+                            renderDialog(domElement, renderOptions, this.state.options.logerror);
                             break;
                         }
                     default:
-                        _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
+                        this.insertDefaultElement(node, parent, pivot, doc, insert);
                         break;
                 }
                 // Track state for this node
                 if (node.id) {
-                    _this.events[node.id] = node;
+                    this.events[node.id] = node;
                 }
-            };
-            for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-                var node = data_1[_i];
-                _loop_1(node);
             }
             // only retry failed nodes if we are still making positive progress. If we have the same number of
             // nodes we started with, then we would just be spinning on an orphaned subtree.
             if (retryEvent.data.length > 0 && retryEvent.data.length !== event.data.length) {
-                _this.markup(retryEvent, useproxy);
+                this.markup(retryEvent, useproxy);
             }
         };
-        this.insertDefaultElement = function (node, parent, pivot, doc, insert) {
-            var domElement = _this.element(node.id);
-            domElement = domElement ? domElement : _this.createElement(doc, node.tag);
-            _this.setAttributes(domElement, node);
-            _this.resize(domElement, node.width, node.height);
+        this.insertDefaultElement = (node, parent, pivot, doc, insert) => {
+            let domElement = this.element(node.id);
+            domElement = domElement ? domElement : this.createElement(doc, node.tag);
+            this.setAttributes(domElement, node);
+            this.resize(domElement, node.width, node.height);
             insert(node, parent, domElement, pivot);
         };
-        this.style = function (node, resolve) {
-            if (resolve === void 0) { resolve = null; }
+        this.style = (node, resolve = null) => {
             // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
             try {
-                var sheet = node.sheet;
-                var cssRules = sheet ? sheet.cssRules : [];
-                for (var i = 0; i < cssRules.length; i++) {
+                const sheet = node.sheet;
+                let cssRules = sheet ? sheet.cssRules : [];
+                for (let i = 0; i < cssRules.length; i++) {
                     if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
-                        var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
+                        let css = cssRules[i].cssText.replace(/:hover/g, `[${"clarity-hover" /* Constant.CustomHover */}]`);
                         sheet.removeRule(i);
                         sheet.insertRule(css, i);
                     }
                 }
             }
             catch (e) {
-                if (_this.state.options.logerror) {
-                    _this.state.options.logerror(e);
+                if (this.state.options.logerror) {
+                    this.state.options.logerror(e);
                 }
             }
             if (resolve) {
                 resolve();
             }
         };
-        this.addStyles = function (id) {
-            var adoptedStylesToAdd = _this.stylesToApply[id];
+        this.addStyles = (id) => {
+            let adoptedStylesToAdd = this.stylesToApply[id];
             if (adoptedStylesToAdd && adoptedStylesToAdd.length > 0) {
-                _this.setDocumentStyles(id, _this.stylesToApply[id]);
-                delete _this.stylesToApply[id];
+                this.setDocumentStyles(id, this.stylesToApply[id]);
+                delete this.stylesToApply[id];
             }
         };
-        this.createElement = function (doc, tag) {
+        this.createElement = (doc, tag) => {
             if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
                 return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
             }
@@ -2127,24 +2039,24 @@ var LayoutHelper = /** @class */ (function () {
             }
             catch (ex) {
                 // We log the warning on non-standard markup but continue with the visualization
-                console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
+                console.warn(`Exception encountered while creating element ${tag}: ${ex}`);
                 return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
             }
         };
-        this.insertAfter = function (data, parent, node, previous) {
+        this.insertAfter = (data, parent, node, previous) => {
             // Skip over no-op changes where parent and previous element is still the same
             // In case of IFRAME, re-adding DOM at the exact same place will lead to loss of state and the markup inside will be destroyed
-            if (_this.events[data.id] && _this.events[data.id].parent === data.parent && _this.events[data.id].previous === data.previous) {
+            if (this.events[data.id] && this.events[data.id].parent === data.parent && this.events[data.id].previous === data.previous) {
                 return;
             }
             // In case parent is a Shadow DOM, previous.parentElement will return null but previous.parentNode will return a valid node
-            var next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
-            next = previous === null && parent ? _this.firstChild(parent) : next;
-            _this.insertBefore(data, parent, node, next);
+            let next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
+            next = previous === null && parent ? this.firstChild(parent) : next;
+            this.insertBefore(data, parent, node, next);
         };
-        this.firstChild = function (node) {
+        this.firstChild = (node) => {
             var _a;
-            var child = node.firstChild;
+            let child = node.firstChild;
             // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
             if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
                 if ((_a = child.nextSibling) === null || _a === void 0 ? void 0 : _a.hasAttribute('clarity-custom-styles')) {
@@ -2156,25 +2068,25 @@ var LayoutHelper = /** @class */ (function () {
             return child;
         };
         // Mask images within a masked ancestor element in the node has a background image.
-        this.mask = function (node) {
+        this.mask = (node) => {
             var _a, _b, _c;
-            if (node && _this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
-                var urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
-                var computedStyles = window.getComputedStyle(node);
-                var hasBackgroundImage = ((_a = computedStyles.backgroundImage) === null || _a === void 0 ? void 0 : _a.match(urlPattern)) || ((_b = computedStyles.background) === null || _b === void 0 ? void 0 : _b.match(urlPattern));
-                var masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, "[".concat("data-clarity-mask" /* LayoutConstants.MaskData */, "]"));
+            if (node && this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
+                const urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
+                const computedStyles = window.getComputedStyle(node);
+                const hasBackgroundImage = ((_a = computedStyles.backgroundImage) === null || _a === void 0 ? void 0 : _a.match(urlPattern)) || ((_b = computedStyles.background) === null || _b === void 0 ? void 0 : _b.match(urlPattern));
+                const masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, `[${"data-clarity-mask" /* LayoutConstants.MaskData */}]`);
                 if (hasBackgroundImage && masked) {
-                    node.style.background = _this.MaskedBackgroundImageStyle;
+                    node.style.background = this.MaskedBackgroundImageStyle;
                 }
             }
         };
-        this.insertBefore = function (data, parent, node, next) {
+        this.insertBefore = (data, parent, node, next) => {
             if (parent !== null) {
                 // Compare against both parentNode and parentElement to ensure visualization works correctly for shadow DOMs
                 next = next && (next.parentElement !== parent && next.parentNode !== parent) ? null : next;
                 try {
                     parent.insertBefore(node, next);
-                    _this.mask(node);
+                    this.mask(node);
                 }
                 catch (ex) {
                     console.warn("Node: " + node + " | Parent: " + parent + " | Data: " + JSON.stringify(data));
@@ -2187,34 +2099,34 @@ var LayoutHelper = /** @class */ (function () {
             else if (parent === null && node.parentNode !== null) {
                 node.parentNode.removeChild(node);
             }
-            _this.nodes[data.id] = node;
-            _this.addToHashMap(data, node);
+            this.nodes[data.id] = node;
+            this.addToHashMap(data, node);
         };
-        this.setAttributes = function (node, data) {
-            var attributes = data.attributes || {};
-            var sameorigin = false;
+        this.setAttributes = (node, data) => {
+            let attributes = data.attributes || {};
+            let sameorigin = false;
             // Clarity attributes
-            attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
-            attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = "".concat(data.hashAlpha);
-            attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
-            var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
+            attributes["data-clarity-id" /* Constant.Id */] = `${data.id}`;
+            attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = `${data.hashAlpha}`;
+            attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = `${data.hashBeta}`;
+            let tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
             // First remove all its existing attributes
             if (node.attributes) {
-                var length_1 = node.attributes.length;
-                while (node.attributes && length_1 > 0) {
+                let length = node.attributes.length;
+                while (node.attributes && length > 0) {
                     // Do not remove "clarity-hover" attribute and let it be managed by interaction module
                     // This helps avoid flickers during visualization
                     if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
                         node.removeAttribute(node.attributes[0].name);
                     }
-                    length_1--;
+                    length--;
                 }
             }
             // Add new attributes
-            for (var attribute in attributes) {
+            for (let attribute in attributes) {
                 if (attributes[attribute] !== undefined) {
                     try {
-                        var v = attributes[attribute];
+                        let v = attributes[attribute];
                         if (attribute.indexOf("xlink:") === 0) {
                             node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
                         }
@@ -2225,30 +2137,30 @@ var LayoutHelper = /** @class */ (function () {
                             // Do nothing if we encounter internal Clarity attributes
                         }
                         else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
-                            node.setAttribute("data-clarity-".concat(attribute), v);
+                            node.setAttribute(`data-clarity-${attribute}`, v);
                         }
                         else if (tag === "img" /* Constant.ImageTag */ && attribute.indexOf("src") === 0 && ((v === null || v.length === 0 || (v === null || v === void 0 ? void 0 : v.startsWith('blob:'))))) {
-                            if (_this.vNext) {
+                            if (this.vNext) {
                                 if (v.startsWith('blob:')) {
                                     if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
-                                        node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
+                                        node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
                                     }
                                     else {
-                                        node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
+                                        node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
                                     }
                                 }
                                 else {
                                     if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
-                                        node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
+                                        node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
                                     }
                                     else {
-                                        node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
+                                        node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
                                     }
                                 }
                             }
                             else {
                                 node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
-                                var size = "l" /* Constant.Large */;
+                                let size = "l" /* Constant.Large */;
                                 if (data.width) {
                                     size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
                                 }
@@ -2256,7 +2168,7 @@ var LayoutHelper = /** @class */ (function () {
                             }
                         }
                         else {
-                            node.setAttribute(attribute, _this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
+                            node.setAttribute(attribute, this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
                         }
                     }
                     catch (ex) {
@@ -2266,7 +2178,7 @@ var LayoutHelper = /** @class */ (function () {
                 }
             }
             if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute === "function" /* Constant.Function */) {
-                if (_this.svgFitsText(node)) {
+                if (this.svgFitsText(node)) {
                     node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
                 }
                 else {
@@ -2285,57 +2197,58 @@ var LayoutHelper = /** @class */ (function () {
                 node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
             }
         };
-        this.getMobileCustomStyle = function () {
-            if (_this.isMobile) {
-                return "*{scrollbar-width: none; scrollbar-gutter: unset;};";
+        this.getMobileCustomStyle = () => {
+            if (this.isMobile) {
+                return `*{scrollbar-width: none; scrollbar-gutter: unset;};`;
             }
             return '';
         };
-        this.getCustomStyle = function () {
-            return _this.getImageHiddenCss() +
-                _this.getIframeUnavailableCss() +
-                _this.getBlobUnavailableCss() +
-                _this.getBackgroundCss() +
-                "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }") +
-                "body { font-size: initial; }\n            ".concat(_this.getMobileCustomStyle());
+        this.getCustomStyle = () => {
+            return this.getImageHiddenCss() +
+                this.getIframeUnavailableCss() +
+                this.getBlobUnavailableCss() +
+                this.getBackgroundCss() +
+                `*[${"data-clarity-suspend" /* Constant.Suspend */}] { filter: grayscale(100%); }` +
+                `body { font-size: initial; }
+            ${this.getMobileCustomStyle()}`;
         };
-        this.svgFitsText = function (inputElement) {
+        this.svgFitsText = (inputElement) => {
             var dimensions = inputElement.getBoundingClientRect();
             if (dimensions.width >= 132 /* Setting.LargeSvg */ && dimensions.height >= 132 /* Setting.LargeSvg */) {
                 return true;
             }
             return false;
         };
-        this.getIframeUnavailableCss = function () {
-            if (_this.vNext) {
-                return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable-small" /* Constant.UnavailableSmall */, "] { ").concat(iframeUnavailableSvgSmall, " }") +
-                    "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { ").concat(iframeUnavailableSvg[_this.locale], " }");
+        this.getIframeUnavailableCss = () => {
+            if (this.vNext) {
+                return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable-small" /* Constant.UnavailableSmall */}] { ${iframeUnavailableSvgSmall} }` +
+                    `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { ${iframeUnavailableSvg[this.locale]} }`;
             }
             else {
-                return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { background: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */, ") no-repeat center center, url('").concat("data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */, "'); }");
+                return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { background: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */}) no-repeat center center, url('${"data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */}'); }`;
             }
         };
-        this.getBlobUnavailableCss = function () {
-            if (_this.vNext) {
-                return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvgSmall, " }") +
-                    "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvg[_this.locale], " }");
+        this.getBlobUnavailableCss = () => {
+            if (this.vNext) {
+                return `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvgSmall} }` +
+                    `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvg[this.locale]} }`;
             }
             return '';
         };
-        this.getImageHiddenCss = function () {
-            if (_this.vNext) {
-                return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvgSmall, " }") +
-                    "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvg[_this.locale], " }");
+        this.getImageHiddenCss = () => {
+            if (this.vNext) {
+                return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${imageMaskedSvgSmall} }` +
+                    `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${imageMaskedSvg[this.locale]} }`;
             }
             else {
-                return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "] { background-color: #CCC; background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */, "); background-repeat:no-repeat; background-position: center; }") +
-                    "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
-                    "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
-                    "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }");
+                return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}] { background-color: #CCC; background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */}); background-repeat:no-repeat; background-position: center; }` +
+                    `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}] { background-size: 18px 18px; }` +
+                    `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"m" /* Constant.Medium */}] { background-size: 24px 24px; }` +
+                    `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}] { background-size: 36px 36px; }`;
             }
         };
-        this.getBackgroundCss = function () {
-            if (_this.vNext) {
+        this.getBackgroundCss = () => {
+            if (this.vNext) {
                 return sharedStyle;
             }
             return '';
@@ -2345,8 +2258,8 @@ var LayoutHelper = /** @class */ (function () {
         this.vNext = vNext;
         this.locale = locale;
     }
-    LayoutHelper.prototype.setDocumentStyles = function (documentId, styleIds) {
-        var targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
+    setDocumentStyles(documentId, styleIds) {
+        let targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
         if (!targetDocument) {
             if (!this.stylesToApply[documentId]) {
                 this.stylesToApply[documentId] = [];
@@ -2354,70 +2267,59 @@ var LayoutHelper = /** @class */ (function () {
             this.stylesToApply[documentId] = styleIds;
             return;
         }
-        var newSheets = [];
-        for (var _i = 0, styleIds_1 = styleIds; _i < styleIds_1.length; _i++) {
-            var styleId = styleIds_1[_i];
-            var styleSheet = this.adoptedStyleSheets[styleId];
+        let newSheets = [];
+        for (var styleId of styleIds) {
+            let styleSheet = this.adoptedStyleSheets[styleId];
             if (styleSheet) {
                 newSheets.push(styleSheet);
             }
         }
         targetDocument.adoptedStyleSheets = newSheets;
-    };
-    LayoutHelper.prototype.isSuspiciousAttribute = function (name, value) {
+    }
+    isSuspiciousAttribute(name, value) {
         // Block event handlers entirely
         if (name.startsWith('on')) {
             return true;
         }
         // Check for JavaScript protocols and dangerous patterns
-        var dangerous = [
+        const dangerous = [
             /^\s*javascript:/i,
             /^\s*data:text\/html/i,
             /^\s*vbscript:/i
         ];
-        return dangerous.some(function (pattern) { return pattern.test(value); });
-    };
-    LayoutHelper.TIMEOUT = 3000;
-    return LayoutHelper;
-}());
+        return dangerous.some(pattern => pattern.test(value));
+    }
+}
+LayoutHelper.TIMEOUT = 7000;
 
-var Visualizer = /** @class */ (function () {
-    function Visualizer() {
-        var _this = this;
+class Visualizer {
+    constructor() {
         this._state = null;
         this.renderTime = 0;
         this.hashFoundTime = -1;
         this._excludeClassNames = [];
-        this.configure = function (opts) {
-            _this._excludeClassNames = opts.excludeClassNames || [];
-            helper.selector.config(_this._excludeClassNames);
-        };
-        this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.layout.dom(event)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        this.get = function (hash) {
+        this.configure = (opts) => {
+            this._excludeClassNames = opts.excludeClassNames || [];
+            helper.selector.config(this._excludeClassNames);
+        };
+        this.dom = (event) => __awaiter(this, void 0, void 0, function* () {
+            yield this.layout.dom(event);
+        });
+        this.get = (hash) => {
             var _a;
-            return (_a = _this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
+            return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
         };
-        this.shortCircuitRendering = function (strategy, domEvent, hash) {
+        this.shortCircuitRendering = (strategy, domEvent, hash) => {
             switch (strategy) {
                 case 1 /* ShortCircuitStrategy.HashFirstTimestamp */:
-                    return _this.layout.exists(hash);
+                    return this.layout.exists(hash);
                 case 2 /* ShortCircuitStrategy.HashFirstTimestampPlusBuffer */:
-                    if (_this.hashFoundTime === -1 && _this.layout.exists(hash)) {
-                        _this.hashFoundTime = domEvent.time;
+                    if (this.hashFoundTime === -1 && this.layout.exists(hash)) {
+                        this.hashFoundTime = domEvent.time;
                     }
-                    return (_this.hashFoundTime > -1) && (domEvent.time > _this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
+                    return (this.hashFoundTime > -1) && (domEvent.time > this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
                 case 3 /* ShortCircuitStrategy.HashBeforeDeleted */:
-                    for (var _i = 0, _a = domEvent.data; _i < _a.length; _i++) {
-                        var node = _a[_i];
+                    for (let node of domEvent.data) {
                         if ((node.hashAlpha === hash || node.hashBeta === hash) && node.parent === null) {
                             return true;
                         }
@@ -2428,106 +2330,82 @@ var Visualizer = /** @class */ (function () {
                     return false;
             }
         };
-        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) {
-            if (hash === void 0) { hash = null; }
-            if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
-            return __awaiter(_this, void 0, void 0, function () {
-                var merged, entry, _a, domEvent, e_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
-                            _b.label = 1;
-                        case 1:
-                            _b.trys.push([1, 10, , 11]);
-                            merged = this.merge(decoded);
-                            return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvasId: portalCanvasId })];
-                        case 2:
-                            _b.sent();
-                            _b.label = 3;
-                        case 3:
-                            if (!(merged.events.length > 0)) return [3 /*break*/, 9];
-                            entry = merged.events.shift();
-                            _a = entry.event;
-                            switch (_a) {
-                                case 45 /* Data.Event.StyleSheetAdoption */: return [3 /*break*/, 4];
-                                case 46 /* Data.Event.StyleSheetUpdate */: return [3 /*break*/, 4];
-                                case 51 /* Data.Event.CustomElement */: return [3 /*break*/, 5];
-                                case 6 /* Data.Event.Mutation */: return [3 /*break*/, 6];
-                            }
-                            return [3 /*break*/, 8];
-                        case 4:
-                            this.layout.styleChange(entry);
-                            return [3 /*break*/, 8];
-                        case 5:
-                            this.layout.customElement(entry);
-                            return [3 /*break*/, 8];
-                        case 6:
-                            domEvent = entry;
-                            this.renderTime = domEvent.time;
-                            if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
-                                return [3 /*break*/, 8];
-                            }
-                            return [4 /*yield*/, this.layout.markup(domEvent, useproxy)];
-                        case 7:
-                            _b.sent();
-                            return [3 /*break*/, 8];
-                        case 8: return [3 /*break*/, 3];
-                        case 9: return [3 /*break*/, 11];
-                        case 10:
-                            e_1 = _b.sent();
-                            if (logerror) {
-                                logerror(e_1);
-                            }
-                            return [3 /*break*/, 11];
-                        case 11: return [2 /*return*/, this];
+        this.html = (decoded, target, portalCanvasId, hash = null, useproxy, logerror, shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */) => __awaiter(this, void 0, void 0, function* () {
+            if (decoded && decoded.length > 0 && target) {
+                try {
+                    // Flatten the payload and parse all events out of them, sorted by time
+                    let merged = this.mergeForHtml(decoded);
+                    yield this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
+                    // Render all mutations on top of the initial markup
+                    for (let i = 0; i < merged.events.length; i++) {
+                        let entry = merged.events[i];
+                        switch (entry.event) {
+                            case 45 /* Data.Event.StyleSheetAdoption */:
+                            case 46 /* Data.Event.StyleSheetUpdate */:
+                                this.layout.styleChange(entry);
+                                break;
+                            case 51 /* Data.Event.CustomElement */:
+                                this.layout.customElement(entry);
+                                break;
+                            case 6 /* Data.Event.Mutation */:
+                                let domEvent = entry;
+                                this.renderTime = domEvent.time;
+                                if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
+                                    break;
+                                }
+                                yield this.layout.markup(domEvent, useproxy);
+                                break;
+                        }
                     }
-                });
-            });
-        };
-        this.time = function () {
-            return _this.renderTime;
+                }
+                catch (e) {
+                    if (logerror) {
+                        logerror(e);
+                    }
+                }
+            }
+            return this;
+        });
+        this.time = () => {
+            return this.renderTime;
         };
-        this.clickmap = function (activity) {
-            if (_this.state === null) {
-                throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
+        this.clickmap = (activity) => {
+            if (this.state === null) {
+                throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
             }
-            _this.heatmap.click(activity);
+            this.heatmap.click(activity);
         };
-        this.clearmap = function () {
-            if (_this.state === null) {
-                throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
+        this.clearmap = () => {
+            if (this.state === null) {
+                throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
             }
-            _this.heatmap.clear();
+            this.heatmap.clear();
         };
-        this.scrollmap = function (scrollData, avgFold, addMarkers) {
-            if (_this.state === null) {
-                throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
+        this.scrollmap = (scrollData, avgFold, addMarkers) => {
+            if (this.state === null) {
+                throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
             }
-            _this.heatmap.scroll(scrollData, avgFold, addMarkers);
+            this.heatmap.scroll(scrollData, avgFold, addMarkers);
         };
-        this.merge = function (decoded) {
-            var merged = { timestamp: null, envelope: null, dom: null, events: [] };
+        this.merge = (decoded) => {
+            let merged = { timestamp: null, envelope: null, dom: null, events: [] };
             // Re-arrange decoded payloads in the order of their start time
-            decoded = decoded.sort(_this.sortPayloads);
+            decoded = decoded.sort(this.sortPayloads);
             // Re-initialize enrich class if someone ends up calling merge function directly
-            _this.enrich = _this.enrich || new EnrichHelper();
-            helper.selector.config(_this._excludeClassNames);
-            _this.enrich.reset();
+            this.enrich = this.enrich || new EnrichHelper();
+            helper.selector.config(this._excludeClassNames);
+            this.enrich.reset();
             // Walk through payloads and generate merged payload from an array of decoded payloads
-            for (var _i = 0, decoded_1 = decoded; _i < decoded_1.length; _i++) {
-                var payload = decoded_1[_i];
+            for (let payload of decoded) {
                 merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
                 merged.envelope = payload.envelope;
-                for (var _a = 0, _b = Object.keys(payload); _a < _b.length; _a++) {
-                    var key = _b[_a];
-                    var p = payload[key];
+                for (let key of Object.keys(payload)) {
+                    let p = payload[key];
                     if (Array.isArray(p)) {
-                        for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
-                            var entry = p_1[_c];
+                        for (let entry of p) {
                             switch (key) {
                                 case "dom" /* Constant.Dom */:
-                                    var dom = _this.enrich.selectors(entry);
+                                    let dom = this.enrich.selectors(entry);
                                     if (entry.event === 5 /* Data.Event.Discover */) {
                                         merged.dom = dom;
                                     }
@@ -2543,65 +2421,86 @@ var Visualizer = /** @class */ (function () {
                     }
                 }
             }
-            merged.events = merged.events.sort(_this.sortEvents);
+            merged.events = merged.events.sort(this.sortEvents);
             return merged;
         };
-        this.setup = function (target, options) { return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.reset();
-                        if (options.excludeClassNames) {
-                            this._excludeClassNames = options.excludeClassNames;
-                            helper.selector.config(options.excludeClassNames);
+        this.mergeForHtml = (decoded) => {
+            let merged = { timestamp: null, envelope: null, dom: null, events: [] };
+            decoded = decoded.sort(this.sortPayloads);
+            this.enrich = this.enrich || new EnrichHelper();
+            helper.selector.config(this._excludeClassNames);
+            this.enrich.reset();
+            for (let payload of decoded) {
+                merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
+                merged.envelope = payload.envelope;
+                const domEntries = payload["dom" /* Constant.Dom */];
+                if (Array.isArray(domEntries)) {
+                    for (let entry of domEntries) {
+                        let enriched = this.enrich.selectors(entry);
+                        if (entry.event === 5 /* Data.Event.Discover */) {
+                            merged.dom = enriched;
+                        }
+                        else if (entry.event === 6 /* Data.Event.Mutation */ ||
+                            entry.event === 45 /* Data.Event.StyleSheetAdoption */ ||
+                            entry.event === 46 /* Data.Event.StyleSheetUpdate */ ||
+                            entry.event === 51 /* Data.Event.CustomElement */) {
+                            merged.events.push(entry);
                         }
-                        // Infer options
-                        options.pointer = "pointer" in options ? options.pointer : true;
-                        options.canvas = "canvas" in options ? options.canvas : true;
-                        options.keyframes = "keyframes" in options ? options.keyframes : false;
-                        // Set visualization state
-                        this._state = { window: target, options: options };
-                        // Initialize helpers
-                        this.enrich = new EnrichHelper();
-                        this.data = new DataHelper(this.state);
-                        this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
-                        this.heatmap = new HeatmapHelper(this.state, this.layout);
-                        this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
-                        if (!options.dom) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.layout.dom(options.dom, options.useproxy)];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2: return [2 /*return*/, this];
+                    }
                 }
-            });
-        }); };
-        this.render = function (events) {
+            }
+            merged.events = merged.events.sort(this.sortEvents);
+            return merged;
+        };
+        this.setup = (target, options) => __awaiter(this, void 0, void 0, function* () {
+            this.reset();
+            if (options.excludeClassNames) {
+                this._excludeClassNames = options.excludeClassNames;
+                helper.selector.config(options.excludeClassNames);
+            }
+            // Infer options
+            options.pointer = "pointer" in options ? options.pointer : true;
+            options.canvas = "canvas" in options ? options.canvas : true;
+            options.keyframes = "keyframes" in options ? options.keyframes : false;
+            // Set visualization state
+            this._state = { window: target, options };
+            // Initialize helpers
+            this.enrich = new EnrichHelper();
+            this.data = new DataHelper(this.state);
+            this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
+            this.heatmap = new HeatmapHelper(this.state, this.layout);
+            this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
+            // If discover event was passed, render it now
+            if (options.dom) {
+                yield this.layout.dom(options.dom, options.useproxy);
+            }
+            return this;
+        });
+        this.render = (events) => {
             var _a, _b;
-            if (_this.state === null) {
-                throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
+            if (this.state === null) {
+                throw new Error(`Initialize visualization by calling "setup" prior to making this call.`);
             }
-            var time = 0;
-            for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
-                var entry = events_1[_i];
+            let time = 0;
+            for (const entry of events) {
                 try {
                     time = entry.time;
-                    _this.interaction.clearOldClickVisualizations(time);
+                    this.interaction.clearOldClickVisualizations(time);
                     switch (entry.event) {
                         case 0 /* Data.Event.Metric */:
-                            _this.data.metric(entry);
+                            this.data.metric(entry);
                             break;
                         case 1 /* Data.Event.Dimension */:
                             if (entry.data[37 /* Dimension.InteractionNextPaint */]) {
-                                _this.data.metric(entry);
+                                this.data.metric(entry);
                             }
                             break;
                         case 7 /* Data.Event.Region */:
-                            _this.data.region(entry);
+                            this.data.region(entry);
                             break;
                         case 6 /* Data.Event.Mutation */:
                         case 43 /* Data.Event.Snapshot */:
-                            _this.layout.markup(entry);
+                            this.layout.markup(entry);
                             break;
                         case 13 /* Data.Event.MouseDown */:
                         case 14 /* Data.Event.MouseUp */:
@@ -2613,73 +2512,67 @@ var Visualizer = /** @class */ (function () {
                         case 20 /* Data.Event.TouchCancel */:
                         case 18 /* Data.Event.TouchEnd */:
                         case 19 /* Data.Event.TouchMove */:
-                            _this.interaction.pointer(entry);
+                            this.interaction.pointer(entry);
                             break;
                         case 28 /* Data.Event.Visibility */:
-                            _this.interaction.visibility(entry);
+                            this.interaction.visibility(entry);
                             break;
                         case 27 /* Data.Event.Input */:
-                            _this.interaction.input(entry);
+                            this.interaction.input(entry);
                             break;
                         case 21 /* Data.Event.Selection */:
-                            _this.interaction.selection(entry);
+                            this.interaction.selection(entry);
                             break;
                         case 11 /* Data.Event.Resize */:
-                            _this.interaction.resize(entry);
+                            this.interaction.resize(entry);
                             break;
                         case 10 /* Data.Event.Scroll */:
-                            _this.interaction.scroll(entry);
+                            this.interaction.scroll(entry);
                             break;
                         case 45 /* Data.Event.StyleSheetAdoption */:
                         case 46 /* Data.Event.StyleSheetUpdate */:
-                            _this.layout.styleChange(entry);
+                            this.layout.styleChange(entry);
                             break;
                         case 44 /* Data.Event.Animation */:
-                            _this.layout.animateChange(entry);
+                            this.layout.animateChange(entry);
                             break;
                         case 51 /* Data.Event.CustomElement */:
-                            _this.layout.customElement(entry);
+                            this.layout.customElement(entry);
                             break;
                     }
                 }
                 catch (e) {
-                    (_b = (_a = _this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 }
             }
             if (events.length > 0) {
                 // Update pointer trail at the end of every frame
-                _this.interaction.trail(time);
+                this.interaction.trail(time);
             }
         };
-        this.reset = function () {
+        this.reset = () => {
             var _a, _b, _c, _d, _e;
-            (_a = _this.data) === null || _a === void 0 ? void 0 : _a.reset();
-            (_b = _this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
-            (_c = _this.layout) === null || _c === void 0 ? void 0 : _c.reset();
-            (_d = _this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
-            (_e = _this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
-            _this._state = null;
-            _this.renderTime = 0;
-        };
-        this.sortEvents = function (a, b) {
+            (_a = this.data) === null || _a === void 0 ? void 0 : _a.reset();
+            (_b = this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
+            (_c = this.layout) === null || _c === void 0 ? void 0 : _c.reset();
+            (_d = this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
+            (_e = this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
+            this._state = null;
+            this.renderTime = 0;
+        };
+        this.sortEvents = (a, b) => {
             return a.time - b.time;
         };
-        this.sortPayloads = function (a, b) {
+        this.sortPayloads = (a, b) => {
             return a.envelope.sequence - b.envelope.sequence;
         };
     }
-    Object.defineProperty(Visualizer.prototype, "state", {
-        get: function () {
-            return this._state;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return Visualizer;
-}());
+    get state() {
+        return this._state;
+    }
+}
 
-var _a;
-var state = (_a = new Visualizer(), _a.state), dom = _a.dom, get = _a.get, html = _a.html, time = _a.time, clickmap = _a.clickmap, clearmap = _a.clearmap, scrollmap = _a.scrollmap, merge = _a.merge, setup = _a.setup, render = _a.render;
+const { state, dom, get, html, time, clickmap, clearmap, scrollmap, merge, setup, render } = new Visualizer();
 
 var clarity = /*#__PURE__*/Object.freeze({
     __proto__: null,