https://sliders.ai/_content/Radzen.Blazor/Radzen.Blazor.js

1if (!Element.prototype.matches) {
2  Element.prototype.matches =
3    Element.prototype.msMatchesSelector ||
4    Element.prototype.webkitMatchesSelector;
5}
6
7if (!Element.prototype.closest) {
8  Element.prototype.closest = function (s) {
9    var el = this;
10
11    do {
12      if (el.matches(s)) return el;
13      el = el.parentElement || el.parentNode;
14    } while (el !== null && el.nodeType === 1);
15    return null;
16  };
17}
18
19if (document.fonts && document.body) {
20  document.body.classList.add('rz-icons-loading');
21  document.fonts.load('16px Material Symbols').then(() => {
22      document.body.classList.remove('rz-icons-loading');
23  })
24}
25
26var resolveCallbacks = [];
27var rejectCallbacks = [];
28var radzenRecognition;
29
30window.Radzen = {
31    isRTL: function (el) {
32        return el && getComputedStyle(el).direction == 'rtl';
33    },
34    throttle: function (callback, delay) {
35        var timeout = null;
36        return function () {
37            var args = arguments;
38            var ctx = this;
39            if (!timeout) {
40                timeout = setTimeout(function () {
41                    callback.apply(ctx, args);
42                    timeout = null;
43                }, delay);
44            }
45        };
46    },
47    mask: function (id, mask, pattern, characterPattern) {
48      var el = document.getElementById(id);
49      if (el) {
50          var format = function (value, mask, pattern, characterPattern) {
51              var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g"));
52              var count = 0;
53
54              var formatted = '';
55              for (var i = 0; i < mask.length; i++) {
56                  const c = mask[i];
57                  if (chars && chars[count]) {
58                      if (c === '*' || c == chars[count]) {
59                          formatted += chars[count];
60                          count++;
61                      } else {
62                          formatted += c;
63                      }
64                  }
65              }
66              return formatted;
67          }
68
69          if (window.safari !== undefined) {
70              el.onblur = function (e) {
71                  el.dispatchEvent(new Event('change'));
72              };
73          }
74
75          var start = el.selectionStart != el.value.length ? el.selectionStart : -1;
76          var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1;
77
78          el.value = format(el.value, mask, pattern, characterPattern);
79
80          el.selectionStart = start != -1 ? start : el.selectionStart;
81          el.selectionEnd = end != -1 ? end : el.selectionEnd;
82      }
83  },
84  addContextMenu: function (id, ref) {
85     var el = document.getElementById(id);
86     if (el) {
87        var handler = function (e) {
88            e.stopPropagation();
89            e.preventDefault();
90            ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu',
91                {
92                    ClientX: e.clientX,
93                    ClientY: e.clientY,
94                    ScreenX: e.screenX,
95                    ScreenY: e.screenY,
96                    AltKey: e.altKey,
97                    ShiftKey: e.shiftKey,
98                    CtrlKey: e.ctrlKey,
99                    MetaKey: e.metaKey,
100                    Button: e.button,
101                    Buttons: e.buttons,
102                });
103            return false;
104        };
105        Radzen[id + 'contextmenu'] = handler;
106        el.addEventListener('contextmenu', handler, false);
107     }
108  },
109  addMouseEnter: function (id, ref) {
110     var el = document.getElementById(id);
111     if (el) {
112        var handler = function (e) {
113            ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter');
114        };
115        Radzen[id + 'mouseenter'] = handler;
116        el.addEventListener('mouseenter', handler, false);
117     }
118  },
119  addMouseLeave: function (id, ref) {
120     var el = document.getElementById(id);
121     if (el) {
122        var handler = function (e) {
123            ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');;
124        };
125        Radzen[id + 'mouseleave'] = handler;
126        el.addEventListener('mouseleave', handler, false);
127     }
128  },
129  removeContextMenu: function (id) {
130      var el = document.getElementById(id);
131      if (el && Radzen[id + 'contextmenu']) {
132          el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']);
133      }
134  },
135  removeMouseEnter: function (id) {
136      var el = document.getElementById(id);
137      if (el && Radzen[id + 'mouseenter']) {
138          el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']);
139      }
140  },
141  removeMouseLeave: function (id) {
142      var el = document.getElementById(id);
143      if (el && Radzen[id + 'mouseleave']) {
144          el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']);
145      }
146  },
147  adjustDataGridHeader: function (scrollableHeader, scrollableBody) {
148    if (scrollableHeader && scrollableBody) {
149      scrollableHeader.style.cssText =
150        scrollableBody.clientHeight < scrollableBody.scrollHeight
151          ? 'margin-left:0px;padding-right: ' +
152            (scrollableBody.offsetWidth - scrollableBody.clientWidth) +
153            'px'
154          : 'margin-left:0px;';
155    }
156  },
157  preventDefaultAndStopPropagation: function (e) {
158    e.preventDefault();
159    e.stopPropagation();
160  },
161  preventArrows: function (el) {
162    var preventDefault = function (e) {
163      if (e.keyCode === 38 || e.keyCode === 40) {
164        e.preventDefault();
165        return false;
166      }
167    };
168    if (el) {
169       el.addEventListener('keydown', preventDefault, false);
170    }
171  },
172  selectTab: function (id, index) {
173    var el = document.getElementById(id);
174    if (el && el.parentNode && el.parentNode.previousElementSibling) {
175        var count = el.parentNode.children.length;
176        for (var i = 0; i < count; i++) {
177            var content = el.parentNode.children[i];
178            if (content) {
179                content.style.display = i == index ? '' : 'none';
180            }
181            var header = el.parentNode.previousElementSibling.children[i];
182            if (header) {
183                if (i == index) {
184                    header.classList.add('rz-tabview-selected');
185                    header.classList.add('rz-state-focused');
186                }
187                else {
188                    header.classList.remove('rz-tabview-selected');
189                    header.classList.remove('rz-state-focused');
190                }
191            }
192        }
193    }
194  },
195  loadGoogleMaps: function (defaultView, apiKey, resolve, reject, language) {
196    resolveCallbacks.push(resolve);
197    rejectCallbacks.push(reject);
198
199    if (defaultView['rz_map_init']) {
200      return;
201    }
202
203    defaultView['rz_map_init'] = function () {
204      for (var i = 0;

204 i < resolveCallbacks.length; i++) {
205        resolveCallbacks[i](defaultView.google);
206      }
207    };
208
209    var document = defaultView.document;
210    var script = document.createElement('script');
211
212    script.src =
213      'https://maps.googleapis.com/maps/api/js?' +
214      (language ? 'language=' + language + '&' : '') +
215      (apiKey ? 'key=' + apiKey + '&' : '') +
216      'callback=rz_map_init&libraries=marker';
217
218    script.async = true;
219    script.defer = true;
220    script.onerror = function (err) {
221      for (var i = 0; i < rejectCallbacks.length; i++) {
222        rejectCallbacks[i](err);
223      }
224    };
225
226    document.body.appendChild(script);
227  },
228  createMap: function (wrapper, ref, id, apiKey, mapId, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) {
229    var api = function () {
230      var defaultView = document.defaultView;
231
232      return new Promise(function (resolve, reject) {
233        if (defaultView.google && defaultView.google.maps) {
234          return resolve(defaultView.google);
235        }
236
237        Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language);
238      });
239    };
240
241    api().then(function (google) {
242      Radzen[id] = ref;
243      Radzen[id].google = google;
244
245      Radzen[id].instance = new google.maps.Map(wrapper, {
246        center: center,
247        zoom: zoom,
248        mapId: mapId
249      });
250
251      Radzen[id].instance.addListener('click', function (e) {
252        Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMapClick', {
253          Position: {Lat: e.latLng.lat(), Lng: e.latLng.lng()}
254        });
255      });
256
257      Radzen.updateMap(id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language);
258    });
259  },
260  updateMap: function (id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) {
261    var api = function () {
262        var defaultView = document.defaultView;
263
264        return new Promise(function (resolve, reject) {
265            if (defaultView.google && defaultView.google.maps) {
266                return resolve(defaultView.google);
267            }
268
269            Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language);
270        });
271    };
272    api().then(function (google) {
273        let markerBounds = new google.maps.LatLngBounds();
274
275        if (Radzen[id] && Radzen[id].instance) {
276            if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) {
277                for (var i = 0; i < Radzen[id].instance.markers.length; i++) {
278                    Radzen[id].instance.markers[i].setMap(null);
279                }
280            }
281
282            if (markers) {
283                Radzen[id].instance.markers = [];
284
285                markers.forEach(function (m) {
286                    var content;
287
288                    if (m.label) {
289                        content = document.createElement('span');
290                        content.innerHTML = m.label;
291                    }
292
293                    var marker = new this.google.maps.marker.AdvancedMarkerElement({
294                        position: m.position,
295                        title: m.title,
296                        content: content
297                    });
298
299                    marker.addListener('click', function (e) {
300                        Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', {
301                            Title: marker.title,
302                            Label: marker.content.innerText,
303                            Position: marker.position
304                        });
305                    });
306
307                    marker.setMap(Radzen[id].instance);
308
309                    Radzen[id].instance.markers.push(marker);
310
311                        markerBounds.extend(marker.position);
312                });
313            }
314
315            if (zoom) {
316                Radzen[id].instance.setZoom(zoom);
317                }
318
319            if (center) {
320                Radzen[id].instance.setCenter(center);
321            }
322
323            if (options) {
324                Radzen[id].instance.setOptions(options);
325            }
326
327            if (markers && fitBoundsToMarkersOnUpdate) {
328                Radzen[id].instance.fitBounds(markerBounds);
329            }
330        }
331    });

