@gemx-dev/clarity-visualize 0.8.47 → 0.8.49

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 (8) hide show
  1. package/build/clarity.visualize.js +1067 -767
  2. package/build/clarity.visualize.min.js +1 -1
  3. package/build/clarity.visualize.module.js +1067 -767
  4. package/package.json +2 -2
  5. package/src/custom/README.md +60 -0
  6. package/src/custom/dialog.ts +129 -0
  7. package/src/custom/index.ts +6 -0
  8. package/src/layout.ts +26 -0
package/build/clarity.visualize.js CHANGED
@@ -16,6 +16,31 @@ 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
+
34
+ var __assign = function() {
35
+ __assign = Object.assign || function __assign(t) {
36
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
37
+ s = arguments[i];
38
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
39
+ }
40
+ return t;
41
+ };
42
+ return __assign.apply(this, arguments);
43
+ };
19
44
 
20
45
  function __awaiter(thisArg, _arguments, P, generator) {
21
46
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -25,61 +50,91 @@ function __awaiter(thisArg, _arguments, P, generator) {
25
50
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
26
51
  step((generator = generator.apply(thisArg, _arguments || [])).next());
27
52
  });
53
+ }
54
+
55
+ function __generator(thisArg, body) {
56
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
57
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
58
+ function verb(n) { return function (v) { return step([n, v]); }; }
59
+ function step(op) {
60
+ if (f) throw new TypeError("Generator is already executing.");
61
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
62
+ 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;
63
+ if (y = 0, t) op = [op[0] & 2, t.value];
64
+ switch (op[0]) {
65
+ case 0: case 1: t = op; break;
66
+ case 4: _.label++; return { value: op[1], done: false };
67
+ case 5: _.label++; y = op[1]; op = [0]; continue;
68
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
69
+ default:
70
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
71
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
72
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
73
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
74
+ if (t[2]) _.ops.pop();
75
+ _.trys.pop(); continue;
76
+ }
77
+ op = body.call(thisArg, _);
78
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
79
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
80
+ }
28
81
  }
29
82
 
