clarity-visualize 0.8.54 → 0.8.56

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.
Files changed (6) hide show
  1. package/build/clarity.visualize.js +734 -845
  2. package/build/clarity.visualize.min.js +1 -1
  3. package/build/clarity.visualize.module.js +734 -845
  4. package/package.json +2 -2
  5. package/src/layout.ts +1 -1
  6. package/tsconfig.json +1 -0
package/build/clarity.visualize.js CHANGED
@@ -25,91 +25,61 @@ function __awaiter(thisArg, _arguments, P, generator) {
25
25
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
26
26
  step((generator = generator.apply(thisArg, _arguments || [])).next());
27
27
  });
28
- }
29
-
30
- function __generator(thisArg, body) {
31
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
33
- function verb(n) { return function (v) { return step([n, v]); }; }
34
- function step(op) {
35
- if (f) throw new TypeError("Generator is already executing.");
36
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
37
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
38
- if (y = 0, t) op = [op[0] & 2, t.value];
39
- switch (op[0]) {
40
- case 0: case 1: t = op; break;
41
- case 4: _.label++; return { value: op[1], done: false };
42
- case 5: _.label++; y = op[1]; op = [0]; continue;
43
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
44
- default:
45
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
46
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
47
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
48
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
49
- if (t[2]) _.ops.pop();
50
- _.trys.pop(); continue;
51
- }
52
- op = body.call(thisArg, _);
53
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
54
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
55
- }
56
28
  }
57
29
 