332  },
333  destroyMap: function (id) {
334    if (Radzen[id].instance) {
335      delete Radzen[id].instance;
336    }
337  },
338 focusSecurityCode: function (el) {
339    if (!el) return;
340    var firstInput = el.querySelector('.rz-security-code-input');
341    if (firstInput) {
342        setTimeout(function () { firstInput.focus() }, 500);
343    }
344 },
345  destroySecurityCode: function (id, el) {
346    if (!Radzen[id]) return;
347
348    var inputs = el.getElementsByTagName('input');
349
350    if (Radzen[id].keyPress && Radzen[id].paste) {
351        for (var i = 0; i < inputs.length; i++) {
352            inputs[i].removeEventListener('keypress', Radzen[id].keyPress);
353            inputs[i].removeEventListener('keydown', Radzen[id].keyDown);
354            inputs[i].removeEventListener('paste', Radzen[id].paste);
355        }
356        delete Radzen[id].keyPress;
357        delete Radzen[id].paste;
358    }
359
360    Radzen[id] = null;
361  },
362  createSecurityCode: function (id, ref, el, isNumber) {
363      if (!el || !ref) return;
364
365      var hidden = el.querySelector('input[type="hidden"]');
366
367      Radzen[id] = {};
368
369      Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')];
370
371      Radzen[id].paste = function (e) {
372          if (e.clipboardData) {
373              var value = e.clipboardData.getData('text');
374
375              if (value) {
376                  for (var i = 0; i < value.length; i++) {
377                      if (isNumber && isNaN(+value[i])) {
378                          continue;
379                      }
380                      Radzen[id].inputs[i].value = value[i];
381                  }
382
383                  var code = Radzen[id].inputs.map(i => i.value).join('').trim();
384                  hidden.value = code;
385
386                  ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code);
387
388                  Radzen[id].inputs[Radzen[id].inputs.length - 1].focus();
389              }
390
391              e.preventDefault();
392          }
393      }
394      Radzen[id].keyPress = function (e) {
395          var keyCode = e.data ? e.data.charCodeAt(0) : e.which;
396          var ch = e.data || String.fromCharCode(e.which);
397
398          if (e.metaKey ||
399              e.ctrlKey ||
400              keyCode == 9 ||
401              keyCode == 8 ||
402              keyCode == 13
403          ) {
404              return;
405          }
406
407          if (isNumber && (keyCode < 48 || keyCode > 57)) {
408              e.preventDefault();
409              return;
410          }
411
412          if (e.currentTarget.value == ch) {
413              return;
414          }
415
416          e.currentTarget.value = ch;
417
418          var value = Radzen[id].inputs.map(i => i.value).join('').trim();
419          hidden.value = value;
420
421          ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value);
422
423          var index = Radzen[id].inputs.indexOf(e.currentTarget);
424          if (index < Radzen[id].inputs.length - 1) {
425              Radzen[id].inputs[index + 1].focus();
426          }
427      }
428
429      Radzen[id].keyDown = function (e) {
430          var keyCode = e.data ? e.data.charCodeAt(0) : e.which;
431          if (keyCode == 8) {
432              e.currentTarget.value = '';
433
434              var value = Radzen[id].inputs.map(i => i.value).join('').trim();
435              hidden.value = value;
436
437              ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value);
438
439              var index = Radzen[id].inputs.indexOf(e.currentTarget);
440              if (index > 0) {
441                  Radzen[id].inputs[index - 1].focus();
442              }
443          }
444      }
445
446      for (var i = 0; i < Radzen[id].inputs.length; i++) {
447          Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress);
448          Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown);
449          Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste);
450      }
451  },
452  createSlider: function (
453    id,
454    slider,
455    parent,
456    range,
457    minHandle,
458    maxHandle,
459    min,
460    max,
461    value,
462    step,
463    isVertical
464  ) {
465    Radzen[id] = {};
466    Radzen[id].mouseMoveHandler = function (e) {
467      e.preventDefault();
468
469      var handle = slider.isMin ? minHandle : maxHandle;
470
471      if (!slider.canChange) return;
472
473      var offsetX =
474        e.targetTouches && e.targetTouches[0]
475          ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
476                : e.pageX - handle.getBoundingClientRect().left;
477
478      var offsetY =
479        e.targetTouches && e.targetTouches[0]
480          ? e.targetTouches[0].pageY - e.target.getBoundingClientRect().top
481              : e.pageY - handle.getBoundingClientRect().top;
482
483      var percent = isVertical ? (parent.offsetHeight - handle.offsetTop - offsetY) / parent.offsetHeight
484        : (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX : handle.offsetLeft + offsetX) / parent.offsetWidth;
485
486      if (percent > 1) {
487        percent = 1;
488      } else if (percent < 0) {
489        percent = 0;
490      }
491
492     var newValue = percent * (max - min) + min;
493
494      if (
495        slider.canChange &&
496        newValue >= min &&
497        newValue <= max
498      ) {
499        slider.invokeMethodAsync(
500          'RadzenSlider.OnValueChange',
501          newValue,
502          !!slider.isMin
503        );
504      }
505    };
506
507    Radzen[id].mouseDownHandler = function (e) {
508      if (parent.classList.contains('rz-state-disabled')) return;
509
510      document.addEventListener('mousemove', Radzen[id].mouseMoveHandler);
511      document.addEventListener('touchmove', Radzen[id].mouseMoveHandler, {
512        passive: false, capture: true
513      });
514
515      document.addEventListener('mouseup', Radzen[id].mouseUpHandler);
516      document.addEventListener('touchend', Radzen[id].mouseUpHandler, {
517        passive: true
518      });
519
520      if (minHandle == e.target || maxHandle == e.target) {
521        slider.canChange = true;
522        slider.isMin = minHandle == e.target;
523      } else {
524
525        var offsetX =
526          e.targetTouches && e.targetTouches[0]
527            ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
528                  : e.offsetX;
529
530        var percent = offsetX / parent.offsetWidth;
531
532        var newValue = percent * (max - min) + min;
533        var oldValue = range ? value[slider.isMin ? 0 : 1] : value;
534        if (newValue >= min && newValue <= max && newValue != oldValue) {
535          slider.invokeMethodAsync(
536            'RadzenSlider.OnValueChange',
537            newValue,
538            !!slider.isMin
539          );
540        }
541      }
542    };
543
544    Radzen[id].mouseUpHandler = function (e) {
545      slider.canChange = false;
546      document.removeEventListener('mousemove', Radzen[id].mouseMoveHandler);
547      document.removeEventListener('touchmove', Radzen[id].mouseMoveHandler, {
548        passive: false, capture: true
549      });
550      document.removeEventListener('mouseup', Radzen[id].mouseUpHandler);
551      document.removeEventListener('touchend', Radzen[id].mouseUpHandler, {
552        passive: true
553      });
554    };
555
556    parent.addEventListener('mousedown', Radzen[id].mouseDownHandler);
557    parent.addEventListener('touchstart', Radzen[id].mouseDownHandler, {
558      passive: true
559    });

560  },
561  destroySlider: function (id, parent) {
562    if (!Radzen[id]) return;
563
564    if (Radzen[id].mouseMoveHandler) {
565      document.removeEventListener('mousemove', Radzen[id].mouseMoveHandler);
566      document.removeEventListener('touchmove', Radzen[id].mouseMoveHandler);
567      delete Radzen[id].mouseMoveHandler;
568    }
569    if (Radzen[id].mouseUpHandler) {
570      document.removeEventListener('mouseup', Radzen[id].mouseUpHandler);
571      document.removeEventListener('touchend', Radzen[id].mouseUpHandler);
572      delete Radzen[id].mouseUpHandler;
573    }
574    if (Radzen[id].mouseDownHandler) {
575      parent.removeEventListener('mousedown', Radzen[id].mouseDownHandler);
576      parent.removeEventListener('touchstart', Radzen[id].mouseDownHandler);
577      delete Radzen[id].mouseDownHandler;
578    }
579
580    Radzen[id] = null;
581  },
582  prepareDrag: function (el) {
583    if (el) {
584        el.ondragover = function (e) { e.preventDefault(); };
585        el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); };
586    }
587  },
588  focusElement: function (elementId) {
589    var el = document.getElementById(elementId);
590    if (el) {
591      el.focus();
592    }
593  },
594  scrollCarouselItem: function (el) {
595    el.parentElement.scroll(el.offsetLeft, 0);
596  },
597  scrollIntoViewIfNeeded: function (ref, selector) {
598    var el = selector ? ref.getElementsByClassName(selector)[0] : ref;
599    if (el && el.scrollIntoViewIfNeeded) {
600        el.scrollIntoViewIfNeeded();
601    } else if (el && el.scrollIntoView) {
602        el.scrollIntoView();
603    }
604  },
605  selectListItem: function (input, ul, index) {
606    if (!input || !ul) return;
607
608    var childNodes = ul.getElementsByTagName('LI');
609
610    var highlighted = ul.querySelectorAll('.rz-state-highlight');
611    if (highlighted.length) {
612      for (var i = 0; i < highlighted.length; i++) {
613        highlighted[i].classList.remove('rz-state-highlight');
614      }
615    }
616
617    ul.nextSelectedIndex = index;
618
619    if (
620      ul.nextSelectedIndex >= 0 &&
621      ul.nextSelectedIndex <= childNodes.length - 1
622    ) {
623      childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight');
624      childNodes[ul.nextSelectedIndex].scrollIntoView({block:'nearest'});
625    }
626  },
627  focusListItem: function (input, ul, isDown, startIndex) {
628    if (!input || !ul) return;
629    var childNodes = ul.getElementsByTagName('LI');
630
631    if (!childNodes || childNodes.length == 0) return;
632
633    if (startIndex == undefined || startIndex == null) {
634      startIndex = -1;
635    }
636
637    ul.nextSelectedIndex = startIndex;
638    if (isDown) {
639        while (ul.nextSelectedIndex < childNodes.length - 1) {
640            ul.nextSelectedIndex++;
641            if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled'))
642                break;
643        }
644    } else {
645        while (ul.nextSelectedIndex >= 0) {
646            ul.nextSelectedIndex--;
647            if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled'))
648                break;
649        }
650    }
651
652    var highlighted = ul.querySelectorAll('.rz-state-highlight');
653    if (highlighted.length) {
654      for (var i = 0; i < highlighted.length; i++) {
655        highlighted[i].classList.remove('rz-state-highlight');
656      }
657    }
658
659    if (
660      ul.nextSelectedIndex >= 0 &&
661      ul.nextSelectedIndex <= childNodes.length - 1
662    ) {
663      childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight');
664      Radzen.scrollIntoViewIfNeeded(childNodes[ul.nextSelectedIndex]);
665    }
666
667    return ul.nextSelectedIndex;
668  },
669  clearFocusedHeaderCell: function (gridId) {
670    var grid = document.getElementById(gridId);
671    if (!grid) return;
672
673    var table = grid.querySelector('.rz-grid-table');
674    var thead = table.getElementsByTagName("thead")[0];
675    var highlightedCells = thead.querySelectorAll('.rz-state-focused');
676    if (highlightedCells.length) {
677        for (var i = 0; i < highlightedCells.length; i++) {
678            highlightedCells[i].classList.remove('rz-state-focused');
679        }
680    }
681  },
682  focusTableRow: function (gridId, key, rowIndex, cellIndex, isVirtual) {
683    var grid = document.getElementById(gridId);
684    if (!grid) return;
685
686    var table = grid.querySelector('.rz-grid-table');
687    var tbody = table.tBodies[0];
688    var thead = table.tHead;

689
690    var rows = (cellIndex != null && thead && thead.rows && thead.rows.length ? [...thead.rows] : []).concat(tbody && tbody.rows && tbody.rows.length ? [...tbody.rows] : []);
691
692    if (isVirtual && (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown' || key == 'Home' || key == 'End')) {
693        if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) {
694            var highlightedCells = thead.querySelectorAll('.rz-state-focused');
695            if (highlightedCells.length) {
696                for (var i = 0; i < highlightedCells.length; i++) {
697                    highlightedCells[i].classList.remove('rz-state-focused');
698                }
699            }
700        }
701        if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') {
702            var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40;
703            var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1;
704            table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight));
705        }
706        else {
707            table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight;
708        }
709    }
710
711    table.nextSelectedIndex = rowIndex || 0;
712    table.nextSelectedCellIndex = cellIndex || 0;
713
714    if (key == 'ArrowDown') {
715        while (table.nextSelectedIndex < rows.length - 1) {
716            table.nextSelectedIndex++;
717            if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled'))
718                break;
719        }
720    } else if (key == 'ArrowUp') {
721        while (table.nextSelectedIndex > 0) {
722            table.nextSelectedIndex--;
723            if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled'))
724                break;
725        }
726    } else if (key == 'ArrowRight') {
727        while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) {
728            table.nextSelectedCellIndex++;
729            if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled'))
730                break;
731        }
732    } else if (key == 'ArrowLeft') {
733        while (table.nextSelectedCellIndex > 0) {
734            table.nextSelectedCellIndex--;
735            if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled'))
736                break;
737        }
738    } else if (isVirtual && (key == 'PageDown' || key == 'End')) {
739        table.nextSelectedIndex = rows.length - 1;
740    } else if (isVirtual && (key == 'PageUp' || key == 'Home')) {
741        table.nextSelectedIndex = 1;
742    }
743
744    if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && cellIndex != null && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) {
745        var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused');
746        if (highlightedCells.length) {
747            for (var i = 0; i < highlightedCells.length; i++) {
748                highlightedCells[i].classList.remove('rz-state-focused');
749            }
750        }
751
752        if (
753            table.nextSelectedCellIndex >= 0 &&
754            table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1
755        ) {
756            var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex];
757
758            if (!cell.classList.contains('rz-state-focused')) {
759                cell.classList.add('rz-state-focused');
760                if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) {
761                    Radzen.scrollIntoViewIfNeeded(cell);
762                }
763            }
764        }
765    } else if (key == 'ArrowDown' || key == 'ArrowUp') {
766        var highlighted = table.querySelectorAll('.rz-state-focused');
767        if (highlighted.length) {
768            for (var i = 0; i < highlighted.length; i++) {
769                highlighted[i].classList.remove('rz-state-focused');
770            }
771        }
772
773        if (table.nextSelectedIndex >= 0 &&
774            table.nextSelectedIndex <= rows.length - 1
775        ) {
776            var row = rows[table.nextSelectedIndex];
777
778            if (!row.classList.contains('rz-state-focused')) {
779                row.classList.add('rz-state-focused');
780                if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) {
781                    Radzen.scrollIntoViewIfNeeded(row);

782                }
783            }
784        }
785    }
786
787    return [table.nextSelectedIndex, table.nextSelectedCellIndex];
788  },
789  uploadInputChange: function (e, url, auto, multiple, clear, parameterName) {
790      if (auto) {
791          Radzen.upload(e.target, url, multiple, clear, parameterName);
792          e.target.value = '';
793      } else {
794          Radzen.uploadChange(e.target);
795      }
796  },
797  uploads: function (uploadComponent, id) {
798    if (!Radzen.uploadComponents) {
799      Radzen.uploadComponents = {};
800    }
801    Radzen.uploadComponents[id] = uploadComponent;
802  },
803  uploadChange: function (fileInput) {
804    var files = [];
805    for (var i = 0; i < fileInput.files.length; i++) {
806      var file = fileInput.files[i];
807      files.push({
808        Name: file.name,
809        Size: file.size,
810        Url: URL.createObjectURL(file)
811      });
812    }
813
814    var uploadComponent =
815      Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
816    if (uploadComponent) {
817      if (uploadComponent.localFiles) {
818        // Clear any previously created preview URL(s)
819        for (var i = 0; i < uploadComponent.localFiles.length; i++) {
820          var file = uploadComponent.localFiles[i];
821          if (file.Url) {
822            URL.revokeObjectURL(file.Url);
823          }
824        }
825      }
826
827      uploadComponent.files = Array.from(fileInput.files);
828      uploadComponent.localFiles = files;
829      uploadComponent.invokeMethodAsync('RadzenUpload.OnChange', files);
830    }
831
832    for (var i = 0; i < fileInput.files.length; i++) {
833      var file = fileInput.files[i];
834      if (file.Url) {
835        URL.revokeObjectURL(file.Url);
836      }
837    }
838  },
839  removeFileFromUpload: function (fileInput, name) {
840    var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
841    if (!uploadComponent) return;
842    var file = uploadComponent.files.find(function (f) { return f.name == name; })
843    if (!file) { return; }
844    var localFile = uploadComponent.localFiles.find(function (f) { return f.Name == name; });
845    if (localFile) {
846      URL.revokeObjectURL(localFile.Url);
847    }
848    var index = uploadComponent.files.indexOf(file)
849    if (index != -1) {
850        uploadComponent.files.splice(index, 1);
851    }
852    fileInput.value = '';
853  },
854  removeFileFromFileInput: function (fileInput) {
855    fileInput.value = '';
856  },
857  upload: function (fileInput, url, multiple, clear, parameterName) {
858    var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
859    if (!uploadComponent) { return; }
860    if (!uploadComponent.files || clear) {
861        uploadComponent.files = Array.from(fileInput.files);
862    }
863    var data = new FormData();
864    var files = [];
865    var cancelled = false;
866    for (var i = 0; i < uploadComponent.files.length; i++) {
867      var file = uploadComponent.files[i];
868      data.append(parameterName || (multiple ? 'files' : 'file'), file, file.name);
869      files.push({Name: file.name, Size: file.size});
870    }
871    var xhr = new XMLHttpRequest();
872    xhr.withCredentials = true;
873    xhr.upload.onprogress = function (e) {
874      if (e.lengthComputable) {
875        var uploadComponent =
876          Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
877        if (uploadComponent) {
878          var progress = parseInt((e.loaded / e.total) * 100);
879          uploadComponent.invokeMethodAsync(
880            'RadzenUpload.OnProgress',
881            progress,
882            e.loaded,
883            e.total,
884            files,
885            cancelled
886          ).then(function (cancel) {
887              if (cancel) {
888                  cancelled = true;
889                  xhr.abort();
890              }
891          });
892        }
893      }
894    };
895    xhr.onreadystatechange = function (e) {
896      if (xhr.readyState === XMLHttpRequest.DONE) {
897        var status = xhr.status;
898        var uploadComponent =
899          Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
900        if (uploadComponent) {
901          if (status === 0 || (status >= 200 && status < 400)) {
902            uploadComponent.invokeMethodAsync(
903              'RadzenUpload.OnComplete',
904                xhr.responseText,
905                cancelled
906            );
907          } else {
908            uploadComponent.invokeMethodAsync(
909              'RadzenUpload.OnError',
910              xhr.responseText
911            );
912          }
913        }
914      }
915    };
916    uploadComponent.invokeMethodAsync('GetHeaders').then(function (headers) {
917      xhr.open('POST', url, true);
918      for (var name in headers) {
919        xhr.setRequestHeader(name, headers[name]);
920      }
921      xhr.send(data);
922    });

923  },
924  getCookie: function (name) {
925    var value = '; ' + decodeURIComponent(document.cookie);
926    var parts = value.split('; ' + name + '=');
927    if (parts.length == 2) return parts.pop().split(';').shift();
928  },
929  getCulture: function () {
930    var cultureCookie = Radzen.getCookie('.AspNetCore.Culture');
931    var uiCulture = cultureCookie
932      ? cultureCookie.split('|').pop().split('=').pop()
933      : null;
934    return uiCulture || 'en-US';
935  },
936  numericOnPaste: function (e, min, max) {
937    if (e.clipboardData) {
938      var value = e.clipboardData.getData('text');
939
940      if (value && !isNaN(+value)) {
941        var numericValue = +value;
942        if (min != null && numericValue >= min) {
943            return;
944        }
945        if (max != null && numericValue <= max) {
946            return;
947        }
948      }
949
950      e.preventDefault();
951    }
952  },
953  numericOnInput: function (e, min, max, isNullable) {
954      var value = e.target.value;
955
956      if (!isNullable && value == '' && min != null) {
957          e.target.value = min;
958      }
959
960      if (value && !isNaN(+value)) {
961        var numericValue = +value;
962        if (min != null && !isNaN(+min) && numericValue < min) {
963            e.target.value = min;
964        }
965        if (max != null && !isNaN(+max) && numericValue > max) {
966            e.target.value = max;
967        }
968      }
969  },
970  numericKeyPress: function (e, isInteger, decimalSeparator) {
971    if (
972      e.metaKey ||
973      e.ctrlKey ||
974      e.keyCode == 9 ||
975      e.keyCode == 8 ||
976      e.keyCode == 13
977    ) {
978      return;
979      }
980
981      if (e.code === 'NumpadDecimal' && !isInteger) {
982          var cursorPosition = e.target.selectionEnd;
983          e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join('');
984          e.target.selectionStart = ++cursorPosition;
985          e.target.selectionEnd = cursorPosition;
986          e.preventDefault();
987          return;
988    }
989
990    var ch = String.fromCharCode(e.charCode);
991
992    if ((isInteger ? /^[-\d]$/ : /^[-\d,.]$/).test(ch)) {
993      return;
994    }
995
996    e.preventDefault();
997  },
998  openContextMenu: function (x,y,id, instance, callback) {
999    Radzen.closePopup(id);
1000
1001    Radzen.openPopup(null, id, false, null, x, y, instance, callback);
1002
1003    setTimeout(function () {
1004        var popup = document.getElementById(id);
1005        if (popup) {
1006            var menu = popup.querySelector('.rz-menu');
1007            if (menu) {
1008                menu.focus();
1009            }
1010        }
1011    }, 500);
1012  },
1013  openTooltip: function (target, id, delay, duration, position, closeTooltipOnDocumentClick, instance, callback) {
1014    Radzen.closeTooltip(id);
1015
1016    if (delay) {
1017        Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick);
1018    } else {
1019        Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick);
1020    }
1021
1022    if (duration) {
1023      Radzen[id + 'duration'] = setTimeout(Radzen.closePopup, duration, id, instance, callback);
1024    }
1025  },
1026  closeTooltip(id) {
1027    Radzen.activeElement = null;
1028    Radzen.closePopup(id);
1029
1030    if (Radzen[id + 'delay']) {
1031        clearTimeout(Radzen[id + 'delay']);
1032    }
1033
1034    if (Radzen[id + 'duration']) {
1035        clearTimeout(Radzen[id + 'duration']);
1036    }
1037  },
1038  destroyDatePicker(id) {
1039      var el = document.getElementById(id);
1040      if (!el) return;
1041
1042      var button = el.querySelector('.rz-datepicker-trigger');
1043      if (button) {
1044          button.onclick = null;
1045      }
1046      var input = el.querySelector('.rz-inputtext');
1047      if (input) {
1048          input.onclick = null;
1049      }
1050  },
1051  createDatePicker(el, popupId) {
1052      if(!el) return;
1053      var handler = function (e, condition) {
1054          if (condition) {
1055              Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false);
1056          }
1057      };
1058
1059      var input = el.querySelector('.rz-inputtext');
1060      var button = el.querySelector('.rz-datepicker-trigger');
1061      if (button) {
1062          button.onclick = function (e) {
1063              handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true));
1064          };
1065      }
1066
1067      if (input) {
1068          input.onclick = function (e) {
1069              handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly'));
1070          };
1071      }
1072  },
1073  findPopup: function (id) {
1074    var popups = [];
1075    for (var i = 0; i < document.body.children.length; i++) {
1076      if (document.body.children[i].id == id) {
1077        popups.push(document.body.children[i]);
1078      }
1079    }
1080    return popups;
1081  },
1082  repositionPopup: function (parent, id) {
1083      var popup = document.getElementById(id);
1084      if (!popup) return;
1085
1086      var rect = popup.getBoundingClientRect();
1087      var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 };
1088
1089      if (/Edge/.test(navigator.userAgent)) {
1090          var scrollTop = document.body.scrollTop;
1091      } else {
1092          var scrollTop = document.documentElement.scrollTop;
1093      }
1094
1095      var top = parentRect.bottom + scrollTop;
1096
1097      if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) {
1098          top = parentRect.top - rect.height + scrollTop;
1099      }
1100
1101      popup.style.top = top + 'px';
1102  },
1103  openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false, disableSmartPosition = false) {
1104    var popup = document.getElementById(id);
1105    if (!popup) return;
1106
1107    Radzen.activeElement = document.activeElement;
1108
1109    var parentRect = parent ? parent.getBoundingClientRect() : { top: y || 0, bottom: 0, left: x || 0, right: 0, width: 0, height: 0 };
1110
1111    if (/Edge/.test(navigator.userAgent)) {
1112      var scrollLeft = document.body.scrollLeft;
1113      var scrollTop = document.body.scrollTop;
1114    } else {
1115      var scrollLeft = document.documentElement.scrollLeft;
1116      var scrollTop = document.documentElement.scrollTop;
1117    }
1118
1119    var top = y ? y : parentRect.bottom;
1120    var left = x ? x : parentRect.left;
1121
1122      if (syncWidth) {
1123        popup.style.width = parentRect.width + 'px';
1124        if (!popup.style.minWidth) {
1125            popup.minWidth = true;
1126            popup.style.minWidth = parentRect.width + 'px';
1127        }
1128    }
1129
1130    if (window.chrome) {
1131        var closestFrozenCell = popup.closest('.rz-frozen-cell');
1132        if (closestFrozenCell) {
1133            Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left };
1134            closestFrozenCell.style.left = '';
1135        }
1136    }
1137
1138    popup.style.display = 'block';
1139
1140    var rect = popup.getBoundingClientRect();
1141    rect.width = x ? rect.width + 20 : rect.width;
1142    rect.height = y ? rect.height + 20 : rect.height;
1143
1144    var smartPosition = !position || position == 'bottom';
1145
1146    if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) {
1147        if (disableSmartPosition !== true) {
1148            top = parentRect.top - rect.height;
1149        }
1150
1151      if (position) {
1152        top = top - 40;
1153        var tooltipContent = popup.children[0];
1154        var tooltipContentClassName = 'rz-' + position + '-tooltip-content';
1155        if (tooltipContent.classList.contains(tooltipContentClassName)) {
1156          tooltipContent.classList.remove(tooltipContentClassName);
1157          tooltipContent.classList.add('rz-top-tooltip-content');
1158            position = 'top';
1159            if (instance && callback) {
1160                try { instance.invokeMethodAsync(callback, position); } catch { }
1161            }
1162        }
1163      }
1164    }
1165
1166    if (smartPosition && left + rect.width > window.innerWidth && window.innerWidth > rect.width) {
1167      left = !position ? window.innerWidth - rect.width : rect.left;
1168
1169      if (position) {
1170        top = y || parentRect.top;
1171        var tooltipContent = popup.children[0];
1172        var tooltipContentClassName = 'rz-' + position + '-tooltip-content';
1173        if (tooltipContent.classList.contains(tooltipContentClassName)) {
1174          tooltipContent.classList.remove(tooltipContentClassName);
1175          tooltipContent.classList.add('rz-left-tooltip-content');
1176          position = 'left';
1177          if (instance && callback) {
1178              try { instance.invokeMethodAsync(callback, position); } catch { }
1179          }
1180        }
1181      }
1182    }
1183
1184    if (smartPosition) {
1185      if (position) {
1186        top = top + 20;
1187      }
1188    }
1189
1190    if (position == 'left') {
1191      left = parentRect.left - rect.width - 5;
1192      top =  parentRect.top;
1193    }
1194
1195    if (position == 'right') {
1196      left = parentRect.right + 10;
1197      top = parentRect.top;
1198    }
1199
1200    if (position == 'top') {
1201      top = parentRect.top - rect.height + 5;
1202      left = parentRect.left;
1203    }
1204
1205    popup.style.zIndex = 2000;
1206    popup.style.left = left + scrollLeft + 'px';
1207    popup.style.top = top + scrollTop + 'px';
1208
1209    if (!popup.classList.contains('rz-overlaypanel')) {
1210        popup.classList.add('rz-popup');
1211    }
1212
1213    Radzen[id] = function (e) {
1214        var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1];
1215        var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup;
1216
1217        if (lastPopup) {
1218            currentPopup.instance = lastPopup.instance;
1219            currentPopup.callback = lastPopup.callback;
1220            currentPopup.parent = lastPopup.parent;
1221        }
1222
1223        if(e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return;
1224        if (!/Android/i.test(navigator.userAgent) &&
1225            !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') {
1226            Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1227            return;
1228        }
1229
1230        var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link'));
1231        if (e.type == 'resize' && !/Android/i.test(navigator.userAgent) || closestLink && closestLink.closest && closestLink.closest('a')) {
1232            if (Radzen.closeAllPopups) {
1233                Radzen.closeAllPopups();
1234            }
1235        }
1236        if (currentPopup.parent) {
1237          if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) {
1238              Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1239          }
1240        } else {
1241          if (e.target.nodeType && !currentPopup.contains(e.target)) {
1242              Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1243          }
1244        }
1245    };
1246
1247    if (!Radzen.popups) {
1248        Radzen.popups = [];
1249    }
1250
1251    Radzen.popups.push({ id, instance, callback, parent });
1252

