clarity-js 0.7.3 → 0.7.4

package/build/clarity.module.js

@@ -1,21 +1,3 @@
-var dom = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    get add () { return add; },
-    get get () { return get; },
-    get getId () { return getId; },
-    get getNode () { return getNode; },
-    get getValue () { return getValue; },
-    get has () { return has; },
-    get hashText () { return hashText; },
-    get iframe () { return iframe; },
-    get lookup () { return lookup; },
-    get parse () { return parse$1; },
-    get sameorigin () { return sameorigin; },
-    get start () { return start$i; },
-    get stop () { return stop$g; },
-    get update () { return update$1; },
-    get updates () { return updates$2; }
-});
 var upload$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get queue () { return queue; },
@@ -28,11 +10,11 @@ var extract = /*#__PURE__*/Object.freeze({
     get clone () { return clone; },
     get compute () { return compute$4; },
     get data () { return data$5; },
-    get fragments () { return fragments; },
     get keys () { return keys; },
     get reset () { return reset$4; },
     get start () { return start$c; },
     get stop () { return stop$b; },
+    get trigger () { return trigger$1; },
     get update () { return update; }
 });
 var limit = /*#__PURE__*/Object.freeze({
@@ -135,7 +117,6 @@ var config$1 = {
     mask: [],
     unmask: [],
     regions: [],
-    extract: [],
     cookies: [],
     fraud: true,
     checksum: [],
@@ -166,7 +147,7 @@ function stop$C() {
     startTime = 0;
 }
 
-var version$1 = "0.7.3";
+var version$1 = "0.7.4";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -919,168 +900,540 @@ var selector = /*#__PURE__*/Object.freeze({
     reset: reset$l
 });
 
-// Track the start time to be able to compute duration at the end of the task
-var idleTimeout = 5000;
-var tracker = {};
-var queuedTasks = [];
-var activeTask = null;
-var pauseTask = null;
-var resumeResolve = null;
-function pause$1() {
-    if (pauseTask === null) {
-        pauseTask = new Promise(function (resolve) {
-            resumeResolve = resolve;
-        });
-    }
+var index = 1;
+var nodes = [];
+var values = [];
+var updateMap = [];
+var hashMap = {};
+var override = [];
+var unmask = [];
+var maskText = [];
+var maskExclude = [];
+var maskDisable = [];
+var maskTags = [];
+// The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
+var idMap = null; // Maps node => id.
+var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
+var privacyMap = null; // Maps node => Privacy (enum)
+var fraudMap = null; // Maps node => FraudId (number)
+function start$x() {
+    reset$k();
+    parse$1(document, true);
 }
-function resume$1() {
-    if (pauseTask) {
-        resumeResolve();
-        pauseTask = null;
-        if (activeTask === null) {
-            run();
+function stop$u() {
+    reset$k();
+}
+function reset$k() {
+    index = 1;
+    nodes = [];
+    values = [];
+    updateMap = [];
+    hashMap = {};
+    override = [];
+    unmask = [];
+    maskText = "address,password,contact" /* Mask.Text */.split("," /* Constant.Comma */);
+    maskExclude = "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.split("," /* Constant.Comma */);
+    maskDisable = "radio,checkbox,range,button,reset,submit" /* Mask.Disable */.split("," /* Constant.Comma */);
+    maskTags = "INPUT,SELECT,TEXTAREA" /* Mask.Tags */.split("," /* Constant.Comma */);
+    idMap = new WeakMap();
+    iframeMap = new WeakMap();
+    privacyMap = new WeakMap();
+    fraudMap = new WeakMap();
+    reset$l();
+}
+// We parse new root nodes for any regions or masked nodes in the beginning (document) and
+// later whenever there are new additions or modifications to DOM (mutations)
+function parse$1(root, init) {
+    if (init === void 0) { init = false; }
+    // Wrap selectors in a try / catch block.
+    // It's possible for script to receive invalid selectors, e.g. "'#id'" with extra quotes, and cause the code below to fail
+    try {
+        // Parse unmask configuration into separate query selectors and override tokens as part of initialization
+        if (init) {
+            config$1.unmask.forEach(function (x) { return x.indexOf("!" /* Constant.Bang */) < 0 ? unmask.push(x) : override.push(x.substr(1)); });
+        }
+        // Since mutations may happen on leaf nodes too, e.g. text nodes, which may not support all selector APIs.
+        // We ensure that the root note supports querySelectorAll API before executing the code below to identify new regions.
+        if ("querySelectorAll" in root) {
+            config$1.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$c(e, "".concat(x[0])); }); }); // Regions
+            config$1.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* Privacy.TextImage */); }); }); // Masked Elements
+            config$1.checksum.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return fraudMap.set(e, x[0]); }); }); // Fraud Checksum Check
+            unmask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 0 /* Privacy.None */); }); }); // Unmasked Elements
         }
     }
+    catch (e) {
+        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
+    }
 }