30
- class DataHelper {
31
- constructor(state) {
83
+ var _a$1;
84
+ var DataHelper = /** @class */ (function () {
85
+ function DataHelper(state) {
86
+ var _this = this;
32
87
  this.regionMap = {};
33
88
  this.regions = {};
34
89
  this.metrics = {};
35
90
  this.lean = false;
36
- this.reset = () => {
37
- this.metrics = {};
38
- this.lean = false;
39
- this.regions = {};
40
- this.regionMap = {};
91
+ this.reset = function () {
92
+ _this.metrics = {};
93
+ _this.lean = false;
94
+ _this.regions = {};
95
+ _this.regionMap = {};
41
96
  };
42
- this.metric = (event) => {
97
+ this.metric = function (event) {
43
98
  var _a;
44
- if (this.state.options.metadata) {
45
- let metricMarkup = [];
46
- let regionMarkup = [];
99
+ if (_this.state.options.metadata) {
100
+ var metricMarkup = [];
101
+ var regionMarkup = [];
47
102
  // Copy over metrics for future reference
48
- for (let m in event.data) {
49
- const eventType = typeof event.data[m];
103
+ for (var m in event.data) {
104
+ var eventType = typeof event.data[m];
50
105
  if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
51
- if (!(m in this.metrics)) {
52
- this.metrics[m] = 0;
106
+ if (!(m in _this.metrics)) {
107
+ _this.metrics[m] = 0;
53
108
  }
54
- let key = parseInt(m, 10);
55
- let value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
109
+ var key = parseInt(m, 10);
110
+ var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
56
111
  if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
57
- this.metrics[m] = value;
112
+ _this.metrics[m] = value;
58
113
  }
59
114
  else {
60
- this.metrics[m] += value;
115
+ _this.metrics[m] += value;
61
116
  }
62
- this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : this.lean;
117
+ _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
63
118
  }
64
119
  }
65
- for (let entry in this.metrics) {
120
+ for (var entry in _this.metrics) {
66
121
  if (entry in DataHelper.METRIC_MAP) {
67
- let m = this.metrics[entry];
68
- let map = DataHelper.METRIC_MAP[entry];
69
- let unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
70
- metricMarkup.push(`<li><h2>${this.value(m, unit)}<span>${this.key(unit)}</span></h2>${map.name}</li>`);
122
+ var m = _this.metrics[entry];
123
+ var map = DataHelper.METRIC_MAP[entry];
124
+ var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
125
+ metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
71
126
  }
72
127
  }
73
128
  // Append region information to metadata
74
- for (let name in this.regions) {
75
- let r = this.regions[name];
76
- let className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
77
- regionMarkup.push(`<span class="${className}">${name}</span>`);
129
+ for (var name_1 in _this.regions) {
130
+ var r = _this.regions[name_1];
131
+ var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
132
+ regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
78
133
  }
79
- this.state.options.metadata.innerHTML = `<ul>${metricMarkup.join("" /* Data.Constant.Empty */)}</ul><div>${regionMarkup.join("" /* Data.Constant.Empty */)}</div>`;
134
+ _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
80
135
  }
81
136
  };
82
- this.key = (unit) => {
137
+ this.key = function (unit) {
83
138
  switch (unit) {
84
139
  case "html-price":
85
140
  case "ld-price":
@@ -88,7 +143,7 @@ class DataHelper {
88
143
  default: return unit;
89
144
  }
90
145
  };
91
- this.value = (num, unit) => {
146
+ this.value = function (num, unit) {
92
147
  switch (unit) {
93
148
  case "KB": return Math.round(num / 1024);
94
149
  case "s": return Math.round(num / 10) / 100;
@@ -99,28 +154,30 @@ class DataHelper {
99
154
  };
100
155
  this.state = state;
101
156
  }
102
- region(event) {
103
- let data = event.data;
104
- for (let r of data) {
157
+ DataHelper.prototype.region = function (event) {
158
+ var data = event.data;
159
+ for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
160
+ var r = data_1[_i];
105
161
  if (!(r.name in this.regions)) {
106
162
  this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
107
163
  }
108
164
  this.regionMap[r.id] = r.name;
109
165
  }
110
- }
111
- }
112
- DataHelper.METRIC_MAP = {
113
- [2 /* Data.Metric.TotalBytes */]: { name: "Total Bytes", unit: "KB" },
114
- [4 /* Data.Metric.TotalCost */]: { name: "Total Cost", unit: "ms" },
115
- [3 /* Data.Metric.LayoutCost */]: { name: "Layout Cost", unit: "ms" },
116
- [8 /* Data.Metric.LargestPaint */]: { name: "LCP", unit: "s" },
117
- [9 /* Data.Metric.CumulativeLayoutShift */]: { name: "CLS", unit: "cls" },
118
- [7 /* Data.Metric.LongTaskCount */]: { name: "Long Tasks" },
119
- [24 /* Data.Metric.CartTotal */]: { name: "Cart Total", unit: "html-price" },
120
- [13 /* Data.Metric.ProductPrice */]: { name: "Product Price", unit: "ld-price" },
121
- [6 /* Data.Metric.ThreadBlockedTime */]: { name: "Thread Blocked", unit: "ms" },
122
- [37 /* Data.Dimension.InteractionNextPaint */]: { name: "INP", unit: "ms" }
123
- };
166
+ };
167
+ DataHelper.METRIC_MAP = (_a$1 = {},
168
+ _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
169
+ _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
170
+ _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
171
+ _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
172
+ _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
173
+ _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
174
+ _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
175
+ _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
176
+ _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
177
+ _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
178
+ _a$1);
179
+ return DataHelper;
180
+ }());
124
181
 
125
182
  // tslint:disable: no-bitwise
126
183
  function hash (input, precision) {
@@ -268,29 +325,30 @@ function lookup(hash) {
268
325
 
269
326
  var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
270
327
 
271
- class EnrichHelper {
272
- constructor() {
273
- this.reset = () => {
274
- this.children = {};
275
- this.nodes = {};
328
+ var EnrichHelper = /** @class */ (function () {
329
+ function EnrichHelper() {
330
+ var _this = this;
331
+ this.reset = function () {
332
+ _this.children = {};
333
+ _this.nodes = {};
276
334
  helper.selector.reset();
277
335
  };
278
- this.selectors = (event) => {
279
- event.data.forEach && event.data.forEach(d => {
280
- let parent = this.nodes[d.parent];
281
- let children = this.children[d.parent] || [];
282
- let node = this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
283
- let attributes = d.attributes || {};
336
+ this.selectors = function (event) {
337
+ event.data.forEach && event.data.forEach(function (d) {
338
+ var parent = _this.nodes[d.parent];
339
+ var children = _this.children[d.parent] || [];
340
+ var node = _this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
341
+ var attributes = d.attributes || {};
284
342
  /* Track parent-child relationship for this element */
285
343
  if (node.parent !== d.parent) {
286
- let childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
344
+ var childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
287
345
  children.splice(childIndex, 0, d.id);
288
346
  // Stop tracking this node from children of previous parent
289
347
  if (node.parent !== d.parent) {
290
- let exParent = this.children[node.parent];
291
- let nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
348
+ var exParent = _this.children[node.parent];
349
+ var nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
292
350
  if (nodeIndex >= 0) {
293
- this.children[node.parent].splice(nodeIndex, 1);
351
+ _this.children[node.parent].splice(nodeIndex, 1);
294
352
  }
295
353
  }
296
354
  node.parent = d.parent;
@@ -299,31 +357,31 @@ class EnrichHelper {
299
357
  children.push(d.id);
300
358
  }
301
359
  /* Get current position */
302
- node.position = this.position(d.id, d.tag, node, children, children.map(c => this.nodes[c]));
360
+ node.position = _this.position(d.id, d.tag, node, children, children.map(function (c) { return _this.nodes[c]; }));
303
361
  /* For backward compatibility, continue populating current selector and hash like before in addition to beta selector and hash */
304
- let input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes };
362
+ var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
305
363
  // Get stable selector
306
364
  // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
307
- let selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
365
+ var selectorAlpha = helper.selector.get(input, 0 /* Layout.Selector.Alpha */);
308
366
  d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
309
367
  d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
310
368
  // Get beta selector
311
- let selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
369
+ var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
312
370
  d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
313
371
  d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
314
372
  /* Track state for future reference */
315
373
  node.alpha = selectorAlpha;
316
374
  node.beta = selectorBeta;
317
- this.nodes[d.id] = node;
375
+ _this.nodes[d.id] = node;
318
376
  if (d.parent) {
319
- this.children[d.parent] = children;
377
+ _this.children[d.parent] = children;
320
378
  }
321
379
  });
322
380
  return event;
323
381
  };
324
- this.position = (id, tag, child, children, siblings) => {
382
+ this.position = function (id, tag, child, children, siblings) {
325
383
  child.position = 1;
326
- let idx = children ? children.indexOf(id) : -1;
384
+ var idx = children ? children.indexOf(id) : -1;
327
385
  while (idx-- > 0) {
328
386
  if (tag === siblings[idx].tag) {
329
387
  child.position = siblings[idx].position + 1;
@@ -334,10 +392,12 @@ class EnrichHelper {
334
392
  };
335
393
  this.reset();
336
394
  }
337
- }
395
+ return EnrichHelper;
396
+ }());
338
397
 
339
- class HeatmapHelper {
340
- constructor(state, layout) {
398
+ var HeatmapHelper = /** @class */ (function () {
399
+ function HeatmapHelper(state, layout) {
400
+ var _this = this;
341
401
  this.data = null;
342
402
  this.scrollData = null;
343
403
  this.max = null;
@@ -349,30 +409,30 @@ class HeatmapHelper {
349
409
  this.layout = null;
350
410
  this.scrollAvgFold = null;
351
411
  this.addScrollMakers = false;
352
- this.reset = () => {
353
- this.data = null;
354
- this.scrollData = null;
355
- this.max = null;
356
- this.offscreenRing = null;
357
- this.gradientPixels = null;
358
- this.timeout = null;
412
+ this.reset = function () {
413
+ _this.data = null;
414
+ _this.scrollData = null;
415
+ _this.max = null;
416
+ _this.offscreenRing = null;
417
+ _this.gradientPixels = null;
418
+ _this.timeout = null;
359
419
  // Reset resize observer
360
- if (this.observer) {
361
- this.observer.disconnect();
362
- this.observer = null;
420
+ if (_this.observer) {
421
+ _this.observer.disconnect();
422
+ _this.observer = null;
363
423
  }
364
424
  // Remove scroll and resize event listeners
365
- if (this.state && this.state.window) {
366
- let win = this.state.window;
367
- win.removeEventListener("scroll", this.redraw, true);
368
- win.removeEventListener("resize", this.redraw, true);
425
+ if (_this.state && _this.state.window) {
426
+ var win = _this.state.window;
427
+ win.removeEventListener("scroll", _this.redraw, true);
428
+ win.removeEventListener("resize", _this.redraw, true);
369
429
  }
370
430
  };
371
- this.clear = () => {
372
- let doc = this.state.window.document;
373
- let win = this.state.window;
374
- let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
375
- let de = doc.documentElement;
431
+ this.clear = function () {
432
+ var doc = _this.state.window.document;
433
+ var win = _this.state.window;
434
+ var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
435
+ var de = doc.documentElement;
376
436
  if (canvas) {
377
437
  canvas.width = de.clientWidth;
378
438
  canvas.height = de.clientHeight;
@@ -380,54 +440,59 @@ class HeatmapHelper {
380
440
  canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
381
441
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
382
442
  }
383
- this.reset();
443
+ _this.reset();
384
444
  };
385
- this.scroll = (activity, avgFold, addMarkers) => {
386
- this.scrollData = this.scrollData || activity;
387
- this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
388
- this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
389
- let canvas = this.overlay();
390
- let context = canvas.getContext("2d" /* Constant.Context */);
391
- let doc = this.state.window.document;
445
+ this.scroll = function (activity, avgFold, addMarkers) {
446
+ _this.scrollData = _this.scrollData || activity;
447
+ _this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
448
+ _this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
449
+ var canvas = _this.overlay();
450
+ var context = canvas.getContext("2d" /* Constant.Context */);
451
+ var doc = _this.state.window.document;
392
452
  var body = doc.body;
393
453
  var de = doc.documentElement;
394
454
  var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
395
455
  canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
396
456
  canvas.style.top = 0 + "px" /* Constant.Pixel */;
397
457
  if (canvas.width > 0 && canvas.height > 0) {
398
- if (this.scrollData) {
399
- const grd = context.createLinearGradient(0, 0, 0, canvas.height);
400
- for (const currentCombination of this.scrollData) {
401
- const huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
402
- const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
403
- const hue = huePercentView * 240 /* Setting.MaxHue */;
458
+ if (_this.scrollData) {
459
+ var grd = context.createLinearGradient(0, 0, 0, canvas.height);
460
+ for (var _i = 0, _a = _this.scrollData; _i < _a.length; _i++) {
461
+ var currentCombination = _a[_i];
462
+ var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
463
+ var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
464
+ var hue = huePercentView * 240 /* Setting.MaxHue */;
404
465
  if (percentView <= 1) {
405
- grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
466
+ grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
406
467
  }
407
468
  }
408
469
  // Fill with gradient
409
470
  context.fillStyle = grd;
410
471
  context.fillRect(0, 0, canvas.width, canvas.height);
411
- if (this.addScrollMakers) {
412
- this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
472
+ if (_this.addScrollMakers) {
473
+ _this.addInfoMarkers(context, _this.scrollData, canvas.width, canvas.height, _this.scrollAvgFold);
413
474
  }
414
475
  }
415
476
  }
416
477
  };
417
- this.addInfoMarkers = (context, scrollMapInfo, width, height, avgFold) => {
418
- this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
419
- const markers = [75, 50, 25];
420
- for (const marker of markers) {
421
- const closest = scrollMapInfo.reduce((prev, curr) => {
478
+ this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
479
+ _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
480
+ var markers = [75, 50, 25];
481
+ var _loop_1 = function (marker) {
482
+ var closest = scrollMapInfo.reduce(function (prev, curr) {
422
483
  return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
423
484
  });
424
485
  if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
425
- const markerLine = (closest.scrollReachY / 100) * height;
426
- this.addMarker(context, width, `${marker}%`, markerLine, 35 /* Setting.MarkerSmallWidth */);
486
+ var markerLine = (closest.scrollReachY / 100) * height;
487
+ _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
427
488
  }
489
+ };
490
+ for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
491
+ var marker = markers_1[_i];
492
+ _loop_1(marker);
428
493
  }
429
494
  };
430
- this.addMarker = (context, heatmapWidth, label, markerY, markerWidth) => {
495
+ this.addMarker = function (context, heatmapWidth, label, markerY, markerWidth) {
431
496
  context.beginPath();
432
497
  context.moveTo(0, markerY);
433
498
  context.lineTo(heatmapWidth, markerY);
@@ -441,31 +506,32 @@ class HeatmapHelper {
441
506
  context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
442
507
  context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
443
508
  };
444
- this.click = (activity) => {
445
- this.data = this.data || activity;
446
- let heat = this.transform();
447
- let canvas = this.overlay();
448
- let ctx = canvas.getContext("2d" /* Constant.Context */);
509
+ this.click = function (activity) {
510
+ _this.data = _this.data || activity;
511
+ var heat = _this.transform();
512
+ var canvas = _this.overlay();
513
+ var ctx = canvas.getContext("2d" /* Constant.Context */);
449
514
  if (canvas.width > 0 && canvas.height > 0) {
450
515
  // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
451
516
  // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
452
517
  // Pre-render similar primitives or repeating objects on an offscreen canvas
453
- let ring = this.getRing();
454
- let gradient = this.getGradient();
518
+ var ring = _this.getRing();
519
+ var gradient = _this.getGradient();
455
520
  // Render activity for each (x,y) coordinate in our data
456
- for (let entry of heat) {
521
+ for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
522
+ var entry = heat_1[_i];
457
523
  ctx.globalAlpha = entry.a;
458
524
  ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
459
525
  }
460
526
  // Add color to the canvas based on alpha value of each pixel
461
- let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
462
- for (let i = 0; i < pixels.data.length; i += 4) {
527
+ var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
528
+ for (var i = 0; i < pixels.data.length; i += 4) {
463
529
  // For each pixel, we have 4 entries in data array: (r,g,b,a)
464
530
  // To pick the right color from gradient pixels, we look at the alpha value of the pixel
465
531
  // Alpha value ranges from 0-255
466
- let alpha = pixels.data[i + 3];
532
+ var alpha = pixels.data[i + 3];
467
533
  if (alpha > 0) {
468
- let offset = (alpha - 1) * 4;
534
+ var offset = (alpha - 1) * 4;
469
535
  pixels.data[i] = gradient.data[offset];
470
536
  pixels.data[i + 1] = gradient.data[offset + 1];
471
537
  pixels.data[i + 2] = gradient.data[offset + 2];
@@ -474,25 +540,25 @@ class HeatmapHelper {
474
540
  ctx.putImageData(pixels, 0, 0);
475
541
  }
476
542
  };
477
- this.overlay = () => {
543
+ this.overlay = function () {
478
544
  // Create canvas for visualizing heatmap
479
- let doc = this.state.window.document;
480
- let win = this.state.window;
481
- let de = doc.documentElement;
482
- let canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
545
+ var doc = _this.state.window.document;
546
+ var win = _this.state.window;
547
+ var de = doc.documentElement;
548
+ var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
483
549
  if (canvas === null) {
484
550
  canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
485
551
  canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
486
552
  canvas.width = 0;
487
553
  canvas.height = 0;
488
554
  canvas.style.position = "absolute" /* Constant.Absolute */;
489
- canvas.style.zIndex = `${2147483647 /* Setting.ZIndex */}`;
555
+ canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
490
556
  de.appendChild(canvas);
491
- win.addEventListener("scroll", this.redraw, true);
492
- win.addEventListener("resize", this.redraw, true);
493
- this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
494
- if (this.observer) {
495
- this.observer.observe(doc.body);
557
+ win.addEventListener("scroll", _this.redraw, true);
558
+ win.addEventListener("resize", _this.redraw, true);
559
+ _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
560
+ if (_this.observer) {
561
+ _this.observer.observe(doc.body);
496
562
  }
497
563
  }
498
564
  // Ensure canvas is positioned correctly
@@ -503,13 +569,13 @@ class HeatmapHelper {
503
569
  canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
504
570
  return canvas;
505
571
  };
506
- this.getRing = () => {
507
- if (this.offscreenRing === null) {
508
- let doc = this.state.window.document;
509
- this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
510
- this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
511
- this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
512
- let ctx = this.offscreenRing.getContext("2d" /* Constant.Context */);
572
+ this.getRing = function () {
573
+ if (_this.offscreenRing === null) {
574
+ var doc = _this.state.window.document;
575
+ _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
576
+ _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
577
+ _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
578
+ var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
513
579
  ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
514
580
  ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
515
581
  ctx.shadowColor = "black" /* Constant.Black */;
@@ -518,58 +584,59 @@ class HeatmapHelper {
518
584
  ctx.closePath();
519
585
  ctx.fill();
520
586
  }
521
- return this.offscreenRing;
587
+ return _this.offscreenRing;
522
588
  };
523
- this.getGradient = () => {
524
- if (this.gradientPixels === null) {
525
- let doc = this.state.window.document;
526
- let offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
589
+ this.getGradient = function () {
590
+ if (_this.gradientPixels === null) {
591
+ var doc = _this.state.window.document;
592
+ var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
527
593
  offscreenGradient.width = 1;
528
594
  offscreenGradient.height = 256 /* Setting.Colors */;
529
- let ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
530
- let gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
531
- let step = 1 / HeatmapHelper.COLORS.length;
532
- for (let i = 0; i < HeatmapHelper.COLORS.length; i++) {
595
+ var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
596
+ var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
597
+ var step = 1 / HeatmapHelper.COLORS.length;
598
+ for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
533
599
  gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
534
600
  }
535
601
  ctx.fillStyle = gradient;
536
602
  ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
537
- this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
603
+ _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
538
604
  }
539
- return this.gradientPixels;
605
+ return _this.gradientPixels;
540
606
  };
541
- this.redraw = (event) => {
542
- if (this.data) {
543
- if (this.timeout) {
544
- clearTimeout(this.timeout);
607
+ this.redraw = function (event) {
608
+ if (_this.data) {
609
+ if (_this.timeout) {
610
+ clearTimeout(_this.timeout);
545
611
  }
546
- this.timeout = setTimeout(this.click, 30 /* Setting.Interval */);
612
+ _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
547
613
  }
548
- else if (this.scrollData) {
614
+ else if (_this.scrollData) {
549
615
  if (event.type != 'scroll') {
550
- if (this.timeout) {
551
- clearTimeout(this.timeout);
616
+ if (_this.timeout) {
617
+ clearTimeout(_this.timeout);
552
618
  }
553
- this.timeout = setTimeout(this.scroll, 30 /* Setting.Interval */);
619
+ _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
554
620
  }
555
621
  }
556
622
  };
557
- this.transform = () => {
558
- let output = [];
559
- let points = {};
560
- let localMax = 0;
561
- let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
562
- for (let element of this.data) {
563
- let el = this.layout.get(element.hash);
623
+ this.transform = function () {
624
+ var output = [];
625
+ var points = {};
626
+ var localMax = 0;
627
+ var height = _this.state.window && _this.state.window.document ? _this.state.window.document.documentElement.clientHeight : 0;
628
+ for (var _i = 0, _a = _this.data; _i < _a.length; _i++) {
629
+ var element = _a[_i];
630
+ var el = _this.layout.get(element.hash);
564
631
  if (el && typeof el.getBoundingClientRect === "function") {
565
- let r = el.getBoundingClientRect();
566
- let v = this.visible(el, r, height);
632
+ var r = el.getBoundingClientRect();
633
+ var v = _this.visible(el, r, height);
567
634
  // Process clicks for only visible elements
568
- if (this.max === null || v) {
569
- for (let i = 0; i < element.points; i++) {
570
- let x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
571
- let y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
572
- let k = `${x}${"X" /* Constant.Separator */}${y}${"X" /* Constant.Separator */}${v ? 1 : 0}`;
635
+ if (_this.max === null || v) {
636
+ for (var i = 0; i < element.points; i++) {
637
+ var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
638
+ var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
639
+ var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
573
640
  points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
574
641
  localMax = Math.max(points[k], localMax);
575
642
  }
@@ -577,25 +644,27 @@ class HeatmapHelper {
577
644
  }
578
645
  }
579
646
  // Set the max value from the firs t
580
- this.max = this.max ? this.max : localMax;
647
+ _this.max = _this.max ? _this.max : localMax;
581
648
  // Once all points are accounted for, convert everything into absolute (x, y)
582
- for (let coordinates of Object.keys(points)) {
583
- let parts = coordinates.split("X" /* Constant.Separator */);
584
- let alpha = Math.min((points[coordinates] / this.max) + 0.15 /* Setting.AlphaBoost */, 1);
649
+ for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
650
+ var coordinates = _c[_b];
651
+ var parts = coordinates.split("X" /* Constant.Separator */);
652
+ var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
585
653
  if (parts[2] === "1") {
586
654
  output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
587
655
  }
588
656
  }
589
657
  return output;
590
658
  };
591
- this.visible = (el, r, height) => {
592
- let doc = this.state.window.document;
593
- let visibility = r.height > height ? true : false;
659
+ this.visible = function (el, r, height) {
660
+ var doc = _this.state.window.document;
661
+ var visibility = r.height > height ? true : false;
594
662
  if (visibility === false && r.width > 0 && r.height > 0) {
595
663
  while (!visibility && doc) {
596
- let shadowElement = null;
597
- let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
598
- for (let e of elements) {
664
+ var shadowElement = null;
665
+ var elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
666
+ for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
667
+ var e = elements_1[_i];
599
668
  // Ignore if top element ends up being the canvas element we added for heatmap visualization
600
669
  if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
601
670
  continue;
@@ -612,8 +681,9 @@ class HeatmapHelper {
612
681
  this.state = state;
613
682
  this.layout = layout;
614
683
  }
615
- }
616
- HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
684
+ HeatmapHelper.COLORS = ["blue", "cyan", "lime", "yellow", "red"];
685
+ return HeatmapHelper;
686
+ }());
617
687
 
618
688
  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;`;
619
689
 
@@ -649,28 +719,29 @@ var clickStyle = `.clarity-click,
649
719
  transition: visibility 0s 1s, opacity 1s linear;
650
720
  }`;
651
721
 
652
- class InteractionHelper {
653
- constructor(state, layout, vnext) {
722
+ var InteractionHelper = /** @class */ (function () {
723
+ function InteractionHelper(state, layout, vnext) {
724
+ var _this = this;
654
725
  this.hoverId = null;
655
726
  this.targetId = null;
656
727
  this.points = [];
657
728
  this.scrollPointIndex = 0;
658
729
  this.clickAudio = null;
659
730
  this.visualizedClicks = [];
660
- this.reset = () => {
661
- this.points = [];
662
- this.scrollPointIndex = 0;
663
- this.clickAudio = null;
664
- this.hoverId = null;
665
- this.targetId = null;
666
- this.layout.reset();
667
- };
668
- this.scroll = (event) => {
669
- let data = event.data;
670
- let doc = this.state.window.document;
671
- let de = doc.documentElement;
672
- let scrollTarget = this.layout.element(data.target) || doc.body;
673
- let scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
731
+ this.reset = function () {
732
+ _this.points = [];
733
+ _this.scrollPointIndex = 0;
734
+ _this.clickAudio = null;
735
+ _this.hoverId = null;
736
+ _this.targetId = null;
737
+ _this.layout.reset();
738
+ };
739
+ this.scroll = function (event) {
740
+ var data = event.data;
741
+ var doc = _this.state.window.document;
742
+ var de = doc.documentElement;
743
+ var scrollTarget = _this.layout.element(data.target) || doc.body;
744
+ var scrollable = scrollTarget.scrollHeight > scrollTarget.clientHeight || scrollTarget.scrollWidth > scrollTarget.clientWidth;
674
745
  if (scrollTarget && scrollable) {
675
746
  scrollTarget.scrollTo(data.x, data.y);
676
747
  // In an edge case, scrolling API doesn't work when css on HTML element has height:100% and overflow:auto
@@ -683,36 +754,36 @@ class InteractionHelper {
683
754
  // Position canvas relative to scroll events on the parent page
684
755
  if (scrollTarget === de || scrollTarget === doc.body) {
685
756
  if (!scrollable) {
686
- this.state.window.scrollTo(data.x, data.y);
757
+ _this.state.window.scrollTo(data.x, data.y);
687
758
  }
688
- let canvas = this.overlay();
759
+ var canvas = _this.overlay();
689
760
  if (canvas) {
690
761
  canvas.style.left = data.x + "px" /* Constant.Pixel */;
691
762
  canvas.style.top = data.y + "px" /* Constant.Pixel */;
692
763
  canvas.width = de.clientWidth;
693
764
  canvas.height = de.clientHeight;
694
765
  }
695
- this.scrollPointIndex = this.points.length;
766
+ _this.scrollPointIndex = _this.points.length;
696
767
  }
697
768
  };
698
- this.resize = (event) => {
699
- let data = event.data;
700
- let width = data.width;
701
- let height = data.height;
702
- if (this.state.options.onresize) {
703
- this.state.options.onresize(width, height);
769
+ this.resize = function (event) {
770
+ var data = event.data;
771
+ var width = data.width;
772
+ var height = data.height;
773
+ if (_this.state.options.onresize) {
774
+ _this.state.options.onresize(width, height);
704
775
  }
705
776
  };
706
- this.visibility = (event) => {
707
- let doc = this.state.window.document;
777
+ this.visibility = function (event) {
778
+ var doc = _this.state.window.document;
708
779
  if (doc && doc.documentElement && event.data.visible === 0 /* BooleanFlag.False */) {
709
780
  // if the website has styles on the <html> node then we need to save the reference to them before we change them
710
781
  // to indicate the window was hidden. This is to ensure that we can restore the original styles when the window is visible again.
711
- const bg = doc.documentElement.style.backgroundColor;
782
+ var bg = doc.documentElement.style.backgroundColor;
712
783
  if (bg) {
713
784
  doc.documentElement.setAttribute("data-clarity-background-color" /* Constant.OriginalBackgroundColor */, bg);
714
785
  }
715
- const o = doc.documentElement.style.opacity;
786
+ var o = doc.documentElement.style.opacity;
716
787
  if (o) {
717
788
  doc.documentElement.setAttribute("data-clarity-opacity" /* Constant.OriginalOpacity */, o);
718
789
  }
@@ -734,84 +805,91 @@ class InteractionHelper {
734
805
  }
735
806
  }
736
807
  };
737
- this.input = (event) => {
738
- let data = event.data;
739
- let el = this.layout.element(data.target);
808
+ this.input = function (event) {
809
+ var data = event.data;
810
+ var el = _this.layout.element(data.target);
740
811
  if (el) {
741
812
  switch (el.type) {
742
813
  case "checkbox":
743
814
  case "radio":
744
815
  el.checked = data.value === "true";
745
816
  break;
817
+ case "file":
818
+ // We cannot set value for files, only allowed to be an empty string when programatically set
819
+ break;
746
820
  default:
747
821
  el.value = data.value;
748
822
  break;
749
823
  }
750
824
  }
751
825
  };
752
- this.selection = (event) => {
753
- let data = event.data;
754
- let doc = this.state.window.document;
755
- let s = doc.getSelection();
826
+ this.selection = function (event) {
827
+ var data = event.data;
828
+ var doc = _this.state.window.document;
829
+ var s = doc.getSelection();
756
830
  // Wrapping selection code inside a try / catch to avoid throwing errors when dealing with elements inside the shadow DOM.
757
831
  try {
758
- s.setBaseAndExtent(this.layout.element(data.start), data.startOffset, this.layout.element(data.end), data.endOffset);
832
+ s.setBaseAndExtent(_this.layout.element(data.start), data.startOffset, _this.layout.element(data.end), data.endOffset);
759
833
  }
760
834
  catch (ex) {
761
835
  console.warn("Exception encountered while trying to set selection: " + ex);
762
836
  }
763
837
  };
764
- this.pointer = (event) => {
765
- let data = event.data;
766
- let type = event.event;
767
- let doc = this.state.window.document;
768
- let de = doc.documentElement;
769
- let p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
770
- let pointerWidth = 29 /* Setting.PointerWidth */;
771
- let pointerHeight = 38 /* Setting.PointerHeight */;
838
+ this.pointer = function (event) {
839
+ if (!_this.state.options.pointer) {
840
+ return;
841
+ }
842
+ var data = event.data;
843
+ var type = event.event;
844
+ var doc = _this.state.window.document;
845
+ var de = doc.documentElement;
846
+ var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
847
+ var pointerWidth = 29 /* Setting.PointerWidth */;
848
+ var pointerHeight = 38 /* Setting.PointerHeight */;
772
849
  if (p === null) {
773
850
  p = doc.createElement("DIV");
774
851
  p.id = "clarity-pointer" /* Constant.PointerLayer */;
775
852
  de.appendChild(p);
776
853
  // Add custom styles
777
- let style = doc.createElement("STYLE");
854
+ var style = doc.createElement("STYLE");
778
855
  style.textContent =
779
856
  "@keyframes pulsate-one { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(3, 3); opacity: 0; } }" +
780
857
  "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
781
858
  "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
782
859
  "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
783
- `#${"clarity-interaction-canvas" /* Constant.InteractionCanvas */} { position: absolute; left: 0; top: 0; z-index: ${2147483647 /* Setting.ZIndex */}; background: none; }` +
784
- `#${"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; }` +
785
- this.getClickLayerStyle() +
786
- `.${"clarity-touch" /* Constant.TouchLayer */} { background: radial-gradient(rgba(242,97,12,1), transparent); }` +
787
- `.${"clarity-touch-ring" /* Constant.TouchRing */} { background: transparent; border: 1px solid rgba(242,97,12,0.8); }` +
788
- `.${"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 */}); }` +
789
- `.${"clarity-pointer-none" /* Constant.PointerNone */} { background: none; }` +
790
- this.getPointerStyle();
860
+ "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
861
+ "#".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; }") +
862
+ _this.getClickLayerStyle() +
863
+ ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
864
+ ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
865
+ ".".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 */, "); }") +
866
+ ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
867
+ _this.getPointerStyle();
791
868
  p.appendChild(style);
792
869
  }
793
870
  p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
794
871
  p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
795
- let title = "Pointer";
872
+ var title = "Pointer";
796
873
  switch (type) {
797
874
  case 9 /* Data.Event.Click */:
798
875
  title = "Click";
799
- this.visualizedClicks.push({
876
+ _this.visualizedClicks.push({
800
877
  doc: de,
801
- click: this.drawClick(doc, data.x, data.y, title),
878
+ click: _this.drawClick(doc, data.x, data.y, title),
802
879
  time: event.time
803
880
  });
804
- if (this.state.options.onclickMismatch) {
805
- const originalTarget = this.layout.element(data.target);
806
- let correctTargetHit = false;
807
- const elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
808
- for (const elementUnderClick of elementsUnderClick) {
881
+ if (_this.state.options.onclickMismatch) {
882
+ var originalTarget = _this.layout.element(data.target);
883
+ var correctTargetHit = false;
884
+ var elementsUnderClick = doc.elementsFromPoint(data.x, data.y);
885
+ for (var _i = 0, elementsUnderClick_1 = elementsUnderClick; _i < elementsUnderClick_1.length; _i++) {
886
+ var elementUnderClick = elementsUnderClick_1[_i];
809
887
  if (originalTarget === elementUnderClick) {
810
888
  correctTargetHit = true;
811
889
  }
812
890
  }
813
891
  if (!correctTargetHit) {
814
- this.state.options.onclickMismatch({
892
+ _this.state.options.onclickMismatch({
815
893
  time: event.time,
816
894
  x: data.x,
817
895
  y: data.y,
@@ -823,9 +901,9 @@ class InteractionHelper {
823
901
  break;
824
902
  case 16 /* Data.Event.DoubleClick */:
825
903
  title = "Click";
826
- this.visualizedClicks.push({
904
+ _this.visualizedClicks.push({
827
905
  doc: de,
828
- click: this.drawClick(doc, data.x, data.y, title),
906
+ click: _this.drawClick(doc, data.x, data.y, title),
829
907
  time: event.time
830
908
  });
831
909
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -834,9 +912,9 @@ class InteractionHelper {
834
912
  case 18 /* Data.Event.TouchEnd */:
835
913
  case 20 /* Data.Event.TouchCancel */:
836
914
  title = "Touch";
837
- this.visualizedClicks.push({
915
+ _this.visualizedClicks.push({
838
916
  doc: de,
839
- click: this.drawTouch(doc, data.x, data.y, title),
917
+ click: _this.drawTouch(doc, data.x, data.y, title),
840
918
  time: event.time
841
919
  });
842
920
  p.className = "clarity-pointer-none" /* Constant.PointerNone */;
@@ -848,37 +926,37 @@ class InteractionHelper {
848
926
  case 12 /* Data.Event.MouseMove */:
849
927
  title = "Mouse Move";
850
928
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
851
- this.addPoint({ time: event.time, x: data.x, y: data.y });
852
- this.targetId = data.target;
929
+ _this.addPoint({ time: event.time, x: data.x, y: data.y });
930
+ _this.targetId = data.target;
853
931
  break;
854
932
  default:
855
933
  p.className = "clarity-pointer-move" /* Constant.PointerMove */;
856
934
  break;
857
935
  }
858
- p.setAttribute("title" /* Constant.Title */, `${title} (${data.x}${"px" /* Constant.Pixel */}, ${data.y}${"px" /* Constant.Pixel */})`);
936
+ p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
859
937
  };
860
- this.clearOldClickVisualizations = (currentTimestamp) => {
861
- if (this.vnext) {
862
- while (this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
863
- const visualizedClick = this.visualizedClicks.shift();
864
- this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
938
+ this.clearOldClickVisualizations = function (currentTimestamp) {
939
+ if (_this.vnext) {
940
+ while (_this.visualizedClicks.length > 10 /* Setting.MaxClicksDisplayed */) {
941
+ var visualizedClick = _this.visualizedClicks.shift();
942
+ _this.fadeOutElement(visualizedClick.click, visualizedClick.doc);
865
943
  }
866
- var tooOldClicks = this.visualizedClicks.filter(click => currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */);
867
- tooOldClicks.forEach(click => {
868
- this.fadeOutElement(click.click, click.doc);
869
- this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
944
+ var tooOldClicks = _this.visualizedClicks.filter(function (click) { return currentTimestamp - click.time > 5000 /* Setting.MaxClickDisplayDuration */; });
945
+ tooOldClicks.forEach(function (click) {
946
+ _this.fadeOutElement(click.click, click.doc);
947
+ _this.visualizedClicks.splice(_this.visualizedClicks.indexOf(click), 1);
870
948
  });
871
949
  }
872
950
  };
873
- this.fadeOutElement = (element, document) => {
951
+ this.fadeOutElement = function (element, document) {
874
952
  element.classList.add("clarity-click-hidden");
875
- setTimeout(() => { document.removeChild(element); }, 10000);
953
+ setTimeout(function () { document.removeChild(element); }, 10000);
876
954
  };
877
- this.hover = () => {
878
- if (this.targetId && this.targetId !== this.hoverId) {
879
- let depth = 0;
955
+ this.hover = function () {
956
+ if (_this.targetId && _this.targetId !== _this.hoverId) {
957
+ var depth = 0;
880
958
  // First, remove any previous hover class assignments
881
- let hoverNode = this.hoverId ? this.layout.element(this.hoverId) : null;
959
+ var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
882
960
  while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
883
961
  if ("removeAttribute" in hoverNode) {
884
962
  hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
@@ -888,7 +966,7 @@ class InteractionHelper {
888
966
  }
889
967
  // Then, add hover class on elements that are below the pointer
890
968
  depth = 0;
891
- let targetNode = this.targetId ? this.layout.element(this.targetId) : null;
969
+ var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
892
970
  while (targetNode && depth < 7 /* Setting.HoverDepth */) {
893
971
  if ("setAttribute" in targetNode) {
894
972
  targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
@@ -897,30 +975,30 @@ class InteractionHelper {
897
975
  depth++;
898
976
  }
899
977
  // Finally, update hoverId to reflect the new node
900
- this.hoverId = this.targetId;
978
+ _this.hoverId = _this.targetId;
901
979
  }
902
980
  };
903
- this.addPoint = (point) => {
904
- let last = this.points.length > 0 ? this.points[this.points.length - 1] : null;
981
+ this.addPoint = function (point) {
982
+ var last = _this.points.length > 0 ? _this.points[_this.points.length - 1] : null;
905
983
  if (last && point.x === last.x && point.y === last.y) {
906
984
  last.time = point.time;
907
985
  }
908
986
  else {
909
- this.points.push(point);
987
+ _this.points.push(point);
910
988
  }
911
989
  };
912
- this.drawTouch = (doc, x, y, title) => {
913
- let de = doc.documentElement;
914
- let touch = doc.createElement("DIV");
990
+ this.drawTouch = function (doc, x, y, title) {
991
+ var de = doc.documentElement;
992
+ var touch = doc.createElement("DIV");
915
993
  touch.className = "clarity-touch" /* Constant.TouchLayer */;
916
- touch.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
994
+ touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
917
995
  touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
918
996
  touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
919
997
  touch.style.animation = "disappear 1 1s";
920
998
  touch.style.animationFillMode = "forwards";
921
999
  de.appendChild(touch);
922
1000
  // First pulsating ring
923
- let ringOne = touch.cloneNode();
1001
+ var ringOne = touch.cloneNode();
924
1002
  ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
925
1003
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
926
1004
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
@@ -929,48 +1007,48 @@ class InteractionHelper {
929
1007
  touch.appendChild(ringOne);
930
1008
  return touch;
931
1009
  };
932
- this.drawClick = (doc, x, y, title) => {
933
- let de = doc.documentElement;
934
- let click = doc.createElement("DIV");
1010
+ this.drawClick = function (doc, x, y, title) {
1011
+ var de = doc.documentElement;
1012
+ var click = doc.createElement("DIV");
935
1013
  click.className = "clarity-click" /* Constant.ClickLayer */;
936
- click.setAttribute("title" /* Constant.Title */, `${title} (${x}${"px" /* Constant.Pixel */}, ${y}${"px" /* Constant.Pixel */})`);
1014
+ click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
937
1015
  click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
938
1016
  click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
939
1017
  // First pulsating ring
940
- let ringOne = click.cloneNode();
1018
+ var ringOne = click.cloneNode();
941
1019
  ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
942
1020
  ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
943
1021
  ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
944
1022
  ringOne.style.animation = "pulsate-one 1 1s";
945
1023
  ringOne.style.animationFillMode = "forwards";
946
1024
  click.appendChild(ringOne);
947
- if (this.vnext) {
948
- let center = doc.createElement("DIV");
949
- center.className = `${"clarity-click" /* Constant.ClickLayer */}-center`;
1025
+ if (_this.vnext) {
1026
+ var center = doc.createElement("DIV");
1027
+ center.className = "".concat("clarity-click" /* Constant.ClickLayer */, "-center");
950
1028
  click.appendChild(center);
951
1029
  }
952
1030
  else {
953
1031
  // Second pulsating ring
954
- let ringTwo = ringOne.cloneNode();
1032
+ var ringTwo = ringOne.cloneNode();
955
1033
  ringTwo.style.animation = "pulsate-two 1 1s";
956
1034
  click.appendChild(ringTwo);
957
1035
  }
958
1036
  de.appendChild(click);
959
1037
  // Play sound
960
1038
  if (typeof Audio !== "undefined" /* Constant.Undefined */) {
961
- if (this.clickAudio === null) {
962
- this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
963
- click.appendChild(this.clickAudio);
1039
+ if (_this.clickAudio === null) {
1040
+ _this.clickAudio = new Audio("data:video/webm;base64,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" /* Asset.Sound */);
1041
+ click.appendChild(_this.clickAudio);
964
1042
  }
965
- this.clickAudio.play();
1043
+ _this.clickAudio.play();
966
1044
  }
967
1045
  return click;
968
1046
  };
969
- this.overlay = () => {
1047
+ this.overlay = function () {
970
1048
  // Create canvas for visualizing interactions
971
- let doc = this.state.window.document;
972
- let de = doc.documentElement;
973
- let canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
1049
+ var doc = _this.state.window.document;
1050
+ var de = doc.documentElement;
1051
+ var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
974
1052
  if (canvas === null) {
975
1053
  canvas = doc.createElement("canvas");
976
1054
  canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
@@ -984,13 +1062,13 @@ class InteractionHelper {
984
1062
  }
985
1063
  return canvas;
986
1064
  };
987
- this.match = (time) => {
988
- let p = [];
989
- for (let i = this.points.length - 1; i > 0; i--) {
1065
+ this.match = function (time) {
1066
+ var p = [];
1067
+ for (var i = _this.points.length - 1; i > 0; i--) {
990
1068
  // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
991
1069
  // We reset the trail after every scroll event to avoid drawing weird looking trail.
992
- if (i >= this.scrollPointIndex && time - this.points[i].time < 3000 /* Setting.PixelLife */) {
993
- p.push(this.points[i]);
1070
+ if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
1071
+ p.push(_this.points[i]);
994
1072
  }
995
1073
  else {
996
1074
  break;
@@ -998,32 +1076,32 @@ class InteractionHelper {
998
1076
  }
999
1077
  return p.slice(0, 75 /* Setting.MaxTrailPoints */);
1000
1078
  };
1001
- this.trail = (now) => {
1002
- const canvas = this.overlay();
1003
- if (this.state.options.canvas && canvas) {
1004
- const ctx = canvas.getContext('2d');
1005
- const path = this.state.options.keyframes ? this.curve(this.points.reverse()) : this.curve(this.match(now));
1079
+ this.trail = function (now) {
1080
+ var canvas = _this.overlay();
1081
+ if (_this.state.options.canvas && canvas) {
1082
+ var ctx = canvas.getContext('2d');
1083
+ var path = _this.state.options.keyframes ? _this.curve(_this.points.reverse()) : _this.curve(_this.match(now));
1006
1084
  // Update hovered elements
1007
- this.hover();
1085
+ _this.hover();
1008
1086
  // We need at least two points to create a line
1009
1087
  if (path.length > 1) {
1010
- let last = path[0];
1088
+ var last = path[0];
1011
1089
  // Start off by clearing whatever was on the canvas before
1012
1090
  // The current implementation is inefficient. We have to redraw canvas all over again for every point.
1013
1091
  // In future we should batch pointer events and minimize the number of times we have to redraw canvas.
1014
1092
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
1015
- let count = path.length;
1016
- let offsetX = canvas.offsetLeft;
1017
- let offsetY = canvas.offsetTop;
1018
- for (let i = 1; i < count; i++) {
1019
- let current = path[i];
1093
+ var count = path.length;
1094
+ var offsetX = canvas.offsetLeft;
1095
+ var offsetY = canvas.offsetTop;
1096
+ for (var i = 1; i < count; i++) {
1097
+ var current = path[i];
1020
1098
  // Compute percentage position of these points compared to all points in the path
1021
- let lastFactor = 1 - ((i - 1) / count);
1022
- let currentFactor = 1 - (i / count);
1099
+ var lastFactor = 1 - ((i - 1) / count);
1100
+ var currentFactor = 1 - (i / count);
1023
1101
  // Generate a color gradient that goes from red -> yellow -> green -> light blue -> blue
1024
- let gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1025
- gradient.addColorStop(1, this.color(currentFactor));
1026
- gradient.addColorStop(0, this.color(lastFactor));
1102
+ var gradient = ctx.createLinearGradient(last.x, last.y, current.x, current.y);
1103
+ gradient.addColorStop(1, _this.color(currentFactor));
1104
+ gradient.addColorStop(0, _this.color(lastFactor));
1027
1105
  // Line width of the trail shrinks as the position of the point goes farther away.
1028
1106
  ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
1029
1107
  ctx.lineCap = "round" /* Constant.Round */;
@@ -1041,25 +1119,25 @@ class InteractionHelper {
1041
1119
  }
1042
1120
  }
1043
1121
  // If we are only rendering key frames, clear points array after each key frame
1044
- if (this.state.options.keyframes) {
1045
- this.points = [];
1122
+ if (_this.state.options.keyframes) {
1123
+ _this.points = [];
1046
1124
  }
1047
1125
  }
1048
1126
  };
1049
- this.color = (factor) => {
1050
- let s = InteractionHelper.TRAIL_START_COLOR;
1051
- let e = InteractionHelper.TRAIL_END_COLOR;
1052
- let c = [];
1053
- for (let i = 0; i < 3; i++) {
1127
+ this.color = function (factor) {
1128
+ var s = InteractionHelper.TRAIL_START_COLOR;
1129
+ var e = InteractionHelper.TRAIL_END_COLOR;
1130
+ var c = [];
1131
+ for (var i = 0; i < 3; i++) {
1054
1132
  c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
1055
1133
  }
1056
- return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${factor})`;
1134
+ return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
1057
1135
  };
1058
1136
  // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
1059
- this.curve = (path) => {
1060
- const tension = 0.5;
1061
- let p = [];
1062
- let output = [];
1137
+ this.curve = function (path) {
1138
+ var tension = 0.5;
1139
+ var p = [];
1140
+ var output = [];
1063
1141
  // Make a copy of the input points so we don't make any side effects
1064
1142
  p = path.slice(0);
1065
1143
  // The algorithm require a valid previous and next point for each point in the original input
@@ -1068,56 +1146,57 @@ class InteractionHelper {
1068
1146
  p.unshift(path[0]);
1069
1147
  p.push(path[path.length - 1]);
1070
1148
  // Loop through the points, and generate intermediate points to make a smooth trail
1071
- for (let i = 1; i < p.length - 2; i++) {
1072
- const time = p[i].time;
1073
- const segments = Math.max(Math.min(Math.round(this.distance(p[i], p[i - 1])), 10), 1);
1074
- for (let t = 0; t <= segments; t++) {
1149
+ for (var i = 1; i < p.length - 2; i++) {
1150
+ var time = p[i].time;
1151
+ var segments = Math.max(Math.min(Math.round(_this.distance(p[i], p[i - 1])), 10), 1);
1152
+ for (var t = 0; t <= segments; t++) {
1075
1153
  // Compute tension vectors
1076
- let t1 = { time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1077
- let t2 = { time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1078
- let step = t / segments;
1154
+ var t1 = { time: time, x: (p[i + 1].x - p[i - 1].x) * tension, y: (p[i + 1].y - p[i - 1].y) * tension };
1155
+ var t2 = { time: time, x: (p[i + 2].x - p[i].x) * tension, y: (p[i + 2].y - p[i].y) * tension };
1156
+ var step = t / segments;
1079
1157
  // Compute cardinals
1080
- let c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1081
- let c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1082
- let c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1083
- let c4 = Math.pow(step, 3) - Math.pow(step, 2);
1158
+ var c1 = 2 * Math.pow(step, 3) - 3 * Math.pow(step, 2) + 1;
1159
+ var c2 = -(2 * Math.pow(step, 3)) + 3 * Math.pow(step, 2);
1160
+ var c3 = Math.pow(step, 3) - 2 * Math.pow(step, 2) + step;
1161
+ var c4 = Math.pow(step, 3) - Math.pow(step, 2);
1084
1162
  // Compute new point with common control vectors
1085
- let x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1086
- let y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1087
- output.push({ time, x, y });
1163
+ var x = c1 * p[i].x + c2 * p[i + 1].x + c3 * t1.x + c4 * t2.x;
1164
+ var y = c1 * p[i].y + c2 * p[i + 1].y + c3 * t1.y + c4 * t2.y;
1165
+ output.push({ time: time, x: x, y: y });
1088
1166
  }
1089
1167
  }
1090
1168
  return output;
1091
1169
  };
1092
- this.distance = (a, b) => {
1093
- const dx = a.x - b.x;
1094
- const dy = a.y - b.y;
1170
+ this.distance = function (a, b) {
1171
+ var dx = a.x - b.x;
1172
+ var dy = a.y - b.y;
1095
1173
  return Math.sqrt(dx * dx + dy * dy);
1096
1174
  };
1097
- this.getPointerStyle = () => {
1098
- if (this.vnext) {
1099
- return `.${"clarity-pointer-move" /* Constant.PointerMove */} { ${pointerSvg} }`;
1175
+ this.getPointerStyle = function () {
1176
+ if (_this.vnext) {
1177
+ return ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { ").concat(pointerSvg, " }");
1100
1178
  }
1101
1179
  else {
1102
- 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 */}); }`;
1180
+ 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 */, "); }");
1103
1181
  }
1104
1182
  };
1105
- this.getClickLayerStyle = () => {
1106
- if (this.vnext) {
1183
+ this.getClickLayerStyle = function () {
1184
+ if (_this.vnext) {
1107
1185
  return clickStyle;
1108
1186
  }
1109
1187
  else {
1110
- 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;}` +
1111
- `.${"clarity-click-ring" /* Constant.ClickRing */} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
1188
+ 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;}") +
1189
+ ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }");
1112
1190
  }
1113
1191
  };
1114
1192
  this.state = state;
1115
1193
  this.layout = layout;
1116
1194
  this.vnext = vnext;
1117
1195
  }
1118
- }
1119
- InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1120
- InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1196
+ InteractionHelper.TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
1197
+ InteractionHelper.TRAIL_END_COLOR = [249, 220, 209]; // rgb(249,220,209)
1198
+ return InteractionHelper;
1199
+ }());
1121
1200
 
1122
1201
  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] {
1123
1202
  background-color: #FBFBFE;
@@ -1126,6 +1205,113 @@ var sharedStyle = `iframe[data-clarity-unavailable-small], iframe[data-clarity-u
1126
1205
  border-color: #827DFF;
1127
1206
  }`;
1128
1207
 
1208
+ /**
1209
+ * Custom module for rendering HTML Dialog elements
1210
+ * Handles proper visualization of modal dialogs in the top-layer
1211
+ */
1212
+ /**
1213
+ * Extracts dialog rendering options from node attributes
1214
+ *
1215
+ * @param attributes - Node attributes containing dialog state
1216
+ * @param dialogElement - The dialog element being rendered
1217
+ * @returns Dialog render options
1218
+ */
1219
+ function getDialogRenderOptions(attributes, dialogElement) {
1220
+ return {
1221
+ isModal: attributes["data-clarity-modal"] === "true",
1222
+ shouldBeOpen: attributes["open"] !== undefined,
1223
+ isExistingDialog: !!dialogElement
1224
+ };
1225
+ }
1226
+ /**
1227
+ * Shows a dialog element with proper modal/non-modal handling
1228
+ * Modal dialogs are shown via showModal() to render in top-layer with backdrop
1229
+ * Non-modal dialogs are shown via show() method
1230
+ *
1231
+ * @param dialogElement - The dialog element to show
1232
+ * @param isModal - Whether this is a modal dialog
1233
+ * @param onError - Optional error callback
1234
+ */
1235
+ function showDialog(dialogElement, isModal, onError) {
1236
+ try {
1237
+ if (!dialogElement.isConnected) {
1238
+ console.warn('⚠️ Dialog not connected to DOM, skipping show');
1239
+ return;
1240
+ }
1241
+ // IMPORTANT: If dialog is already open (from HTML attribute),
1242
+ // we need to close and reopen to ensure showModal() is called
1243
+ // and dialog enters top-layer properly
1244
+ if (dialogElement.open) {
1245
+ dialogElement.close();
1246
+ }
1247
+ if (isModal) {
1248
+ dialogElement.showModal();
1249
+ }
1250
+ else {
1251
+ dialogElement.show();
1252
+ }
1253
+ }
1254
+ catch (e) {
1255
+ console.error('❌ Error showing dialog:', e);
1256
+ if (onError) {
1257
+ onError(e);
1258
+ }
1259
+ }
1260
+ }
1261
+ /**
1262
+ * Closes a dialog element safely
1263
+ *
1264
+ * @param dialogElement - The dialog element to close
1265
+ */
1266
+ function closeDialog(dialogElement) {
1267
+ try {
1268
+ if (dialogElement.open) {
1269
+ dialogElement.close();
1270
+ }
1271
+ }
1272
+ catch (e) {
1273
+ console.warn('⚠️ Error closing dialog:', e);
1274
+ }
1275
+ }
1276
+ /**
1277
+ * Handles dialog rendering based on its state
1278
+ * This is the main entry point for dialog rendering logic
1279
+ *
1280
+ * @param dialogElement - The dialog element to render
1281
+ * @param options - Dialog render options
1282
+ * @param onError - Optional error callback
1283
+ */
1284
+ function renderDialog(dialogElement, options, onError) {
1285
+ var isModal = options.isModal, shouldBeOpen = options.shouldBeOpen, isExistingDialog = options.isExistingDialog;
1286
+ if (shouldBeOpen) {
1287
+ var doShow = function () { return showDialog(dialogElement, isModal, onError); };
1288
+ if (isExistingDialog) {
1289
+ // Dialog already exists, call immediately
1290
+ doShow();
1291
+ }
1292
+ else {
1293
+ // New dialog, wait for DOM insertion
1294
+ setTimeout(doShow, 0);
1295
+ }
1296
+ }
1297
+ else if (dialogElement.open) {
1298
+ // Dialog should be closed
1299
+ closeDialog(dialogElement);
1300
+ }
1301
+ }
1302
+ /**
1303
+ * Removes custom tracking attributes before rendering
1304
+ * These attributes are only for internal use
1305
+ *
1306
+ * @param attributes - Attributes object to clean
1307
+ * @returns Cleaned attributes
1308
+ */
1309
+ function cleanDialogAttributes(attributes) {
1310
+ var cleaned = __assign({}, attributes);
1311
+ delete cleaned["data-clarity-modal"];
1312
+ return cleaned;
1313
+ }
1314
+
1129
1315
  var blobUnavailableSvgEnglish = `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='M55.75 11C57.5449 11 59 12.4551 59 14.25V25.75C59 27.5449 57.5449 29 55.75 29H44.25C42.4551 29 41 27.5449 41 25.75V14.25C41 12.4551 42.4551 11 44.25 11H55.75ZM56.3305 27.4014L50.5247 21.7148C50.2596 21.4553 49.8501 21.4316 49.5588 21.644L49.4752 21.7148L43.6685 27.4011C43.8504 27.4651 44.0461 27.5 44.25 27.5H55.75C55.9535 27.5 56.1489 27.4653 56.3305 27.4014L50.5247 21.7148L56.3305 27.4014ZM55.75 12.5H44.25C43.2835 12.5 42.5 13.2835 42.5 14.25V25.75C42.5 25.9584 42.5364 26.1583 42.6033 26.3437L48.4258 20.643C49.2589 19.8273 50.5675 19.7885 51.4458 20.5266L51.5742 20.6431L57.3964 26.3447C57.4634 26.159 57.5 25.9588 57.5 25.75V14.25C57.5 13.2835 56.7165 12.5 55.75 12.5ZM53.2521 14.5C54.4959 14.5 55.5042 15.5083 55.5042 16.7521C55.5042 17.9959 54.4959 19.0042 53.2521 19.0042C52.0083 19.0042 51 17.9959 51 16.7521C51 15.5083 52.0083 14.5 53.2521 14.5ZM53.2521 16C52.8367 16 52.5 16.3367 52.5 16.7521C52.5 17.1675 52.8367 17.5042 53.2521 17.5042C53.6675 17.5042 54.0042 17.1675 54.0042 16.7521C54.0042 16.3367 53.6675 16 53.2521 16Z' fill='%23020057'/%3E%3Cpath d='M25.8418 52.6484C25.2207 52.9766 24.4473 53.1406 23.5215 53.1406C22.3262 53.1406 21.3691 52.7559 20.6504 51.9863C19.9316 51.2168 19.5723 50.207 19.5723 48.957C19.5723 47.6133 19.9766 46.5273 20.7852 45.6992C21.5938 44.8711 22.6191 44.457 23.8613 44.457C24.6582 44.457 25.3184 44.5723 25.8418 44.8027V45.8516C25.2402 45.5156 24.5762 45.3477 23.8496 45.3477C22.8848 45.3477 22.1016 45.6699 21.5 46.3145C20.9023 46.959 20.6035 47.8203 20.6035 48.8984C20.6035 49.9219 20.8828 50.7383 21.4414 51.3477C22.0039 51.9531 22.7402 52.2559 23.6504 52.2559C24.4941 52.2559 25.2246 52.0684 25.8418 51.6934V52.6484ZM28.3848 53H27.4238V44.1172H28.3848V53ZM34.625 53H33.6641V52.0625H33.6406C33.2227 52.7812 32.6074 53.1406 31.7949 53.1406C31.1973 53.1406 30.7285 52.9824 30.3887 52.666C30.0527 52.3496 29.8848 51.9297 29.8848 51.4062C29.8848 50.2852 30.5449 49.6328 31.8652 49.4492L33.6641 49.1973C33.6641 48.1777 33.252 47.668 32.4277 47.668C31.7051 47.668 31.0527 47.9141 30.4707 48.4062V47.4219C31.0605 47.0469 31.7402 46.8594 32.5098 46.8594C33.9199 46.8594 34.625 47.6055 34.625 49.0977V53ZM33.6641 49.9648L32.2168 50.1641C31.7715 50.2266 31.4355 50.3379 31.209 50.498C30.9824 50.6543 30.8691 50.9336 30.8691 51.3359C30.8691 51.6289 30.9727 51.8691 31.1797 52.0566C31.3906 52.2402 31.6699 52.332 32.0176 52.332C32.4941 52.332 32.8867 52.166 33.1953 51.834C33.5078 51.498 33.6641 51.0742 33.6641 50.5625V49.9648ZM39.5645 47.9727C39.3965 47.8438 39.1543 47.7793 38.8379 47.7793C38.4277 47.7793 38.084 47.9727 37.8066 48.3594C37.5332 48.7461 37.3965 49.2734 37.3965 49.9414V53H36.4355V47H37.3965V48.2363H37.4199C37.5566 47.8145 37.7656 47.4863 38.0469 47.252C38.3281 47.0137 38.6426 46.8945 38.9902 46.8945C39.2402 46.8945 39.4316 46.9219 39.5645 46.9766V47.9727ZM41.0996 45.4766C40.9277 45.4766 40.7812 45.418 40.6602 45.3008C40.5391 45.1836 40.4785 45.0352 40.4785 44.8555C40.4785 44.6758 40.5391 44.5273 40.6602 44.4102C40.7812 44.2891 40.9277 44.2285 41.0996 44.2285C41.2754 44.2285 41.4238 44.2891 41.5449 44.4102C41.6699 44.5273 41.7324 44.6758 41.7324 44.8555C41.7324 45.0273 41.6699 45.1738 41.5449 45.2949C41.4238 45.416 41.2754 45.4766 41.0996 45.4766ZM41.5684 53H40.6074V47H41.5684V53ZM46.2969 52.9414C46.0703 53.0664 45.7715 53.1289 45.4004 53.1289C44.3496 53.1289 43.8242 52.543 43.8242 51.3711V47.8203H42.793V47H43.8242V45.5352L44.7852 45.2246V47H46.2969V47.8203H44.7852V51.2012C44.7852 51.6035 44.8535 51.8906 44.9902 52.0625C45.127 52.2344 45.3535 52.3203 45.6699 52.3203C45.9121 52.3203 46.1211 52.2539 46.2969 52.1211V52.9414ZM52.3555 47L49.5957 53.9609C49.1035 55.2031 48.4121 55.8242 47.5215 55.8242C47.2715 55.8242 47.0625 55.7988 46.8945 55.748V54.8867C47.1016 54.957 47.291 54.9922 47.4629 54.9922C47.9473 54.9922 48.3105 54.7031 48.5527 54.125L49.0332 52.9883L46.6895 47H47.7559L49.3789 51.6172C49.3984 51.6758 49.4395 51.8281 49.502 52.0742H49.5371C49.5566 51.9805 49.5957 51.832 49.6543 51.6289L51.3594 47H52.3555ZM60.7754 52.7246C60.3145 53.002 59.7676 53.1406 59.1348 53.1406C58.2793 53.1406 57.5879 52.8633 57.0605 52.3086C56.5371 51.75 56.2754 51.0273 56.2754 50.1406C56.2754 49.1523 56.5586 48.3594 57.125 47.7617C57.6914 47.1602 58.4473 46.8594 59.3926 46.8594C59.9199 46.8594 60.3848 46.957 60.7871 47.1523V48.1367C60.3418 47.8242 59.8652 47.668 59.3574 47.668C58.7441 47.668 58.2402 47.8887 57.8457 48.3301C57.4551 48.7676 57.2598 49.3438 57.2598 50.0586C57.2598 50.7617 57.4434 51.3164 57.8105 51.7227C58.1816 52.1289 58.6777 52.332 59.2988 52.332C59.8223 52.332 60.3145 52.1582 60.7754 51.8105V52.7246ZM66.5234 53H65.5625V52.0625H65.5391C65.1211 52.7812 64.5059 53.1406 63.6934 53.1406C63.0957 53.1406 62.627 52.9824 62.2871 52.666C61.9512 52.3496 61.7832 51.9297 61.7832 51.4062C61.7832 50.2852 62.4434 49.6328 63.7637 49.4492L65.5625 49.1973C65.5625 48.1777 65.1504 47.668 64.3262 47.668C63.6035 47.668 62.9512 47.9141 62.3691 48.4062V47.4219C62.959 47.0469 63.6387 46.8594 64.4082 46.8594C65.8184 46.8594 66.5234 47.6055 66.5234 49.0977V53ZM65.5625 49.9648L64.1152 50.1641C63.6699 50.2266 63.334 50.3379 63.1074 50.498C62.8809 50.6543 62.7676 50.9336 62.7676 51.3359C62.7676 51.6289 62.8711 51.8691 63.0781 52.0566C63.2891 52.2402 63.5684 52.332 63.916 52.332C64.3926 52.332 64.7852 52.166 65.0938 51.834C65.4062 51.498 65.5625 51.0742 65.5625 50.5625V49.9648ZM73.3145 53H72.3535V49.5781C72.3535 48.3047 71.8887 47.668 70.959 47.668C70.4785 47.668 70.0801 47.8496 69.7637 48.2129C69.4512 48.5723 69.2949 49.0273 69.2949 49.5781V53H68.334V47H69.2949V47.9961H69.3184C69.7715 47.2383 70.4277 46.8594 71.2871 46.8594C71.9434 46.8594 72.4453 47.0723 72.793 47.498C73.1406 47.9199 73.3145 48.5312 73.3145 49.332V53ZM76.3145 44.457L75.4941 47.0703H74.8027L75.4531 44.457H76.3145ZM80.668 52.9414C80.4414 53.0664 80.1426 53.1289 79.7715 53.1289C78.7207 53.1289 78.1953 52.543 78.1953 51.3711V47.8203H77.1641V47H78.1953V45.5352L79.1562 45.2246V47H80.668V47.8203H79.1562V51.2012C79.1562 51.6035 79.2246 51.8906 79.3613 52.0625C79.498 52.2344 79.7246 52.3203 80.041 52.3203C80.2832 52.3203 80.4922 52.2539 80.668 52.1211V52.9414ZM15.3887 63.9727C15.2207 63.8438 14.9785 63.7793 14.6621 63.7793C14.252 63.7793 13.9082 63.9727 13.6309 64.3594C13.3574 64.7461 13.2207 65.2734 13.2207 65.9414V69H12.2598V63H13.2207V64.2363H13.2441C13.3809 63.8145 13.5898 63.4863 13.8711 63.252C14.1523 63.0137 14.4668 62.8945 14.8145 62.8945C15.0645 62.8945 15.2559 62.9219 15.3887 62.9766V63.9727ZM21.2539 66.2402H17.0176C17.0332 66.9082 17.2129 67.4238 17.5566 67.7871C17.9004 68.1504 18.373 68.332 18.9746 68.332C19.6504 68.332 20.2715 68.1094 20.8379 67.6641V68.5664C20.3105 68.9492 19.6133 69.1406 18.7461 69.1406C17.8984 69.1406 17.2324 68.8691 16.748 68.3262C16.2637 67.7793 16.0215 67.0117 16.0215 66.0234C16.0215 65.0898 16.2852 64.3301 16.8125 63.7441C17.3438 63.1543 18.002 62.8594 18.7871 62.8594C19.5723 62.8594 20.1797 63.1133 20.6094 63.6211C21.0391 64.1289 21.2539 64.834 21.2539 65.7363V66.2402ZM20.2695 65.4258C20.2656 64.8711 20.1309 64.4395 19.8652 64.1309C19.6035 63.8223 19.2383 63.668 18.7695 63.668C18.3164 63.668 17.9316 63.8301 17.6152 64.1543C17.2988 64.4785 17.1035 64.9023 17.0293 65.4258H20.2695ZM27.0078 69H26.0469V68.0625H26.0234C25.6055 68.7812 24.9902 69.1406 24.1777 69.1406C23.5801 69.1406 23.1113 68.9824 22.7715 68.666C22.4355 68.3496 22.2676 67.9297 22.2676 67.4062C22.2676 66.2852 22.9277 65.6328 24.248 65.4492L26.0469 65.1973C26.0469 64.1777 25.6348 63.668 24.8105 63.668C24.0879 63.668 23.4355 63.9141 22.8535 64.4062V63.4219C23.4434 63.0469 24.123 62.8594 24.8926 62.8594C26.3027 62.8594 27.0078 63.6055 27.0078 65.0977V69ZM26.0469 65.9648L24.5996 66.1641C24.1543 66.2266 23.8184 66.3379 23.5918 66.498C23.3652 66.6543 23.252 66.9336 23.252 67.3359C23.252 67.6289 23.3555 67.8691 23.5625 68.0566C23.7734 68.2402 24.0527 68.332 24.4004 68.332C24.877 68.332 25.2695 68.166 25.5781 67.834C25.8906 67.498 26.0469 67.0742 26.0469 66.5625V65.9648ZM33.9395 69H32.9785V67.9805H32.9551C32.5098 68.7539 31.8223 69.1406 30.8926 69.1406C30.1387 69.1406 29.5352 68.873 29.082 68.3379C28.6328 67.7988 28.4082 67.0664 28.4082 66.1406C28.4082 65.1484 28.6582 64.3535 29.1582 63.7559C29.6582 63.1582 30.3242 62.8594 31.1562 62.8594C31.9805 62.8594 32.5801 63.1836 32.9551 63.832H32.9785V60.1172H33.9395V69ZM32.9785 66.2871V65.4023C32.9785 64.918 32.8184 64.5078 32.498 64.1719C32.1777 63.8359 31.7715 63.668 31.2793 63.668C30.6934 63.668 30.2324 63.8828 29.8965 64.3125C29.5605 64.7422 29.3926 65.3359 29.3926 66.0938C29.3926 66.7852 29.5527 67.332 29.873 67.7344C30.1973 68.1328 30.6309 68.332 31.1738 68.332C31.709 68.332 32.1426 68.1387 32.4746 67.752C32.8105 67.3652 32.9785 66.877 32.9785 66.2871ZM39.3066 69V60.5977H41.6973C42.4238 60.5977 43 60.7754 43.4258 61.1309C43.8516 61.4863 44.0645 61.9492 44.0645 62.5195C44.0645 62.9961 43.9355 63.4102 43.6777 63.7617C43.4199 64.1133 43.0645 64.3633 42.6113 64.5117V64.5352C43.1777 64.6016 43.6309 64.8164 43.9707 65.1797C44.3105 65.5391 44.4805 66.0078 44.4805 66.5859C44.4805 67.3047 44.2227 67.8867 43.707 68.332C43.1914 68.7773 42.541 69 41.7559 69H39.3066ZM40.291 61.4883V64.2012H41.2988C41.8379 64.2012 42.2617 64.0723 42.5703 63.8145C42.8789 63.5527 43.0332 63.1855 43.0332 62.7129C43.0332 61.8965 42.4961 61.4883 41.4219 61.4883H40.291ZM40.291 65.0859V68.1094H41.627C42.2051 68.1094 42.6523 67.9727 42.9688 67.6992C43.2891 67.4258 43.4492 67.0508 43.4492 66.5742C43.4492 65.582 42.7734 65.0859 41.4219 65.0859H40.291ZM47.0176 69H46.0566V60.1172H47.0176V69ZM51.4707 69.1406C50.584 69.1406 49.875 68.8613 49.3438 68.3027C48.8164 67.7402 48.5527 66.9961 48.5527 66.0703C48.5527 65.0625 48.8281 64.2754 49.3789 63.709C49.9297 63.1426 50.6738 62.8594 51.6113 62.8594C52.5059 62.8594 53.2031 63.1348 53.7031 63.6855C54.207 64.2363 54.459 65 54.459 65.9766C54.459 66.9336 54.1875 67.7012 53.6445 68.2793C53.1055 68.8535 52.3809 69.1406 51.4707 69.1406ZM51.541 63.668C50.9238 63.668 50.4355 63.8789 50.0762 64.3008C49.7168 64.7188 49.5371 65.2969 49.5371 66.0352C49.5371 66.7461 49.7188 67.3066 50.082 67.7168C50.4453 68.127 50.9316 68.332 51.541 68.332C52.1621 68.332 52.6387 68.1309 52.9707 67.7285C53.3066 67.3262 53.4746 66.7539 53.4746 66.0117C53.4746 65.2617 53.3066 64.6836 52.9707 64.2773C52.6387 63.8711 52.1621 63.668 51.541 63.668ZM56.9785 68.1328H56.9551V69H55.9941V60.1172H56.9551V64.0547H56.9785C57.4512 63.2578 58.1426 62.8594 59.0527 62.8594C59.8223 62.8594 60.4238 63.1289 60.8574 63.668C61.2949 64.2031 61.5137 64.9219 61.5137 65.8242C61.5137 66.8281 61.2695 67.6328 60.7812 68.2383C60.293 68.8398 59.625 69.1406 58.7773 69.1406C57.9844 69.1406 57.3848 68.8047 56.9785 68.1328ZM56.9551 65.7129V66.5508C56.9551 67.0469 57.1152 67.4688 57.4355 67.8164C57.7598 68.1602 58.1699 68.332 58.666 68.332C59.248 68.332 59.7031 68.1094 60.0312 67.6641C60.3633 67.2188 60.5293 66.5996 60.5293 65.8066C60.5293 65.1387 60.375 64.6152 60.0664 64.2363C59.7578 63.8574 59.3398 63.668 58.8125 63.668C58.2539 63.668 57.8047 63.8633 57.4648 64.2539C57.125 64.6406 56.9551 65.127 56.9551 65.7129ZM71.4629 69H70.502V67.9805H70.4785C70.0332 68.7539 69.3457 69.1406 68.416 69.1406C67.6621 69.1406 67.0586 68.873 66.6055 68.3379C66.1562 67.7988 65.9316 67.0664 65.9316 66.1406C65.9316 65.1484 66.1816 64.3535 66.6816 63.7559C67.1816 63.1582 67.8477 62.8594 68.6797 62.8594C69.5039 62.8594 70.1035 63.1836 70.4785 63.832H70.502V60.1172H71.4629V69ZM70.502 66.2871V65.4023C70.502 64.918 70.3418 64.5078 70.0215 64.1719C69.7012 63.8359 69.2949 63.668 68.8027 63.668C68.2168 63.668 67.7559 63.8828 67.4199 64.3125C67.084 64.7422 66.916 65.3359 66.916 66.0938C66.916 66.7852 67.0762 67.332 67.3965 67.7344C67.7207 68.1328 68.1543 68.332 68.6973 68.332C69.2324 68.332 69.666 68.1387 69.998 67.752C70.334 67.3652 70.502 66.877 70.502 66.2871ZM77.7031 69H76.7422V68.0625H76.7188C76.3008 68.7812 75.6855 69.1406 74.873 69.1406C74.2754 69.1406 73.8066 68.9824 73.4668 68.666C73.1309 68.3496 72.9629 67.9297 72.9629 67.4062C72.9629 66.2852 73.623 65.6328 74.9434 65.4492L76.7422 65.1973C76.7422 64.1777 76.3301 63.668 75.5059 63.668C74.7832 63.668 74.1309 63.9141 73.5488 64.4062V63.4219C74.1387 63.0469 74.8184 62.8594 75.5879 62.8594C76.998 62.8594 77.7031 63.6055 77.7031 65.0977V69ZM76.7422 65.9648L75.2949 66.1641C74.8496 66.2266 74.5137 66.3379 74.2871 66.498C74.0605 66.6543 73.9473 66.9336 73.9473 67.3359C73.9473 67.6289 74.0508 67.8691 74.2578 68.0566C74.4688 68.2402 74.748 68.332 75.0957 68.332C75.5723 68.332 75.9648 68.166 76.2734 67.834C76.5859 67.498 76.7422 67.0742 76.7422 66.5625V65.9648ZM82.2969 68.9414C82.0703 69.0664 81.7715 69.1289 81.4004 69.1289C80.3496 69.1289 79.8242 68.543 79.8242 67.3711V63.8203H78.793V63H79.8242V61.5352L80.7852 61.2246V63H82.2969V63.8203H80.7852V67.2012C80.7852 67.6035 80.8535 67.8906 80.9902 68.0625C81.127 68.2344 81.3535 68.3203 81.6699 68.3203C81.9121 68.3203 82.1211 68.2539 82.2969 68.1211V68.9414ZM87.875 69H86.9141V68.0625H86.8906C86.4727 68.7812 85.8574 69.1406 85.0449 69.1406C84.4473 69.1406 83.9785 68.9824 83.6387 68.666C83.3027 68.3496 83.1348 67.9297 83.1348 67.4062C83.1348 66.2852 83.7949 65.6328 85.1152 65.4492L86.9141 65.1973C86.9141 64.1777 86.502 63.668 85.6777 63.668C84.9551 63.668 84.3027 63.9141 83.7207 64.4062V63.4219C84.3105 63.0469 84.9902 62.8594 85.7598 62.8594C87.1699 62.8594 87.875 63.6055 87.875 65.0977V69ZM86.9141 65.9648L85.4668 66.1641C85.0215 66.2266 84.6855 66.3379 84.459 66.498C84.2324 66.6543 84.1191 66.9336 84.1191 67.3359C84.1191 67.6289 84.2227 67.8691 84.4297 68.0566C84.6406 68.2402 84.9199 68.332 85.2676 68.332C85.7441 68.332 86.1367 68.166 86.4453 67.834C86.7578 67.498 86.9141 67.0742 86.9141 66.5625V65.9648Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
1130
1316
 
1131
1317
  var blobUnavailableSvgSmall = `background: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23FBFBFE'/%3E%3Cpath d='M25.75 11C27.5449 11 29 12.4551 29 14.25V25.75C29 27.5449 27.5449 29 25.75 29H14.25C12.4551 29 11 27.5449 11 25.75V14.25C11 12.4551 12.4551 11 14.25 11H25.75ZM26.3305 27.4014L20.5247 21.7148C20.2596 21.4553 19.8501 21.4316 19.5588 21.644L19.4752 21.7148L13.6685 27.4011C13.8504 27.4651 14.0461 27.5 14.25 27.5H25.75C25.9535 27.5 26.1489 27.4653 26.3305 27.4014L20.5247 21.7148L26.3305 27.4014ZM25.75 12.5H14.25C13.2835 12.5 12.5 13.2835 12.5 14.25V25.75C12.5 25.9584 12.5364 26.1583 12.6033 26.3437L18.4258 20.643C19.2589 19.8273 20.5675 19.7885 21.4458 20.5266L21.5742 20.6431L27.3964 26.3447C27.4634 26.159 27.5 25.9588 27.5 25.75V14.25C27.5 13.2835 26.7165 12.5 25.75 12.5ZM23.2521 14.5C24.4959 14.5 25.5042 15.5083 25.5042 16.7521C25.5042 17.9959 24.4959 19.0042 23.2521 19.0042C22.0083 19.0042 21 17.9959 21 16.7521C21 15.5083 22.0083 14.5 23.2521 14.5ZM23.2521 16C22.8367 16 22.5 16.3367 22.5 16.7521C22.5 17.1675 22.8367 17.5042 23.2521 17.5042C23.6675 17.5042 24.0042 17.1675 24.0042 16.7521C24.0042 16.3367 23.6675 16 23.2521 16Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
@@ -1210,7 +1396,7 @@ var imageMaskedSvgItalian = `background: url("data:image/svg+xml,%3Csvg width='1
1210
1396
 
1211
1397
  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;`;
1212
1398
 
1213
- const blobUnavailableSvg = {
1399
+ var blobUnavailableSvg = {
1214
1400
  "de-de": blobUnavailableSvgGerman,
1215
1401
  "en-gb": blobUnavailableSvgEnglish,
1216
1402
  "en-us": blobUnavailableSvgEnglish,
@@ -1226,7 +1412,7 @@ const blobUnavailableSvg = {
1226
1412
  "zh-hans": blobUnavailableSvgChineseSimplified,
1227
1413
  "zh-hant": blobUnavailableSvgChineseTraditional,
1228
1414
  };
1229
- const iframeUnavailableSvg = {
1415
+ var iframeUnavailableSvg = {
1230
1416
  "de-de": iframeUnavailableSvgGerman,
1231
1417
  "en-gb": iframeUnavailableSvgEnglish,
1232
1418
  "en-us": iframeUnavailableSvgEnglish,
@@ -1242,7 +1428,7 @@ const iframeUnavailableSvg = {
1242
1428
  "zh-hans": iframeUnavailableSvgChineseSimplified,
1243
1429
  "zh-hant": iframeUnavailableSvgChineseTraditional,
1244
1430
  };
1245
- const imageMaskedSvg = {
1431
+ var imageMaskedSvg = {
1246
1432
  "de-de": imageMaskedSvgGerman,
1247
1433
  "en-gb": imageMaskedSvgEnglish,
1248
1434
  "en-us": imageMaskedSvgEnglish,
@@ -1259,8 +1445,12 @@ const imageMaskedSvg = {
1259
1445
  "zh-hant": imageMaskedSvgChineseTraditional,
1260
1446
  };
1261
1447
  /* END imageMaskedSvgs */
1262
- class LayoutHelper {
1263
- constructor(state, isMobile = false, vNext = false, locale = 'en-us') {
1448
+ var LayoutHelper = /** @class */ (function () {
1449
+ function LayoutHelper(state, isMobile, vNext, locale) {
1450
+ if (isMobile === void 0) { isMobile = false; }
1451
+ if (vNext === void 0) { vNext = false; }
1452
+ if (locale === void 0) { locale = 'en-us'; }
1453
+ var _this = this;
1264
1454
  this.primaryHtmlNodeId = null;
1265
1455
  this.stylesheets = [];
1266
1456
  this.fonts = [];
@@ -1273,42 +1463,42 @@ class LayoutHelper {
1273
1463
  this.state = null;
1274
1464
  this.stylesToApply = {};
1275
1465
  this.BackgroundImageEligibleElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'ASIDE', 'NAV', 'SPAN', 'P', 'MAIN'];
1276
- 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 */}")`;
1277
- this.reset = () => {
1278
- this.nodes = {};
1279
- this.stylesheets = [];
1280
- this.fonts = [];
1281
- this.events = {};
1282
- this.hashMapAlpha = {};
1283
- this.hashMapBeta = {};
1284
- this.primaryHtmlNodeId = null;
1285
- };
1286
- this.get = (hash) => {
1287
- if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
1288
- return this.hashMapBeta[hash];
1289
- }
1290
- else if (hash in this.hashMapAlpha && this.hashMapAlpha[hash].isConnected) {
1291
- return this.hashMapAlpha[hash];
1466
+ 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 */, "\")");
1467
+ this.reset = function () {
1468
+ _this.nodes = {};
1469
+ _this.stylesheets = [];
1470
+ _this.fonts = [];
1471
+ _this.events = {};
1472
+ _this.hashMapAlpha = {};
1473
+ _this.hashMapBeta = {};
1474
+ _this.primaryHtmlNodeId = null;
1475
+ };
1476
+ this.get = function (hash) {
1477
+ if (hash in _this.hashMapBeta && _this.hashMapBeta[hash].isConnected) {
1478
+ return _this.hashMapBeta[hash];
1479
+ }
1480
+ else if (hash in _this.hashMapAlpha && _this.hashMapAlpha[hash].isConnected) {
1481
+ return _this.hashMapAlpha[hash];
1292
1482
  }
1293
1483
  return null;
1294
1484
  };
1295
- this.addToHashMap = (data, parent) => {
1485
+ this.addToHashMap = function (data, parent) {
1296
1486
  // In case of selector collision, prefer the first inserted node
1297
- this.hashMapAlpha[data.hashAlpha] = this.get(data.hashAlpha) || parent;
1298
- this.hashMapBeta[data.hashBeta] = this.get(data.hashBeta) || parent;
1487
+ _this.hashMapAlpha[data.hashAlpha] = _this.get(data.hashAlpha) || parent;
1488
+ _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
1299
1489
  };
1300
- this.resize = (el, width, height) => {
1490
+ this.resize = function (el, width, height) {
1301
1491
  if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
1302
1492
  el.style.width = width + "px" /* Layout.Constant.Pixel */;
1303
1493
  el.style.height = height + "px" /* Layout.Constant.Pixel */;
1304
1494
  el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
1305
1495
  }
1306
1496
  };
1307
- this.element = (nodeId) => {
1308
- return nodeId !== null && nodeId > 0 && nodeId in this.nodes ? this.nodes[nodeId] : null;
1497
+ this.element = function (nodeId) {
1498
+ return nodeId !== null && nodeId > 0 && nodeId in _this.nodes ? _this.nodes[nodeId] : null;
1309
1499
  };
1310
- this.animateChange = (event) => {
1311
- let animation = this.animations[event.data.id];
1500
+ this.animateChange = function (event) {
1501
+ var animation = _this.animations[event.data.id];
1312
1502
  if (!animation && event.data.operation !== 0 /* AnimationOperation.Create */) {
1313
1503
  // We didn't have a reference to this animation. This shouldn't happen, but returning here
1314
1504
  // to ensure we don't throw any errors.
@@ -1316,10 +1506,10 @@ class LayoutHelper {
1316
1506
  }
1317
1507
  switch (event.data.operation) {
1318
1508
  case 0 /* AnimationOperation.Create */:
1319
- let target = this.element(event.data.targetId);
1509
+ var target = _this.element(event.data.targetId);
1320
1510
  // only create the animation if we successfully found the target, an animation without a target will throw an error
1321
1511
  if (target) {
1322
- this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1512
+ _this.animations[event.data.id] = target.animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
1323
1513
  }
1324
1514
  break;
1325
1515
  case 3 /* AnimationOperation.Cancel */:
@@ -1339,32 +1529,39 @@ class LayoutHelper {
1339
1529
  break;
1340
1530
  }
1341
1531
  };
1342
- this.dom = (event, useproxy) => __awaiter(this, void 0, void 0, function* () {
1343
- if (event) {
1344
- // When setting up rendering for the first time, start off with hidden target window
1345
- // This ensures we do not show flickers to the end user
1346
- let doc = this.state.window.document;
1347
- if (doc && doc.documentElement) {
1348
- doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1349
- // Render all DOM events to reconstruct the page
1350
- this.markup(event, useproxy);
1351
- // Wait on all stylesheets and fonts to finish loading
1352
- yield Promise.all(this.stylesheets.concat(this.fonts));
1353
- // Toggle back the visibility of target window
1354
- doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1532
+ this.dom = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
1533
+ var doc;
1534
+ return __generator(this, function (_a) {
1535
+ switch (_a.label) {
1536
+ case 0:
1537
+ if (!event) return [3 /*break*/, 2];
1538
+ doc = this.state.window.document;
1539
+ if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
1540
+ doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1541
+ // Render all DOM events to reconstruct the page
1542
+ this.markup(event, useproxy);
1543
+ // Wait on all stylesheets and fonts to finish loading
1544
+ return [4 /*yield*/, Promise.all(this.stylesheets.concat(this.fonts))];
1545
+ case 1:
1546
+ // Wait on all stylesheets and fonts to finish loading
1547
+ _a.sent();
1548
+ // Toggle back the visibility of target window
1549
+ doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
1550
+ _a.label = 2;
1551
+ case 2: return [2 /*return*/];
1355
1552
  }
1356
- }
1357
- });
1358
- this.styleChange = (event) => {
1553
+ });
1554
+ }); };
1555
+ this.styleChange = function (event) {
1359
1556
  switch (event.event) {
1360
1557
  case 46 /* Data.Event.StyleSheetUpdate */:
1361
- let styleSheet = this.adoptedStyleSheets[event.data.id];
1558
+ var styleSheet = _this.adoptedStyleSheets[event.data.id];
1362
1559
  if (!styleSheet && event.data.operation !== 0 /* StyleSheetOperation.Create */) {
1363
1560
  return;
1364
1561
  }
1365
1562
  switch (event.data.operation) {
1366
1563
  case 0 /* StyleSheetOperation.Create */:
1367
- this.adoptedStyleSheets[event.data.id] = new this.state.window.CSSStyleSheet();
1564
+ _this.adoptedStyleSheets[event.data.id] = new _this.state.window.CSSStyleSheet();
1368
1565
  break;
1369
1566
  case 1 /* StyleSheetOperation.Replace */:
1370
1567
  styleSheet.replace(event.data.cssRules);
@@ -1375,56 +1572,61 @@ class LayoutHelper {
1375
1572
  }
1376
1573
  break;
1377
1574
  case 45 /* Data.Event.StyleSheetAdoption */:
1378
- this.setDocumentStyles(event.data.id, event.data.newIds);
1575
+ _this.setDocumentStyles(event.data.id, event.data.newIds);
1379
1576
  break;
1380
1577
  }
1381
1578
  };
1382
- this.customElement = (event) => {
1383
- if (!this.state.window.customElements.get(event.data.name)) {
1384
- this.state.window.customElements.define(event.data.name, class extends this.state.window.HTMLElement {
1385
- });
1579
+ this.customElement = function (event) {
1580
+ if (!_this.state.window.customElements.get(event.data.name)) {
1581
+ _this.state.window.customElements.define(event.data.name, /** @class */ (function (_super) {
1582
+ __extends(class_1, _super);
1583
+ function class_1() {
1584
+ return _super !== null && _super.apply(this, arguments) || this;
1585
+ }
1586
+ return class_1;
1587
+ }(_this.state.window.HTMLElement)));
1386
1588
  }
1387
1589
  };
1388
- this.exists = (hash) => {
1590
+ this.exists = function (hash) {
1389
1591
  if (hash) {
1390
- let match = this.get(hash);
1592
+ var match = _this.get(hash);
1391
1593
  if (match) {
1392
- let rectangle = match.getBoundingClientRect();
1594
+ var rectangle = match.getBoundingClientRect();
1393
1595
  return rectangle && rectangle.width > 0 && rectangle.height > 0;
1394
1596
  }
1395
1597
  }
1396
1598
  return false;
1397
1599
  };
1398
- this.markup = (event, useproxy) => {
1600
+ this.markup = function (event, useproxy) {
1399
1601
  var _a, _b, _c, _d, _e;
1400
- let data = event.data;
1401
- let type = event.event;
1402
- let doc = this.state.window.document;
1403
- let retryEvent = {
1602
+ var data = event.data;
1603
+ var type = event.event;
1604
+ var doc = _this.state.window.document;
1605
+ var retryEvent = {
1404
1606
  data: [],
1405
1607
  time: event.time,
1406
1608
  event: event.event
1407
1609
  };
1408
- for (let node of data) {
1409
- let parent = this.element(node.parent);
1410
- let pivot = this.element(node.previous);
1411
- let insert = this.insertAfter;
1412
- let tag = node.tag;
1610
+ var _loop_1 = function (node) {
1611
+ var parent_1 = _this.element(node.parent);
1612
+ var pivot = _this.element(node.previous);
1613
+ var insert = _this.insertAfter;
1614
+ var tag = node.tag;
1413
1615
  if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1414
1616
  tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1415
1617
  }
1416
- if (parent === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1618
+ if (parent_1 === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
1417
1619
  // We are referencing a parent for this node that hasn't been created yet. Push it to a list of nodes to
1418
1620
  // try once we are finished with other nodes within this event. Though we don't require HTML tags to
1419
1621
  // have a parent as they are typically the root.
1420
1622
  retryEvent.data.push(node);
1421
- continue;
1623
+ return "continue";
1422
1624
  }
1423
1625
  switch (tag) {
1424
1626
  case "*D" /* Layout.Constant.DocumentTag */:
1425
- let tagDoc = tag !== node.tag ? (parent ? parent.contentDocument : null) : doc;
1627
+ var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1426
1628
  if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1427
- this.reset();
1629
+ _this.reset();
1428
1630
  }
1429
1631
  if (typeof XMLSerializer !== "undefined" && tagDoc) {
1430
1632
  tagDoc.open();
@@ -1435,49 +1637,49 @@ class LayoutHelper {
1435
1637
  case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1436
1638
  // In case of polyfill, map shadow dom to it's parent for rendering purposes
1437
1639
  // All its children should be inserted as regular children to the parent node.
1438
- this.nodes[node.id] = parent;
1439
- this.addToHashMap(node, parent);
1640
+ _this.nodes[node.id] = parent_1;
1641
+ _this.addToHashMap(node, parent_1);
1440
1642
  break;
1441
1643
  case "*S" /* Layout.Constant.ShadowDomTag */:
1442
- if (parent) {
1443
- let shadowRoot = this.element(node.id);
1444
- shadowRoot = shadowRoot ? shadowRoot : parent.attachShadow({ mode: "open" });
1445
- this.nodes[node.id] = shadowRoot;
1446
- this.addToHashMap(node, shadowRoot);
1447
- this.addStyles(node.id);
1644
+ if (parent_1) {
1645
+ var shadowRoot = _this.element(node.id);
1646
+ shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
1647
+ _this.nodes[node.id] = shadowRoot;
1648
+ _this.addToHashMap(node, shadowRoot);
1649
+ _this.addStyles(node.id);
1448
1650
  }
1449
1651
  break;
1450
1652
  case "*T" /* Layout.Constant.TextTag */:
1451
- let textElement = this.element(node.id);
1653
+ var textElement = _this.element(node.id);
1452
1654
  textElement = textElement ? textElement : doc.createTextNode(null);
1453
1655
  textElement.nodeValue = node.value;
1454
- insert(node, parent, textElement, pivot);
1656
+ insert(node, parent_1, textElement, pivot);
1455
1657
  break;
1456
1658
  case "*M" /* Layout.Constant.SuspendMutationTag */:
1457
- let suspendedElement = this.element(node.id);
1659
+ var suspendedElement = _this.element(node.id);
1458
1660
  if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1459
1661
  suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1460
1662
  }
1461
1663
  break;
1462
1664
  case "HTML":
1463
- if (this.primaryHtmlNodeId === null) {
1464
- this.primaryHtmlNodeId = node.id;
1665
+ if (_this.primaryHtmlNodeId === null) {
1666
+ _this.primaryHtmlNodeId = node.id;
1465
1667
  }
1466
- let isIframe = tag !== node.tag;
1668
+ var isIframe = tag !== node.tag;
1467
1669
  // when we see multiple HTML nodes in the same document we should treat subsequent ones as child elements
1468
1670
  // rather than redefining our visualization base on them. It's technically illegal HTML but enough sites have
1469
1671
  // this structure that we are robust against it.
1470
- if (this.primaryHtmlNodeId !== node.id && !isIframe) {
1471
- this.insertDefaultElement(node, parent, pivot, doc, insert);
1672
+ if (_this.primaryHtmlNodeId !== node.id && !isIframe) {
1673
+ _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1472
1674
  break;
1473
1675
  }
1474
- let htmlDoc = isIframe ? (parent ? parent.contentDocument : null) : doc;
1676
+ var htmlDoc = isIframe ? (parent_1 ? parent_1.contentDocument : null) : doc;
1475
1677
  if (htmlDoc !== null) {
1476
- let docElement = this.element(node.id);
1678
+ var docElement = _this.element(node.id);
1477
1679
  if (docElement === null) {
1478
- let newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1680
+ var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1479
1681
  docElement = newDoc.documentElement;
1480
- let p = htmlDoc.importNode(docElement, true);
1682
+ var p = htmlDoc.importNode(docElement, true);
1481
1683
  htmlDoc.replaceChild(p, htmlDoc.documentElement);
1482
1684
  if (htmlDoc.head) {
1483
1685
  htmlDoc.head.parentNode.removeChild(htmlDoc.head);
@@ -1486,144 +1688,175 @@ class LayoutHelper {
1486
1688
  htmlDoc.body.parentNode.removeChild(htmlDoc.body);
1487
1689
  }
1488
1690
  }
1489
- this.setAttributes(htmlDoc.documentElement, node);
1691
+ _this.setAttributes(htmlDoc.documentElement, node);
1490
1692
  // If we are still processing discover events, keep the markup hidden until we are done
1491
- if (type === 5 /* Data.Event.Discover */ && !parent) {
1693
+ if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1492
1694
  htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1493
1695
  }
1494
- this.nodes[node.id] = htmlDoc.documentElement;
1495
- this.addToHashMap(node, htmlDoc.documentElement);
1696
+ _this.nodes[node.id] = htmlDoc.documentElement;
1697
+ _this.addToHashMap(node, htmlDoc.documentElement);
1496
1698
  }
1497
1699
  break;
1498
1700
  case "HEAD":
1499
- let headElement = this.element(node.id);
1701
+ var headElement = _this.element(node.id);
1500
1702
  if (headElement === null) {
1501
1703
  headElement = doc.createElement(node.tag);
1502
1704
  if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1503
- let base = doc.createElement("base");
1705
+ var base = doc.createElement("base");
1504
1706
  base.href = node.attributes["*B" /* Layout.Constant.Base */];
1505
1707
  headElement.appendChild(base);
1506
1708
  }
1507
1709
  // Add custom styles to assist with visualization
1508
- let custom = doc.createElement("style");
1710
+ var custom = doc.createElement("style");
1509
1711
  custom.setAttribute("clarity-custom-styles" /* Constant.CustomStyleTag */, "true");
1510
- custom.innerText = this.getCustomStyle();
1712
+ custom.innerText = _this.getCustomStyle();
1511
1713
  headElement.appendChild(custom);
1512
1714
  }
1513
- this.setAttributes(headElement, node);
1514
- insert(node, parent, headElement, pivot);
1715
+ _this.setAttributes(headElement, node);
1716
+ insert(node, parent_1, headElement, pivot);
1515
1717
  break;
1516
1718
  case "LINK":
1517
- let linkElement = this.element(node.id);
1518
- linkElement = linkElement ? linkElement : this.createElement(doc, node.tag);
1719
+ var linkElement_1 = _this.element(node.id);
1720
+ linkElement_1 = linkElement_1 ? linkElement_1 : _this.createElement(doc, node.tag);
1519
1721
  if (!node.attributes) {
1520
1722
  node.attributes = {};
1521
1723
  }
1522
- this.setAttributes(linkElement, node);
1724
+ _this.setAttributes(linkElement_1, node);
1523
1725
  if ("rel" in node.attributes) {
1524
1726
  if (node.attributes["rel"] === "stylesheet" /* Constant.StyleSheet */) {
1525
- this.stylesheets.push(new Promise((resolve) => {
1526
- const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1727
+ _this.stylesheets.push(new Promise(function (resolve) {
1728
+ var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1527
1729
  if (proxy) {
1528
- if (linkElement.integrity) {
1529
- linkElement.removeAttribute('integrity');
1730
+ if (linkElement_1.integrity) {
1731
+ linkElement_1.removeAttribute('integrity');
1530
1732
  }
1531
- linkElement.href = proxy(linkElement.href, linkElement.id, "stylesheet" /* Constant.StyleSheet */);
1733
+ linkElement_1.href = proxy(linkElement_1.href, linkElement_1.id, "stylesheet" /* Constant.StyleSheet */);
1532
1734
  }
1533
- linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
1735
+ linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1534
1736
  setTimeout(resolve, LayoutHelper.TIMEOUT);
1535
1737
  }));
1536
1738
  }
1537
1739
  else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
1538
1740
  && (((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.as) === "style" || ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.as) === "font")) {
1539
- this.fonts.push(new Promise((resolve) => {
1540
- const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1541
- linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
1542
- linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
1741
+ _this.fonts.push(new Promise(function (resolve) {
1742
+ var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1743
+ linkElement_1.href = proxy ? proxy(linkElement_1.href, linkElement_1.id, node.attributes.as) : linkElement_1.href;
1744
+ linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1543
1745
  setTimeout(resolve, LayoutHelper.TIMEOUT);
1544
1746
  }));
1545
1747
  }
1546
1748
  }
1547
- insert(node, parent, linkElement, pivot);
1749
+ insert(node, parent_1, linkElement_1, pivot);
1548
1750
  break;
1549
1751
  case "IMG" /* Layout.Constant.ImageTag */:
1550
- let imgElement = (_c = this.element(node.id)) !== null && _c !== void 0 ? _c : this.createElement(doc, node.tag);
1551
- const proxy = useproxy !== null && useproxy !== void 0 ? useproxy : this.state.options.useproxy;
1752
+ var imgElement = (_c = _this.element(node.id)) !== null && _c !== void 0 ? _c : _this.createElement(doc, node.tag);
1753
+ var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1552
1754
  if (proxy && !!((_d = node.attributes) === null || _d === void 0 ? void 0 : _d.src)) {
1553
1755
  node.attributes.src = proxy(node.attributes.src, node.attributes.id, "IMG" /* Layout.Constant.ImageTag */);
1554
1756
  }
1555
- this.setAttributes(imgElement, node);
1556
- this.resize(imgElement, node.width, node.height);
1557
- insert(node, parent, imgElement, pivot);
1757
+ _this.setAttributes(imgElement, node);
1758
+ _this.resize(imgElement, node.width, node.height);
1759
+ insert(node, parent_1, imgElement, pivot);
1558
1760
  break;
1559
1761
  case "STYLE":
1560
- let styleElement = (_e = this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
1561
- this.setAttributes(styleElement, node);
1762
+ var styleElement = (_e = _this.element(node.id)) !== null && _e !== void 0 ? _e : doc.createElement(node.tag);
1763
+ _this.setAttributes(styleElement, node);
1562
1764
  styleElement.textContent = node.value;
1563
- insert(node, parent, styleElement, pivot);
1564
- this.style(styleElement);
1765
+ insert(node, parent_1, styleElement, pivot);
1766
+ _this.style(styleElement);
1565
1767
  break;
1566
1768
  case "IFRAME":
1567
- let iframeElement = this.element(node.id);
1568
- iframeElement = iframeElement ? iframeElement : this.createElement(doc, node.tag);
1769
+ var iframeElement = _this.element(node.id);
1770
+ iframeElement = iframeElement ? iframeElement : _this.createElement(doc, node.tag);
1569
1771
  if (!node.attributes) {
1570
1772
  node.attributes = {};
1571
1773
  }
1572
- this.setAttributes(iframeElement, node);
1573
- insert(node, parent, iframeElement, pivot);
1774
+ _this.setAttributes(iframeElement, node);
1775
+ insert(node, parent_1, iframeElement, pivot);
1574
1776
  break;
1777
+ case "SCRIPT":
1778
+ {
1779
+ node.id = -1; // We want to ensure children of script tags are not processed
1780
+ node.value = null; // We don't want to set any potential script content
1781
+ _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1782
+ break;
1783
+ }
1784
+ case "DIALOG":
1785
+ {
1786
+ // Use custom module for dialog rendering
1787
+ var dialogElement = _this.element(node.id);
1788
+ dialogElement = dialogElement ? dialogElement : _this.createElement(doc, node.tag);
1789
+ if (!node.attributes) {
1790
+ node.attributes = {};
1791
+ }
1792
+ // Extract render options before cleaning attributes
1793
+ var renderOptions = getDialogRenderOptions(node.attributes, dialogElement);
1794
+ // Clean custom tracking attributes
1795
+ node.attributes = cleanDialogAttributes(node.attributes);
1796
+ // Set attributes and insert into DOM
1797
+ _this.setAttributes(dialogElement, node);
1798
+ insert(node, parent_1, dialogElement, pivot);
1799
+ // Render dialog with proper modal/non-modal handling
1800
+ renderDialog(dialogElement, renderOptions, _this.state.options.logerror);
1801
+ break;
1802
+ }
1575
1803
  default:
1576
- this.insertDefaultElement(node, parent, pivot, doc, insert);
1804
+ _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
1577
1805
  break;
1578
1806
  }
1579
1807
  // Track state for this node
1580
1808
  if (node.id) {
1581
- this.events[node.id] = node;
1809
+ _this.events[node.id] = node;
1582
1810
  }
1811
+ };
1812
+ for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
1813
+ var node = data_1[_i];
1814
+ _loop_1(node);
1583
1815
  }
1584
1816
  // only retry failed nodes if we are still making positive progress. If we have the same number of
1585
1817
  // nodes we started with, then we would just be spinning on an orphaned subtree.
1586
1818
  if (retryEvent.data.length > 0 && retryEvent.data.length !== event.data.length) {
1587
- this.markup(retryEvent, useproxy);
1819
+ _this.markup(retryEvent, useproxy);
1588
1820
  }
1589
1821
  };
1590
- this.insertDefaultElement = (node, parent, pivot, doc, insert) => {
1591
- let domElement = this.element(node.id);
1592
- domElement = domElement ? domElement : this.createElement(doc, node.tag);
1593
- this.setAttributes(domElement, node);
1594
- this.resize(domElement, node.width, node.height);
1822
+ this.insertDefaultElement = function (node, parent, pivot, doc, insert) {
1823
+ var domElement = _this.element(node.id);
1824
+ domElement = domElement ? domElement : _this.createElement(doc, node.tag);
1825
+ _this.setAttributes(domElement, node);
1826
+ _this.resize(domElement, node.width, node.height);
1595
1827
  insert(node, parent, domElement, pivot);
1596
1828
  };
1597
- this.style = (node, resolve = null) => {
1829
+ this.style = function (node, resolve) {
1830
+ if (resolve === void 0) { resolve = null; }
1598
1831
  // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
1599
1832
  try {
1600
- const sheet = node.sheet;
1601
- let cssRules = sheet ? sheet.cssRules : [];
1602
- for (let i = 0; i < cssRules.length; i++) {
1833
+ var sheet = node.sheet;
1834
+ var cssRules = sheet ? sheet.cssRules : [];
1835
+ for (var i = 0; i < cssRules.length; i++) {
1603
1836
  if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
1604
- let css = cssRules[i].cssText.replace(/:hover/g, `[${"clarity-hover" /* Constant.CustomHover */}]`);
1837
+ var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
1605
1838
  sheet.removeRule(i);
1606
1839
  sheet.insertRule(css, i);
1607
1840
  }
1608
1841
  }
1609
1842
  }
1610
1843
  catch (e) {
1611
- if (this.state.options.logerror) {
1612
- this.state.options.logerror(e);
1844
+ if (_this.state.options.logerror) {
1845
+ _this.state.options.logerror(e);
1613
1846
  }
1614
1847
  }
1615
1848
  if (resolve) {
1616
1849
  resolve();
1617
1850
  }
1618
1851
  };
1619
- this.addStyles = (id) => {
1620
- let adoptedStylesToAdd = this.stylesToApply[id];
1852
+ this.addStyles = function (id) {
1853
+ var adoptedStylesToAdd = _this.stylesToApply[id];
1621
1854
  if (adoptedStylesToAdd && adoptedStylesToAdd.length > 0) {
1622
- this.setDocumentStyles(id, this.stylesToApply[id]);
1623
- delete this.stylesToApply[id];
1855
+ _this.setDocumentStyles(id, _this.stylesToApply[id]);
1856
+ delete _this.stylesToApply[id];
1624
1857
  }
1625
1858
  };
1626
- this.createElement = (doc, tag) => {
1859
+ this.createElement = function (doc, tag) {
1627
1860
  if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
1628
1861
  return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
1629
1862
  }
@@ -1632,24 +1865,24 @@ class LayoutHelper {
1632
1865
  }
1633
1866
  catch (ex) {
1634
1867
  // We log the warning on non-standard markup but continue with the visualization
1635
- console.warn(`Exception encountered while creating element ${tag}: ${ex}`);
1868
+ console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
1636
1869
  return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
1637
1870
  }
1638
1871
  };
1639
- this.insertAfter = (data, parent, node, previous) => {
1872
+ this.insertAfter = function (data, parent, node, previous) {
1640
1873
  // Skip over no-op changes where parent and previous element is still the same
1641
1874
  // 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
1642
- if (this.events[data.id] && this.events[data.id].parent === data.parent && this.events[data.id].previous === data.previous) {
1875
+ if (_this.events[data.id] && _this.events[data.id].parent === data.parent && _this.events[data.id].previous === data.previous) {
1643
1876
  return;
1644
1877
  }
1645
1878
  // In case parent is a Shadow DOM, previous.parentElement will return null but previous.parentNode will return a valid node
1646
- let next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
1647
- next = previous === null && parent ? this.firstChild(parent) : next;
1648
- this.insertBefore(data, parent, node, next);
1879
+ var next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
1880
+ next = previous === null && parent ? _this.firstChild(parent) : next;
1881
+ _this.insertBefore(data, parent, node, next);
1649
1882
  };
1650
- this.firstChild = (node) => {
1883
+ this.firstChild = function (node) {
1651
1884
  var _a;
1652
- let child = node.firstChild;
1885
+ var child = node.firstChild;
1653
1886
  // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
1654
1887
  if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
1655
1888
  if ((_a = child.nextSibling) === null || _a === void 0 ? void 0 : _a.hasAttribute('clarity-custom-styles')) {
@@ -1661,25 +1894,25 @@ class LayoutHelper {
1661
1894
  return child;
1662
1895
  };
1663
1896
  // Mask images within a masked ancestor element in the node has a background image.
1664
- this.mask = (node) => {
1897
+ this.mask = function (node) {
1665
1898
  var _a, _b, _c;
1666
- if (node && this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
1667
- const urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
1668
- const computedStyles = window.getComputedStyle(node);
1669
- 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));
1670
- const masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, `[${"data-clarity-mask" /* LayoutConstants.MaskData */}]`);
1899
+ if (node && _this.BackgroundImageEligibleElements.includes(node.nodeName) && 'getComputedStyle' in window && 'closest' in node) {
1900
+ var urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
1901
+ var computedStyles = window.getComputedStyle(node);
1902
+ 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));
1903
+ var masked = (_c = node.closest) === null || _c === void 0 ? void 0 : _c.call(node, "[".concat("data-clarity-mask" /* LayoutConstants.MaskData */, "]"));
1671
1904
  if (hasBackgroundImage && masked) {
1672
- node.style.background = this.MaskedBackgroundImageStyle;
1905
+ node.style.background = _this.MaskedBackgroundImageStyle;
1673
1906
  }
1674
1907
  }
1675
1908
  };
1676
- this.insertBefore = (data, parent, node, next) => {
1909
+ this.insertBefore = function (data, parent, node, next) {
1677
1910
  if (parent !== null) {
1678
1911
  // Compare against both parentNode and parentElement to ensure visualization works correctly for shadow DOMs
1679
1912
  next = next && (next.parentElement !== parent && next.parentNode !== parent) ? null : next;
1680
1913
  try {
1681
1914
  parent.insertBefore(node, next);
1682
- this.mask(node);
1915
+ _this.mask(node);
1683
1916
  }
1684
1917
  catch (ex) {
1685
1918
  console.warn("Node: " + node + " | Parent: " + parent + " | Data: " + JSON.stringify(data));
@@ -1692,34 +1925,34 @@ class LayoutHelper {
1692
1925
  else if (parent === null && node.parentNode !== null) {
1693
1926
  node.parentNode.removeChild(node);
1694
1927
  }
1695
- this.nodes[data.id] = node;
1696
- this.addToHashMap(data, node);
1928
+ _this.nodes[data.id] = node;
1929
+ _this.addToHashMap(data, node);
1697
1930
  };
1698
- this.setAttributes = (node, data) => {
1699
- let attributes = data.attributes || {};
1700
- let sameorigin = false;
1931
+ this.setAttributes = function (node, data) {
1932
+ var attributes = data.attributes || {};
1933
+ var sameorigin = false;
1701
1934
  // Clarity attributes
1702
- attributes["data-clarity-id" /* Constant.Id */] = `${data.id}`;
1703
- attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = `${data.hashAlpha}`;
1704
- attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = `${data.hashBeta}`;
1705
- let tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1935
+ attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
1936
+ attributes["data-clarity-hashalpha" /* Constant.HashAlpha */] = "".concat(data.hashAlpha);
1937
+ attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
1938
+ var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
1706
1939
  // First remove all its existing attributes
1707
1940
  if (node.attributes) {
1708
- let length = node.attributes.length;
1709
- while (node.attributes && length > 0) {
1941
+ var length_1 = node.attributes.length;
1942
+ while (node.attributes && length_1 > 0) {
1710
1943
  // Do not remove "clarity-hover" attribute and let it be managed by interaction module
1711
1944
  // This helps avoid flickers during visualization
1712
1945
  if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
1713
1946
  node.removeAttribute(node.attributes[0].name);
1714
1947
  }
1715
- length--;
1948
+ length_1--;
1716
1949
  }
1717
1950
  }
1718
1951
  // Add new attributes
1719
- for (let attribute in attributes) {
1952
+ for (var attribute in attributes) {
1720
1953
  if (attributes[attribute] !== undefined) {
1721
1954
  try {
1722
- let v = attributes[attribute];
1955
+ var v = attributes[attribute];
1723
1956
  if (attribute.indexOf("xlink:") === 0) {
1724
1957
  node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
1725
1958
  }
@@ -1730,30 +1963,30 @@ class LayoutHelper {
1730
1963
  // Do nothing if we encounter internal Clarity attributes
1731
1964
  }
1732
1965
  else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
1733
- node.setAttribute(`data-clarity-${attribute}`, v);
1966
+ node.setAttribute("data-clarity-".concat(attribute), v);
1734
1967
  }
1735
1968
  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:'))))) {
1736
- if (this.vNext) {
1969
+ if (_this.vNext) {
1737
1970
  if (v.startsWith('blob:')) {
1738
1971
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
1739
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
1972
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
1740
1973
  }
1741
1974
  else {
1742
- node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
1975
+ node.setAttribute("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
1743
1976
  }
1744
1977
  }
1745
1978
  else {
1746
1979
  if (data.width >= 132 /* Setting.LargeSvg */ && data.height >= 132 /* Setting.LargeSvg */) {
1747
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"l" /* Constant.Large */}${"b" /* Constant.Beta */}`);
1980
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */));
1748
1981
  }
1749
1982
  else {
1750
- node.setAttribute("data-clarity-hide" /* Constant.Hide */, `${"s" /* Constant.Small */}${"b" /* Constant.Beta */}`);
1983
+ node.setAttribute("data-clarity-hide" /* Constant.Hide */, "".concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */));
1751
1984
  }
1752
1985
  }
1753
1986
  }
1754
1987
  else {
1755
1988
  node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
1756
- let size = "l" /* Constant.Large */;
1989
+ var size = "l" /* Constant.Large */;
1757
1990
  if (data.width) {
1758
1991
  size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
1759
1992
  }
@@ -1761,7 +1994,7 @@ class LayoutHelper {
1761
1994
  }
1762
1995
  }
1763
1996
  else {
1764
- node.setAttribute(attribute, v);
1997
+ node.setAttribute(attribute, _this.isSuspiciousAttribute(attribute, v) ? "" /* Constant.Empty */ : v);
1765
1998
  }
1766
1999
  }
1767
2000
  catch (ex) {
@@ -1771,7 +2004,7 @@ class LayoutHelper {
1771
2004
  }
1772
2005
  }
1773
2006
  if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute === "function" /* Constant.Function */) {
1774
- if (this.svgFitsText(node)) {
2007
+ if (_this.svgFitsText(node)) {
1775
2008
  node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
1776
2009
  }
1777
2010
  else {
@@ -1790,58 +2023,57 @@ class LayoutHelper {
1790
2023
  node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
1791
2024
  }
1792
2025
  };
1793
- this.getMobileCustomStyle = () => {
1794
- if (this.isMobile) {
1795
- return `*{scrollbar-width: none; scrollbar-gutter: unset;};`;
2026
+ this.getMobileCustomStyle = function () {
2027
+ if (_this.isMobile) {
2028
+ return "*{scrollbar-width: none; scrollbar-gutter: unset;};";
1796
2029
  }
1797
2030
  return '';
1798
2031
  };
1799
- this.getCustomStyle = () => {
1800
- return this.getImageHiddenCss() +
1801
- this.getIframeUnavailableCss() +
1802
- this.getBlobUnavailableCss() +
1803
- this.getBackgroundCss() +
1804
- `*[${"data-clarity-suspend" /* Constant.Suspend */}] { filter: grayscale(100%); }` +
1805
- `body { font-size: initial; }
1806
- ${this.getMobileCustomStyle()}`;
2032
+ this.getCustomStyle = function () {
2033
+ return _this.getImageHiddenCss() +
2034
+ _this.getIframeUnavailableCss() +
2035
+ _this.getBlobUnavailableCss() +
2036
+ _this.getBackgroundCss() +
2037
+ "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }") +
2038
+ "body { font-size: initial; }\n ".concat(_this.getMobileCustomStyle());
1807
2039
  };
1808
- this.svgFitsText = (inputElement) => {
2040
+ this.svgFitsText = function (inputElement) {
1809
2041
  var dimensions = inputElement.getBoundingClientRect();
1810
2042
  if (dimensions.width >= 132 /* Setting.LargeSvg */ && dimensions.height >= 132 /* Setting.LargeSvg */) {
1811
2043
  return true;
1812
2044
  }
1813
2045
  return false;
1814
2046
  };
1815
- this.getIframeUnavailableCss = () => {
1816
- if (this.vNext) {
1817
- return `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable-small" /* Constant.UnavailableSmall */}] { ${iframeUnavailableSvgSmall} }` +
1818
- `${"iframe" /* Constant.IFrameTag */}[${"data-clarity-unavailable" /* Constant.Unavailable */}] { ${iframeUnavailableSvg[this.locale]} }`;
2047
+ this.getIframeUnavailableCss = function () {
2048
+ if (_this.vNext) {
2049
+ return "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable-small" /* Constant.UnavailableSmall */, "] { ").concat(iframeUnavailableSvgSmall, " }") +
2050
+ "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { ").concat(iframeUnavailableSvg[_this.locale], " }");
1819
2051
  }
1820
2052
  else {
1821
- 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 */}'); }`;
2053
+ 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 */, "'); }");
1822
2054
  }
1823
2055
  };
1824
- this.getBlobUnavailableCss = () => {
1825
- if (this.vNext) {
1826
- return `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvgSmall} }` +
1827
- `${"img" /* Constant.ImageTag */}[${"data-clarity-blob-hide" /* Constant.BlobUnavailable */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${blobUnavailableSvg[this.locale]} }`;
2056
+ this.getBlobUnavailableCss = function () {
2057
+ if (_this.vNext) {
2058
+ return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvgSmall, " }") +
2059
+ "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-blob-hide" /* Constant.BlobUnavailable */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(blobUnavailableSvg[_this.locale], " }");
1828
2060
  }
1829
2061
  return '';
1830
2062
  };
1831
- this.getImageHiddenCss = () => {
1832
- if (this.vNext) {
1833
- return `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}${"b" /* Constant.Beta */}] { ${imageMaskedSvgSmall} }` +
1834
- `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}${"b" /* Constant.Beta */}] { ${imageMaskedSvg[this.locale]} }`;
2063
+ this.getImageHiddenCss = function () {
2064
+ if (_this.vNext) {
2065
+ return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvgSmall, " }") +
2066
+ "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */).concat("b" /* Constant.Beta */, "] { ").concat(imageMaskedSvg[_this.locale], " }");
1835
2067
  }
1836
2068
  else {
1837
- 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; }` +
1838
- `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"s" /* Constant.Small */}] { background-size: 18px 18px; }` +
1839
- `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"m" /* Constant.Medium */}] { background-size: 24px 24px; }` +
1840
- `${"img" /* Constant.ImageTag */}[${"data-clarity-hide" /* Constant.Hide */}=${"l" /* Constant.Large */}] { background-size: 36px 36px; }`;
2069
+ 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; }") +
2070
+ "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
2071
+ "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
2072
+ "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }");
1841
2073
  }
1842
2074
  };
1843
- this.getBackgroundCss = () => {
1844
- if (this.vNext) {
2075
+ this.getBackgroundCss = function () {
2076
+ if (_this.vNext) {
1845
2077
  return sharedStyle;
1846
2078
  }
1847
2079
  return '';
@@ -1851,8 +2083,8 @@ class LayoutHelper {
1851
2083
  this.vNext = vNext;
1852
2084
  this.locale = locale;
1853
2085
  }
1854
- setDocumentStyles(documentId, styleIds) {
1855
- let targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
2086
+ LayoutHelper.prototype.setDocumentStyles = function (documentId, styleIds) {
2087
+ var targetDocument = documentId === -1 ? this.state.window.document : this.element(documentId);
1856
2088
  if (!targetDocument) {
1857
2089
  if (!this.stylesToApply[documentId]) {
1858
2090
  this.stylesToApply[documentId] = [];
@@ -1860,41 +2092,65 @@ class LayoutHelper {
1860
2092
  this.stylesToApply[documentId] = styleIds;
1861
2093
  return;
1862
2094
  }
1863
- let newSheets = [];
1864
- for (var styleId of styleIds) {
1865
- let styleSheet = this.adoptedStyleSheets[styleId];
2095
+ var newSheets = [];
2096
+ for (var _i = 0, styleIds_1 = styleIds; _i < styleIds_1.length; _i++) {
2097
+ var styleId = styleIds_1[_i];
2098
+ var styleSheet = this.adoptedStyleSheets[styleId];
1866
2099
  if (styleSheet) {
1867
2100
  newSheets.push(styleSheet);
1868
2101
  }
1869
2102
  }
1870
2103
  targetDocument.adoptedStyleSheets = newSheets;
1871
- }
1872
- }
1873
- LayoutHelper.TIMEOUT = 3000;
2104
+ };
2105
+ LayoutHelper.prototype.isSuspiciousAttribute = function (name, value) {
2106
+ // Block event handlers entirely
2107
+ if (name.startsWith('on')) {
2108
+ return true;
2109
+ }
2110
+ // Check for JavaScript protocols and dangerous patterns
2111
+ var dangerous = [
2112
+ /^\s*javascript:/i,
2113
+ /^\s*data:text\/html/i,
2114
+ /^\s*vbscript:/i
2115
+ ];
2116
+ return dangerous.some(function (pattern) { return pattern.test(value); });
2117
+ };
2118
+ LayoutHelper.TIMEOUT = 3000;
2119
+ return LayoutHelper;
2120
+ }());
1874
2121
 
1875
- class Visualizer {
1876
- constructor() {
2122
+ var Visualizer = /** @class */ (function () {
2123
+ function Visualizer() {
2124
+ var _this = this;
1877
2125
  this._state = null;
1878
2126
  this.renderTime = 0;
1879
2127
  this.hashFoundTime = -1;
1880
- this.dom = (event) => __awaiter(this, void 0, void 0, function* () {
1881
- yield this.layout.dom(event);
1882
- });
1883
- this.get = (hash) => {
2128
+ this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
2129
+ return __generator(this, function (_a) {
2130
+ switch (_a.label) {
2131
+ case 0: return [4 /*yield*/, this.layout.dom(event)];
2132
+ case 1:
2133
+ _a.sent();
2134
+ return [2 /*return*/];
2135
+ }
2136
+ });
2137
+ }); };
2138
+ this.get = function (hash) {
1884
2139
  var _a;
1885
- return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
2140
+ return (_a = _this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
1886
2141
  };
1887
- this.shortCircuitRendering = (strategy, domEvent, hash) => {
2142
+ this.shortCircuitRendering = function (strategy, domEvent, hash) {
1888
2143
  switch (strategy) {
1889
2144
  case 1 /* ShortCircuitStrategy.HashFirstTimestamp */:
1890
- return this.layout.exists(hash);
2145
+ return _this.layout.exists(hash);
1891
2146
  case 2 /* ShortCircuitStrategy.HashFirstTimestampPlusBuffer */:
1892
- if (this.hashFoundTime === -1 && this.layout.exists(hash)) {
1893
- this.hashFoundTime = domEvent.time;
2147
+ if (_this.hashFoundTime === -1 && _this.layout.exists(hash)) {
2148
+ _this.hashFoundTime = domEvent.time;
1894
2149
  }
1895
- return (this.hashFoundTime > -1) && (domEvent.time > this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
2150
+ return (_this.hashFoundTime > -1) && (domEvent.time > _this.hashFoundTime + 100 /* Setting.VisualizationSettleBuffer */);
1896
2151
  case 3 /* ShortCircuitStrategy.HashBeforeDeleted */:
1897
- for (let node of domEvent.data) {
2152
+ for (var _i = 0, _a = domEvent.data; _i < _a.length; _i++) {
2153
+ var node = _a[_i];
1898
2154
  if ((node.hashAlpha === hash || node.hashBeta === hash) && node.parent === null) {
1899
2155
  return true;
1900
2156
  }
@@ -1905,81 +2161,105 @@ class Visualizer {
1905
2161
  return false;
1906
2162
  }
1907
2163
  };
1908
- this.html = (decoded, target, hash = null, useproxy, logerror, shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */) => __awaiter(this, void 0, void 0, function* () {
1909
- if (decoded && decoded.length > 0 && target) {
1910
- try {
1911
- // Flatten the payload and parse all events out of them, sorted by time
1912
- let merged = this.merge(decoded);
1913
- yield this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy });
1914
- // Render all mutations on top of the initial markup
1915
- while (merged.events.length > 0) {
1916
- let entry = merged.events.shift();
1917
- switch (entry.event) {
1918
- case 45 /* Data.Event.StyleSheetAdoption */:
1919
- case 46 /* Data.Event.StyleSheetUpdate */:
1920
- this.layout.styleChange(entry);
1921
- break;
1922
- case 51 /* Data.Event.CustomElement */:
1923
- this.layout.customElement(entry);
1924
- break;
1925
- case 6 /* Data.Event.Mutation */:
1926
- let domEvent = entry;
1927
- this.renderTime = domEvent.time;
1928
- if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
1929
- break;
1930
- }
1931
- yield this.layout.markup(domEvent, useproxy);
1932
- break;
1933
- }
1934
- }
1935
- }
1936
- catch (e) {
1937
- if (logerror) {
1938
- logerror(e);
2164
+ this.html = function (decoded, target, hash, useproxy, logerror, shortCircuitStrategy) {
2165
+ if (hash === void 0) { hash = null; }
2166
+ if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
2167
+ return __awaiter(_this, void 0, void 0, function () {
2168
+ var merged, entry, _a, domEvent, e_1;
2169
+ return __generator(this, function (_b) {
2170
+ switch (_b.label) {
2171
+ case 0:
2172
+ if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
2173
+ _b.label = 1;
2174
+ case 1:
2175
+ _b.trys.push([1, 10, , 11]);
2176
+ merged = this.merge(decoded);
2177
+ return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy })];
2178
+ case 2:
2179
+ _b.sent();
2180
+ _b.label = 3;
2181
+ case 3:
2182
+ if (!(merged.events.length > 0)) return [3 /*break*/, 9];
2183
+ entry = merged.events.shift();
2184
+ _a = entry.event;
2185
+ switch (_a) {
2186
+ case 45 /* Data.Event.StyleSheetAdoption */: return [3 /*break*/, 4];
2187
+ case 46 /* Data.Event.StyleSheetUpdate */: return [3 /*break*/, 4];
2188
+ case 51 /* Data.Event.CustomElement */: return [3 /*break*/, 5];
2189
+ case 6 /* Data.Event.Mutation */: return [3 /*break*/, 6];
2190
+ }
2191
+ return [3 /*break*/, 8];
2192
+ case 4:
2193
+ this.layout.styleChange(entry);
2194
+ return [3 /*break*/, 8];
2195
+ case 5:
2196
+ this.layout.customElement(entry);
2197
+ return [3 /*break*/, 8];
2198
+ case 6:
2199
+ domEvent = entry;
2200
+ this.renderTime = domEvent.time;
2201
+ if (this.shortCircuitRendering(shortCircuitStrategy, domEvent, hash)) {
2202
+ return [3 /*break*/, 8];
2203
+ }
2204
+ return [4 /*yield*/, this.layout.markup(domEvent, useproxy)];
2205
+ case 7:
2206
+ _b.sent();
2207
+ return [3 /*break*/, 8];
2208
+ case 8: return [3 /*break*/, 3];
2209
+ case 9: return [3 /*break*/, 11];
2210
+ case 10:
2211
+ e_1 = _b.sent();
2212
+ if (logerror) {
2213
+ logerror(e_1);
2214
+ }
2215
+ return [3 /*break*/, 11];
2216
+ case 11: return [2 /*return*/, this];
1939
2217
  }
1940
- }
1941
- }
1942
- return this;
1943
- });
1944
- this.time = () => {
1945
- return this.renderTime;
2218
+ });
2219
+ });
1946
2220
  };
1947
- this.clickmap = (activity) => {
1948
- if (this.state === null) {
1949
- throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2221
+ this.time = function () {
2222
+ return _this.renderTime;
2223
+ };
2224
+ this.clickmap = function (activity) {
2225
+ if (_this.state === null) {
2226
+ throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1950
2227
  }
1951
- this.heatmap.click(activity);
2228
+ _this.heatmap.click(activity);
1952
2229
  };
1953
- this.clearmap = () => {
1954
- if (this.state === null) {
1955
- throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2230
+ this.clearmap = function () {
2231
+ if (_this.state === null) {
2232
+ throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1956
2233
  }
1957
- this.heatmap.clear();
2234
+ _this.heatmap.clear();
1958
2235
  };
1959
- this.scrollmap = (scrollData, avgFold, addMarkers) => {
1960
- if (this.state === null) {
1961
- throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
2236
+ this.scrollmap = function (scrollData, avgFold, addMarkers) {
2237
+ if (_this.state === null) {
2238
+ throw new Error("Initialize heatmap by calling \"html\" or \"setup\" prior to making this call.");
1962
2239
  }
1963
- this.heatmap.scroll(scrollData, avgFold, addMarkers);
2240
+ _this.heatmap.scroll(scrollData, avgFold, addMarkers);
1964
2241
  };
1965
- this.merge = (decoded) => {
1966
- let merged = { timestamp: null, envelope: null, dom: null, events: [] };
2242
+ this.merge = function (decoded) {
2243
+ var merged = { timestamp: null, envelope: null, dom: null, events: [] };
1967
2244
  // Re-arrange decoded payloads in the order of their start time
1968
- decoded = decoded.sort(this.sortPayloads);
2245
+ decoded = decoded.sort(_this.sortPayloads);
1969
2246
  // Re-initialize enrich class if someone ends up calling merge function directly
1970
- this.enrich = this.enrich || new EnrichHelper();
1971
- this.enrich.reset();
2247
+ _this.enrich = _this.enrich || new EnrichHelper();
2248
+ _this.enrich.reset();
1972
2249
  // Walk through payloads and generate merged payload from an array of decoded payloads
1973
- for (let payload of decoded) {
2250
+ for (var _i = 0, decoded_1 = decoded; _i < decoded_1.length; _i++) {
2251
+ var payload = decoded_1[_i];
1974
2252
  merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
1975
2253
  merged.envelope = payload.envelope;
1976
- for (let key of Object.keys(payload)) {
1977
- let p = payload[key];
2254
+ for (var _a = 0, _b = Object.keys(payload); _a < _b.length; _a++) {
2255
+ var key = _b[_a];
2256
+ var p = payload[key];
1978
2257
  if (Array.isArray(p)) {
1979
- for (let entry of p) {
2258
+ for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
2259
+ var entry = p_1[_c];
1980
2260
  switch (key) {
1981
2261
  case "dom" /* Constant.Dom */:
1982
- let dom = this.enrich.selectors(entry);
2262
+ var dom = _this.enrich.selectors(entry);
1983
2263
  if (entry.event === 5 /* Data.Event.Discover */) {
1984
2264
  merged.dom = dom;
1985
2265
  }
@@ -1995,119 +2275,139 @@ class Visualizer {
1995
2275
  }
1996
2276
  }
1997
2277
  }
1998
- merged.events = merged.events.sort(this.sortEvents);
2278
+ merged.events = merged.events.sort(_this.sortEvents);
1999
2279
  return merged;
2000
2280
  };
2001
- this.setup = (target, options) => __awaiter(this, void 0, void 0, function* () {
2002
- this.reset();
2003
- // Infer options
2004
- options.canvas = "canvas" in options ? options.canvas : true;
2005
- options.keyframes = "keyframes" in options ? options.keyframes : false;
2006
- // Set visualization state
2007
- this._state = { window: target, options };
2008
- // Initialize helpers
2009
- this.enrich = new EnrichHelper();
2010
- this.data = new DataHelper(this.state);
2011
- this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2012
- this.heatmap = new HeatmapHelper(this.state, this.layout);
2013
- this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2014
- // If discover event was passed, render it now
2015
- if (options.dom) {
2016
- yield this.layout.dom(options.dom, options.useproxy);
2017
- }
2018
- return this;
2019
- });
2020
- this.render = (events) => __awaiter(this, void 0, void 0, function* () {
2021
- if (this.state === null) {
2022
- throw new Error(`Initialize visualization by calling "setup" prior to making this call.`);
2023
- }
2024
- let time = 0;
2025
- for (let entry of events) {
2026
- time = entry.time;
2027
- this.interaction.clearOldClickVisualizations(time);
2028
- switch (entry.event) {
2029
- case 0 /* Data.Event.Metric */:
2030
- this.data.metric(entry);
2031
- break;
2032
- case 1 /* Data.Event.Dimension */:
2033
- if (entry.data[37 /* Dimension.InteractionNextPaint */]) {
2034
- this.data.metric(entry);
2035
- }
2036
- break;
2037
- case 7 /* Data.Event.Region */:
2038
- this.data.region(entry);
2039
- break;
2040
- case 6 /* Data.Event.Mutation */:
2041
- case 43 /* Data.Event.Snapshot */:
2042
- yield this.layout.markup(entry);
2043
- break;
2044
- case 13 /* Data.Event.MouseDown */:
2045
- case 14 /* Data.Event.MouseUp */:
2046
- case 12 /* Data.Event.MouseMove */:
2047
- case 15 /* Data.Event.MouseWheel */:
2048
- case 9 /* Data.Event.Click */:
2049
- case 16 /* Data.Event.DoubleClick */:
2050
- case 17 /* Data.Event.TouchStart */:
2051
- case 20 /* Data.Event.TouchCancel */:
2052
- case 18 /* Data.Event.TouchEnd */:
2053
- case 19 /* Data.Event.TouchMove */:
2054
- this.interaction.pointer(entry);
2055
- break;
2056
- case 28 /* Data.Event.Visibility */:
2057
- this.interaction.visibility(entry);
2058
- break;
2059
- case 27 /* Data.Event.Input */:
2060
- this.interaction.input(entry);
2061
- break;
2062
- case 21 /* Data.Event.Selection */:
2063
- this.interaction.selection(entry);
2064
- break;
2065
- case 11 /* Data.Event.Resize */:
2066
- this.interaction.resize(entry);
2067
- break;
2068
- case 10 /* Data.Event.Scroll */:
2069
- this.interaction.scroll(entry);
2070
- break;
2071
- case 45 /* Data.Event.StyleSheetAdoption */:
2072
- case 46 /* Data.Event.StyleSheetUpdate */:
2073
- this.layout.styleChange(entry);
2074
- break;
2075
- case 44 /* Data.Event.Animation */:
2076
- this.layout.animateChange(entry);
2077
- break;
2078
- case 51 /* Data.Event.CustomElement */:
2079
- this.layout.customElement(entry);
2080
- break;
2281
+ this.setup = function (target, options) { return __awaiter(_this, void 0, void 0, function () {
2282
+ return __generator(this, function (_a) {
2283
+ switch (_a.label) {
2284
+ case 0:
2285
+ this.reset();
2286
+ // Infer options
2287
+ options.pointer = "pointer" in options ? options.pointer : true;
2288
+ options.canvas = "canvas" in options ? options.canvas : true;
2289
+ options.keyframes = "keyframes" in options ? options.keyframes : false;
2290
+ // Set visualization state
2291
+ this._state = { window: target, options: options };
2292
+ // Initialize helpers
2293
+ this.enrich = new EnrichHelper();
2294
+ this.data = new DataHelper(this.state);
2295
+ this.layout = new LayoutHelper(this.state, options.mobile, options.vNext, options.locale);
2296
+ this.heatmap = new HeatmapHelper(this.state, this.layout);
2297
+ this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
2298
+ if (!options.dom) return [3 /*break*/, 2];
2299
+ return [4 /*yield*/, this.layout.dom(options.dom, options.useproxy)];
2300
+ case 1:
2301
+ _a.sent();
2302
+ _a.label = 2;
2303
+ case 2: return [2 /*return*/, this];
2304
+ }
2305
+ });
2306
+ }); };
2307
+ this.render = function (events) {
2308
+ var _a, _b;
2309
+ if (_this.state === null) {
2310
+ throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
2311
+ }
2312
+ var time = 0;
2313
+ for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
2314
+ var entry = events_1[_i];
2315
+ try {
2316
+ time = entry.time;
2317
+ _this.interaction.clearOldClickVisualizations(time);
2318
+ switch (entry.event) {
2319
+ case 0 /* Data.Event.Metric */:
2320
+ _this.data.metric(entry);
2321
+ break;
2322
+ case 1 /* Data.Event.Dimension */:
2323
+ if (entry.data[37 /* Dimension.InteractionNextPaint */]) {
2324
+ _this.data.metric(entry);
2325
+ }
2326
+ break;
2327
+ case 7 /* Data.Event.Region */:
2328
+ _this.data.region(entry);
2329
+ break;
2330
+ case 6 /* Data.Event.Mutation */:
2331
+ case 43 /* Data.Event.Snapshot */:
2332
+ _this.layout.markup(entry);
2333
+ break;
2334
+ case 13 /* Data.Event.MouseDown */:
2335
+ case 14 /* Data.Event.MouseUp */:
2336
+ case 12 /* Data.Event.MouseMove */:
2337
+ case 15 /* Data.Event.MouseWheel */:
2338
+ case 9 /* Data.Event.Click */:
2339
+ case 16 /* Data.Event.DoubleClick */:
2340
+ case 17 /* Data.Event.TouchStart */:
2341
+ case 20 /* Data.Event.TouchCancel */:
2342
+ case 18 /* Data.Event.TouchEnd */:
2343
+ case 19 /* Data.Event.TouchMove */:
2344
+ _this.interaction.pointer(entry);
2345
+ break;
2346
+ case 28 /* Data.Event.Visibility */:
2347
+ _this.interaction.visibility(entry);
2348
+ break;
2349
+ case 27 /* Data.Event.Input */:
2350
+ _this.interaction.input(entry);
2351
+ break;
2352
+ case 21 /* Data.Event.Selection */:
2353
+ _this.interaction.selection(entry);
2354
+ break;
2355
+ case 11 /* Data.Event.Resize */:
2356
+ _this.interaction.resize(entry);
2357
+ break;
2358
+ case 10 /* Data.Event.Scroll */:
2359
+ _this.interaction.scroll(entry);
2360
+ break;
2361
+ case 45 /* Data.Event.StyleSheetAdoption */:
2362
+ case 46 /* Data.Event.StyleSheetUpdate */:
2363
+ _this.layout.styleChange(entry);
2364
+ break;
2365
+ case 44 /* Data.Event.Animation */:
2366
+ _this.layout.animateChange(entry);
2367
+ break;
2368
+ case 51 /* Data.Event.CustomElement */:
2369
+ _this.layout.customElement(entry);
2370
+ break;
2371
+ }
2372
+ }
2373
+ catch (e) {
2374
+ (_b = (_a = _this._state.options).logerror) === null || _b === void 0 ? void 0 : _b.call(_a, e);
2081
2375
  }
2082
2376
  }
2083
2377
  if (events.length > 0) {
2084
2378
  // Update pointer trail at the end of every frame
2085
- this.interaction.trail(time);
2379
+ _this.interaction.trail(time);
2086
2380
  }
2087
- });
2088
- this.reset = () => {
2381
+ };
2382
+ this.reset = function () {
2089
2383
  var _a, _b, _c, _d, _e;
2090
- (_a = this.data) === null || _a === void 0 ? void 0 : _a.reset();
2091
- (_b = this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2092
- (_c = this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2093
- (_d = this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2094
- (_e = this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2095
- this._state = null;
2096
- this.renderTime = 0;
2097
- };
2098
- this.sortEvents = (a, b) => {
2384
+ (_a = _this.data) === null || _a === void 0 ? void 0 : _a.reset();
2385
+ (_b = _this.interaction) === null || _b === void 0 ? void 0 : _b.reset();
2386
+ (_c = _this.layout) === null || _c === void 0 ? void 0 : _c.reset();
2387
+ (_d = _this.heatmap) === null || _d === void 0 ? void 0 : _d.reset();
2388
+ (_e = _this.enrich) === null || _e === void 0 ? void 0 : _e.reset();
2389
+ _this._state = null;
2390
+ _this.renderTime = 0;
2391
+ };
2392
+ this.sortEvents = function (a, b) {
2099
2393
  return a.time - b.time;
2100
2394
  };
2101
- this.sortPayloads = (a, b) => {
2395
+ this.sortPayloads = function (a, b) {
2102
2396
  return a.envelope.sequence - b.envelope.sequence;
2103
2397
  };
2104
2398
  }
2105
- get state() {
2106
- return this._state;
2107
- }
2108
- }
2399
+ Object.defineProperty(Visualizer.prototype, "state", {
2400
+ get: function () {
2401
+ return this._state;
2402
+ },
2403
+ enumerable: false,
2404
+ configurable: true
2405
+ });
2406
+ return Visualizer;
2407
+ }());
2109
2408
 
2110
- const { state, dom, get, html, time, clickmap, clearmap, scrollmap, merge, setup, render } = new Visualizer();
2409
+ var _a;
2410
+ 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;
2111
2411
 
2112
2412
  var clarity = /*#__PURE__*/Object.freeze({
2113
2413
  __proto__: null,