1253    document.body.appendChild(popup);
1254    document.removeEventListener('mousedown', Radzen[id]);
1255    document.addEventListener('mousedown', Radzen[id]);
1256    window.removeEventListener('resize', Radzen[id]);
1257    window.addEventListener('resize', Radzen[id]);
1258
1259    var p = parent;
1260    while (p && p != document.body) {
1261        if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) {
1262            p.removeEventListener('scroll', Radzen.closeAllPopups);
1263            p.addEventListener('scroll', Radzen.closeAllPopups);
1264        }
1265        p = p.parentElement;
1266    }
1267
1268    if (!parent) {
1269        document.removeEventListener('contextmenu', Radzen[id]);
1270        document.addEventListener('contextmenu', Radzen[id]);
1271    }
1272
1273    if (autoFocusFirstElement) {
1274        setTimeout(function () {
1275            popup.removeEventListener('keydown', Radzen.focusTrap);
1276            popup.addEventListener('keydown', Radzen.focusTrap);
1277
1278            var focusable = Radzen.getFocusableElements(popup);
1279            var firstFocusable = focusable[0];
1280            if (firstFocusable) {
1281                firstFocusable.focus();
1282            }
1283        }, 500);
1284    }
1285  },
1286  closeAllPopups: function (e, id) {
1287    if (!Radzen.popups) return;
1288    var el = e && e.target || id && documentElement.getElementById(id);
1289    var popups = Radzen.popups;
1290      for (var i = 0; i < popups.length; i++) {
1291        var p = popups[i];
1292
1293        var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel'));
1294        if (closestPopup && closestPopup != p) {
1295            return;
1296        }
1297
1298        Radzen.closePopup(p.id, p.instance, p.callback, e);
1299    }
1300    Radzen.popups = [];
1301  },
1302  closePopup: function (id, instance, callback, e) {
1303    var popup = document.getElementById(id);
1304    if (!popup) return;
1305    if (popup.style.display == 'none') {
1306        var popups = Radzen.findPopup(id);
1307        if (popups.length > 1) {
1308            for (var i = 0; i < popups.length; i++) {
1309                if (popups[i].style.display == 'none') {
1310                    popups[i].parentNode.removeChild(popups[i]);
1311                } else {
1312                    popup = popups[i];
1313                }
1314            }
1315        } else {
1316            return;
1317        }
1318    }
1319
1320    if (popup) {
1321      if (popup.minWidth) {
1322          popup.style.minWidth = '';
1323      }
1324
1325      if (window.chrome && Radzen[id + 'FZL']) {
1326        Radzen[id + 'FZL'].cell.style.left = Radzen[id + 'FZL'].left;
1327        Radzen[id + 'FZL'] = null;
1328      }
1329
1330      popup.style.display = 'none';
1331    }
1332    document.removeEventListener('mousedown', Radzen[id]);
1333    window.removeEventListener('resize', Radzen[id]);
1334    Radzen[id] = null;
1335
1336    if (instance && callback) {
1337        if (callback.includes('RadzenTooltip')) {
1338            try { instance.invokeMethodAsync(callback, null); } catch { }
1339        } else {
1340            try { instance.invokeMethodAsync(callback); } catch { }
1341        }
1342    }
1343    Radzen.popups = (Radzen.popups || []).filter(function (obj) {
1344        return obj.id !== id;
1345    });
1346
1347    if (Radzen.activeElement && Radzen.activeElement == document.activeElement ||
1348        Radzen.activeElement && document.activeElement == document.body ||
1349        Radzen.activeElement && document.activeElement &&
1350            (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) {
1351        setTimeout(function () {
1352            if (e && e.target && e.target.tabIndex != -1) {
1353                Radzen.activeElement = e.target;
1354            }
1355            if (Radzen.activeElement) {
1356               Radzen.activeElement.focus();
1357            }
1358            Radzen.activeElement = null;
1359        }, 100);
1360    }
1361  },
1362  popupOpened: function (id) {
1363    var popup = document.getElementById(id);
1364    if (popup) {
1365        return popup.style.display != 'none';
1366    }
1367    return false;
1368  },
1369  togglePopup: function (parent, id, syncWidth, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false) {
1370    var popup = document.getElementById(id);
1371    if (!popup) return;
1372    if (popup.style.display == 'block') {
1373      Radzen.closePopup(id, instance, callback);
1374    } else {
1375      Radzen.openPopup(parent, id, syncWidth, null, null, null, instance, callback, closeOnDocumentClick, autoFocusFirstElement);
1376    }
1377  },
1378  destroyPopup: function (id) {
1379    var popup = document.getElementById(id);
1380    if (popup) {
1381      popup.parentNode.removeChild(popup);
1382    }
1383    document.removeEventListener('mousedown', Radzen[id]);
1384  },
1385  scrollDataGrid: function (e) {
1386    var scrollLeft =
1387      (e.target.scrollLeft ? '-' + e.target.scrollLeft : 0) + 'px';
1388
1389      e.target.previousElementSibling.style.marginLeft = scrollLeft;
1390      e.target.previousElementSibling.firstElementChild.style.paddingRight =
1391          e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
1392
1393    if (e.target.nextElementSibling) {
1394        e.target.nextElementSibling.style.marginLeft = scrollLeft;
1395        e.target.nextElementSibling.firstElementChild.style.paddingRight =
1396            e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
1397    }
1398
1399    for (var i = 0; i < document.body.children.length; i++) {
1400        if (document.body.children[i].classList.contains('rz-overlaypanel')) {
1401            document.body.children[i].style.display = 'none';
1402        }
1403    }
1404  },
1405  focusFirstFocusableElement: function (el) {
1406      var focusable = Radzen.getFocusableElements(el);
1407      var editor = el.querySelector('.rz-html-editor');
1408
1409      if (editor && !focusable.includes(editor.previousElementSibling)) {
1410          var editable = el.querySelector('.rz-html-editor-content');
1411          if (editable) {
1412              var selection = window.getSelection();
1413              var range = document.createRange();
1414              range.setStart(editable, 0);
1415              range.setEnd(editable, 0);
1416              selection.removeAllRanges();
1417              selection.addRange(range);
1418          }
1419      } else {
1420          var firstFocusable = focusable[0];
1421          if (firstFocusable) {
1422              firstFocusable.focus();
1423          }
1424      }
1425  },
1426  openSideDialog: function (options) {
1427      setTimeout(function () {
1428          if (options.autoFocusFirstElement) {
1429              var dialogs = document.querySelectorAll('.rz-dialog-side-content');
1430              if (dialogs.length == 0) return;
1431              var lastDialog = dialogs[dialogs.length - 1];
1432              Radzen.focusFirstFocusableElement(lastDialog);
1433          }
1434      }, 500);
1435  },
1436  openDialog: function (options, dialogService, dialog) {
1437    if (Radzen.closeAllPopups) {
1438        Radzen.closeAllPopups();
1439    }
1440    Radzen.dialogService = dialogService;
1441    if (
1442      document.documentElement.scrollHeight >
1443      document.documentElement.clientHeight
1444    ) {
1445      document.body.classList.add('no-scroll');
1446    }
1447
1448    setTimeout(function () {
1449        var dialogs = document.querySelectorAll('.rz-dialog-content');
1450        if (dialogs.length == 0) return;
1451        var lastDialog = dialogs[dialogs.length - 1];
1452
1453        if (lastDialog) {
1454            lastDialog.options = options;
1455            lastDialog.removeEventListener('keydown', Radzen.focusTrap);
1456            lastDialog.addEventListener('keydown', Radzen.focusTrap);
1457
1458            if (options.resizable) {
1459                dialog.offsetWidth = lastDialog.parentElement.offsetWidth;
1460                dialog.offsetHeight = lastDialog.parentElement.offsetHeight;
1461                var dialogResize = function (e) {
1462                    if (!dialog) return;
1463                    if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) {
1464
1465                        dialog.offsetWidth = e[0].target.offsetWidth;
1466                        dialog.offsetHeight = e[0].target.offsetHeight;
1467
1468                        dialog.invokeMethodAsync(
1469                            'RadzenDialog.OnResize',
1470                            e[0].target.offsetWidth,
1471                            e[0].target.offsetHeight
1472                        );
1473                    }
1474                };
1475                Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement);
1476            }
1477
1478            if (options.draggable) {
1479                var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar');
1480                if (dialogTitle) {

1481                    Radzen[dialogTitle] = function (e) {
1482                        var rect = lastDialog.parentElement.getBoundingClientRect();
1483                        var offsetX = e.clientX - rect.left;
1484                        var offsetY = e.clientY - rect.top;
1485
1486                        var move = function (e) {
1487                            var left = e.clientX - offsetX;
1488                            var top = e.clientY - offsetY;
1489
1490                            lastDialog.parentElement.style.left = left + 'px';
1491                            lastDialog.parentElement.style.top = top + 'px';
1492
1493                            dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left);
1494                        };
1495
1496                        var stop = function () {
1497                            document.removeEventListener('mousemove', move);
1498                            document.removeEventListener('mouseup', stop);
1499                        };
1500
1501                        document.addEventListener('mousemove', move);
1502                        document.addEventListener('mouseup', stop);
1503                    };
1504
1505                    dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]);
1506                }
1507            }
1508
1509            if (options.autoFocusFirstElement) {
1510                Radzen.focusFirstFocusableElement(lastDialog);
1511            }
1512        }
1513    }, 500);
1514
1515    document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1516    if (options.closeDialogOnEsc) {
1517        document.addEventListener('keydown', Radzen.closePopupOrDialog);
1518    }
1519  },
1520  closeDialog: function () {
1521    Radzen.dialogResizer = null;
1522    document.body.classList.remove('no-scroll');
1523    var dialogs = document.querySelectorAll('.rz-dialog-content');
1524
1525    var lastDialog = dialogs.length && dialogs[dialogs.length - 1];
1526    if (lastDialog) {
1527        var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar');
1528        if (dialogTitle) {
1529            dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]);
1530            Radzen[dialogTitle] = null;
1531            delete Radzen[dialogTitle];
1532        }
1533    }
1534
1535    if (dialogs.length <= 1) {
1536        document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1537        delete Radzen.dialogService;
1538    }
1539  },
1540  disableKeydown: function (e) {
1541      e = e || window.event;
1542      e.preventDefault();
1543  },
1544  getFocusableElements: function (element) {
1545    return [...element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]')]
1546        .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null);
1547  },
1548  focusTrap: function (e) {
1549    e = e || window.event;
1550    var isTab = false;
1551    if ("key" in e) {
1552        isTab = (e.key === "Tab");
1553    } else {
1554        isTab = (e.keyCode === 9);
1555    }
1556    if (isTab) {
1557        var focusable = Radzen.getFocusableElements(e.currentTarget);
1558        var firstFocusable = focusable[0];
1559        var lastFocusable = focusable[focusable.length - 1];
1560
1561        if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) {
1562            e.preventDefault();
1563            lastFocusable.focus();
1564        } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) {
1565            e.preventDefault();
1566            firstFocusable.focus();
1567        }
1568    }
1569  },
1570  closePopupOrDialog: function (e) {
1571      e = e || window.event;
1572      var isEscape = false;
1573      if ("key" in e) {
1574          isEscape = (e.key === "Escape" || e.key === "Esc");
1575      } else {
1576          isEscape = (e.keyCode === 27);
1577      }
1578      if (isEscape && Radzen.dialogService) {
1579          var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel');
1580          for (var i = 0; i < popups.length; i++) {
1581              if (popups[i].style.display != 'none') {
1582                  return;
1583              }
1584          }
1585
1586          var dialogs = document.querySelectorAll('.rz-dialog-content');
1587          if (dialogs.length == 0) return;
1588          var lastDialog = dialogs[dialogs.length - 1];
1589
1590          if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) {
1591              Radzen.dialogService.invokeMethodAsync('DialogService.Close', null);
1592
1593              if (dialogs.length <= 1) {
1594                  document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1595                  delete Radzen.dialogService;
1596                  var layout = document.querySelector('.rz-layout');
1597                  if (layout) {
1598                      layout.removeEventListener('keydown', Radzen.disableKeydown);
1599                  }
1600              }
1601          }
1602      }
1603  },
1604  getNumericValue: function (arg) {
1605    var el =
1606      arg instanceof Element || arg instanceof HTMLDocument
1607        ? arg
1608        : document.getElementById(arg);
1609    return el ? Radzen.getInputValue(el.children[0]) : null;
1610  },
1611  getInputValue: function (arg) {
1612    var input =
1613      arg instanceof Element || arg instanceof HTMLDocument
1614        ? arg
1615        : document.getElementById(arg);
1616    return input && input.value != '' ? input.value : null;
1617  },
1618  setInputValue: function (arg, value) {
1619    var input =
1620      arg instanceof Element || arg instanceof HTMLDocument
1621        ? arg
1622        : document.getElementById(arg);
1623    if (input) {
1624      input.value = value;
1625    }
1626  },
1627  blur: function (el, e) { 
1628    if (el) {
1629        e.preventDefault();
1630        el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 9 }));
1631    }
1632  },
1633  readFileAsBase64: function (fileInput, maxFileSize, maxWidth, maxHeight) {
1634    var calculateWidthAndHeight = function (img) {
1635      var width = img.width;

1636      var height = img.height;
1637      // Change the resizing logic
1638      if (width > height) {
1639        if (width > maxWidth) {
1640          height = height * (maxWidth / width);
1641          width = maxWidth;
1642        }
1643      } else {
1644        if (height > maxHeight) {
1645          width = width * (maxHeight / height);
1646          height = maxHeight;
1647        }
1648      }
1649      return { width, height };
1650    };
1651    var readAsDataURL = function (fileInput) {
1652      return new Promise(function (resolve, reject) {
1653        var reader = new FileReader();
1654        reader.onerror = function () {
1655          reader.abort();
1656          reject('Error reading file.');
1657        };
1658        reader.addEventListener(
1659          'load',
1660          function () {
1661            if (maxWidth > 0 && maxHeight > 0) {
1662              var img = document.createElement("img");
1663              img.onload = function (event) {
1664                // Dynamically create a canvas element
1665                var canvas = document.createElement("canvas");
1666                var res = calculateWidthAndHeight(img);
1667                canvas.width = res.width;
1668                canvas.height = res.height;
1669                var ctx = canvas.getContext("2d");
1670                ctx.drawImage(img, 0, 0, res.width, res.height);
1671                resolve(canvas.toDataURL(fileInput.type));
1672              }
1673              img.src = reader.result;
1674            } else {
1675              resolve(reader.result);
1676            }
1677          },
1678          false
1679          );
1680        var file = fileInput.files[0];
1681        if (!file) return;
1682        if (file.size <= maxFileSize) {
1683          reader.readAsDataURL(file);
1684        } else {
1685          reject('File too large.');
1686        }
1687      });
1688    };
1689
1690    return readAsDataURL(fileInput);
1691  },
1692  toggleMenuItem: function (target, event, defaultActive, clickToOpen) {
1693    var item = target.closest('.rz-navigation-item');
1694
1695    var active = defaultActive != undefined ? defaultActive : !item.classList.contains('rz-navigation-item-active');
1696
1697    function toggle(active) {
1698      item.classList.toggle('rz-navigation-item-active', active);
1699
1700      target.classList.toggle('rz-navigation-item-wrapper-active', active);
1701
1702      var children = item.querySelector('.rz-navigation-menu');
1703
1704      if (children) {
1705        children.style.display = active ? '' : 'none';
1706      }
1707
1708      var icon = item.querySelector('.rz-navigation-item-icon-children');
1709
1710      if (icon) {
1711        var deg = active ? '180deg' : 0;
1712        icon.style.transform = 'rotate(' + deg + ')';
1713      }
1714    }
1715
1716    if (clickToOpen === false && item.parentElement && item.parentElement.closest('.rz-navigation-item') && !defaultActive) {
1717        return;
1718    };
1719
1720    toggle(active);
1721
1722    document.removeEventListener('click', target.clickHandler);
1723
1724    target.clickHandler = function (event) {
1725      if (item.contains(event.target)) {
1726        var child = event.target.closest('.rz-navigation-item');
1727        if (child && child.querySelector('.rz-navigation-menu')) {
1728          return;
1729        }
1730      }
1731      toggle(false);
1732    }
1733
1734    document.addEventListener('click', target.clickHandler);
1735  },
1736  destroyChart: function (ref) {
1737    ref.removeEventListener('mouseleave', ref.mouseLeaveHandler);
1738    delete ref.mouseLeaveHandler;
1739    ref.removeEventListener('mouseenter', ref.mouseEnterHandler);
1740    delete ref.mouseEnterHandler;
1741    ref.removeEventListener('mousemove', ref.mouseMoveHandler);
1742    delete ref.mouseMoveHandler;
1743    ref.removeEventListener('click', ref.clickHandler);
1744    delete ref.clickHandler;
1745    this.destroyResizable(ref);
1746  },
1747  destroyGauge: function (ref) {
1748    this.destroyResizable(ref);
1749  },
1750  destroyResizable: function (ref) {
1751    if (ref.resizeObserver) {
1752      ref.resizeObserver.disconnect();
1753      delete ref.resizeObserver;
1754    }
1755    if (ref.resizeHandler) {
1756      window.removeEventListener('resize', ref.resizeHandler);
1757      delete ref.resizeHandler;
1758    }
1759  },
1760  createResizable: function (ref, instance) {
1761    ref.resizeHandler = function () {
1762      var rect = ref.getBoundingClientRect();
1763
1764      instance.invokeMethodAsync('Resize', rect.width, rect.height);
1765    };
1766
1767    if (window.ResizeObserver) {
1768      ref.resizeObserver = new ResizeObserver(ref.resizeHandler);
1769      ref.resizeObserver.observe(ref);
1770    } else {
1771      window.addEventListener('resize', ref.resizeHandler);
1772    }
1773
1774    var rect = ref.getBoundingClientRect();
1775
1776    return {width: rect.width, height: rect.height};
1777  },
1778  createChart: function (ref, instance) {
1779    var inside = false;
1780    ref.mouseMoveHandler = this.throttle(function (e) {
1781      if (inside) {
1782        var rect = ref.getBoundingClientRect();
1783        var x = e.clientX - rect.left;
1784        var y = e.clientY - rect.top;
1785        instance.invokeMethodAsync('MouseMove', x, y);
1786     }
1787    }, 100);
1788    ref.mouseEnterHandler = function () {
1789        inside = true;
1790    };
1791    ref.mouseLeaveHandler = function (e) {
1792        if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) {
1793            return;
1794        }
1795        inside = false;
1796        instance.invokeMethodAsync('MouseMove', -1, -1);
1797    };
1798    ref.clickHandler = function (e) {
1799      var rect = ref.getBoundingClientRect();
1800      var x = e.clientX - rect.left;
1801      var y = e.clientY - rect.top;
1802      if (!e.target.closest('.rz-marker')) {
1803        instance.invokeMethodAsync('Click', x, y);
1804      }
1805    };
1806
1807    ref.addEventListener('mouseenter', ref.mouseEnterHandler);
1808    ref.addEventListener('mouseleave', ref.mouseLeaveHandler);
1809    ref.addEventListener('mousemove', ref.mouseMoveHandler);
1810    ref.addEventListener('click', ref.clickHandler);
1811
1812    return this.createResizable(ref, instance);
1813  },
1814  createGauge: function (ref, instance) {
1815    return this.createResizable(ref, instance);
1816  },
1817  destroyScheduler: function (ref) {
1818    if (ref && ref.resizeHandler) {
1819      window.removeEventListener('resize', ref.resizeHandler);
1820      delete ref.resizeHandler;
1821    }
1822  },
1823  createScheduler: function (ref, instance) {
1824    ref.resizeHandler = function () {
1825      var rect = ref.getBoundingClientRect();
1826
1827      instance.invokeMethodAsync('Resize', rect.width, rect.height);
1828    };
1829
1830    window.addEventListener('resize', ref.resizeHandler);
1831
1832    var rect = ref.getBoundingClientRect();
1833    return {width: rect.width, height: rect.height};
1834  },
1835  innerHTML: function (ref, value) {
1836    if (value != undefined) {
1837        if (ref != null) {
1838            ref.innerHTML = value;
1839        }
1840    } else {
1841      return ref.innerHTML;
1842    }
1843  },
1844  execCommand: function (ref, name, value) {
1845    if (document.activeElement != ref && ref) {
1846      ref.focus();
1847    }
1848    document.execCommand(name, false, value);
1849    return this.queryCommands(ref);
1850  },
1851  queryCommands: function (ref) {
1852    return {
1853      html: ref != null ? ref.innerHTML : null,
1854      fontName: document.queryCommandValue('fontName'),
1855      fontSize: document.queryCommandValue('fontSize'),
1856      formatBlock: document.queryCommandValue('formatBlock'),
1857      bold: document.queryCommandState('bold'),
1858      underline: document.queryCommandState('underline'),
1859      justifyRight: document.queryCommandState('justifyRight'),
1860      justifyLeft: document.queryCommandState('justifyLeft'),
1861      justifyCenter: document.queryCommandState('justifyCenter'),
1862      justifyFull: document.queryCommandState('justifyFull'),
1863      italic: document.queryCommandState('italic'),

1864      strikeThrough: document.queryCommandState('strikeThrough'),
1865      superscript: document.queryCommandState('superscript'),
1866      subscript: document.queryCommandState('subscript'),
1867      unlink: document.queryCommandEnabled('unlink'),
1868      undo: document.queryCommandEnabled('undo'),
1869      redo: document.queryCommandEnabled('redo')
1870    };
1871  },
1872  mediaQueries: {},
1873  mediaQuery: function(query, instance) {
1874    if (instance) {
1875      function callback(event) {
1876          instance.invokeMethodAsync('OnChange', event.matches)
1877      };
1878      var query = matchMedia(query);
1879      this.mediaQueries[instance._id] = function() {
1880          query.removeListener(callback);
1881      }
1882      query.addListener(callback);
1883      return query.matches;
1884    } else {
1885        instance = query;
1886        if (this.mediaQueries[instance._id]) {
1887            this.mediaQueries[instance._id]();
1888            delete this.mediaQueries[instance._id];
1889        }
1890    }
1891  },
1892  createEditor: function (ref, uploadUrl, paste, instance, shortcuts) {
1893    ref.inputListener = function () {
1894      instance.invokeMethodAsync('OnChange', ref.innerHTML);
1895    };
1896    ref.keydownListener = function (e) {
1897      var key = '';
1898      if (e.ctrlKey || e.metaKey) {
1899        key += 'Ctrl+';
1900      }
1901      if (e.altKey) {
1902        key += 'Alt+';
1903      }
1904      if (e.shiftKey) {
1905        key += 'Shift+';
1906      }
1907      key += e.code.replace('Key', '').replace('Digit', '').replace('Numpad', '');
1908
1909      if (shortcuts.includes(key)) {
1910        e.preventDefault();
1911        instance.invokeMethodAsync('ExecuteShortcutAsync', key);
1912      }
1913    };
1914
1915    ref.clickListener = function (e) {
1916      if (e.target) {
1917        if (e.target.matches('a,button')) {
1918          e.preventDefault();
1919        }
1920
1921        for (var img of ref.querySelectorAll('img.rz-state-selected')) {
1922          img.classList.remove('rz-state-selected');
1923        }
1924
1925        if (e.target.matches('img')) {
1926          e.target.classList.add('rz-state-selected');
1927          var range = document.createRange();
1928          range.selectNode(e.target);
1929          getSelection().removeAllRanges();
1930          getSelection().addRange(range);
1931        }
1932      }
1933    }
1934
1935    ref.selectionChangeListener = function () {
1936      if (document.activeElement == ref) {
1937        instance.invokeMethodAsync('OnSelectionChange');
1938      }
1939    };
1940    ref.pasteListener = function (e) {
1941      var item = e.clipboardData.items[0];
1942
1943      if (item.kind == 'file') {
1944        e.preventDefault();
1945        var file = item.getAsFile();
1946
1947        if (uploadUrl) {
1948            var xhr = new XMLHttpRequest();
1949            var data = new FormData();
1950            data.append("file", file);
1951            xhr.onreadystatechange = function (e) {
1952                if (xhr.readyState === XMLHttpRequest.DONE) {
1953                    var status = xhr.status;
1954                    if (status === 0 || (status >= 200 && status < 400)) {
1955                        var result = JSON.parse(xhr.responseText);
1956                        var html = '<img src="' + result.url + '">';
1957                        if (paste) {
1958                            instance.invokeMethodAsync('OnPaste', html)
1959                                .then(function (html) {
1960                                    document.execCommand("insertHTML", false, html);
1961                                });
1962                        } else {
1963                          document.execCommand("insertHTML", false, '<img src="' + result.url + '">');
1964                        }
1965                        instance.invokeMethodAsync('OnUploadComplete', xhr.responseText);
1966                    } else {
1967                        instance.invokeMethodAsync('OnError', xhr.responseText);
1968                    }
1969                }
1970            }
1971            instance.invokeMethodAsync('GetHeaders').then(function (headers) {
1972                xhr.open('POST', uploadUrl, true);
1973                for (var name in headers) {
1974                    xhr.setRequestHeader(name, headers[name]);
1975                }
1976                xhr.send(data);
1977            });
1978        } else {
1979            var reader = new FileReader();
1980            reader.onload = function (e) {
1981              var html = '<img src="' + e.target.result + '">';
1982
1983              if (paste) {
1984                instance.invokeMethodAsync('OnPaste', html)
1985                  .then(function (html) {
1986                    document.execCommand("insertHTML", false, html);
1987                  });
1988              } else {
1989                document.execCommand("insertHTML", false, html);
1990              }
1991            };

1992            reader.readAsDataURL(file);
1993        }
1994      } else if (paste) {
1995        e.preventDefault();
1996        var data = e.clipboardData.getData('text/html') || e.clipboardData.getData('text/plain');
1997
1998        instance.invokeMethodAsync('OnPaste', data)
1999          .then(function (html) {
2000            document.execCommand("insertHTML", false, html);
2001          });
2002      }
2003    };
2004    ref.addEventListener('input', ref.inputListener);
2005    ref.addEventListener('paste', ref.pasteListener);
2006    ref.addEventListener('keydown', ref.keydownListener);
2007    ref.addEventListener('click', ref.clickListener);
2008    document.addEventListener('selectionchange', ref.selectionChangeListener);
2009    document.execCommand('styleWithCSS', false, true);
2010  },
2011  saveSelection: function (ref) {
2012    if (document.activeElement == ref) {
2013      var selection = getSelection();
2014      if (selection.rangeCount > 0) {
2015        ref.range = selection.getRangeAt(0);
2016      }
2017    }
2018  },
2019  restoreSelection: function (ref) {
2020    var range = ref.range;
2021    if (range) {
2022      delete ref.range;
2023      if(ref) {
2024          ref.focus();
2025      }
2026      var selection = getSelection();
2027      selection.removeAllRanges();
2028      selection.addRange(range);
2029    }
2030  },
2031  selectionAttributes: function (selector, attributes, container) {
2032    var selection = getSelection();
2033    var range = selection.rangeCount > 0 && selection.getRangeAt(0);
2034    var parent = range && range.commonAncestorContainer;
2035    var img = container.querySelector('img.rz-state-selected');
2036    var inside = img && selector == 'img';
2037    while (parent) {
2038      if (parent == container) {
2039        inside = true;
2040        break;
2041      }
2042      parent = parent.parentNode;
2043    }
2044    if (!inside) {
2045      return {};
2046    }
2047    var target = selection.focusNode;
2048    var innerHTML;
2049
2050    if (img && selector == 'img') {
2051      target = img;
2052    } else if (target) {
2053      if (target.nodeType == 3) {
2054        target = target.parentElement;
2055      } else {
2056        target = target.childNodes[selection.focusOffset];
2057        if (target) {
2058          innerHTML = target.outerHTML;
2059        }
2060      }
2061      if (target && target.matches && !target.matches(selector)) {
2062        target = target.closest(selector);
2063      }
2064    }
2065
2066    return attributes.reduce(function (result, name) {
2067      if (target) {
2068        result[name] = name == 'innerText' ? target[name] : target.getAttribute(name);
2069      }
2070      return result;
2071    }, { innerText: selection.toString(), innerHTML: innerHTML });
2072  },
2073  destroyEditor: function (ref) {
2074    if (ref) {
2075      ref.removeEventListener('input', ref.inputListener);
2076      ref.removeEventListener('paste', ref.pasteListener);
2077      ref.removeEventListener('keydown', ref.keydownListener);
2078      ref.removeEventListener('click', ref.clickListener);
2079      document.removeEventListener('selectionchange', ref.selectionChangeListener);
2080    }
2081  },
2082  startDrag: function (ref, instance, handler) {
2083    if (!ref) {
2084        return { left: 0, top: 0, width: 0, height: 0 };
2085    }
2086    ref.mouseMoveHandler = function (e) {
2087      instance.invokeMethodAsync(handler, { clientX: e.clientX, clientY: e.clientY });
2088    };
2089    ref.touchMoveHandler = function (e) {
2090      if (e.targetTouches[0] && ref.contains(e.targetTouches[0].target)) {
2091        instance.invokeMethodAsync(handler, { clientX: e.targetTouches[0].clientX, clientY: e.targetTouches[0].clientY });
2092      }
2093    };
2094    ref.mouseUpHandler = function (e) {
2095      Radzen.endDrag(ref);
2096    };
2097    document.addEventListener('mousemove', ref.mouseMoveHandler);
2098    document.addEventListener('mouseup', ref.mouseUpHandler);
2099    document.addEventListener('touchmove', ref.touchMoveHandler, { passive: true, capture: true })
2100    document.addEventListener('touchend', ref.mouseUpHandler, { passive: true });
2101    return Radzen.clientRect(ref);
2102  },
2103  submit: function (form) {
2104    form.submit();
2105  },
2106  clientRect: function (arg) {
2107    var el = arg instanceof Element || arg instanceof HTMLDocument
2108        ? arg
2109        : document.getElementById(arg);
2110    var rect = el.getBoundingClientRect();
2111    return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
2112  },
2113  endDrag: function (ref) {
2114    document.removeEventListener('mousemove', ref.mouseMoveHandler);
2115    document.removeEventListener('mouseup', ref.mouseUpHandler);
2116    document.removeEventListener('touchmove', ref.touchMoveHandler)
2117    document.removeEventListener('touchend', ref.mouseUpHandler);
2118  },
2119  startColumnReorder: function(id) {
2120      var el = document.getElementById(id + '-drag');
2121      var cell = el.parentNode.parentNode;
2122      var visual = document.createElement("th");
2123      visual.className = cell.className + ' rz-column-draggable';
2124      visual.style = cell.style;
2125      visual.style.display = 'none';
2126      visual.style.position = 'absolute';
2127      visual.style.height = cell.offsetHeight + 'px';
2128      visual.style.width = cell.offsetWidth + 'px';
2129      visual.style.zIndex = 2000;
2130      visual.innerHTML = cell.firstChild.outerHTML;
2131      visual.id = id + 'visual';
2132      document.body.appendChild(visual);
2133
2134      var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer');
2135      for (let i = 0; i < resizers.length; i++) {
2136          resizers[i].style.display = 'none';
2137      }
2138
2139      Radzen[id + 'end'] = function (e) {
2140          var el = document.getElementById(id + 'visual');
2141          if (el) {
2142              document.body.removeChild(el);
2143              Radzen[id + 'end'] = null;
2144              Radzen[id + 'move'] = null;
2145              var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer');
2146              for (let i = 0; i < resizers.length; i++) {
2147                  resizers[i].style.display = 'block';
2148              }
2149          }
2150      }
2151      document.removeEventListener('click', Radzen[id + 'end']);
2152      document.addEventListener('click', Radzen[id + 'end']);
2153
2154      Radzen[id + 'move'] = function (e) {
2155          var el = document.getElementById(id + 'visual');
2156          if (el) {
2157              el.style.display = 'block';
2158
2159              if (/Edge/.test(navigator.userAgent)) {
2160                  var scrollLeft = document.body.scrollLeft;
2161                  var scrollTop = document.body.scrollTop;
2162              } else {
2163                  var scrollLeft = document.documentElement.scrollLeft;
2164                  var scrollTop = document.documentElement.scrollTop;
2165              }
2166
2167              el.style.top = e.clientY + scrollTop + 10 + 'px';
2168              el.style.left = e.clientX + scrollLeft + 10 + 'px';
2169          }
2170      }
2171      document.removeEventListener('mousemove', Radzen[id + 'move']);
2172      document.addEventListener('mousemove', Radzen[id + 'move']);
2173  },
2174  stopColumnResize: function (id, grid, columnIndex) {
2175    var el = document.getElementById(id + '-resizer');
2176    if(!el) return;
2177    var cell = el.parentNode.parentNode;
2178    if (!cell) return;
2179    if (Radzen[el]) {
2180        grid.invokeMethodAsync(
2181            'RadzenGrid.OnColumnResized',
2182            columnIndex,
2183            cell.getBoundingClientRect().width
2184        );
2185        el.style.width = null;
2186        document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
2187        document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
2188        document.removeEventListener('touchmove', Radzen[el].touchMoveHandler)
2189        document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
2190        Radzen[el] = null;
2191    }
2192  },
2193  startColumnResize: function(id, grid, columnIndex, clientX) {
2194      var el = document.getElementById(id + '-resizer');
2195      var cell = el.parentNode.parentNode;
2196      var col = document.getElementById(id + '-col');
2197      var dataCol = document.getElementById(id + '-data-col');
2198      var footerCol = document.getElementById(id + '-footer-col');
2199      Radzen[el] = {
2200          clientX: clientX,
2201          width: cell.getBoundingClientRect().width,
2202          mouseUpHandler: function (e) {
2203              if (Radzen[el]) {
2204                  grid.invokeMethodAsync(
2205                      'RadzenGrid.OnColumnResized',
2206                      columnIndex,
2207                      cell.getBoundingClientRect().width
2208                  );
2209                  el.style.width = null;
2210                  document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
2211                  document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
2212                  document.removeEventListener('touchmove', Radzen[el].touchMoveHandler)
2213                  document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
2214                  Radzen[el] = null;
2215              }
2216          },
2217          mouseMoveHandler: function (e) {
2218              if (Radzen[el]) {
2219                  var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX));
2220                  var minWidth = parseFloat(cell.style.minWidth || 0)
2221
2222                  if (widthFloat < minWidth) {
2223                      widthFloat = minWidth;
2224                  }
2225
2226                  var width = widthFloat + 'px';
2227
2228                  if (cell) {
2229                      cell.style.width = width;
2230                  }
2231                  if (col) {
2232                      col.style.width = width;
2233                  }
2234                  if (dataCol) {
2235                      dataCol.style.width = width;
2236                  }
2237                  if (footerCol) {
2238                      footerCol.style.width = width;
2239                  }
2240              }
2241          },
2242          touchMoveHandler: function (e) {
2243              if (e.targetTouches[0]) {
2244                  Radzen[el].mouseMoveHandler(e.targetTouches[0]);
2245              }
2246          }
2247      };
2248      el.style.width = "100%";
2249      document.addEventListener('mousemove', Radzen[el].mouseMoveHandler);
2250      document.addEventListener('mouseup', Radzen[el].mouseUpHandler);
2251      document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true })
2252      document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true });

