clarity-visualize 0.6.41 → 0.6.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- /******************************************************************************
5
+ /*! *****************************************************************************
6
6
  Copyright (c) Microsoft Corporation.
7
7
 
8
8
  Permission to use, copy, modify, and/or distribute this software for any
@@ -55,7 +55,7 @@ function __generator(thisArg, body) {
55
55
  }
56
56
  }
57
57
 
58
- var _a$1;
58
+ var _a;
59
59
  var DataHelper = /** @class */ (function () {
60
60
  function DataHelper(state) {
61
61
  var _this = this;
@@ -86,24 +86,24 @@ var DataHelper = /** @class */ (function () {
86
86
  else {
87
87
  _this.metrics[m] += event.data[m];
88
88
  }
89
- _this.lean = key === 1 /* Data.Metric.Playback */ && event.data[m] === 0 ? true : _this.lean;
89
+ _this.lean = key === 1 /* Playback */ && event.data[m] === 0 ? true : _this.lean;
90
90
  }
91
91
  }
92
92
  for (var entry in _this.metrics) {
93
93
  if (entry in DataHelper.METRIC_MAP) {
94
94
  var m = _this.metrics[entry];
95
95
  var map = DataHelper.METRIC_MAP[entry];
96
- var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
97
- metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
96
+ var unit = "unit" in map ? map.unit : "" /* Empty */;
97
+ metricMarkup.push("<li><h2>" + _this.value(m, unit) + "<span>" + _this.key(unit) + "</span></h2>" + map.name + "</li>");
98
98
  }
99
99
  }
100
100
  // Append region information to metadata
101
101
  for (var name_1 in _this.regions) {
102
102
  var r = _this.regions[name_1];
103
- var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.Interaction.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
104
- regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
103
+ var className = (r.visibility === 10 /* Visible */ ? "visible" : (r.interaction === 20 /* Clicked */ ? "clicked" : "" /* Empty */));
104
+ regionMarkup.push("<span class=\"" + className + "\">" + name_1 + "</span>");
105
105
  }
106
- _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
106
+ _this.state.options.metadata.innerHTML = "<ul>" + metricMarkup.join("" /* Empty */) + "</ul><div>" + regionMarkup.join("" /* Empty */) + "</div>";
107
107
  }
108
108
  };
109
109
  this.key = function (unit) {
@@ -111,7 +111,7 @@ var DataHelper = /** @class */ (function () {
111
111
  case "html-price":
112
112
  case "ld-price":
113
113
  case "cls":
114
- return "" /* Data.Constant.Empty */;
114
+ return "" /* Empty */;
115
115
  default: return unit;
116
116
  }
117
117
  };
@@ -136,17 +136,17 @@ var DataHelper = /** @class */ (function () {
136
136
  this.regionMap[r.id] = r.name;
137
137
  }
138
138
  };
139
- DataHelper.METRIC_MAP = (_a$1 = {},
140
- _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
141
- _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
142
- _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
143
- _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
144
- _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
145
- _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
146
- _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
147
- _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
148
- _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
149
- _a$1);
139
+ DataHelper.METRIC_MAP = (_a = {},
140
+ _a[2 /* TotalBytes */] = { name: "Total Bytes", unit: "KB" },
141
+ _a[4 /* TotalCost */] = { name: "Total Cost", unit: "ms" },
142
+ _a[3 /* LayoutCost */] = { name: "Layout Cost", unit: "ms" },
143
+ _a[8 /* LargestPaint */] = { name: "LCP", unit: "s" },
144
+ _a[9 /* CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
145
+ _a[7 /* LongTaskCount */] = { name: "Long Tasks" },
146
+ _a[24 /* CartTotal */] = { name: "Cart Total", unit: "html-price" },
147
+ _a[13 /* ProductPrice */] = { name: "Product Price", unit: "ld-price" },
148
+ _a[6 /* ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
149
+ _a);
150
150
  return DataHelper;
151
151
  }());
152
152
 
@@ -170,7 +170,7 @@ function hash (input) {
170
170
  return hash.toString(36);
171
171
  }
172
172
 
173
- var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
173
+ var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* ExcludeClassNames */.split("," /* Comma */);
174
174
  var selectorMap = {};
175
175
  function reset$k() {
176
176
  selectorMap = {};
@@ -178,68 +178,68 @@ function reset$k() {
178
178
  function get$1(input, type) {
179
179
  var a = input.attributes;
180
180
  var prefix = input.prefix ? input.prefix[type] : null;
181
- var suffix = type === 0 /* Selector.Alpha */ ? "".concat("~" /* Constant.Tilde */).concat(input.position - 1) : ":nth-of-type(".concat(input.position, ")");
181
+ var suffix = type === 0 /* Alpha */ ? "" + "~" /* Tilde */ + (input.position - 1) : ":nth-of-type(" + input.position + ")";
182
182
  switch (input.tag) {
183
183
  case "STYLE":
184
184
  case "TITLE":
185
185
  case "LINK":
186
186
  case "META":
187
- case "*T" /* Constant.TextTag */:
188
- case "*D" /* Constant.DocumentTag */:
189
- return "" /* Constant.Empty */;
187
+ case "*T" /* TextTag */:
188
+ case "*D" /* DocumentTag */:
189
+ return "" /* Empty */;
190
190
  case "HTML":
191
- return "HTML" /* Constant.HTML */;
191
+ return "HTML" /* HTML */;
192
192
  default:
193
193
  if (prefix === null) {
194
- return "" /* Constant.Empty */;
194
+ return "" /* Empty */;
195
195
  }
196
- prefix = "".concat(prefix).concat(">" /* Constant.Separator */);
197
- input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
198
- var selector = "".concat(prefix).concat(input.tag).concat(suffix);
199
- var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
200
- var classes = input.tag !== "BODY" /* Constant.BodyTag */ && "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Constant.Period */) : null;
196
+ prefix = "" + prefix + ">" /* Separator */;
197
+ input.tag = input.tag.indexOf("svg:" /* SvgPrefix */) === 0 ? input.tag.substr("svg:" /* SvgPrefix */.length) : input.tag;
198
+ var selector = "" + prefix + input.tag + suffix;
199
+ var id = "id" /* Id */ in a && a["id" /* Id */].length > 0 ? a["id" /* Id */] : null;
200
+ var classes = input.tag !== "BODY" /* BodyTag */ && "class" /* Class */ in a && a["class" /* Class */].length > 0 ? a["class" /* Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Period */) : null;
201
201
  if (classes && classes.length > 0) {
202
- if (type === 0 /* Selector.Alpha */) {
202
+ if (type === 0 /* Alpha */) {
203
203
  // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
204
204
  // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
205
- var key = "".concat(getDomPath(prefix)).concat(input.tag).concat("." /* Constant.Dot */).concat(classes);
205
+ var key = "" + getDomPath(prefix) + input.tag + "." /* Dot */ + classes;
206
206
  if (!(key in selectorMap)) {
207
207
  selectorMap[key] = [];
208
208
  }
209
209
  if (selectorMap[key].indexOf(input.id) < 0) {
210
210
  selectorMap[key].push(input.id);
211
211
  }
212
- selector = "".concat(key).concat("~" /* Constant.Tilde */).concat(selectorMap[key].indexOf(input.id));
212
+ selector = "" + key + "~" /* Tilde */ + selectorMap[key].indexOf(input.id);
213
213
  }
214
214
  else {
215
215
  // In Beta mode, we continue to look at query selectors in context of the full page
216
- selector = "".concat(prefix).concat(input.tag, ".").concat(classes).concat(suffix);
216
+ selector = "" + prefix + input.tag + "." + classes + suffix;
217
217
  }
218
218
  }
219
219
  // Update selector to use "id" field when available. There are two exceptions:
220
220
  // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
221
221
  // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
222
- selector = id && filter(id) ? "".concat(getDomPrefix(prefix)).concat("#" /* Constant.Hash */).concat(id) : selector;
222
+ selector = id && filter(id) ? "" + getDomPrefix(prefix) + "#" /* Hash */ + id : selector;
223
223
  return selector;
224
224
  }
225
225
  }
226
226
  function getDomPrefix(prefix) {
227
- var shadowDomStart = prefix.lastIndexOf("*S" /* Constant.ShadowDomTag */);
228
- var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* Constant.IFramePrefix */).concat("HTML" /* Constant.HTML */));
227
+ var shadowDomStart = prefix.lastIndexOf("*S" /* ShadowDomTag */);
228
+ var iframeDomStart = prefix.lastIndexOf("" + "iframe:" /* IFramePrefix */ + "HTML" /* HTML */);
229
229
  var domStart = Math.max(shadowDomStart, iframeDomStart);
230
230
  if (domStart < 0) {
231
- return "" /* Constant.Empty */;
231
+ return "" /* Empty */;
232
232
  }
233
- return prefix.substring(0, prefix.indexOf(">" /* Constant.Separator */, domStart) + 1);
233
+ return prefix.substring(0, prefix.indexOf(">" /* Separator */, domStart) + 1);
234
234
  }
235
235
  function getDomPath(input) {
236
- var parts = input.split(">" /* Constant.Separator */);
236
+ var parts = input.split(">" /* Separator */);
237
237
  for (var i = 0; i < parts.length; i++) {
238
- var tIndex = parts[i].indexOf("~" /* Constant.Tilde */);
239
- var dIndex = parts[i].indexOf("." /* Constant.Dot */);
238
+ var tIndex = parts[i].indexOf("~" /* Tilde */);
239
+ var dIndex = parts[i].indexOf("." /* Dot */);
240
240
  parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
241
241
  }
242
- return parts.join(">" /* Constant.Separator */);
242
+ return parts.join(">" /* Separator */);
243
243
  }
244
244
  // Check if the given input string has digits or excluded class names
245
245
  function filter(value) {
@@ -251,7 +251,7 @@ function filter(value) {
251
251
  }
252
252
  for (var i = 0; i < value.length; i++) {
253
253
  var c = value.charCodeAt(i);
254
- if (c >= 48 /* Character.Zero */ && c <= 57 /* Character.Nine */) {
254
+ if (c >= 48 /* Zero */ && c <= 57 /* Nine */) {
255
255
  return false;
256
256
  }
257
257
  }
@@ -288,7 +288,7 @@ function getNode(id) {
288
288
  }
289
289
  return null;
290
290
  }
291
- function get$2(node) {
291
+ function get(node) {
292
292
  var id = getId(node);
293
293
  return id in values ? values[id] : null;
294
294
  }
@@ -296,7 +296,7 @@ function lookup(hash) {
296
296
  return hash in hashMap ? hashMap[hash] : null;
297
297
  }
298
298
 
299
- var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
299
+ var helper = { hash: hash, selector: selector, get: get, getNode: getNode, lookup: lookup };
300
300
 
301
301
  var EnrichHelper = /** @class */ (function () {
302
302
  function EnrichHelper() {
@@ -335,11 +335,11 @@ var EnrichHelper = /** @class */ (function () {
335
335
  var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
336
336
  // Get stable selector
337
337
  // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
338
- var selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
338
+ var selectorAlpha = helper.selector.get(input, 0 /* Alpha */);
339
339
  d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
340
340
  d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
341
341
  // Get beta selector
342
- var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
342
+ var selectorBeta = helper.selector.get(input, 1 /* Beta */);
343
343
  d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
344
344
  d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
345
345
  /* Track state for future reference */
@@ -404,14 +404,14 @@ var HeatmapHelper = /** @class */ (function () {
404
404
  this.clear = function () {
405
405
  var doc = _this.state.window.document;
406
406
  var win = _this.state.window;
407
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
407
+ var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
408
408
  var de = doc.documentElement;
409
409
  if (canvas) {
410
410
  canvas.width = de.clientWidth;
411
411
  canvas.height = de.clientHeight;
412
- canvas.style.left = win.pageXOffset + "px" /* Constant.Pixel */;
413
- canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
414
- canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
412
+ canvas.style.left = win.pageXOffset + "px" /* Pixel */;
413
+ canvas.style.top = win.pageYOffset + "px" /* Pixel */;
414
+ canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
415
415
  }
416
416
  _this.reset();
417
417
  };
@@ -420,13 +420,13 @@ var HeatmapHelper = /** @class */ (function () {
420
420
  _this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
421
421
  _this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
422
422
  var canvas = _this.overlay();
423
- var context = canvas.getContext("2d" /* Constant.Context */);
423
+ var context = canvas.getContext("2d" /* Context */);
424
424
  var doc = _this.state.window.document;
425
425
  var body = doc.body;
426
426
  var de = doc.documentElement;
427
427
  var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
428
- canvas.height = Math.min(height, 40000 /* Setting.ScrollCanvasMaxHeight */);
429
- canvas.style.top = 0 + "px" /* Constant.Pixel */;
428
+ canvas.height = Math.min(height, 40000 /* ScrollCanvasMaxHeight */);
429
+ canvas.style.top = 0 + "px" /* Pixel */;
430
430
  if (canvas.width > 0 && canvas.height > 0) {
431
431
  if (_this.scrollData) {
432
432
  var grd = context.createLinearGradient(0, 0, 0, canvas.height);
@@ -434,9 +434,9 @@ var HeatmapHelper = /** @class */ (function () {
434
434
  var currentCombination = _a[_i];
435
435
  var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
436
436
  var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
437
- var hue = huePercentView * 240 /* Setting.MaxHue */;
437
+ var hue = huePercentView * 240 /* MaxHue */;
438
438
  if (percentView <= 1) {
439
- grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
439
+ grd.addColorStop(percentView, "hsla(" + hue + ", 100%, 50%, 0.6)");
440
440
  }
441
441
  }
442
442
  // Fill with gradient
@@ -449,15 +449,15 @@ var HeatmapHelper = /** @class */ (function () {
449
449
  }
450
450
  };
451
451
  this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
452
- _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
452
+ _this.addMarker(context, width, "Average Fold" /* AverageFold */, avgFold, 84 /* MarkerMediumWidth */);
453
453
  var markers = [75, 50, 25];
454
454
  var _loop_1 = function (marker) {
455
455
  var closest = scrollMapInfo.reduce(function (prev, curr) {
456
456
  return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
457
457
  });
458
- if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
458
+ if (closest.percUsers >= marker - 2 /* MarkerRange */ && closest.percUsers <= marker + 2 /* MarkerRange */) {
459
459
  var markerLine = (closest.scrollReachY / 100) * height;
460
- _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
460
+ _this.addMarker(context, width, marker + "%", markerLine, 35 /* MarkerSmallWidth */);
461
461
  }
462
462
  };
463
463
  for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
@@ -470,20 +470,20 @@ var HeatmapHelper = /** @class */ (function () {
470
470
  context.moveTo(0, markerY);
471
471
  context.lineTo(heatmapWidth, markerY);
472
472
  context.setLineDash([2, 2]);
473
- context.lineWidth = 1 /* Setting.MarkerLineHeight */;
474
- context.strokeStyle = "white" /* Setting.MarkerColor */;
473
+ context.lineWidth = 1 /* MarkerLineHeight */;
474
+ context.strokeStyle = "white" /* MarkerColor */;
475
475
  context.stroke();
476
- context.fillStyle = "#323130" /* Setting.CanvasTextColor */;
477
- context.fillRect(0, (markerY - 32 /* Setting.MarkerHeight */ / 2), markerWidth, 32 /* Setting.MarkerHeight */);
478
- context.fillStyle = "white" /* Setting.MarkerColor */;
479
- context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
480
- context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
476
+ context.fillStyle = "#323130" /* CanvasTextColor */;
477
+ context.fillRect(0, (markerY - 32 /* MarkerHeight */ / 2), markerWidth, 32 /* MarkerHeight */);
478
+ context.fillStyle = "white" /* MarkerColor */;
479
+ context.font = "500 12px Segoe UI" /* CanvasTextFont */;
480
+ context.fillText(label, 5 /* MarkerPadding */, markerY + 5 /* MarkerPadding */);
481
481
  };
482
482
  this.click = function (activity) {
483
483
  _this.data = _this.data || activity;
484
484
  var heat = _this.transform();
485
485
  var canvas = _this.overlay();
486
- var ctx = canvas.getContext("2d" /* Constant.Context */);
486
+ var ctx = canvas.getContext("2d" /* Context */);
487
487
  if (canvas.width > 0 && canvas.height > 0) {
488
488
  // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
489
489
  // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
@@ -494,7 +494,7 @@ var HeatmapHelper = /** @class */ (function () {
494
494
  for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
495
495
  var entry = heat_1[_i];
496
496
  ctx.globalAlpha = entry.a;
497
- ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
497
+ ctx.drawImage(ring, entry.x - 20 /* Radius */, entry.y - 20 /* Radius */);
498
498
  }
499
499
  // Add color to the canvas based on alpha value of each pixel
500
500
  var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -518,14 +518,14 @@ var HeatmapHelper = /** @class */ (function () {
518
518
  var doc = _this.state.window.document;
519
519
  var win = _this.state.window;
520
520
  var de = doc.documentElement;
521
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
521
+ var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
522
522
  if (canvas === null) {
523
- canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
524
- canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
523
+ canvas = doc.createElement("CANVAS" /* Canvas */);
524
+ canvas.id = "clarity-heatmap-canvas" /* HeatmapCanvas */;
525
525
  canvas.width = 0;
526
526
  canvas.height = 0;
527
- canvas.style.position = "absolute" /* Constant.Absolute */;
528
- canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
527
+ canvas.style.position = "absolute" /* Absolute */;
528
+ canvas.style.zIndex = "" + 2147483647 /* ZIndex */;
529
529
  de.appendChild(canvas);
530
530
  win.addEventListener("scroll", _this.redraw, true);
531
531
  win.addEventListener("resize", _this.redraw, true);
@@ -537,23 +537,23 @@ var HeatmapHelper = /** @class */ (function () {
537
537
  // Ensure canvas is positioned correctly
538
538
  canvas.width = de.clientWidth;
539
539
  canvas.height = de.clientHeight;
540
- canvas.style.left = win.pageXOffset + "px" /* Constant.Pixel */;
541
- canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
542
- canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
540
+ canvas.style.left = win.pageXOffset + "px" /* Pixel */;
541
+ canvas.style.top = win.pageYOffset + "px" /* Pixel */;
542
+ canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
543
543
  return canvas;
544
544
  };
545
545
  this.getRing = function () {
546
546
  if (_this.offscreenRing === null) {
547
547
  var doc = _this.state.window.document;
548
- _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
549
- _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
550
- _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
551
- var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
552
- ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
553
- ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
554
- ctx.shadowColor = "black" /* Constant.Black */;
548
+ _this.offscreenRing = doc.createElement("CANVAS" /* Canvas */);
549
+ _this.offscreenRing.width = 20 /* Radius */ * 2;
550
+ _this.offscreenRing.height = 20 /* Radius */ * 2;
551
+ var ctx = _this.offscreenRing.getContext("2d" /* Context */);
552
+ ctx.shadowOffsetX = 20 /* Radius */ * 2;
553
+ ctx.shadowBlur = 20 /* Radius */ / 2;
554
+ ctx.shadowColor = "black" /* Black */;
555
555
  ctx.beginPath();
556
- ctx.arc(-20 /* Setting.Radius */, 20 /* Setting.Radius */, 20 /* Setting.Radius */ / 2, 0, Math.PI * 2, true);
556
+ ctx.arc(-20 /* Radius */, 20 /* Radius */, 20 /* Radius */ / 2, 0, Math.PI * 2, true);
557
557
  ctx.closePath();
558
558
  ctx.fill();
559
559
  }
@@ -562,18 +562,18 @@ var HeatmapHelper = /** @class */ (function () {
562
562
  this.getGradient = function () {
563
563
  if (_this.gradientPixels === null) {
564
564
  var doc = _this.state.window.document;
565
- var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
565
+ var offscreenGradient = doc.createElement("CANVAS" /* Canvas */);
566
566
  offscreenGradient.width = 1;
567
- offscreenGradient.height = 256 /* Setting.Colors */;
568
- var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
569
- var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
567
+ offscreenGradient.height = 256 /* Colors */;
568
+ var ctx = offscreenGradient.getContext("2d" /* Context */);
569
+ var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Colors */);
570
570
  var step = 1 / HeatmapHelper.COLORS.length;
571
571
  for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
572
572
  gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
573
573
  }
574
574
  ctx.fillStyle = gradient;
575
- ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
576
- _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
575
+ ctx.fillRect(0, 0, 1, 256 /* Colors */);
576
+ _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Colors */);
577
577
  }
578
578
  return _this.gradientPixels;
579
579
  };
@@ -582,14 +582,14 @@ var HeatmapHelper = /** @class */ (function () {
582
582
  if (_this.timeout) {
583
583
  clearTimeout(_this.timeout);
584
584
  }
585
- _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
585
+ _this.timeout = setTimeout(_this.click, 30 /* Interval */);
586
586
  }
587
587
  else if (_this.scrollData) {
588
588
  if (event.type != 'scroll') {
589
589
  if (_this.timeout) {
590
590
  clearTimeout(_this.timeout);
591
591
  }
592
- _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
592
+ _this.timeout = setTimeout(_this.scroll, 30 /* Interval */);
593
593
  }
594
594
  }
595
595
  };
@@ -607,9 +607,9 @@ var HeatmapHelper = /** @class */ (function () {
607
607
  // Process clicks for only visible elements
608
608
  if (_this.max === null || v) {
609
609
  for (var i = 0; i < element.points; i++) {
610
- var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
611
- var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
612
- var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
610
+ var x = Math.round(r.left + (element.x[i] / 32767 /* ClickPrecision */) * r.width);
611
+ var y = Math.round(r.top + (element.y[i] / 32767 /* ClickPrecision */) * r.height);
612
+ var k = "" + x + "X" /* Separator */ + y + "X" /* Separator */ + (v ? 1 : 0);
613
613
  points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
614
614
  localMax = Math.max(points[k], localMax);
615
615
  }
@@ -621,8 +621,8 @@ var HeatmapHelper = /** @class */ (function () {
621
621
  // Once all points are accounted for, convert everything into absolute (x, y)
622
622
  for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
623
623
  var coordinates = _c[_b];
624
- var parts = coordinates.split("X" /* Constant.Separator */);
625
- var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
624
+ var parts = coordinates.split("X" /* Separator */);
625
+ var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* AlphaBoost */, 1);
626
626
  if (parts[2] === "1") {
627
627
  output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
628
628
  }
@@ -639,7 +639,7 @@ var HeatmapHelper = /** @class */ (function () {
639
639
  for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
640
640
  var e = elements_1[_i];
641
641
  // Ignore if top element ends up being the canvas element we added for heatmap visualization
642
- if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
642
+ if (e.tagName === "CANVAS" /* Canvas */ || (e.id && e.id.indexOf("clarity-" /* ClarityPrefix */) === 0)) {
643
643
  continue;
644
644
  }
645
645
  visibility = e === el;
@@ -690,8 +690,8 @@ var InteractionHelper = /** @class */ (function () {
690
690
  }
691
691
  var canvas = _this.overlay();
692
692
  if (canvas) {
693
- canvas.style.left = data.x + "px" /* Constant.Pixel */;
694
- canvas.style.top = data.y + "px" /* Constant.Pixel */;
693
+ canvas.style.left = data.x + "px" /* Pixel */;
694
+ canvas.style.top = data.y + "px" /* Pixel */;
695
695
  canvas.width = de.clientWidth;
696
696
  canvas.height = de.clientHeight;
697
697
  }
@@ -708,13 +708,13 @@ var InteractionHelper = /** @class */ (function () {
708
708
  };
709
709
  this.visibility = function (event) {
710
710
  var doc = _this.state.window.document;
711
- if (doc && doc.documentElement && event.data.visible !== "visible" /* Constant.Visible */) {
712
- doc.documentElement.style.backgroundColor = "black" /* Constant.Black */;
713
- doc.documentElement.style.opacity = "0.4" /* Constant.HiddenOpacity */;
711
+ if (doc && doc.documentElement && event.data.visible !== "visible" /* Visible */) {
712
+ doc.documentElement.style.backgroundColor = "black" /* Black */;
713
+ doc.documentElement.style.opacity = "0.4" /* HiddenOpacity */;
714
714
  }
715
715
  else {
716
- doc.documentElement.style.backgroundColor = "transparent" /* Constant.Transparent */;
717
- doc.documentElement.style.opacity = "1" /* Constant.VisibleOpacity */;
716
+ doc.documentElement.style.backgroundColor = "transparent" /* Transparent */;
717
+ doc.documentElement.style.opacity = "1" /* VisibleOpacity */;
718
718
  }
719
719
  };
720
720
  this.input = function (event) {
@@ -749,12 +749,12 @@ var InteractionHelper = /** @class */ (function () {
749
749
  var type = event.event;
750
750
  var doc = _this.state.window.document;
751
751
  var de = doc.documentElement;
752
- var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
753
- var pointerWidth = 29 /* Setting.PointerWidth */;
754
- var pointerHeight = 38 /* Setting.PointerHeight */;
752
+ var p = doc.getElementById("clarity-pointer" /* PointerLayer */);
753
+ var pointerWidth = 29 /* PointerWidth */;
754
+ var pointerHeight = 38 /* PointerHeight */;
755
755
  if (p === null) {
756
756
  p = doc.createElement("DIV");
757
- p.id = "clarity-pointer" /* Constant.PointerLayer */;
757
+ p.id = "clarity-pointer" /* PointerLayer */;
758
758
  de.appendChild(p);
759
759
  // Add custom styles
760
760
  var style = doc.createElement("STYLE");
@@ -763,62 +763,62 @@ var InteractionHelper = /** @class */ (function () {
763
763
  "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
764
764
  "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
765
765
  "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
766
- "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
767
- "#".concat("clarity-pointer" /* Constant.PointerLayer */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, ") no-repeat left center; width: ").concat(pointerWidth, "px; height: ").concat(pointerHeight, "px; }") +
768
- ".".concat("clarity-click" /* Constant.ClickLayer */, ", .").concat("clarity-click-ring" /* Constant.ClickRing */, ", .").concat("clarity-touch" /* Constant.TouchLayer */, ", .").concat("clarity-touch-ring" /* Constant.TouchRing */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ").concat(22 /* Setting.ClickRadius */, "px; height: ").concat(22 /* Setting.ClickRadius */, "px;}") +
769
- ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }") +
770
- ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
771
- ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
772
- ".".concat("clarity-pointer-click" /* Constant.PointerClickLayer */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Asset.Click */, "); }") +
773
- ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
774
- ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, "); }");
766
+ ("#" + "clarity-interaction-canvas" /* InteractionCanvas */ + " { position: absolute; left: 0; top: 0; z-index: " + 2147483647 /* ZIndex */ + "; background: none; }") +
767
+ ("#" + "clarity-pointer" /* PointerLayer */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + ") no-repeat left center; width: " + pointerWidth + "px; height: " + pointerHeight + "px; }") +
768
+ ("." + "clarity-click" /* ClickLayer */ + ", ." + "clarity-click-ring" /* ClickRing */ + ", ." + "clarity-touch" /* TouchLayer */ + ", ." + "clarity-touch-ring" /* TouchRing */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: " + 22 /* ClickRadius */ + "px; height: " + 22 /* ClickRadius */ + "px;}") +
769
+ ("." + "clarity-click-ring" /* ClickRing */ + " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }") +
770
+ ("." + "clarity-touch" /* TouchLayer */ + " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
771
+ ("." + "clarity-touch-ring" /* TouchRing */ + " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
772
+ ("." + "clarity-pointer-click" /* PointerClickLayer */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Click */ + "); }") +
773
+ ("." + "clarity-pointer-none" /* PointerNone */ + " { background: none; }") +
774
+ ("." + "clarity-pointer-move" /* PointerMove */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + "); }");
775
775
  p.appendChild(style);
776
776
  }
777
- p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
778
- p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
777
+ p.style.left = (data.x - 4 /* PointerOffset */) + "px" /* Pixel */;
778
+ p.style.top = (data.y - 4 /* PointerOffset */) + "px" /* Pixel */;
779
779
  var title = "Pointer";
780
780
  switch (type) {
781
- case 9 /* Data.Event.Click */:
781
+ case 9 /* Click */:
782
782
  title = "Click";
783
783
  _this.drawClick(doc, data.x, data.y, title);
784
- p.className = "clarity-pointer-none" /* Constant.PointerNone */;
784
+ p.className = "clarity-pointer-none" /* PointerNone */;
785
785
  break;
786
- case 16 /* Data.Event.DoubleClick */:
786
+ case 16 /* DoubleClick */:
787
787
  title = "Click";
788
788
  _this.drawClick(doc, data.x, data.y, title);
789
- p.className = "clarity-pointer-none" /* Constant.PointerNone */;
789
+ p.className = "clarity-pointer-none" /* PointerNone */;
790
790
  break;
791
- case 17 /* Data.Event.TouchStart */:
792
- case 18 /* Data.Event.TouchEnd */:
793
- case 20 /* Data.Event.TouchCancel */:
791
+ case 17 /* TouchStart */:
792
+ case 18 /* TouchEnd */:
793
+ case 20 /* TouchCancel */:
794
794
  title = "Touch";
795
795
  _this.drawTouch(doc, data.x, data.y, title);
796
- p.className = "clarity-pointer-none" /* Constant.PointerNone */;
796
+ p.className = "clarity-pointer-none" /* PointerNone */;
797
797
  break;
798
- case 19 /* Data.Event.TouchMove */:
798
+ case 19 /* TouchMove */:
799
799
  title = "Touch Move";
800
- p.className = "clarity-pointer-none" /* Constant.PointerNone */;
800
+ p.className = "clarity-pointer-none" /* PointerNone */;
801
801
  break;
802
- case 12 /* Data.Event.MouseMove */:
802
+ case 12 /* MouseMove */:
803
803
  title = "Mouse Move";
804
- p.className = "clarity-pointer-move" /* Constant.PointerMove */;
804
+ p.className = "clarity-pointer-move" /* PointerMove */;
805
805
  _this.addPoint({ time: event.time, x: data.x, y: data.y });
806
806
  _this.targetId = data.target;
807
807
  break;
808
808
  default:
809
- p.className = "clarity-pointer-move" /* Constant.PointerMove */;
809
+ p.className = "clarity-pointer-move" /* PointerMove */;
810
810
  break;
811
811
  }
812
- p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
812
+ p.setAttribute("title" /* Title */, title + " (" + data.x + "px" /* Pixel */ + ", " + data.y + "px" /* Pixel */ + ")");
813
813
  };
814
814
  this.hover = function () {
815
815
  if (_this.targetId && _this.targetId !== _this.hoverId) {
816
816
  var depth = 0;
817
817
  // First, remove any previous hover class assignments
818
818
  var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
819
- while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
819
+ while (hoverNode && depth < 7 /* HoverDepth */) {
820
820
  if ("removeAttribute" in hoverNode) {
821
- hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
821
+ hoverNode.removeAttribute("clarity-hover" /* HoverAttribute */);
822
822
  }
823
823
  hoverNode = hoverNode.parentElement;
824
824
  depth++;
@@ -826,9 +826,9 @@ var InteractionHelper = /** @class */ (function () {
826
826
  // Then, add hover class on elements that are below the pointer
827
827
  depth = 0;
828
828
  var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
829
- while (targetNode && depth < 7 /* Setting.HoverDepth */) {
829
+ while (targetNode && depth < 7 /* HoverDepth */) {
830
830
  if ("setAttribute" in targetNode) {
831
- targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
831
+ targetNode.setAttribute("clarity-hover" /* HoverAttribute */, "" /* Empty */);
832
832
  }
833
833
  targetNode = targetNode.parentElement;
834
834
  depth++;
@@ -849,18 +849,18 @@ var InteractionHelper = /** @class */ (function () {
849
849
  this.drawTouch = function (doc, x, y, title) {
850
850
  var de = doc.documentElement;
851
851
  var touch = doc.createElement("DIV");
852
- touch.className = "clarity-touch" /* Constant.TouchLayer */;
853
- touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
854
- touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
855
- touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
852
+ touch.className = "clarity-touch" /* TouchLayer */;
853
+ touch.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
854
+ touch.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
855
+ touch.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
856
856
  touch.style.animation = "disappear 1 1s";
857
857
  touch.style.animationFillMode = "forwards";
858
858
  de.appendChild(touch);
859
859
  // First pulsating ring
860
860
  var ringOne = touch.cloneNode();
861
- ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
862
- ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
863
- ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
861
+ ringOne.className = "clarity-touch-ring" /* TouchRing */;
862
+ ringOne.style.left = "-0.5" + "px" /* Pixel */;
863
+ ringOne.style.top = "-0.5" + "px" /* Pixel */;
864
864
  ringOne.style.animation = "pulsate-touch 1 1s";
865
865
  ringOne.style.animationFillMode = "forwards";
866
866
  touch.appendChild(ringOne);
@@ -868,16 +868,16 @@ var InteractionHelper = /** @class */ (function () {
868
868
  this.drawClick = function (doc, x, y, title) {
869
869
  var de = doc.documentElement;
870
870
  var click = doc.createElement("DIV");
871
- click.className = "clarity-click" /* Constant.ClickLayer */;
872
- click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
873
- click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
874
- click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
871
+ click.className = "clarity-click" /* ClickLayer */;
872
+ click.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
873
+ click.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
874
+ click.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
875
875
  de.appendChild(click);
876
876
  // First pulsating ring
877
877
  var ringOne = click.cloneNode();
878
- ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
879
- ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
880
- ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
878
+ ringOne.className = "clarity-click-ring" /* ClickRing */;
879
+ ringOne.style.left = "-0.5" + "px" /* Pixel */;
880
+ ringOne.style.top = "-0.5" + "px" /* Pixel */;
881
881
  ringOne.style.animation = "pulsate-one 1 1s";
882
882
  ringOne.style.animationFillMode = "forwards";
883
883
  click.appendChild(ringOne);
@@ -886,9 +886,9 @@ var InteractionHelper = /** @class */ (function () {
886
886
  ringTwo.style.animation = "pulsate-two 1 1s";
887
887
  click.appendChild(ringTwo);
888
888
  // Play sound
889
- if (typeof Audio !== "undefined" /* Constant.Undefined */) {
889
+ if (typeof Audio !== "undefined" /* Undefined */) {
890
890
  if (_this.clickAudio === null) {
891
- _this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
891
+ _this.clickAudio = new Audio("data:video/webm;base64,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" /* Sound */);
892
892
  click.appendChild(_this.clickAudio);
893
893
  }
894
894
  _this.clickAudio.play();
@@ -898,10 +898,10 @@ var InteractionHelper = /** @class */ (function () {
898
898
  // Create canvas for visualizing interactions
899
899
  var doc = _this.state.window.document;
900
900
  var de = doc.documentElement;
901
- var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
901
+ var canvas = doc.getElementById("clarity-interaction-canvas" /* InteractionCanvas */);
902
902
  if (canvas === null) {
903
903
  canvas = doc.createElement("canvas");
904
- canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
904
+ canvas.id = "clarity-interaction-canvas" /* InteractionCanvas */;
905
905
  canvas.width = 0;
906
906
  canvas.height = 0;
907
907
  de.appendChild(canvas);
@@ -917,14 +917,14 @@ var InteractionHelper = /** @class */ (function () {
917
917
  for (var i = _this.points.length - 1; i > 0; i--) {
918
918
  // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
919
919
  // We reset the trail after every scroll event to avoid drawing weird looking trail.
920
- if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
920
+ if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* PixelLife */) {
921
921
  p.push(_this.points[i]);
922
922
  }
923
923
  else {
924
924
  break;
925
925
  }
926
926
  }
927
- return p.slice(0, 75 /* Setting.MaxTrailPoints */);
927
+ return p.slice(0, 75 /* MaxTrailPoints */);
928
928
  };
929
929
  this.trail = function (now) {
930
930
  var canvas = _this.overlay();
@@ -953,9 +953,9 @@ var InteractionHelper = /** @class */ (function () {
953
953
  gradient.addColorStop(1, _this.color(currentFactor));
954
954
  gradient.addColorStop(0, _this.color(lastFactor));
955
955
  // Line width of the trail shrinks as the position of the point goes farther away.
956
- ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
957
- ctx.lineCap = "round" /* Constant.Round */;
958
- ctx.lineJoin = "round" /* Constant.Round */;
956
+ ctx.lineWidth = 6 /* TrailWidth */ * currentFactor;
957
+ ctx.lineCap = "round" /* Round */;
958
+ ctx.lineJoin = "round" /* Round */;
959
959
  ctx.strokeStyle = gradient;
960
960
  ctx.beginPath();
961
961
  // The coordinates need to be relative to where canvas is rendered.
@@ -981,7 +981,7 @@ var InteractionHelper = /** @class */ (function () {
981
981
  for (var i = 0; i < 3; i++) {
982
982
  c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
983
983
  }
984
- return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
984
+ return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + factor + ")";
985
985
  };
986
986
  // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
987
987
  this.curve = function (path) {
@@ -1061,10 +1061,10 @@ var LayoutHelper = /** @class */ (function () {
1061
1061
  _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
1062
1062
  };
1063
1063
  this.resize = function (el, width, height) {
1064
- if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
1065
- el.style.width = width + "px" /* Layout.Constant.Pixel */;
1066
- el.style.height = height + "px" /* Layout.Constant.Pixel */;
1067
- el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
1064
+ if (el && el.nodeType === 1 /* ELEMENT_NODE */ && width && height) {
1065
+ el.style.width = width + "px" /* Pixel */;
1066
+ el.style.height = height + "px" /* Pixel */;
1067
+ el.style.boxSizing = "border-box" /* BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
1068
1068
  }
1069
1069
  };
1070
1070
  this.element = function (nodeId) {
@@ -1078,7 +1078,7 @@ var LayoutHelper = /** @class */ (function () {
1078
1078
  if (!event) return [3 /*break*/, 2];
1079
1079
  doc = this.state.window.document;
1080
1080
  if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
1081
- doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1081
+ doc.documentElement.style.visibility = "hidden" /* Hidden */;
1082
1082
  // Render all DOM events to reconstruct the page
1083
1083
  this.markup(event);
1084
1084
  // Wait on all stylesheets to finish loading
@@ -1087,7 +1087,7 @@ var LayoutHelper = /** @class */ (function () {
1087
1087
  // Wait on all stylesheets to finish loading
1088
1088
  _a.sent();
1089
1089
  // Toggle back the visibility of target window
1090
- doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1090
+ doc.documentElement.style.visibility = "visible" /* Visible */;
1091
1091
  _a.label = 2;
1092
1092
  case 2: return [2 /*return*/];
1093
1093
  }
@@ -1112,13 +1112,13 @@ var LayoutHelper = /** @class */ (function () {
1112
1112
  var pivot = _this.element(node.previous);
1113
1113
  var insert = _this.insertAfter;
1114
1114
  var tag = node.tag;
1115
- if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1116
- tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1115
+ if (tag && tag.indexOf("iframe:" /* IFramePrefix */) === 0) {
1116
+ tag = node.tag.substr("iframe:" /* IFramePrefix */.length);
1117
1117
  }
1118
1118
  switch (tag) {
1119
- case "*D" /* Layout.Constant.DocumentTag */:
1119
+ case "*D" /* DocumentTag */:
1120
1120
  var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1121
- if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1121
+ if (tagDoc && tagDoc === doc && type === 5 /* Discover */) {
1122
1122
  _this.reset();
1123
1123
  }
1124
1124
  if (typeof XMLSerializer !== "undefined" && tagDoc) {
@@ -1127,13 +1127,13 @@ var LayoutHelper = /** @class */ (function () {
1127
1127
  tagDoc.close();
1128
1128
  }
1129
1129
  break;
1130
- case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1130
+ case "*P" /* PolyfillShadowDomTag */:
1131
1131
  // In case of polyfill, map shadow dom to it's parent for rendering purposes
1132
1132
  // All its children should be inserted as regular children to the parent node.
1133
1133
  _this.nodes[node.id] = parent_1;
1134
1134
  _this.addToHashMap(node, parent_1);
1135
1135
  break;
1136
- case "*S" /* Layout.Constant.ShadowDomTag */:
1136
+ case "*S" /* ShadowDomTag */:
1137
1137
  if (parent_1) {
1138
1138
  var shadowRoot = _this.element(node.id);
1139
1139
  shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
@@ -1142,10 +1142,10 @@ var LayoutHelper = /** @class */ (function () {
1142
1142
  // Support for adoptedStyleSheet is limited and not available in all browsers.
1143
1143
  // To ensure that we can replay session in any browser, we turn adoptedStyleSheets from recording
1144
1144
  // into classic style tags at the playback time.
1145
- if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* Constant.AdoptedStyleSheet */) {
1145
+ if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* AdoptedStyleSheet */) {
1146
1146
  shadowStyle = shadowRoot.firstChild;
1147
1147
  }
1148
- shadowStyle.id = "clarity-adopted-style" /* Constant.AdoptedStyleSheet */;
1148
+ shadowStyle.id = "clarity-adopted-style" /* AdoptedStyleSheet */;
1149
1149
  shadowStyle.textContent = node.attributes["style"];
1150
1150
  shadowRoot.appendChild(shadowStyle);
1151
1151
  }
@@ -1153,16 +1153,16 @@ var LayoutHelper = /** @class */ (function () {
1153
1153
  _this.addToHashMap(node, shadowRoot);
1154
1154
  }
1155
1155
  break;
1156
- case "*T" /* Layout.Constant.TextTag */:
1156
+ case "*T" /* TextTag */:
1157
1157
  var textElement = _this.element(node.id);
1158
1158
  textElement = textElement ? textElement : doc.createTextNode(null);
1159
1159
  textElement.nodeValue = node.value;
1160
1160
  insert(node, parent_1, textElement, pivot);
1161
1161
  break;
1162
- case "*M" /* Layout.Constant.SuspendMutationTag */:
1162
+ case "*M" /* SuspendMutationTag */:
1163
1163
  var suspendedElement = _this.element(node.id);
1164
1164
  if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1165
- suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1165
+ suspendedElement.setAttribute("data-clarity-suspend" /* Suspend */, "" /* Empty */);
1166
1166
  }
1167
1167
  break;
1168
1168
  case "HTML":
@@ -1170,7 +1170,7 @@ var LayoutHelper = /** @class */ (function () {
1170
1170
  if (htmlDoc !== null) {
1171
1171
  var docElement = _this.element(node.id);
1172
1172
  if (docElement === null) {
1173
- var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1173
+ var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Empty */);
1174
1174
  docElement = newDoc.documentElement;
1175
1175
  var p = htmlDoc.importNode(docElement, true);
1176
1176
  htmlDoc.replaceChild(p, htmlDoc.documentElement);
@@ -1183,8 +1183,8 @@ var LayoutHelper = /** @class */ (function () {
1183
1183
  }
1184
1184
  _this.setAttributes(htmlDoc.documentElement, node);
1185
1185
  // If we are still processing discover events, keep the markup hidden until we are done
1186
- if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1187
- htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1186
+ if (type === 5 /* Discover */ && !parent_1) {
1187
+ htmlDoc.documentElement.style.visibility = "hidden" /* Hidden */;
1188
1188
  }
1189
1189
  _this.nodes[node.id] = htmlDoc.documentElement;
1190
1190
  _this.addToHashMap(node, htmlDoc.documentElement);
@@ -1194,9 +1194,9 @@ var LayoutHelper = /** @class */ (function () {
1194
1194
  var headElement = _this.element(node.id);
1195
1195
  if (headElement === null) {
1196
1196
  headElement = doc.createElement(node.tag);
1197
- if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1197
+ if (node.attributes && "*B" /* Base */ in node.attributes) {
1198
1198
  var base = doc.createElement("base");
1199
- base.href = node.attributes["*B" /* Layout.Constant.Base */];
1199
+ base.href = node.attributes["*B" /* Base */];
1200
1200
  headElement.appendChild(base);
1201
1201
  }
1202
1202
  // Add custom styles to assist with visualization
@@ -1264,8 +1264,8 @@ var LayoutHelper = /** @class */ (function () {
1264
1264
  var sheet = node.sheet;
1265
1265
  var cssRules = sheet ? sheet.cssRules : [];
1266
1266
  for (var i = 0; i < cssRules.length; i++) {
1267
- if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
1268
- var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
1267
+ if (cssRules[i].cssText.indexOf(":hover" /* Hover */) >= 0) {
1268
+ var css = cssRules[i].cssText.replace(/:hover/g, "[" + "clarity-hover" /* CustomHover */ + "]");
1269
1269
  sheet.removeRule(i);
1270
1270
  sheet.insertRule(css, i);
1271
1271
  }
@@ -1277,16 +1277,16 @@ var LayoutHelper = /** @class */ (function () {
1277
1277
  }
1278
1278
  };
1279
1279
  this.createElement = function (doc, tag) {
1280
- if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
1281
- return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
1280
+ if (tag && tag.indexOf("svg:" /* SvgPrefix */) === 0) {
1281
+ return doc.createElementNS("http://www.w3.org/2000/svg" /* SvgNamespace */, tag.substr("svg:" /* SvgPrefix */.length));
1282
1282
  }
1283
1283
  try {
1284
1284
  return doc.createElement(tag);
1285
1285
  }
1286
1286
  catch (ex) {
1287
1287
  // We log the warning on non-standard markup but continue with the visualization
1288
- console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
1289
- return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
1288
+ console.warn("Exception encountered while creating element " + tag + ": " + ex);
1289
+ return doc.createElement("clarity-unknown" /* UnknownTag */);
1290
1290
  }
1291
1291
  };
1292
1292
  this.insertAfter = function (data, parent, node, previous) {
@@ -1302,7 +1302,7 @@ var LayoutHelper = /** @class */ (function () {
1302
1302
  this.firstChild = function (node) {
1303
1303
  var child = node.firstChild;
1304
1304
  // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
1305
- if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
1305
+ if (child && child.nodeType === 1 /* ELEMENT_NODE */ && child.tagName === "BASE" /* BaseTag */) {
1306
1306
  return child.nextSibling;
1307
1307
  }
1308
1308
  return child;
@@ -1328,17 +1328,17 @@ var LayoutHelper = /** @class */ (function () {
1328
1328
  var attributes = data.attributes || {};
1329
1329
  var sameorigin = false;
1330
1330
  // Clarity attributes
1331
- attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
1332
- attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = "".concat(data.hashAlpha);
1333
- attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
1334
- var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1331
+ attributes["data-clarity-id" /* Id */] = "" + data.id;
1332
+ attributes["data-clarity-hashalpha" /* HashAlpha */] = "" + data.hashAlpha;
1333
+ attributes["data-clarity-hashbeta" /* HashBeta */] = "" + data.hashBeta;
1334
+ var tag = node.nodeType === 1 /* ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1335
1335
  // First remove all its existing attributes
1336
1336
  if (node.attributes) {
1337
1337
  var length_1 = node.attributes.length;
1338
1338
  while (node.attributes && length_1 > 0) {
1339
1339
  // Do not remove "clarity-hover" attribute and let it be managed by interaction module
1340
1340
  // This helps avoid flickers during visualization
1341
- if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
1341
+ if (node.attributes[0].name !== "clarity-hover" /* HoverAttribute */) {
1342
1342
  node.removeAttribute(node.attributes[0].name);
1343
1343
  }
1344
1344
  length_1--;
@@ -1352,22 +1352,22 @@ var LayoutHelper = /** @class */ (function () {
1352
1352
  if (attribute.indexOf("xlink:") === 0) {
1353
1353
  node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
1354
1354
  }
1355
- else if (attribute.indexOf("*O" /* Layout.Constant.SameOrigin */) === 0) {
1355
+ else if (attribute.indexOf("*O" /* SameOrigin */) === 0) {
1356
1356
  sameorigin = true;
1357
1357
  }
1358
1358
  else if (attribute.indexOf("*") === 0) {
1359
1359
  // Do nothing if we encounter internal Clarity attributes
1360
1360
  }
1361
- else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
1362
- node.setAttribute("data-clarity-".concat(attribute), v);
1361
+ else if (tag === "iframe" /* IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
1362
+ node.setAttribute("data-clarity-" + attribute, v);
1363
1363
  }
1364
- else if (tag === "img" /* Constant.ImageTag */ && attribute.indexOf("src") === 0 && (v === null || v.length === 0)) {
1365
- node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
1366
- var size = "l" /* Constant.Large */;
1364
+ else if (tag === "img" /* ImageTag */ && attribute.indexOf("src") === 0 && (v === null || v.length === 0)) {
1365
+ node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Transparent */);
1366
+ var size = "l" /* Large */;
1367
1367
  if (data.width) {
1368
- size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
1368
+ size = data.width <= 200 /* Medium */ ? "m" /* Medium */ : (data.width <= 75 /* Small */ ? "s" /* Small */ : size);
1369
1369
  }
1370
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, size);
1370
+ node.setAttribute("data-clarity-hide" /* Hide */, size);
1371
1371
  }
1372
1372
  else {
1373
1373
  node.setAttribute(attribute, v);
@@ -1379,29 +1379,29 @@ var LayoutHelper = /** @class */ (function () {
1379
1379
  }
1380
1380
  }
1381
1381
  }
1382
- if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute == "function" /* Constant.Function */) {
1383
- node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
1382
+ if (sameorigin === false && tag === "iframe" /* IFrameTag */ && typeof node.setAttribute == "function" /* Function */) {
1383
+ node.setAttribute("data-clarity-unavailable" /* Unavailable */, "" /* Empty */);
1384
1384
  }
1385
1385
  // Add an empty ALT tag on all IMG elements
1386
- if (tag === "img" /* Constant.ImageTag */ && !node.hasAttribute("alt" /* Constant.AltAttribute */)) {
1387
- node.setAttribute("alt" /* Constant.AltAttribute */, "" /* Constant.Empty */);
1386
+ if (tag === "img" /* ImageTag */ && !node.hasAttribute("alt" /* AltAttribute */)) {
1387
+ node.setAttribute("alt" /* AltAttribute */, "" /* Empty */);
1388
1388
  }
1389
1389
  // During visualization This will prevent the browser from auto filling form fields with saved details of user who is seeing the visualization
1390
- if (tag === "form" /* Constant.FormTag */ || tag === "input" /* Constant.InputTag */) {
1391
- if (node.hasAttribute("autocomplete" /* Constant.AutoComplete */)) {
1392
- node.removeAttribute("autocomplete" /* Constant.AutoComplete */);
1390
+ if (tag === "form" /* FormTag */ || tag === "input" /* InputTag */) {
1391
+ if (node.hasAttribute("autocomplete" /* AutoComplete */)) {
1392
+ node.removeAttribute("autocomplete" /* AutoComplete */);
1393
1393
  }
1394
- node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
1394
+ node.setAttribute("autocomplete" /* AutoComplete */, "new-password" /* NewPassword */);
1395
1395
  }
1396
1396
  };
1397
1397
  this.getCustomStyle = function () {
1398
1398
  // tslint:disable-next-line: max-line-length
1399
- return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "] { background-color: #CCC; background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */, "); background-repeat:no-repeat; background-position: center; }") +
1400
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
1401
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
1402
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }") +
1403
- "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { background: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */, ") no-repeat center center, url('").concat("data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */, "'); }") +
1404
- "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }");
1399
+ return "img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "] { background-color: #CCC; background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Hide */ + "); background-repeat:no-repeat; background-position: center; }" +
1400
+ ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "s" /* Small */ + "] { background-size: 18px 18px; }") +
1401
+ ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "m" /* Medium */ + "] { background-size: 24px 24px; }") +
1402
+ ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "l" /* Large */ + "] { background-size: 36px 36px; }") +
1403
+ ("iframe" /* IFrameTag */ + "[" + "data-clarity-unavailable" /* Unavailable */ + "] { background: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Unavailable */ + ") no-repeat center center, url('" + "data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Cross */ + "'); }") +
1404
+ ("*[" + "data-clarity-suspend" /* Suspend */ + "] { filter: grayscale(100%); }");
1405
1405
  };
1406
1406
  this.state = state;
1407
1407
  }
@@ -1437,7 +1437,7 @@ var Visualizer = /** @class */ (function () {
1437
1437
  while (merged.events.length > 0 && _this.layout.exists(hash) === false) {
1438
1438
  var entry = merged.events.shift();
1439
1439
  switch (entry.event) {
1440
- case 6 /* Data.Event.Mutation */:
1440
+ case 6 /* Mutation */:
1441
1441
  var domEvent = entry;
1442
1442
  _this.renderTime = domEvent.time;
1443
1443
  if (time && _this.renderTime > time) {
@@ -1490,9 +1490,9 @@ var Visualizer = /** @class */ (function () {
1490
1490
  for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
1491
1491
  var entry = p_1[_c];
1492
1492
  switch (key) {
1493
- case "dom" /* Constant.Dom */:
1493
+ case "dom" /* Dom */:
1494
1494
  var dom = _this.enrich.selectors(entry);
1495
- if (entry.event === 5 /* Data.Event.Discover */) {
1495
+ if (entry.event === 5 /* Discover */) {
1496
1496
  merged.dom = dom;
1497
1497
  }
1498
1498
  else {
@@ -1538,40 +1538,40 @@ var Visualizer = /** @class */ (function () {
1538
1538
  var entry = events_1[_i];
1539
1539
  time = entry.time;
1540
1540
  switch (entry.event) {
1541
- case 0 /* Data.Event.Metric */:
1541
+ case 0 /* Metric */:
1542
1542
  _this.data.metric(entry);
1543
1543
  break;
1544
- case 7 /* Data.Event.Region */:
1544
+ case 7 /* Region */:
1545
1545
  _this.data.region(entry);
1546
1546
  break;
1547
- case 6 /* Data.Event.Mutation */:
1547
+ case 6 /* Mutation */:
1548
1548
  _this.layout.markup(entry);
1549
1549
  break;
1550
- case 13 /* Data.Event.MouseDown */:
1551
- case 14 /* Data.Event.MouseUp */:
1552
- case 12 /* Data.Event.MouseMove */:
1553
- case 15 /* Data.Event.MouseWheel */:
1554
- case 9 /* Data.Event.Click */:
1555
- case 16 /* Data.Event.DoubleClick */:
1556
- case 17 /* Data.Event.TouchStart */:
1557
- case 20 /* Data.Event.TouchCancel */:
1558
- case 18 /* Data.Event.TouchEnd */:
1559
- case 19 /* Data.Event.TouchMove */:
1550
+ case 13 /* MouseDown */:
1551
+ case 14 /* MouseUp */:
1552
+ case 12 /* MouseMove */:
1553
+ case 15 /* MouseWheel */:
1554
+ case 9 /* Click */:
1555
+ case 16 /* DoubleClick */:
1556
+ case 17 /* TouchStart */:
1557
+ case 20 /* TouchCancel */:
1558
+ case 18 /* TouchEnd */:
1559
+ case 19 /* TouchMove */:
1560
1560
  _this.interaction.pointer(entry);
1561
1561
  break;
1562
- case 28 /* Data.Event.Visibility */:
1562
+ case 28 /* Visibility */:
1563
1563
  _this.interaction.visibility(entry);
1564
1564
  break;
1565
- case 27 /* Data.Event.Input */:
1565
+ case 27 /* Input */:
1566
1566
  _this.interaction.input(entry);
1567
1567
  break;
1568
- case 21 /* Data.Event.Selection */:
1568
+ case 21 /* Selection */:
1569
1569
  _this.interaction.selection(entry);
1570
1570
  break;
1571
- case 11 /* Data.Event.Resize */:
1571
+ case 11 /* Resize */:
1572
1572
  _this.interaction.resize(entry);
1573
1573
  break;
1574
- case 10 /* Data.Event.Scroll */:
1574
+ case 10 /* Scroll */:
1575
1575
  _this.interaction.scroll(entry);
1576
1576
  break;
1577
1577
  }
@@ -1608,14 +1608,14 @@ var Visualizer = /** @class */ (function () {
1608
1608
  return Visualizer;
1609
1609
  }());
1610
1610
 
1611
- var _a;
1612
- var state = (_a = new Visualizer(), _a.state), dom = _a.dom, get = _a.get, html = _a.html, time = _a.time, clickmap = _a.clickmap, clearmap = _a.clearmap, scrollmap = _a.scrollmap, merge = _a.merge, setup = _a.setup, render = _a.render;
1611
+ var _a$1;
1612
+ var state = (_a$1 = new Visualizer(), _a$1.state), dom = _a$1.dom, get$2 = _a$1.get, html = _a$1.html, time = _a$1.time, clickmap = _a$1.clickmap, clearmap = _a$1.clearmap, scrollmap = _a$1.scrollmap, merge = _a$1.merge, setup = _a$1.setup, render = _a$1.render;
1613
1613
 
1614
1614
  var clarity = /*#__PURE__*/Object.freeze({
1615
1615
  __proto__: null,
1616
1616
  state: state,
1617
1617
  dom: dom,
1618
- get: get,
1618
+ get: get$2,
1619
1619
  html: html,
1620
1620
  time: time,
1621
1621
  clickmap: clickmap,