58
- var _a$1;
59
- var DataHelper = /** @class */ (function () {
60
- function DataHelper(state) {
61
- var _this = this;
30
+ class DataHelper {
31
+ constructor(state) {
62
32
  this.regionMap = {};
63
33
  this.regions = {};
64
34
  this.metrics = {};
65
35
  this.lean = false;
66
- this.reset = function () {
67
- _this.metrics = {};
68
- _this.lean = false;
69
- _this.regions = {};
70
- _this.regionMap = {};
36
+ this.reset = () => {
37
+ this.metrics = {};
38
+ this.lean = false;
39
+ this.regions = {};
40
+ this.regionMap = {};
71
41
  };
72
- this.metric = function (event) {
42
+ this.metric = (event) => {
73
43
  var _a;
74
- if (_this.state.options.metadata) {
75
- var metricMarkup = [];
76
- var regionMarkup = [];
44
+ if (this.state.options.metadata) {
45
+ let metricMarkup = [];
46
+ let regionMarkup = [];
77
47
  // Copy over metrics for future reference
78
- for (var m in event.data) {
79
- var eventType = typeof event.data[m];
48
+ for (let m in event.data) {
49
+ const eventType = typeof event.data[m];
80
50
  if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
81
- if (!(m in _this.metrics)) {
82
- _this.metrics[m] = 0;
51
+ if (!(m in this.metrics)) {
52
+ this.metrics[m] = 0;
83
53
  }
84
- var key = parseInt(m, 10);
85
- var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
54
+ let key = parseInt(m, 10);
55
+ let value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
86
56
  if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
87
- _this.metrics[m] = value;
57
+ this.metrics[m] = value;
88
58
  }
89
59
  else {
90
- _this.metrics[m] += value;
60
+ this.metrics[m] += value;
91
61
  }
92
- _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
62
+ this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : this.lean;
93
63
  }
94
64
  }
95
- for (var entry in _this.metrics) {
65
+ for (let entry in this.metrics) {
96
66
  if (entry in DataHelper.METRIC_MAP) {
97
- var m = _this.metrics[entry];
98
- var map = DataHelper.METRIC_MAP[entry];
99
- var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
100
- metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
67
+ let m = this.metrics[entry];
68
+ let map = DataHelper.METRIC_MAP[entry];
69
+ let unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
70
+ metricMarkup.push(`<li><h2>${this.value(m, unit)}<span>${this.key(unit)}</span></h2>${map.name}</li>`);
101
71
  }
102
72
  }
103
73
  // Append region information to metadata
104
- for (var name_1 in _this.regions) {
105
- var r = _this.regions[name_1];
106
- var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
107
- regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
74
+ for (let name in this.regions) {
75
+ let r = this.regions[name];
76
+ let className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
77
+ regionMarkup.push(`<span class="${className}">${name}</span>`);
108
78
  }
109
- _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
79
+ this.state.options.metadata.innerHTML = `<ul>${metricMarkup.join("" /* Data.Constant.Empty */)}</ul><div>${regionMarkup.join("" /* Data.Constant.Empty */)}</div>`;
110
80
  }
111
81
  };
112
- this.key = function (unit) {
82
+ this.key = (unit) => {
113
83
  switch (unit) {
114
84
  case "html-price":
115
85
  case "ld-price":
@@ -118,7 +88,7 @@ var DataHelper = /** @class */ (function () {
118
88
  default: return unit;
119
89
  }
120
90
  };
121
- this.value = function (num, unit) {
91
+ this.value = (num, unit) => {
122
92
  switch (unit) {
123
93
  case "KB": return Math.round(num / 1024);
124
94
  case "s": return Math.round(num / 10) / 100;
@@ -129,30 +99,28 @@ var DataHelper = /** @class */ (function () {
129
99
  };
130
100
  this.state = state;
131
101
  }
132
- DataHelper.prototype.region = function (event) {
133
- var data = event.data;
134
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
135
- var r = data_1[_i];
102
+ region(event) {
103
+ let data = event.data;
104
+ for (let r of data) {
136
105
  if (!(r.name in this.regions)) {
137
106
  this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
138
107
  }
139
108
  this.regionMap[r.id] = r.name;
140
109
  }
141
- };
142
- DataHelper.METRIC_MAP = (_a$1 = {},
143
- _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
144
- _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
145
- _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
146
- _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
147
- _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
148
- _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
149
- _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
150
- _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
151
- _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
152
- _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
153
- _a$1);
154
- return DataHelper;
155
- }());
110
+ }
111
+ }
112
+ DataHelper.METRIC_MAP = {
113
+ [2 /* Data.Metric.TotalBytes */]: { name: "Total Bytes", unit: "KB" },
114
+ [4 /* Data.Metric.TotalCost */]: { name: "Total Cost", unit: "ms" },
115
+ [3 /* Data.Metric.LayoutCost */]: { name: "Layout Cost", unit: "ms" },
116
+ [8 /* Data.Metric.LargestPaint */]: { name: "LCP", unit: "s" },
117
+ [9 /* Data.Metric.CumulativeLayoutShift */]: { name: "CLS", unit: "cls" },
118
+ [7 /* Data.Metric.LongTaskCount */]: { name: "Long Tasks" },
119
+ [24 /* Data.Metric.CartTotal */]: { name: "Cart Total", unit: "html-price" },
120
+ [13 /* Data.Metric.ProductPrice */]: { name: "Product Price", unit: "ld-price" },
121
+ [6 /* Data.Metric.ThreadBlockedTime */]: { name: "Thread Blocked", unit: "ms" },
122
+ [37 /* Data.Dimension.InteractionNextPaint */]: { name: "INP", unit: "ms" }
123
+ };
156
124
 
157
125
  // tslint:disable: no-bitwise
158
126
  function hash (input, precision) {
@@ -302,30 +270,29 @@ function lookup(hash) {
302
270
 
303
271
  var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
304
272
 
305
- var EnrichHelper = /** @class */ (function () {
306
- function EnrichHelper() {
307
- var _this = this;
308
- this.reset = function () {
309
- _this.children = {};
310
- _this.nodes = {};
273
+ class EnrichHelper {
274
+ constructor() {
275
+ this.reset = () => {
276
+ this.children = {};
277
+ this.nodes = {};
311
278
  helper.selector.reset();
312
279
  };
313
- this.selectors = function (event) {
314
- event.data.forEach && event.data.forEach(function (d) {
315
- var parent = _this.nodes[d.parent];
316
- var children = _this.children[d.parent] || [];
317
- var node = _this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
318
- var attributes = d.attributes || {};
280
+ this.selectors = (event) => {
281
+ event.data.forEach && event.data.forEach(d => {
282
+ let parent = this.nodes[d.parent];
283
+ let children = this.children[d.parent] || [];
284
+ let node = this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
285
+ let attributes = d.attributes || {};
319
286
  /* Track parent-child relationship for this element */
320
287
  if (node.parent !== d.parent) {
321
- var childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
288
+ let childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
322
289
  children.splice(childIndex, 0, d.id);
323
290
  // Stop tracking this node from children of previous parent
324
291
  if (node.parent !== d.parent) {
325
- var exParent = _this.children[node.parent];
326
- var nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
292
+ let exParent = this.children[node.parent];
293
+ let nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
327
294
  if (nodeIndex >= 0) {
328
- _this.children[node.parent].splice(nodeIndex, 1);
295
+ this.children[node.parent].splice(nodeIndex, 1);
329
296
  }
330
297
  }
331
298
  node.parent = d.parent;
@@ -334,31 +301,31 @@ var EnrichHelper = /** @class */ (function () {
334
301
  children.push(d.id);
335
302
  }
336
303
  /* Get current position */
337
- node.position = _this.position(d.id, d.tag, node, children, children.map(function (c) { return _this.nodes[c]; }));
304
+ node.position = this.position(d.id, d.tag, node, children, children.map(c => this.nodes[c]));
338
305
  /* For backward compatibility, continue populating current selector and hash like before in addition to beta selector and hash */
339
- var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
306
+ let input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes };
340
307
  // Get stable selector
341
308
  // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
342
- var selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
309
+ let selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
343
310
  d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
344
311
  d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
345
312
  // Get beta selector
346
- var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
313
+ let selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
347
314
  d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
348
315
  d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
349
316
  /* Track state for future reference */
350
317
  node.alpha = selectorAlpha;
351
318
  node.beta = selectorBeta;
352
- _this.nodes[d.id] = node;
319
+ this.nodes[d.id] = node;
353
320
  if (d.parent) {
354
- _this.children[d.parent] = children;
321
+ this.children[d.parent] = children;
355
322
  }
356
323
  });
357
324
  return event;
358
325
  };
359
- this.position = function (id, tag, child, children, siblings) {
326
+ this.position = (id, tag, child, children, siblings) => {
360
327
  child.position = 1;
361
- var idx = children ? children.indexOf(id) : -1;
328
+ let idx = children ? children.indexOf(id) : -1;
362
329
  while (idx-- > 0) {
363
330
  if (tag === siblings[idx].tag) {
364
331
  child.position = siblings[idx].position + 1;
@@ -369,12 +336,10 @@ var EnrichHelper = /** @class */ (function () {
369
336
  };
370
337
  this.reset();
371
338
  }
372
- return EnrichHelper;
373
- }());
339
+ }
374
340
 
375
- var HeatmapHelper = /** @class */ (function () {
376
- function HeatmapHelper(state, layout) {
377
- var _this = this;
341
+ class HeatmapHelper {
342
+ constructor(state, layout) {
378
343
  this.data = null;
379
344
  this.scrollData = null;
380
345
  this.max = null;
@@ -386,30 +351,30 @@ var HeatmapHelper = /** @class */ (function () {
386
351
  this.layout = null;
387
352
  this.scrollAvgFold = null;
388
353
  this.addScrollMakers = false;
389
- this.reset = function () {
390
- _this.data = null;
391
- _this.scrollData = null;
392
- _this.max = null;
393
- _this.offscreenRing = null;
394
- _this.gradientPixels = null;
395
- _this.timeout = null;
354
+ this.reset = () => {
355
+ this.data = null;
356
+ this.scrollData = null;
357
+ this.max = null;
358
+ this.offscreenRing = null;
359
+ this.gradientPixels = null;
360
+ this.timeout = null;
396
361
  // Reset resize observer
397
- if (_this.observer) {
398
- _this.observer.disconnect();
399
- _this.observer = null;
362
+ if (this.observer) {
363
+ this.observer.disconnect();
364
+ this.observer = null;
400
365
  }
401
366
  // Remove scroll and resize event listeners
402
- if (_this.state && _this.state.window) {
403
- var win = _this.state.window;
404
- win.removeEventListener("scroll", _this.redraw, true);
405
- win.removeEventListener("resize", _this.redraw, true);
367
+ if (this.state && this.state.window) {
368
+ let win = this.state.window;
369
+ win.removeEventListener("scroll", this.redraw, true);
370
+ win.removeEventListener("resize", this.redraw, true);
406
371
  }
407
372
  };
408
- this.clear = function () {
409
- var doc = _this.state.window.document;
410
- var win = _this.state.window;
411
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
412
- var de = doc.documentElement;
373
+ this.clear = () => {
374
+ let doc = this.state.window.document;
375
+ let win = this.state.window;
376
+ let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
377
+ let de = doc.documentElement;
413
378
  if (canvas) {
414
379
  canvas.width = de.clientWidth;
415
380
  canvas.height = de.clientHeight;
@@ -417,59 +382,54 @@ var HeatmapHelper = /** @class */ (function () {
417
382
  canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
418
383
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
419
384
  }
420
- _this.reset();
385
+ this.reset();
421
386
  };
422
- this.scroll = function (activity, avgFold, addMarkers) {
423
- _this.scrollData = _this.scrollData || activity;
424
- _this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
425
- _this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
426
- var canvas = _this.overlay();
427
- var context = canvas.getContext("2d" /* Constant.Context */);
428
- var doc = _this.state.window.document;
387
+ this.scroll = (activity, avgFold, addMarkers) => {
388
+ this.scrollData = this.scrollData || activity;
389
+ this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
390
+ this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
391
+ let canvas = this.overlay();
392
+ let context = canvas.getContext("2d" /* Constant.Context */);
393
+ let doc = this.state.window.document;
429
394
  var body = doc.body;
430
395
  var de = doc.documentElement;
431
396
  var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
432
397
  canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
433
398
  canvas.style.top = 0 + "px" /* Constant.Pixel */;
434
399
  if (canvas.width > 0 && canvas.height > 0) {
435
- if (_this.scrollData) {
436
- var grd = context.createLinearGradient(0, 0, 0, canvas.height);
437
- for (var _i = 0, _a = _this.scrollData; _i < _a.length; _i++) {
438
- var currentCombination = _a[_i];
439
- var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
440
- var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
441
- var hue = huePercentView * 240 /* Setting.MaxHue */;
400
+ if (this.scrollData) {
401
+ const grd = context.createLinearGradient(0, 0, 0, canvas.height);
402
+ for (const currentCombination of this.scrollData) {
403
+ const huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
404
+ const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
405
+ const hue = huePercentView * 240 /* Setting.MaxHue */;
442
406
  if (percentView <= 1) {
443
- grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
407
+ grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
444
408
  }
445
409
  }
446
410
  // Fill with gradient
447
411
  context.fillStyle = grd;
448
412
  context.fillRect(0, 0, canvas.width, canvas.height);
449
- if (_this.addScrollMakers) {
450
- _this.addInfoMarkers(context, _this.scrollData, canvas.width, canvas.height, _this.scrollAvgFold);
413
+ if (this.addScrollMakers) {
414
+ this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
451
415
  }
452
416
  }
453
417
  }
454
418
  };
455
- this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
456
- _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
457
- var markers = [75, 50, 25];
458
- var _loop_1 = function (marker) {
459
- var closest = scrollMapInfo.reduce(function (prev, curr) {
419
+ this.addInfoMarkers = (context, scrollMapInfo, width, height, avgFold) => {
420
+ this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
421
+ const markers = [75, 50, 25];
422
+ for (const marker of markers) {
423
+ const closest = scrollMapInfo.reduce((prev, curr) => {
460
424
  return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
461
425
  });
462
426
  if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
463
- var markerLine = (closest.scrollReachY / 100) * height;
464
- _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
427
+ const markerLine = (closest.scrollReachY / 100) * height;
428
+ this.addMarker(context, width, `${marker}%`, markerLine, 35 /* Setting.MarkerSmallWidth */);
465
429
  }
466
- };
467
- for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
468
- var marker = markers_1[_i];
469
- _loop_1(marker);
470
430
  }
471
431
  };
472
- this.addMarker = function (context, heatmapWidth, label, markerY, markerWidth) {
432
+ this.addMarker = (context, heatmapWidth, label, markerY, markerWidth) => {
473
433
  context.beginPath();
474
434
  context.moveTo(0, markerY);
475
435
  context.lineTo(heatmapWidth, markerY);
@@ -483,32 +443,31 @@ var HeatmapHelper = /** @class */ (function () {
483
443
  context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
484
444
  context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
485
445
  };
486
- this.click = function (activity) {
487
- _this.data = _this.data || activity;
488
- var heat = _this.transform();
489
- var canvas = _this.overlay();
490
- var ctx = canvas.getContext("2d" /* Constant.Context */);
446
+ this.click = (activity) => {
447
+ this.data = this.data || activity;
448
+ let heat = this.transform();
449
+ let canvas = this.overlay();
450
+ let ctx = canvas.getContext("2d" /* Constant.Context */);
491
451
  if (canvas.width > 0 && canvas.height > 0) {
492
452
  // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
493
453
  // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
494
454
  // Pre-render similar primitives or repeating objects on an offscreen canvas
495
- var ring = _this.getRing();
496
- var gradient = _this.getGradient();
455
+ let ring = this.getRing();
456
+ let gradient = this.getGradient();
497
457
  // Render activity for each (x,y) coordinate in our data
498
- for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
499
- var entry = heat_1[_i];
458
+ for (let entry of heat) {
500
459
  ctx.globalAlpha = entry.a;
501
460
  ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
502
461
  }
503
462
  // Add color to the canvas based on alpha value of each pixel
504
- var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
505
- for (var i = 0; i < pixels.data.length; i += 4) {
463
+ let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
464
+ for (let i = 0; i < pixels.data.length; i += 4) {
506
465
  // For each pixel, we have 4 entries in data array: (r,g,b,a)
507
466
  // To pick the right color from gradient pixels, we look at the alpha value of the pixel
508
467
  // Alpha value ranges from 0-255
509
- var alpha = pixels.data[i + 3];
468
+ let alpha = pixels.data[i + 3];
510
469
  if (alpha > 0) {
511
- var offset = (alpha - 1) * 4;
470
+ let offset = (alpha - 1) * 4;
512
471
  pixels.data[i] = gradient.data[offset];
513
472
  pixels.data[i + 1] = gradient.data[offset + 1];
514
473
  pixels.data[i + 2] = gradient.data[offset + 2];
@@ -517,25 +476,25 @@ var HeatmapHelper = /** @class */ (function () {
517
476
  ctx.putImageData(pixels, 0, 0);
518
477
  }
519
478
  };
520
- this.overlay = function () {
479
+ this.overlay = () => {
521
480
  // Create canvas for visualizing heatmap
522
- var doc = _this.state.window.document;
523
- var win = _this.state.window;
524
- var de = doc.documentElement;
525
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
481
+ let doc = this.state.window.document;
482
+ let win = this.state.window;
483
+ let de = doc.documentElement;
484
+ let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
526
485
  if (canvas === null) {
527
486
  canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
528
487
  canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
529
488
  canvas.width = 0;
530
489
  canvas.height = 0;
531
490
  canvas.style.position = "absolute" /* Constant.Absolute */;
532
- canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
491
+ canvas.style.zIndex = `${2147483647 /* Setting.ZIndex */}`;
533
492
  de.appendChild(canvas);
534
- win.addEventListener("scroll", _this.redraw, true);
535
- win.addEventListener("resize", _this.redraw, true);
536
- _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
537
- if (_this.observer) {
538
- _this.observer.observe(doc.body);
493
+ win.addEventListener("scroll", this.redraw, true);
494
+ win.addEventListener("resize", this.redraw, true);
495
+ this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
496
+ if (this.observer) {
497
+ this.observer.observe(doc.body);
539
498
  }
540
499
  }
541
500
  // Ensure canvas is positioned correctly
@@ -546,13 +505,13 @@ var HeatmapHelper = /** @class */ (function () {
546
505
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
547
506
  return canvas;
548
507
  };
549
- this.getRing = function () {
550
- if (_this.offscreenRing === null) {
551
- var doc = _this.state.window.document;
552
- _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
553
- _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
554
- _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
555
- var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
508
+ this.getRing = () => {
509
+ if (this.offscreenRing === null) {
510
+ let doc = this.state.window.document;
511
+ this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
512
+ this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
513
+ this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
514
+ let ctx = this.offscreenRing.getContext("2d" /* Constant.Context */);
556
515
  ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
557
516
  ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
558
517
  ctx.shadowColor = "black" /* Constant.Black */;
@@ -561,59 +520,58 @@ var HeatmapHelper = /** @class */ (function () {
561
520
  ctx.closePath();
562
521
  ctx.fill();
563
522
  }
564
- return _this.offscreenRing;
523
+ return this.offscreenRing;
565
524
  };
566
- this.getGradient = function () {
567
- if (_this.gradientPixels === null) {
568
- var doc = _this.state.window.document;
569
- var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
525
+ this.getGradient = () => {
526
+ if (this.gradientPixels === null) {
527
+ let doc = this.state.window.document;
528
+ let offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
570
529
  offscreenGradient.width = 1;
571
530
  offscreenGradient.height = 256 /* Setting.Colors */;
572
- var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
573
- var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
574
- var step = 1 / HeatmapHelper.COLORS.length;
575
- for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
531
+ let ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
532
+ let gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
533
+ let step = 1 / HeatmapHelper.COLORS.length;
534
+ for (let i = 0; i < HeatmapHelper.COLORS.length; i++) {
576
535
  gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
577
536
  }
578
537
  ctx.fillStyle = gradient;
579
538
  ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
580
- _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
539
+ this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
581
540
  }
582
- return _this.gradientPixels;
541
+ return this.gradientPixels;
583
542
  };
584
- this.redraw = function (event) {
585
- if (_this.data) {
586
- if (_this.timeout) {
587
- clearTimeout(_this.timeout);
543
+ this.redraw = (event) => {
544
+ if (this.data) {
545
+ if (this.timeout) {
546
+ clearTimeout(this.timeout);
588
547
  }
589
- _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
548
+ this.timeout = setTimeout(this.click, 30 /* Setting.Interval */);
590
549
  }
591
- else if (_this.scrollData) {
550
+ else if (this.scrollData) {
592
551
  if (event.type != 'scroll') {
593
- if (_this.timeout) {
594
- clearTimeout(_this.timeout);
552
+ if (this.timeout) {
553
+ clearTimeout(this.timeout);
595
554
  }
596
- _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
555
+ this.timeout = setTimeout(this.scroll, 30 /* Setting.Interval */);
597
556
  }
598
557
  }
599
558
  };
600
- this.transform = function () {
601
- var output = [];
602
- var points = {};
603
- var localMax = 0;
604
- var height = _this.state.window && _this.state.window.document ? _this.state.window.document.documentElement.clientHeight : 0;
605
- for (var _i = 0, _a = _this.data; _i < _a.length; _i++) {
606
- var element = _a[_i];
607
- var el = _this.layout.get(element.hash);
559
+ this.transform = () => {
560
+ let output = [];
561
+ let points = {};
562
+ let localMax = 0;
563
+ let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
564
+ for (let element of this.data) {
565
+ let el = this.layout.get(element.hash);
608
566
  if (el && typeof el.getBoundingClientRect === "function") {
609
- var r = el.getBoundingClientRect();
610
- var v = _this.visible(el, r, height);
567
+ let r = el.getBoundingClientRect();
568
+ let v = this.visible(el, r, height);
611
569
  // Process clicks for only visible elements
612
- if (_this.max === null || v) {
613
- for (var i = 0; i < element.points; i++) {
614
- var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
615
- var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
616
- var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
570
+ if (this.max === null || v) {
571
+ for (let i = 0; i < element.points; i++) {
572
+ let x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
573
+ let y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
574
+ let k = `${x}${"X" /* Constant.Separator */}${y}${"X" /* Constant.Separator */}${v ? 1 : 0}`;
617
575
  points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
618
576
  localMax = Math.max(points[k], localMax);
619
577
  }
@@ -621,27 +579,25 @@ var HeatmapHelper = /** @class */ (function () {
621
579
  }
622
580
  }
623
581
  // Set the max value from the firs t
624
- _this.max = _this.max ? _this.max : localMax;
582
+ this.max = this.max ? this.max : localMax;
625
583
  // Once all points are accounted for, convert everything into absolute (x, y)
626
- for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
627
- var coordinates = _c[_b];
628
- var parts = coordinates.split("X" /* Constant.Separator */);
629
- var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
584
+ for (let coordinates of Object.keys(points)) {
585
+ let parts = coordinates.split("X" /* Constant.Separator */);
586
+ let alpha = Math.min((points[coordinates] / this.max) + 0.15 /* Setting.AlphaBoost */, 1);
630
587
  if (parts[2] === "1") {
631
588
  output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
632
589
  }
633
590
  }
634
591
  return output;
635
592
  };
636
- this.visible = function (el, r, height) {
637
- var doc = _this.state.window.document;
638
- var visibility = r.height > height ? true : false;
593
+ this.visible = (el, r, height) => {
594
+ let doc = this.state.window.document;
595
+ let visibility = r.height > height ? true : false;
639
596
  if (visibility === false && r.width > 0 && r.height > 0) {
640
597
  while (!visibility && doc) {
641
- var shadowElement = null;
642
- var elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
643
- for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
644
- var e = elements_1[_i];
598
+ let shadowElement = null;
599
+ let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
600
+ for (let e of elements) {
645
601
  // Ignore if top element ends up being the canvas element we added for heatmap visualization
646
602
  if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
647
603
  continue;
@@ -658,9 +614,8 @@ var HeatmapHelper = /** @class */ (function () {
658
614
  this.state = state;
659
615
  this.layout = layout;
660
616
  }
661
- HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
662
- return HeatmapHelper;
663
- }());
617
+ }
618
+ HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
664
619
 
665
620
  var pointerSvg = `background: url("data:image/svg+xml,%3Csvg width='25' height='33' viewBox='0 0 25 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_1588_56448)'%3E%3Cpath d='M4.01802 5.55275C4.01946 3.50367 6.4952 2.47998 7.93878 3.93422C11.8224 7.84649 15.637 11.722 19.5308 15.6444C20.9744 17.0986 19.9461 19.6118 17.8974 19.6538C16.3364 19.6858 14.7609 19.7179 13.1178 19.7275C12.4996 19.7312 11.9077 19.9799 11.4721 20.4186C10.3166 21.582 9.15585 22.7133 7.98174 23.8569C6.50994 25.2904 4.00066 24.2454 4.00207 22.1909C4.00592 16.5949 4.01415 11.0883 4.01802 5.55275Z' fill='%23D97705'/%3E%3Cpath d='M4.74233 6.01561C4.74223 4.45449 6.63136 3.6747 7.73247 4.78135C11.4175 8.48492 15.0357 12.1199 18.7088 15.7882C19.8134 16.8914 19.0329 18.8059 17.4722 18.8401C15.8726 18.8751 14.2495 18.9145 12.5497 18.9237C12.0819 18.9263 11.6339 19.1135 11.3029 19.4441C10.1408 20.6046 8.9704 21.7251 7.78073 22.8738C6.6557 23.96 4.74395 23.1646 4.74384 21.6008C4.7435 16.3797 4.74267 11.2488 4.74233 6.01561Z' fill='white'/%3E%3Cpath d='M17.6946 16.2002C18.322 16.8308 17.8753 17.913 16.9858 17.9268C15.4482 17.9505 13.8862 17.9868 12.2788 17.9971C11.7369 18.0006 11.2189 18.2206 10.8377 18.6059C9.7303 19.7249 8.58978 20.8151 7.42447 21.9628C6.78436 22.5932 5.68359 22.1428 5.68359 21.2443C5.68359 16.2568 5.68359 11.3772 5.68359 6.55071C5.68359 5.6585 6.76347 5.21291 7.3927 5.84545C10.813 9.28377 14.2599 12.7473 17.6946 16.2002Z' fill='%23FFC35F'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1588_56448' x='0.00390625' y='3.25171' width='24.1992' height='29.2681' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1588_56448'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1588_56448' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center center;`;
666
621
 
@@ -696,29 +651,28 @@ var clickStyle = `.clarity-click,
696
651
  transition: visibility 0s 1s, opacity 1s linear;
697
652
  }`;
698
653
 
699
- var InteractionHelper = /** @class */ (function () {
700
- function InteractionHelper(state, layout, vnext) {
701
- var _this = this;
654
+ class InteractionHelper {
655
+ constructor(state, layout, vnext) {
702
656
  this.hoverId = null;
703
657
  this.targetId = null;
704
658
  this.points = [];
705
659
  this.scrollPointIndex = 0;
706
660
  this.clickAudio = null;
707
661
  this.visualizedClicks = [];
708
- this.reset = function () {
709
- _this.points = [];
710
- _this.scrollPointIndex = 0;
711
- _this.clickAudio = null;
712
- _this.hoverId = null;
713
- _this.targetId = null;
714
- _this.layout.reset();
715
- };
716
- this.scroll = function (event) {
717
- var data = event.data;
718
- var doc = _this.state.window.document;
719
- var de = doc.documentElement;
720
- var scrollTarget = _this.layout.element(data.target) || doc.body;
721
- var scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
662
+ this.reset = () => {
663
+ this.points = [];
664
+ this.scrollPointIndex = 0;
665
+ this.clickAudio = null;
666
+ this.hoverId = null;
667
+ this.targetId = null;
668
+ this.layout.reset();
669
+ };
670
+ this.scroll = (event) => {
671
+ let data = event.data;
672
+ let doc = this.state.window.document;
673
+ let de = doc.documentElement;
674
+ let scrollTarget = this.layout.element(data.target) || doc.body;
675
+ let scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
722
676
  if (scrollTarget && scrollable) {
723
677
  scrollTarget.scrollTo(data.x, data.y);
724
678
  // In an edge case, scrolling API doesn't work when css on HTML element has height:100% and overflow:auto
@@ -731,36 +685,36 @@ var InteractionHelper = /** @class */ (function () {
731
685
  // Position canvas relative to scroll events on the parent page
732
686
  if (scrollTarget === de || scrollTarget === doc.body) {
733
687
  if (!scrollable) {
734
- _this.state.window.scrollTo(data.x, data.y);
688
+ this.state.window.scrollTo(data.x, data.y);
735
689
  }
736
- var canvas = _this.overlay();
690
+ let canvas = this.overlay();
737
691
  if (canvas) {
738
692
  canvas.style.left = data.x + "px" /* Constant.Pixel */;
739
693
  canvas.style.top = data.y + "px" /* Constant.Pixel */;
740
694
  canvas.width = de.clientWidth;
741
695
  canvas.height = de.clientHeight;
742
696
  }
743
- _this.scrollPointIndex = _this.points.length;
697
+ this.scrollPointIndex = this.points.length;
744
698
  }
745
699
  };
746
- this.resize = function (event) {
747
- var data = event.data;
748
- var width = data.width;
749
- var height = data.height;
750
- if (_this.state.options.onresize) {
751
- _this.state.options.onresize(width, height);
700
+ this.resize = (event) => {
701
+ let data = event.data;
702
+ let width = data.width;
703
+ let height = data.height;
704
+ if (this.state.options.onresize) {
705
+ this.state.options.onresize(width, height);
752
706
  }
753
707
  };
754
- this.visibility = function (event) {
755
- var doc = _this.state.window.document;
708
+ this.visibility = (event) => {
709
+ let doc = this.state.window.document;
756
710
  if (doc && doc.documentElement && event.data.visible === 0 /* BooleanFlag.False */) {
757
711
  // if the website has styles on the <html> node then we need to save the reference to them before we change them
758
712
  // to indicate the window was hidden. This is to ensure that we can restore the original styles when the window is visible again.
759
- var bg = doc.documentElement.style.backgroundColor;
713
+ const bg = doc.documentElement.style.backgroundColor;
760
714
  if (bg) {
761
715
  doc.documentElement.setAttribute("data-clarity-background-color" /* Constant.OriginalBackgroundColor */, bg);
762
716
  }
763
- var o = doc.documentElement.style.opacity;
717
+ const o = doc.documentElement.style.opacity;
764
718
  if (o) {
765
719
  doc.documentElement.setAttribute("data-clarity-opacity" /* Constant.OriginalOpacity */, o);
766
720
  }
@@ -782,9 +736,9 @@ var InteractionHelper = /** @class */ (function () {
782
736
  }
783
737
  }
784
738
  };
785
- this.input = function (event) {
786
- var data = event.data;
787
- var el = _this.layout.element(data.target);
739
+ this.input = (event) => {
740
+ let data = event.data;
741
+ let el = this.layout.element(data.target);
788
742
  if (el) {
789
743
  switch (el.type) {
790
744
  case "checkbox":
@@ -800,73 +754,72 @@ var InteractionHelper = /** @class */ (function () {
800
754
  }
801
755
  }
802
756
  };
803
- this.selection = function (event) {
804
- var data = event.data;
805
- var doc = _this.state.window.document;
806
- var s = doc.getSelection();
757
+ this.selection = (event) => {
758
+ let data = event.data;
759
+ let doc = this.state.window.document;
760
+ let s = doc.getSelection();
807
761
  // Wrapping selection code inside a try / catch to avoid throwing errors when dealing with elements inside the shadow DOM.
808
762
  try {
809
- s.setBaseAndExtent(_this.layout.element(data.start), data.startOffset, _this.layout.element(data.end), data.endOffset);
763
+ s.setBaseAndExtent(this.layout.element(data.start), data.startOffset, this.layout.element(data.end), data.endOffset);
810
764
  }
811
765
  catch (ex) {
812
766
  console.warn("Exception encountered while trying to set selection: " + ex);
813
767
  }
814
768
  };
815
- this.pointer = function (event) {
816
- if (!_this.state.options.pointer) {
769
+ this.pointer = (event) => {
770
+ if (!this.state.options.pointer) {
817
771
  return;
818
772
  }
819
- var data = event.data;
820
- var type = event.event;
821
- var doc = _this.state.window.document;
822
- var de = doc.documentElement;
823
- var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
824
- var pointerWidth = 29 /* Setting.PointerWidth */;
825
- var pointerHeight = 38 /* Setting.PointerHeight */;
773
+ let data = event.data;
774
+ let type = event.event;
775
+ let doc = this.state.window.document;
776
+ let de = doc.documentElement;
777
+ let p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
778
+ let pointerWidth = 29 /* Setting.PointerWidth */;
779
+ let pointerHeight = 38 /* Setting.PointerHeight */;
826
780
  if (p === null) {
827
781
  p = doc.createElement("DIV");
828
782
  p.id = "clarity-pointer" /* Constant.PointerLayer */;
829
783
  de.appendChild(p);
830
784
  // Add custom styles
831
- var style = doc.createElement("STYLE");
785
+ let style = doc.createElement("STYLE");
832
786
  style.textContent =
833
787
  "@keyframes pulsate-one { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(3, 3); opacity: 0; } }" +
834
788
  "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
835
789
  "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
836
790
  "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
837
- "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
838
- "#".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; }") +
839
- _this.getClickLayerStyle() +
840
- ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
841
- ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
842
- ".".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 */, "); }") +
843
- ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
844
- _this.getPointerStyle();
791
+ `#${"clarity-interaction-canvas" /* Constant.InteractionCanvas */} { position: absolute; left: 0; top: 0; z-index: ${2147483647 /* Setting.ZIndex */}; background: none; }` +
792
+ `#${"clarity-pointer" /* Constant.PointerLayer */} { position: absolute; z-index: ${2147483647 /* Setting.ZIndex */}; url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */}) no-repeat left center; width: ${pointerWidth}px; height: ${pointerHeight}px; }` +
793
+ this.getClickLayerStyle() +
794
+ `.${"clarity-touch" /* Constant.TouchLayer */} { background: radial-gradient(rgba(242,97,12,1), transparent); }` +
795
+ `.${"clarity-touch-ring" /* Constant.TouchRing */} { background: transparent; border: 1px solid rgba(242,97,12,0.8); }` +
796
+ `.${"clarity-pointer-click" /* Constant.PointerClickLayer */} { background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Asset.Click */}); }` +
797
+ `.${"clarity-pointer-none" /* Constant.PointerNone */} { background: none; }` +
798
+ this.getPointerStyle();
845
799
  p.appendChild(style);
846
800
  }
847
801
  p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
848
802
  p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
849
- var title = "Pointer";
803
+ let title = "Pointer";
850
804
  switch (type) {
851
805
  case 9 /* Data.Event.Click */:
852
806
  title = "Click";
853
- _this.visualizedClicks.push({
807
+ this.visualizedClicks.push({
854
808
  doc: de,
855
- click: _this.drawClick(doc, data.x, data.y, title),
809
+ click: this.drawClick(doc, data.x, data.y, title),
856
810
  time: event.time
857
811
  });
858
- if (_this.state.options.onclickMismatch) {
859
- var originalTarget = _this.layout.element(data.target);
860
- var correctTargetHit = false;
861
- var elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
862
- for (var _i = 0, elementsUnderClick_1 = elementsUnderClick; _i < elementsUnderClick_1.length; _i++) {
863
- var elementUnderClick = elementsUnderClick_1[_i];
812
+ if (this.state.options.onclickMismatch) {
813
+ const originalTarget = this.layout.element(data.target);
814
+ let correctTargetHit = false;
815
+ const elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
816
+ for (const elementUnderClick of elementsUnderClick) {
864
817
  if (originalTarget === elementUnderClick) {
865
818
  correctTargetHit = true;
866
819
  }
867
820
  }
868
821
  if (!correctTargetHit) {
869
- _this.state.options.onclickMismatch({
822
+ this.state.options.onclickMismatch({
870
823
  time: event.time,
871
824
  x: data.x,
872
825
  y: data.y,
@@ -878,9 +831,9 @@ var InteractionHelper = /** @class */ (function () {
878
831
  break;
879
832
  case 16 /* Data.Event.DoubleClick */:
880
833
  title = "Click";
881
- _this.visualizedClicks.push({
834
+ this.visualizedClicks.push({
882
835
  doc: de,
883
- click: _this.drawClick(doc, data.x, data.y, title),
836
+ click: this.drawClick(doc, data.x, data.y, title),
884
837
  time: event.time
885
838
  });
886
839
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -889,9 +842,9 @@ var InteractionHelper = /** @class */ (function () {
889
842
  case 18 /* Data.Event.TouchEnd */:
890
843
  case 20 /* Data.Event.TouchCancel */:
891
844
  title = "Touch";
892
- _this.visualizedClicks.push({
845
+ this.visualizedClicks.push({
893
846
  doc: de,
894
- click: _this.drawTouch(doc, data.x, data.y, title),
847
+ click: this.drawTouch(doc, data.x, data.y, title),
895
848
  time: event.time
896
849
  });
897
850
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -903,37 +856,37 @@ var InteractionHelper = /** @class */ (function () {
903
856
  case 12 /* Data.Event.MouseMove */:
904
857
  title = "Mouse Move";
905
858
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
906
- _this.addPoint({ time: event.time, x: data.x, y: data.y });
907
- _this.targetId = data.target;
859
+ this.addPoint({ time: event.time, x: data.x, y: data.y });
860
+ this.targetId = data.target;
908
861
  break;
909
862
  default:
910
863
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
911
864
  break;
912
865
  }
913
- p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
866
+ p.setAttribute("title" /* Constant.Title */, `${title} (${data.x}${"px" /* Constant.Pixel */}, ${data.y}${"px" /* Constant.Pixel */})`);
914
867
  };
915
- this.clearOldClickVisualizations = function (currentTimestamp) {
916
- if (_this.vnext) {
917
- while (_this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
918
- var visualizedClick = _this.visualizedClicks.shift();
919
- _this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
868
+ this.clearOldClickVisualizations = (currentTimestamp) => {
869
+ if (this.vnext) {
870
+ while (this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
871
+ const visualizedClick = this.visualizedClicks.shift();
872
+ this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
920
873
  }
921
- var tooOldClicks = _this.visualizedClicks.filter(function (click) { return currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */; });
922
- tooOldClicks.forEach(function (click) {
923
- _this.fadeOutElement(click.click, click.doc);
924
- _this.visualizedClicks.splice(_this.visualizedClicks.indexOf(click), 1);
874
+ var tooOldClicks = this.visualizedClicks.filter(click => currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */);
875
+ tooOldClicks.forEach(click => {
876
+ this.fadeOutElement(click.click, click.doc);
877
+ this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
925
878
  });
926
879
  }
927
880
  };
928
- this.fadeOutElement = function (element, document) {
881
+ this.fadeOutElement = (element, document) => {
929
882
  element.classList.add("clarity-click-hidden");
930
- setTimeout(function () { document.removeChild(element); }, 10000);
883
+ setTimeout(() => { document.removeChild(element); }, 10000);
931
884
  };
932
- this.hover = function () {
933
- if (_this.targetId && _this.targetId !== _this.hoverId) {
934
- var depth = 0;
885
+ this.hover = () => {
886
+ if (this.targetId && this.targetId !== this.hoverId) {
887
+ let depth = 0;
935
888
  // First, remove any previous hover class assignments
936
- var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
889
+ let hoverNode = this.hoverId ? this.layout.element(this.hoverId) : null;
937
890
  while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
938
891
  if ("removeAttribute" in hoverNode) {
939
892
  hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
@@ -943,7 +896,7 @@ var InteractionHelper = /** @class */ (function () {
943
896
  }
944
897
  // Then, add hover class on elements that are below the pointer
945
898
  depth = 0;
946
- var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
899
+ let targetNode = this.targetId ? this.layout.element(this.targetId) : null;
947
900
  while (targetNode && depth < 7 /* Setting.HoverDepth */) {
948
901
  if ("setAttribute" in targetNode) {
949
902
  targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
@@ -952,30 +905,30 @@ var InteractionHelper = /** @class */ (function () {
952
905
  depth++;
953
906
  }
954
907
  // Finally, update hoverId to reflect the new node
955
- _this.hoverId = _this.targetId;
908
+ this.hoverId = this.targetId;
956
909
  }
957
910
  };
958
- this.addPoint = function (point) {
959
- var last = _this.points.length > 0 ? _this.points[_this.points.length - 1] : null;
911
+ this.addPoint = (point) => {
912
+ let last = this.points.length > 0 ? this.points[this.points.length - 1] : null;
960
913
  if (last && point.x === last.x && point.y === last.y) {
961
914
  last.time = point.time;
962
915
  }
963
916
  else {
964
- _this.points.push(point);
917
+ this.points.push(point);
965
918
  }
966
919
  };
967
- this.drawTouch = function (doc, x, y, title) {
968
- var de = doc.documentElement;
969
- var touch = doc.createElement("DIV");
920
+ this.drawTouch = (doc, x, y, title) => {
921
+ let de = doc.documentElement;
922
+ let touch = doc.createElement("DIV");
970
923
  touch.className = "clarity-touch" /* Constant.TouchLayer */;
971
- touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
924
+ touch.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
972
925
  touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
973
926
  touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
974
927
  touch.style.animation = "disappear 1 1s";
975
928
  touch.style.animationFillMode = "forwards";
976
929
  de.appendChild(touch);
977
930
  // First pulsating ring
978
- var ringOne = touch.cloneNode();
931
+ let ringOne = touch.cloneNode();
979
932
  ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
980
933
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
981
934
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
@@ -984,48 +937,48 @@ var InteractionHelper = /** @class */ (function () {
984
937
  touch.appendChild(ringOne);
985
938
  return touch;
986
939
  };
987
- this.drawClick = function (doc, x, y, title) {
988
- var de = doc.documentElement;
989
- var click = doc.createElement("DIV");
940
+ this.drawClick = (doc, x, y, title) => {
941
+ let de = doc.documentElement;
942
+ let click = doc.createElement("DIV");
990
943
  click.className = "clarity-click" /* Constant.ClickLayer */;
991
- click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
944
+ click.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
992
945
  click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
993
946
  click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
994
947
  // First pulsating ring
995
- var ringOne = click.cloneNode();
948
+ let ringOne = click.cloneNode();
996
949
  ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
997
950
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
998
951
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
999
952
  ringOne.style.animation = "pulsate-one 1 1s";
1000
953
  ringOne.style.animationFillMode = "forwards";
1001
954
  click.appendChild(ringOne);
1002
- if (_this.vnext) {
1003
- var center = doc.createElement("DIV");
1004
- center.className = "".concat("clarity-click" /* Constant.ClickLayer */, "-center");
955
+ if (this.vnext) {
956
+ let center = doc.createElement("DIV");
957
+ center.className = `${"clarity-click" /* Constant.ClickLayer */}-center`;
1005
958
  click.appendChild(center);
1006
959
  }
1007
960
  else {
1008
961
  // Second pulsating ring
1009
- var ringTwo = ringOne.cloneNode();
962
+ let ringTwo = ringOne.cloneNode();
1010
963
  ringTwo.style.animation = "pulsate-two 1 1s";
1011
964
  click.appendChild(ringTwo);
1012
965
  }
1013
966
  de.appendChild(click);
1014
967
  // Play sound
1015
968
  if (typeof Audio !== "undefined" /* Constant.Undefined */) {
1016
- if (_this.clickAudio === null) {
1017
- _this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
1018
- click.appendChild(_this.clickAudio);
969
+ if (this.clickAudio === null) {
970
+ this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
971
+ click.appendChild(this.clickAudio);
1019
972
  }
1020
- _this.clickAudio.play();
973
+ this.clickAudio.play();
1021
974
  }
1022
975
  return click;
1023
976
  };
1024
- this.overlay = function () {
977
+ this.overlay = () => {
1025
978
  // Create canvas for visualizing interactions
1026
- var doc = _this.state.window.document;
1027
- var de = doc.documentElement;
1028
- var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
979
+ let doc = this.state.window.document;
980
+ let de = doc.documentElement;
981
+ let canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
1029
982
  if (canvas === null) {
1030
983
  canvas = doc.createElement("canvas");
1031
984
  canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
@@ -1039,13 +992,13 @@ var InteractionHelper = /** @class */ (function () {
1039
992
  }
1040
993
  return canvas;
1041
994
  };
1042
- this.match = function (time) {
1043
- var p = [];
1044
- for (var i = _this.points.length - 1; i > 0; i--) {
995
+ this.match = (time) => {
996
+ let p = [];
997
+ for (let i = this.points.length - 1; i > 0; i--) {
1045
998
  // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
1046
999
  // We reset the trail after every scroll event to avoid drawing weird looking trail.
1047
- if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
1048
- p.push(_this.points[i]);
1000
+ if (i >= this.scrollPointIndex && time - this.points[i].time < 3000 /* Setting.PixelLife */) {
1001
+ p.push(this.points[i]);
1049
1002
  }
1050
1003
  else {
1051
1004
  break;
@@ -1053,32 +1006,32 @@ var InteractionHelper = /** @class */ (function () {
1053
1006
  }
1054
1007
  return p.slice(0, 75 /* Setting.MaxTrailPoints */);
1055
1008
  };
1056
- this.trail = function (now) {
1057
- var canvas = _this.overlay();
1058
- if (_this.state.options.canvas && canvas) {
1059
- var ctx = canvas.getContext('2d');
1060
- var path = _this.state.options.keyframes ? _this.curve(_this.points.reverse()) : _this.curve(_this.match(now));
1009
+ this.trail = (now) => {
1010
+ const canvas = this.overlay();
1011
+ if (this.state.options.canvas && canvas) {
1012
+ const ctx = canvas.getContext('2d');
1013
+ const path = this.state.options.keyframes ? this.curve(this.points.reverse()) : this.curve(this.match(now));
1061
1014
  // Update hovered elements
1062
- _this.hover();
1015
+ this.hover();
1063
1016
  // We need at least two points to create a line
1064
1017
  if (path.length > 1) {
1065
- var last = path[0];
1018
+ let last = path[0];
1066
1019
  // Start off by clearing whatever was on the canvas before
1067
1020
  // The current implementation is inefficient. We have to redraw canvas all over again for every point.
1068
1021
  // In future we should batch pointer events and minimize the number of times we have to redraw canvas.
1069
1022
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
1070
- var count = path.length;
1071
- var offsetX = canvas.offsetLeft;
1072
- var offsetY = canvas.offsetTop;
1073
- for (var i = 1; i < count; i++) {
1074
- var current = path[i];
1023
+ let count = path.length;
1024
+ let offsetX = canvas.offsetLeft;
1025
+ let offsetY = canvas.offsetTop;
1026
+ for (let i = 1; i < count; i++) {
1027
+ let current = path[i];
1075
1028
  // Compute percentage position of these points compared to all points in the path
1076
- var lastFactor = 1 - ((i - 1) / count);
1077
- var currentFactor = 1 - (i / count);
1029
+ let lastFactor = 1 - ((i - 1) / count);
1030
+ let currentFactor = 1 - (i / count);
1078
1031
  // Generate a color gradient that goes from red -> yellow -> green -> light blue -> blue
1079
- var gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1080
- gradient.addColorStop(1, _this.color(currentFactor));
1081
- gradient.addColorStop(0, _this.color(lastFactor));
1032
+ let gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1033
+ gradient.addColorStop(1, this.color(currentFactor));
1034
+ gradient.addColorStop(0, this.color(lastFactor));
1082
1035
  // Line width of the trail shrinks as the position of the point goes farther away.
1083
1036
  ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
1084
1037
  ctx.lineCap = "round" /* Constant.Round */;
@@ -1096,25 +1049,25 @@ var InteractionHelper = /** @class */ (function () {
1096
1049
  }
1097
1050
  }
1098
1051
  // If we are only rendering key frames, clear points array after each key frame
1099
- if (_this.state.options.keyframes) {
1100
- _this.points = [];
1052
+ if (this.state.options.keyframes) {
1053
+ this.points = [];
1101
1054
  }
1102
1055
  }
1103
1056
  };
1104
- this.color = function (factor) {
1105
- var s = InteractionHelper.TRAIL_START_COLOR;
1106
- var e = InteractionHelper.TRAIL_END_COLOR;
1107
- var c = [];
1108
- for (var i = 0; i < 3; i++) {
1057
+ this.color = (factor) => {
1058
+ let s = InteractionHelper.TRAIL_START_COLOR;
1059
+ let e = InteractionHelper.TRAIL_END_COLOR;
1060
+ let c = [];
1061
+ for (let i = 0; i < 3; i++) {
1109
1062
  c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
1110
1063
  }
1111
- return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
1064
+ return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${factor})`;
1112
1065
  };
1113
1066
  // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
1114
- this.curve = function (path) {
1115
- var tension = 0.5;
1116
- var p = [];
1117
- var output = [];
1067
+ this.curve = (path) => {
1068
+ const tension = 0.5;
1069
+ let p = [];
1070
+ let output = [];
1118
1071
  // Make a copy of the input points so we don't make any side effects
1119
1072
  p = path.slice(0);
1120
1073
  // The algorithm require a valid previous and next point for each point in the original input
@@ -1123,57 +1076,56 @@ var InteractionHelper = /** @class */ (function () {
1123
1076
  p.unshift(path[0]);
1124
1077
  p.push(path[path.length - 1]);
1125
1078
  // Loop through the points, and generate intermediate points to make a smooth trail
1126
- for (var i = 1; i < p.length - 2; i++) {
1127
- var time = p[i].time;
1128
- var segments = Math.max(Math.min(Math.round(_this.distance(p[i], p[i - 1])), 10), 1);
1129
- for (var t = 0; t <= segments; t++) {
1079
+ for (let i = 1; i < p.length - 2; i++) {
1080
+ const time = p[i].time;
1081
+ const segments = Math.max(Math.min(Math.round(this.distance(p[i], p[i - 1])), 10), 1);
1082
+ for (let t = 0; t <= segments; t++) {
1130
1083
  // Compute tension vectors
1131
- var t1 = { time: time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1132
- var t2 = { time: time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1133
- var step = t / segments;
1084
+ let t1 = { time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1085
+ let t2 = { time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1086
+ let step = t / segments;
1134
1087
  // Compute cardinals
1135
- var c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1136
- var c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1137
- var c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1138
- var c4 = Math.pow(step, 3) - Math.pow(step, 2);
1088
+ let c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1089
+ let c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1090
+ let c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1091
+ let c4 = Math.pow(step, 3) - Math.pow(step, 2);
1139
1092
  // Compute new point with common control vectors
1140
- var x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1141
- var y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1142
- output.push({ time: time, x: x, y: y });
1093
+ let x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1094
+ let y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1095
+ output.push({ time, x, y });
1143
1096
  }
1144
1097
  }
1145
1098
  return output;
1146
1099
  };
1147
- this.distance = function (a, b) {
1148
- var dx = a.x - b.x;
1149
- var dy = a.y - b.y;
1100
+ this.distance = (a, b) => {
1101
+ const dx = a.x - b.x;
1102
+ const dy = a.y - b.y;
1150
1103
  return Math.sqrt(dx * dx + dy * dy);
1151
1104
  };
1152
- this.getPointerStyle = function () {
1153
- if (_this.vnext) {
1154
- return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { ").concat(pointerSvg, " }");
1105
+ this.getPointerStyle = () => {
1106
+ if (this.vnext) {
1107
+ return `.${"clarity-pointer-move" /* Constant.PointerMove */} { ${pointerSvg} }`;
1155
1108
  }
1156
1109
  else {
1157
- return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, "); }");
1110
+ return `.${"clarity-pointer-move" /* Constant.PointerMove */} { background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */}); }`;
1158
1111
  }
1159
1112
  };
1160
- this.getClickLayerStyle = function () {
1161
- if (_this.vnext) {
1113
+ this.getClickLayerStyle = () => {
1114
+ if (this.vnext) {
1162
1115
  return clickStyle;
1163
1116
  }
1164
1117
  else {
1165
- return ".".concat("clarity-click" /* Constant.ClickLayer */, ", .").concat("clarity-click-ring" /* Constant.ClickRing */, ", .").concat("clarity-touch" /* Constant.TouchLayer */, ", .").concat("clarity-touch-ring" /* Constant.TouchRing */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ").concat(22 /* Setting.ClickRadius */, "px; height: ").concat(22 /* Setting.ClickRadius */, "px;}") +
1166
- ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }");
1118
+ return `.${"clarity-click" /* Constant.ClickLayer */}, .${"clarity-click-ring" /* Constant.ClickRing */}, .${"clarity-touch" /* Constant.TouchLayer */}, .${"clarity-touch-ring" /* Constant.TouchRing */} { position: absolute; z-index: ${2147483647 /* Setting.ZIndex */}; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ${22 /* Setting.ClickRadius */}px; height: ${22 /* Setting.ClickRadius */}px;}` +
1119
+ `.${"clarity-click-ring" /* Constant.ClickRing */} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
1167
1120
  }
1168
1121
  };
1169
1122
  this.state = state;
1170
1123
  this.layout = layout;
1171
1124
  this.vnext = vnext;
1172
1125
  }
1173
- InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1174
- InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1175
- return InteractionHelper;
1176
- }());
1126
+ }
1127
+ InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1128
+ InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1177
1129
 
1178
1130
  var sharedStyle = `iframe[data-clarity-unavailable-small], iframe[data-clarity-unavailable], img[data-clarity-blob-hide=sb], img[data-clarity-blob-hide=lb], img[data-clarity-hide=sb], img[data-clarity-hide=lb] {
1179
1131
  background-color: #FBFBFE;
@@ -1266,7 +1218,7 @@ var imageMaskedSvgItalian = `background: url("data:image/svg+xml,%3Csvg width='1
1266
1218
 
1267
1219
  var imageMaskedSvgPortuguese = `background: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='80' fill='%23FBFBFE'/%3E%3Cpath d='M40.2197 10.2197C39.9534 10.4859 39.9292 10.9026 40.1471 11.1962L40.2197 11.2803L44.2542 15.3149C42.3322 16.6644 40.8958 18.6799 40.2989 21.0644C40.1983 21.4662 40.4425 21.8735 40.8443 21.9741C41.2461 22.0746 41.6534 21.8305 41.754 21.4286C42.2835 19.3135 43.5911 17.5395 45.3342 16.3945L47.1438 18.2043C46.4363 18.9258 46 19.9143 46 21.0046C46 23.2138 47.7909 25.0046 50 25.0046C51.0904 25.0046 52.0788 24.5683 52.8004 23.8608L58.7197 29.7803C59.0126 30.0732 59.4874 30.0732 59.7803 29.7803C60.0466 29.5141 60.0708 29.0974 59.8529 28.8038L59.7803 28.7197L53.6668 22.6055L53.668 22.604L52.4679 21.4061L49.598 18.5368L49.6 18.536L46.7188 15.6578L46.72 15.656L45.5867 14.5255L41.2803 10.2197C40.9874 9.92678 40.5126 9.92678 40.2197 10.2197ZM48.2041 19.2655L51.7392 22.8006C51.2892 23.2364 50.6759 23.5046 50 23.5046C48.6193 23.5046 47.5 22.3853 47.5 21.0046C47.5 20.3287 47.7682 19.7154 48.2041 19.2655ZM50 13.5C48.9997 13.5 48.0291 13.6481 47.1111 13.925L48.3481 15.1612C48.8839 15.0553 49.4364 15 50 15C53.9231 15 57.3099 17.6803 58.2471 21.4332C58.3475 21.835 58.7546 22.0794 59.1565 21.9791C59.5584 21.8787 59.8028 21.4716 59.7024 21.0697C58.5994 16.6527 54.6155 13.5 50 13.5ZM50.1947 17.0093L53.996 20.81C53.8942 18.7531 52.2472 17.1076 50.1947 17.0093Z' fill='%23020057'/%3E%3Cpath d='M23.3281 53.1406C22.1367 53.1406 21.1816 52.748 20.4629 51.9629C19.748 51.1777 19.3906 50.1562 19.3906 48.8984C19.3906 47.5469 19.7559 46.4688 20.4863 45.6641C21.2168 44.8594 22.2109 44.457 23.4688 44.457C24.6289 44.457 25.5625 44.8477 26.2695 45.6289C26.9805 46.4102 27.3359 47.4316 27.3359 48.6934C27.3359 50.0645 26.9727 51.1484 26.2461 51.9453C25.5195 52.7422 24.5469 53.1406 23.3281 53.1406ZM23.3984 45.3477C22.5156 45.3477 21.7988 45.666 21.248 46.3027C20.6973 46.9395 20.4219 47.7754 20.4219 48.8105C20.4219 49.8457 20.6895 50.6797 21.2246 51.3125C21.7637 51.9414 22.4648 52.2559 23.3281 52.2559C24.25 52.2559 24.9766 51.9551 25.5078 51.3535C26.0391 50.752 26.3047 49.9102 26.3047 48.8281C26.3047 47.7188 26.0469 46.8613 25.5312 46.2559C25.0156 45.6504 24.3047 45.3477 23.3984 45.3477ZM36.9746 50.2402H32.7383C32.7539 50.9082 32.9336 51.4238 33.2773 51.7871C33.6211 52.1504 34.0938 52.332 34.6953 52.332C35.3711 52.332 35.9922 52.1094 36.5586 51.6641V52.5664C36.0312 52.9492 35.334 53.1406 34.4668 53.1406C33.6191 53.1406 32.9531 52.8691 32.4688 52.3262C31.9844 51.7793 31.7422 51.0117 31.7422 50.0234C31.7422 49.0898 32.0059 48.3301 32.5332 47.7441C33.0645 47.1543 33.7227 46.8594 34.5078 46.8594C35.293 46.8594 35.9004 47.1133 36.3301 47.6211C36.7598 48.1289 36.9746 48.834 36.9746 49.7363V50.2402ZM35.9902 49.4258C35.9863 48.8711 35.8516 48.4395 35.5859 48.1309C35.3242 47.8223 34.959 47.668 34.4902 47.668C34.0371 47.668 33.6523 47.8301 33.3359 48.1543C33.0195 48.4785 32.8242 48.9023 32.75 49.4258H35.9902ZM39.3945 53H38.4336V44.1172H39.3945V53ZM46.1621 50.2402H41.9258C41.9414 50.9082 42.1211 51.4238 42.4648 51.7871C42.8086 52.1504 43.2812 52.332 43.8828 52.332C44.5586 52.332 45.1797 52.1094 45.7461 51.6641V52.5664C45.2188 52.9492 44.5215 53.1406 43.6543 53.1406C42.8066 53.1406 42.1406 52.8691 41.6562 52.3262C41.1719 51.7793 40.9297 51.0117 40.9297 50.0234C40.9297 49.0898 41.1934 48.3301 41.7207 47.7441C42.252 47.1543 42.9102 46.8594 43.6953 46.8594C44.4805 46.8594 45.0879 47.1133 45.5176 47.6211C45.9473 48.1289 46.1621 48.834 46.1621 49.7363V50.2402ZM45.1777 49.4258C45.1738 48.8711 45.0391 48.4395 44.7734 48.1309C44.5117 47.8223 44.1465 47.668 43.6777 47.668C43.2246 47.668 42.8398 47.8301 42.5234 48.1543C42.207 48.4785 42.0117 48.9023 41.9375 49.4258H45.1777ZM56.1406 53H55.1797V49.5547C55.1797 48.8906 55.0762 48.4102 54.8691 48.1133C54.666 47.8164 54.3223 47.668 53.8379 47.668C53.4277 47.668 53.0781 47.8555 52.7891 48.2305C52.5039 48.6055 52.3613 49.0547 52.3613 49.5781V53H51.4004V49.4375C51.4004 48.2578 50.9453 47.668 50.0352 47.668C49.6133 47.668 49.2656 47.8457 48.9922 48.2012C48.7188 48.5527 48.582 49.0117 48.582 49.5781V53H47.6211V47H48.582V47.9492H48.6055C49.0312 47.2227 49.6523 46.8594 50.4688 46.8594C50.8789 46.8594 51.2363 46.9746 51.541 47.2051C51.8457 47.4316 52.0547 47.7305 52.168 48.1016C52.6133 47.2734 53.2773 46.8594 54.1602 46.8594C55.4805 46.8594 56.1406 47.6738 56.1406 49.3027V53ZM62.7793 50.2402H58.543C58.5586 50.9082 58.7383 51.4238 59.082 51.7871C59.4258 52.1504 59.8984 52.332 60.5 52.332C61.1758 52.332 61.7969 52.1094 62.3633 51.6641V52.5664C61.8359 52.9492 61.1387 53.1406 60.2715 53.1406C59.4238 53.1406 58.7578 52.8691 58.2734 52.3262C57.7891 51.7793 57.5469 51.0117 57.5469 50.0234C57.5469 49.0898 57.8105 48.3301 58.3379 47.7441C58.8691 47.1543 59.5273 46.8594 60.3125 46.8594C61.0977 46.8594 61.7051 47.1133 62.1348 47.6211C62.5645 48.1289 62.7793 48.834 62.7793 49.7363V50.2402ZM61.7949 49.4258C61.791 48.8711 61.6562 48.4395 61.3906 48.1309C61.1289 47.8223 60.7637 47.668 60.2949 47.668C59.8418 47.668 59.457 47.8301 59.1406 48.1543C58.8242 48.4785 58.6289 48.9023 58.5547 49.4258H61.7949ZM69.2188 53H68.2578V49.5781C68.2578 48.3047 67.793 47.668 66.8633 47.668C66.3828 47.668 65.9844 47.8496 65.668 48.2129C65.3555 48.5723 65.1992 49.0273 65.1992 49.5781V53H64.2383V47H65.1992V47.9961H65.2227C65.6758 47.2383 66.332 46.8594 67.1914 46.8594C67.8477 46.8594 68.3496 47.0723 68.6973 47.498C69.0449 47.9199 69.2188 48.5312 69.2188 49.332V53ZM73.8184 52.9414C73.5918 53.0664 73.293 53.1289 72.9219 53.1289C71.8711 53.1289 71.3457 52.543 71.3457 51.3711V47.8203H70.3145V47H71.3457V45.5352L72.3066 45.2246V47H73.8184V47.8203H72.3066V51.2012C72.3066 51.6035 72.375 51.8906 72.5117 52.0625C72.6484 52.2344 72.875 52.3203 73.1914 52.3203C73.4336 52.3203 73.6426 52.2539 73.8184 52.1211V52.9414ZM77.6094 53.1406C76.7227 53.1406 76.0137 52.8613 75.4824 52.3027C74.9551 51.7402 74.6914 50.9961 74.6914 50.0703C74.6914 49.0625 74.9668 48.2754 75.5176 47.709C76.0684 47.1426 76.8125 46.8594 77.75 46.8594C78.6445 46.8594 79.3418 47.1348 79.8418 47.6855C80.3457 48.2363 80.5977 49 80.5977 49.9766C80.5977 50.9336 80.3262 51.7012 79.7832 52.2793C79.2441 52.8535 78.5195 53.1406 77.6094 53.1406ZM77.6797 47.668C77.0625 47.668 76.5742 47.8789 76.2148 48.3008C75.8555 48.7188 75.6758 49.2969 75.6758 50.0352C75.6758 50.7461 75.8574 51.3066 76.2207 51.7168C76.584 52.127 77.0703 52.332 77.6797 52.332C78.3008 52.332 78.7773 52.1309 79.1094 51.7285C79.4453 51.3262 79.6133 50.7539 79.6133 50.0117C79.6133 49.2617 79.4453 48.6836 79.1094 48.2773C78.7773 47.8711 78.3008 47.668 77.6797 47.668ZM14.5918 66.2402H10.3555C10.3711 66.9082 10.5508 67.4238 10.8945 67.7871C11.2383 68.1504 11.7109 68.332 12.3125 68.332C12.9883 68.332 13.6094 68.1094 14.1758 67.6641V68.5664C13.6484 68.9492 12.9512 69.1406 12.084 69.1406C11.2363 69.1406 10.5703 68.8691 10.0859 68.3262C9.60156 67.7793 9.35938 67.0117 9.35938 66.0234C9.35938 65.0898 9.62305 64.3301 10.1504 63.7441C10.6816 63.1543 11.3398 62.8594 12.125 62.8594C12.9102 62.8594 13.5176 63.1133 13.9473 63.6211C14.377 64.1289 14.5918 64.834 14.5918 65.7363V66.2402ZM13.6074 65.4258C13.6035 64.8711 13.4688 64.4395 13.2031 64.1309C12.9414 63.8223 12.5762 63.668 12.1074 63.668C11.6543 63.668 11.2695 63.8301 10.9531 64.1543C10.6367 64.4785 10.4414 64.9023 10.3672 65.4258H13.6074ZM15.6875 68.7832V67.752C16.2109 68.1387 16.7871 68.332 17.416 68.332C18.2598 68.332 18.6816 68.0508 18.6816 67.4883C18.6816 67.3281 18.6445 67.1934 18.5703 67.084C18.5 66.9707 18.4023 66.8711 18.2773 66.7852C18.1562 66.6992 18.0117 66.623 17.8438 66.5566C17.6797 66.4863 17.502 66.4141 17.3105 66.3398C17.0449 66.2344 16.8105 66.1289 16.6074 66.0234C16.4082 65.9141 16.2402 65.793 16.1035 65.6602C15.9707 65.5234 15.8691 65.3691 15.7988 65.1973C15.7324 65.0254 15.6992 64.8242 15.6992 64.5938C15.6992 64.3125 15.7637 64.0645 15.8926 63.8496C16.0215 63.6309 16.1934 63.4492 16.4082 63.3047C16.623 63.1562 16.8672 63.0449 17.1406 62.9707C17.418 62.8965 17.7031 62.8594 17.9961 62.8594C18.5156 62.8594 18.9805 62.9492 19.3906 63.1289V64.1016C18.9492 63.8125 18.4414 63.668 17.8672 63.668C17.6875 63.668 17.5254 63.6895 17.3809 63.7324C17.2363 63.7715 17.1113 63.8281 17.0059 63.9023C16.9043 63.9766 16.8242 64.0664 16.7656 64.1719C16.7109 64.2734 16.6836 64.3867 16.6836 64.5117C16.6836 64.668 16.7109 64.7988 16.7656 64.9043C16.8242 65.0098 16.9082 65.1035 17.0176 65.1855C17.127 65.2676 17.2598 65.3418 17.416 65.4082C17.5723 65.4746 17.75 65.5469 17.9492 65.625C18.2148 65.7266 18.4531 65.832 18.6641 65.9414C18.875 66.0469 19.0547 66.168 19.2031 66.3047C19.3516 66.4375 19.4648 66.5918 19.543 66.7676C19.625 66.9434 19.666 67.1523 19.666 67.3945C19.666 67.6914 19.5996 67.9492 19.4668 68.168C19.3379 68.3867 19.1641 68.5684 18.9453 68.7129C18.7266 68.8574 18.4746 68.9648 18.1895 69.0352C17.9043 69.1055 17.6055 69.1406 17.293 69.1406C16.6758 69.1406 16.1406 69.0215 15.6875 68.7832ZM23.9316 68.9414C23.7051 69.0664 23.4062 69.1289 23.0352 69.1289C21.9844 69.1289 21.459 68.543 21.459 67.3711V63.8203H20.4277V63H21.459V61.5352L22.4199 61.2246V63H23.9316V63.8203H22.4199V67.2012C22.4199 67.6035 22.4883 67.8906 22.625 68.0625C22.7617 68.2344 22.9883 68.3203 23.3047 68.3203C23.5469 68.3203 23.7559 68.2539 23.9316 68.1211V68.9414ZM29.5098 69H28.5488V68.0625H28.5254C28.1074 68.7812 27.4922 69.1406 26.6797 69.1406C26.082 69.1406 25.6133 68.9824 25.2734 68.666C24.9375 68.3496 24.7695 67.9297 24.7695 67.4062C24.7695 66.2852 25.4297 65.6328 26.75 65.4492L28.5488 65.1973C28.5488 64.1777 28.1367 63.668 27.3125 63.668C26.5898 63.668 25.9375 63.9141 25.3555 64.4062V63.4219C25.9453 63.0469 26.625 62.8594 27.3945 62.8594C28.8047 62.8594 29.5098 63.6055 29.5098 65.0977V69ZM28.5488 65.9648L27.1016 66.1641C26.6562 66.2266 26.3203 66.3379 26.0938 66.498C25.8672 66.6543 25.7539 66.9336 25.7539 67.3359C25.7539 67.6289 25.8574 67.8691 26.0645 68.0566C26.2754 68.2402 26.5547 68.332 26.9023 68.332C27.3789 68.332 27.7715 68.166 28.0801 67.834C28.3926 67.498 28.5488 67.0742 28.5488 66.5625V65.9648ZM28.6777 59.9414L27.1426 61.8633H26.3984L27.7051 59.9414H28.6777ZM43.1328 69H42.1719V65.5547C42.1719 64.8906 42.0684 64.4102 41.8613 64.1133C41.6582 63.8164 41.3145 63.668 40.8301 63.668C40.4199 63.668 40.0703 63.8555 39.7812 64.2305C39.4961 64.6055 39.3535 65.0547 39.3535 65.5781V69H38.3926V65.4375C38.3926 64.2578 37.9375 63.668 37.0273 63.668C36.6055 63.668 36.2578 63.8457 35.9844 64.2012C35.7109 64.5527 35.5742 65.0117 35.5742 65.5781V69H34.6133V63H35.5742V63.9492H35.5977C36.0234 63.2227 36.6445 62.8594 37.4609 62.8594C37.8711 62.8594 38.2285 62.9746 38.5332 63.2051C38.8379 63.4316 39.0469 63.7305 39.1602 64.1016C39.6055 63.2734 40.2695 62.8594 41.1523 62.8594C42.4727 62.8594 43.1328 63.6738 43.1328 65.3027V69ZM49.2441 69H48.2832V68.0625H48.2598C47.8418 68.7812 47.2266 69.1406 46.4141 69.1406C45.8164 69.1406 45.3477 68.9824 45.0078 68.666C44.6719 68.3496 44.5039 67.9297 44.5039 67.4062C44.5039 66.2852 45.1641 65.6328 46.4844 65.4492L48.2832 65.1973C48.2832 64.1777 47.8711 63.668 47.0469 63.668C46.3242 63.668 45.6719 63.9141 45.0898 64.4062V63.4219C45.6797 63.0469 46.3594 62.8594 47.1289 62.8594C48.5391 62.8594 49.2441 63.6055 49.2441 65.0977V69ZM48.2832 65.9648L46.8359 66.1641C46.3906 66.2266 46.0547 66.3379 45.8281 66.498C45.6016 66.6543 45.4883 66.9336 45.4883 67.3359C45.4883 67.6289 45.5918 67.8691 45.7988 68.0566C46.0098 68.2402 46.2891 68.332 46.6367 68.332C47.1133 68.332 47.5059 68.166 47.8145 67.834C48.127 67.498 48.2832 67.0742 48.2832 66.5625V65.9648ZM50.6914 68.7832V67.752C51.2148 68.1387 51.791 68.332 52.4199 68.332C53.2637 68.332 53.6855 68.0508 53.6855 67.4883C53.6855 67.3281 53.6484 67.1934 53.5742 67.084C53.5039 66.9707 53.4062 66.8711 53.2812 66.7852C53.1602 66.6992 53.0156 66.623 52.8477 66.5566C52.6836 66.4863 52.5059 66.4141 52.3145 66.3398C52.0488 66.2344 51.8145 66.1289 51.6113 66.0234C51.4121 65.9141 51.2441 65.793 51.1074 65.6602C50.9746 65.5234 50.873 65.3691 50.8027 65.1973C50.7363 65.0254 50.7031 64.8242 50.7031 64.5938C50.7031 64.3125 50.7676 64.0645 50.8965 63.8496C51.0254 63.6309 51.1973 63.4492 51.4121 63.3047C51.627 63.1562 51.8711 63.0449 52.1445 62.9707C52.4219 62.8965 52.707 62.8594 53 62.8594C53.5195 62.8594 53.9844 62.9492 54.3945 63.1289V64.1016C53.9531 63.8125 53.4453 63.668 52.8711 63.668C52.6914 63.668 52.5293 63.6895 52.3848 63.7324C52.2402 63.7715 52.1152 63.8281 52.0098 63.9023C51.9082 63.9766 51.8281 64.0664 51.7695 64.1719C51.7148 64.2734 51.6875 64.3867 51.6875 64.5117C51.6875 64.668 51.7148 64.7988 51.7695 64.9043C51.8281 65.0098 51.9121 65.1035 52.0215 65.1855C52.1309 65.2676 52.2637 65.3418 52.4199 65.4082C52.5762 65.4746 52.7539 65.5469 52.9531 65.625C53.2188 65.7266 53.457 65.832 53.668 65.9414C53.8789 66.0469 54.0586 66.168 54.207 66.3047C54.3555 66.4375 54.4688 66.5918 54.5469 66.7676C54.6289 66.9434 54.6699 67.1523 54.6699 67.3945C54.6699 67.6914 54.6035 67.9492 54.4707 68.168C54.3418 68.3867 54.168 68.5684 53.9492 68.7129C53.7305 68.8574 53.4785 68.9648 53.1934 69.0352C52.9082 69.1055 52.6094 69.1406 52.2969 69.1406C51.6797 69.1406 51.1445 69.0215 50.6914 68.7832ZM60.2422 68.7246C59.7812 69.002 59.2344 69.1406 58.6016 69.1406C57.7461 69.1406 57.0547 68.8633 56.5273 68.3086C56.0039 67.75 55.7422 67.0273 55.7422 66.1406C55.7422 65.1523 56.0254 64.3594 56.5918 63.7617C57.1582 63.1602 57.9141 62.8594 58.8594 62.8594C59.3867 62.8594 59.8516 62.957 60.2539 63.1523V64.1367C59.8086 63.8242 59.332 63.668 58.8242 63.668C58.2109 63.668 57.707 63.8887 57.3125 64.3301C56.9219 64.7676 56.7266 65.3438 56.7266 66.0586C56.7266 66.7617 56.9102 67.3164 57.2773 67.7227C57.6484 68.1289 58.1445 68.332 58.7656 68.332C59.2891 68.332 59.7812 68.1582 60.2422 67.8105V68.7246ZM65.9902 69H65.0293V68.0625H65.0059C64.5879 68.7812 63.9727 69.1406 63.1602 69.1406C62.5625 69.1406 62.0938 68.9824 61.7539 68.666C61.418 68.3496 61.25 67.9297 61.25 67.4062C61.25 66.2852 61.9102 65.6328 63.2305 65.4492L65.0293 65.1973C65.0293 64.1777 64.6172 63.668 63.793 63.668C63.0703 63.668 62.418 63.9141 61.8359 64.4062V63.4219C62.4258 63.0469 63.1055 62.8594 63.875 62.8594C65.2852 62.8594 65.9902 63.6055 65.9902 65.0977V69ZM65.0293 65.9648L63.582 66.1641C63.1367 66.2266 62.8008 66.3379 62.5742 66.498C62.3477 66.6543 62.2344 66.9336 62.2344 67.3359C62.2344 67.6289 62.3379 67.8691 62.5449 68.0566C62.7559 68.2402 63.0352 68.332 63.3828 68.332C63.8594 68.332 64.252 68.166 64.5605 67.834C64.873 67.498 65.0293 67.0742 65.0293 66.5625V65.9648ZM70.9297 63.9727C70.7617 63.8438 70.5195 63.7793 70.2031 63.7793C69.793 63.7793 69.4492 63.9727 69.1719 64.3594C68.8984 64.7461 68.7617 65.2734 68.7617 65.9414V69H67.8008V63H68.7617V64.2363H68.7852C68.9219 63.8145 69.1309 63.4863 69.4121 63.252C69.6934 63.0137 70.0078 62.8945 70.3555 62.8945C70.6055 62.8945 70.7969 62.9219 70.9297 62.9766V63.9727ZM76.2676 69H75.3066V68.0625H75.2832C74.8652 68.7812 74.25 69.1406 73.4375 69.1406C72.8398 69.1406 72.3711 68.9824 72.0312 68.666C71.6953 68.3496 71.5273 67.9297 71.5273 67.4062C71.5273 66.2852 72.1875 65.6328 73.5078 65.4492L75.3066 65.1973C75.3066 64.1777 74.8945 63.668 74.0703 63.668C73.3477 63.668 72.6953 63.9141 72.1133 64.4062V63.4219C72.7031 63.0469 73.3828 62.8594 74.1523 62.8594C75.5625 62.8594 76.2676 63.6055 76.2676 65.0977V69ZM75.3066 65.9648L73.8594 66.1641C73.4141 66.2266 73.0781 66.3379 72.8516 66.498C72.625 66.6543 72.5117 66.9336 72.5117 67.3359C72.5117 67.6289 72.6152 67.8691 72.8223 68.0566C73.0332 68.2402 73.3125 68.332 73.6602 68.332C74.1367 68.332 74.5293 68.166 74.8379 67.834C75.1504 67.498 75.3066 67.0742 75.3066 66.5625V65.9648ZM83.1992 69H82.2383V67.9805H82.2148C81.7695 68.7539 81.082 69.1406 80.1523 69.1406C79.3984 69.1406 78.7949 68.873 78.3418 68.3379C77.8926 67.7988 77.668 67.0664 77.668 66.1406C77.668 65.1484 77.918 64.3535 78.418 63.7559C78.918 63.1582 79.584 62.8594 80.416 62.8594C81.2402 62.8594 81.8398 63.1836 82.2148 63.832H82.2383V60.1172H83.1992V69ZM82.2383 66.2871V65.4023C82.2383 64.918 82.0781 64.5078 81.7578 64.1719C81.4375 63.8359 81.0312 63.668 80.5391 63.668C79.9531 63.668 79.4922 63.8828 79.1562 64.3125C78.8203 64.7422 78.6523 65.3359 78.6523 66.0938C78.6523 66.7852 78.8125 67.332 79.1328 67.7344C79.457 68.1328 79.8906 68.332 80.4336 68.332C80.9688 68.332 81.4023 68.1387 81.7344 67.752C82.0703 67.3652 82.2383 66.877 82.2383 66.2871ZM87.6523 69.1406C86.7656 69.1406 86.0566 68.8613 85.5254 68.3027C84.998 67.7402 84.7344 66.9961 84.7344 66.0703C84.7344 65.0625 85.0098 64.2754 85.5605 63.709C86.1113 63.1426 86.8555 62.8594 87.793 62.8594C88.6875 62.8594 89.3848 63.1348 89.8848 63.6855C90.3887 64.2363 90.6406 65 90.6406 65.9766C90.6406 66.9336 90.3691 67.7012 89.8262 68.2793C89.2871 68.8535 88.5625 69.1406 87.6523 69.1406ZM87.7227 63.668C87.1055 63.668 86.6172 63.8789 86.2578 64.3008C85.8984 64.7188 85.7188 65.2969 85.7188 66.0352C85.7188 66.7461 85.9004 67.3066 86.2637 67.7168C86.627 68.127 87.1133 68.332 87.7227 68.332C88.3438 68.332 88.8203 68.1309 89.1523 67.7285C89.4883 67.3262 89.6562 66.7539 89.6562 66.0117C89.6562 65.2617 89.4883 64.6836 89.1523 64.2773C88.8203 63.8711 88.3438 63.668 87.7227 63.668Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
1268
1220
 
1269
- var blobUnavailableSvg = {
1221
+ const blobUnavailableSvg = {
1270
1222
  "de-de": blobUnavailableSvgGerman,
1271
1223
  "en-gb": blobUnavailableSvgEnglish,
1272
1224
  "en-us": blobUnavailableSvgEnglish,
@@ -1282,7 +1234,7 @@ var blobUnavailableSvg = {
1282
1234
  "zh-hans": blobUnavailableSvgChineseSimplified,
1283
1235
  "zh-hant": blobUnavailableSvgChineseTraditional,
1284
1236
  };
1285
- var iframeUnavailableSvg = {
1237
+ const iframeUnavailableSvg = {
1286
1238
  "de-de": iframeUnavailableSvgGerman,
1287
1239
  "en-gb": iframeUnavailableSvgEnglish,
1288
1240
  "en-us": iframeUnavailableSvgEnglish,
@@ -1298,7 +1250,7 @@ var iframeUnavailableSvg = {
1298
1250
  "zh-hans": iframeUnavailableSvgChineseSimplified,
1299
1251
  "zh-hant": iframeUnavailableSvgChineseTraditional,
1300
1252
  };
1301
- var imageMaskedSvg = {
1253
+ const imageMaskedSvg = {
1302
1254
  "de-de": imageMaskedSvgGerman,
1303
1255
  "en-gb": imageMaskedSvgEnglish,
1304
1256
  "en-us": imageMaskedSvgEnglish,
@@ -1315,12 +1267,8 @@ var imageMaskedSvg = {
1315
1267
  "zh-hant": imageMaskedSvgChineseTraditional,
1316
1268
  };
1317
1269
  /* END imageMaskedSvgs */
1318
- var LayoutHelper = /** @class */ (function () {
1319
- function LayoutHelper(state, isMobile, vNext, locale) {
1320
- if (isMobile === void 0) { isMobile = false; }
1321
- if (vNext === void 0) { vNext = false; }
1322
- if (locale === void 0) { locale = 'en-us'; }
1323
- var _this = this;
1270
+ class LayoutHelper {
1271
+ constructor(state, isMobile = false, vNext = false, locale = 'en-us') {
1324
1272
  this.primaryHtmlNodeId = null;
1325
1273
  this.stylesheets = [];
1326
1274
  this.fonts = [];
@@ -1333,42 +1281,42 @@ var LayoutHelper = /** @class */ (function () {
1333
1281
  this.state = null;
1334
1282
  this.stylesToApply = {};
1335
1283
  this.BackgroundImageEligibleElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'ASIDE', 'NAV', 'SPAN', 'P', 'MAIN'];
1336
- this.MaskedBackgroundImageStyle = "#CCC no-repeat center url(\"".concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */, "\")");
1337
- this.reset = function () {
1338
- _this.nodes = {};
1339
- _this.stylesheets = [];
1340
- _this.fonts = [];
1341
- _this.events = {};
1342
- _this.hashMapAlpha = {};
1343
- _this.hashMapBeta = {};
1344
- _this.primaryHtmlNodeId = null;
1345
- };
1346
- this.get = function (hash) {
1347
- if (hash in _this.hashMapBeta && _this.hashMapBeta[hash].isConnected) {
1348
- return _this.hashMapBeta[hash];
1349
- }
1350
- else if (hash in _this.hashMapAlpha && _this.hashMapAlpha[hash].isConnected) {
1351
- return _this.hashMapAlpha[hash];
1284
+ this.MaskedBackgroundImageStyle = `#CCC no-repeat center url("${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */}")`;
1285
+ this.reset = () => {
1286
+ this.nodes = {};
1287
+ this.stylesheets = [];
1288
+ this.fonts = [];
1289
+ this.events = {};
1290
+ this.hashMapAlpha = {};
1291
+ this.hashMapBeta = {};
1292
+ this.primaryHtmlNodeId = null;
1293
+ };
1294
+ this.get = (hash) => {
1295
+ if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
1296
+ return this.hashMapBeta[hash];
1297
+ }
1298
+ else if (hash in this.hashMapAlpha && this.hashMapAlpha[hash].isConnected) {
1299
+ return this.hashMapAlpha[hash];
1352
1300
  }
1353
1301
  return null;
1354
1302
  };
1355
- this.addToHashMap = function (data, parent) {
1303
+ this.addToHashMap = (data, parent) => {
1356
1304
  // In case of selector collision, prefer the first inserted node
1357
- _this.hashMapAlpha[data.hashAlpha] = _this.get(data.hashAlpha) || parent;
1358
- _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
1305
+ this.hashMapAlpha[data.hashAlpha] = this.get(data.hashAlpha) || parent;
1306
+ this.hashMapBeta[data.hashBeta] = this.get(data.hashBeta) || parent;
1359
1307
  };
1360
- this.resize = function (el, width, height) {
1308
+ this.resize = (el, width, height) => {
1361
1309
  if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
1362
1310
  el.style.width = width + "px" /* Layout.Constant.Pixel */;
1363
1311
  el.style.height = height + "px" /* Layout.Constant.Pixel */;
1364
1312
  el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
1365
1313
  }
1366
1314
  };
1367
- this.element = function (nodeId) {
1368
- return nodeId !== null && nodeId > 0 && nodeId in _this.nodes ? _this.nodes[nodeId] : null;
1315
+ this.element = (nodeId) => {
1316
+ return nodeId !== null && nodeId > 0 && nodeId in this.nodes ? this.nodes[nodeId] : null;
1369
1317
  };
1370
- this.animateChange = function (event) {
1371
- var animation = _this.animations[event.data.id];
1318
+ this.animateChange = (event) => {
1319
+ let animation = this.animations[event.data.id];
1372
1320
  if (!animation && event.data.operation !== 0 /* AnimationOperation.Create */) {
1373
1321
  // We didn't have a reference to this animation. This shouldn't happen, but returning here
1374
1322
  // to ensure we don't throw any errors.
@@ -1376,10 +1324,10 @@ var LayoutHelper = /** @class */ (function () {
1376
1324
  }
1377
1325
  switch (event.data.operation) {
1378
1326
  case 0 /* AnimationOperation.Create */:
1379
- var target = _this.element(event.data.targetId);
1327
+ let target = this.element(event.data.targetId);
1380
1328
  // only create the animation if we successfully found the target, an animation without a target will throw an error
1381
1329
  if (target) {
1382
- _this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1330
+ this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1383
1331
  }
1384
1332
  break;
1385
1333
  case 3 /* AnimationOperation.Cancel */:
@@ -1399,39 +1347,32 @@ var LayoutHelper = /** @class */ (function () {
1399
1347
  break;
1400
1348
  }
1401
1349
  };
1402
- this.dom = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
1403
- var doc;
1404
- return __generator(this, function (_a) {
1405
- switch (_a.label) {
1406
- case 0:
1407
- if (!event) return [3 /*break*/, 2];
1408
- doc = this.state.window.document;
1409
- if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
1410
- doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1411
- // Render all DOM events to reconstruct the page
1412
- this.markup(event, useproxy);
1413
- // Wait on all stylesheets and fonts to finish loading
1414
- return [4 /*yield*/, Promise.all(this.stylesheets.concat(this.fonts))];
1415
- case 1:
1416
- // Wait on all stylesheets and fonts to finish loading
1417
- _a.sent();
1418
- // Toggle back the visibility of target window
1419
- doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1420
- _a.label = 2;
1421
- case 2: return [2 /*return*/];
1350
+ this.dom = (event, useproxy) => __awaiter(this, void 0, void 0, function* () {
1351
+ if (event) {
1352
+ // When setting up rendering for the first time, start off with hidden target window
1353
+ // This ensures we do not show flickers to the end user
1354
+ let doc = this.state.window.document;
1355
+ if (doc && doc.documentElement) {
1356
+ doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1357
+ // Render all DOM events to reconstruct the page
1358
+ this.markup(event, useproxy);
1359
+ // Wait on all stylesheets and fonts to finish loading
1360
+ yield Promise.all(this.stylesheets.concat(this.fonts));
1361
+ // Toggle back the visibility of target window
1362
+ doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1422
1363
  }
1423
- });
1424
- }); };
1425
- this.styleChange = function (event) {
1364
+ }
1365
+ });
1366
+ this.styleChange = (event) => {
1426
1367
  switch (event.event) {
1427
1368
  case 46 /* Data.Event.StyleSheetUpdate */:
1428
- var styleSheet = _this.adoptedStyleSheets[event.data.id];
1369
+ let styleSheet = this.adoptedStyleSheets[event.data.id];
1429
1370
  if (!styleSheet && event.data.operation !== 0 /* StyleSheetOperation.Create */) {
1430
1371
  return;
1431
1372
  }
1432
1373
  switch (event.data.operation) {
1433
1374
  case 0 /* StyleSheetOperation.Create */:
1434
- _this.adoptedStyleSheets[event.data.id] = new _this.state.window.CSSStyleSheet();
1375
+ this.adoptedStyleSheets[event.data.id] = new this.state.window.CSSStyleSheet();
1435
1376
  break;
1436
1377
  case 1 /* StyleSheetOperation.Replace */:
1437
1378
  styleSheet.replace(event.data.cssRules);
@@ -1442,63 +1383,63 @@ var LayoutHelper = /** @class */ (function () {
1442
1383
  }
1443
1384
  break;
1444
1385
  case 45 /* Data.Event.StyleSheetAdoption */:
1445
- _this.setDocumentStyles(event.data.id, event.data.newIds);
1386
+ this.setDocumentStyles(event.data.id, event.data.newIds);
1446
1387
  break;
1447
1388
  }
1448
1389
  };
1449
- this.customElement = function (event) {
1450
- var tagName = event.data.name;
1451
- if (!_this.state.window.customElements.get(tagName)) {
1390
+ this.customElement = (event) => {
1391
+ const tagName = event.data.name;
1392
+ if (!this.state.window.customElements.get(tagName)) {
1452
1393
  try {
1453
1394
  // Use eval to create class in target window context (avoids ES5 transpilation issues)
1454
- var EmptyElement = _this.state.window.eval('(class extends HTMLElement { constructor() { super(); } })');
1455
- _this.state.window.customElements.define(tagName, EmptyElement);
1395
+ const EmptyElement = this.state.window.eval('(class extends HTMLElement { constructor() { super(); } })');
1396
+ this.state.window.customElements.define(tagName, EmptyElement);
1456
1397
  }
1457
1398
  catch (e) {
1458
- console.error("Failed to define custom element ".concat(tagName, ":"), e);
1399
+ console.error(`Failed to define custom element ${tagName}:`, e);
1459
1400
  }
1460
1401
  }
1461
1402
  };
1462
- this.exists = function (hash) {
1403
+ this.exists = (hash) => {
1463
1404
  if (hash) {
1464
- var match = _this.get(hash);
1405
+ let match = this.get(hash);
1465
1406
  if (match) {
1466
- var rectangle = match.getBoundingClientRect();
1407
+ let rectangle = match.getBoundingClientRect();
1467
1408
  return rectangle && rectangle.width > 0 && rectangle.height > 0;
1468
1409
  }
1469
1410
  }
1470
1411
  return false;
1471
1412
  };
1472
- this.markup = function (event, useproxy) {
1413
+ this.markup = (event, useproxy) => {
1473
1414
  var _a, _b, _c, _d, _e;
1474
- var data = event.data;
1475
- var type = event.event;
1476
- var doc = _this.state.window.document;
1477
- var retryEvent = {
1415
+ let data = event.data;
1416
+ let type = event.event;
1417
+ let doc = this.state.window.document;
1418
+ let retryEvent = {
1478
1419
  data: [],
1479
1420
  time: event.time,
1480
1421
  event: event.event
1481
1422
  };
1482
- var _loop_1 = function (node) {
1483
- var parent_1 = _this.element(node.parent);
1484
- var pivot = _this.element(node.previous);
1485
- var insert = _this.insertAfter;
1486
- var tag = node.tag;
1423
+ for (let node of data) {
1424
+ let parent = this.element(node.parent);
1425
+ let pivot = this.element(node.previous);
1426
+ let insert = this.insertAfter;
1427
+ let tag = node.tag;
1487
1428
  if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1488
1429
  tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1489
1430
  }
1490
- if (parent_1 === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1431
+ if (parent === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1491
1432
  // We are referencing a parent for this node that hasn't been created yet. Push it to a list of nodes to
1492
1433
  // try once we are finished with other nodes within this event. Though we don't require HTML tags to
1493
1434
  // have a parent as they are typically the root.
1494
1435
  retryEvent.data.push(node);
1495
- return "continue";
1436
+ continue;
1496
1437
  }
1497
1438
  switch (tag) {
1498
1439
  case "*D" /* Layout.Constant.DocumentTag */:
1499
- var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1440
+ let tagDoc = tag !== node.tag ? (parent ? parent.contentDocument : null) : doc;
1500
1441
  if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1501
- _this.reset();
1442
+ this.reset();
1502
1443
  }
1503
1444
  if (typeof XMLSerializer !== "undefined" && tagDoc) {
1504
1445
  tagDoc.open();
@@ -1509,49 +1450,49 @@ var LayoutHelper = /** @class */ (function () {
1509
1450
  case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1510
1451
  // In case of polyfill, map shadow dom to it's parent for rendering purposes
1511
1452
  // All its children should be inserted as regular children to the parent node.
1512
- _this.nodes[node.id] = parent_1;
1513
- _this.addToHashMap(node, parent_1);
1453
+ this.nodes[node.id] = parent;
1454
+ this.addToHashMap(node, parent);
1514
1455
  break;
1515
1456
  case "*S" /* Layout.Constant.ShadowDomTag */:
1516
- if (parent_1) {
1517
- var shadowRoot = _this.element(node.id);
1518
- shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
1519
- _this.nodes[node.id] = shadowRoot;
1520
- _this.addToHashMap(node, shadowRoot);
1521
- _this.addStyles(node.id);
1457
+ if (parent) {
1458
+ let shadowRoot = this.element(node.id);
1459
+ shadowRoot = shadowRoot ? shadowRoot : parent.attachShadow({ mode: "open" });
1460
+ this.nodes[node.id] = shadowRoot;
1461
+ this.addToHashMap(node, shadowRoot);
1462
+ this.addStyles(node.id);
1522
1463
  }
1523
1464
  break;
1524
1465
  case "*T" /* Layout.Constant.TextTag */:
1525
- var textElement = _this.element(node.id);
1466
+ let textElement = this.element(node.id);
1526
1467
  textElement = textElement ? textElement : doc.createTextNode(null);
1527
1468
  textElement.nodeValue = node.value;
1528
- insert(node, parent_1, textElement, pivot);
1469
+ insert(node, parent, textElement, pivot);
1529
1470
  break;
1530
1471
  case "*M" /* Layout.Constant.SuspendMutationTag */:
1531
- var suspendedElement = _this.element(node.id);
1472
+ let suspendedElement = this.element(node.id);
1532
1473
  if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1533
1474
  suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1534
1475
  }
1535
1476
  break;
1536
1477
  case "HTML":
1537
- if (_this.primaryHtmlNodeId === null) {
1538
- _this.primaryHtmlNodeId = node.id;
1478
+ if (this.primaryHtmlNodeId === null) {
1479
+ this.primaryHtmlNodeId = node.id;
1539
1480
  }
1540
- var isIframe = tag !== node.tag;
1481
+ let isIframe = tag !== node.tag;
1541
1482
  // when we see multiple HTML nodes in the same document we should treat subsequent ones as child elements
1542
1483
  // rather than redefining our visualization base on them. It's technically illegal HTML but enough sites have
1543
1484
  // this structure that we are robust against it.
1544
- if (_this.primaryHtmlNodeId !== node.id && !isIframe) {
1545
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1485
+ if (this.primaryHtmlNodeId !== node.id && !isIframe) {
1486
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
1546
1487
  break;
1547
1488
  }
1548
- var htmlDoc = isIframe ? (parent_1 ? parent_1.contentDocument : null) : doc;
1489
+ let htmlDoc = isIframe ? (parent ? parent.contentDocument : null) : doc;
1549
1490
  if (htmlDoc !== null) {
1550
- var docElement = _this.element(node.id);
1491
+ let docElement = this.element(node.id);
1551
1492
  if (docElement === null) {
1552
- var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1493
+ let newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1553
1494
  docElement = newDoc.documentElement;
1554
- var p = htmlDoc.importNode(docElement, true);
1495
+ let p = htmlDoc.importNode(docElement, true);
1555
1496
  htmlDoc.replaceChild(p, htmlDoc.documentElement);
1556
1497
  if (htmlDoc.head) {
1557
1498
  htmlDoc.head.parentNode.removeChild(htmlDoc.head);
@@ -1560,156 +1501,151 @@ var LayoutHelper = /** @class */ (function () {
1560
1501
  htmlDoc.body.parentNode.removeChild(htmlDoc.body);
1561
1502
  }
1562
1503
  }
1563
- _this.setAttributes(htmlDoc.documentElement, node);
1504
+ this.setAttributes(htmlDoc.documentElement, node);
1564
1505
  // If we are still processing discover events, keep the markup hidden until we are done
1565
- if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1506
+ if (type === 5 /* Data.Event.Discover */ && !parent) {
1566
1507
  htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1567
1508
  }
1568
- _this.nodes[node.id] = htmlDoc.documentElement;
1569
- _this.addToHashMap(node, htmlDoc.documentElement);
1509
+ this.nodes[node.id] = htmlDoc.documentElement;
1510
+ this.addToHashMap(node, htmlDoc.documentElement);
1570
1511
  }
1571
1512
  break;
1572
1513
  case "HEAD":
1573
- var headElement = _this.element(node.id);
1514
+ let headElement = this.element(node.id);
1574
1515
  if (headElement === null) {
1575
1516
  headElement = doc.createElement(node.tag);
1576
1517
  if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1577
- var base = doc.createElement("base");
1518
+ let base = doc.createElement("base");
1578
1519
  base.href = node.attributes["*B" /* Layout.Constant.Base */];
1579
1520
  headElement.appendChild(base);
1580
1521
  }
1581
1522
  // Add custom styles to assist with visualization
1582
- var custom = doc.createElement("style");
1523
+ let custom = doc.createElement("style");
1583
1524
  custom.setAttribute("clarity-custom-styles" /* Constant.CustomStyleTag */, "true");
1584
- custom.innerText = _this.getCustomStyle();
1525
+ custom.innerText = this.getCustomStyle();
1585
1526
  headElement.appendChild(custom);
1586
1527
  }
1587
- _this.setAttributes(headElement, node);
1588
- insert(node, parent_1, headElement, pivot);
1528
+ this.setAttributes(headElement, node);
1529
+ insert(node, parent, headElement, pivot);
1589
1530
  break;
1590
1531
  case "LINK":
1591
- var linkElement_1 = _this.element(node.id);
1592
- linkElement_1 = linkElement_1 ? linkElement_1 : _this.createElement(doc, node.tag);
1532
+ let linkElement = this.element(node.id);
1533
+ linkElement = linkElement ? linkElement : this.createElement(doc, node.tag);
1593
1534
  if (!node.attributes) {
1594
1535
  node.attributes = {};
1595
1536
  }
1596
- _this.setAttributes(linkElement_1, node);
1537
+ this.setAttributes(linkElement, node);
1597
1538
  if ("rel" in node.attributes) {
1598
1539
  if (node.attributes["rel"] === "stylesheet" /* Constant.StyleSheet */) {
1599
- _this.stylesheets.push(new Promise(function (resolve) {
1600
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1540
+ this.stylesheets.push(new Promise((resolve) => {
1541
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1601
1542
  if (proxy) {
1602
- if (linkElement_1.integrity) {
1603
- linkElement_1.removeAttribute('integrity');
1543
+ if (linkElement.integrity) {
1544
+ linkElement.removeAttribute('integrity');
1604
1545
  }
1605
- linkElement_1.href = proxy(linkElement_1.href, linkElement_1.id, "stylesheet" /* Constant.StyleSheet */);
1546
+ linkElement.href = proxy(linkElement.href, linkElement.id, "stylesheet" /* Constant.StyleSheet */);
1606
1547
  }
1607
- linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1548
+ linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
1608
1549
  setTimeout(resolve, LayoutHelper.TIMEOUT);
1609
1550
  }));
1610
1551
  }
1611
1552
  else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
1612
1553
  && (((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.as) === "style" || ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.as) === "font")) {
1613
- _this.fonts.push(new Promise(function (resolve) {
1614
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1615
- linkElement_1.href = proxy ? proxy(linkElement_1.href, linkElement_1.id, node.attributes.as) : linkElement_1.href;
1616
- linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1554
+ this.fonts.push(new Promise((resolve) => {
1555
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1556
+ linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
1557
+ linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
1617
1558
  setTimeout(resolve, LayoutHelper.TIMEOUT);
1618
1559
  }));
1619
1560
  }
1620
1561
  }
1621
- insert(node, parent_1, linkElement_1, pivot);
1562
+ insert(node, parent, linkElement, pivot);
1622
1563
  break;
1623
1564
  case "IMG" /* Layout.Constant.ImageTag */:
1624
- var imgElement = (_c = _this.element(node.id)) !== null && _c !== void 0 ? _c : _this.createElement(doc, node.tag);
1625
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1565
+ let imgElement = (_c = this.element(node.id)) !== null && _c !== void 0 ? _c : this.createElement(doc, node.tag);
1566
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1626
1567
  if (proxy && !!((_d = node.attributes) === null || _d === void 0 ? void 0 : _d.src)) {
1627
1568
  node.attributes.src = proxy(node.attributes.src, node.attributes.id, "IMG" /* Layout.Constant.ImageTag */);
1628
1569
  }
1629
- _this.setAttributes(imgElement, node);
1630
- _this.resize(imgElement, node.width, node.height);
1631
- insert(node, parent_1, imgElement, pivot);
1570
+ this.setAttributes(imgElement, node);
1571
+ this.resize(imgElement, node.width, node.height);
1572
+ insert(node, parent, imgElement, pivot);
1632
1573
  break;
1633
1574
  case "STYLE":
1634
- var styleElement = (_e = _this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
1635
- _this.setAttributes(styleElement, node);
1575
+ let styleElement = (_e = this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
1576
+ this.setAttributes(styleElement, node);
1636
1577
  styleElement.textContent = node.value;
1637
- insert(node, parent_1, styleElement, pivot);
1638
- _this.style(styleElement);
1578
+ insert(node, parent, styleElement, pivot);
1579
+ this.style(styleElement);
1639
1580
  break;
1640
1581
  case "IFRAME":
1641
- var iframeElement = _this.element(node.id);
1642
- iframeElement = iframeElement ? iframeElement : _this.createElement(doc, node.tag);
1582
+ let iframeElement = this.element(node.id);
1583
+ iframeElement = iframeElement ? iframeElement : this.createElement(doc, node.tag);
1643
1584
  if (!node.attributes) {
1644
1585
  node.attributes = {};
1645
1586
  }
1646
- _this.setAttributes(iframeElement, node);
1647
- insert(node, parent_1, iframeElement, pivot);
1587
+ this.setAttributes(iframeElement, node);
1588
+ insert(node, parent, iframeElement, pivot);
1648
1589
  break;
1649
1590
  case "SCRIPT":
1650
1591
  {
1651
1592
  node.id = -1; // We want to ensure children of script tags are not processed
1652
1593
  node.value = null; // We don't want to set any potential script content
1653
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1594
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
1654
1595
  break;
1655
1596
  }
1656
1597
  default:
1657
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1598
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
1658
1599
  break;
1659
1600
  }
1660
1601
  // Track state for this node
1661
1602
  if (node.id) {
1662
- _this.events[node.id] = node;
1603
+ this.events[node.id] = node;
1663
1604
  }
1664
- };
1665
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
1666
- var node = data_1[_i];
1667
- _loop_1(node);
1668
1605
  }
1669
1606
  // only retry failed nodes if we are still making positive progress. If we have the same number of
1670
1607
  // nodes we started with, then we would just be spinning on an orphaned subtree.
1671
1608
  if (retryEvent.data.length > 0 && retryEvent.data.length !== event.data.length) {
1672
- _this.markup(retryEvent, useproxy);
1609
+ this.markup(retryEvent, useproxy);
1673
1610
  }
1674
1611
  };
1675
- this.insertDefaultElement = function (node, parent, pivot, doc, insert) {
1676
- var domElement = _this.element(node.id);
1677
- domElement = domElement ? domElement : _this.createElement(doc, node.tag);
1678
- _this.setAttributes(domElement, node);
1679
- _this.resize(domElement, node.width, node.height);
1612
+ this.insertDefaultElement = (node, parent, pivot, doc, insert) => {
1613
+ let domElement = this.element(node.id);
1614
+ domElement = domElement ? domElement : this.createElement(doc, node.tag);
1615
+ this.setAttributes(domElement, node);
1616
+ this.resize(domElement, node.width, node.height);
1680
1617
  insert(node, parent, domElement, pivot);
1681
1618
  };
1682
- this.style = function (node, resolve) {
1683
- if (resolve === void 0) { resolve = null; }
1619
+ this.style = (node, resolve = null) => {
1684
1620
  // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
1685
1621
  try {
1686
- var sheet = node.sheet;
1687
- var cssRules = sheet ? sheet.cssRules : [];
1688
- for (var i = 0; i < cssRules.length; i++) {
1622
+ const sheet = node.sheet;
1623
+ let cssRules = sheet ? sheet.cssRules : [];
1624
+ for (let i = 0; i < cssRules.length; i++) {
1689
1625
  if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
1690
- var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
1626
+ let css = cssRules[i].cssText.replace(/:hover/g, `[${"clarity-hover" /* Constant.CustomHover */}]`);
1691
1627
  sheet.removeRule(i);
1692
1628
  sheet.insertRule(css, i);
1693
1629
  }
1694
1630
  }
1695
1631
  }
1696
1632
  catch (e) {
1697
- if (_this.state.options.logerror) {
1698
- _this.state.options.logerror(e);
1633
+ if (this.state.options.logerror) {
1634
+ this.state.options.logerror(e);
1699
1635
  }
1700
1636
  }
1701
1637
  if (resolve) {
1702
1638
  resolve();
1703
1639
  }
1704
1640
  };
1705
- this.addStyles = function (id) {
1706
- var adoptedStylesToAdd = _this.stylesToApply[id];
1641
+ this.addStyles = (id) => {
1642
+ let adoptedStylesToAdd = this.stylesToApply[id];
1707
1643
  if (adoptedStylesToAdd && adoptedStylesToAdd.length > 0) {
1708
- _this.setDocumentStyles(id, _this.stylesToApply[id]);
1709
- delete _this.stylesToApply[id];
1644
+ this.setDocumentStyles(id, this.stylesToApply[id]);
1645
+ delete this.stylesToApply[id];
1710
1646
  }
1711
1647
  };
1712
- this.createElement = function (doc, tag) {
1648
+ this.createElement = (doc, tag) => {
1713
1649
  if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
1714
1650
  return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
1715
1651
  }
@@ -1718,24 +1654,24 @@ var LayoutHelper = /** @class */ (function () {
1718
1654
  }
1719
1655
  catch (ex) {
1720
1656
  // We log the warning on non-standard markup but continue with the visualization
1721
- console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
1657
+ console.warn(`Exception encountered while creating element ${tag}: ${ex}`);
1722
1658
  return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
1723
1659
  }
1724
1660
  };
1725
- this.insertAfter = function (data, parent, node, previous) {
1661
+ this.insertAfter = (data, parent, node, previous) => {
1726
1662
  // Skip over no-op changes where parent and previous element is still the same
1727
1663
  // In case of IFRAME, re-adding DOM at the exact same place will lead to loss of state and the markup inside will be destroyed
1728
- if (_this.events[data.id] && _this.events[data.id].parent === data.parent && _this.events[data.id].previous === data.previous) {
1664
+ if (this.events[data.id] && this.events[data.id].parent === data.parent && this.events[data.id].previous === data.previous) {
1729
1665
  return;
1730
1666
  }
1731
1667
  // In case parent is a Shadow DOM, previous.parentElement will return null but previous.parentNode will return a valid node
1732
- var next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
1733
- next = previous === null && parent ? _this.firstChild(parent) : next;
1734
- _this.insertBefore(data, parent, node, next);
1668
+ let next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
1669
+ next = previous === null && parent ? this.firstChild(parent) : next;
1670
+ this.insertBefore(data, parent, node, next);
1735
1671
  };
1736
- this.firstChild = function (node) {
1672
+ this.firstChild = (node) => {
1737
1673
  var _a;
1738
- var child = node.firstChild;
1674
+ let child = node.firstChild;
1739
1675
  // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
1740
1676
  if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
1741
1677
  if ((_a = child.nextSibling) === null || _a === void 0 ? void 0 : _a.hasAttribute('clarity-custom-styles')) {
@@ -1747,25 +1683,25 @@ var LayoutHelper = /** @class */ (function () {
1747
1683
  return child;
1748
1684
  };
1749
1685
  // Mask images within a masked ancestor element in the node has a background image.
1750
- this.mask = function (node) {
1686
+ this.mask = (node) => {
1751
1687
  var _a, _b, _c;
1752
- if (node && _this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
1753
- var urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
1754
- var computedStyles = window.getComputedStyle(node);
1755
- var hasBackgroundImage = ((_a = computedStyles.backgroundImage) === null || _a === void 0 ? void 0 : _a.match(urlPattern)) || ((_b = computedStyles.background) === null || _b === void 0 ? void 0 : _b.match(urlPattern));
1756
- var masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, "[".concat("data-clarity-mask" /* LayoutConstants.MaskData */, "]"));
1688
+ if (node && this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
1689
+ const urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
1690
+ const computedStyles = window.getComputedStyle(node);
1691
+ const hasBackgroundImage = ((_a = computedStyles.backgroundImage) === null || _a === void 0 ? void 0 : _a.match(urlPattern)) || ((_b = computedStyles.background) === null || _b === void 0 ? void 0 : _b.match(urlPattern));
1692
+ const masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, `[${"data-clarity-mask" /* LayoutConstants.MaskData */}]`);
1757
1693
  if (hasBackgroundImage && masked) {
1758
- node.style.background = _this.MaskedBackgroundImageStyle;
1694
+ node.style.background = this.MaskedBackgroundImageStyle;
1759
1695
  }
1760
1696
  }
1761
1697
  };
1762
- this.insertBefore = function (data, parent, node, next) {
1698
+ this.insertBefore = (data, parent, node, next) => {
1763
1699
  if (parent !== null) {
1764
1700
  // Compare against both parentNode and parentElement to ensure visualization works correctly for shadow DOMs
1765
1701
  next = next && (next.parentElement !== parent && next.parentNode !== parent) ? null : next;
1766
1702
  try {
1767
1703
  parent.insertBefore(node, next);
1768
- _this.mask(node);
1704
+ this.mask(node);
1769
1705
  }
1770
1706
  catch (ex) {
1771
1707
  console.warn("Node: " + node + " | Parent: " + parent + " | Data: " + JSON.stringify(data));
@@ -1778,34 +1714,34 @@ var LayoutHelper = /** @class */ (function () {
1778
1714
  else if (parent === null && node.parentNode !== null) {
1779
1715
  node.parentNode.removeChild(node);
1780
1716
  }
1781
- _this.nodes[data.id] = node;
1782
- _this.addToHashMap(data, node);
1717
+ this.nodes[data.id] = node;
1718
+ this.addToHashMap(data, node);
1783
1719
  };
1784
- this.setAttributes = function (node, data) {
1785
- var attributes = data.attributes || {};
1786
- var sameorigin = false;
1720
+ this.setAttributes = (node, data) => {
1721
+ let attributes = data.attributes || {};
1722
+ let sameorigin = false;
1787
1723
  // Clarity attributes
1788
- attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
1789
- attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = "".concat(data.hashAlpha);
1790
- attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
1791
- var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1724
+ attributes["data-clarity-id" /* Constant.Id */] = `${data.id}`;
1725
+ attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = `${data.hashAlpha}`;
1726
+ attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = `${data.hashBeta}`;
1727
+ let tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1792
1728
  // First remove all its existing attributes
1793
1729
  if (node.attributes) {
1794
- var length_1 = node.attributes.length;
1795
- while (node.attributes && length_1 > 0) {
1730
+ let length = node.attributes.length;
1731
+ while (node.attributes && length > 0) {
1796
1732
  // Do not remove "clarity-hover" attribute and let it be managed by interaction module
1797
1733
  // This helps avoid flickers during visualization
1798
1734
  if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
1799
1735
  node.removeAttribute(node.attributes[0].name);
1800
1736
  }
1801
- length_1--;
1737
+ length--;
1802
1738
  }
1803
1739
  }
1804
1740
  // Add new attributes
1805
- for (var attribute in attributes) {
1741
+ for (let attribute in attributes) {
1806
1742
  if (attributes[attribute] !== undefined) {
1807
1743
  try {
1808
- var v = attributes[attribute];
1744
+ let v = attributes[attribute];
1809
1745
  if (attribute.indexOf("xlink:") === 0) {
1810
1746
  node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
1811
1747
  }
@@ -1816,30 +1752,30 @@ var LayoutHelper = /** @class */ (function () {
1816
1752
  // Do nothing if we encounter internal Clarity attributes
1817
1753
  }
1818
1754
  else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
1819
- node.setAttribute("data-clarity-".concat(attribute), v);
1755
+ node.setAttribute(`data-clarity-${attribute}`, v);
1820
1756
  }
1821
1757
  else if (tag === "img" /* Constant.ImageTag */ && attribute.indexOf("src") === 0 && ((v === null || v.length === 0 || (v === null || v === void 0 ? void 0 : v.startsWith('blob:'))))) {
1822
- if (_this.vNext) {
1758
+ if (this.vNext) {
1823
1759
  if (v.startsWith('blob:')) {
1824
1760
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
1825
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
1761
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
1826
1762
  }
1827
1763
  else {
1828
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
1764
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
1829
1765
  }
1830
1766
  }
1831
1767
  else {
1832
1768
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
1833
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
1769
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
1834
1770
  }
1835
1771
  else {
1836
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
1772
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
1837
1773
  }
1838
1774
  }
1839
1775
  }
1840
1776
  else {
1841
1777
  node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
1842
- var size = "l" /* Constant.Large */;
1778
+ let size = "l" /* Constant.Large */;
1843
1779
  if (data.width) {
1844
1780
  size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
1845
1781
  }
@@ -1847,7 +1783,7 @@ var LayoutHelper = /** @class */ (function () {
1847
1783
  }
1848
1784
  }
1849
1785
  else {
1850
- node.setAttribute(attribute, _this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
1786
+ node.setAttribute(attribute, this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
1851
1787
  }
1852
1788
  }
1853
1789
  catch (ex) {
@@ -1857,7 +1793,7 @@ var LayoutHelper = /** @class */ (function () {
1857
1793
  }
1858
1794
  }
1859
1795
  if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute === "function" /* Constant.Function */) {
1860
- if (_this.svgFitsText(node)) {
1796
+ if (this.svgFitsText(node)) {
1861
1797
  node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
1862
1798
  }
1863
1799
  else {
@@ -1876,57 +1812,58 @@ var LayoutHelper = /** @class */ (function () {
1876
1812
  node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
1877
1813
  }
1878
1814
  };
1879
- this.getMobileCustomStyle = function () {
1880
- if (_this.isMobile) {
1881
- return "*{scrollbar-width: none; scrollbar-gutter: unset;};";
1815
+ this.getMobileCustomStyle = () => {
1816
+ if (this.isMobile) {
1817
+ return `*{scrollbar-width: none; scrollbar-gutter: unset;};`;
1882
1818
  }
1883
1819
  return '';
1884
1820
  };
1885
- this.getCustomStyle = function () {
1886
- return _this.getImageHiddenCss() +
1887
- _this.getIframeUnavailableCss() +
1888
- _this.getBlobUnavailableCss() +
1889
- _this.getBackgroundCss() +
1890
- "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }") +
1891
- "body { font-size: initial; }\n ".concat(_this.getMobileCustomStyle());
1821
+ this.getCustomStyle = () => {
1822
+ return this.getImageHiddenCss() +
1823
+ this.getIframeUnavailableCss() +
1824
+ this.getBlobUnavailableCss() +
1825
+ this.getBackgroundCss() +
1826
+ `*[${"data-clarity-suspend" /* Constant.Suspend */}] { filter: grayscale(100%); }` +
1827
+ `body { font-size: initial; }
1828
+ ${this.getMobileCustomStyle()}`;
1892
1829
  };
1893
- this.svgFitsText = function (inputElement) {
1830
+ this.svgFitsText = (inputElement) => {
1894
1831
  var dimensions = inputElement.getBoundingClientRect();
1895
1832
  if (dimensions.width >= 132 /* Setting.LargeSvg */ && dimensions.height >= 132 /* Setting.LargeSvg */) {
1896
1833
  return true;
1897
1834
  }
1898
1835
  return false;
1899
1836
  };
1900
- this.getIframeUnavailableCss = function () {
1901
- if (_this.vNext) {
1902
- return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable-small" /* Constant.UnavailableSmall */, "] { ").concat(iframeUnavailableSvgSmall, " }") +
1903
- "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { ").concat(iframeUnavailableSvg[_this.locale], " }");
1837
+ this.getIframeUnavailableCss = () => {
1838
+ if (this.vNext) {
1839
+ return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable-small" /* Constant.UnavailableSmall */}] { ${iframeUnavailableSvgSmall} }` +
1840
+ `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { ${iframeUnavailableSvg[this.locale]} }`;
1904
1841
  }
1905
1842
  else {
1906
- return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { background: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */, ") no-repeat center center, url('").concat("data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */, "'); }");
1843
+ return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { background: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */}) no-repeat center center, url('${"data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */}'); }`;
1907
1844
  }
1908
1845
  };
1909
- this.getBlobUnavailableCss = function () {
1910
- if (_this.vNext) {
1911
- return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvgSmall, " }") +
1912
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvg[_this.locale], " }");
1846
+ this.getBlobUnavailableCss = () => {
1847
+ if (this.vNext) {
1848
+ return `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvgSmall} }` +
1849
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvg[this.locale]} }`;
1913
1850
  }
1914
1851
  return '';
1915
1852
  };
1916
- this.getImageHiddenCss = function () {
1917
- if (_this.vNext) {
1918
- return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvgSmall, " }") +
1919
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvg[_this.locale], " }");
1853
+ this.getImageHiddenCss = () => {
1854
+ if (this.vNext) {
1855
+ return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${imageMaskedSvgSmall} }` +
1856
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${imageMaskedSvg[this.locale]} }`;
1920
1857
  }
1921
1858
  else {
1922
- 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; }") +
1923
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
1924
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
1925
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }");
1859
+ return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}] { background-color: #CCC; background-image: url(${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */}); background-repeat:no-repeat; background-position: center; }` +
1860
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}] { background-size: 18px 18px; }` +
1861
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"m" /* Constant.Medium */}] { background-size: 24px 24px; }` +
1862
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}] { background-size: 36px 36px; }`;
1926
1863
  }
1927
1864
  };
1928
- this.getBackgroundCss = function () {
1929
- if (_this.vNext) {
1865
+ this.getBackgroundCss = () => {
1866
+ if (this.vNext) {
1930
1867
  return sharedStyle;
1931
1868
  }
1932
1869
  return '';
@@ -1936,8 +1873,8 @@ var LayoutHelper = /** @class */ (function () {
1936
1873
  this.vNext = vNext;
1937
1874
  this.locale = locale;
1938
1875
  }
1939
- LayoutHelper.prototype.setDocumentStyles = function (documentId, styleIds) {
1940
- var targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
1876
+ setDocumentStyles(documentId, styleIds) {
1877
+ let targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
1941
1878
  if (!targetDocument) {
1942
1879
  if (!this.stylesToApply[documentId]) {
1943
1880
  this.stylesToApply[documentId] = [];
@@ -1945,65 +1882,54 @@ var LayoutHelper = /** @class */ (function () {
1945
1882
  this.stylesToApply[documentId] = styleIds;
1946
1883
  return;
1947
1884
  }
1948
- var newSheets = [];
1949
- for (var _i = 0, styleIds_1 = styleIds; _i < styleIds_1.length; _i++) {
1950
- var styleId = styleIds_1[_i];
1951
- var styleSheet = this.adoptedStyleSheets[styleId];
1885
+ let newSheets = [];
1886
+ for (var styleId of styleIds) {
1887
+ let styleSheet = this.adoptedStyleSheets[styleId];
1952
1888
  if (styleSheet) {
1953
1889
  newSheets.push(styleSheet);
1954
1890
  }
1955
1891
  }
1956
1892
  targetDocument.adoptedStyleSheets = newSheets;
1957
- };
1958
- LayoutHelper.prototype.isSuspiciousAttribute = function (name, value) {
1893
+ }
1894
+ isSuspiciousAttribute(name, value) {
1959
1895
  // Block event handlers entirely
1960
1896
  if (name.startsWith('on')) {
1961
1897
  return true;
1962
1898
  }
1963
1899
  // Check for JavaScript protocols and dangerous patterns
1964
- var dangerous = [
1900
+ const dangerous = [
1965
1901
  /^\s*javascript:/i,
1966
1902
  /^\s*data:text\/html/i,
1967
1903
  /^\s*vbscript:/i
1968
1904
  ];
1969
- return dangerous.some(function (pattern) { return pattern.test(value); });
1970
- };
1971
- LayoutHelper.TIMEOUT = 3000;
1972
- return LayoutHelper;
1973
- }());
1905
+ return dangerous.some(pattern => pattern.test(value));
1906
+ }
1907
+ }
1908
+ LayoutHelper.TIMEOUT = 7000;
1974
1909
 
1975
- var Visualizer = /** @class */ (function () {
1976
- function Visualizer() {
1977
- var _this = this;
1910
+ class Visualizer {
1911
+ constructor() {
1978
1912
  this._state = null;
1979
1913
  this.renderTime = 0;
1980
1914
  this.hashFoundTime = -1;
1981
- this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
1982
- return __generator(this, function (_a) {
1983
- switch (_a.label) {
1984
- case 0: return [4 /*yield*/, this.layout.dom(event)];
1985
- case 1:
1986
- _a.sent();
1987
- return [2 /*return*/];
1988
- }
1989
- });
1990
- }); };
1991
- this.get = function (hash) {
1915
+ this.dom = (event) => __awaiter(this, void 0, void 0, function* () {
1916
+ yield this.layout.dom(event);
1917
+ });
1918
+ this.get = (hash) => {
1992
1919
  var _a;
1993
- return (_a = _this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
1920
+ return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
1994
1921
  };
1995
- this.shortCircuitRendering = function (strategy, domEvent, hash) {
1922
+ this.shortCircuitRendering = (strategy, domEvent, hash) => {
1996
1923
  switch (strategy) {
1997
1924
  case 1 /* ShortCircuitStrategy.HashFirstTimestamp */:
1998
- return _this.layout.exists(hash);
1925
+ return this.layout.exists(hash);
1999
1926
  case 2 /* ShortCircuitStrategy.HashFirstTimestampPlusBuffer */:
2000
- if (_this.hashFoundTime === -1 && _this.layout.exists(hash)) {
2001
- _this.hashFoundTime = domEvent.time;
1927
+ if (this.hashFoundTime === -1 && this.layout.exists(hash)) {
1928
+ this.hashFoundTime = domEvent.time;
2002
1929
  }
2003
- return (_this.hashFoundTime > -1) && (domEvent.time > _this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
1930
+ return (this.hashFoundTime > -1) && (domEvent.time > this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
2004
1931
  case 3 /* ShortCircuitStrategy.HashBeforeDeleted */:
2005
- for (var _i = 0, _a = domEvent.data; _i < _a.length; _i++) {
2006
- var node = _a[_i];
1932
+ for (let node of domEvent.data) {
2007
1933
  if ((node.hashAlpha === hash || node.hashBeta === hash) && node.parent === null) {
2008
1934
  return true;
2009
1935
  }
@@ -2014,105 +1940,81 @@ var Visualizer = /** @class */ (function () {
2014
1940
  return false;
2015
1941
  }
2016
1942
  };
2017
- this.html = function (decoded, target, hash, useproxy, logerror, shortCircuitStrategy) {
2018
- if (hash === void 0) { hash = null; }
2019
- if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
2020
- return __awaiter(_this, void 0, void 0, function () {
2021
- var merged, entry, _a, domEvent, e_1;
2022
- return __generator(this, function (_b) {
2023
- switch (_b.label) {
2024
- case 0:
2025
- if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
2026
- _b.label = 1;
2027
- case 1:
2028
- _b.trys.push([1, 10, , 11]);
2029
- merged = this.merge(decoded);
2030
- return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy })];
2031
- case 2:
2032
- _b.sent();
2033
- _b.label = 3;
2034
- case 3:
2035
- if (!(merged.events.length > 0)) return [3 /*break*/, 9];
2036
- entry = merged.events.shift();
2037
- _a = entry.event;
2038
- switch (_a) {
2039
- case 45 /* Data.Event.StyleSheetAdoption */: return [3 /*break*/, 4];
2040
- case 46 /* Data.Event.StyleSheetUpdate */: return [3 /*break*/, 4];
2041
- case 51 /* Data.Event.CustomElement */: return [3 /*break*/, 5];
2042
- case 6 /* Data.Event.Mutation */: return [3 /*break*/, 6];
2043
- }
2044
- return [3 /*break*/, 8];
2045
- case 4:
2046
- this.layout.styleChange(entry);
2047
- return [3 /*break*/, 8];
2048
- case 5:
2049
- this.layout.customElement(entry);
2050
- return [3 /*break*/, 8];
2051
- case 6:
2052
- domEvent = entry;
2053
- this.renderTime = domEvent.time;
2054
- if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
2055
- return [3 /*break*/, 8];
2056
- }
2057
- return [4 /*yield*/, this.layout.markup(domEvent, useproxy)];
2058
- case 7:
2059
- _b.sent();
2060
- return [3 /*break*/, 8];
2061
- case 8: return [3 /*break*/, 3];
2062
- case 9: return [3 /*break*/, 11];
2063
- case 10:
2064
- e_1 = _b.sent();
2065
- if (logerror) {
2066
- logerror(e_1);
2067
- }
2068
- return [3 /*break*/, 11];
2069
- case 11: return [2 /*return*/, this];
1943
+ this.html = (decoded, target, hash = null, useproxy, logerror, shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */) => __awaiter(this, void 0, void 0, function* () {
1944
+ if (decoded && decoded.length > 0 && target) {
1945
+ try {
1946
+ // Flatten the payload and parse all events out of them, sorted by time
1947
+ let merged = this.merge(decoded);
1948
+ yield this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy });
1949
+ // Render all mutations on top of the initial markup
1950
+ while (merged.events.length > 0) {
1951
+ let entry = merged.events.shift();
1952
+ switch (entry.event) {
1953
+ case 45 /* Data.Event.StyleSheetAdoption */:
1954
+ case 46 /* Data.Event.StyleSheetUpdate */:
1955
+ this.layout.styleChange(entry);
1956
+ break;
1957
+ case 51 /* Data.Event.CustomElement */:
1958
+ this.layout.customElement(entry);
1959
+ break;
1960
+ case 6 /* Data.Event.Mutation */:
1961
+ let domEvent = entry;
1962
+ this.renderTime = domEvent.time;
1963
+ if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
1964
+ break;
1965
+ }
1966
+ yield this.layout.markup(domEvent, useproxy);
1967
+ break;
1968
+ }
2070
1969
  }
2071
- });
2072
- });
2073
- };
2074
- this.time = function () {
2075
- return _this.renderTime;
1970
+ }
1971
+ catch (e) {
1972
+ if (logerror) {
1973
+ logerror(e);
1974
+ }
1975
+ }
1976
+ }
1977
+ return this;
1978
+ });
1979
+ this.time = () => {
1980
+ return this.renderTime;
2076
1981
  };
2077
- this.clickmap = function (activity) {
2078
- if (_this.state === null) {
2079
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1982
+ this.clickmap = (activity) => {
1983
+ if (this.state === null) {
1984
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2080
1985
  }
2081
- _this.heatmap.click(activity);
1986
+ this.heatmap.click(activity);
2082
1987
  };
2083
- this.clearmap = function () {
2084
- if (_this.state === null) {
2085
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1988
+ this.clearmap = () => {
1989
+ if (this.state === null) {
1990
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2086
1991
  }
2087
- _this.heatmap.clear();
1992
+ this.heatmap.clear();
2088
1993
  };
2089
- this.scrollmap = function (scrollData, avgFold, addMarkers) {
2090
- if (_this.state === null) {
2091
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1994
+ this.scrollmap = (scrollData, avgFold, addMarkers) => {
1995
+ if (this.state === null) {
1996
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2092
1997
  }
2093
- _this.heatmap.scroll(scrollData, avgFold, addMarkers);
1998
+ this.heatmap.scroll(scrollData, avgFold, addMarkers);
2094
1999
  };
2095
- this.merge = function (decoded) {
2096
- var merged = { timestamp: null, envelope: null, dom: null, events: [] };
2000
+ this.merge = (decoded) => {
2001
+ let merged = { timestamp: null, envelope: null, dom: null, events: [] };
2097
2002
  // Re-arrange decoded payloads in the order of their start time
2098
- decoded = decoded.sort(_this.sortPayloads);
2003
+ decoded = decoded.sort(this.sortPayloads);
2099
2004
  // Re-initialize enrich class if someone ends up calling merge function directly
2100
- _this.enrich = _this.enrich || new EnrichHelper();
2101
- _this.enrich.reset();
2005
+ this.enrich = this.enrich || new EnrichHelper();
2006
+ this.enrich.reset();
2102
2007
  // Walk through payloads and generate merged payload from an array of decoded payloads
2103
- for (var _i = 0, decoded_1 = decoded; _i < decoded_1.length; _i++) {
2104
- var payload = decoded_1[_i];
2008
+ for (let payload of decoded) {
2105
2009
  merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
2106
2010
  merged.envelope = payload.envelope;
2107
- for (var _a = 0, _b = Object.keys(payload); _a < _b.length; _a++) {
2108
- var key = _b[_a];
2109
- var p = payload[key];
2011
+ for (let key of Object.keys(payload)) {
2012
+ let p = payload[key];
2110
2013
  if (Array.isArray(p)) {
2111
- for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
2112
- var entry = p_1[_c];
2014
+ for (let entry of p) {
2113
2015
  switch (key) {
2114
2016
  case "dom" /* Constant.Dom */:
2115
- var dom = _this.enrich.selectors(entry);
2017
+ let dom = this.enrich.selectors(entry);
2116
2018
  if (entry.event === 5 /* Data.Event.Discover */) {
2117
2019
  merged.dom = dom;
2118
2020
  }
@@ -2128,61 +2030,54 @@ var Visualizer = /** @class */ (function () {
2128
2030
  }
2129
2031
  }
2130
2032
  }
2131
- merged.events = merged.events.sort(_this.sortEvents);
2033
+ merged.events = merged.events.sort(this.sortEvents);
2132
2034
  return merged;
2133
2035
  };
2134
- this.setup = function (target, options) { return __awaiter(_this, void 0, void 0, function () {
2135
- return __generator(this, function (_a) {
2136
- switch (_a.label) {
2137
- case 0:
2138
- this.reset();
2139
- // Infer options
2140
- options.pointer = "pointer" in options ? options.pointer : true;
2141
- options.canvas = "canvas" in options ? options.canvas : true;
2142
- options.keyframes = "keyframes" in options ? options.keyframes : false;
2143
- // Set visualization state
2144
- this._state = { window: target, options: options };
2145
- // Initialize helpers
2146
- this.enrich = new EnrichHelper();
2147
- this.data = new DataHelper(this.state);
2148
- this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2149
- this.heatmap = new HeatmapHelper(this.state, this.layout);
2150
- this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2151
- if (!options.dom) return [3 /*break*/, 2];
2152
- return [4 /*yield*/, this.layout.dom(options.dom, options.useproxy)];
2153
- case 1:
2154
- _a.sent();
2155
- _a.label = 2;
2156
- case 2: return [2 /*return*/, this];
2157
- }
2158
- });
2159
- }); };
2160
- this.render = function (events) {
2036
+ this.setup = (target, options) => __awaiter(this, void 0, void 0, function* () {
2037
+ this.reset();
2038
+ // Infer options
2039
+ options.pointer = "pointer" in options ? options.pointer : true;
2040
+ options.canvas = "canvas" in options ? options.canvas : true;
2041
+ options.keyframes = "keyframes" in options ? options.keyframes : false;
2042
+ // Set visualization state
2043
+ this._state = { window: target, options };
2044
+ // Initialize helpers
2045
+ this.enrich = new EnrichHelper();
2046
+ this.data = new DataHelper(this.state);
2047
+ this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2048
+ this.heatmap = new HeatmapHelper(this.state, this.layout);
2049
+ this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2050
+ // If discover event was passed, render it now
2051
+ if (options.dom) {
2052
+ yield this.layout.dom(options.dom, options.useproxy);
2053
+ }
2054
+ return this;
2055
+ });
2056
+ this.render = (events) => {
2161
2057
  var _a, _b;
2162
- if (_this.state === null) {
2163
- throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
2058
+ if (this.state === null) {
2059
+ throw new Error(`Initialize visualization by calling "setup" prior to making this call.`);
2164
2060
  }
2165
- var time = 0;
2166
- for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
2167
- var entry = events_1[_i];
2061
+ let time = 0;
2062
+ for (const entry of events) {
2168
2063
  try {
2169
2064
  time = entry.time;
2170
- _this.interaction.clearOldClickVisualizations(time);
2065
+ this.interaction.clearOldClickVisualizations(time);
2171
2066
  switch (entry.event) {
2172
2067
  case 0 /* Data.Event.Metric */:
2173
- _this.data.metric(entry);
2068
+ this.data.metric(entry);
2174
2069
  break;
2175
2070
  case 1 /* Data.Event.Dimension */:
2176
2071
  if (entry.data[37 /* Dimension.InteractionNextPaint */]) {
2177
- _this.data.metric(entry);
2072
+ this.data.metric(entry);
2178
2073
  }
2179
2074
  break;
2180
2075
  case 7 /* Data.Event.Region */:
2181
- _this.data.region(entry);
2076
+ this.data.region(entry);
2182
2077
  break;
2183
2078
  case 6 /* Data.Event.Mutation */:
2184
2079
  case 43 /* Data.Event.Snapshot */:
2185
- _this.layout.markup(entry);
2080
+ this.layout.markup(entry);
2186
2081
  break;
2187
2082
  case 13 /* Data.Event.MouseDown */:
2188
2083
  case 14 /* Data.Event.MouseUp */:
@@ -2194,73 +2089,67 @@ var Visualizer = /** @class */ (function () {
2194
2089
  case 20 /* Data.Event.TouchCancel */:
2195
2090
  case 18 /* Data.Event.TouchEnd */:
2196
2091
  case 19 /* Data.Event.TouchMove */:
2197
- _this.interaction.pointer(entry);
2092
+ this.interaction.pointer(entry);
2198
2093
  break;
2199
2094
  case 28 /* Data.Event.Visibility */:
2200
- _this.interaction.visibility(entry);
2095
+ this.interaction.visibility(entry);
2201
2096
  break;
2202
2097
  case 27 /* Data.Event.Input */:
2203
- _this.interaction.input(entry);
2098
+ this.interaction.input(entry);
2204
2099
  break;
2205
2100
  case 21 /* Data.Event.Selection */:
2206
- _this.interaction.selection(entry);
2101
+ this.interaction.selection(entry);
2207
2102
  break;
2208
2103
  case 11 /* Data.Event.Resize */:
2209
- _this.interaction.resize(entry);
2104
+ this.interaction.resize(entry);
2210
2105
  break;
2211
2106
  case 10 /* Data.Event.Scroll */:
2212
- _this.interaction.scroll(entry);
2107
+ this.interaction.scroll(entry);
2213
2108
  break;
2214
2109
  case 45 /* Data.Event.StyleSheetAdoption */:
2215
2110
  case 46 /* Data.Event.StyleSheetUpdate */:
2216
- _this.layout.styleChange(entry);
2111
+ this.layout.styleChange(entry);
2217
2112
  break;
2218
2113
  case 44 /* Data.Event.Animation */:
2219
- _this.layout.animateChange(entry);
2114
+ this.layout.animateChange(entry);
2220
2115
  break;
2221
2116
  case 51 /* Data.Event.CustomElement */:
2222
- _this.layout.customElement(entry);
2117
+ this.layout.customElement(entry);
2223
2118
  break;
2224
2119
  }
2225
2120
  }
2226
2121
  catch (e) {
2227
- (_b = (_a = _this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
2122
+ (_b = (_a = this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
2228
2123
  }
2229
2124
  }
2230
2125
  if (events.length > 0) {
2231
2126
  // Update pointer trail at the end of every frame
2232
- _this.interaction.trail(time);
2127
+ this.interaction.trail(time);
2233
2128
  }
2234
2129
  };
2235
- this.reset = function () {
2130
+ this.reset = () => {
2236
2131
  var _a, _b, _c, _d, _e;
2237
- (_a = _this.data) === null || _a === void 0 ? void 0 : _a.reset();
2238
- (_b = _this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2239
- (_c = _this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2240
- (_d = _this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2241
- (_e = _this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2242
- _this._state = null;
2243
- _this.renderTime = 0;
2244
- };
2245
- this.sortEvents = function (a, b) {
2132
+ (_a = this.data) === null || _a === void 0 ? void 0 : _a.reset();
2133
+ (_b = this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2134
+ (_c = this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2135
+ (_d = this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2136
+ (_e = this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2137
+ this._state = null;
2138
+ this.renderTime = 0;
2139
+ };
2140
+ this.sortEvents = (a, b) => {
2246
2141
  return a.time - b.time;
2247
2142
  };
2248
- this.sortPayloads = function (a, b) {
2143
+ this.sortPayloads = (a, b) => {
2249
2144
  return a.envelope.sequence - b.envelope.sequence;
2250
2145
  };
2251
2146
  }
2252
- Object.defineProperty(Visualizer.prototype, "state", {
2253
- get: function () {
2254
- return this._state;
2255
- },
2256
- enumerable: false,
2257
- configurable: true
2258
- });
2259
- return Visualizer;
2260
- }());
2147
+ get state() {
2148
+ return this._state;
2149
+ }
2150
+ }
2261
2151
 
2262
- var _a;
2263
- 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;
2152
+ const { state, dom, get, html, time, clickmap, clearmap, scrollmap, merge, setup, render } = new Visualizer();
2264
2153
 
2265
2154
  var clarity = /*#__PURE__*/Object.freeze({
2266
2155
  __proto__: null,