2253  },
2254      startSplitterResize: function(id,
2255        splitter,
2256        paneId,
2257        paneNextId,
2258        orientation,
2259        clientPos,
2260        minValue,
2261        maxValue,
2262        minNextValue,
2263        maxNextValue) {
2264
2265        var el = document.getElementById(id);
2266        var pane = document.getElementById(paneId);
2267        var paneNext = document.getElementById(paneNextId);
2268        var paneLength;
2269        var paneNextLength;
2270        var panePerc;
2271        var paneNextPerc;
2272        var isHOrientation=orientation == 'Horizontal';
2273
2274        var totalLength = 0.0;
2275        Array.from(el.children).forEach(element => {
2276            totalLength += isHOrientation
2277                ? element.getBoundingClientRect().width
2278                : element.getBoundingClientRect().height;
2279        });
2280
2281        if (pane) {
2282            paneLength = isHOrientation
2283                ? pane.getBoundingClientRect().width
2284                : pane.getBoundingClientRect().height;
2285
2286            panePerc = (paneLength / totalLength * 100) + '%';
2287        }
2288
2289        if (paneNext) {
2290            paneNextLength = isHOrientation
2291                ? paneNext.getBoundingClientRect().width
2292                : paneNext.getBoundingClientRect().height;
2293
2294            paneNextPerc = (paneNextLength / totalLength * 100) + '%';
2295        }
2296
2297        function ensurevalue(value) {
2298            if (!value)
2299                return null;
2300
2301            value=value.trim().toLowerCase();
2302
2303            if (value.endsWith("%"))
2304                return totalLength*parseFloat(value)/100;
2305
2306            if (value.endsWith("px"))
2307                return parseFloat(value);
2308
2309            throw 'Invalid value';
2310        }
2311
2312        minValue=ensurevalue(minValue);
2313        maxValue=ensurevalue(maxValue);
2314        minNextValue=ensurevalue(minNextValue);
2315        maxNextValue=ensurevalue(maxNextValue);
2316
2317        Radzen[el] = {
2318            clientPos: clientPos,
2319            panePerc: parseFloat(panePerc),
2320            paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0,
2321            paneLength: paneLength,
2322            paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0,
2323            mouseUpHandler: function(e) {
2324                if (Radzen[el]) {
2325                    splitter.invokeMethodAsync(
2326                        'RadzenSplitter.OnPaneResized',
2327                        parseInt(pane.getAttribute('data-index')),
2328                        parseFloat(pane.style.flexBasis),
2329                        paneNext ? parseInt(paneNext.getAttribute('data-index')) : null,
2330                        paneNext ? parseFloat(paneNext.style.flexBasis) : null
2331                    );
2332
2333                    document.removeEventListener('pointerup', Radzen[el].mouseUpHandler);
2334                    document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler);
2335                    el.removeEventListener('touchmove', preventDefaultAndStopPropagation);
2336                    Radzen[el] = null;
2337                }
2338            },
2339            mouseMoveHandler: function(e) {
2340                if (Radzen[el]) {
2341
2342                    splitter.invokeMethodAsync(
2343                        'RadzenSplitter.OnPaneResizing'
2344                    );
2345
2346                    var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc;
2347                    var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength;
2348
2349                    var length = (Radzen[el].paneLength -
2350                        (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY)));
2351
2352                    if (length > spaceLength)
2353                        length = spaceLength;
2354
2355                    if (minValue && length < minValue) length = minValue;
2356                    if (maxValue && length > maxValue) length = maxValue;
2357
2358                    if (paneNext) {
2359                        var nextSpace=spaceLength-length;
2360                        if (minNextValue && nextSpace < minNextValue) length = spaceLength-minNextValue;
2361                        if (maxNextValue && nextSpace >

2361 maxNextValue) length = spaceLength+maxNextValue;
2362                    }
2363
2364                    var perc = length / Radzen[el].paneLength;
2365                    if (!isFinite(perc)) {
2366                        perc = 1;
2367                        Radzen[el].panePerc = 0.1;
2368                        Radzen[el].paneLength =isHOrientation
2369                            ? pane.getBoundingClientRect().width
2370                            : pane.getBoundingClientRect().height;
2371                    }
2372
2373                    var newPerc =  Radzen[el].panePerc * perc;
2374                    if (newPerc < 0) newPerc = 0;
2375                    if (newPerc > 100) newPerc = 100;
2376
2377                    pane.style.flexBasis = newPerc + '%';
2378                    if (paneNext)
2379                        paneNext.style.flexBasis = (spacePerc - newPerc) + '%';
2380                }
2381            },
2382            touchMoveHandler: function(e) {
2383                if (e.targetTouches[0]) {
2384                    Radzen[el].mouseMoveHandler(e.targetTouches[0]);
2385                }
2386            }
2387          };
2388
2389        const preventDefaultAndStopPropagation = (ev) => {
2390            ev.preventDefault();
2391            ev.stopPropagation();
2392        };
2393          document.addEventListener('pointerup', Radzen[el].mouseUpHandler);
2394          document.addEventListener('pointermove', Radzen[el].mouseMoveHandler);
2395          el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false });
2396    },
2397    resizeSplitter(id, e) {
2398        var el = document.getElementById(id);
2399        if (el && Radzen[el]) {
2400            Radzen[el].mouseMoveHandler(e);
2401            Radzen[el].mouseUpHandler(e);
2402        }
2403    },
2404    openWaiting: function() {
2405        if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
2406            document.body.classList.add('no-scroll');
2407        }
2408        if (Radzen.WaitingIntervalId != null) {
2409            clearInterval(Radzen.WaitingIntervalId);
2410        }
2411
2412        setTimeout(function() {
2413                var timerObj = document.getElementsByClassName('rz-waiting-timer');
2414                if (timerObj.length == 0) return;
2415                var timerStart = new Date().getTime();
2416                Radzen.WaitingIntervalId = setInterval(function() {
2417                        if (timerObj == null || timerObj[0] == null) {
2418                            clearInterval(Radzen.WaitingIntervalId);
2419                        } else {
2420                            var time = new Date(new Date().getTime() - timerStart);
2421                            timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100);
2422                        }
2423                    },
2424                    100);
2425            },
2426            100);
2427    },
2428    closeWaiting: function() {
2429        document.body.classList.remove('no-scroll');
2430        if (Radzen.WaitingIntervalId != null) {
2431            clearInterval(Radzen.WaitingIntervalId);
2432            Radzen.WaitingIntervalId = null;
2433        }
2434    },
2435    toggleDictation: function (componentRef, language) {
2436        function start() {
2437            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
2438
2439            if (!SpeechRecognition) {
2440                return;
2441            }
2442
2443            radzenRecognition = new SpeechRecognition();
2444            radzenRecognition.componentRef = componentRef;
2445            radzenRecognition.continuous = true;
2446
2447            if (language) {
2448                radzenRecognition.lang = language;
2449            }
2450
2451            radzenRecognition.onresult = function (event) {
2452                if (event.results.length < 1) {
2453                    return;
2454                }
2455
2456                let current = event.results[event.results.length - 1][0]
2457                let result = current.transcript;
2458
2459                componentRef.invokeMethodAsync("OnResult", result);
2460            };
2461            radzenRecognition.onend = function (event) {
2462                componentRef.invokeMethodAsync("StopRecording");
2463                radzenRecognition = null;
2464            };
2465            radzenRecognition.start();
2466        }
2467
2468        if (radzenRecognition) {
2469            if (radzenRecognition.componentRef._id != componentRef._id) {
2470                radzenRecognition.addEventListener('end', start);
2471            }
2472            radzenRecognition.stop();
2473        } else {
2474            start();
2475        }
2476    },
2477    openChartTooltip: function (chart, x, y, id, instance, callback) {
2478        Radzen.closeTooltip(id);
2479
2480        var chartRect = chart.getBoundingClientRect();
2481        x = Math.max(2, chartRect.left + x);
2482        y = Math.max(2, chartRect.top + y);
2483        Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false);
2484
2485        var popup = document.getElementById(id);
2486        if (!popup) {
2487            return;
2488        }
2489        var tooltipContent = popup.children[0];
2490        var tooltipContentRect = tooltipContent.getBoundingClientRect();
2491        var tooltipContentClassName = 'rz-top-chart-tooltip';
2492        if (y - tooltipContentRect.height < 0) {
2493            tooltipContentClassName = 'rz-bottom-chart-tooltip';
2494        }
2495        tooltipContent.classList.remove('rz-top-chart-tooltip');
2496        tooltipContent.classList.remove('rz-bottom-chart-tooltip');
2497        tooltipContent.classList.add(tooltipContentClassName);
2498    }
2499};