@gemx-dev/clarity-visualize 0.8.67 → 0.8.68

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 +886 -1021
  2. package/build/clarity.visualize.min.js +1 -1
  3. package/build/clarity.visualize.module.js +886 -1021
  4. package/package.json +2 -2
  5. package/src/layout.ts +12 -3
  6. package/tsconfig.json +1 -0
package/build/clarity.visualize.js CHANGED
@@ -16,20 +16,6 @@ PERFORMANCE OF THIS SOFTWARE.
16
16
  ***************************************************************************** */
17
17
  /* global Reflect, Promise */
18
18
 
19
- var extendStatics = function(d, b) {
20
- extendStatics = Object.setPrototypeOf ||
21
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
22
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
23
- return extendStatics(d, b);
24
- };
25
-
26
- function __extends(d, b) {
27
- if (typeof b !== "function" && b !== null)
28
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
29
- extendStatics(d, b);
30
- function __() { this.constructor = d; }
31
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
32
- }
33
19
 
34
20
  function __awaiter(thisArg, _arguments, P, generator) {
35
21
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -39,34 +25,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
39
25
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
40
26
  step((generator = generator.apply(thisArg, _arguments || [])).next());
41
27
  });
42
- }
43
-
44
- function __generator(thisArg, body) {
45
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
46
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
47
- function verb(n) { return function (v) { return step([n, v]); }; }
48
- function step(op) {
49
- if (f) throw new TypeError("Generator is already executing.");
50
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
51
- 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;
52
- if (y = 0, t) op = [op[0] & 2, t.value];
53
- switch (op[0]) {
54
- case 0: case 1: t = op; break;
55
- case 4: _.label++; return { value: op[1], done: false };
56
- case 5: _.label++; y = op[1]; op = [0]; continue;
57
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
58
- default:
59
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
60
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
61
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
62
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
63
- if (t[2]) _.ops.pop();
64
- _.trys.pop(); continue;
65
- }
66
- op = body.call(thisArg, _);
67
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
68
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
69
- }
70
28
  }
71
29
 
72
30
  // tslint:disable: no-bitwise
@@ -99,8 +57,10 @@ function __spreadArray(to, from, pack) {
99
57
  }
100
58
  return to.concat(ar || Array.prototype.slice.call(from));
101
59
  }
60
+ // Pre-computed exclude class names (replaces Constant.ExcludeClassNames.split())
61
+ var ExcludeClassNamesList = ["load", "active", "fixed", "visible", "focus", "show", "collaps", "animat"];
102
62
 
103
- var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
63
+ var excludeClassNames = ExcludeClassNamesList;
104
64
  var extraExcludeClassNames = [];
105
65
  var selectorMap = {};