-function reset$k() {
-    tracker = {};
-    queuedTasks = [];
-    activeTask = null;
-    pauseTask = null;
+function getId(node, autogen) {
+    if (autogen === void 0) { autogen = false; }
+    if (node === null) {
+        return null;
+    }
+    var id = idMap.get(node);
+    if (!id && autogen) {
+        id = index++;
+        idMap.set(node, id);
+    }
+    return id ? id : null;
 }
-function schedule$1(task, priority) {
-    if (priority === void 0) { priority = 0 /* Priority.Normal */; }
-    return __awaiter(this, void 0, void 0, function () {
-        var _i, queuedTasks_1, q, promise;
-        return __generator(this, function (_a) {
-            // If this task is already scheduled, skip it
-            for (_i = 0, queuedTasks_1 = queuedTasks; _i < queuedTasks_1.length; _i++) {
-                q = queuedTasks_1[_i];
-                if (q.task === task) {
-                    return [2 /*return*/];
-                }
-            }
-            promise = new Promise(function (resolve) {
-                var insert = priority === 1 /* Priority.High */ ? "unshift" : "push";
-                // Queue this task for asynchronous execution later
-                // We also store a unique page identifier (id) along with the task to ensure
-                // ensure that we do not accidentally execute this task in context of a different page
-                queuedTasks[insert]({ task: task, resolve: resolve, id: id() });
-            });
-            // If there is no active task running, and Clarity is not in pause state,
-            // invoke the first task in the queue synchronously. This ensures that we don't yield the thread during unload event
-            if (activeTask === null && pauseTask === null) {
-                run();
-            }
-            return [2 /*return*/, promise];
-        });
-    });
+function add(node, parent, data, source) {
+    var id = getId(node, true);
+    var parentId = parent ? getId(parent) : null;
+    var previousId = getPreviousId(node);
+    var parentValue = null;
+    var regionId = exists(node) ? id : null;
+    var fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
+    var privacyId = config$1.content ? 1 /* Privacy.Sensitive */ : 3 /* Privacy.TextImage */;
+    if (parentId >= 0 && values[parentId]) {
+        parentValue = values[parentId];
+        parentValue.children.push(id);
+        regionId = regionId === null ? parentValue.region : regionId;
+        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
+        privacyId = parentValue.metadata.privacy;
+    }
+    // If there's an explicit region attribute set on the element, use it to mark a region on the page
+    if (data.attributes && "data-clarity-region" /* Constant.RegionData */ in data.attributes) {
+        observe$c(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
+        regionId = id;
+    }
+    nodes[id] = node;
+    values[id] = {
+        id: id,
+        parent: parentId,
+        previous: previousId,
+        children: [],
+        data: data,
+        selector: null,
+        hash: null,
+        region: regionId,
+        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
+    };
+    privacy(node, values[id], parentValue);
+    updateSelector(values[id]);
+    size$1(values[id]);
+    track$5(id, source);
 }
-function run() {
-    var entry = queuedTasks.shift();
-    if (entry) {
-        activeTask = entry;
-        entry.task().then(function () {
-            // Bail out if the context in which this task was operating is different from the current page
-            // An example scenario where task could span across pages is Single Page Applications (SPA)
-            // A task that started on page #1, but completes on page #2
-            if (entry.id !== id()) {
-                return;
+function update$1(node, parent, data, source) {
+    var id = getId(node);
+    var parentId = parent ? getId(parent) : null;
+    var previousId = getPreviousId(node);
+    var changed = false;
+    var parentChanged = false;
+    if (id in values) {
+        var value = values[id];
+        value.metadata.active = true;
+        // Handle case where internal ordering may have changed
+        if (value.previous !== previousId) {
+            changed = true;
+            value.previous = previousId;
+        }
+        // Handle case where parent might have been updated
+        if (value.parent !== parentId) {
+            changed = true;
+            var oldParentId = value.parent;
+            value.parent = parentId;
+            // Move this node to the right location under new parent
+            if (parentId !== null && parentId >= 0) {
+                var childIndex = previousId === null ? 0 : values[parentId].children.indexOf(previousId) + 1;
+                values[parentId].children.splice(childIndex, 0, id);
+                // Update region after the move
+                value.region = exists(node) ? id : values[parentId].region;
             }
-            entry.resolve();
-            activeTask = null; // Reset active task back to null now that the promise is resolved
-            run();
-        }).catch(function (error) {
-            // If one of the scheduled tasks failed, log, recover and continue processing rest of the tasks
-            if (entry.id !== id()) {
-                return;
+            else {
+                // Mark this element as deleted if the parent has been updated to null
+                remove(id, source);
             }
-            if (error) {
-                log$1(0 /* Code.RunTask */, 1 /* Severity.Warning */, error.name, error.message, error.stack);
+            // Remove reference to this node from the old parent
+            if (oldParentId !== null && oldParentId >= 0) {
+                var nodeIndex = values[oldParentId].children.indexOf(id);
+                if (nodeIndex >= 0) {
+                    values[oldParentId].children.splice(nodeIndex, 1);
+                }
             }
-            activeTask = null;
-            run();
-        });
+            parentChanged = true;
+        }
+        // Update data
+        for (var key in data) {
+            if (diff(value["data"], data, key)) {
+                changed = true;
+                value["data"][key] = data[key];
+            }
+        }
+        // Update selector
+        updateSelector(value);
+        track$5(id, source, changed, parentChanged);
     }
 }
-function state$9(timer) {
-    var id = key(timer);
-    if (id in tracker) {
-        var elapsed = performance.now() - tracker[id].start;
-        return (elapsed > tracker[id].yield) ? 0 /* Task.Wait */ : 1 /* Task.Run */;
+function sameorigin(node) {
+    var output = false;
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "IFRAME" /* Constant.IFrameTag */) {
+        var frame = node;
+        // To determine if the iframe is same-origin or not, we try accessing it's contentDocument.
+        // If the browser throws an exception, we assume it's cross-origin and move on.
+        // However, if we do a get a valid document object back, we assume the contents are accessible and iframe is same-origin.
+        try {
+            var doc = frame.contentDocument;
+            if (doc) {
+                iframeMap.set(frame.contentDocument, frame);
+                output = true;
+            }
+        }
+        catch ( /* do nothing */_a) { /* do nothing */ }
     }
-    // If this task is no longer being tracked, send stop message to the caller
-    return 2 /* Task.Stop */;
+    return output;
 }
-function start$x(timer) {
-    tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
+function iframe(node) {
+    var doc = node.nodeType === Node.DOCUMENT_NODE ? node : null;
+    return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
-function restart$2(timer) {
-    var id = key(timer);
-    if (tracker && tracker[id]) {
-        var c = tracker[id].calls;
-        var y = tracker[id].yield;
-        start$x(timer);
-        tracker[id].calls = c + 1;
-        tracker[id].yield = y;
+function privacy(node, value, parent) {
+    var data = value.data;
+    var metadata = value.metadata;
+    var current = metadata.privacy;
+    var attributes = data.attributes || {};
+    var tag = data.tag.toUpperCase();
+    switch (true) {
+        case maskTags.indexOf(tag) >= 0:
+            var type = attributes["type" /* Constant.Type */];
+            var meta_1 = "" /* Constant.Empty */;
+            Object.keys(attributes).forEach(function (x) { return meta_1 += attributes[x].toLowerCase(); });
+            var exclude = maskExclude.some(function (x) { return meta_1.indexOf(x) >= 0; });
+            // Regardless of privacy mode, always mask off user input from input boxes or drop downs with two exceptions:
+            // (1) The node is detected to be one of the excluded fields, in which case we drop everything
+            // (2) The node's type is one of the allowed types (like checkboxes)
+            metadata.privacy = tag === "INPUT" /* Constant.InputTag */ && maskDisable.indexOf(type) >= 0 ? current : (exclude ? 4 /* Privacy.Exclude */ : 2 /* Privacy.Text */);
+            break;
+        case "data-clarity-mask" /* Constant.MaskData */ in attributes:
+            metadata.privacy = 3 /* Privacy.TextImage */;
+            break;
+        case "data-clarity-unmask" /* Constant.UnmaskData */ in attributes:
+            metadata.privacy = 0 /* Privacy.None */;
+            break;
+        case privacyMap.has(node):
+            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
+            metadata.privacy = privacyMap.get(node);
+            break;
+        case fraudMap.has(node):
+            // If this node was explicitly configured to be evaluated for fraud, then also mask content
+            metadata.privacy = 2 /* Privacy.Text */;
+            break;
+        case tag === "*T" /* Constant.TextTag */:
+            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
+            var pTag = parent && parent.data ? parent.data.tag : "" /* Constant.Empty */;
+            var pSelector_1 = parent && parent.selector ? parent.selector[1 /* Selector.Default */] : "" /* Constant.Empty */;
+            var tags = ["STYLE" /* Constant.StyleTag */, "TITLE" /* Constant.TitleTag */, "svg:style" /* Constant.SvgStyle */];
+            metadata.privacy = tags.includes(pTag) || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
+            break;
+        case current === 1 /* Privacy.Sensitive */:
+            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
+            metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
+            break;
     }
 }
-function stop$u(timer) {
-    var end = performance.now();
-    var id = key(timer);
-    var duration = end - tracker[id].start;
-    sum(timer.cost, duration);
-    count$1(5 /* Metric.InvokeCount */);
-    // For the first execution, which is synchronous, time is automatically counted towards TotalDuration.
-    // However, for subsequent asynchronous runs, we need to manually update TotalDuration metric.
-    if (tracker[id].calls > 0) {
-        sum(4 /* Metric.TotalCost */, duration);
+function inspect(input, lookup, metadata) {
+    if (input && lookup.some(function (x) { return input.indexOf(x) >= 0; })) {
+        return 2 /* Privacy.Text */;
     }
+    return metadata.privacy;
 }
-function suspend$1(timer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var id, _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    id = key(timer);
-                    if (!(id in tracker)) return [3 /*break*/, 2];
-                    stop$u(timer);
-                    _a = tracker[id];
-                    return [4 /*yield*/, wait()];
-                case 1:
-                    _a.yield = (_b.sent()).timeRemaining();
-                    restart$2(timer);
-                    _b.label = 2;
-                case 2: 
-                // After we are done with suspending task, ensure that we are still operating in the right context
-                // If the task is still being tracked, continue running the task, otherwise ask caller to stop execution
-                return [2 /*return*/, id in tracker ? 1 /* Task.Run */ : 2 /* Task.Stop */];
+function diff(a, b, field) {
+    if (typeof a[field] === "object" && typeof b[field] === "object") {
+        for (var key in a[field]) {
+            if (a[field][key] !== b[field][key]) {
+                return true;
             }
+        }
+        for (var key in b[field]) {
+            if (b[field][key] !== a[field][key]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    return a[field] !== b[field];
+}
+function position(parent, child) {
+    child.metadata.position = 1;
+    var idx = parent ? parent.children.indexOf(child.id) : -1;
+    while (idx-- > 0) {
+        var sibling = values[parent.children[idx]];
+        if (child.data.tag === sibling.data.tag) {
+            child.metadata.position = sibling.metadata.position + 1;
+            break;
+        }
+    }
+    return child.metadata.position;
+}
+function updateSelector(value) {
+    var parent = value.parent && value.parent in values ? values[value.parent] : null;
+    var prefix = parent ? parent.selector : null;
+    var d = value.data;
+    var p = position(parent, value);
+    var s = { id: value.id, tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
+    value.selector = [get$1(s, 0 /* Selector.Alpha */), get$1(s, 1 /* Selector.Beta */)];
+    value.hash = value.selector.map(function (x) { return x ? hash(x) : null; });
+    value.hash.forEach(function (h) { return hashMap[h] = value.id; });
+}
+function hashText(hash) {
+    var id = lookup(hash);
+    var node = getNode(id);
+    return node !== null && node.textContent !== null ? node.textContent.substr(0, 25 /* Setting.ClickText */) : '';
+}
+function getNode(id) {
+    if (id in nodes) {
+        return nodes[id];
+    }
+    return null;
+}
+function getValue(id) {
+    if (id in values) {
+        return values[id];
+    }
+    return null;
+}
+function get(node) {
+    var id = getId(node);
+    return id in values ? values[id] : null;
+}
+function lookup(hash) {
+    return hash in hashMap ? hashMap[hash] : null;
+}
+function has(node) {
+    return getId(node) in nodes;
+}
+function updates$2() {
+    var output = [];
+    for (var _i = 0, updateMap_1 = updateMap; _i < updateMap_1.length; _i++) {
+        var id = updateMap_1[_i];
+        if (id in values) {
+            output.push(values[id]);
+        }
+    }
+    updateMap = [];
+    return output;
+}
+function remove(id, source) {
+    if (id in values) {
+        var value = values[id];
+        value.metadata.active = false;
+        value.parent = null;
+        track$5(id, source);
+    }
+}
+function size$1(value) {
+    // If this element is a image node, and is masked, then track box model for the current element
+    if (value.data.tag === "IMG" /* Constant.ImageTag */ && value.metadata.privacy === 3 /* Privacy.TextImage */) {
+        value.metadata.size = [];
+    }
+}
+function getPreviousId(node) {
+    var id = null;
+    // Some nodes may not have an ID by design since Clarity skips over tags like SCRIPT, NOSCRIPT, META, COMMENTS, etc..
+    // In that case, we keep going back and check for their sibling until we find a sibling with ID or no more sibling nodes are left.
+    while (id === null && node.previousSibling) {
+        id = getId(node.previousSibling);
+        node = node.previousSibling;
+    }
+    return id;
+}
+function track$5(id, source, changed, parentChanged) {
+    if (changed === void 0) { changed = true; }
+    if (parentChanged === void 0) { parentChanged = false; }
+    // Keep track of the order in which mutations happened, they may not be sequential
+    // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
+    // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.
+    var uIndex = updateMap.indexOf(id);
+    if (uIndex >= 0 && source === 1 /* Source.ChildListAdd */ && parentChanged) {
+        updateMap.splice(uIndex, 1);
+        updateMap.push(id);
+    }
+    else if (uIndex === -1 && changed) {
+        updateMap.push(id);
+    }
+}
+
+var dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    add: add,
+    get: get,
+    getId: getId,
+    getNode: getNode,
+    getValue: getValue,
+    has: has,
+    hashText: hashText,
+    iframe: iframe,
+    lookup: lookup,
+    parse: parse$1,
+    sameorigin: sameorigin,
+    start: start$x,
+    stop: stop$u,
+    update: update$1,
+    updates: updates$2
+});
+
+// Track the start time to be able to compute duration at the end of the task
+var idleTimeout = 5000;
+var tracker = {};
+var queuedTasks = [];
+var activeTask = null;
+var pauseTask = null;
+var resumeResolve = null;
+function pause$1() {
+    if (pauseTask === null) {
+        pauseTask = new Promise(function (resolve) {
+            resumeResolve = resolve;
         });
-    });
+    }
 }
-function key(timer) {
-    return "".concat(timer.id, ".").concat(timer.cost);
+function resume$1() {
+    if (pauseTask) {
+        resumeResolve();
+        pauseTask = null;
+        if (activeTask === null) {
+            run();
+        }
+    }
 }
-function wait() {
+function reset$j() {
+    tracker = {};
+    queuedTasks = [];
+    activeTask = null;
+    pauseTask = null;
+}
+function schedule$1(task, priority) {
+    if (priority === void 0) { priority = 0 /* Priority.Normal */; }
     return __awaiter(this, void 0, void 0, function () {
+        var _i, queuedTasks_1, q, promise;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!pauseTask) return [3 /*break*/, 2];
-                    return [4 /*yield*/, pauseTask];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2: return [2 /*return*/, new Promise(function (resolve) {
-                        requestIdleCallback(resolve, { timeout: idleTimeout });
-                    })];
+            // If this task is already scheduled, skip it
+            for (_i = 0, queuedTasks_1 = queuedTasks; _i < queuedTasks_1.length; _i++) {
+                q = queuedTasks_1[_i];
+                if (q.task === task) {
+                    return [2 /*return*/];
+                }
+            }
+            promise = new Promise(function (resolve) {
+                var insert = priority === 1 /* Priority.High */ ? "unshift" : "push";
+                // Queue this task for asynchronous execution later
+                // We also store a unique page identifier (id) along with the task to ensure
+                // ensure that we do not accidentally execute this task in context of a different page
+                queuedTasks[insert]({ task: task, resolve: resolve, id: id() });
+            });
+            // If there is no active task running, and Clarity is not in pause state,
+            // invoke the first task in the queue synchronously. This ensures that we don't yield the thread during unload event
+            if (activeTask === null && pauseTask === null) {
+                run();
             }
+            return [2 /*return*/, promise];
         });
     });
 }
-// Use native implementation of requestIdleCallback if it exists.
+function run() {
+    var entry = queuedTasks.shift();
+    if (entry) {
+        activeTask = entry;
+        entry.task().then(function () {
+            // Bail out if the context in which this task was operating is different from the current page
+            // An example scenario where task could span across pages is Single Page Applications (SPA)
+            // A task that started on page #1, but completes on page #2
+            if (entry.id !== id()) {
+                return;
+            }
+            entry.resolve();
+            activeTask = null; // Reset active task back to null now that the promise is resolved
+            run();
+        }).catch(function (error) {
+            // If one of the scheduled tasks failed, log, recover and continue processing rest of the tasks
+            if (entry.id !== id()) {
+                return;
+            }
+            if (error) {
+                log$1(0 /* Code.RunTask */, 1 /* Severity.Warning */, error.name, error.message, error.stack);
+            }
+            activeTask = null;
+            run();
+        });
+    }
+}
+function state$9(timer) {
+    var id = key(timer);
+    if (id in tracker) {
+        var elapsed = performance.now() - tracker[id].start;
+        return (elapsed > tracker[id].yield) ? 0 /* Task.Wait */ : 1 /* Task.Run */;
+    }
+    // If this task is no longer being tracked, send stop message to the caller
+    return 2 /* Task.Stop */;
+}
+function start$w(timer) {
+    tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
+}
+function restart$2(timer) {
+    var id = key(timer);
+    if (tracker && tracker[id]) {
+        var c = tracker[id].calls;
+        var y = tracker[id].yield;
+        start$w(timer);
+        tracker[id].calls = c + 1;
+        tracker[id].yield = y;
+    }
+}
+function stop$t(timer) {
+    var end = performance.now();
+    var id = key(timer);
+    var duration = end - tracker[id].start;
+    sum(timer.cost, duration);
+    count$1(5 /* Metric.InvokeCount */);
+    // For the first execution, which is synchronous, time is automatically counted towards TotalDuration.
+    // However, for subsequent asynchronous runs, we need to manually update TotalDuration metric.
+    if (tracker[id].calls > 0) {
+        sum(4 /* Metric.TotalCost */, duration);
+    }
+}
+function suspend$1(timer) {
+    return __awaiter(this, void 0, void 0, function () {
+        var id, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    id = key(timer);
+                    if (!(id in tracker)) return [3 /*break*/, 2];
+                    stop$t(timer);
+                    _a = tracker[id];
+                    return [4 /*yield*/, wait()];
+                case 1:
+                    _a.yield = (_b.sent()).timeRemaining();
+                    restart$2(timer);
+                    _b.label = 2;
+                case 2: 
+                // After we are done with suspending task, ensure that we are still operating in the right context
+                // If the task is still being tracked, continue running the task, otherwise ask caller to stop execution
+                return [2 /*return*/, id in tracker ? 1 /* Task.Run */ : 2 /* Task.Stop */];
+            }
+        });
+    });
+}
+function key(timer) {
+    return "".concat(timer.id, ".").concat(timer.cost);
+}
+function wait() {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!pauseTask) return [3 /*break*/, 2];
+                    return [4 /*yield*/, pauseTask];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/, new Promise(function (resolve) {
+                        requestIdleCallback(resolve, { timeout: idleTimeout });
+                    })];
+            }
+        });
+    });
+}
+// Use native implementation of requestIdleCallback if it exists.
 // Otherwise, fall back to a custom implementation using requestAnimationFrame & MessageChannel.
 // While it's not possible to build a perfect polyfill given the nature of this API, the following code attempts to get close.
 // Background context: requestAnimationFrame invokes the js code right before: style, layout and paint computation within the frame.
@@ -1157,6 +1510,41 @@ function tokenize (tokens) {
     return output;
 }
 
+var data$c;
+function reset$i() {
+    data$c = null;
+}
+function start$v() {
+    reset$i();
+    compute$7();
+}
+function compute$7() {
+    var body = document.body;
+    var d = document.documentElement;
+    var bodyClientWidth = body ? body.clientWidth : null;
+    var bodyScrollWidth = body ? body.scrollWidth : null;
+    var bodyOffsetWidth = body ? body.offsetWidth : null;
+    var documentClientWidth = d ? d.clientWidth : null;
+    var documentScrollWidth = d ? d.scrollWidth : null;
+    var documentOffsetWidth = d ? d.offsetWidth : null;
+    var width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth, documentClientWidth, documentScrollWidth, documentOffsetWidth);
+    var bodyClientHeight = body ? body.clientHeight : null;
+    var bodyScrollHeight = body ? body.scrollHeight : null;
+    var bodyOffsetHeight = body ? body.offsetHeight : null;
+    var documentClientHeight = d ? d.clientHeight : null;
+    var documentScrollHeight = d ? d.scrollHeight : null;
+    var documentOffsetHeight = d ? d.offsetHeight : null;
+    var height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight, documentClientHeight, documentScrollHeight, documentOffsetHeight);
+    // Check that width or height has changed from before, and also that width & height are not null values
+    if ((data$c === null || width !== data$c.width || height !== data$c.height) && width !== null && height !== null) {
+        data$c = { width: width, height: height };
+        encode$4(8 /* Event.Document */);
+    }
+}
+function end() {
+    reset$i();
+}
+
 function encode$4 (type, timer, ts) {
     if (timer === void 0) { timer = null; }
     if (ts === void 0) { ts = null; }
@@ -1183,7 +1571,7 @@ function encode$4 (type, timer, ts) {
                     queue(tokens);
                     return [3 /*break*/, 10];
                 case 2:
-                    for (_i = 0, _b = state$1; _i < _b.length; _i++) {
+                    for (_i = 0, _b = state$8; _i < _b.length; _i++) {
                         r = _b[_i];
                         tokens = [r.time, 7 /* Event.Region */];
                         tokens.push(r.data.id);
@@ -1192,7 +1580,7 @@ function encode$4 (type, timer, ts) {
                         tokens.push(r.data.name);
                         queue(tokens);
                     }
-                    reset$6();
+                    reset$h();
                     return [3 /*break*/, 10];
                 case 3:
                     // Check if we are operating within the context of the current page
@@ -1227,7 +1615,7 @@ function encode$4 (type, timer, ts) {
                         if (data[key]) {
                             switch (key) {
                                 case "tag":
-                                    box = size$1(value);
+                                    box = size(value);
                                     factor = mangle ? -1 : 1;
                                     tokens.push(value.id * factor);
                                     if (value.parent && active) {
@@ -1275,7 +1663,7 @@ function shouldMangle(value) {
     var privacy = value.metadata.privacy;
     return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
 }
-function size$1(value) {
+function size(value) {
     if (value.metadata.size !== null && value.metadata.size.length === 0) {
         var img = getNode(value.id);
         if (img) {
@@ -1291,95 +1679,207 @@ function attribute(key, value, privacy) {
     return "".concat(key, "=").concat(text$1(value, key, privacy));
 }
 
-var data$c;
-function reset$j() {
-    data$c = null;
-}
-function start$w() {
-    reset$j();
-    compute$7();
-}
-function compute$7() {
-    var body = document.body;
-    var d = document.documentElement;
-    var bodyClientWidth = body ? body.clientWidth : null;
-    var bodyScrollWidth = body ? body.scrollWidth : null;
-    var bodyOffsetWidth = body ? body.offsetWidth : null;
-    var documentClientWidth = d ? d.clientWidth : null;
-    var documentScrollWidth = d ? d.scrollWidth : null;
-    var documentOffsetWidth = d ? d.offsetWidth : null;
-    var width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth, documentClientWidth, documentScrollWidth, documentOffsetWidth);
-    var bodyClientHeight = body ? body.clientHeight : null;
-    var bodyScrollHeight = body ? body.scrollHeight : null;
-    var bodyOffsetHeight = body ? body.offsetHeight : null;
-    var documentClientHeight = d ? d.clientHeight : null;
-    var documentScrollHeight = d ? d.scrollHeight : null;
-    var documentOffsetHeight = d ? d.offsetHeight : null;
-    var height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight, documentClientHeight, documentScrollHeight, documentOffsetHeight);
-    // Check that width or height has changed from before, and also that width & height are not null values
-    if ((data$c === null || width !== data$c.width || height !== data$c.height) && width !== null && height !== null) {
-        data$c = { width: width, height: height };
-        encode$4(8 /* Event.Document */);
-    }
-}
-function end() {
-    reset$j();
-}
-
 var state$8 = [];
-function start$v() {
-    reset$i();
-}
-function observe$c(root) {
-    bind(root, "change", recompute$8, true);
+var regionMap = null; // Maps region nodes => region name
+var regions = {};
+var queue$2 = [];
+var watch = false;
+var observer$1 = null;
+function start$u() {
+    reset$h();
+    observer$1 = null;
+    regionMap = new WeakMap();
+    regions = {};
+    queue$2 = [];
+    watch = window["IntersectionObserver"] ? true : false;
 }
-function recompute$8(evt) {
-    var element = target(evt);
-    if (element) {
-        var value = element.value;
-        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
-        state$8.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
-        schedule$1(encode$3.bind(this, 42 /* Event.Change */));
+function observe$c(node, name) {
+    if (regionMap.has(node) === false) {
+        regionMap.set(node, name);
+        observer$1 = observer$1 === null && watch ? new IntersectionObserver(handler$3, {
+            // Get notified as intersection continues to change
+            // This allows us to process regions that get partially hidden during the lifetime of the page
+            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
+            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
+            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1]
+        }) : observer$1;
+        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
+            observer$1.observe(node);
+        }
     }
 }
-function reset$i() {
-    state$8 = [];
+function exists(node) {
+    // Check if regionMap is not null before looking up a node
+    // Since, dom module stops after region module, it's possible that we may set regionMap to be null
+    // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
+    return regionMap && regionMap.has(node);
 }
-function stop$t() {
-    reset$i();
-}
-
-function offset (element) {
-    var output = { x: 0, y: 0 };
-    // Walk up the chain to ensure we compute offset distance correctly
-    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
-    if (element && element.offsetParent) {
-        do {
-            var parent_1 = element.offsetParent;
-            var frame = parent_1 === null ? iframe(element.ownerDocument) : null;
-            output.x += element.offsetLeft;
-            output.y += element.offsetTop;
-            element = frame ? frame : parent_1;
-        } while (element);
+function track$4(id, event) {
+    var node = getNode(id);
+    var data = id in regions ? regions[id] : { id: id, visibility: 0 /* RegionVisibility.Rendered */, interaction: 16 /* InteractionState.None */, name: regionMap.get(node) };
+    // Determine the interaction state based on incoming event
+    var interaction = 16 /* InteractionState.None */;
+    switch (event) {
+        case 9 /* Event.Click */:
+            interaction = 20 /* InteractionState.Clicked */;
+            break;
+        case 27 /* Event.Input */:
+            interaction = 30 /* InteractionState.Input */;
+            break;
     }
-    return output;
-}
-
-var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
-var state$7 = [];
-function start$u() {
-    reset$h();
-}
-function observe$b(root) {
-    bind(root, "click", handler$3.bind(this, 9 /* Event.Click */, root), true);
+    // Process updates to this region, if applicable
+    process$6(node, data, interaction, data.visibility);
 }
-function handler$3(event, root, evt) {
-    var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
-    var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
-    var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
-    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
-    if (frame) {
+function compute$6() {
+    // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
+    // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
+    // For those cases we add them to the queue and re-process them below
+    var q = [];
+    for (var _i = 0, queue_1 = queue$2; _i < queue_1.length; _i++) {
+        var r = queue_1[_i];
+        var id = getId(r.node);
+        if (!(id in regions)) {
+            if (id) {
+                r.data.id = id;
+                regions[id] = r.data;
+                state$8.push(clone$1(r.data));
+            }
+            else {
+                q.push(r);
+            }
+        }
+    }
+    queue$2 = q;
+    // Schedule encode only when we have at least one valid data entry
+    if (state$8.length > 0) {
+        encode$4(7 /* Event.Region */);
+    }
+}
+function handler$3(entries) {
+    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        var target = entry.target;
+        var rect = entry.boundingClientRect;
+        var overlap = entry.intersectionRect;
+        var viewport = entry.rootBounds;
+        // Only capture regions that have non-zero width or height to avoid tracking and sending regions
+        // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
+        // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
+        // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
+        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
+            var id = target ? getId(target) : null;
+            var data = id in regions ? regions[id] : { id: id, name: regionMap.get(target), interaction: 16 /* InteractionState.None */, visibility: 0 /* RegionVisibility.Rendered */ };
+            // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
+            // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
+            var viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
+            var visible = viewportRatio > 0.05 /* Setting.ViewportIntersectionRatio */ || entry.intersectionRatio > 0.8 /* Setting.IntersectionRatio */;
+            // If an element is either visible or was visible and has been scrolled to the end
+            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
+            // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
+            var scrolledToEnd = (visible || data.visibility == 10 /* RegionVisibility.Visible */) && Math.abs(rect.top) + viewport.height > rect.height;
+            // Process updates to this region, if applicable
+            process$6(target, data, data.interaction, (scrolledToEnd ?
+                13 /* RegionVisibility.ScrolledToEnd */ :
+                (visible ? 10 /* RegionVisibility.Visible */ : 0 /* RegionVisibility.Rendered */)));
+            // Stop observing this element now that we have already received scrolled signal
+            if (data.visibility >= 13 /* RegionVisibility.ScrolledToEnd */ && observer$1) {
+                observer$1.unobserve(target);
+            }
+        }
+    }
+    if (state$8.length > 0) {
+        encode$4(7 /* Event.Region */);
+    }
+}
+function process$6(n, d, s, v) {
+    // Check if received a state that supersedes existing state
+    var updated = s > d.interaction || v > d.visibility;
+    d.interaction = s > d.interaction ? s : d.interaction;
+    d.visibility = v > d.visibility ? v : d.visibility;
+    // If the corresponding node is already discovered, update the internal state
+    // Otherwise, track it in a queue to reprocess later.
+    if (d.id) {
+        if ((d.id in regions && updated) || !(d.id in regions)) {
+            regions[d.id] = d;
+            state$8.push(clone$1(d));
+        }
+    }
+    else {
+        queue$2.push({ node: n, data: d });
+    }
+}
+function clone$1(r) {
+    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
+}
+function reset$h() {
+    state$8 = [];
+}
+function stop$s() {
+    reset$h();
+    regionMap = null;
+    regions = {};
+    queue$2 = [];
+    if (observer$1) {
+        observer$1.disconnect();
+        observer$1 = null;
+    }
+    watch = false;
+}
+
+var state$7 = [];
+function start$t() {
+    reset$g();
+}
+function observe$b(root) {
+    bind(root, "change", recompute$8, true);
+}
+function recompute$8(evt) {
+    var element = target(evt);
+    if (element) {
+        var value = element.value;
+        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
+        state$7.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
+        schedule$1(encode$3.bind(this, 42 /* Event.Change */));
+    }
+}
+function reset$g() {
+    state$7 = [];
+}
+function stop$r() {
+    reset$g();
+}
+
+function offset (element) {
+    var output = { x: 0, y: 0 };
+    // Walk up the chain to ensure we compute offset distance correctly
+    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
+    if (element && element.offsetParent) {
+        do {
+            var parent_1 = element.offsetParent;
+            var frame = parent_1 === null ? iframe(element.ownerDocument) : null;
+            output.x += element.offsetLeft;
+            output.y += element.offsetTop;
+            element = frame ? frame : parent_1;
+        } while (element);
+    }
+    return output;
+}
+
+var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
+var state$6 = [];
+function start$s() {
+    reset$f();
+}
+function observe$a(root) {
+    bind(root, "click", handler$2.bind(this, 9 /* Event.Click */, root), true);
+}
+function handler$2(event, root, evt) {
+    var frame = iframe(root);
+    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
+    var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
+    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
+    if (frame) {
         var distance = offset(frame);
         x = x ? x + Math.round(distance.x) : x;
         y = y ? y + Math.round(distance.y) : y;
@@ -1401,7 +1901,7 @@ function handler$3(event, root, evt) {
     var eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * 32767 /* Setting.ClickPrecision */), 0) : 0;
     // Check for null values before processing this event
     if (x !== null && y !== null) {
-        state$7.push({
+        state$6.push({
             time: time(evt),
             event: event,
             data: {
@@ -1476,39 +1976,39 @@ function context(a) {
     }
     return 0 /* BrowsingContext.Self */;
 }
-function reset$h() {
-    state$7 = [];
+function reset$f() {
+    state$6 = [];
 }
-function stop$s() {
-    reset$h();
+function stop$q() {
+    reset$f();
 }
 
-var state$6 = [];
-function start$t() {
-    reset$g();
+var state$5 = [];
+function start$r() {
+    reset$e();
 }
-function observe$a(root) {
+function observe$9(root) {
     bind(root, "cut", recompute$7.bind(this, 0 /* Clipboard.Cut */), true);
     bind(root, "copy", recompute$7.bind(this, 1 /* Clipboard.Copy */), true);
     bind(root, "paste", recompute$7.bind(this, 2 /* Clipboard.Paste */), true);
 }
 function recompute$7(action, evt) {
-    state$6.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
+    state$5.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
     schedule$1(encode$3.bind(this, 38 /* Event.Clipboard */));
 }
-function reset$g() {
-    state$6 = [];
+function reset$e() {
+    state$5 = [];
 }
-function stop$r() {
-    reset$g();
+function stop$p() {
+    reset$e();
 }
 
 var timeout$5 = null;
-var state$5 = [];
-function start$s() {
-    reset$f();
+var state$4 = [];
+function start$q() {
+    reset$d();
 }
-function observe$9(root) {
+function observe$8(root) {
     bind(root, "input", recompute$6, true);
 }
 function recompute$6(evt) {
@@ -1524,31 +2024,31 @@ function recompute$6(evt) {
         }
         var data = { target: input, value: v };
         // If last entry in the queue is for the same target node as the current one, remove it so we can later swap it with current data.
-        if (state$5.length > 0 && (state$5[state$5.length - 1].data.target === data.target)) {
-            state$5.pop();
+        if (state$4.length > 0 && (state$4[state$4.length - 1].data.target === data.target)) {
+            state$4.pop();
         }
-        state$5.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
+        state$4.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
         clearTimeout(timeout$5);
-        timeout$5 = setTimeout(process$6, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
+        timeout$5 = setTimeout(process$5, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
     }
 }
-function process$6(event) {
+function process$5(event) {
     schedule$1(encode$3.bind(this, event));
 }
-function reset$f() {
-    state$5 = [];
+function reset$d() {
+    state$4 = [];
 }
-function stop$q() {
+function stop$o() {
     clearTimeout(timeout$5);
-    reset$f();
+    reset$d();
 }
 
-var state$4 = [];
+var state$3 = [];
 var timeout$4 = null;
-function start$r() {
-    reset$e();
+function start$p() {
+    reset$c();
 }
-function observe$8(root) {
+function observe$7(root) {
     bind(root, "mousedown", mouse.bind(this, 13 /* Event.MouseDown */, root), true);
     bind(root, "mouseup", mouse.bind(this, 14 /* Event.MouseUp */, root), true);
     bind(root, "mousemove", mouse.bind(this, 12 /* Event.MouseMove */, root), true);
@@ -1572,7 +2072,7 @@ function mouse(event, root, evt) {
     }
     // Check for null values before processing this event
     if (x !== null && y !== null) {
-        handler$2({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
+        handler$1({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
     }
 }
 function touch(event, root, evt) {
@@ -1589,36 +2089,36 @@ function touch(event, root, evt) {
             y = y && frame ? y + Math.round(frame.offsetTop) : y;
             // Check for null values before processing this event
             if (x !== null && y !== null) {
-                handler$2({ time: t, event: event, data: { target: target(evt), x: x, y: y } });
+                handler$1({ time: t, event: event, data: { target: target(evt), x: x, y: y } });
             }
         }
     }
 }
-function handler$2(current) {
+function handler$1(current) {
     switch (current.event) {
         case 12 /* Event.MouseMove */:
         case 15 /* Event.MouseWheel */:
         case 19 /* Event.TouchMove */:
-            var length_1 = state$4.length;
-            var last = length_1 > 1 ? state$4[length_1 - 2] : null;
+            var length_1 = state$3.length;
+            var last = length_1 > 1 ? state$3[length_1 - 2] : null;
             if (last && similar$1(last, current)) {
-                state$4.pop();
+                state$3.pop();
             }
-            state$4.push(current);
+            state$3.push(current);
             clearTimeout(timeout$4);
-            timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, current.event);
+            timeout$4 = setTimeout(process$4, 500 /* Setting.LookAhead */, current.event);
             break;
         default:
-            state$4.push(current);
-            process$5(current.event);
+            state$3.push(current);
+            process$4(current.event);
             break;
     }
 }
-function process$5(event) {
+function process$4(event) {
     schedule$1(encode$3.bind(this, event));
 }
-function reset$e() {
-    state$4 = [];
+function reset$c() {
+    state$3 = [];
 }
 function similar$1(last, current) {
     var dx = last.data.x - current.data.x;
@@ -1628,16 +2128,16 @@ function similar$1(last, current) {
     var match = current.data.target === last.data.target;
     return current.event === last.event && match && distance < 20 /* Setting.Distance */ && gap < 25 /* Setting.Interval */;
 }
-function stop$p() {
+function stop$n() {
     clearTimeout(timeout$4);
     // Send out any pending pointer events in the pipeline
-    if (state$4.length > 0) {
-        process$5(state$4[state$4.length - 1].event);
+    if (state$3.length > 0) {
+        process$4(state$3[state$3.length - 1].event);
     }
 }
 
 var data$b;
-function start$q() {
+function start$o() {
     bind(window, "resize", recompute$5);
     recompute$5();
 }
@@ -1651,20 +2151,20 @@ function recompute$5() {
     };
     encode$3(11 /* Event.Resize */);
 }
-function reset$d() {
+function reset$b() {
     data$b = null;
 }
-function stop$o() {
-    reset$d();
+function stop$m() {
+    reset$b();
 }
 
-var state$3 = [];
+var state$2 = [];
 var timeout$3 = null;
-function start$p() {
-    state$3 = [];
+function start$n() {
+    state$2 = [];
     recompute$4();
 }
-function observe$7(root) {
+function observe$6(root) {
     var frame = iframe(root);
     var node = frame ? frame.contentWindow : (root === document ? window : root);
     bind(node, "scroll", recompute$4, true);
@@ -1690,19 +2190,19 @@ function recompute$4(event) {
     if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
         return;
     }
-    var length = state$3.length;
-    var last = length > 1 ? state$3[length - 2] : null;
+    var length = state$2.length;
+    var last = length > 1 ? state$2[length - 2] : null;
     if (last && similar(last, current)) {
-        state$3.pop();
+        state$2.pop();
     }
-    state$3.push(current);
+    state$2.push(current);
     clearTimeout(timeout$3);
-    timeout$3 = setTimeout(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
+    timeout$3 = setTimeout(process$3, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
 }
-function reset$c() {
-    state$3 = [];
+function reset$a() {
+    state$2 = [];
 }
-function process$4(event) {
+function process$3(event) {
     schedule$1(encode$3.bind(this, event));
 }
 function similar(last, current) {
@@ -1710,18 +2210,18 @@ function similar(last, current) {
     var dy = last.data.y - current.data.y;
     return (dx * dx + dy * dy < 20 /* Setting.Distance */ * 20 /* Setting.Distance */) && (current.time - last.time < 25 /* Setting.Interval */);
 }
-function stop$n() {
+function stop$l() {
     clearTimeout(timeout$3);
-    state$3 = [];
+    state$2 = [];
 }
 
 var data$a = null;
 var previous = null;
 var timeout$2 = null;
-function start$o() {
-    reset$b();
+function start$m() {
+    reset$9();
 }
-function observe$6(root) {
+function observe$5(root) {
     bind(root, "selectstart", recompute$3.bind(this, root), true);
     bind(root, "selectionchange", recompute$3.bind(this, root), true);
 }
@@ -1743,7 +2243,7 @@ function recompute$3(root) {
     var startNode = data$a.start ? data$a.start : null;
     if (previous !== null && data$a.start !== null && startNode !== current.anchorNode) {
         clearTimeout(timeout$2);
-        process$3(21 /* Event.Selection */);
+        process$2(21 /* Event.Selection */);
     }
     data$a = {
         start: current.anchorNode,
@@ -1753,40 +2253,40 @@ function recompute$3(root) {
     };
     previous = current;
     clearTimeout(timeout$2);
-    timeout$2 = setTimeout(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
+    timeout$2 = setTimeout(process$2, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
 }
-function process$3(event) {
+function process$2(event) {
     schedule$1(encode$3.bind(this, event));
 }
-function reset$b() {
+function reset$9() {
     previous = null;
     data$a = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
 }
-function stop$m() {
-    reset$b();
+function stop$k() {
+    reset$9();
     clearTimeout(timeout$2);
 }
 
-var state$2 = [];
-function start$n() {
-    reset$a();
+var state$1 = [];
+function start$l() {
+    reset$8();
 }
-function observe$5(root) {
+function observe$4(root) {
     bind(root, "submit", recompute$2, true);
 }
 function recompute$2(evt) {
-    state$2.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
+    state$1.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
     schedule$1(encode$3.bind(this, 39 /* Event.Submit */));
 }
-function reset$a() {
-    state$2 = [];
+function reset$8() {
+    state$1 = [];
 }
-function stop$l() {
-    reset$a();
+function stop$j() {
+    reset$8();
 }
 
 var data$9;
-function start$m() {
+function start$k() {
     bind(window, "pagehide", recompute$1);
 }
 function recompute$1(evt) {
@@ -1794,15 +2294,15 @@ function recompute$1(evt) {
     encode$3(26 /* Event.Unload */, time(evt));
     stop();
 }
-function reset$9() {
+function reset$7() {
     data$9 = null;
 }
-function stop$k() {
-    reset$9();
+function stop$i() {
+    reset$7();
 }
 
 var data$8;
-function start$l() {
+function start$j() {
     bind(document, "visibilitychange", recompute);
     recompute();
 }
@@ -1811,61 +2311,61 @@ function recompute(evt) {
     data$8 = { visible: "visibilityState" in document ? document.visibilityState : "default" };
     encode$3(28 /* Event.Visibility */, time(evt));
 }
-function reset$8() {
+function reset$6() {
     data$8 = null;
 }
-function stop$j() {
-    reset$8();
+function stop$h() {
+    reset$6();
 }
 
-function start$k() {
+function start$i() {
     start$g();
-    start$u();
-    start$t();
-    start$r();
     start$s();
-    start$q();
-    start$l();
+    start$r();
     start$p();
+    start$q();
     start$o();
-    start$v();
+    start$j();
     start$n();
     start$m();
+    start$t();
+    start$l();
+    start$k();
 }
-function stop$i() {
+function stop$g() {
     stop$e();
-    stop$s();
-    stop$r();
-    stop$p();
     stop$q();
-    stop$o();
-    stop$j();
+    stop$p();
     stop$n();
+    stop$o();
     stop$m();
-    stop$t();
+    stop$h();
     stop$l();
     stop$k();
+    stop$r();
+    stop$j();
+    stop$i();
 }
-function observe$4(root) {
-    observe$7(root);
+function observe$3(root) {
+    observe$6(root);
     // Only monitor following interactions if the root node is a document
     // In case of shadow DOM, following events automatically bubble up to the parent document.
     if (root.nodeType === Node.DOCUMENT_NODE) {
-        observe$b(root);
         observe$a(root);
-        observe$8(root);
         observe$9(root);
-        observe$6(root);
-        observe$c(root);
+        observe$7(root);
+        observe$8(root);
         observe$5(root);
+        observe$b(root);
+        observe$4(root);
     }
 }
 
 var interaction = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    observe: observe$4,
-    start: start$k,
-    stop: stop$i
+    observe: observe$3,
+    start: start$i,
+    stop: stop$g
 });
 
 var digitsRegex = /[^0-9\.]/g;
@@ -1968,7 +2468,7 @@ function processNode (node, source) {
             // later whenever there are new additions or modifications to DOM (mutations)
             if (node === document)
                 parse$1(document);
-            observe$3(node);
+            observe$2(node);
             break;
         case Node.DOCUMENT_FRAGMENT_NODE:
             var shadowRoot = node;
@@ -1976,7 +2476,7 @@ function processNode (node, source) {
                 parse$1(shadowRoot);
                 var type = typeof (shadowRoot.constructor);
                 if (type === "function" /* Constant.Function */ && shadowRoot.constructor.toString().indexOf("[native code]" /* Constant.NativeCode */) >= 0) {
-                    observe$3(shadowRoot);
+                    observe$2(shadowRoot);
                     // See: https://wicg.github.io/construct-stylesheets/ for more details on adoptedStyleSheets.
                     // At the moment, we are only able to capture "open" shadow DOM nodes. If they are closed, they are not accessible.
                     // In future we may decide to proxy "attachShadow" call to gain access, but at the moment, we don't want to
@@ -2096,931 +2596,400 @@ function processNode (node, source) {
                         child = element.shadowRoot;
                     }
                     dom[call](node, parent, data, source);
-                    break;
-            }
-            break;
-    }
-    return child;
-}
-function observe$3(root) {
-    if (has(root)) {
-        return;
-    }
-    observe$2(root); // Observe mutations for this root node
-    observe$4(root); // Observe interactions for this root node
-}
-function getStyleValue(style) {
-    // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
-    // Also, check if stylesheet has any data-* attribute, if so process rules instead of looking up text
-    var value = style.textContent ? style.textContent.trim() : "" /* Constant.Empty */;
-    var dataset = style.dataset ? Object.keys(style.dataset).length : 0;
-    if (value.length === 0 || dataset > 0) {
-        value = getCssRules(style.sheet);
-    }
-    return value;
-}
-function getCssRules(sheet) {
-    var value = "" /* Constant.Empty */;
-    var cssRules = null;
-    // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
-    try {
-        cssRules = sheet ? sheet.cssRules : [];
-    }
-    catch (e) {
-        log$1(1 /* Code.CssRules */, 1 /* Severity.Warning */, e ? e.name : null);
-        if (e && e.name !== "SecurityError") {
-            throw e;
-        }
-    }
-    if (cssRules !== null) {
-        for (var i = 0; i < cssRules.length; i++) {
-            value += cssRules[i].cssText;
-        }
-    }
-    return value;
-}
-function getAttributes(element) {
-    var output = {};
-    var attributes = element.attributes;
-    if (attributes && attributes.length > 0) {
-        for (var i = 0; i < attributes.length; i++) {
-            var name_1 = attributes[i].name;
-            if (IGNORE_ATTRIBUTES.indexOf(name_1) < 0) {
-                output[name_1] = attributes[i].value;
-            }
-        }
-    }
-    // For INPUT tags read the dynamic "value" property if an explicit "value" attribute is not set
-    if (element.tagName === "INPUT" /* Constant.InputTag */ && !("value" /* Constant.Value */ in output) && element.value) {
-        output["value" /* Constant.Value */] = element.value;
-    }
-    return output;
-}
-
-function traverse (root, timer, source) {
-    return __awaiter(this, void 0, void 0, function () {
-        var queue, node, next, state, subnode;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    queue = [root];
-                    _a.label = 1;
-                case 1:
-                    if (!(queue.length > 0)) return [3 /*break*/, 4];
-                    node = queue.shift();
-                    next = node.firstChild;
-                    while (next) {
-                        queue.push(next);
-                        next = next.nextSibling;
-                    }
-                    state = state$9(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 2:
-                    state = _a.sent();
-                    _a.label = 3;
-                case 3:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 4];
-                    }
-                    subnode = processNode(node, source);
-                    if (subnode) {
-                        queue.push(subnode);
-                    }
-                    return [3 /*break*/, 1];
-                case 4: return [2 /*return*/];
-            }
-        });
-    });
-}
-
-var observers = [];
-var mutations = [];
-var insertRule = null;
-var deleteRule = null;
-var attachShadow = null;
-var queue$2 = [];
-var timeout$1 = null;
-var activePeriod = null;
-var history$4 = {};
-function start$j() {
-    observers = [];
-    queue$2 = [];
-    timeout$1 = null;
-    activePeriod = 0;
-    history$4 = {};
-    // Some popular open source libraries, like styled-components, optimize performance
-    // by injecting CSS using insertRule API vs. appending text node. A side effect of
-    // using javascript API is that it doesn't trigger DOM mutation and therefore we
-    // need to override the insertRule API and listen for changes manually.
-    if (insertRule === null) {
-        insertRule = CSSStyleSheet.prototype.insertRule;
-        CSSStyleSheet.prototype.insertRule = function () {
-            if (active()) {
-                schedule(this.ownerNode);
-            }
-            return insertRule.apply(this, arguments);
-        };
-    }
-    if (deleteRule === null) {
-        deleteRule = CSSStyleSheet.prototype.deleteRule;
-        CSSStyleSheet.prototype.deleteRule = function () {
-            if (active()) {
-                schedule(this.ownerNode);
-            }
-            return deleteRule.apply(this, arguments);
-        };
-    }
-    // Add a hook to attachShadow API calls
-    // In case we are unable to add a hook and browser throws an exception,
-    // reset attachShadow variable and resume processing like before
-    if (attachShadow === null) {
-        attachShadow = Element.prototype.attachShadow;
-        try {
-            Element.prototype.attachShadow = function () {
-                if (active()) {
-                    return schedule(attachShadow.apply(this, arguments));
-                }
-                else {
-                    return attachShadow.apply(this, arguments);
-                }
-            };
-        }
-        catch (_a) {
-            attachShadow = null;
-        }
-    }
-}
-function observe$2(node) {
-    // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
-    // In the case of shadow dom, any mutations that happen within the shadow dom are not bubbled up to the host document
-    // For this reason, we need to wire up mutations every time we see a new shadow dom.
-    // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
-    try {
-        var m = api("MutationObserver" /* Constant.MutationObserver */);
-        var observer = m in window ? new window[m](measure(handle$1)) : null;
-        if (observer) {
-            observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
-            observers.push(observer);
-        }
-    }
-    catch (e) {
-        log$1(2 /* Code.MutationObserver */, 0 /* Severity.Info */, e ? e.name : null);
-    }
-}
-function monitor(frame) {
-    // Bind to iframe's onload event so we get notified anytime there's an update to iframe content.
-    // This includes cases where iframe location is updated without explicitly updating src attribute
-    // E.g. iframe.contentWindow.location.href = "new-location";
-    if (has(frame) === false) {
-        bind(frame, "load" /* Constant.LoadEvent */, generate.bind(this, frame, "childList" /* Constant.ChildList */), true);
-    }
-}
-function stop$h() {
-    for (var _i = 0, observers_1 = observers; _i < observers_1.length; _i++) {
-        var observer = observers_1[_i];
-        if (observer) {
-            observer.disconnect();
-        }
-    }
-    observers = [];
-    history$4 = {};
-    mutations = [];
-    queue$2 = [];
-    activePeriod = 0;
-    timeout$1 = null;
-}
-function active$2() {
-    activePeriod = time() + 3000 /* Setting.MutationActivePeriod */;
-}
-function handle$1(m) {
-    // Queue up mutation records for asynchronous processing
-    var now = time();
-    track$6(6 /* Event.Mutation */, now);
-    mutations.push({ time: now, mutations: m });
-    schedule$1(process$2, 1 /* Priority.High */).then(function () {
-        setTimeout(compute$7);
-        measure(compute$6)();
-    });
-}
-function process$2() {
-    return __awaiter(this, void 0, void 0, function () {
-        var timer, record, instance, _i, _a, mutation, state, target, type, value;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$x(timer);
-                    _b.label = 1;
-                case 1:
-                    if (!(mutations.length > 0)) return [3 /*break*/, 8];
-                    record = mutations.shift();
-                    instance = time();
-                    _i = 0, _a = record.mutations;
-                    _b.label = 2;
-                case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 6];
-                    mutation = _a[_i];
-                    state = state$9(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 3:
-                    state = _b.sent();
-                    _b.label = 4;
-                case 4:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
-                    }
-                    target = mutation.target;
-                    type = track$5(mutation, timer, instance);
-                    if (type && target && target.ownerDocument) {
-                        parse$1(target.ownerDocument);
-                    }
-                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
-                        parse$1(target);
-                    }
-                    switch (type) {
-                        case "attributes" /* Constant.Attributes */:
-                            processNode(target, 3 /* Source.Attributes */);
-                            break;
-                        case "characterData" /* Constant.CharacterData */:
-                            processNode(target, 4 /* Source.CharacterData */);
-                            break;
-                        case "childList" /* Constant.ChildList */:
-                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer);
-                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer);
-                            break;
-                        case "suspend" /* Constant.Suspend */:
-                            value = get(target);
-                            if (value) {
-                                value.metadata.suspend = true;
-                            }
-                            break;
-                    }
-                    _b.label = 5;
-                case 5:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
-                case 7:
-                    _b.sent();
-                    return [3 /*break*/, 1];
-                case 8:
-                    stop$u(timer);
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function track$5(m, timer, instance) {
-    var value = m.target ? get(m.target.parentNode) : null;
-    // Check if the parent is already discovered and that the parent is not the document root
-    if (value && value.data.tag !== "HTML" /* Constant.HTML */) {
-        var inactive = time() > activePeriod;
-        var target = get(m.target);
-        var element = target && target.selector ? target.selector.join() : m.target.nodeName;
-        var parent_1 = value.selector ? value.selector.join() : "" /* Constant.Empty */;
-        // We use selector, instead of id, to determine the key (signature for the mutation) because in some cases
-        // repeated mutations can cause elements to be destroyed and then recreated as new DOM nodes
-        // In those cases, IDs will change however the selector (which is relative to DOM xPath) remains the same
-        var key = [parent_1, element, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
-        // Initialize an entry if it doesn't already exist
-        history$4[key] = key in history$4 ? history$4[key] : [0, instance];
-        var h = history$4[key];
-        // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
-        if (inactive === false && h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
-            processNodeList(h[2], 2 /* Source.ChildListRemove */, timer);
-        }
-        // Update the counter
-        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
-        h[1] = instance;
-        // Return updated mutation type based on if we have already hit the threshold or not
-        if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
-            // Store a reference to removedNodes so we can process them later
-            // when we resume mutations again on user interactions
-            h[2] = m.removedNodes;
-            return "suspend" /* Constant.Suspend */;
-        }
-        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
-            return "" /* Constant.Empty */;
-        }
-    }
-    return m.type;
-}
-function names(nodes) {
-    var output = [];
-    for (var i = 0; nodes && i < nodes.length; i++) {
-        output.push(nodes[i].nodeName);
-    }
-    return output.join();
-}
-function processNodeList(list, source, timer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var length, i, state;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    length = list ? list.length : 0;
-                    i = 0;
-                    _a.label = 1;
-                case 1:
-                    if (!(i < length)) return [3 /*break*/, 6];
-                    if (!(source === 1 /* Source.ChildListAdd */)) return [3 /*break*/, 2];
-                    traverse(list[i], timer, source);
-                    return [3 /*break*/, 5];
-                case 2:
-                    state = state$9(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 3:
-                    state = _a.sent();
-                    _a.label = 4;
-                case 4:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
-                    }
-                    processNode(list[i], source);
-                    _a.label = 5;
-                case 5:
-                    i++;
-                    return [3 /*break*/, 1];
-                case 6: return [2 /*return*/];
-            }
-        });
-    });
-}
-function schedule(node, fragment) {
-    if (fragment === void 0) { fragment = false; }
-    // Only schedule manual trigger for this node if it's not already in the queue
-    if (queue$2.indexOf(node) < 0) {
-        queue$2.push(node);
-    }
-    // Cancel any previous trigger before scheduling a new one.
-    // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
-    // And in those cases we do not wish to monitor changes multiple times for the same node.
-    if (timeout$1) {
-        clearTimeout(timeout$1);
-    }
-    timeout$1 = setTimeout(function () { trigger$1(fragment); }, 33 /* Setting.LookAhead */);
-    return node;
-}
-function trigger$1(fragment) {
-    for (var _i = 0, queue_1 = queue$2; _i < queue_1.length; _i++) {
-        var node = queue_1[_i];
-        // Generate a mutation for this node only if it still exists
-        if (node) {
-            var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
-            // Skip re-processing shadowRoot if it was already discovered
-            if (shadowRoot && has(node)) {
-                continue;
-            }
-            generate(node, shadowRoot || fragment ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
-        }
-    }
-    queue$2 = [];
-}
-function generate(target, type) {
-    measure(handle$1)([{
-            addedNodes: [target],
-            attributeName: null,
-            attributeNamespace: null,
-            nextSibling: null,
-            oldValue: null,
-            previousSibling: null,
-            removedNodes: [],
-            target: target,
-            type: type
-        }]);
-}
-
-var index = 1;
-var nodes = [];
-var values = [];
-var updateMap = [];
-var hashMap = {};
-var override = [];
-var unmask = [];
-var updatedFragments = {};
-var maskText = [];
-var maskExclude = [];
-var maskDisable = [];
-var maskTags = [];
-// The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
-var idMap = null; // Maps node => id.
-var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
-var privacyMap = null; // Maps node => Privacy (enum)
-var fraudMap = null; // Maps node => FraudId (number)
-function start$i() {
-    reset$7();
-    parse$1(document, true);
-}
-function stop$g() {
-    reset$7();
-}
-function reset$7() {
-    index = 1;
-    nodes = [];
-    values = [];
-    updateMap = [];
-    hashMap = {};
-    override = [];
-    unmask = [];
-    maskText = "address,password,contact" /* Mask.Text */.split("," /* Constant.Comma */);
-    maskExclude = "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.split("," /* Constant.Comma */);
-    maskDisable = "radio,checkbox,range,button,reset,submit" /* Mask.Disable */.split("," /* Constant.Comma */);
-    maskTags = "INPUT,SELECT,TEXTAREA" /* Mask.Tags */.split("," /* Constant.Comma */);
-    idMap = new WeakMap();
-    iframeMap = new WeakMap();
-    privacyMap = new WeakMap();
-    fraudMap = new WeakMap();
-    reset$l();
-}
-// We parse new root nodes for any regions or masked nodes in the beginning (document) and
-// later whenever there are new additions or modifications to DOM (mutations)
-function parse$1(root, init) {
-    if (init === void 0) { init = false; }
-    // Wrap selectors in a try / catch block.
-    // It's possible for script to receive invalid selectors, e.g. "'#id'" with extra quotes, and cause the code below to fail
-    try {
-        // Parse unmask configuration into separate query selectors and override tokens as part of initialization
-        if (init) {
-            config$1.unmask.forEach(function (x) { return x.indexOf("!" /* Constant.Bang */) < 0 ? unmask.push(x) : override.push(x.substr(1)); });
-        }
-        // Since mutations may happen on leaf nodes too, e.g. text nodes, which may not support all selector APIs.
-        // We ensure that the root note supports querySelectorAll API before executing the code below to identify new regions.
-        if ("querySelectorAll" in root) {
-            config$1.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$1(e, "".concat(x[0])); }); }); // Regions
-            config$1.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* Privacy.TextImage */); }); }); // Masked Elements
-            config$1.checksum.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return fraudMap.set(e, x[0]); }); }); // Fraud Checksum Check
-            unmask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 0 /* Privacy.None */); }); }); // Unmasked Elements
-        }
-    }
-    catch (e) {
-        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
+                    break;
+            }
+            break;
     }
+    return child;
 }
-function getId(node, autogen) {
-    if (autogen === void 0) { autogen = false; }
-    if (node === null) {
-        return null;
-    }
-    var id = idMap.get(node);
-    if (!id && autogen) {
-        id = index++;
-        idMap.set(node, id);
+function observe$2(root) {
+    if (has(root)) {
+        return;
     }
-    return id ? id : null;
+    observe$1(root); // Observe mutations for this root node
+    observe$3(root); // Observe interactions for this root node
 }
-function add(node, parent, data, source) {
-    var id = getId(node, true);
-    var parentId = parent ? getId(parent) : null;
-    var previousId = getPreviousId(node);
-    var parentValue = null;
-    var regionId = exists(node) ? id : null;
-    var fragmentId = null;
-    var fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
-    var privacyId = config$1.content ? 1 /* Privacy.Sensitive */ : 3 /* Privacy.TextImage */;
-    if (parentId >= 0 && values[parentId]) {
-        parentValue = values[parentId];
-        parentValue.children.push(id);
-        regionId = regionId === null ? parentValue.region : regionId;
-        fragmentId = parentValue.fragment;
-        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
-        privacyId = parentValue.metadata.privacy;
-    }
-    // If there's an explicit region attribute set on the element, use it to mark a region on the page
-    if (data.attributes && "data-clarity-region" /* Constant.RegionData */ in data.attributes) {
-        observe$1(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
-        regionId = id;
+function getStyleValue(style) {
+    // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
+    // Also, check if stylesheet has any data-* attribute, if so process rules instead of looking up text
+    var value = style.textContent ? style.textContent.trim() : "" /* Constant.Empty */;
+    var dataset = style.dataset ? Object.keys(style.dataset).length : 0;
+    if (value.length === 0 || dataset > 0) {
+        value = getCssRules(style.sheet);
     }
-    nodes[id] = node;
-    values[id] = {
-        id: id,
-        parent: parentId,
-        previous: previousId,
-        children: [],
-        data: data,
-        selector: null,
-        hash: null,
-        region: regionId,
-        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
-        fragment: fragmentId,
-    };
-    privacy(node, values[id], parentValue);
-    updateSelector(values[id]);
-    size(values[id]);
-    track$4(id, source, values[id].fragment);
+    return value;
 }
-function update$1(node, parent, data, source) {
-    var id = getId(node);
-    var parentId = parent ? getId(parent) : null;
-    var previousId = getPreviousId(node);
-    var changed = false;
-    var parentChanged = false;
-    if (id in values) {
-        var value = values[id];
-        value.metadata.active = true;
-        // Handle case where internal ordering may have changed
-        if (value.previous !== previousId) {
-            changed = true;
-            value.previous = previousId;
-        }
-        // Handle case where parent might have been updated
-        if (value.parent !== parentId) {
-            changed = true;
-            var oldParentId = value.parent;
-            value.parent = parentId;
-            // Move this node to the right location under new parent
-            if (parentId !== null && parentId >= 0) {
-                var childIndex = previousId === null ? 0 : values[parentId].children.indexOf(previousId) + 1;
-                values[parentId].children.splice(childIndex, 0, id);
-                // Update region after the move
-                value.region = exists(node) ? id : values[parentId].region;
-            }
-            else {
-                // Mark this element as deleted if the parent has been updated to null
-                remove(id, source);
-            }
-            // Remove reference to this node from the old parent
-            if (oldParentId !== null && oldParentId >= 0) {
-                var nodeIndex = values[oldParentId].children.indexOf(id);
-                if (nodeIndex >= 0) {
-                    values[oldParentId].children.splice(nodeIndex, 1);
-                }
-            }
-            parentChanged = true;
-        }
-        // Update data
-        for (var key in data) {
-            if (diff(value["data"], data, key)) {
-                changed = true;
-                value["data"][key] = data[key];
-            }
+function getCssRules(sheet) {
+    var value = "" /* Constant.Empty */;
+    var cssRules = null;
+    // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
+    try {
+        cssRules = sheet ? sheet.cssRules : [];
+    }
+    catch (e) {
+        log$1(1 /* Code.CssRules */, 1 /* Severity.Warning */, e ? e.name : null);
+        if (e && e.name !== "SecurityError") {
+            throw e;
         }
-        // track node if it is a part of scheduled fragment mutation
-        if (value.fragment && updatedFragments[value.fragment]) {
-            changed = true;
+    }
+    if (cssRules !== null) {
+        for (var i = 0; i < cssRules.length; i++) {
+            value += cssRules[i].cssText;
         }
-        // Update selector
-        updateSelector(value);
-        track$4(id, source, values[id].fragment, changed, parentChanged);
     }
+    return value;
 }
-function sameorigin(node) {
-    var output = false;
-    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "IFRAME" /* Constant.IFrameTag */) {
-        var frame = node;
-        // To determine if the iframe is same-origin or not, we try accessing it's contentDocument.
-        // If the browser throws an exception, we assume it's cross-origin and move on.
-        // However, if we do a get a valid document object back, we assume the contents are accessible and iframe is same-origin.
-        try {
-            var doc = frame.contentDocument;
-            if (doc) {
-                iframeMap.set(frame.contentDocument, frame);
-                output = true;
+function getAttributes(element) {
+    var output = {};
+    var attributes = element.attributes;
+    if (attributes && attributes.length > 0) {
+        for (var i = 0; i < attributes.length; i++) {
+            var name_1 = attributes[i].name;
+            if (IGNORE_ATTRIBUTES.indexOf(name_1) < 0) {
+                output[name_1] = attributes[i].value;
             }
         }
-        catch ( /* do nothing */_a) { /* do nothing */ }
     }
-    return output;
-}
-function iframe(node) {
-    var doc = node.nodeType === Node.DOCUMENT_NODE ? node : null;
-    return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
-}
-function privacy(node, value, parent) {
-    var data = value.data;
-    var metadata = value.metadata;
-    var current = metadata.privacy;
-    var attributes = data.attributes || {};
-    var tag = data.tag.toUpperCase();
-    switch (true) {
-        case maskTags.indexOf(tag) >= 0:
-            var type = attributes["type" /* Constant.Type */];
-            var meta_1 = "" /* Constant.Empty */;
-            Object.keys(attributes).forEach(function (x) { return meta_1 += attributes[x].toLowerCase(); });
-            var exclude = maskExclude.some(function (x) { return meta_1.indexOf(x) >= 0; });
-            // Regardless of privacy mode, always mask off user input from input boxes or drop downs with two exceptions:
-            // (1) The node is detected to be one of the excluded fields, in which case we drop everything
-            // (2) The node's type is one of the allowed types (like checkboxes)
-            metadata.privacy = tag === "INPUT" /* Constant.InputTag */ && maskDisable.indexOf(type) >= 0 ? current : (exclude ? 4 /* Privacy.Exclude */ : 2 /* Privacy.Text */);
-            break;
-        case "data-clarity-mask" /* Constant.MaskData */ in attributes:
-            metadata.privacy = 3 /* Privacy.TextImage */;
-            break;
-        case "data-clarity-unmask" /* Constant.UnmaskData */ in attributes:
-            metadata.privacy = 0 /* Privacy.None */;
-            break;
-        case privacyMap.has(node):
-            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
-            metadata.privacy = privacyMap.get(node);
-            break;
-        case fraudMap.has(node):
-            // If this node was explicitly configured to be evaluated for fraud, then also mask content
-            metadata.privacy = 2 /* Privacy.Text */;
-            break;
-        case tag === "*T" /* Constant.TextTag */:
-            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
-            var pTag = parent && parent.data ? parent.data.tag : "" /* Constant.Empty */;
-            var pSelector_1 = parent && parent.selector ? parent.selector[1 /* Selector.Default */] : "" /* Constant.Empty */;
-            var tags = ["STYLE" /* Constant.StyleTag */, "TITLE" /* Constant.TitleTag */, "svg:style" /* Constant.SvgStyle */];
-            metadata.privacy = tags.includes(pTag) || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
-            break;
-        case current === 1 /* Privacy.Sensitive */:
-            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
-            metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
-            break;
+    // For INPUT tags read the dynamic "value" property if an explicit "value" attribute is not set
+    if (element.tagName === "INPUT" /* Constant.InputTag */ && !("value" /* Constant.Value */ in output) && element.value) {
+        output["value" /* Constant.Value */] = element.value;
     }
-}
-function inspect(input, lookup, metadata) {
-    if (input && lookup.some(function (x) { return input.indexOf(x) >= 0; })) {
-        return 2 /* Privacy.Text */;
+    return output;
+}
+
+function traverse (root, timer, source) {
+    return __awaiter(this, void 0, void 0, function () {
+        var queue, node, next, state, subnode;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    queue = [root];
+                    _a.label = 1;
+                case 1:
+                    if (!(queue.length > 0)) return [3 /*break*/, 4];
+                    node = queue.shift();
+                    next = node.firstChild;
+                    while (next) {
+                        queue.push(next);
+                        next = next.nextSibling;
+                    }
+                    state = state$9(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 2:
+                    state = _a.sent();
+                    _a.label = 3;
+                case 3:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 4];
+                    }
+                    subnode = processNode(node, source);
+                    if (subnode) {
+                        queue.push(subnode);
+                    }
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+var observers = [];
+var mutations = [];
+var insertRule = null;
+var deleteRule = null;
+var attachShadow = null;
+var queue$1 = [];
+var timeout$1 = null;
+var activePeriod = null;
+var history$4 = {};
+function start$h() {
+    observers = [];
+    queue$1 = [];
+    timeout$1 = null;
+    activePeriod = 0;
+    history$4 = {};
+    // Some popular open source libraries, like styled-components, optimize performance
+    // by injecting CSS using insertRule API vs. appending text node. A side effect of
+    // using javascript API is that it doesn't trigger DOM mutation and therefore we
+    // need to override the insertRule API and listen for changes manually.
+    if (insertRule === null) {
+        insertRule = CSSStyleSheet.prototype.insertRule;
+        CSSStyleSheet.prototype.insertRule = function () {
+            if (active()) {
+                schedule(this.ownerNode);
+            }
+            return insertRule.apply(this, arguments);
+        };
     }
-    return metadata.privacy;
-}
-function diff(a, b, field) {
-    if (typeof a[field] === "object" && typeof b[field] === "object") {
-        for (var key in a[field]) {
-            if (a[field][key] !== b[field][key]) {
-                return true;
+    if (deleteRule === null) {
+        deleteRule = CSSStyleSheet.prototype.deleteRule;
+        CSSStyleSheet.prototype.deleteRule = function () {
+            if (active()) {
+                schedule(this.ownerNode);
             }
+            return deleteRule.apply(this, arguments);
+        };
+    }
+    // Add a hook to attachShadow API calls
+    // In case we are unable to add a hook and browser throws an exception,
+    // reset attachShadow variable and resume processing like before
+    if (attachShadow === null) {
+        attachShadow = Element.prototype.attachShadow;
+        try {
+            Element.prototype.attachShadow = function () {
+                if (active()) {
+                    return schedule(attachShadow.apply(this, arguments));
+                }
+                else {
+                    return attachShadow.apply(this, arguments);
+                }
+            };
         }
-        for (var key in b[field]) {
-            if (b[field][key] !== a[field][key]) {
-                return true;
-            }
+        catch (_a) {
+            attachShadow = null;
         }
-        return false;
     }
-    return a[field] !== b[field];
 }
-function position(parent, child) {
-    child.metadata.position = 1;
-    var idx = parent ? parent.children.indexOf(child.id) : -1;
-    while (idx-- > 0) {
-        var sibling = values[parent.children[idx]];
-        if (child.data.tag === sibling.data.tag) {
-            child.metadata.position = sibling.metadata.position + 1;
-            break;
+function observe$1(node) {
+    // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
+    // In the case of shadow dom, any mutations that happen within the shadow dom are not bubbled up to the host document
+    // For this reason, we need to wire up mutations every time we see a new shadow dom.
+    // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
+    try {
+        var m = api("MutationObserver" /* Constant.MutationObserver */);
+        var observer = m in window ? new window[m](measure(handle$1)) : null;
+        if (observer) {
+            observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
+            observers.push(observer);
         }
     }
-    return child.metadata.position;
-}
-function updateSelector(value) {
-    var parent = value.parent && value.parent in values ? values[value.parent] : null;
-    var prefix = parent ? parent.selector : null;
-    var d = value.data;
-    var p = position(parent, value);
-    var s = { id: value.id, tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
-    value.selector = [get$1(s, 0 /* Selector.Alpha */), get$1(s, 1 /* Selector.Beta */)];
-    value.hash = value.selector.map(function (x) { return x ? hash(x) : null; });
-    value.hash.forEach(function (h) { return hashMap[h] = value.id; });
-    // Match fragment configuration against both alpha and beta hash
-    if (value.hash.some(function (h) { return fragments.indexOf(h) !== -1; })) {
-        value.fragment = value.id;
-    }
-}
-function hashText(hash) {
-    var id = lookup(hash);
-    var node = getNode(id);
-    return node !== null && node.textContent !== null ? node.textContent.substr(0, 25 /* Setting.ClickText */) : '';
-}
-function getNode(id) {
-    if (id in nodes) {
-        return nodes[id];
+    catch (e) {
+        log$1(2 /* Code.MutationObserver */, 0 /* Severity.Info */, e ? e.name : null);
     }
-    return null;
 }
-function getValue(id) {
-    if (id in values) {
-        return values[id];
+function monitor(frame) {
+    // Bind to iframe's onload event so we get notified anytime there's an update to iframe content.
+    // This includes cases where iframe location is updated without explicitly updating src attribute
+    // E.g. iframe.contentWindow.location.href = "new-location";
+    if (has(frame) === false) {
+        bind(frame, "load" /* Constant.LoadEvent */, generate.bind(this, frame, "childList" /* Constant.ChildList */), true);
     }
-    return null;
 }
-function get(node) {
-    var id = getId(node);
-    return id in values ? values[id] : null;
-}
-function lookup(hash) {
-    return hash in hashMap ? hashMap[hash] : null;
-}
-function has(node) {
-    return getId(node) in nodes;
-}
-function updates$2() {
-    var output = [];
-    for (var _i = 0, updateMap_1 = updateMap; _i < updateMap_1.length; _i++) {
-        var id = updateMap_1[_i];
-        if (id in values) {
-            output.push(values[id]);
+function stop$f() {
+    for (var _i = 0, observers_1 = observers; _i < observers_1.length; _i++) {
+        var observer = observers_1[_i];
+        if (observer) {
+            observer.disconnect();
         }
     }
-    updateMap = [];
-    for (var id in updatedFragments) {
-        update(updatedFragments[id], id, true);
-    }
-    updatedFragments = {};
-    return output;
-}
-function remove(id, source) {
-    if (id in values) {
-        var value = values[id];
-        value.metadata.active = false;
-        value.parent = null;
-        track$4(id, source);
-    }
-}
-function size(value) {
-    // If this element is a image node, and is masked, then track box model for the current element
-    if (value.data.tag === "IMG" /* Constant.ImageTag */ && value.metadata.privacy === 3 /* Privacy.TextImage */) {
-        value.metadata.size = [];
-    }
+    observers = [];
+    history$4 = {};
+    mutations = [];
+    queue$1 = [];
+    activePeriod = 0;
+    timeout$1 = null;
 }
-function getPreviousId(node) {
-    var id = null;
-    // Some nodes may not have an ID by design since Clarity skips over tags like SCRIPT, NOSCRIPT, META, COMMENTS, etc..
-    // In that case, we keep going back and check for their sibling until we find a sibling with ID or no more sibling nodes are left.
-    while (id === null && node.previousSibling) {
-        id = getId(node.previousSibling);
-        node = node.previousSibling;
-    }
-    return id;
+function active$2() {
+    activePeriod = time() + 3000 /* Setting.MutationActivePeriod */;
 }
-function track$4(id, source, fragment, changed, parentChanged) {
-    if (fragment === void 0) { fragment = null; }
-    if (changed === void 0) { changed = true; }
-    if (parentChanged === void 0) { parentChanged = false; }
-    // if updated node is a part of fragment and the fragment is not being tracked currently, schedule a mutation on the fragment node
-    if (fragment && !updatedFragments[fragment]) {
-        var node = getNode(fragment);
-        var value = getValue(fragment);
-        if (node && value) {
-            schedule(node, true);
-            value.hash.forEach(function (h) {
-                if (fragments.indexOf(h) !== -1) {
-                    updatedFragments[fragment] = h;
-                }
-            });
-        }
-    }
-    // Keep track of the order in which mutations happened, they may not be sequential
-    // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
-    // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.
-    var uIndex = updateMap.indexOf(id);
-    if (uIndex >= 0 && source === 1 /* Source.ChildListAdd */ && parentChanged) {
-        updateMap.splice(uIndex, 1);
-        updateMap.push(id);
-    }
-    else if (uIndex === -1 && changed) {
-        updateMap.push(id);
-    }
-}
-
-var state$1 = [];
-var regionMap = null; // Maps region nodes => region name
-var regions = {};
-var queue$1 = [];
-var watch = false;
-var observer$1 = null;
-function start$h() {
-    reset$6();
-    observer$1 = null;
-    regionMap = new WeakMap();
-    regions = {};
-    queue$1 = [];
-    watch = window["IntersectionObserver"] ? true : false;
+function handle$1(m) {
+    // Queue up mutation records for asynchronous processing
+    var now = time();
+    track$6(6 /* Event.Mutation */, now);
+    mutations.push({ time: now, mutations: m });
+    schedule$1(process$1, 1 /* Priority.High */).then(function () {
+        setTimeout(compute$7);
+        measure(compute$6)();
+    });
 }
-function observe$1(node, name) {
-    if (regionMap.has(node) === false) {
-        regionMap.set(node, name);
-        observer$1 = observer$1 === null && watch ? new IntersectionObserver(handler$1, {
-            // Get notified as intersection continues to change
-            // This allows us to process regions that get partially hidden during the lifetime of the page
-            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
-            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
-            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1]
-        }) : observer$1;
-        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
-            observer$1.observe(node);
+function process$1() {
+    return __awaiter(this, void 0, void 0, function () {
+        var timer, record, instance, _i, _a, mutation, state, target, type, value;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
+                    start$w(timer);
+                    _b.label = 1;
+                case 1:
+                    if (!(mutations.length > 0)) return [3 /*break*/, 8];
+                    record = mutations.shift();
+                    instance = time();
+                    _i = 0, _a = record.mutations;
+                    _b.label = 2;
+                case 2:
+                    if (!(_i < _a.length)) return [3 /*break*/, 6];
+                    mutation = _a[_i];
+                    state = state$9(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 3:
+                    state = _b.sent();
+                    _b.label = 4;
+                case 4:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 6];
+                    }
+                    target = mutation.target;
+                    type = track$3(mutation, timer, instance);
+                    if (type && target && target.ownerDocument) {
+                        parse$1(target.ownerDocument);
+                    }
+                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
+                        parse$1(target);
+                    }
+                    switch (type) {
+                        case "attributes" /* Constant.Attributes */:
+                            processNode(target, 3 /* Source.Attributes */);
+                            break;
+                        case "characterData" /* Constant.CharacterData */:
+                            processNode(target, 4 /* Source.CharacterData */);
+                            break;
+                        case "childList" /* Constant.ChildList */:
+                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer);
+                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer);
+                            break;
+                        case "suspend" /* Constant.Suspend */:
+                            value = get(target);
+                            if (value) {
+                                value.metadata.suspend = true;
+                            }
+                            break;
+                    }
+                    _b.label = 5;
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                case 7:
+                    _b.sent();
+                    return [3 /*break*/, 1];
+                case 8:
+                    stop$t(timer);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function track$3(m, timer, instance) {
+    var value = m.target ? get(m.target.parentNode) : null;
+    // Check if the parent is already discovered and that the parent is not the document root
+    if (value && value.data.tag !== "HTML" /* Constant.HTML */) {
+        var inactive = time() > activePeriod;
+        var target = get(m.target);
+        var element = target && target.selector ? target.selector.join() : m.target.nodeName;
+        var parent_1 = value.selector ? value.selector.join() : "" /* Constant.Empty */;
+        // We use selector, instead of id, to determine the key (signature for the mutation) because in some cases
+        // repeated mutations can cause elements to be destroyed and then recreated as new DOM nodes
+        // In those cases, IDs will change however the selector (which is relative to DOM xPath) remains the same
+        var key = [parent_1, element, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
+        // Initialize an entry if it doesn't already exist
+        history$4[key] = key in history$4 ? history$4[key] : [0, instance];
+        var h = history$4[key];
+        // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
+        if (inactive === false && h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
+            processNodeList(h[2], 2 /* Source.ChildListRemove */, timer);
+        }
+        // Update the counter
+        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
+        h[1] = instance;
+        // Return updated mutation type based on if we have already hit the threshold or not
+        if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
+            // Store a reference to removedNodes so we can process them later
+            // when we resume mutations again on user interactions
+            h[2] = m.removedNodes;
+            return "suspend" /* Constant.Suspend */;
+        }
+        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
+            return "" /* Constant.Empty */;
         }
     }
+    return m.type;
 }
-function exists(node) {
-    // Check if regionMap is not null before looking up a node
-    // Since, dom module stops after region module, it's possible that we may set regionMap to be null
-    // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
-    return regionMap && regionMap.has(node);
-}
-function track$3(id, event) {
-    var node = getNode(id);
-    var data = id in regions ? regions[id] : { id: id, visibility: 0 /* RegionVisibility.Rendered */, interaction: 16 /* InteractionState.None */, name: regionMap.get(node) };
-    // Determine the interaction state based on incoming event
-    var interaction = 16 /* InteractionState.None */;
-    switch (event) {
-        case 9 /* Event.Click */:
-            interaction = 20 /* InteractionState.Clicked */;
-            break;
-        case 27 /* Event.Input */:
-            interaction = 30 /* InteractionState.Input */;
-            break;
+function names(nodes) {
+    var output = [];
+    for (var i = 0; nodes && i < nodes.length; i++) {
+        output.push(nodes[i].nodeName);
     }
-    // Process updates to this region, if applicable
-    process$1(node, data, interaction, data.visibility);
+    return output.join();
 }
-function compute$6() {
-    // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
-    // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
-    // For those cases we add them to the queue and re-process them below
-    var q = [];
-    for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
-        var r = queue_1[_i];
-        var id = getId(r.node);
-        if (!(id in regions)) {
-            if (id) {
-                r.data.id = id;
-                regions[id] = r.data;
-                state$1.push(clone$1(r.data));
-            }
-            else {
-                q.push(r);
+function processNodeList(list, source, timer) {
+    return __awaiter(this, void 0, void 0, function () {
+        var length, i, state;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    length = list ? list.length : 0;
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < length)) return [3 /*break*/, 6];
+                    if (!(source === 1 /* Source.ChildListAdd */)) return [3 /*break*/, 2];
+                    traverse(list[i], timer, source);
+                    return [3 /*break*/, 5];
+                case 2:
+                    state = state$9(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 3:
+                    state = _a.sent();
+                    _a.label = 4;
+                case 4:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 6];
+                    }
+                    processNode(list[i], source);
+                    _a.label = 5;
+                case 5:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/];
             }
-        }
-    }
-    queue$1 = q;
-    // Schedule encode only when we have at least one valid data entry
-    if (state$1.length > 0) {
-        encode$4(7 /* Event.Region */);
-    }
+        });
+    });
 }
-function handler$1(entries) {
-    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-        var entry = entries_1[_i];
-        var target = entry.target;
-        var rect = entry.boundingClientRect;
-        var overlap = entry.intersectionRect;
-        var viewport = entry.rootBounds;
-        // Only capture regions that have non-zero width or height to avoid tracking and sending regions
-        // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
-        // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
-        // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
-        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
-            var id = target ? getId(target) : null;
-            var data = id in regions ? regions[id] : { id: id, name: regionMap.get(target), interaction: 16 /* InteractionState.None */, visibility: 0 /* RegionVisibility.Rendered */ };
-            // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
-            // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
-            var viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
-            var visible = viewportRatio > 0.05 /* Setting.ViewportIntersectionRatio */ || entry.intersectionRatio > 0.8 /* Setting.IntersectionRatio */;
-            // If an element is either visible or was visible and has been scrolled to the end
-            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
-            // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
-            var scrolledToEnd = (visible || data.visibility == 10 /* RegionVisibility.Visible */) && Math.abs(rect.top) + viewport.height > rect.height;
-            // Process updates to this region, if applicable
-            process$1(target, data, data.interaction, (scrolledToEnd ?
-                13 /* RegionVisibility.ScrolledToEnd */ :
-                (visible ? 10 /* RegionVisibility.Visible */ : 0 /* RegionVisibility.Rendered */)));
-            // Stop observing this element now that we have already received scrolled signal
-            if (data.visibility >= 13 /* RegionVisibility.ScrolledToEnd */ && observer$1) {
-                observer$1.unobserve(target);
-            }
-        }
+function schedule(node) {
+    // Only schedule manual trigger for this node if it's not already in the queue
+    if (queue$1.indexOf(node) < 0) {
+        queue$1.push(node);
     }
-    if (state$1.length > 0) {
-        encode$4(7 /* Event.Region */);
+    // Cancel any previous trigger before scheduling a new one.
+    // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
+    // And in those cases we do not wish to monitor changes multiple times for the same node.
+    if (timeout$1) {
+        clearTimeout(timeout$1);
     }
+    timeout$1 = setTimeout(function () { trigger$2(); }, 33 /* Setting.LookAhead */);
+    return node;
 }
-function process$1(n, d, s, v) {
-    // Check if received a state that supersedes existing state
-    var updated = s > d.interaction || v > d.visibility;
-    d.interaction = s > d.interaction ? s : d.interaction;
-    d.visibility = v > d.visibility ? v : d.visibility;
-    // If the corresponding node is already discovered, update the internal state
-    // Otherwise, track it in a queue to reprocess later.
-    if (d.id) {
-        if ((d.id in regions && updated) || !(d.id in regions)) {
-            regions[d.id] = d;
-            state$1.push(clone$1(d));
+function trigger$2() {
+    for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
+        var node = queue_1[_i];
+        // Generate a mutation for this node only if it still exists
+        if (node) {
+            var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+            // Skip re-processing shadowRoot if it was already discovered
+            if (shadowRoot && has(node)) {
+                continue;
+            }
+            generate(node, shadowRoot ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
         }
     }
-    else {
-        queue$1.push({ node: n, data: d });
-    }
-}
-function clone$1(r) {
-    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
-}
-function reset$6() {
-    state$1 = [];
-}
-function stop$f() {
-    reset$6();
-    regionMap = null;
-    regions = {};
     queue$1 = [];
-    if (observer$1) {
-        observer$1.disconnect();
-        observer$1 = null;
-    }
-    watch = false;
+}
+function generate(target, type) {
+    measure(handle$1)([{
+            addedNodes: [target],
+            attributeName: null,
+            attributeNamespace: null,
+            nextSibling: null,
+            oldValue: null,
+            previousSibling: null,
+            removedNodes: [],
+            target: target,
+            type: type
+        }]);
 }
 
 function target(evt) {
@@ -3053,7 +3022,7 @@ function metadata$2(node, event, text) {
             output.hash = value.hash;
             output.privacy = metadata_1.privacy;
             if (value.region) {
-                track$3(value.region, event);
+                track$4(value.region, event);
             }
             if (metadata_1.fraud) {
                 check$4(metadata_1.fraud, value.id, text || value.data.value);
@@ -3080,7 +3049,7 @@ function encode$3 (type, ts) {
                 case 18 /* Event.TouchEnd */:
                 case 19 /* Event.TouchMove */:
                 case 20 /* Event.TouchCancel */:
-                    for (_i = 0, _a = state$4; _i < _a.length; _i++) {
+                    for (_i = 0, _a = state$3; _i < _a.length; _i++) {
                         entry = _a[_i];
                         pTarget = metadata$2(entry.data.target, entry.event);
                         if (pTarget.id > 0) {
@@ -3092,10 +3061,10 @@ function encode$3 (type, ts) {
                             track$7(entry.event, entry.data.x, entry.data.y);
                         }
                     }
-                    reset$e();
+                    reset$c();
                     break;
                 case 9 /* Event.Click */:
-                    for (_b = 0, _c = state$7; _b < _c.length; _b++) {
+                    for (_b = 0, _c = state$6; _b < _c.length; _b++) {
                         entry = _c[_b];
                         cTarget = metadata$2(entry.data.target, entry.event, entry.data.text);
                         tokens = [entry.time, entry.event];
@@ -3115,10 +3084,10 @@ function encode$3 (type, ts) {
                         queue(tokens);
                         track$2(entry.time, entry.event, cHash, entry.data.x, entry.data.y, entry.data.reaction, entry.data.context);
                     }
-                    reset$h();
+                    reset$f();
                     break;
                 case 38 /* Event.Clipboard */:
-                    for (_d = 0, _e = state$6; _d < _e.length; _d++) {
+                    for (_d = 0, _e = state$5; _d < _e.length; _d++) {
                         entry = _e[_d];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3128,24 +3097,24 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$g();
+                    reset$e();
                     break;
                 case 11 /* Event.Resize */:
                     r = data$b;
                     tokens.push(r.width);
                     tokens.push(r.height);
                     track$7(type, r.width, r.height);
-                    reset$d();
+                    reset$b();
                     queue(tokens);
                     break;
                 case 26 /* Event.Unload */:
                     u = data$9;
                     tokens.push(u.name);
-                    reset$9();
+                    reset$7();
                     queue(tokens);
                     break;
                 case 27 /* Event.Input */:
-                    for (_f = 0, _g = state$5; _f < _g.length; _f++) {
+                    for (_f = 0, _g = state$4; _f < _g.length; _f++) {
                         entry = _g[_f];
                         iTarget = metadata$2(entry.data.target, entry.event, entry.data.value);
                         tokens = [entry.time, entry.event];
@@ -3153,7 +3122,7 @@ function encode$3 (type, ts) {
                         tokens.push(text$1(entry.data.value, "input", iTarget.privacy));
                         queue(tokens);
                     }
-                    reset$f();
+                    reset$d();
                     break;
                 case 21 /* Event.Selection */:
                     s = data$a;
@@ -3164,12 +3133,12 @@ function encode$3 (type, ts) {
                         tokens.push(s.startOffset);
                         tokens.push(endTarget.id);
                         tokens.push(s.endOffset);
-                        reset$b();
+                        reset$9();
                         queue(tokens);
                     }
                     break;
                 case 10 /* Event.Scroll */:
-                    for (_h = 0, _j = state$3; _h < _j.length; _h++) {
+                    for (_h = 0, _j = state$2; _h < _j.length; _h++) {
                         entry = _j[_h];
                         sTarget = metadata$2(entry.data.target, entry.event);
                         if (sTarget.id > 0) {
@@ -3181,10 +3150,10 @@ function encode$3 (type, ts) {
                             track$7(entry.event, entry.data.x, entry.data.y);
                         }
                     }
-                    reset$c();
+                    reset$a();
                     break;
                 case 42 /* Event.Change */:
-                    for (_k = 0, _l = state$8; _k < _l.length; _k++) {
+                    for (_k = 0, _l = state$7; _k < _l.length; _k++) {
                         entry = _l[_k];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3197,10 +3166,10 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$i();
+                    reset$g();
                     break;
                 case 39 /* Event.Submit */:
-                    for (_m = 0, _o = state$2; _m < _o.length; _m++) {
+                    for (_m = 0, _o = state$1; _m < _o.length; _m++) {
                         entry = _o[_m];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3209,7 +3178,7 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$a();
+                    reset$8();
                     break;
                 case 22 /* Event.Timeline */:
                     for (_p = 0, _q = updates$1; _p < _q.length; _p++) {
@@ -3230,7 +3199,7 @@ function encode$3 (type, ts) {
                     tokens.push(v.visible);
                     queue(tokens);
                     visibility(t, v.visible);
-                    reset$8();
+                    reset$6();
                     break;
             }
             return [2 /*return*/];
@@ -3531,22 +3500,31 @@ function delay() {
     return typeof config$1.upload === "string" /* Constant.String */ ? Math.max(Math.min(gap, 30000 /* Setting.MaxUploadDelay */), 100 /* Setting.MinUploadDelay */) : config$1.delay;
 }
 function response(payload) {
-    var parts = payload && payload.length > 0 ? payload.split(" ") : ["" /* Constant.Empty */];
-    switch (parts[0]) {
-        case "END" /* Constant.End */:
-            // Clear out session storage and end the session so we can start fresh the next time
-            trigger(6 /* Check.Server */);
-            break;
-        case "UPGRADE" /* Constant.Upgrade */:
-            // Upgrade current session to send back playback information
-            upgrade("Auto" /* Constant.Auto */);
-            break;
-        case "ACTION" /* Constant.Action */:
-            // Invoke action callback, if configured and has a valid value
-            if (config$1.action && parts.length > 1) {
-                config$1.action(parts[1]);
-            }
-            break;
+    var lines = payload && payload.length > 0 ? payload.split("\n") : [];
+    for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
+        var line = lines_1[_i];
+        var parts = line && line.length > 0 ? line.split(/ (.*)/) : ["" /* Constant.Empty */];
+        switch (parts[0]) {
+            case "END" /* Constant.End */:
+                // Clear out session storage and end the session so we can start fresh the next time
+                trigger(6 /* Check.Server */);
+                break;
+            case "UPGRADE" /* Constant.Upgrade */:
+                // Upgrade current session to send back playback information
+                upgrade("Auto" /* Constant.Auto */);
+                break;
+            case "ACTION" /* Constant.Action */:
+                // Invoke action callback, if configured and has a valid value
+                if (config$1.action && parts.length > 1) {
+                    config$1.action(parts[1]);
+                }
+                break;
+            case "EXTRACT" /* Constant.Extract */:
+                if (parts.length > 1) {
+                    trigger$1(parts[1]);
+                }
+                break;
+        }
     }
 }
 
@@ -3651,30 +3629,27 @@ var data$5 = {};
 var keys = [];
 var variables = {};
 var selectors = {};
-var fragments = [];
 function start$c() {
+    reset$4();
+}
+function trigger$1(input) {
     try {
-        var e = config$1.extract;
-        if (!e) {
-            return;
-        }
-        for (var i = 0; i < e.length; i += 3) {
-            var source = e[i];
-            var key = e[i + 1];
+        var parts = input && input.length > 0 ? input.split(/ (.*)/) : ["" /* Constant.Empty */];
+        var key = parseInt(parts[0]);
+        var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
+        variables[key] = {};
+        selectors[key] = {};
+        for (var v in values) {
+            var id = parseInt(v);
+            var value = values[v];
+            var source = value.startsWith("~" /* Constant.Tilde */) ? 0 /* ExtractSource.Javascript */ : 2 /* ExtractSource.Text */;
             switch (source) {
                 case 0 /* ExtractSource.Javascript */:
-                    var variable = e[i + 2];
-                    variables[key] = parse(variable);
-                    break;
-                case 1 /* ExtractSource.Cookie */:
-                    /*Todo: Add cookie extract logic*/
+                    var variable = value.substring(1, value.length);
+                    variables[key][id] = parse(variable);
                     break;
                 case 2 /* ExtractSource.Text */:
-                    var match_1 = e[i + 2];
-                    selectors[key] = match_1;
-                    break;
-                case 3 /* ExtractSource.Fragment */:
-                    fragments = e[i + 2];
+                    selectors[key][id] = value;
                     break;
             }
         }
@@ -3689,15 +3664,25 @@ function clone(v) {
 function compute$4() {
     try {
         for (var v in variables) {
-            var value = str(evaluate(clone(variables[v])));
-            if (value) {
-                update(v, value);
-            }
-        }
-        for (var s in selectors) {
-            var node = document.querySelector(selectors[s]);
-            if (node) {
-                update(s, node.innerText);
+            var key = parseInt(v);
+            if (!(key in keys)) {
+                var variableData = variables[key];
+                for (var v_1 in variableData) {
+                    var variableKey = parseInt(v_1);
+                    var value = str(evaluate(clone(variableData[variableKey])));
+                    if (value) {
+                        update(key, variableKey, value);
+                    }
+                }
+                var selectorData = selectors[key];
+                for (var s in selectorData) {
+                    var selectorKey = parseInt(s);
+                    var nodes = document.querySelectorAll(selectorData[selectorKey]);
+                    if (nodes) {
+                        var text = Array.from(nodes).map(function (e) { return e.innerText; });
+                        update(key, selectorKey, text.join("<SEP>" /* Constant.Seperator */).substring(0, 10000 /* Setting.ExtractLimit */));
+                    }
+                }
             }
         }
     }
@@ -3707,20 +3692,20 @@ function compute$4() {
     encode$1(40 /* Event.Extract */);
 }
 function reset$4() {
+    data$5 = {};
     keys = [];
+    variables = {};
+    selectors = {};
 }
-function update(key, value, force) {
-    if (force === void 0) { force = false; }
-    if (!(key in data$5) || (key in data$5 && data$5[key] !== value) || force) {
-        data$5[key] = value;
+function update(key, subkey, value) {
+    if (!(key in data$5)) {
+        data$5[key] = [];
         keys.push(key);
     }
+    data$5[key].push([subkey, value]);
 }
 function stop$b() {
-    data$5 = {};
-    keys = [];
-    variables = {};
-    selectors = {};
+    reset$4();
 }
 function parse(variable) {
     var syntax = [];
@@ -3885,7 +3870,7 @@ function encode$1 (event) {
             for (var _d = 0, extractKeys_1 = extractKeys; _d < extractKeys_1.length; _d++) {
                 var e = extractKeys_1[_d];
                 tokens.push(e);
-                tokens.push(data$5[e]);
+                tokens.push([].concat.apply([], data$5[e]));
             }
             reset$4();
             queue(tokens, false);
@@ -4386,7 +4371,7 @@ var status = false;
 function start$6() {
     status = true;
     start$G();
-    reset$k();
+    reset$j();
     reset$1();
     reset$2();
     start$7();
@@ -4395,7 +4380,7 @@ function stop$5() {
     stop$6();
     reset$2();
     reset$1();
-    reset$k();
+    reset$j();
     stop$C();
     status = false;
 }
@@ -4478,14 +4463,14 @@ function discover() {
                 case 0:
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$x(timer);
+                    start$w(timer);
                     return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */)];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
-                    stop$u(timer);
+                    stop$t(timer);
                     return [2 /*return*/];
             }
         });
@@ -4495,16 +4480,16 @@ function discover() {
 function start$3() {
     // The order below is important 
     // and is determined by interdependencies of modules
-    start$w();
+    start$v();
+    start$u();
+    start$x();
     start$h();
-    start$i();
-    start$j();
     start$4();
 }
 function stop$3() {
+    stop$s();
+    stop$u();
     stop$f();
-    stop$g();
-    stop$h();
     end();
 }