@gemx-dev/clarity-visualize 0.8.46 → 0.8.48

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