106
66
  function reset$8() {
@@ -241,61 +201,59 @@ function lookup(hash) {
241
201
 
242
202
  var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
243
203
 
244
- var _a$1;
245
- var DataHelper = /** @class */ (function () {
246
- function DataHelper(state) {
247
- var _this = this;
204
+ class DataHelper {
205
+ constructor(state) {
248
206
  this.regionMap = {};
249
207
  this.regions = {};
250
208
  this.metrics = {};
251
209
  this.lean = false;
252
- this.reset = function () {
253
- _this.metrics = {};
254
- _this.lean = false;
255
- _this.regions = {};
256
- _this.regionMap = {};
210
+ this.reset = () => {
211
+ this.metrics = {};
212
+ this.lean = false;
213
+ this.regions = {};
214
+ this.regionMap = {};
257
215
  };
258
- this.metric = function (event) {
216
+ this.metric = (event) => {
259
217
  var _a;
260
- if (_this.state.options.metadata) {
261
- var metricMarkup = [];
262
- var regionMarkup = [];
218
+ if (this.state.options.metadata) {
219
+ let metricMarkup = [];
220
+ let regionMarkup = [];
263
221
  // Copy over metrics for future reference
264
- for (var m in event.data) {
265
- var eventType = typeof event.data[m];
222
+ for (let m in event.data) {
223
+ const eventType = typeof event.data[m];
266
224
  if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
267
- if (!(m in _this.metrics)) {
268
- _this.metrics[m] = 0;
225
+ if (!(m in this.metrics)) {
226
+ this.metrics[m] = 0;
269
227
  }
270
- var key = parseInt(m, 10);
271
- var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
228
+ let key = parseInt(m, 10);
229
+ let value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
272
230
  if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
273
- _this.metrics[m] = value;
231
+ this.metrics[m] = value;
274
232
  }
275
233
  else {
276
- _this.metrics[m] += value;
234
+ this.metrics[m] += value;
277
235
  }
278
- _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
236
+ this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : this.lean;
279
237
  }
280
238
  }
281
- for (var entry in _this.metrics) {
239
+ for (let entry in this.metrics) {
282
240
  if (entry in DataHelper.METRIC_MAP) {
283
- var m = _this.metrics[entry];
284
- var map = DataHelper.METRIC_MAP[entry];
285
- var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
286
- metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
241
+ let m = this.metrics[entry];
242
+ let map = DataHelper.METRIC_MAP[entry];
243
+ let unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
244
+ metricMarkup.push(`<li><h2>${this.value(m, unit)}<span>${this.key(unit)}</span></h2>${map.name}</li>`);
287
245
  }
288
246
  }
289
247
  // Append region information to metadata
290
- for (var name_1 in _this.regions) {
291
- var r = _this.regions[name_1];
292
- var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
293
- regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
248
+ for (let name in this.regions) {
249
+ let r = this.regions[name];
250
+ let className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
251
+ regionMarkup.push(`<span class="${className}">${name}</span>`);
294
252
  }
295
- _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
253
+ this.state.options.metadata.innerHTML = `<ul>${metricMarkup.join("" /* Data.Constant.Empty */)}</ul><div>${regionMarkup.join("" /* Data.Constant.Empty */)}</div>`;
296
254
  }
297
255
  };
298
- this.key = function (unit) {
256
+ this.key = (unit) => {
299
257
  switch (unit) {
300
258
  case "html-price":
301
259
  case "ld-price":
@@ -304,7 +262,7 @@ var DataHelper = /** @class */ (function () {
304
262
  default: return unit;
305
263
  }
306
264
  };
307
- this.value = function (num, unit) {
265
+ this.value = (num, unit) => {
308
266
  switch (unit) {
309
267
  case "KB": return Math.round(num / 1024);
310
268
  case "s": return Math.round(num / 10) / 100;
@@ -315,55 +273,52 @@ var DataHelper = /** @class */ (function () {
315
273
  };
316
274
  this.state = state;
317
275
  }
318
- DataHelper.prototype.region = function (event) {
319
- var data = event.data;
320
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
321
- var r = data_1[_i];
276
+ region(event) {
277
+ let data = event.data;
278
+ for (let r of data) {
322
279
  if (!(r.name in this.regions)) {
323
280
  this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
324
281
  }
325
282
  this.regionMap[r.id] = r.name;
326
283
  }
327
- };
328
- DataHelper.METRIC_MAP = (_a$1 = {},
329
- _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
330
- _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
331
- _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
332
- _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
333
- _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
334
- _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
335
- _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
336
- _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
337
- _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
338
- _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
339
- _a$1);
340
- return DataHelper;
341
- }());
342
-
343
- var EnrichHelper = /** @class */ (function () {
344
- function EnrichHelper() {
345
- var _this = this;
346
- this.reset = function () {
347
- _this.children = {};
348
- _this.nodes = {};
284
+ }
285
+ }
286
+ DataHelper.METRIC_MAP = {
287
+ [2 /* Data.Metric.TotalBytes */]: { name: "Total Bytes", unit: "KB" },
288
+ [4 /* Data.Metric.TotalCost */]: { name: "Total Cost", unit: "ms" },
289
+ [3 /* Data.Metric.LayoutCost */]: { name: "Layout Cost", unit: "ms" },
290
+ [8 /* Data.Metric.LargestPaint */]: { name: "LCP", unit: "s" },
291
+ [9 /* Data.Metric.CumulativeLayoutShift */]: { name: "CLS", unit: "cls" },
292
+ [7 /* Data.Metric.LongTaskCount */]: { name: "Long Tasks" },
293
+ [24 /* Data.Metric.CartTotal */]: { name: "Cart Total", unit: "html-price" },
294
+ [13 /* Data.Metric.ProductPrice */]: { name: "Product Price", unit: "ld-price" },
295
+ [6 /* Data.Metric.ThreadBlockedTime */]: { name: "Thread Blocked", unit: "ms" },
296
+ [37 /* Data.Dimension.InteractionNextPaint */]: { name: "INP", unit: "ms" }
297
+ };
298
+
299
+ class EnrichHelper {
300
+ constructor() {
301
+ this.reset = () => {
302
+ this.children = {};
303
+ this.nodes = {};
349
304
  helper.selector.reset();
350
305
  };
351
- this.selectors = function (event) {
352
- event.data.forEach && event.data.forEach(function (d) {
353
- var parent = _this.nodes[d.parent];
354
- var children = _this.children[d.parent] || [];
355
- var node = _this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
356
- var attributes = d.attributes || {};
306
+ this.selectors = (event) => {
307
+ event.data.forEach && event.data.forEach(d => {
308
+ let parent = this.nodes[d.parent];
309
+ let children = this.children[d.parent] || [];
310
+ let node = this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
311
+ let attributes = d.attributes || {};
357
312
  /* Track parent-child relationship for this element */
358
313
  if (node.parent !== d.parent) {
359
- var childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
314
+ let childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
360
315
  children.splice(childIndex, 0, d.id);
361
316
  // Stop tracking this node from children of previous parent
362
317
  if (node.parent !== d.parent) {
363
- var exParent = _this.children[node.parent];
364
- var nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
318
+ let exParent = this.children[node.parent];
319
+ let nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
365
320
  if (nodeIndex >= 0) {
366
- _this.children[node.parent].splice(nodeIndex, 1);
321
+ this.children[node.parent].splice(nodeIndex, 1);
367
322
  }
368
323
  }
369
324
  node.parent = d.parent;
@@ -372,31 +327,31 @@ var EnrichHelper = /** @class */ (function () {
372
327
  children.push(d.id);
373
328
  }
374
329
  /* Get current position */
375
- node.position = _this.position(d.id, d.tag, node, children, children.map(function (c) { return _this.nodes[c]; }));
330
+ node.position = this.position(d.id, d.tag, node, children, children.map(c => this.nodes[c]));
376
331
  /* For backward compatibility, continue populating current selector and hash like before in addition to beta selector and hash */
377
- var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
332
+ let input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes };
378
333
  // Get stable selector
379
334
  // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
380
- var selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
335
+ let selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
381
336
  d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
382
337
  d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
383
338
  // Get beta selector
384
- var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
339
+ let selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
385
340
  d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
386
341
  d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
387
342
  /* Track state for future reference */
388
343
  node.alpha = selectorAlpha;
389
344
  node.beta = selectorBeta;
390
- _this.nodes[d.id] = node;
345
+ this.nodes[d.id] = node;
391
346
  if (d.parent) {
392
- _this.children[d.parent] = children;
347
+ this.children[d.parent] = children;
393
348
  }
394
349
  });
395
350
  return event;
396
351
  };
397
- this.position = function (id, tag, child, children, siblings) {
352
+ this.position = (id, tag, child, children, siblings) => {
398
353
  child.position = 1;
399
- var idx = children ? children.indexOf(id) : -1;
354
+ let idx = children ? children.indexOf(id) : -1;
400
355
  while (idx-- > 0) {
401
356
  if (tag === siblings[idx].tag) {
402
357
  child.position = siblings[idx].position + 1;
@@ -407,8 +362,7 @@ var EnrichHelper = /** @class */ (function () {
407
362
  };
408
363
  this.reset();
409
364
  }
410
- return EnrichHelper;
411
- }());
365
+ }
412
366
 
413
367
  /**
414
368
  * Creates a canvas as sibling to the iframe (same parent container)
@@ -425,31 +379,31 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
425
379
  throw new Error('Not in iframe: ' + iframeDoc.defaultView);
426
380
  }
427
381
  try {
428
- var parentWindow = (_b = iframeDoc.defaultView) === null || _b === void 0 ? void 0 : _b.parent;
429
- var parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
382
+ const parentWindow = (_b = iframeDoc.defaultView) === null || _b === void 0 ? void 0 : _b.parent;
383
+ const parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
430
384
  if (!parentDoc)
431
385
  throw new Error('Parent document not found');
432
- var iframeId = "clarity-iframe-".concat(portalCanvasId);
433
- var iframe = parentDoc.getElementById(iframeId);
386
+ const iframeId = `clarity-iframe-${portalCanvasId}`;
387
+ const iframe = parentDoc.getElementById(iframeId);
434
388
  if (!iframe)
435
389
  throw new Error('Iframe not found');
436
- var targetIframe = iframe;
437
- var iframeParent = targetIframe.parentElement;
390
+ const targetIframe = iframe;
391
+ const iframeParent = targetIframe.parentElement;
438
392
  if (!iframeParent)
439
393
  throw new Error('Iframe parent not found');
440
394
  // Create canvas as sibling to iframe
441
- var canvasId = "".concat("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */, "-").concat(portalCanvasId);
442
- var canvas_1 = parentDoc.getElementById(canvasId);
443
- if (canvas_1 === null) {
444
- canvas_1 = parentDoc.createElement('canvas');
445
- canvas_1.id = canvasId;
446
- canvas_1.classList.add("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
447
- canvas_1.width = 0;
448
- canvas_1.height = 0;
449
- canvas_1.style.position = "absolute" /* Constant.Absolute */;
395
+ const canvasId = `${"clarity-heatmap-canvas" /* Constant.HeatmapCanvas */}-${portalCanvasId}`;
396
+ let canvas = parentDoc.getElementById(canvasId);
397
+ if (canvas === null) {
398
+ canvas = parentDoc.createElement('canvas');
399
+ canvas.id = canvasId;
400
+ canvas.classList.add("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
401
+ canvas.width = 0;
402
+ canvas.height = 0;
403
+ canvas.style.position = "absolute" /* Constant.Absolute */;
450
404
  // canvas.style.zIndex = `${Setting.ZIndex}`;
451
- canvas_1.style.pointerEvents = 'none'; // Allow clicks to pass through
452
- iframeParent.appendChild(canvas_1);
405
+ canvas.style.pointerEvents = 'none'; // Allow clicks to pass through
406
+ iframeParent.appendChild(canvas);
453
407
  }
454
408
  // // Set canvas size to match iframe
455
409
  // const updateCanvasSize = () => {
@@ -462,16 +416,16 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
462
416
  // Update size on resize
463
417
  // const handleUpdate = () => updateCanvasSize();
464
418
  // parentWindow!.addEventListener('resize', handleUpdate, true);
465
- var cleanup = function () {
419
+ const cleanup = () => {
466
420
  // parentWindow!.removeEventListener('resize', handleUpdate, true);
467
- if (canvas_1.parentNode) {
468
- canvas_1.parentNode.removeChild(canvas_1);
421
+ if (canvas.parentNode) {
422
+ canvas.parentNode.removeChild(canvas);
469
423
  }
470
424
  };
471
425
  return {
472
- canvas: canvas_1,
426
+ canvas,
473
427
  iframe: targetIframe,
474
- cleanup: cleanup
428
+ cleanup
475
429
  };
476
430
  }
477
431
  catch (e) {
@@ -488,9 +442,9 @@ function createParentWindowCanvas(iframeDoc, portalCanvasId) {
488
442
  * Used to track when all dialogs have finished rendering
489
443
  * Uses Set to avoid counting the same dialog multiple times
490
444
  */
491
- var pendingDialogs = new Set();
492
- var resolveDialogsRendered = null;
493
- var dialogsRenderedPromise = null;
445
+ let pendingDialogs = new Set();
446
+ let resolveDialogsRendered = null;
447
+ let dialogsRenderedPromise = null;
494
448
  /**
495
449
  * Returns a promise that resolves when all pending dialogs are rendered
496
450
  */
@@ -504,7 +458,7 @@ function waitForDialogsRendered() {
504
458
  return dialogsRenderedPromise;
505
459
  }
506
460
  // Create new promise
507
- dialogsRenderedPromise = new Promise(function (resolve) {
461
+ dialogsRenderedPromise = new Promise((resolve) => {
508
462
  resolveDialogsRendered = resolve;
509
463
  });
510
464
  return dialogsRenderedPromise;
@@ -559,7 +513,7 @@ function showDialog(dialogElement, isModal, onError) {
559
513
  dialogElement.show();
560
514
  }
561
515
  // Wait for animations/transitions to complete
562
- waitForDialogAnimation(dialogElement).then(function () {
516
+ waitForDialogAnimation(dialogElement).then(() => {
563
517
  notifyDialogComplete(dialogElement);
564
518
  });
565
519
  }
@@ -577,10 +531,10 @@ function showDialog(dialogElement, isModal, onError) {
577
531
  * Listens for animationend and transitionend events with timeout fallback
578
532
  */
579
533
  function waitForDialogAnimation(dialogElement) {
580
- return new Promise(function (resolve) {
581
- var resolved = false;
582
- var timeoutMs = 1000; // Maximum wait time for animations
583
- var complete = function () {
534
+ return new Promise((resolve) => {
535
+ let resolved = false;
536
+ const timeoutMs = 1000; // Maximum wait time for animations
537
+ const complete = () => {
584
538
  if (resolved)
585
539
  return;
586
540
  resolved = true;
@@ -588,20 +542,20 @@ function waitForDialogAnimation(dialogElement) {
588
542
  resolve();
589
543
  };
590
544
  // Fallback timeout in case no animation events fire
591
- var timeout = setTimeout(complete, timeoutMs);
545
+ const timeout = setTimeout(complete, timeoutMs);
592
546
  // Listen for animation end
593
- var onAnimationEnd = function (e) {
547
+ const onAnimationEnd = (e) => {
594
548
  if (e.target === dialogElement) {
595
549
  complete();
596
550
  }
597
551
  };
598
552
  // Listen for transition end
599
- var onTransitionEnd = function (TransitionEvent) {
553
+ const onTransitionEnd = (TransitionEvent) => {
600
554
  if (TransitionEvent.target === dialogElement) {
601
555
  complete();
602
556
  }
603
557
  };
604
- var cleanup = function () {
558
+ const cleanup = () => {
605
559
  clearTimeout(timeout);
606
560
  dialogElement.removeEventListener('animationend', onAnimationEnd);
607
561
  dialogElement.removeEventListener('transitionend', onTransitionEnd);
@@ -609,10 +563,10 @@ function waitForDialogAnimation(dialogElement) {
609
563
  dialogElement.addEventListener('animationend', onAnimationEnd, { once: true });
610
564
  dialogElement.addEventListener('transitionend', onTransitionEnd, { once: true });
611
565
  // If no animations/transitions, resolve after one frame
612
- requestAnimationFrame(function () {
613
- var computedStyle = window.getComputedStyle(dialogElement);
614
- var hasAnimation = computedStyle.animationName !== 'none';
615
- var hasTransition = computedStyle.transitionDuration !== '0s';
566
+ requestAnimationFrame(() => {
567
+ const computedStyle = window.getComputedStyle(dialogElement);
568
+ const hasAnimation = computedStyle.animationName !== 'none';
569
+ const hasTransition = computedStyle.transitionDuration !== '0s';
616
570
  if (!hasAnimation && !hasTransition) {
617
571
  complete();
618
572
  }
@@ -640,12 +594,12 @@ function notifyDialogComplete(dialogElement) {
640
594
  * @param onError - Optional error callback
641
595
  */
642
596
  function renderDialog(dialogElement, options, onError) {
643
- var isModal = options.isModal, shouldBeOpen = options.shouldBeOpen, isExistingDialog = options.isExistingDialog;
597
+ const { isModal, shouldBeOpen, isExistingDialog } = options;
644
598
  if (!shouldBeOpen)
645
599
  return;
646
600
  // Add dialog to pending set (Set automatically handles duplicates)
647
601
  pendingDialogs.add(dialogElement);
648
- var doShow = function () { return showDialog(dialogElement, isModal, onError); };
602
+ const doShow = () => showDialog(dialogElement, isModal, onError);
649
603
  if (isExistingDialog) {
650
604
  doShow();
651
605
  }
@@ -654,9 +608,8 @@ function renderDialog(dialogElement, options, onError) {
654
608
  }
655
609
  }
656
610
 
657
- var HeatmapHelper = /** @class */ (function () {
658
- function HeatmapHelper(state, layout) {
659
- var _this = this;
611
+ class HeatmapHelper {
612
+ constructor(state, layout) {
660
613
  this.data = null;
661
614
  this.scrollData = null;
662
615
  this.max = null;
@@ -669,35 +622,35 @@ var HeatmapHelper = /** @class */ (function () {
669
622
  this.scrollAvgFold = null;
670
623
  this.addScrollMakers = false;
671
624
  this.parentCanvasInfo = null;
672
- this.reset = function () {
673
- _this.data = null;
674
- _this.scrollData = null;
675
- _this.max = null;
676
- _this.offscreenRing = null;
677
- _this.gradientPixels = null;
678
- _this.timeout = null;
625
+ this.reset = () => {
626
+ this.data = null;
627
+ this.scrollData = null;
628
+ this.max = null;
629
+ this.offscreenRing = null;
630
+ this.gradientPixels = null;
631
+ this.timeout = null;
679
632
  // Cleanup parent canvas if it exists
680
- if (_this.parentCanvasInfo) {
681
- _this.parentCanvasInfo.cleanup();
682
- _this.parentCanvasInfo = null;
633
+ if (this.parentCanvasInfo) {
634
+ this.parentCanvasInfo.cleanup();
635
+ this.parentCanvasInfo = null;
683
636
  }
684
637
  // Reset resize observer
685
- if (_this.observer) {
686
- _this.observer.disconnect();
687
- _this.observer = null;
638
+ if (this.observer) {
639
+ this.observer.disconnect();
640
+ this.observer = null;
688
641
  }
689
642
  // Remove scroll and resize event listeners
690
- if (_this.state && _this.state.window) {
691
- var win = _this.state.window;
692
- win.removeEventListener("scroll", _this.redraw, true);
693
- win.removeEventListener("resize", _this.redraw, true);
643
+ if (this.state && this.state.window) {
644
+ let win = this.state.window;
645
+ win.removeEventListener("scroll", this.redraw, true);
646
+ win.removeEventListener("resize", this.redraw, true);
694
647
  }
695
648
  };
696
- this.clear = function () {
697
- var doc = _this.state.window.document;
698
- var win = _this.state.window;
699
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
700
- var de = doc.documentElement;
649
+ this.clear = () => {
650
+ let doc = this.state.window.document;
651
+ let win = this.state.window;
652
+ let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
653
+ let de = doc.documentElement;
701
654
  if (canvas) {
702
655
  canvas.width = de.clientWidth;
703
656
  canvas.height = de.clientHeight;
@@ -706,72 +659,59 @@ var HeatmapHelper = /** @class */ (function () {
706
659
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
707
660
  }
708
661
  // Cleanup parent canvas before reset
709
- if (_this.parentCanvasInfo) {
710
- _this.parentCanvasInfo.cleanup();
711
- _this.parentCanvasInfo = null;
712
- }
713
- _this.reset();
714
- };
715
- this.scroll = function (activity, avgFold, addMarkers) { return __awaiter(_this, void 0, void 0, function () {
716
- var canvas, context, doc, body, de, height, grd, _i, _a, currentCombination, huePercentView, percentView, hue;
717
- return __generator(this, function (_b) {
718
- switch (_b.label) {
719
- case 0: return [4 /*yield*/, this.waitForDialogs()];
720
- case 1:
721
- _b.sent();
722
- this.scrollData = this.scrollData || activity;
723
- this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
724
- this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
725
- canvas = this.overlay();
726
- context = canvas.getContext("2d" /* Constant.Context */);
727
- doc = this.state.window.document;
728
- body = doc.body;
729
- de = doc.documentElement;
730
- height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
731
- canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
732
- canvas.style.top = 0 + "px" /* Constant.Pixel */;
733
- if (canvas.width > 0 && canvas.height > 0) {
734
- if (this.scrollData) {
735
- grd = context.createLinearGradient(0, 0, 0, canvas.height);
736
- for (_i = 0, _a = this.scrollData; _i < _a.length; _i++) {
737
- currentCombination = _a[_i];
738
- huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
739
- percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
740
- hue = huePercentView * 240 /* Setting.MaxHue */;
741
- if (percentView <= 1) {
742
- grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
743
- }
744
- }
745
- // Fill with gradient
746
- context.fillStyle = grd;
747
- context.fillRect(0, 0, canvas.width, canvas.height);
748
- if (this.addScrollMakers) {
749
- this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
750
- }
751
- }
662
+ if (this.parentCanvasInfo) {
663
+ this.parentCanvasInfo.cleanup();
664
+ this.parentCanvasInfo = null;
665
+ }
666
+ this.reset();
667
+ };
668
+ this.scroll = (activity, avgFold, addMarkers) => __awaiter(this, void 0, void 0, function* () {
669
+ yield this.waitForDialogs();
670
+ this.scrollData = this.scrollData || activity;
671
+ this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
672
+ this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
673
+ let canvas = this.overlay();
674
+ let context = canvas.getContext("2d" /* Constant.Context */);
675
+ let doc = this.state.window.document;
676
+ var body = doc.body;
677
+ var de = doc.documentElement;
678
+ var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
679
+ canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
680
+ canvas.style.top = 0 + "px" /* Constant.Pixel */;
681
+ if (canvas.width > 0 && canvas.height > 0) {
682
+ if (this.scrollData) {
683
+ const grd = context.createLinearGradient(0, 0, 0, canvas.height);
684
+ for (const currentCombination of this.scrollData) {
685
+ const huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
686
+ const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
687
+ const hue = huePercentView * 240 /* Setting.MaxHue */;
688
+ if (percentView <= 1) {
689
+ grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
752
690
  }
753
- return [2 /*return*/];
691
+ }
692
+ // Fill with gradient
693
+ context.fillStyle = grd;
694
+ context.fillRect(0, 0, canvas.width, canvas.height);
695
+ if (this.addScrollMakers) {
696
+ this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
697
+ }
754
698
  }
755
- });
756
- }); };
757
- this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
758
- _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
759
- var markers = [75, 50, 25];
760
- var _loop_1 = function (marker) {
761
- var closest = scrollMapInfo.reduce(function (prev, curr) {
699
+ }
700
+ });
701
+ this.addInfoMarkers = (context, scrollMapInfo, width, height, avgFold) => {
702
+ this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
703
+ const markers = [75, 50, 25];
704
+ for (const marker of markers) {
705
+ const closest = scrollMapInfo.reduce((prev, curr) => {
762
706
  return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
763
707
  });
764
708
  if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
765
- var markerLine = (closest.scrollReachY / 100) * height;
766
- _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
709
+ const markerLine = (closest.scrollReachY / 100) * height;
710
+ this.addMarker(context, width, `${marker}%`, markerLine, 35 /* Setting.MarkerSmallWidth */);
767
711
  }
768
- };
769
- for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
770
- var marker = markers_1[_i];
771
- _loop_1(marker);
772
712
  }
773
713
  };
774
- this.addMarker = function (context, heatmapWidth, label, markerY, markerWidth) {
714
+ this.addMarker = (context, heatmapWidth, label, markerY, markerWidth) => {
775
715
  context.beginPath();
776
716
  context.moveTo(0, markerY);
777
717
  context.lineTo(heatmapWidth, markerY);
@@ -785,51 +725,52 @@ var HeatmapHelper = /** @class */ (function () {
785
725
  context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
786
726
  context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
787
727
  };
788
- this.click = function (activity) { return __awaiter(_this, void 0, void 0, function () {
789
- var heat, canvas, ctx, ring, gradient, _i, heat_1, entry, pixels, i, alpha, offset;
790
- return __generator(this, function (_a) {
791
- switch (_a.label) {
792
- case 0: return [4 /*yield*/, this.waitForDialogs()];
793
- case 1:
794
- _a.sent();
795
- this.data = this.data || activity;
796
- heat = this.transform();
797
- canvas = this.overlay();
798
- ctx = canvas.getContext("2d" /* Constant.Context */);
799
- if (canvas.width > 0 && canvas.height > 0) {
800
- ring = this.getRing();
801
- gradient = this.getGradient();
802
- // Render activity for each (x,y) coordinate in our data
803
- for (_i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
804
- entry = heat_1[_i];
805
- ctx.globalAlpha = entry.a;
806
- ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
807
- }
808
- pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
809
- for (i = 0; i < pixels.data.length; i += 4) {
810
- alpha = pixels.data[i + 3];
811
- if (alpha > 0) {
812
- offset = (alpha - 1) * 4;
813
- pixels.data[i] = gradient.data[offset];
814
- pixels.data[i + 1] = gradient.data[offset + 1];
815
- pixels.data[i + 2] = gradient.data[offset + 2];
816
- }
817
- }
818
- ctx.putImageData(pixels, 0, 0);
819
- }
820
- return [2 /*return*/];
728
+ this.click = (activity) => __awaiter(this, void 0, void 0, function* () {
729
+ yield this.waitForDialogs();
730
+ this.data = this.data || activity;
731
+ let heat = this.transform();
732
+ let canvas = this.overlay();
733
+ let ctx = canvas.getContext("2d" /* Constant.Context */);
734
+ if (canvas.width > 0 && canvas.height > 0) {
735
+ // TODO: GEMX DEBUG Draw a test rectangle to verify canvas is working
736
+ // ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
737
+ // ctx.fillRect(10, 10, 100, 100);
738
+ // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
739
+ // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
740
+ // Pre-render similar primitives or repeating objects on an offscreen canvas
741
+ let ring = this.getRing();
742
+ let gradient = this.getGradient();
743
+ // Render activity for each (x,y) coordinate in our data
744
+ for (let entry of heat) {
745
+ ctx.globalAlpha = entry.a;
746
+ ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
747
+ }
748
+ // Add color to the canvas based on alpha value of each pixel
749
+ let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
750
+ for (let i = 0; i < pixels.data.length; i += 4) {
751
+ // For each pixel, we have 4 entries in data array: (r,g,b,a)
752
+ // To pick the right color from gradient pixels, we look at the alpha value of the pixel
753
+ // Alpha value ranges from 0-255
754
+ let alpha = pixels.data[i + 3];
755
+ if (alpha > 0) {
756
+ let offset = (alpha - 1) * 4;
757
+ pixels.data[i] = gradient.data[offset];
758
+ pixels.data[i + 1] = gradient.data[offset + 1];
759
+ pixels.data[i + 2] = gradient.data[offset + 2];
760
+ }
821
761
  }
822
- });
823
- }); };
824
- this.overlay = function () {
762
+ ctx.putImageData(pixels, 0, 0);
763
+ }
764
+ });
765
+ this.overlay = () => {
825
766
  // Create canvas for visualizing heatmap
826
- var doc = _this.state.window.document;
827
- var win = _this.state.window;
828
- var de = doc.documentElement;
829
- var isPortalCanvas = !!_this.state.options.portalCanvasId;
767
+ let doc = this.state.window.document;
768
+ let win = this.state.window;
769
+ let de = doc.documentElement;
770
+ const isPortalCanvas = !!this.state.options.portalCanvasId;
830
771
  if (isPortalCanvas)
831
- return _this.createPortalCanvas(doc, win, de);
832
- var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
772
+ return this.createPortalCanvas(doc, win, de);
773
+ let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
833
774
  if (canvas === null) {
834
775
  canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
835
776
  canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
@@ -837,13 +778,13 @@ var HeatmapHelper = /** @class */ (function () {
837
778
  canvas.width = 0;
838
779
  canvas.height = 0;
839
780
  canvas.style.position = "absolute" /* Constant.Absolute */;
840
- canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
781
+ canvas.style.zIndex = `${2147483647 /* Setting.ZIndex */}`;
841
782
  de.appendChild(canvas);
842
- win.addEventListener("scroll", _this.redraw, true);
843
- win.addEventListener("resize", _this.redraw, true);
844
- _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
845
- if (_this.observer) {
846
- _this.observer.observe(doc.body);
783
+ win.addEventListener("scroll", this.redraw, true);
784
+ win.addEventListener("resize", this.redraw, true);
785
+ this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
786
+ if (this.observer) {
787
+ this.observer.observe(doc.body);
847
788
  }
848
789
  }
849
790
  // Ensure canvas is positioned correctly
@@ -854,13 +795,13 @@ var HeatmapHelper = /** @class */ (function () {
854
795
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
855
796
  return canvas;
856
797
  };
857
- this.getRing = function () {
858
- if (_this.offscreenRing === null) {
859
- var doc = _this.state.window.document;
860
- _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
861
- _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
862
- _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
863
- var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
798
+ this.getRing = () => {
799
+ if (this.offscreenRing === null) {
800
+ let doc = this.state.window.document;
801
+ this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
802
+ this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
803
+ this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
804
+ let ctx = this.offscreenRing.getContext("2d" /* Constant.Context */);
864
805
  ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
865
806
  ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
866
807
  ctx.shadowColor = "black" /* Constant.Black */;
@@ -869,90 +810,88 @@ var HeatmapHelper = /** @class */ (function () {
869
810
  ctx.closePath();
870
811
  ctx.fill();
871
812
  }
872
- return _this.offscreenRing;
813
+ return this.offscreenRing;
873
814
  };
874
- this.getGradient = function () {
875
- if (_this.gradientPixels === null) {
876
- var doc = _this.state.window.document;
877
- var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
815
+ this.getGradient = () => {
816
+ if (this.gradientPixels === null) {
817
+ let doc = this.state.window.document;
818
+ let offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
878
819
  offscreenGradient.width = 1;
879
820
  offscreenGradient.height = 256 /* Setting.Colors */;
880
- var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
881
- var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
882
- var step = 1 / HeatmapHelper.COLORS.length;
883
- for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
821
+ let ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
822
+ let gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
823
+ let step = 1 / HeatmapHelper.COLORS.length;
824
+ for (let i = 0; i < HeatmapHelper.COLORS.length; i++) {
884
825
  gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
885
826
  }
886
827
  ctx.fillStyle = gradient;
887
828
  ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
888
- _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
829
+ this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
889
830
  }
890
- return _this.gradientPixels;
831
+ return this.gradientPixels;
891
832
  };
892
- this.redraw = function (event) {
893
- if (_this.data) {
894
- if (_this.timeout) {
895
- clearTimeout(_this.timeout);
833
+ this.redraw = (event) => {
834
+ if (this.data) {
835
+ if (this.timeout) {
836
+ clearTimeout(this.timeout);
896
837
  }
897
- _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
838
+ this.timeout = setTimeout(this.click, 30 /* Setting.Interval */);
898
839
  }
899
- else if (_this.scrollData) {
840
+ else if (this.scrollData) {
900
841
  if (event.type != 'scroll') {
901
- if (_this.timeout) {
902
- clearTimeout(_this.timeout);
842
+ if (this.timeout) {
843
+ clearTimeout(this.timeout);
903
844
  }
904
- _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
845
+ this.timeout = setTimeout(this.scroll, 30 /* Setting.Interval */);
905
846
  }
906
847
  }
907
848
  };
908
- this.transform = function () {
909
- var output = [];
910
- var points = {};
911
- var localMax = 0;
912
- var height = _this.state.window && _this.state.window.document ? _this.state.window.document.documentElement.clientHeight : 0;
849
+ this.transform = () => {
850
+ let output = [];
851
+ let points = {};
852
+ let localMax = 0;
853
+ let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
913
854
  // DEBUG LOG
914
- console.group("[Heatmap] transform \u2014 total elements: ".concat(_this.data.length, ", height: ").concat(height, ", max: ").concat(_this.max));
915
- for (var _i = 0, _a = _this.data; _i < _a.length; _i++) {
916
- var element = _a[_i];
917
- var el = _this.layout.get(element.hash);
855
+ console.group(`[Heatmap] transform — total elements: ${this.data.length}, height: ${height}, max: ${this.max}`);
856
+ for (let element of this.data) {
857
+ let el = this.layout.get(element.hash);
918
858
  if (!el) {
919
- console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 element not found in DOM"));
859
+ console.warn(`[Heatmap] SKIP hash="${element.hash}" — element not found in DOM`);
920
860
  continue;
921
861
  }
922
862
  if (typeof el.getBoundingClientRect !== "function") {
923
- console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 getBoundingClientRect not available"), el);
863
+ console.warn(`[Heatmap] SKIP hash="${element.hash}" — getBoundingClientRect not available`, el);
924
864
  continue;
925
865
  }
926
- var r = el.getBoundingClientRect();
927
- var isDebugHash = element.hash === "270qs0pw7";
928
- var v = _this.visible(el, r, height, isDebugHash ? element.hash : undefined);
929
- if (!v && _this.max !== null) {
930
- console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 not visible on re-render"), { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: _this.max !== null });
866
+ let r = el.getBoundingClientRect();
867
+ const isDebugHash = element.hash === "270qs0pw7";
868
+ let v = this.visible(el, r, height, isDebugHash ? element.hash : undefined);
869
+ if (!v && this.max !== null) {
870
+ console.warn(`[Heatmap] SKIP hash="${element.hash}" — not visible on re-render`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: this.max !== null });
931
871
  continue;
932
872
  }
933
873
  if (el && typeof el.getBoundingClientRect === "function") {
934
- console.log("[Heatmap] PROCESS hash=\"".concat(element.hash, "\" visible=").concat(v, " points=").concat(element.points), { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
874
+ console.log(`[Heatmap] PROCESS hash="${element.hash}" visible=${v} points=${element.points}`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
935
875
  // Process clicks for only visible elements
936
- if (_this.max === null || v) {
937
- for (var i = 0; i < element.points; i++) {
938
- var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
939
- var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
940
- var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
876
+ if (this.max === null || v) {
877
+ for (let i = 0; i < element.points; i++) {
878
+ let x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
879
+ let y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
880
+ let k = `${x}${"X" /* Constant.Separator */}${y}${"X" /* Constant.Separator */}${v ? 1 : 0}`;
941
881
  points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
942
882
  localMax = Math.max(points[k], localMax);
943
- console.log(" point[".concat(i, "] x=").concat(x, " y=").concat(y, " visible=").concat(v, " clicks=").concat(element.clicks[i]));
883
+ console.log(` point[${i}] x=${x} y=${y} visible=${v} clicks=${element.clicks[i]}`);
944
884
  }
945
885
  }
946
886
  }
947
887
  }
948
888
  // Set the max value from the firs t
949
- _this.max = _this.max ? _this.max : localMax;
889
+ this.max = this.max ? this.max : localMax;
950
890
  // Once all points are accounted for, convert everything into absolute (x, y)
951
- var skippedInvisible = 0;
952
- for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
953
- var coordinates = _c[_b];
954
- var parts = coordinates.split("X" /* Constant.Separator */);
955
- var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
891
+ let skippedInvisible = 0;
892
+ for (let coordinates of Object.keys(points)) {
893
+ let parts = coordinates.split("X" /* Constant.Separator */);
894
+ let alpha = Math.min((points[coordinates] / this.max) + 0.15 /* Setting.AlphaBoost */, 1);
956
895
  if (parts[2] === "1") {
957
896
  output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
958
897
  }
@@ -960,34 +899,33 @@ var HeatmapHelper = /** @class */ (function () {
960
899
  skippedInvisible++;
961
900
  }
962
901
  }
963
- console.log("[Heatmap] Result \u2014 drawn: ".concat(output.length, ", skipped invisible: ").concat(skippedInvisible, ", max: ").concat(_this.max));
902
+ console.log(`[Heatmap] Result — drawn: ${output.length}, skipped invisible: ${skippedInvisible}, max: ${this.max}`);
964
903
  console.groupEnd();
965
904
  return output;
966
905
  };
967
- this.visible = function (el, r, height, debugHash) {
968
- var doc = _this.state.window.document;
969
- var visibility = r.height > height ? true : false;
906
+ this.visible = (el, r, height, debugHash) => {
907
+ let doc = this.state.window.document;
908
+ let visibility = r.height > height ? true : false;
970
909
  if (debugHash) {
971
- console.group("[Heatmap visible] hash=".concat(debugHash, " tag=").concat(el === null || el === void 0 ? void 0 : el.tagName));
972
- console.log(" rect: top=".concat(r.top.toFixed(1), " bottom=").concat(r.bottom.toFixed(1), " left=").concat(r.left.toFixed(1), " width=").concat(r.width.toFixed(1), " height=").concat(r.height.toFixed(1)));
973
- console.log(" viewport height=".concat(height, " | r.height > height? ").concat(r.height > height));
910
+ console.group(`[Heatmap visible] hash=${debugHash} tag=${el === null || el === void 0 ? void 0 : el.tagName}`);
911
+ console.log(` rect: top=${r.top.toFixed(1)} bottom=${r.bottom.toFixed(1)} left=${r.left.toFixed(1)} width=${r.width.toFixed(1)} height=${r.height.toFixed(1)}`);
912
+ console.log(` viewport height=${height} | r.height > height? ${r.height > height}`);
974
913
  }
975
914
  if (visibility === false && r.width > 0 && r.height > 0) {
976
- var checkX = r.left + (r.width / 2);
977
- var checkY = r.top + (r.height / 2);
915
+ const checkX = r.left + (r.width / 2);
916
+ const checkY = r.top + (r.height / 2);
978
917
  if (debugHash) {
979
- console.log(" elementsFromPoint(".concat(checkX.toFixed(1), ", ").concat(checkY.toFixed(1), ")"));
918
+ console.log(` elementsFromPoint(${checkX.toFixed(1)}, ${checkY.toFixed(1)})`);
980
919
  }
981
920
  while (!visibility && doc) {
982
- var shadowElement = null;
983
- var elements = doc.elementsFromPoint(checkX, checkY);
921
+ let shadowElement = null;
922
+ let elements = doc.elementsFromPoint(checkX, checkY);
984
923
  if (debugHash) {
985
- var topElements = elements.slice(0, 5).map(function (e) { return "".concat(e.tagName).concat(e.id ? '#' + e.id : '').concat(e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''); });
986
- console.log(" top elements at center: [".concat(topElements.join(', '), "]"));
987
- console.log(" is el in top elements? ".concat(elements.includes(el), " | el matches first non-canvas? ").concat(elements.find(function (e) { return !(e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)); }) === el));
924
+ const topElements = elements.slice(0, 5).map(e => `${e.tagName}${e.id ? '#' + e.id : ''}${e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''}`);
925
+ console.log(` top elements at center: [${topElements.join(', ')}]`);
926
+ console.log(` is el in top elements? ${elements.includes(el)} | el matches first non-canvas? ${elements.find(e => !(e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0))) === el}`);
988
927
  }
989
- for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
990
- var e = elements_1[_i];
928
+ for (let e of elements) {
991
929
  // Ignore if top element ends up being the canvas element we added for heatmap visualization
992
930
  if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
993
931
  continue;
@@ -1003,46 +941,38 @@ var HeatmapHelper = /** @class */ (function () {
1003
941
  }
1004
942
  else if (debugHash) {
1005
943
  if (r.width === 0 || r.height === 0) {
1006
- console.log(" SKIP elementsFromPoint \u2014 zero dimension: width=".concat(r.width, " height=").concat(r.height));
944
+ console.log(` SKIP elementsFromPoint — zero dimension: width=${r.width} height=${r.height}`);
1007
945
  }
1008
946
  }
1009
- var result = visibility && r.bottom >= 0 && r.top <= height;
947
+ const result = visibility && r.bottom >= 0 && r.top <= height;
1010
948
  if (debugHash) {
1011
- console.log(" visibility=".concat(visibility, " | r.bottom(").concat(r.bottom.toFixed(1), ") >= 0? ").concat(r.bottom >= 0, " | r.top(").concat(r.top.toFixed(1), ") <= height(").concat(height, ")? ").concat(r.top <= height));
1012
- console.log(" => final result: ".concat(result));
949
+ console.log(` visibility=${visibility} | r.bottom(${r.bottom.toFixed(1)}) >= 0? ${r.bottom >= 0} | r.top(${r.top.toFixed(1)}) <= height(${height})? ${r.top <= height}`);
950
+ console.log(` => final result: ${result}`);
1013
951
  console.groupEnd();
1014
952
  }
1015
953
  return result;
1016
954
  };
1017
- this.waitForDialogs = function () { return __awaiter(_this, void 0, void 0, function () {
1018
- var isPortalCanvas;
1019
- return __generator(this, function (_a) {
1020
- switch (_a.label) {
1021
- case 0:
1022
- isPortalCanvas = !!this.state.options.portalCanvasId;
1023
- if (!isPortalCanvas)
1024
- return [2 /*return*/];
1025
- return [4 /*yield*/, waitForDialogsRendered()];
1026
- case 1:
1027
- _a.sent();
1028
- return [2 /*return*/];
1029
- }
1030
- });
1031
- }); };
1032
- this.createPortalCanvas = function (doc, win, de) {
955
+ this.waitForDialogs = () => __awaiter(this, void 0, void 0, function* () {
956
+ const isPortalCanvas = !!this.state.options.portalCanvasId;
957
+ if (!isPortalCanvas)
958
+ return;
959
+ yield waitForDialogsRendered();
960
+ return;
961
+ });
962
+ this.createPortalCanvas = (doc, win, de) => {
1033
963
  var _a;
1034
- var canvas = null;
964
+ let canvas = null;
1035
965
  try {
1036
- canvas = (_a = _this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
966
+ canvas = (_a = this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
1037
967
  if (!canvas) {
1038
- _this.parentCanvasInfo = createParentWindowCanvas(doc, _this.state.options.portalCanvasId);
1039
- canvas = _this.parentCanvasInfo.canvas;
968
+ this.parentCanvasInfo = createParentWindowCanvas(doc, this.state.options.portalCanvasId);
969
+ canvas = this.parentCanvasInfo.canvas;
1040
970
  // Add event listeners only once when canvas is created
1041
- win.addEventListener("scroll", _this.redraw, true);
1042
- win.addEventListener("resize", _this.redraw, true);
1043
- _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
1044
- if (_this.observer) {
1045
- _this.observer.observe(doc.body);
971
+ win.addEventListener("scroll", this.redraw, true);
972
+ win.addEventListener("resize", this.redraw, true);
973
+ this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
974
+ if (this.observer) {
975
+ this.observer.observe(doc.body);
1046
976
  }
1047
977
  }
1048
978
  canvas.width = de.clientWidth;
@@ -1050,20 +980,19 @@ var HeatmapHelper = /** @class */ (function () {
1050
980
  canvas.style.top = '0';
1051
981
  canvas.style.left = '0';
1052
982
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
1053
- _this.parentCanvasInfo.canvas = canvas;
983
+ this.parentCanvasInfo.canvas = canvas;
1054
984
  return canvas;
1055
985
  }
1056
986
  catch (error) {
1057
- console.error("[Heatmap] createPortalCanvas:", error);
987
+ console.error(`[Heatmap] createPortalCanvas:`, error);
1058
988
  }
1059
989
  return null;
1060
990
  };
1061
991
  this.state = state;
1062
992
  this.layout = layout;
1063
993
  }
1064
- HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
1065
- return HeatmapHelper;
1066
- }());
994
+ }
995
+ HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
1067
996
 
1068
997
  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;`;
1069
998
 
@@ -1099,29 +1028,28 @@ var clickStyle = `.clarity-click,
1099
1028
  transition: visibility 0s 1s, opacity 1s linear;
1100
1029
  }`;
1101
1030
 
1102
- var InteractionHelper = /** @class */ (function () {
1103
- function InteractionHelper(state, layout, vnext) {
1104
- var _this = this;
1031
+ class InteractionHelper {
1032
+ constructor(state, layout, vnext) {
1105
1033
  this.hoverId = null;
1106
1034
  this.targetId = null;
1107
1035
  this.points = [];
1108
1036
  this.scrollPointIndex = 0;
1109
1037
  this.clickAudio = null;
1110
1038
  this.visualizedClicks = [];
1111
- this.reset = function () {
1112
- _this.points = [];
1113
- _this.scrollPointIndex = 0;
1114
- _this.clickAudio = null;
1115
- _this.hoverId = null;
1116
- _this.targetId = null;
1117
- _this.layout.reset();
1118
- };
1119
- this.scroll = function (event) {
1120
- var data = event.data;
1121
- var doc = _this.state.window.document;
1122
- var de = doc.documentElement;
1123
- var scrollTarget = _this.layout.element(data.target) || doc.body;
1124
- var scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
1039
+ this.reset = () => {
1040
+ this.points = [];
1041
+ this.scrollPointIndex = 0;
1042
+ this.clickAudio = null;
1043
+ this.hoverId = null;
1044
+ this.targetId = null;
1045
+ this.layout.reset();
1046
+ };
1047
+ this.scroll = (event) => {
1048
+ let data = event.data;
1049
+ let doc = this.state.window.document;
1050
+ let de = doc.documentElement;
1051
+ let scrollTarget = this.layout.element(data.target) || doc.body;
1052
+ let scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
1125
1053
  if (scrollTarget && scrollable) {
1126
1054
  scrollTarget.scrollTo(data.x, data.y);
1127
1055
  // In an edge case, scrolling API doesn't work when css on HTML element has height:100% and overflow:auto
@@ -1134,36 +1062,36 @@ var InteractionHelper = /** @class */ (function () {
1134
1062
  // Position canvas relative to scroll events on the parent page
1135
1063
  if (scrollTarget === de || scrollTarget === doc.body) {
1136
1064
  if (!scrollable) {
1137
- _this.state.window.scrollTo(data.x, data.y);
1065
+ this.state.window.scrollTo(data.x, data.y);
1138
1066
  }
1139
- var canvas = _this.overlay();
1067
+ let canvas = this.overlay();
1140
1068
  if (canvas) {
1141
1069
  canvas.style.left = data.x + "px" /* Constant.Pixel */;
1142
1070
  canvas.style.top = data.y + "px" /* Constant.Pixel */;
1143
1071
  canvas.width = de.clientWidth;
1144
1072
  canvas.height = de.clientHeight;
1145
1073
  }
1146
- _this.scrollPointIndex = _this.points.length;
1074
+ this.scrollPointIndex = this.points.length;
1147
1075
  }
1148
1076
  };
1149
- this.resize = function (event) {
1150
- var data = event.data;
1151
- var width = data.width;
1152
- var height = data.height;
1153
- if (_this.state.options.onresize) {
1154
- _this.state.options.onresize(width, height);
1077
+ this.resize = (event) => {
1078
+ let data = event.data;
1079
+ let width = data.width;
1080
+ let height = data.height;
1081
+ if (this.state.options.onresize) {
1082
+ this.state.options.onresize(width, height);
1155
1083
  }
1156
1084
  };
1157
- this.visibility = function (event) {
1158
- var doc = _this.state.window.document;
1085
+ this.visibility = (event) => {
1086
+ let doc = this.state.window.document;
1159
1087
  if (doc && doc.documentElement && event.data.visible === 0 /* BooleanFlag.False */) {
1160
1088
  // if the website has styles on the <html> node then we need to save the reference to them before we change them
1161
1089
  // to indicate the window was hidden. This is to ensure that we can restore the original styles when the window is visible again.
1162
- var bg = doc.documentElement.style.backgroundColor;
1090
+ const bg = doc.documentElement.style.backgroundColor;
1163
1091
  if (bg) {
1164
1092
  doc.documentElement.setAttribute("data-clarity-background-color" /* Constant.OriginalBackgroundColor */, bg);
1165
1093
  }
1166
- var o = doc.documentElement.style.opacity;
1094
+ const o = doc.documentElement.style.opacity;
1167
1095
  if (o) {
1168
1096
  doc.documentElement.setAttribute("data-clarity-opacity" /* Constant.OriginalOpacity */, o);
1169
1097
  }
@@ -1185,9 +1113,9 @@ var InteractionHelper = /** @class */ (function () {
1185
1113
  }
1186
1114
  }
1187
1115
  };
1188
- this.input = function (event) {
1189
- var data = event.data;
1190
- var el = _this.layout.element(data.target);
1116
+ this.input = (event) => {
1117
+ let data = event.data;
1118
+ let el = this.layout.element(data.target);
1191
1119
  if (el) {
1192
1120
  switch (el.type) {
1193
1121
  case "checkbox":
@@ -1203,73 +1131,72 @@ var InteractionHelper = /** @class */ (function () {
1203
1131
  }
1204
1132
  }
1205
1133
  };
1206
- this.selection = function (event) {
1207
- var data = event.data;
1208
- var doc = _this.state.window.document;
1209
- var s = doc.getSelection();
1134
+ this.selection = (event) => {
1135
+ let data = event.data;
1136
+ let doc = this.state.window.document;
1137
+ let s = doc.getSelection();
1210
1138
  // Wrapping selection code inside a try / catch to avoid throwing errors when dealing with elements inside the shadow DOM.
1211
1139
  try {
1212
- s.setBaseAndExtent(_this.layout.element(data.start), data.startOffset, _this.layout.element(data.end), data.endOffset);
1140
+ s.setBaseAndExtent(this.layout.element(data.start), data.startOffset, this.layout.element(data.end), data.endOffset);
1213
1141
  }
1214
1142
  catch (ex) {
1215
1143
  console.warn("Exception encountered while trying to set selection: " + ex);
1216
1144
  }
1217
1145
  };
1218
- this.pointer = function (event) {
1219
- if (!_this.state.options.pointer) {
1146
+ this.pointer = (event) => {
1147
+ if (!this.state.options.pointer) {
1220
1148
  return;
1221
1149
  }
1222
- var data = event.data;
1223
- var type = event.event;
1224
- var doc = _this.state.window.document;
1225
- var de = doc.documentElement;
1226
- var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
1227
- var pointerWidth = 29 /* Setting.PointerWidth */;
1228
- var pointerHeight = 38 /* Setting.PointerHeight */;
1150
+ let data = event.data;
1151
+ let type = event.event;
1152
+ let doc = this.state.window.document;
1153
+ let de = doc.documentElement;
1154
+ let p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
1155
+ let pointerWidth = 29 /* Setting.PointerWidth */;
1156
+ let pointerHeight = 38 /* Setting.PointerHeight */;
1229
1157
  if (p === null) {
1230
1158
  p = doc.createElement("DIV");
1231
1159
  p.id = "clarity-pointer" /* Constant.PointerLayer */;
1232
1160
  de.appendChild(p);
1233
1161
  // Add custom styles
1234
- var style = doc.createElement("STYLE");
1162
+ let style = doc.createElement("STYLE");
1235
1163
  style.textContent =
1236
1164
  "@keyframes pulsate-one { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(3, 3); opacity: 0; } }" +
1237
1165
  "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
1238
1166
  "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
1239
1167
  "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
1240
- "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
1241
- "#".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; }") +
1242
- _this.getClickLayerStyle() +
1243
- ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
1244
- ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
1245
- ".".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 */, "); }") +
1246
- ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
1247
- _this.getPointerStyle();
1168
+ `#${"clarity-interaction-canvas" /* Constant.InteractionCanvas */} { position: absolute; left: 0; top: 0; z-index: ${2147483647 /* Setting.ZIndex */}; background: none; }` +
1169
+ `#${"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; }` +
1170
+ this.getClickLayerStyle() +
1171
+ `.${"clarity-touch" /* Constant.TouchLayer */} { background: radial-gradient(rgba(242,97,12,1), transparent); }` +
1172
+ `.${"clarity-touch-ring" /* Constant.TouchRing */} { background: transparent; border: 1px solid rgba(242,97,12,0.8); }` +
1173
+ `.${"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 */}); }` +
1174
+ `.${"clarity-pointer-none" /* Constant.PointerNone */} { background: none; }` +
1175
+ this.getPointerStyle();
1248
1176
  p.appendChild(style);
1249
1177
  }
1250
1178
  p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
1251
1179
  p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
1252
- var title = "Pointer";
1180
+ let title = "Pointer";
1253
1181
  switch (type) {
1254
1182
  case 9 /* Data.Event.Click */:
1255
1183
  title = "Click";
1256
- _this.visualizedClicks.push({
1184
+ this.visualizedClicks.push({
1257
1185
  doc: de,
1258
- click: _this.drawClick(doc, data.x, data.y, title),
1186
+ click: this.drawClick(doc, data.x, data.y, title),
1259
1187
  time: event.time
1260
1188
  });
1261
- if (_this.state.options.onclickMismatch) {
1262
- var originalTarget = _this.layout.element(data.target);
1263
- var correctTargetHit = false;
1264
- var elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
1265
- for (var _i = 0, elementsUnderClick_1 = elementsUnderClick; _i < elementsUnderClick_1.length; _i++) {
1266
- var elementUnderClick = elementsUnderClick_1[_i];
1189
+ if (this.state.options.onclickMismatch) {
1190
+ const originalTarget = this.layout.element(data.target);
1191
+ let correctTargetHit = false;
1192
+ const elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
1193
+ for (const elementUnderClick of elementsUnderClick) {
1267
1194
  if (originalTarget === elementUnderClick) {
1268
1195
  correctTargetHit = true;
1269
1196
  }
1270
1197
  }
1271
1198
  if (!correctTargetHit) {
1272
- _this.state.options.onclickMismatch({
1199
+ this.state.options.onclickMismatch({
1273
1200
  time: event.time,
1274
1201
  x: data.x,
1275
1202
  y: data.y,
@@ -1281,9 +1208,9 @@ var InteractionHelper = /** @class */ (function () {
1281
1208
  break;
1282
1209
  case 16 /* Data.Event.DoubleClick */:
1283
1210
  title = "Click";
1284
- _this.visualizedClicks.push({
1211
+ this.visualizedClicks.push({
1285
1212
  doc: de,
1286
- click: _this.drawClick(doc, data.x, data.y, title),
1213
+ click: this.drawClick(doc, data.x, data.y, title),
1287
1214
  time: event.time
1288
1215
  });
1289
1216
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -1292,9 +1219,9 @@ var InteractionHelper = /** @class */ (function () {
1292
1219
  case 18 /* Data.Event.TouchEnd */:
1293
1220
  case 20 /* Data.Event.TouchCancel */:
1294
1221
  title = "Touch";
1295
- _this.visualizedClicks.push({
1222
+ this.visualizedClicks.push({
1296
1223
  doc: de,
1297
- click: _this.drawTouch(doc, data.x, data.y, title),
1224
+ click: this.drawTouch(doc, data.x, data.y, title),
1298
1225
  time: event.time
1299
1226
  });
1300
1227
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -1306,37 +1233,37 @@ var InteractionHelper = /** @class */ (function () {
1306
1233
  case 12 /* Data.Event.MouseMove */:
1307
1234
  title = "Mouse Move";
1308
1235
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
1309
- _this.addPoint({ time: event.time, x: data.x, y: data.y });
1310
- _this.targetId = data.target;
1236
+ this.addPoint({ time: event.time, x: data.x, y: data.y });
1237
+ this.targetId = data.target;
1311
1238
  break;
1312
1239
  default:
1313
1240
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
1314
1241
  break;
1315
1242
  }
1316
- p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
1243
+ p.setAttribute("title" /* Constant.Title */, `${title} (${data.x}${"px" /* Constant.Pixel */}, ${data.y}${"px" /* Constant.Pixel */})`);
1317
1244
  };
1318
- this.clearOldClickVisualizations = function (currentTimestamp) {
1319
- if (_this.vnext) {
1320
- while (_this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
1321
- var visualizedClick = _this.visualizedClicks.shift();
1322
- _this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
1245
+ this.clearOldClickVisualizations = (currentTimestamp) => {
1246
+ if (this.vnext) {
1247
+ while (this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
1248
+ const visualizedClick = this.visualizedClicks.shift();
1249
+ this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
1323
1250
  }
1324
- var tooOldClicks = _this.visualizedClicks.filter(function (click) { return currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */; });
1325
- tooOldClicks.forEach(function (click) {
1326
- _this.fadeOutElement(click.click, click.doc);
1327
- _this.visualizedClicks.splice(_this.visualizedClicks.indexOf(click), 1);
1251
+ var tooOldClicks = this.visualizedClicks.filter(click => currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */);
1252
+ tooOldClicks.forEach(click => {
1253
+ this.fadeOutElement(click.click, click.doc);
1254
+ this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
1328
1255
  });
1329
1256
  }
1330
1257
  };
1331
- this.fadeOutElement = function (element, document) {
1258
+ this.fadeOutElement = (element, document) => {
1332
1259
  element.classList.add("clarity-click-hidden");
1333
- setTimeout(function () { document.removeChild(element); }, 10000);
1260
+ setTimeout(() => { document.removeChild(element); }, 10000);
1334
1261
  };
1335
- this.hover = function () {
1336
- if (_this.targetId && _this.targetId !== _this.hoverId) {
1337
- var depth = 0;
1262
+ this.hover = () => {
1263
+ if (this.targetId && this.targetId !== this.hoverId) {
1264
+ let depth = 0;
1338
1265
  // First, remove any previous hover class assignments
1339
- var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
1266
+ let hoverNode = this.hoverId ? this.layout.element(this.hoverId) : null;
1340
1267
  while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
1341
1268
  if ("removeAttribute" in hoverNode) {
1342
1269
  hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
@@ -1346,7 +1273,7 @@ var InteractionHelper = /** @class */ (function () {
1346
1273
  }
1347
1274
  // Then, add hover class on elements that are below the pointer
1348
1275
  depth = 0;
1349
- var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
1276
+ let targetNode = this.targetId ? this.layout.element(this.targetId) : null;
1350
1277
  while (targetNode && depth < 7 /* Setting.HoverDepth */) {
1351
1278
  if ("setAttribute" in targetNode) {
1352
1279
  targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
@@ -1355,30 +1282,30 @@ var InteractionHelper = /** @class */ (function () {
1355
1282
  depth++;
1356
1283
  }
1357
1284
  // Finally, update hoverId to reflect the new node
1358
- _this.hoverId = _this.targetId;
1285
+ this.hoverId = this.targetId;
1359
1286
  }
1360
1287
  };
1361
- this.addPoint = function (point) {
1362
- var last = _this.points.length > 0 ? _this.points[_this.points.length - 1] : null;
1288
+ this.addPoint = (point) => {
1289
+ let last = this.points.length > 0 ? this.points[this.points.length - 1] : null;
1363
1290
  if (last && point.x === last.x && point.y === last.y) {
1364
1291
  last.time = point.time;
1365
1292
  }
1366
1293
  else {
1367
- _this.points.push(point);
1294
+ this.points.push(point);
1368
1295
  }
1369
1296
  };
1370
- this.drawTouch = function (doc, x, y, title) {
1371
- var de = doc.documentElement;
1372
- var touch = doc.createElement("DIV");
1297
+ this.drawTouch = (doc, x, y, title) => {
1298
+ let de = doc.documentElement;
1299
+ let touch = doc.createElement("DIV");
1373
1300
  touch.className = "clarity-touch" /* Constant.TouchLayer */;
1374
- touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
1301
+ touch.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
1375
1302
  touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
1376
1303
  touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
1377
1304
  touch.style.animation = "disappear 1 1s";
1378
1305
  touch.style.animationFillMode = "forwards";
1379
1306
  de.appendChild(touch);
1380
1307
  // First pulsating ring
1381
- var ringOne = touch.cloneNode();
1308
+ let ringOne = touch.cloneNode();
1382
1309
  ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
1383
1310
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
1384
1311
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
@@ -1387,48 +1314,48 @@ var InteractionHelper = /** @class */ (function () {
1387
1314
  touch.appendChild(ringOne);
1388
1315
  return touch;
1389
1316
  };
1390
- this.drawClick = function (doc, x, y, title) {
1391
- var de = doc.documentElement;
1392
- var click = doc.createElement("DIV");
1317
+ this.drawClick = (doc, x, y, title) => {
1318
+ let de = doc.documentElement;
1319
+ let click = doc.createElement("DIV");
1393
1320
  click.className = "clarity-click" /* Constant.ClickLayer */;
1394
- click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
1321
+ click.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
1395
1322
  click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
1396
1323
  click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
1397
1324
  // First pulsating ring
1398
- var ringOne = click.cloneNode();
1325
+ let ringOne = click.cloneNode();
1399
1326
  ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
1400
1327
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
1401
1328
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
1402
1329
  ringOne.style.animation = "pulsate-one 1 1s";
1403
1330
  ringOne.style.animationFillMode = "forwards";
1404
1331
  click.appendChild(ringOne);
1405
- if (_this.vnext) {
1406
- var center = doc.createElement("DIV");
1407
- center.className = "".concat("clarity-click" /* Constant.ClickLayer */, "-center");
1332
+ if (this.vnext) {
1333
+ let center = doc.createElement("DIV");
1334
+ center.className = `${"clarity-click" /* Constant.ClickLayer */}-center`;
1408
1335
  click.appendChild(center);
1409
1336
  }
1410
1337
  else {
1411
1338
  // Second pulsating ring
1412
- var ringTwo = ringOne.cloneNode();
1339
+ let ringTwo = ringOne.cloneNode();
1413
1340
  ringTwo.style.animation = "pulsate-two 1 1s";
1414
1341
  click.appendChild(ringTwo);
1415
1342
  }
1416
1343
  de.appendChild(click);
1417
1344
  // Play sound
1418
1345
  if (typeof Audio !== "undefined" /* Constant.Undefined */) {
1419
- if (_this.clickAudio === null) {
1420
- _this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
1421
- click.appendChild(_this.clickAudio);
1346
+ if (this.clickAudio === null) {
1347
+ this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
1348
+ click.appendChild(this.clickAudio);
1422
1349
  }
1423
- _this.clickAudio.play();
1350
+ this.clickAudio.play();
1424
1351
  }
1425
1352
  return click;
1426
1353
  };
1427
- this.overlay = function () {
1354
+ this.overlay = () => {
1428
1355
  // Create canvas for visualizing interactions
1429
- var doc = _this.state.window.document;
1430
- var de = doc.documentElement;
1431
- var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
1356
+ let doc = this.state.window.document;
1357
+ let de = doc.documentElement;
1358
+ let canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
1432
1359
  if (canvas === null) {
1433
1360
  canvas = doc.createElement("canvas");
1434
1361
  canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
@@ -1442,13 +1369,13 @@ var InteractionHelper = /** @class */ (function () {
1442
1369
  }
1443
1370
  return canvas;
1444
1371
  };
1445
- this.match = function (time) {
1446
- var p = [];
1447
- for (var i = _this.points.length - 1; i > 0; i--) {
1372
+ this.match = (time) => {
1373
+ let p = [];
1374
+ for (let i = this.points.length - 1; i > 0; i--) {
1448
1375
  // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
1449
1376
  // We reset the trail after every scroll event to avoid drawing weird looking trail.
1450
- if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
1451
- p.push(_this.points[i]);
1377
+ if (i >= this.scrollPointIndex && time - this.points[i].time < 3000 /* Setting.PixelLife */) {
1378
+ p.push(this.points[i]);
1452
1379
  }
1453
1380
  else {
1454
1381
  break;
@@ -1456,32 +1383,32 @@ var InteractionHelper = /** @class */ (function () {
1456
1383
  }
1457
1384
  return p.slice(0, 75 /* Setting.MaxTrailPoints */);
1458
1385
  };
1459
- this.trail = function (now) {
1460
- var canvas = _this.overlay();
1461
- if (_this.state.options.canvas && canvas) {
1462
- var ctx = canvas.getContext('2d');
1463
- var path = _this.state.options.keyframes ? _this.curve(_this.points.reverse()) : _this.curve(_this.match(now));
1386
+ this.trail = (now) => {
1387
+ const canvas = this.overlay();
1388
+ if (this.state.options.canvas && canvas) {
1389
+ const ctx = canvas.getContext('2d');
1390
+ const path = this.state.options.keyframes ? this.curve(this.points.reverse()) : this.curve(this.match(now));
1464
1391
  // Update hovered elements
1465
- _this.hover();
1392
+ this.hover();
1466
1393
  // We need at least two points to create a line
1467
1394
  if (path.length > 1) {
1468
- var last = path[0];
1395
+ let last = path[0];
1469
1396
  // Start off by clearing whatever was on the canvas before
1470
1397
  // The current implementation is inefficient. We have to redraw canvas all over again for every point.
1471
1398
  // In future we should batch pointer events and minimize the number of times we have to redraw canvas.
1472
1399
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
1473
- var count = path.length;
1474
- var offsetX = canvas.offsetLeft;
1475
- var offsetY = canvas.offsetTop;
1476
- for (var i = 1; i < count; i++) {
1477
- var current = path[i];
1400
+ let count = path.length;
1401
+ let offsetX = canvas.offsetLeft;
1402
+ let offsetY = canvas.offsetTop;
1403
+ for (let i = 1; i < count; i++) {
1404
+ let current = path[i];
1478
1405
  // Compute percentage position of these points compared to all points in the path
1479
- var lastFactor = 1 - ((i - 1) / count);
1480
- var currentFactor = 1 - (i / count);
1406
+ let lastFactor = 1 - ((i - 1) / count);
1407
+ let currentFactor = 1 - (i / count);
1481
1408
  // Generate a color gradient that goes from red -> yellow -> green -> light blue -> blue
1482
- var gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1483
- gradient.addColorStop(1, _this.color(currentFactor));
1484
- gradient.addColorStop(0, _this.color(lastFactor));
1409
+ let gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1410
+ gradient.addColorStop(1, this.color(currentFactor));
1411
+ gradient.addColorStop(0, this.color(lastFactor));
1485
1412
  // Line width of the trail shrinks as the position of the point goes farther away.
1486
1413
  ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
1487
1414
  ctx.lineCap = "round" /* Constant.Round */;
@@ -1499,25 +1426,25 @@ var InteractionHelper = /** @class */ (function () {
1499
1426
  }
1500
1427
  }
1501
1428
  // If we are only rendering key frames, clear points array after each key frame
1502
- if (_this.state.options.keyframes) {
1503
- _this.points = [];
1429
+ if (this.state.options.keyframes) {
1430
+ this.points = [];
1504
1431
  }
1505
1432
  }
1506
1433
  };
1507
- this.color = function (factor) {
1508
- var s = InteractionHelper.TRAIL_START_COLOR;
1509
- var e = InteractionHelper.TRAIL_END_COLOR;
1510
- var c = [];
1511
- for (var i = 0; i < 3; i++) {
1434
+ this.color = (factor) => {
1435
+ let s = InteractionHelper.TRAIL_START_COLOR;
1436
+ let e = InteractionHelper.TRAIL_END_COLOR;
1437
+ let c = [];
1438
+ for (let i = 0; i < 3; i++) {
1512
1439
  c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
1513
1440
  }
1514
- return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
1441
+ return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${factor})`;
1515
1442
  };
1516
1443
  // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
1517
- this.curve = function (path) {
1518
- var tension = 0.5;
1519
- var p = [];
1520
- var output = [];
1444
+ this.curve = (path) => {
1445
+ const tension = 0.5;
1446
+ let p = [];
1447
+ let output = [];
1521
1448
  // Make a copy of the input points so we don't make any side effects
1522
1449
  p = path.slice(0);
1523
1450
  // The algorithm require a valid previous and next point for each point in the original input
@@ -1526,57 +1453,56 @@ var InteractionHelper = /** @class */ (function () {
1526
1453
  p.unshift(path[0]);
1527
1454
  p.push(path[path.length - 1]);
1528
1455
  // Loop through the points, and generate intermediate points to make a smooth trail
1529
- for (var i = 1; i < p.length - 2; i++) {
1530
- var time = p[i].time;
1531
- var segments = Math.max(Math.min(Math.round(_this.distance(p[i], p[i - 1])), 10), 1);
1532
- for (var t = 0; t <= segments; t++) {
1456
+ for (let i = 1; i < p.length - 2; i++) {
1457
+ const time = p[i].time;
1458
+ const segments = Math.max(Math.min(Math.round(this.distance(p[i], p[i - 1])), 10), 1);
1459
+ for (let t = 0; t <= segments; t++) {
1533
1460
  // Compute tension vectors
1534
- var t1 = { time: time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1535
- var t2 = { time: time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1536
- var step = t / segments;
1461
+ let t1 = { time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1462
+ let t2 = { time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1463
+ let step = t / segments;
1537
1464
  // Compute cardinals
1538
- var c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1539
- var c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1540
- var c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1541
- var c4 = Math.pow(step, 3) - Math.pow(step, 2);
1465
+ let c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1466
+ let c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1467
+ let c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1468
+ let c4 = Math.pow(step, 3) - Math.pow(step, 2);
1542
1469
  // Compute new point with common control vectors
1543
- var x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1544
- var y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1545
- output.push({ time: time, x: x, y: y });
1470
+ let x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1471
+ let y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1472
+ output.push({ time, x, y });
1546
1473
  }
1547
1474
  }
1548
1475
  return output;
1549
1476
  };
1550
- this.distance = function (a, b) {
1551
- var dx = a.x - b.x;
1552
- var dy = a.y - b.y;
1477
+ this.distance = (a, b) => {
1478
+ const dx = a.x - b.x;
1479
+ const dy = a.y - b.y;
1553
1480
  return Math.sqrt(dx * dx + dy * dy);
1554
1481
  };
1555
- this.getPointerStyle = function () {
1556
- if (_this.vnext) {
1557
- return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { ").concat(pointerSvg, " }");
1482
+ this.getPointerStyle = () => {
1483
+ if (this.vnext) {
1484
+ return `.${"clarity-pointer-move" /* Constant.PointerMove */} { ${pointerSvg} }`;
1558
1485
  }
1559
1486
  else {
1560
- 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 */, "); }");
1487
+ 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 */}); }`;
1561
1488
  }
1562
1489
  };
1563
- this.getClickLayerStyle = function () {
1564
- if (_this.vnext) {
1490
+ this.getClickLayerStyle = () => {
1491
+ if (this.vnext) {
1565
1492
  return clickStyle;
1566
1493
  }
1567
1494
  else {
1568
- 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;}") +
1569
- ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }");
1495
+ 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;}` +
1496
+ `.${"clarity-click-ring" /* Constant.ClickRing */} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
1570
1497
  }
1571
1498
  };
1572
1499
  this.state = state;
1573
1500
  this.layout = layout;
1574
1501
  this.vnext = vnext;
1575
1502
  }
1576
- InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1577
- InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1578
- return InteractionHelper;
1579
- }());
1503
+ }
1504
+ InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1505
+ InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1580
1506
 
1581
1507
  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] {
1582
1508
  background-color: #FBFBFE;
@@ -1669,7 +1595,7 @@ var imageMaskedSvgItalian = `background: url("data:image/svg+xml,%3Csvg width='1
1669
1595
 
1670
1596
  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;`;
1671
1597
 
1672
- var blobUnavailableSvg = {
1598
+ const blobUnavailableSvg = {
1673
1599
  "de-de": blobUnavailableSvgGerman,
1674
1600
  "en-gb": blobUnavailableSvgEnglish,
1675
1601
  "en-us": blobUnavailableSvgEnglish,
@@ -1685,7 +1611,7 @@ var blobUnavailableSvg = {
1685
1611
  "zh-hans": blobUnavailableSvgChineseSimplified,
1686
1612
  "zh-hant": blobUnavailableSvgChineseTraditional,
1687
1613
  };
1688
- var iframeUnavailableSvg = {
1614
+ const iframeUnavailableSvg = {
1689
1615
  "de-de": iframeUnavailableSvgGerman,
1690
1616
  "en-gb": iframeUnavailableSvgEnglish,
1691
1617
  "en-us": iframeUnavailableSvgEnglish,
@@ -1701,7 +1627,7 @@ var iframeUnavailableSvg = {
1701
1627
  "zh-hans": iframeUnavailableSvgChineseSimplified,
1702
1628
  "zh-hant": iframeUnavailableSvgChineseTraditional,
1703
1629
  };
1704
- var imageMaskedSvg = {
1630
+ const imageMaskedSvg = {
1705
1631
  "de-de": imageMaskedSvgGerman,
1706
1632
  "en-gb": imageMaskedSvgEnglish,
1707
1633
  "en-us": imageMaskedSvgEnglish,
@@ -1718,12 +1644,8 @@ var imageMaskedSvg = {
1718
1644
  "zh-hant": imageMaskedSvgChineseTraditional,
1719
1645
  };
1720
1646
  /* END imageMaskedSvgs */
1721
- var LayoutHelper = /** @class */ (function () {
1722
- function LayoutHelper(state, isMobile, vNext, locale) {
1723
- if (isMobile === void 0) { isMobile = false; }
1724
- if (vNext === void 0) { vNext = false; }
1725
- if (locale === void 0) { locale = 'en-us'; }
1726
- var _this = this;
1647
+ class LayoutHelper {
1648
+ constructor(state, isMobile = false, vNext = false, locale = 'en-us') {
1727
1649
  this.primaryHtmlNodeId = null;
1728
1650
  this.stylesheets = [];
1729
1651
  this.fonts = [];
@@ -1736,44 +1658,44 @@ var LayoutHelper = /** @class */ (function () {
1736
1658
  this.state = null;
1737
1659
  this.stylesToApply = {};
1738
1660
  this.BackgroundImageEligibleElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'ASIDE', 'NAV', 'SPAN', 'P', 'MAIN'];
1739
- 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 */, "\")");
1740
- this.reset = function () {
1741
- _this.nodes = {};
1742
- _this.stylesheets = [];
1743
- _this.fonts = [];
1744
- _this.events = {};
1745
- _this.hashMapAlpha = {};
1746
- _this.hashMapBeta = {};
1747
- _this.primaryHtmlNodeId = null;
1661
+ 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 */}")`;
1662
+ this.reset = () => {
1663
+ this.nodes = {};
1664
+ this.stylesheets = [];
1665
+ this.fonts = [];
1666
+ this.events = {};
1667
+ this.hashMapAlpha = {};
1668
+ this.hashMapBeta = {};
1669
+ this.primaryHtmlNodeId = null;
1748
1670
  // Reset dialog render state for new render cycle
1749
1671
  resetDialogRenderState();
1750
1672
  };
1751
- this.get = function (hash) {
1752
- if (hash in _this.hashMapBeta && _this.hashMapBeta[hash].isConnected) {
1753
- return _this.hashMapBeta[hash];
1673
+ this.get = (hash) => {
1674
+ if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
1675
+ return this.hashMapBeta[hash];
1754
1676
  }
1755
- else if (hash in _this.hashMapAlpha && _this.hashMapAlpha[hash].isConnected) {
1756
- return _this.hashMapAlpha[hash];
1677
+ else if (hash in this.hashMapAlpha && this.hashMapAlpha[hash].isConnected) {
1678
+ return this.hashMapAlpha[hash];
1757
1679
  }
1758
1680
  return null;
1759
1681
  };
1760
- this.addToHashMap = function (data, parent) {
1682
+ this.addToHashMap = (data, parent) => {
1761
1683
  // In case of selector collision, prefer the first inserted node
1762
- _this.hashMapAlpha[data.hashAlpha] = _this.get(data.hashAlpha) || parent;
1763
- _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
1684
+ this.hashMapAlpha[data.hashAlpha] = this.get(data.hashAlpha) || parent;
1685
+ this.hashMapBeta[data.hashBeta] = this.get(data.hashBeta) || parent;
1764
1686
  };
1765
- this.resize = function (el, width, height) {
1687
+ this.resize = (el, width, height) => {
1766
1688
  if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
1767
1689
  el.style.width = width + "px" /* Layout.Constant.Pixel */;
1768
1690
  el.style.height = height + "px" /* Layout.Constant.Pixel */;
1769
1691
  el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
1770
1692
  }
1771
1693
  };
1772
- this.element = function (nodeId) {
1773
- return nodeId !== null && nodeId > 0 && nodeId in _this.nodes ? _this.nodes[nodeId] : null;
1694
+ this.element = (nodeId) => {
1695
+ return nodeId !== null && nodeId > 0 && nodeId in this.nodes ? this.nodes[nodeId] : null;
1774
1696
  };
1775
- this.animateChange = function (event) {
1776
- var animation = _this.animations[event.data.id];
1697
+ this.animateChange = (event) => {
1698
+ let animation = this.animations[event.data.id];
1777
1699
  if (!animation && event.data.operation !== 0 /* AnimationOperation.Create */) {
1778
1700
  // We didn't have a reference to this animation. This shouldn't happen, but returning here
1779
1701
  // to ensure we don't throw any errors.
@@ -1781,10 +1703,10 @@ var LayoutHelper = /** @class */ (function () {
1781
1703
  }
1782
1704
  switch (event.data.operation) {
1783
1705
  case 0 /* AnimationOperation.Create */:
1784
- var target = _this.element(event.data.targetId);
1706
+ let target = this.element(event.data.targetId);
1785
1707
  // only create the animation if we successfully found the target, an animation without a target will throw an error
1786
1708
  if (target) {
1787
- _this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1709
+ this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1788
1710
  }
1789
1711
  break;
1790
1712
  case 3 /* AnimationOperation.Cancel */:
@@ -1804,39 +1726,32 @@ var LayoutHelper = /** @class */ (function () {
1804
1726
  break;
1805
1727
  }
1806
1728
  };
1807
- this.dom = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
1808
- var doc;
1809
- return __generator(this, function (_a) {
1810
- switch (_a.label) {
1811
- case 0:
1812
- if (!event) return [3 /*break*/, 2];
1813
- doc = this.state.window.document;
1814
- if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
1815
- doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1816
- // Render all DOM events to reconstruct the page
1817
- this.markup(event, useproxy);
1818
- // Wait on all stylesheets and fonts to finish loading
1819
- return [4 /*yield*/, Promise.all(this.stylesheets.concat(this.fonts))];
1820
- case 1:
1821
- // Wait on all stylesheets and fonts to finish loading
1822
- _a.sent();
1823
- // Toggle back the visibility of target window
1824
- doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1825
- _a.label = 2;
1826
- case 2: return [2 /*return*/];
1729
+ this.dom = (event, useproxy) => __awaiter(this, void 0, void 0, function* () {
1730
+ if (event) {
1731
+ // When setting up rendering for the first time, start off with hidden target window
1732
+ // This ensures we do not show flickers to the end user
1733
+ let doc = this.state.window.document;
1734
+ if (doc && doc.documentElement) {
1735
+ doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1736
+ // Render all DOM events to reconstruct the page
1737
+ this.markup(event, useproxy);
1738
+ // Wait on all stylesheets and fonts to finish loading
1739
+ yield Promise.all(this.stylesheets.concat(this.fonts));
1740
+ // Toggle back the visibility of target window
1741
+ doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1827
1742
  }
1828
- });
1829
- }); };
1830
- this.styleChange = function (event) {
1743
+ }
1744
+ });
1745
+ this.styleChange = (event) => {
1831
1746
  switch (event.event) {
1832
1747
  case 46 /* Data.Event.StyleSheetUpdate */:
1833
- var styleSheet = _this.adoptedStyleSheets[event.data.id];
1748
+ let styleSheet = this.adoptedStyleSheets[event.data.id];
1834
1749
  if (!styleSheet && event.data.operation !== 0 /* StyleSheetOperation.Create */) {
1835
1750
  return;
1836
1751
  }
1837
1752
  switch (event.data.operation) {
1838
1753
  case 0 /* StyleSheetOperation.Create */:
1839
- _this.adoptedStyleSheets[event.data.id] = new _this.state.window.CSSStyleSheet();
1754
+ this.adoptedStyleSheets[event.data.id] = new this.state.window.CSSStyleSheet();
1840
1755
  break;
1841
1756
  case 1 /* StyleSheetOperation.Replace */:
1842
1757
  styleSheet.replace(event.data.cssRules);
@@ -1847,61 +1762,63 @@ var LayoutHelper = /** @class */ (function () {
1847
1762
  }
1848
1763
  break;
1849
1764
  case 45 /* Data.Event.StyleSheetAdoption */:
1850
- _this.setDocumentStyles(event.data.id, event.data.newIds);
1765
+ this.setDocumentStyles(event.data.id, event.data.newIds);
1851
1766
  break;
1852
1767
  }
1853
1768
  };
1854
- this.customElement = function (event) {
1855
- if (!_this.state.window.customElements.get(event.data.name)) {
1856
- _this.state.window.customElements.define(event.data.name, /** @class */ (function (_super) {
1857
- __extends(class_1, _super);
1858
- function class_1() {
1859
- return _super !== null && _super.apply(this, arguments) || this;
1860
- }
1861
- return class_1;
1862
- }(_this.state.window.HTMLElement)));
1769
+ this.customElement = (event) => {
1770
+ const tagName = event.data.name;
1771
+ if (!this.state.window.customElements.get(tagName)) {
1772
+ try {
1773
+ // Use eval to create class in target window context (avoids ES5 transpilation issues)
1774
+ const EmptyElement = this.state.window.eval('(class extends HTMLElement { constructor() { super(); } })');
1775
+ this.state.window.customElements.define(tagName, EmptyElement);
1776
+ }
1777
+ catch (e) {
1778
+ console.error(`Failed to define custom element ${tagName}:`, e);
1779
+ }
1863
1780
  }
1864
1781
  };
1865
- this.exists = function (hash) {
1782
+ this.exists = (hash) => {
1866
1783
  if (hash) {
1867
- var match = _this.get(hash);
1784
+ let match = this.get(hash);
1868
1785
  if (match) {
1869
- var rectangle = match.getBoundingClientRect();
1786
+ let rectangle = match.getBoundingClientRect();
1870
1787
  return rectangle && rectangle.width > 0 && rectangle.height > 0;
1871
1788
  }
1872
1789
  }
1873
1790
  return false;
1874
1791
  };
1875
- this.markup = function (event, useproxy) {
1792
+ this.markup = (event, useproxy) => {
1876
1793
  var _a, _b, _c, _d, _e;
1877
- var data = event.data;
1878
- var type = event.event;
1879
- var doc = _this.state.window.document;
1880
- var retryEvent = {
1794
+ let data = event.data;
1795
+ let type = event.event;
1796
+ let doc = this.state.window.document;
1797
+ let retryEvent = {
1881
1798
  data: [],
1882
1799
  time: event.time,
1883
1800
  event: event.event
1884
1801
  };
1885
- var _loop_1 = function (node) {
1886
- var parent_1 = _this.element(node.parent);
1887
- var pivot = _this.element(node.previous);
1888
- var insert = _this.insertAfter;
1889
- var tag = node.tag;
1802
+ for (let node of data) {
1803
+ let parent = this.element(node.parent);
1804
+ let pivot = this.element(node.previous);
1805
+ let insert = this.insertAfter;
1806
+ let tag = node.tag;
1890
1807
  if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1891
1808
  tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1892
1809
  }
1893
- if (parent_1 === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1810
+ if (parent === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1894
1811
  // We are referencing a parent for this node that hasn't been created yet. Push it to a list of nodes to
1895
1812
  // try once we are finished with other nodes within this event. Though we don't require HTML tags to
1896
1813
  // have a parent as they are typically the root.
1897
1814
  retryEvent.data.push(node);
1898
- return "continue";
1815
+ continue;
1899
1816
  }
1900
1817
  switch (tag) {
1901
1818
  case "*D" /* Layout.Constant.DocumentTag */:
1902
- var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1819
+ let tagDoc = tag !== node.tag ? (parent ? parent.contentDocument : null) : doc;
1903
1820
  if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1904
- _this.reset();
1821
+ this.reset();
1905
1822
  }
1906
1823
  if (typeof XMLSerializer !== "undefined" && tagDoc) {
1907
1824
  tagDoc.open();
@@ -1912,49 +1829,49 @@ var LayoutHelper = /** @class */ (function () {
1912
1829
  case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1913
1830
  // In case of polyfill, map shadow dom to it's parent for rendering purposes
1914
1831
  // All its children should be inserted as regular children to the parent node.
1915
- _this.nodes[node.id] = parent_1;
1916
- _this.addToHashMap(node, parent_1);
1832
+ this.nodes[node.id] = parent;
1833
+ this.addToHashMap(node, parent);
1917
1834
  break;
1918
1835
  case "*S" /* Layout.Constant.ShadowDomTag */:
1919
- if (parent_1) {
1920
- var shadowRoot = _this.element(node.id);
1921
- shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
1922
- _this.nodes[node.id] = shadowRoot;
1923
- _this.addToHashMap(node, shadowRoot);
1924
- _this.addStyles(node.id);
1836
+ if (parent) {
1837
+ let shadowRoot = this.element(node.id);
1838
+ shadowRoot = shadowRoot ? shadowRoot : parent.attachShadow({ mode: "open" });
1839
+ this.nodes[node.id] = shadowRoot;
1840
+ this.addToHashMap(node, shadowRoot);
1841
+ this.addStyles(node.id);
1925
1842
  }
1926
1843
  break;
1927
1844
  case "*T" /* Layout.Constant.TextTag */:
1928
- var textElement = _this.element(node.id);
1845
+ let textElement = this.element(node.id);
1929
1846
  textElement = textElement ? textElement : doc.createTextNode(null);
1930
1847
  textElement.nodeValue = node.value;
1931
- insert(node, parent_1, textElement, pivot);
1848
+ insert(node, parent, textElement, pivot);
1932
1849
  break;
1933
1850
  case "*M" /* Layout.Constant.SuspendMutationTag */:
1934
- var suspendedElement = _this.element(node.id);
1851
+ let suspendedElement = this.element(node.id);
1935
1852
  if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1936
1853
  suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1937
1854
  }
1938
1855
  break;
1939
1856
  case "HTML":
1940
- if (_this.primaryHtmlNodeId === null) {
1941
- _this.primaryHtmlNodeId = node.id;
1857
+ if (this.primaryHtmlNodeId === null) {
1858
+ this.primaryHtmlNodeId = node.id;
1942
1859
  }
1943
- var isIframe = tag !== node.tag;
1860
+ let isIframe = tag !== node.tag;
1944
1861
  // when we see multiple HTML nodes in the same document we should treat subsequent ones as child elements
1945
1862
  // rather than redefining our visualization base on them. It's technically illegal HTML but enough sites have
1946
1863
  // this structure that we are robust against it.
1947
- if (_this.primaryHtmlNodeId !== node.id && !isIframe) {
1948
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1864
+ if (this.primaryHtmlNodeId !== node.id && !isIframe) {
1865
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
1949
1866
  break;
1950
1867
  }
1951
- var htmlDoc = isIframe ? (parent_1 ? parent_1.contentDocument : null) : doc;
1868
+ let htmlDoc = isIframe ? (parent ? parent.contentDocument : null) : doc;
1952
1869
  if (htmlDoc !== null) {
1953
- var docElement = _this.element(node.id);
1870
+ let docElement = this.element(node.id);
1954
1871
  if (docElement === null) {
1955
- var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1872
+ let newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1956
1873
  docElement = newDoc.documentElement;
1957
- var p = htmlDoc.importNode(docElement, true);
1874
+ let p = htmlDoc.importNode(docElement, true);
1958
1875
  htmlDoc.replaceChild(p, htmlDoc.documentElement);
1959
1876
  if (htmlDoc.head) {
1960
1877
  htmlDoc.head.parentNode.removeChild(htmlDoc.head);
@@ -1963,164 +1880,159 @@ var LayoutHelper = /** @class */ (function () {
1963
1880
  htmlDoc.body.parentNode.removeChild(htmlDoc.body);
1964
1881
  }
1965
1882
  }
1966
- _this.setAttributes(htmlDoc.documentElement, node);
1883
+ this.setAttributes(htmlDoc.documentElement, node);
1967
1884
  // If we are still processing discover events, keep the markup hidden until we are done
1968
- if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1885
+ if (type === 5 /* Data.Event.Discover */ && !parent) {
1969
1886
  htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1970
1887
  }
1971
- _this.nodes[node.id] = htmlDoc.documentElement;
1972
- _this.addToHashMap(node, htmlDoc.documentElement);
1888
+ this.nodes[node.id] = htmlDoc.documentElement;
1889
+ this.addToHashMap(node, htmlDoc.documentElement);
1973
1890
  }
1974
1891
  break;
1975
1892
  case "HEAD":
1976
- var headElement = _this.element(node.id);
1893
+ let headElement = this.element(node.id);
1977
1894
  if (headElement === null) {
1978
1895
  headElement = doc.createElement(node.tag);
1979
1896
  if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1980
- var base = doc.createElement("base");
1897
+ let base = doc.createElement("base");
1981
1898
  base.href = node.attributes["*B" /* Layout.Constant.Base */];
1982
1899
  headElement.appendChild(base);
1983
1900
  }
1984
1901
  // Add custom styles to assist with visualization
1985
- var custom = doc.createElement("style");
1902
+ let custom = doc.createElement("style");
1986
1903
  custom.setAttribute("clarity-custom-styles" /* Constant.CustomStyleTag */, "true");
1987
- custom.innerText = _this.getCustomStyle();
1904
+ custom.innerText = this.getCustomStyle();
1988
1905
  headElement.appendChild(custom);
1989
1906
  }
1990
- _this.setAttributes(headElement, node);
1991
- insert(node, parent_1, headElement, pivot);
1907
+ this.setAttributes(headElement, node);
1908
+ insert(node, parent, headElement, pivot);
1992
1909
  break;
1993
1910
  case "LINK":
1994
- var linkElement_1 = _this.element(node.id);
1995
- linkElement_1 = linkElement_1 ? linkElement_1 : _this.createElement(doc, node.tag);
1911
+ let linkElement = this.element(node.id);
1912
+ linkElement = linkElement ? linkElement : this.createElement(doc, node.tag);
1996
1913
  if (!node.attributes) {
1997
1914
  node.attributes = {};
1998
1915
  }
1999
- _this.setAttributes(linkElement_1, node);
1916
+ this.setAttributes(linkElement, node);
2000
1917
  if ("rel" in node.attributes) {
2001
1918
  if (node.attributes["rel"] === "stylesheet" /* Constant.StyleSheet */) {
2002
- _this.stylesheets.push(new Promise(function (resolve) {
2003
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1919
+ this.stylesheets.push(new Promise((resolve) => {
1920
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
2004
1921
  if (proxy) {
2005
- if (linkElement_1.integrity) {
2006
- linkElement_1.removeAttribute('integrity');
1922
+ if (linkElement.integrity) {
1923
+ linkElement.removeAttribute('integrity');
2007
1924
  }
2008
- linkElement_1.href = proxy(linkElement_1.href, linkElement_1.id, "stylesheet" /* Constant.StyleSheet */);
1925
+ linkElement.href = proxy(linkElement.href, linkElement.id, "stylesheet" /* Constant.StyleSheet */);
2009
1926
  }
2010
- linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1927
+ linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
2011
1928
  setTimeout(resolve, LayoutHelper.TIMEOUT);
2012
1929
  }));
2013
1930
  }
2014
1931
  else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
2015
1932
  && (((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.as) === "style" || ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.as) === "font")) {
2016
- _this.fonts.push(new Promise(function (resolve) {
2017
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
2018
- linkElement_1.href = proxy ? proxy(linkElement_1.href, linkElement_1.id, node.attributes.as) : linkElement_1.href;
2019
- linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1933
+ this.fonts.push(new Promise((resolve) => {
1934
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1935
+ linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
1936
+ linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
2020
1937
  setTimeout(resolve, LayoutHelper.TIMEOUT);
2021
1938
  }));
2022
1939
  }
2023
1940
  }
2024
- insert(node, parent_1, linkElement_1, pivot);
1941
+ insert(node, parent, linkElement, pivot);
2025
1942
  break;
2026
1943
  case "IMG" /* Layout.Constant.ImageTag */:
2027
- var imgElement = (_c = _this.element(node.id)) !== null && _c !== void 0 ? _c : _this.createElement(doc, node.tag);
2028
- var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1944
+ let imgElement = (_c = this.element(node.id)) !== null && _c !== void 0 ? _c : this.createElement(doc, node.tag);
1945
+ const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
2029
1946
  if (proxy && !!((_d = node.attributes) === null || _d === void 0 ? void 0 : _d.src)) {
2030
1947
  node.attributes.src = proxy(node.attributes.src, node.attributes.id, "IMG" /* Layout.Constant.ImageTag */);
2031
1948
  }
2032
- _this.setAttributes(imgElement, node);
2033
- _this.resize(imgElement, node.width, node.height);
2034
- insert(node, parent_1, imgElement, pivot);
1949
+ this.setAttributes(imgElement, node);
1950
+ this.resize(imgElement, node.width, node.height);
1951
+ insert(node, parent, imgElement, pivot);
2035
1952
  break;
2036
1953
  case "STYLE":
2037
- var styleElement = (_e = _this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
2038
- _this.setAttributes(styleElement, node);
1954
+ let styleElement = (_e = this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
1955
+ this.setAttributes(styleElement, node);
2039
1956
  styleElement.textContent = node.value;
2040
- insert(node, parent_1, styleElement, pivot);
2041
- _this.style(styleElement);
1957
+ insert(node, parent, styleElement, pivot);
1958
+ this.style(styleElement);
2042
1959
  break;
2043
1960
  case "IFRAME":
2044
- var iframeElement = _this.element(node.id);
2045
- iframeElement = iframeElement ? iframeElement : _this.createElement(doc, node.tag);
1961
+ let iframeElement = this.element(node.id);
1962
+ iframeElement = iframeElement ? iframeElement : this.createElement(doc, node.tag);
2046
1963
  if (!node.attributes) {
2047
1964
  node.attributes = {};
2048
1965
  }
2049
- _this.setAttributes(iframeElement, node);
2050
- insert(node, parent_1, iframeElement, pivot);
1966
+ this.setAttributes(iframeElement, node);
1967
+ insert(node, parent, iframeElement, pivot);
2051
1968
  break;
2052
1969
  case "SCRIPT":
2053
1970
  {
2054
1971
  node.id = -1; // We want to ensure children of script tags are not processed
2055
1972
  node.value = null; // We don't want to set any potential script content
2056
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1973
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
2057
1974
  break;
2058
1975
  }
2059
1976
  case "DIALOG":
2060
1977
  {
2061
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
2062
- var domElement = _this.element(node.id);
2063
- var renderOptions = getDialogRenderOptions(node.attributes, domElement);
2064
- renderDialog(domElement, renderOptions, _this.state.options.logerror);
1978
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
1979
+ const domElement = this.element(node.id);
1980
+ const renderOptions = getDialogRenderOptions(node.attributes, domElement);
1981
+ renderDialog(domElement, renderOptions, this.state.options.logerror);
2065
1982
  break;
2066
1983
  }
2067
1984
  default:
2068
- _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1985
+ this.insertDefaultElement(node, parent, pivot, doc, insert);
2069
1986
  break;
2070
1987
  }
2071
1988
  // Track state for this node
2072
1989
  if (node.id) {
2073
- _this.events[node.id] = node;
1990
+ this.events[node.id] = node;
2074
1991
  }
2075
- };
2076
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
2077
- var node = data_1[_i];
2078
- _loop_1(node);
2079
1992
  }
2080
1993
  // only retry failed nodes if we are still making positive progress. If we have the same number of
2081
1994
  // nodes we started with, then we would just be spinning on an orphaned subtree.
2082
1995
  if (retryEvent.data.length > 0 && retryEvent.data.length !== event.data.length) {
2083
- _this.markup(retryEvent, useproxy);
1996
+ this.markup(retryEvent, useproxy);
2084
1997
  }
2085
1998
  };
2086
- this.insertDefaultElement = function (node, parent, pivot, doc, insert) {
2087
- var domElement = _this.element(node.id);
2088
- domElement = domElement ? domElement : _this.createElement(doc, node.tag);
2089
- _this.setAttributes(domElement, node);
2090
- _this.resize(domElement, node.width, node.height);
1999
+ this.insertDefaultElement = (node, parent, pivot, doc, insert) => {
2000
+ let domElement = this.element(node.id);
2001
+ domElement = domElement ? domElement : this.createElement(doc, node.tag);
2002
+ this.setAttributes(domElement, node);
2003
+ this.resize(domElement, node.width, node.height);
2091
2004
  insert(node, parent, domElement, pivot);
2092
2005
  };
2093
- this.style = function (node, resolve) {
2094
- if (resolve === void 0) { resolve = null; }
2006
+ this.style = (node, resolve = null) => {
2095
2007
  // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
2096
2008
  try {
2097
- var sheet = node.sheet;
2098
- var cssRules = sheet ? sheet.cssRules : [];
2099
- for (var i = 0; i < cssRules.length; i++) {
2009
+ const sheet = node.sheet;
2010
+ let cssRules = sheet ? sheet.cssRules : [];
2011
+ for (let i = 0; i < cssRules.length; i++) {
2100
2012
  if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
2101
- var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
2013
+ let css = cssRules[i].cssText.replace(/:hover/g, `[${"clarity-hover" /* Constant.CustomHover */}]`);
2102
2014
  sheet.removeRule(i);
2103
2015
  sheet.insertRule(css, i);
2104
2016
  }
2105
2017
  }
2106
2018
  }
2107
2019
  catch (e) {
2108
- if (_this.state.options.logerror) {
2109
- _this.state.options.logerror(e);
2020
+ if (this.state.options.logerror) {
2021
+ this.state.options.logerror(e);
2110
2022
  }
2111
2023
  }
2112
2024
  if (resolve) {
2113
2025
  resolve();
2114
2026
  }
2115
2027
  };
2116
- this.addStyles = function (id) {
2117
- var adoptedStylesToAdd = _this.stylesToApply[id];
2028
+ this.addStyles = (id) => {
2029
+ let adoptedStylesToAdd = this.stylesToApply[id];
2118
2030
  if (adoptedStylesToAdd && adoptedStylesToAdd.length > 0) {
2119
- _this.setDocumentStyles(id, _this.stylesToApply[id]);
2120
- delete _this.stylesToApply[id];
2031
+ this.setDocumentStyles(id, this.stylesToApply[id]);
2032
+ delete this.stylesToApply[id];
2121
2033
  }
2122
2034
  };
2123
- this.createElement = function (doc, tag) {
2035
+ this.createElement = (doc, tag) => {
2124
2036
  if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
2125
2037
  return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
2126
2038
  }
@@ -2129,24 +2041,24 @@ var LayoutHelper = /** @class */ (function () {
2129
2041
  }
2130
2042
  catch (ex) {
2131
2043
  // We log the warning on non-standard markup but continue with the visualization
2132
- console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
2044
+ console.warn(`Exception encountered while creating element ${tag}: ${ex}`);
2133
2045
  return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
2134
2046
  }
2135
2047
  };
2136
- this.insertAfter = function (data, parent, node, previous) {
2048
+ this.insertAfter = (data, parent, node, previous) => {
2137
2049
  // Skip over no-op changes where parent and previous element is still the same
2138
2050
  // 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
2139
- if (_this.events[data.id] && _this.events[data.id].parent === data.parent && _this.events[data.id].previous === data.previous) {
2051
+ if (this.events[data.id] && this.events[data.id].parent === data.parent && this.events[data.id].previous === data.previous) {
2140
2052
  return;
2141
2053
  }
2142
2054
  // In case parent is a Shadow DOM, previous.parentElement will return null but previous.parentNode will return a valid node
2143
- var next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
2144
- next = previous === null && parent ? _this.firstChild(parent) : next;
2145
- _this.insertBefore(data, parent, node, next);
2055
+ let next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
2056
+ next = previous === null && parent ? this.firstChild(parent) : next;
2057
+ this.insertBefore(data, parent, node, next);
2146
2058
  };
2147
- this.firstChild = function (node) {
2059
+ this.firstChild = (node) => {
2148
2060
  var _a;
2149
- var child = node.firstChild;
2061
+ let child = node.firstChild;
2150
2062
  // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
2151
2063
  if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
2152
2064
  if ((_a = child.nextSibling) === null || _a === void 0 ? void 0 : _a.hasAttribute('clarity-custom-styles')) {
@@ -2158,25 +2070,25 @@ var LayoutHelper = /** @class */ (function () {
2158
2070
  return child;
2159
2071
  };
2160
2072
  // Mask images within a masked ancestor element in the node has a background image.
2161
- this.mask = function (node) {
2073
+ this.mask = (node) => {
2162
2074
  var _a, _b, _c;
2163
- if (node && _this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
2164
- var urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
2165
- var computedStyles = window.getComputedStyle(node);
2166
- 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));
2167
- var masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, "[".concat("data-clarity-mask" /* LayoutConstants.MaskData */, "]"));
2075
+ if (node && this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
2076
+ const urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
2077
+ const computedStyles = window.getComputedStyle(node);
2078
+ 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));
2079
+ const masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, `[${"data-clarity-mask" /* LayoutConstants.MaskData */}]`);
2168
2080
  if (hasBackgroundImage && masked) {
2169
- node.style.background = _this.MaskedBackgroundImageStyle;
2081
+ node.style.background = this.MaskedBackgroundImageStyle;
2170
2082
  }
2171
2083
  }
2172
2084
  };
2173
- this.insertBefore = function (data, parent, node, next) {
2085
+ this.insertBefore = (data, parent, node, next) => {
2174
2086
  if (parent !== null) {
2175
2087
  // Compare against both parentNode and parentElement to ensure visualization works correctly for shadow DOMs
2176
2088
  next = next && (next.parentElement !== parent && next.parentNode !== parent) ? null : next;
2177
2089
  try {
2178
2090
  parent.insertBefore(node, next);
2179
- _this.mask(node);
2091
+ this.mask(node);
2180
2092
  }
2181
2093
  catch (ex) {
2182
2094
  console.warn("Node: " + node + " | Parent: " + parent + " | Data: " + JSON.stringify(data));
@@ -2189,34 +2101,34 @@ var LayoutHelper = /** @class */ (function () {
2189
2101
  else if (parent === null && node.parentNode !== null) {
2190
2102
  node.parentNode.removeChild(node);
2191
2103
  }
2192
- _this.nodes[data.id] = node;
2193
- _this.addToHashMap(data, node);
2104
+ this.nodes[data.id] = node;
2105
+ this.addToHashMap(data, node);
2194
2106
  };
2195
- this.setAttributes = function (node, data) {
2196
- var attributes = data.attributes || {};
2197
- var sameorigin = false;
2107
+ this.setAttributes = (node, data) => {
2108
+ let attributes = data.attributes || {};
2109
+ let sameorigin = false;
2198
2110
  // Clarity attributes
2199
- attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
2200
- attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = "".concat(data.hashAlpha);
2201
- attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
2202
- var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
2111
+ attributes["data-clarity-id" /* Constant.Id */] = `${data.id}`;
2112
+ attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = `${data.hashAlpha}`;
2113
+ attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = `${data.hashBeta}`;
2114
+ let tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
2203
2115
  // First remove all its existing attributes
2204
2116
  if (node.attributes) {
2205
- var length_1 = node.attributes.length;
2206
- while (node.attributes && length_1 > 0) {
2117
+ let length = node.attributes.length;
2118
+ while (node.attributes && length > 0) {
2207
2119
  // Do not remove "clarity-hover" attribute and let it be managed by interaction module
2208
2120
  // This helps avoid flickers during visualization
2209
2121
  if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
2210
2122
  node.removeAttribute(node.attributes[0].name);
2211
2123
  }
2212
- length_1--;
2124
+ length--;
2213
2125
  }
2214
2126
  }
2215
2127
  // Add new attributes
2216
- for (var attribute in attributes) {
2128
+ for (let attribute in attributes) {
2217
2129
  if (attributes[attribute] !== undefined) {
2218
2130
  try {
2219
- var v = attributes[attribute];
2131
+ let v = attributes[attribute];
2220
2132
  if (attribute.indexOf("xlink:") === 0) {
2221
2133
  node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
2222
2134
  }
@@ -2227,30 +2139,30 @@ var LayoutHelper = /** @class */ (function () {
2227
2139
  // Do nothing if we encounter internal Clarity attributes
2228
2140
  }
2229
2141
  else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
2230
- node.setAttribute("data-clarity-".concat(attribute), v);
2142
+ node.setAttribute(`data-clarity-${attribute}`, v);
2231
2143
  }
2232
2144
  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:'))))) {
2233
- if (_this.vNext) {
2145
+ if (this.vNext) {
2234
2146
  if (v.startsWith('blob:')) {
2235
2147
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
2236
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
2148
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
2237
2149
  }
2238
2150
  else {
2239
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
2151
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
2240
2152
  }
2241
2153
  }
2242
2154
  else {
2243
2155
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
2244
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
2156
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
2245
2157
  }
2246
2158
  else {
2247
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
2159
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
2248
2160
  }
2249
2161
  }
2250
2162
  }
2251
2163
  else {
2252
2164
  node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
2253
- var size = "l" /* Constant.Large */;
2165
+ let size = "l" /* Constant.Large */;
2254
2166
  if (data.width) {
2255
2167
  size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
2256
2168
  }
@@ -2258,7 +2170,7 @@ var LayoutHelper = /** @class */ (function () {
2258
2170
  }
2259
2171
  }
2260
2172
  else {
2261
- node.setAttribute(attribute, _this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
2173
+ node.setAttribute(attribute, this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
2262
2174
  }
2263
2175
  }
2264
2176
  catch (ex) {
@@ -2268,7 +2180,7 @@ var LayoutHelper = /** @class */ (function () {
2268
2180
  }
2269
2181
  }
2270
2182
  if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute === "function" /* Constant.Function */) {
2271
- if (_this.svgFitsText(node)) {
2183
+ if (this.svgFitsText(node)) {
2272
2184
  node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
2273
2185
  }
2274
2186
  else {
@@ -2287,57 +2199,58 @@ var LayoutHelper = /** @class */ (function () {
2287
2199
  node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
2288
2200
  }
2289
2201
  };
2290
- this.getMobileCustomStyle = function () {
2291
- if (_this.isMobile) {
2292
- return "*{scrollbar-width: none; scrollbar-gutter: unset;};";
2202
+ this.getMobileCustomStyle = () => {
2203
+ if (this.isMobile) {
2204
+ return `*{scrollbar-width: none; scrollbar-gutter: unset;};`;
2293
2205
  }
2294
2206
  return '';
2295
2207
  };
2296
- this.getCustomStyle = function () {
2297
- return _this.getImageHiddenCss() +
2298
- _this.getIframeUnavailableCss() +
2299
- _this.getBlobUnavailableCss() +
2300
- _this.getBackgroundCss() +
2301
- "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }") +
2302
- "body { font-size: initial; }\n ".concat(_this.getMobileCustomStyle());
2208
+ this.getCustomStyle = () => {
2209
+ return this.getImageHiddenCss() +
2210
+ this.getIframeUnavailableCss() +
2211
+ this.getBlobUnavailableCss() +
2212
+ this.getBackgroundCss() +
2213
+ `*[${"data-clarity-suspend" /* Constant.Suspend */}] { filter: grayscale(100%); }` +
2214
+ `body { font-size: initial; }
2215
+ ${this.getMobileCustomStyle()}`;
2303
2216
  };
2304
- this.svgFitsText = function (inputElement) {
2217
+ this.svgFitsText = (inputElement) => {
2305
2218
  var dimensions = inputElement.getBoundingClientRect();
2306
2219
  if (dimensions.width >= 132 /* Setting.LargeSvg */ && dimensions.height >= 132 /* Setting.LargeSvg */) {
2307
2220
  return true;
2308
2221
  }
2309
2222
  return false;
2310
2223
  };
2311
- this.getIframeUnavailableCss = function () {
2312
- if (_this.vNext) {
2313
- return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable-small" /* Constant.UnavailableSmall */, "] { ").concat(iframeUnavailableSvgSmall, " }") +
2314
- "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { ").concat(iframeUnavailableSvg[_this.locale], " }");
2224
+ this.getIframeUnavailableCss = () => {
2225
+ if (this.vNext) {
2226
+ return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable-small" /* Constant.UnavailableSmall */}] { ${iframeUnavailableSvgSmall} }` +
2227
+ `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { ${iframeUnavailableSvg[this.locale]} }`;
2315
2228
  }
2316
2229
  else {
2317
- 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 */, "'); }");
2230
+ 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 */}'); }`;
2318
2231
  }
2319
2232
  };
2320
- this.getBlobUnavailableCss = function () {
2321
- if (_this.vNext) {
2322
- return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvgSmall, " }") +
2323
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvg[_this.locale], " }");
2233
+ this.getBlobUnavailableCss = () => {
2234
+ if (this.vNext) {
2235
+ return `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvgSmall} }` +
2236
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvg[this.locale]} }`;
2324
2237
  }
2325
2238
  return '';
2326
2239
  };
2327
- this.getImageHiddenCss = function () {
2328
- if (_this.vNext) {
2329
- return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvgSmall, " }") +
2330
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvg[_this.locale], " }");
2240
+ this.getImageHiddenCss = () => {
2241
+ if (this.vNext) {
2242
+ return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${imageMaskedSvgSmall} }` +
2243
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${imageMaskedSvg[this.locale]} }`;
2331
2244
  }
2332
2245
  else {
2333
- 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; }") +
2334
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
2335
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
2336
- "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }");
2246
+ 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; }` +
2247
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}] { background-size: 18px 18px; }` +
2248
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"m" /* Constant.Medium */}] { background-size: 24px 24px; }` +
2249
+ `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}] { background-size: 36px 36px; }`;
2337
2250
  }
2338
2251
  };
2339
- this.getBackgroundCss = function () {
2340
- if (_this.vNext) {
2252
+ this.getBackgroundCss = () => {
2253
+ if (this.vNext) {
2341
2254
  return sharedStyle;
2342
2255
  }
2343
2256
  return '';
@@ -2347,8 +2260,8 @@ var LayoutHelper = /** @class */ (function () {
2347
2260
  this.vNext = vNext;
2348
2261
  this.locale = locale;
2349
2262
  }
2350
- LayoutHelper.prototype.setDocumentStyles = function (documentId, styleIds) {
2351
- var targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
2263
+ setDocumentStyles(documentId, styleIds) {
2264
+ let targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
2352
2265
  if (!targetDocument) {
2353
2266
  if (!this.stylesToApply[documentId]) {
2354
2267
  this.stylesToApply[documentId] = [];
@@ -2356,70 +2269,59 @@ var LayoutHelper = /** @class */ (function () {
2356
2269
  this.stylesToApply[documentId] = styleIds;
2357
2270
  return;
2358
2271
  }
2359
- var newSheets = [];
2360
- for (var _i = 0, styleIds_1 = styleIds; _i < styleIds_1.length; _i++) {
2361
- var styleId = styleIds_1[_i];
2362
- var styleSheet = this.adoptedStyleSheets[styleId];
2272
+ let newSheets = [];
2273
+ for (var styleId of styleIds) {
2274
+ let styleSheet = this.adoptedStyleSheets[styleId];
2363
2275
  if (styleSheet) {
2364
2276
  newSheets.push(styleSheet);
2365
2277
  }
2366
2278
  }
2367
2279
  targetDocument.adoptedStyleSheets = newSheets;
2368
- };
2369
- LayoutHelper.prototype.isSuspiciousAttribute = function (name, value) {
2280
+ }
2281
+ isSuspiciousAttribute(name, value) {
2370
2282
  // Block event handlers entirely
2371
2283
  if (name.startsWith('on')) {
2372
2284
  return true;
2373
2285
  }
2374
2286
  // Check for JavaScript protocols and dangerous patterns
2375
- var dangerous = [
2287
+ const dangerous = [
2376
2288
  /^\s*javascript:/i,
2377
2289
  /^\s*data:text\/html/i,
2378
2290
  /^\s*vbscript:/i
2379
2291
  ];
2380
- return dangerous.some(function (pattern) { return pattern.test(value); });
2381
- };
2382
- LayoutHelper.TIMEOUT = 3000;
2383
- return LayoutHelper;
2384
- }());
2292
+ return dangerous.some(pattern => pattern.test(value));
2293
+ }
2294
+ }
2295
+ LayoutHelper.TIMEOUT = 7000;
2385
2296
 
2386
- var Visualizer = /** @class */ (function () {
2387
- function Visualizer() {
2388
- var _this = this;
2297
+ class Visualizer {
2298
+ constructor() {
2389
2299
  this._state = null;
2390
2300
  this.renderTime = 0;
2391
2301
  this.hashFoundTime = -1;
2392
2302
  this._excludeClassNames = [];
2393
- this.configure = function (opts) {
2394
- _this._excludeClassNames = opts.excludeClassNames || [];
2395
- helper.selector.config(_this._excludeClassNames);
2396
- };
2397
- this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
2398
- return __generator(this, function (_a) {
2399
- switch (_a.label) {
2400
- case 0: return [4 /*yield*/, this.layout.dom(event)];
2401
- case 1:
2402
- _a.sent();
2403
- return [2 /*return*/];
2404
- }
2405
- });
2406
- }); };
2407
- this.get = function (hash) {
2303
+ this.configure = (opts) => {
2304
+ this._excludeClassNames = opts.excludeClassNames || [];
2305
+ helper.selector.config(this._excludeClassNames);
2306
+ };
2307
+ this.dom = (event) => __awaiter(this, void 0, void 0, function* () {
2308
+ yield this.layout.dom(event);
2309
+ });
2310
+ this.get = (hash) => {
2408
2311
  var _a;
2409
- return (_a = _this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
2312
+ return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
2410
2313
  };
2411
- this.shortCircuitRendering = function (strategy, domEvent, hash) {
2314
+ this.shortCircuitRendering = (strategy, domEvent, hash) => {
2412
2315
  switch (strategy) {
2413
2316
  case 1 /* ShortCircuitStrategy.HashFirstTimestamp */:
2414
- return _this.layout.exists(hash);
2317
+ return this.layout.exists(hash);
2415
2318
  case 2 /* ShortCircuitStrategy.HashFirstTimestampPlusBuffer */:
2416
- if (_this.hashFoundTime === -1 && _this.layout.exists(hash)) {
2417
- _this.hashFoundTime = domEvent.time;
2319
+ if (this.hashFoundTime === -1 && this.layout.exists(hash)) {
2320
+ this.hashFoundTime = domEvent.time;
2418
2321
  }
2419
- return (_this.hashFoundTime > -1) && (domEvent.time > _this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
2322
+ return (this.hashFoundTime > -1) && (domEvent.time > this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
2420
2323
  case 3 /* ShortCircuitStrategy.HashBeforeDeleted */:
2421
- for (var _i = 0, _a = domEvent.data; _i < _a.length; _i++) {
2422
- var node = _a[_i];
2324
+ for (let node of domEvent.data) {
2423
2325
  if ((node.hashAlpha === hash || node.hashBeta === hash) && node.parent === null) {
2424
2326
  return true;
2425
2327
  }
@@ -2430,106 +2332,82 @@ var Visualizer = /** @class */ (function () {
2430
2332
  return false;
2431
2333
  }
2432
2334
  };
2433
- this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) {
2434
- if (hash === void 0) { hash = null; }
2435
- if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
2436
- return __awaiter(_this, void 0, void 0, function () {
2437
- var merged, entry, _a, domEvent, e_1;
2438
- return __generator(this, function (_b) {
2439
- switch (_b.label) {
2440
- case 0:
2441
- if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
2442
- _b.label = 1;
2443
- case 1:
2444
- _b.trys.push([1, 10, , 11]);
2445
- merged = this.merge(decoded);
2446
- return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvasId: portalCanvasId })];
2447
- case 2:
2448
- _b.sent();
2449
- _b.label = 3;
2450
- case 3:
2451
- if (!(merged.events.length > 0)) return [3 /*break*/, 9];
2452
- entry = merged.events.shift();
2453
- _a = entry.event;
2454
- switch (_a) {
2455
- case 45 /* Data.Event.StyleSheetAdoption */: return [3 /*break*/, 4];
2456
- case 46 /* Data.Event.StyleSheetUpdate */: return [3 /*break*/, 4];
2457
- case 51 /* Data.Event.CustomElement */: return [3 /*break*/, 5];
2458
- case 6 /* Data.Event.Mutation */: return [3 /*break*/, 6];
2459
- }
2460
- return [3 /*break*/, 8];
2461
- case 4:
2462
- this.layout.styleChange(entry);
2463
- return [3 /*break*/, 8];
2464
- case 5:
2465
- this.layout.customElement(entry);
2466
- return [3 /*break*/, 8];
2467
- case 6:
2468
- domEvent = entry;
2469
- this.renderTime = domEvent.time;
2470
- if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
2471
- return [3 /*break*/, 8];
2472
- }
2473
- return [4 /*yield*/, this.layout.markup(domEvent, useproxy)];
2474
- case 7:
2475
- _b.sent();
2476
- return [3 /*break*/, 8];
2477
- case 8: return [3 /*break*/, 3];
2478
- case 9: return [3 /*break*/, 11];
2479
- case 10:
2480
- e_1 = _b.sent();
2481
- if (logerror) {
2482
- logerror(e_1);
2483
- }
2484
- return [3 /*break*/, 11];
2485
- case 11: return [2 /*return*/, this];
2335
+ this.html = (decoded, target, portalCanvasId, hash = null, useproxy, logerror, shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */) => __awaiter(this, void 0, void 0, function* () {
2336
+ if (decoded && decoded.length > 0 && target) {
2337
+ try {
2338
+ // Flatten the payload and parse all events out of them, sorted by time
2339
+ let merged = this.merge(decoded);
2340
+ yield this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
2341
+ // Render all mutations on top of the initial markup
2342
+ while (merged.events.length > 0) {
2343
+ let entry = merged.events.shift();
2344
+ switch (entry.event) {
2345
+ case 45 /* Data.Event.StyleSheetAdoption */:
2346
+ case 46 /* Data.Event.StyleSheetUpdate */:
2347
+ this.layout.styleChange(entry);
2348
+ break;
2349
+ case 51 /* Data.Event.CustomElement */:
2350
+ this.layout.customElement(entry);
2351
+ break;
2352
+ case 6 /* Data.Event.Mutation */:
2353
+ let domEvent = entry;
2354
+ this.renderTime = domEvent.time;
2355
+ if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
2356
+ break;
2357
+ }
2358
+ yield this.layout.markup(domEvent, useproxy);
2359
+ break;
2360
+ }
2486
2361
  }
2487
- });
2488
- });
2489
- };
2490
- this.time = function () {
2491
- return _this.renderTime;
2362
+ }
2363
+ catch (e) {
2364
+ if (logerror) {
2365
+ logerror(e);
2366
+ }
2367
+ }
2368
+ }
2369
+ return this;
2370
+ });
2371
+ this.time = () => {
2372
+ return this.renderTime;
2492
2373
  };
2493
- this.clickmap = function (activity) {
2494
- if (_this.state === null) {
2495
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
2374
+ this.clickmap = (activity) => {
2375
+ if (this.state === null) {
2376
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2496
2377
  }
2497
- _this.heatmap.click(activity);
2378
+ this.heatmap.click(activity);
2498
2379
  };
2499
- this.clearmap = function () {
2500
- if (_this.state === null) {
2501
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
2380
+ this.clearmap = () => {
2381
+ if (this.state === null) {
2382
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2502
2383
  }
2503
- _this.heatmap.clear();
2384
+ this.heatmap.clear();
2504
2385
  };
2505
- this.scrollmap = function (scrollData, avgFold, addMarkers) {
2506
- if (_this.state === null) {
2507
- throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
2386
+ this.scrollmap = (scrollData, avgFold, addMarkers) => {
2387
+ if (this.state === null) {
2388
+ throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2508
2389
  }
2509
- _this.heatmap.scroll(scrollData, avgFold, addMarkers);
2390
+ this.heatmap.scroll(scrollData, avgFold, addMarkers);
2510
2391
  };
2511
- this.merge = function (decoded) {
2512
- var merged = { timestamp: null, envelope: null, dom: null, events: [] };
2392
+ this.merge = (decoded) => {
2393
+ let merged = { timestamp: null, envelope: null, dom: null, events: [] };
2513
2394
  // Re-arrange decoded payloads in the order of their start time
2514
- decoded = decoded.sort(_this.sortPayloads);
2395
+ decoded = decoded.sort(this.sortPayloads);
2515
2396
  // Re-initialize enrich class if someone ends up calling merge function directly
2516
- _this.enrich = _this.enrich || new EnrichHelper();
2517
- helper.selector.config(_this._excludeClassNames);
2518
- _this.enrich.reset();
2397
+ this.enrich = this.enrich || new EnrichHelper();
2398
+ helper.selector.config(this._excludeClassNames);
2399
+ this.enrich.reset();
2519
2400
  // Walk through payloads and generate merged payload from an array of decoded payloads
2520
- for (var _i = 0, decoded_1 = decoded; _i < decoded_1.length; _i++) {
2521
- var payload = decoded_1[_i];
2401
+ for (let payload of decoded) {
2522
2402
  merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
2523
2403
  merged.envelope = payload.envelope;
2524
- for (var _a = 0, _b = Object.keys(payload); _a < _b.length; _a++) {
2525
- var key = _b[_a];
2526
- var p = payload[key];
2404
+ for (let key of Object.keys(payload)) {
2405
+ let p = payload[key];
2527
2406
  if (Array.isArray(p)) {
2528
- for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
2529
- var entry = p_1[_c];
2407
+ for (let entry of p) {
2530
2408
  switch (key) {
2531
2409
  case "dom" /* Constant.Dom */:
2532
- var dom = _this.enrich.selectors(entry);
2410
+ let dom = this.enrich.selectors(entry);
2533
2411
  if (entry.event === 5 /* Data.Event.Discover */) {
2534
2412
  merged.dom = dom;
2535
2413
  }
@@ -2545,65 +2423,58 @@ var Visualizer = /** @class */ (function () {
2545
2423
  }
2546
2424
  }
2547
2425
  }
2548
- merged.events = merged.events.sort(_this.sortEvents);
2426
+ merged.events = merged.events.sort(this.sortEvents);
2549
2427
  return merged;
2550
2428
  };
2551
- this.setup = function (target, options) { return __awaiter(_this, void 0, void 0, function () {
2552
- return __generator(this, function (_a) {
2553
- switch (_a.label) {
2554
- case 0:
2555
- this.reset();
2556
- if (options.excludeClassNames) {
2557
- this._excludeClassNames = options.excludeClassNames;
2558
- helper.selector.config(options.excludeClassNames);
2559
- }
2560
- // Infer options
2561
- options.pointer = "pointer" in options ? options.pointer : true;
2562
- options.canvas = "canvas" in options ? options.canvas : true;
2563
- options.keyframes = "keyframes" in options ? options.keyframes : false;
2564
- // Set visualization state
2565
- this._state = { window: target, options: options };
2566
- // Initialize helpers
2567
- this.enrich = new EnrichHelper();
2568
- this.data = new DataHelper(this.state);
2569
- this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2570
- this.heatmap = new HeatmapHelper(this.state, this.layout);
2571
- this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2572
- if (!options.dom) return [3 /*break*/, 2];
2573
- return [4 /*yield*/, this.layout.dom(options.dom, options.useproxy)];
2574
- case 1:
2575
- _a.sent();
2576
- _a.label = 2;
2577
- case 2: return [2 /*return*/, this];
2578
- }
2579
- });
2580
- }); };
2581
- this.render = function (events) {
2429
+ this.setup = (target, options) => __awaiter(this, void 0, void 0, function* () {
2430
+ this.reset();
2431
+ if (options.excludeClassNames) {
2432
+ this._excludeClassNames = options.excludeClassNames;
2433
+ helper.selector.config(options.excludeClassNames);
2434
+ }
2435
+ // Infer options
2436
+ options.pointer = "pointer" in options ? options.pointer : true;
2437
+ options.canvas = "canvas" in options ? options.canvas : true;
2438
+ options.keyframes = "keyframes" in options ? options.keyframes : false;
2439
+ // Set visualization state
2440
+ this._state = { window: target, options };
2441
+ // Initialize helpers
2442
+ this.enrich = new EnrichHelper();
2443
+ this.data = new DataHelper(this.state);
2444
+ this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2445
+ this.heatmap = new HeatmapHelper(this.state, this.layout);
2446
+ this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2447
+ // If discover event was passed, render it now
2448
+ if (options.dom) {
2449
+ yield this.layout.dom(options.dom, options.useproxy);
2450
+ }
2451
+ return this;
2452
+ });
2453
+ this.render = (events) => {
2582
2454
  var _a, _b;
2583
- if (_this.state === null) {
2584
- throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
2455
+ if (this.state === null) {
2456
+ throw new Error(`Initialize visualization by calling "setup" prior to making this call.`);
2585
2457
  }
2586
- var time = 0;
2587
- for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
2588
- var entry = events_1[_i];
2458
+ let time = 0;
2459
+ for (const entry of events) {
2589
2460
  try {
2590
2461
  time = entry.time;
2591
- _this.interaction.clearOldClickVisualizations(time);
2462
+ this.interaction.clearOldClickVisualizations(time);
2592
2463
  switch (entry.event) {
2593
2464
  case 0 /* Data.Event.Metric */:
2594
- _this.data.metric(entry);
2465
+ this.data.metric(entry);
2595
2466
  break;
2596
2467
  case 1 /* Data.Event.Dimension */:
2597
2468
  if (entry.data[37 /* Dimension.InteractionNextPaint */]) {
2598
- _this.data.metric(entry);
2469
+ this.data.metric(entry);
2599
2470
  }
2600
2471
  break;
2601
2472
  case 7 /* Data.Event.Region */:
2602
- _this.data.region(entry);
2473
+ this.data.region(entry);
2603
2474
  break;
2604
2475
  case 6 /* Data.Event.Mutation */:
2605
2476
  case 43 /* Data.Event.Snapshot */:
2606
- _this.layout.markup(entry);
2477
+ this.layout.markup(entry);
2607
2478
  break;
2608
2479
  case 13 /* Data.Event.MouseDown */:
2609
2480
  case 14 /* Data.Event.MouseUp */:
@@ -2615,73 +2486,67 @@ var Visualizer = /** @class */ (function () {
2615
2486
  case 20 /* Data.Event.TouchCancel */:
2616
2487
  case 18 /* Data.Event.TouchEnd */:
2617
2488
  case 19 /* Data.Event.TouchMove */:
2618
- _this.interaction.pointer(entry);
2489
+ this.interaction.pointer(entry);
2619
2490
  break;
2620
2491
  case 28 /* Data.Event.Visibility */:
2621
- _this.interaction.visibility(entry);
2492
+ this.interaction.visibility(entry);
2622
2493
  break;
2623
2494
  case 27 /* Data.Event.Input */:
2624
- _this.interaction.input(entry);
2495
+ this.interaction.input(entry);
2625
2496
  break;
2626
2497
  case 21 /* Data.Event.Selection */:
2627
- _this.interaction.selection(entry);
2498
+ this.interaction.selection(entry);
2628
2499
  break;
2629
2500
  case 11 /* Data.Event.Resize */:
2630
- _this.interaction.resize(entry);
2501
+ this.interaction.resize(entry);
2631
2502
  break;
2632
2503
  case 10 /* Data.Event.Scroll */:
2633
- _this.interaction.scroll(entry);
2504
+ this.interaction.scroll(entry);
2634
2505
  break;
2635
2506
  case 45 /* Data.Event.StyleSheetAdoption */:
2636
2507
  case 46 /* Data.Event.StyleSheetUpdate */:
2637
- _this.layout.styleChange(entry);
2508
+ this.layout.styleChange(entry);
2638
2509
  break;
2639
2510
  case 44 /* Data.Event.Animation */:
2640
- _this.layout.animateChange(entry);
2511
+ this.layout.animateChange(entry);
2641
2512
  break;
2642
2513
  case 51 /* Data.Event.CustomElement */:
2643
- _this.layout.customElement(entry);
2514
+ this.layout.customElement(entry);
2644
2515
  break;
2645
2516
  }
2646
2517
  }
2647
2518
  catch (e) {
2648
- (_b = (_a = _this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
2519
+ (_b = (_a = this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
2649
2520
  }
2650
2521
  }
2651
2522
  if (events.length > 0) {
2652
2523
  // Update pointer trail at the end of every frame
2653
- _this.interaction.trail(time);
2524
+ this.interaction.trail(time);
2654
2525
  }
2655
2526
  };
2656
- this.reset = function () {
2527
+ this.reset = () => {
2657
2528
  var _a, _b, _c, _d, _e;
2658
- (_a = _this.data) === null || _a === void 0 ? void 0 : _a.reset();
2659
- (_b = _this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2660
- (_c = _this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2661
- (_d = _this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2662
- (_e = _this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2663
- _this._state = null;
2664
- _this.renderTime = 0;
2665
- };
2666
- this.sortEvents = function (a, b) {
2529
+ (_a = this.data) === null || _a === void 0 ? void 0 : _a.reset();
2530
+ (_b = this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2531
+ (_c = this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2532
+ (_d = this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2533
+ (_e = this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2534
+ this._state = null;
2535
+ this.renderTime = 0;
2536
+ };
2537
+ this.sortEvents = (a, b) => {
2667
2538
  return a.time - b.time;
2668
2539
  };
2669
- this.sortPayloads = function (a, b) {
2540
+ this.sortPayloads = (a, b) => {
2670
2541
  return a.envelope.sequence - b.envelope.sequence;
2671
2542
  };
2672
2543
  }
2673
- Object.defineProperty(Visualizer.prototype, "state", {
2674
- get: function () {
2675
- return this._state;
2676
- },
2677
- enumerable: false,
2678
- configurable: true
2679
- });
2680
- return Visualizer;
2681
- }());
2544
+ get state() {
2545
+ return this._state;
2546
+ }
2547
+ }
2682
2548
 
2683
- var _a;
2684
- 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;
2549
+ const { state, dom, get, html, time, clickmap, clearmap, scrollmap, merge, setup, render } = new Visualizer();
2685
2550
 
2686
2551
  var clarity = /*#__PURE__*/Object.freeze({
2687
2552
  __proto__: null,