https://login.diversified.energy/_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
19var resolveCallbacks = [];
20var rejectCallbacks = [];
21var radzenRecognition;
22
23window.Radzen = {
24    throttle: function (callback, delay) {
25        var timeout = null;
26        return function () {
27            var args = arguments;
28            var ctx = this;
29            if (!timeout) {
30                timeout = setTimeout(function () {
31                    callback.apply(ctx, args);
32                    timeout = null;
33                }, delay);
34            }
35        };
36    },
37    mask: function (id, mask, pattern, characterPattern) {
38      var el = document.getElementById(id);
39      if (el) {
40          var format = function (value, mask, pattern, characterPattern) {
41              var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g"));
42              var count = 0;
43
44              var formatted = '';
45              for (var i = 0; i < mask.length; i++) {
46                  const c = mask[i];
47                  if (chars && chars[count]) {
48                      if (/\*/.test(c)) {
49                          formatted += chars[count];
50                          count++;
51                      } else {
52                          formatted += c;
53                      }
54                  }
55              }
56              return formatted;
57          }
58          el.value = format(el.value, mask, pattern, characterPattern);
59      }
60  },
61  addContextMenu: function (id, ref) {
62     var el = document.getElementById(id);
63     if (el) {
64        var handler = function (e) {
65            e.stopPropagation();
66            e.preventDefault();
67            ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu',
68                {
69                    ClientX: e.clientX,
70                    ClientY: e.clientY,
71                    ScreenX: e.screenX,
72                    ScreenY: e.screenY,
73                    AltKey: e.altKey,
74                    ShiftKey: e.shiftKey,
75                    CtrlKey: e.ctrlKey,
76                    MetaKey: e.metaKey,
77                    Button: e.button,
78                    Buttons: e.buttons,
79                });
80            return false;
81        };
82        Radzen[id + 'contextmenu'] = handler;
83        el.addEventListener('contextmenu', handler, false);
84     }
85  },
86  addMouseEnter: function (id, ref) {
87     var el = document.getElementById(id);
88     if (el) {
89        var handler = function (e) {
90            ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter');
91        };
92        Radzen[id + 'mouseenter'] = handler;
93        el.addEventListener('mouseenter', handler, false);
94     }
95  },
96  addMouseLeave: function (id, ref) {
97     var el = document.getElementById(id);
98     if (el) {
99        var handler = function (e) {
100            ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');;
101        };
102        Radzen[id + 'mouseleave'] = handler;
103        el.addEventListener('mouseleave', handler, false);
104     }
105  },
106  removeContextMenu: function (id) {
107      var el = document.getElementById(id);
108      if (el && Radzen[id + 'contextmenu']) {
109          el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']);
110      }
111  },
112  removeMouseEnter: function (id) {
113      var el = document.getElementById(id);
114      if (el && Radzen[id + 'mouseenter']) {
115          el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']);
116      }
117  },
118  removeMouseLeave: function (id) {
119      var el = document.getElementById(id);
120      if (el && Radzen[id + 'mouseleave']) {
121          el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']);
122      }
123  },
124  adjustDataGridHeader: function (scrollableHeader, scrollableBody) {
125    if (scrollableHeader && scrollableBody) {
126      scrollableHeader.style.cssText =
127        scrollableBody.clientHeight < scrollableBody.scrollHeight
128          ? 'margin-left:0px;padding-right: ' +
129            (scrollableBody.offsetWidth - scrollableBody.clientWidth) +
130            'px'
131          : 'margin-left:0px;';
132    }
133  },
134  preventDefaultAndStopPropagation: function (e) {
135    e.preventDefault();
136    e.stopPropagation();
137  },
138  preventArrows: function (el) {
139    var preventDefault = function (e) {
140      if (e.keyCode === 38 || e.keyCode === 40) {
141        e.preventDefault();
142        return false;
143      }
144    };
145    if (el) {
146       el.addEventListener('keydown', preventDefault, false);
147    }
148  },
149  selectTab: function (id, index) {
150    var el = document.getElementById(id);
151    if (el && el.parentNode && el.parentNode.previousElementSibling) {
152        var count = el.parentNode.children.length;
153        for (var i = 0; i < count; i++) {
154            var content = el.parentNode.children[i];
155            if (content) {
156                content.style.display = i == index ? '' : 'none';
157            }
158            var header = el.parentNode.previousElementSibling.children[i];
159            if (header) {
160                if (i == index) {
161                    header.classList.add('rz-tabview-selected');
162                    header.classList.add('rz-state-focused');
163                }
164                else {
165                    header.classList.remove('rz-tabview-selected');
166                    header.classList.remove('rz-state-focused');
167                }
168            }
169        }
170    }
171  },
172  loadGoogleMaps: function (defaultView, apiKey, resolve, reject) {
173    resolveCallbacks.push(resolve);
174    rejectCallbacks.push(reject);
175
176    if (defaultView['rz_map_init']) {
177      return;
178    }
179
180    defaultView['rz_map_init'] = function () {
181      for (var i = 0;

181 i < resolveCallbacks.length; i++) {
182        resolveCallbacks[i](defaultView.google);
183      }
184    };
185
186    var document = defaultView.document;
187    var script = document.createElement('script');
188
189    script.src =
190      'https://maps.googleapis.com/maps/api/js?' +
191      (apiKey ? 'key=' + apiKey + '&' : '') +
192      'callback=rz_map_init';
193
194    script.async = true;
195    script.defer = true;
196    script.onerror = function (err) {
197      for (var i = 0; i < rejectCallbacks.length; i++) {
198        rejectCallbacks[i](err);
199      }
200    };
201
202    document.body.appendChild(script);
203  },
204  createMap: function (wrapper, ref, id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate) {
205    var api = function () {
206      var defaultView = document.defaultView;
207
208      return new Promise(function (resolve, reject) {
209        if (defaultView.google && defaultView.google.maps) {
210          return resolve(defaultView.google);
211        }
212
213        Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject);
214      });
215    };
216
217    api().then(function (google) {
218      Radzen[id] = ref;
219      Radzen[id].google = google;
220
221      Radzen[id].instance = new google.maps.Map(wrapper, {
222        center: center,
223        zoom: zoom
224      });
225
226      Radzen[id].instance.addListener('click', function (e) {
227        Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMapClick', {
228          Position: {Lat: e.latLng.lat(), Lng: e.latLng.lng()}
229        });
230      });
231
232      Radzen.updateMap(id, zoom, center, markers, options, fitBoundsToMarkersOnUpdate);
233    });
234  },
235  updateMap: function (id, zoom, center, markers, options, fitBoundsToMarkersOnUpdate) {
236    var api = function () {
237        var defaultView = document.defaultView;
238
239        return new Promise(function (resolve, reject) {
240            if (defaultView.google && defaultView.google.maps) {
241                return resolve(defaultView.google);
242            }
243
244            Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject);
245        });
246    };
247    api().then(function (google) {
248        let markerBounds = new google.maps.LatLngBounds();
249
250        if (Radzen[id] && Radzen[id].instance) {
251            if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) {
252                for (var i = 0; i < Radzen[id].instance.markers.length; i++) {
253                    Radzen[id].instance.markers[i].setMap(null);
254                }
255            }
256
257            if (markers) {
258                Radzen[id].instance.markers = [];
259
260                markers.forEach(function (m) {
261                    var marker = new this.google.maps.Marker({
262                        position: m.position,
263                        title: m.title,
264                        label: m.label
265                    });
266
267                    marker.addListener('click', function (e) {
268                        Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', {
269                            Title: marker.title,
270                            Label: marker.label,
271                            Position: marker.position
272                        });
273                    });
274
275                    marker.setMap(Radzen[id].instance);
276
277                    Radzen[id].instance.markers.push(marker);
278
279                        markerBounds.extend(marker.position);
280                });
281            }
282
283            if (zoom) {
284                Radzen[id].instance.setZoom(zoom);
285                }
286
287            if (center) {
288                Radzen[id].instance.setCenter(center);
289            }
290
291            if (options) {
292                Radzen[id].instance.setOptions(options);
293            }
294
295            if (markers && fitBoundsToMarkersOnUpdate) {
296                Radzen[id].instance.fitBounds(markerBounds);
297            }
298        }
299    });
300  },
301  destroyMap: function (id) {
302    if (Radzen[id].instance) {
303      delete Radzen[id].instance;
304    }
305  },
306 focusSecurityCode: function (el) {
307    if (!el) return;
308    var firstInput = el.querySelector('.rz-security-code-input');
309    if (firstInput) {
310        setTimeout(function () { firstInput.focus() }, 500);
311    }
312 },
313  destroySecurityCode: function (id, el) {
314    if (!Radzen[id]) return;
315
316    var inputs = el.getElementsByTagName('input');
317
318    if (Radzen[id].keyPress && Radzen[id].paste) {
319        for (var i = 0; i < inputs.length; i++) {
320            inputs[i].removeEventListener('keypress', Radzen[id].keyPress);
321            inputs[i].removeEventListener('paste', Radzen[id].paste);
322        }
323        delete Radzen[id].keyPress;
324        delete Radzen[id].paste;
325    }
326
327    Radzen[id] = null;
328  },
329  createSecurityCode: function (id, ref, el, isNumber) {
330      if (!el || !ref) return;
331
332      var hidden = el.querySelector('input[type="hidden"]');
333      var inputs = [...el.querySelectorAll('.rz-security-code-input')];
334
335      Radzen[id] = {};
336
337      Radzen[id].paste = function (e) {
338          if (e.clipboardData) {
339              var value = e.clipboardData.getData('text');
340
341              if (value) {
342                  for (var i = 0; i < value.length; i++) {
343                      if (isNumber && isNaN(+value[i])) {
344                          continue;
345                      }
346                      inputs[i].value = value[i];
347                  }
348
349                  var code = inputs.map(i => i.value).join('').trim();
350                  hidden.value = code;
351
352                  ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code);
353
354                  inputs[inputs.length - 1].focus();
355              }
356
357              e.preventDefault();
358          }
359      }
360      Radzen[id].keyPress = function (e) {
361          var ch = String.fromCharCode(e.charCode);
362
363          if (e.metaKey ||
364              e.ctrlKey ||
365              e.keyCode == 9 ||
366              e.keyCode == 8 ||
367              e.keyCode == 13
368          ) {
369              return;
370          }
371
372          if (isNumber && (e.which < 48 || e.which > 57)) {
373              e.preventDefault();
374              return;
375          }
376
377          if (e.currentTarget.value == ch) {
378              return;
379          }
380
381          e.currentTarget.value = ch;
382
383          var value = inputs.map(i => i.value).join('').trim();
384          hidden.value = value;
385
386          ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value);
387

388          var index = inputs.indexOf(e.currentTarget);
389          if (index < inputs.length - 1) {
390              inputs[index + 1].focus();
391          }
392      }
393
394      for (var i = 0; i < inputs.length; i++) {
395          inputs[i].addEventListener('keypress', Radzen[id].keyPress);
396          inputs[i].addEventListener('paste', Radzen[id].paste);
397      }
398  },
399  createSlider: function (
400    id,
401    slider,
402    parent,
403    range,
404    minHandle,
405    maxHandle,
406    min,
407    max,
408    value,
409    step
410  ) {
411    Radzen[id] = {};
412    Radzen[id].mouseMoveHandler = function (e) {
413      if (!slider.canChange) return;
414      e.preventDefault();
415      var handle = slider.isMin ? minHandle : maxHandle;
416      var offsetX =
417        e.targetTouches && e.targetTouches[0]
418          ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
419          : e.pageX - handle.getBoundingClientRect().left;
420      var percent = (handle.offsetLeft + offsetX) / parent.offsetWidth;
421
422      if (percent > 1) {
423          percent = 1;
424      } else if (percent < 0) {
425          percent = 0;
426      }
427
428      var newValue = percent * (max - min) + min;
429
430      if (
431        slider.canChange &&
432        newValue >= min &&
433        newValue <= max
434      ) {
435        slider.invokeMethodAsync(
436          'RadzenSlider.OnValueChange',
437          newValue,
438          !!slider.isMin
439        );
440      }
441    };
442
443    Radzen[id].mouseDownHandler = function (e) {
444      if (parent.classList.contains('rz-state-disabled')) return;
445      if (minHandle == e.target || maxHandle == e.target) {
446        slider.canChange = true;
447        slider.isMin = minHandle == e.target;
448      } else {
449        var offsetX =
450          e.targetTouches && e.targetTouches[0]
451            ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
452            : e.offsetX;
453        var percent = offsetX / parent.offsetWidth;
454        var newValue = percent * max;
455        var oldValue = range ? value[slider.isMin ? 0 : 1] : value;
456        if (newValue >= min && newValue <= max && newValue != oldValue) {
457          slider.invokeMethodAsync(
458            'RadzenSlider.OnValueChange',
459            newValue,
460            !!slider.isMin
461          );
462        }
463      }
464    };
465
466    Radzen[id].mouseUpHandler = function (e) {
467      slider.canChange = false;
468    };
469
470    document.addEventListener('mousemove', Radzen[id].mouseMoveHandler);
471    document.addEventListener('touchmove', Radzen[id].mouseMoveHandler, {
472      passive: false, capture: true
473    });
474
475    document.addEventListener('mouseup', Radzen[id].mouseUpHandler);
476    document.addEventListener('touchend', Radzen[id].mouseUpHandler, {
477      passive: true
478    });
479
480    parent.addEventListener('mousedown', Radzen[id].mouseDownHandler);
481    parent.addEventListener('touchstart', Radzen[id].mouseDownHandler, {
482      passive: true
483    });
484  },
485  destroySlider: function (id, parent) {
486    if (!Radzen[id]) return;
487
488    if (Radzen[id].mouseMoveHandler) {
489      document.removeEventListener('mousemove', Radzen[id].mouseMoveHandler);
490      document.removeEventListener('touchmove', Radzen[id].mouseMoveHandler);
491      delete Radzen[id].mouseMoveHandler;
492    }
493    if (Radzen[id].mouseUpHandler) {
494      document.removeEventListener('mouseup', Radzen[id].mouseUpHandler);
495      document.removeEventListener('touchend', Radzen[id].mouseUpHandler);
496      delete Radzen[id].mouseUpHandler;
497    }
498    if (Radzen[id].mouseDownHandler) {
499      parent.removeEventListener('mousedown', Radzen[id].mouseDownHandler);
500      parent.removeEventListener('touchstart', Radzen[id].mouseDownHandler);
501      delete Radzen[id].mouseDownHandler;
502    }
503
504    Radzen[id] = null;
505  },
506  prepareDrag: function (el) {
507    if (el) {
508        el.ondragover = function (e) { e.preventDefault(); };
509        el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); };
510    }
511  },
512  focusElement: function (elementId) {
513    var el = document.getElementById(elementId);
514    if (el) {
515      el.focus();
516    }
517  },
518  scrollIntoViewIfNeeded: function (ref, selector) {
519    var el = selector ? ref.getElementsByClassName(selector)[0] : ref;
520    if (el && el.scrollIntoViewIfNeeded) {
521        el.scrollIntoViewIfNeeded();
522    } else if (el && el.scrollIntoView) {
523        el.scrollIntoView();
524    }
525  },
526  selectListItem: function (input, ul, index) {
527    if (!input || !ul) return;
528
529    var childNodes = ul.getElementsByTagName('LI');
530
531    var highlighted = ul.querySelectorAll('.rz-state-highlight');
532    if (highlighted.length) {
533      for (var i = 0; i < highlighted.length; i++) {
534        highlighted[i].classList.remove('rz-state-highlight');
535      }
536    }
537
538    ul.nextSelectedIndex = index;
539
540    if (
541      ul.nextSelectedIndex >= 0 &&
542      ul.nextSelectedIndex <= childNodes.length - 1
543    ) {
544      childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight');
545      childNodes[ul.nextSelectedIndex].scrollIntoView({block:'nearest'});
546    }
547  },
548  focusListItem: function (input, ul, isDown, startIndex) {
549    if (!input || !ul) return;
550    var childNodes = ul.getElementsByTagName('LI');
551
552    if (!childNodes || childNodes.length == 0) return;
553
554    if (startIndex == undefined || startIndex == null) {
555      startIndex = -1;
556    }
557
558    ul.nextSelectedIndex = startIndex;
559    if (isDown) {
560        while (ul.nextSelectedIndex < childNodes.length - 1) {
561            ul.nextSelectedIndex++;
562            if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled'))
563                break;
564        }
565    } else {
566        while (ul.nextSelectedIndex > 0) {
567            ul.nextSelectedIndex--;
568            if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled'))
569                break;
570        }
571    }
572
573    var highlighted = ul.querySelectorAll('.rz-state-highlight');
574    if (highlighted.length) {
575      for (var i = 0; i < highlighted.length; i++) {
576        highlighted[i].classList.remove('rz-state-highlight');
577      }
578    }
579
580    if (
581      ul.nextSelectedIndex >= 0 &&
582      ul.nextSelectedIndex <= childNodes.length - 1
583    ) {
584      childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight');
585      Radzen.scrollIntoViewIfNeeded(childNodes[ul.nextSelectedIndex]);
586    }
587
588    return ul.nextSelectedIndex;
589  },
590  clearFocusedHeaderCell: function (gridId) {
591    var grid = document.getElementById(gridId);
592    if (!grid) return;
593
594    var table = grid.querySelector('.rz-grid-table');
595    var thead = table.getElementsByTagName("thead")[0];
596    var highlightedCells = thead.querySelectorAll('.rz-state-focused');
597    if (highlightedCells.length) {
598        for (var i = 0; i < highlightedCells.length; i++) {
599            highlightedCells[i].classList.remove('rz-state-focused');
600        }
601    }
602  },
603  focusTableRow: function (gridId, key, rowIndex, cellIndex, isVirtual) {
604    var grid = document.getElementById(gridId);
605    if (!grid) return;
606
607    var table = grid.querySelector('.rz-grid-table');
608    var tbody = table.tBodies[0];
609    var thead = table.tHead;

610
611    var rows = (cellIndex != null && thead && thead.rows && thead.rows.length ? [...thead.rows] : []).concat(tbody && tbody.rows && tbody.rows.length ? [...tbody.rows] : []);
612
613    if (isVirtual && (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown' || key == 'Home' || key == 'End')) {
614        if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) {
615            var highlightedCells = thead.querySelectorAll('.rz-state-focused');
616            if (highlightedCells.length) {
617                for (var i = 0; i < highlightedCells.length; i++) {
618                    highlightedCells[i].classList.remove('rz-state-focused');
619                }
620            }
621        }
622        if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') {
623            var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40;
624            var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1;
625            table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight));
626        }
627        else {
628            table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight;
629        }
630    }
631
632    table.nextSelectedIndex = rowIndex || 0;
633    table.nextSelectedCellIndex = cellIndex || 0;
634
635    if (key == 'ArrowDown') {
636        while (table.nextSelectedIndex < rows.length - 1) {
637            table.nextSelectedIndex++;
638            if (!rows[table.nextSelectedIndex].classList.contains('rz-state-disabled'))
639                break;
640        }
641    } else if (key == 'ArrowUp') {
642        while (table.nextSelectedIndex > 0) {
643            table.nextSelectedIndex--;
644            if (!rows[table.nextSelectedIndex].classList.contains('rz-state-disabled'))
645                break;
646        }
647    } else if (key == 'ArrowRight') {
648        while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) {
649            table.nextSelectedCellIndex++;
650            if (!rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled'))
651                break;
652        }
653    } else if (key == 'ArrowLeft') {
654        while (table.nextSelectedCellIndex > 0) {
655            table.nextSelectedCellIndex--;
656            if (!rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled'))
657                break;
658        }
659    } else if (isVirtual && (key == 'PageDown' || key == 'End')) {
660        table.nextSelectedIndex = rows.length - 1;
661    } else if (isVirtual && (key == 'PageUp' || key == 'Home')) {
662        table.nextSelectedIndex = 1;
663    }
664
665    if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) {
666        var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused');
667        if (highlightedCells.length) {
668            for (var i = 0; i < highlightedCells.length; i++) {
669                highlightedCells[i].classList.remove('rz-state-focused');
670            }
671        }
672
673        if (
674            table.nextSelectedCellIndex >= 0 &&
675            table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1
676        ) {
677            var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex];
678
679            if (!cell.classList.contains('rz-state-focused')) {
680                cell.classList.add('rz-state-focused');
681                if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) {
682                    Radzen.scrollIntoViewIfNeeded(cell);
683                }
684            }
685        }
686    } else if (key == 'ArrowDown' || key == 'ArrowUp') {
687        var highlighted = table.querySelectorAll('.rz-state-focused');
688        if (highlighted.length) {
689            for (var i = 0; i < highlighted.length; i++) {
690                highlighted[i].classList.remove('rz-state-focused');
691            }
692        }
693
694        if (table.nextSelectedIndex >= 0 &&
695            table.nextSelectedIndex <= rows.length - 1
696        ) {
697            var row = rows[table.nextSelectedIndex];
698
699            if (!row.classList.contains('rz-state-focused')) {
700                row.classList.add('rz-state-focused');
701                if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) {
702                    Radzen.scrollIntoViewIfNeeded(row);

703                }
704            }
705        }
706    }
707
708    return [table.nextSelectedIndex, table.nextSelectedCellIndex];
709  },
710  uploadInputChange: function (e, url, auto, multiple, clear, parameterName) {
711      if (auto) {
712          Radzen.upload(e.target, url, multiple, clear, parameterName);
713          e.target.value = '';
714      } else {
715          Radzen.uploadChange(e.target);
716      }
717  },
718  uploads: function (uploadComponent, id) {
719    if (!Radzen.uploadComponents) {
720      Radzen.uploadComponents = {};
721    }
722    Radzen.uploadComponents[id] = uploadComponent;
723  },
724  uploadChange: function (fileInput) {
725    var files = [];
726    for (var i = 0; i < fileInput.files.length; i++) {
727      var file = fileInput.files[i];
728      files.push({
729        Name: file.name,
730        Size: file.size,
731        Url: URL.createObjectURL(file)
732      });
733    }
734
735    var uploadComponent =
736      Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
737    if (uploadComponent) {
738      if (uploadComponent.localFiles) {
739        // Clear any previously created preview URL(s)
740        for (var i = 0; i < uploadComponent.localFiles.length; i++) {
741          var file = uploadComponent.localFiles[i];
742          if (file.Url) {
743            URL.revokeObjectURL(file.Url);
744          }
745        }
746      }
747
748      uploadComponent.files = Array.from(fileInput.files);
749      uploadComponent.localFiles = files;
750      uploadComponent.invokeMethodAsync('RadzenUpload.OnChange', files);
751    }
752
753    for (var i = 0; i < fileInput.files.length; i++) {
754      var file = fileInput.files[i];
755      if (file.Url) {
756        URL.revokeObjectURL(file.Url);
757      }
758    }
759  },
760  removeFileFromUpload: function (fileInput, name) {
761    var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
762    if (!uploadComponent) return;
763    var file = uploadComponent.files.find(function (f) { return f.name == name; })
764    if (!file) { return; }
765    var localFile = uploadComponent.localFiles.find(function (f) { return f.Name == name; });
766    if (localFile) {
767      URL.revokeObjectURL(localFile.Url);
768    }
769    var index = uploadComponent.files.indexOf(file)
770    if (index != -1) {
771        uploadComponent.files.splice(index, 1);
772    }
773    fileInput.value = '';
774  },
775  removeFileFromFileInput: function (fileInput) {
776    fileInput.value = '';
777  },
778  upload: function (fileInput, url, multiple, clear, parameterName) {
779    var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
780    if (!uploadComponent) { return; }
781    if (!uploadComponent.files || clear) {
782        uploadComponent.files = Array.from(fileInput.files);
783    }
784    var data = new FormData();
785    var files = [];
786    var cancelled = false;
787    for (var i = 0; i < uploadComponent.files.length; i++) {
788      var file = uploadComponent.files[i];
789      data.append(parameterName || (multiple ? 'files' : 'file'), file, file.name);
790      files.push({Name: file.name, Size: file.size});
791    }
792    var xhr = new XMLHttpRequest();
793    xhr.withCredentials = true;
794    xhr.upload.onprogress = function (e) {
795      if (e.lengthComputable) {
796        var uploadComponent =
797          Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
798        if (uploadComponent) {
799          var progress = parseInt((e.loaded / e.total) * 100);
800          uploadComponent.invokeMethodAsync(
801            'RadzenUpload.OnProgress',
802            progress,
803            e.loaded,
804            e.total,
805            files,
806            cancelled
807          ).then(function (cancel) {
808              if (cancel) {
809                  cancelled = true;
810                  xhr.abort();
811              }
812          });
813        }
814      }
815    };
816    xhr.onreadystatechange = function (e) {
817      if (xhr.readyState === XMLHttpRequest.DONE) {
818        var status = xhr.status;
819        var uploadComponent =
820          Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id];
821        if (uploadComponent) {
822          if (status === 0 || (status >= 200 && status < 400)) {
823            uploadComponent.invokeMethodAsync(
824              'RadzenUpload.OnComplete',
825                xhr.responseText,
826                cancelled
827            );
828          } else {
829            uploadComponent.invokeMethodAsync(
830              'RadzenUpload.OnError',
831              xhr.responseText
832            );
833          }
834        }
835      }
836    };
837    uploadComponent.invokeMethodAsync('GetHeaders').then(function (headers) {
838      xhr.open('POST', url, true);
839      for (var name in headers) {
840        xhr.setRequestHeader(name, headers[name]);
841      }
842      xhr.send(data);
843    });

844  },
845  getCookie: function (name) {
846    var value = '; ' + decodeURIComponent(document.cookie);
847    var parts = value.split('; ' + name + '=');
848    if (parts.length == 2) return parts.pop().split(';').shift();
849  },
850  getCulture: function () {
851    var cultureCookie = Radzen.getCookie('.AspNetCore.Culture');
852    var uiCulture = cultureCookie
853      ? cultureCookie.split('|').pop().split('=').pop()
854      : null;
855    return uiCulture || 'en-US';
856  },
857  numericOnPaste: function (e, min, max) {
858    if (e.clipboardData) {
859      var value = e.clipboardData.getData('text');
860
861      if (value && !isNaN(+value)) {
862        var numericValue = +value;
863        if (min != null && numericValue >= min) {
864            return;
865        }
866        if (max != null && numericValue <= max) {
867            return;
868        }
869      }
870
871      e.preventDefault();
872    }
873  },
874  numericOnInput: function (e, min, max, isNullable) {
875      var value = e.target.value;
876
877      if (!isNullable && value == '' && min != null) {
878          e.target.value = min;
879      }
880
881      if (value && !isNaN(+value)) {
882        var numericValue = +value;
883        if (min != null && !isNaN(+min) && numericValue < min) {
884            e.target.value = min;
885        }
886        if (max != null && !isNaN(+max) && numericValue > max) {
887            e.target.value = max;
888        }
889      }
890  },
891  numericKeyPress: function (e, isInteger, decimalSeparator) {
892    if (
893      e.metaKey ||
894      e.ctrlKey ||
895      e.keyCode == 9 ||
896      e.keyCode == 8 ||
897      e.keyCode == 13
898    ) {
899      return;
900      }
901
902    if (e.code === 'NumpadDecimal') {
903      e.target.value += decimalSeparator;
904      e.preventDefault();
905      return;
906    }
907
908    var ch = String.fromCharCode(e.charCode);
909
910    if ((isInteger ? /^[-\d]$/ : /^[-\d,.]$/).test(ch)) {
911      return;
912    }
913
914    e.preventDefault();
915  },
916  openContextMenu: function (x,y,id, instance, callback) {
917    Radzen.closePopup(id);
918
919    Radzen.openPopup(null, id, false, null, x, y, instance, callback);
920
921    setTimeout(function () {
922        var popup = document.getElementById(id);
923        if (popup) {
924            var menu = popup.querySelector('.rz-menu');
925            if (menu) {
926                menu.focus();
927            }
928        }
929    }, 500);
930  },
931  openTooltip: function (target, id, delay, duration, position, closeTooltipOnDocumentClick, instance, callback) {
932    Radzen.closeTooltip(id);
933
934    if (delay) {
935        Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick);
936    } else {
937        Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick);
938    }
939
940    if (duration) {
941      Radzen[id + 'duration'] = setTimeout(Radzen.closePopup, duration, id, instance, callback);
942    }
943  },
944  closeTooltip(id) {
945    Radzen.closePopup(id);
946
947    if (Radzen[id + 'delay']) {
948        clearTimeout(Radzen[id + 'delay']);
949    }
950
951    if (Radzen[id + 'duration']) {
952        clearTimeout(Radzen[id + 'duration']);
953    }
954  },
955  destroyDatePicker(id) {
956      var el = document.getElementById(id);
957      if (!el) return;
958
959      var button = el.querySelector('.rz-datepicker-trigger');
960      if (button) {
961          button.onclick = null;
962      }
963      var input = el.querySelector('.rz-inputtext');
964      if (input) {
965          input.onclick = null;
966      }
967  },
968  createDatePicker(el, popupId) {
969      var handler = function (e, condition) {
970          if (condition) {
971              Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false);
972          }
973      };
974
975      var button = el.querySelector('.rz-datepicker-trigger');
976      if (button) {
977          button.onclick = function (e) {
978              handler(e, !e.currentTarget.classList.contains('rz-state-disabled'));
979          };
980      }
981      var input = el.querySelector('.rz-inputtext');
982      if (input) {
983          input.onclick = function (e) {
984              handler(e, e.currentTarget.classList.contains('rz-readonly'));
985          };
986      }
987  },
988  findPopup: function (id) {
989    var popups = [];
990    for (var i = 0; i < document.body.children.length; i++) {
991      if (document.body.children[i].id == id) {
992        popups.push(document.body.children[i]);
993      }
994    }
995    return popups;
996  },
997  repositionPopup: function (parent, id) {
998      var popup = document.getElementById(id);
999      if (!popup) return;
1000
1001      var rect = popup.getBoundingClientRect();
1002      var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 };
1003
1004      if (/Edge/.test(navigator.userAgent)) {
1005          var scrollTop = document.body.scrollTop;
1006      } else {
1007          var scrollTop = document.documentElement.scrollTop;
1008      }
1009
1010      var top = parentRect.bottom + scrollTop;
1011
1012      if (top + rect.height > window.innerHeight && parentRect.top > rect.height) {
1013          top = parentRect.top - rect.height + scrollTop;
1014      }
1015
1016      popup.style.top = top + 'px';
1017  },
1018  openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false) {
1019    var popup = document.getElementById(id);
1020    if (!popup) return;
1021
1022    Radzen.activeElement = document.activeElement;
1023
1024    var parentRect = parent ? parent.getBoundingClientRect() : { top: y || 0, bottom: 0, left: x || 0, right: 0, width: 0, height: 0 };
1025
1026    if (/Edge/.test(navigator.userAgent)) {
1027      var scrollLeft = document.body.scrollLeft;
1028      var scrollTop = document.body.scrollTop;
1029    } else {
1030      var scrollLeft = document.documentElement.scrollLeft;
1031      var scrollTop = document.documentElement.scrollTop;
1032    }
1033
1034    var top = y ? y : parentRect.bottom;
1035    var left = x ? x : parentRect.left;
1036
1037      if (syncWidth) {
1038        popup.style.width = parentRect.width + 'px';
1039        if (!popup.style.minWidth) {
1040            popup.minWidth = true;
1041            popup.style.minWidth = parentRect.width + 'px';
1042        }
1043    }
1044
1045    if (window.chrome) {
1046        var closestFrozenCell = popup.closest('.rz-frozen-cell');
1047        if (closestFrozenCell) {
1048            Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left };
1049            closestFrozenCell.style.left = '';
1050        }
1051    }
1052
1053    popup.style.display = 'block';
1054
1055    var rect = popup.getBoundingClientRect();
1056
1057    var smartPosition = !position || position == 'bottom';
1058
1059    if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) {
1060      top = parentRect.top - rect.height;
1061
1062      if (position) {
1063        top = top - 40;
1064        var tooltipContent = popup.children[0];
1065        var tooltipContentClassName = 'rz-' + position + '-tooltip-content';
1066        if (tooltipContent.classList.contains(tooltipContentClassName)) {
1067          tooltipContent.classList.remove(tooltipContentClassName);
1068          tooltipContent.classList.add('rz-top-tooltip-content');
1069        }
1070      }
1071    }
1072
1073    if (smartPosition && left + rect.width > window.innerWidth && window.innerWidth > rect.width) {
1074      left = window.innerWidth - rect.width;
1075
1076      if (position) {
1077        var tooltipContent = popup.children[0];
1078        var tooltipContentClassName = 'rz-' + position + '-tooltip-content';
1079        if (tooltipContent.classList.contains(tooltipContentClassName)) {
1080          tooltipContent.classList.remove(tooltipContentClassName);
1081          tooltipContent.classList.add('rz-left-tooltip-content');
1082          left = parentRect.left - rect.width - 5;
1083          top = parentRect.top - parentRect.height;
1084        }
1085      }
1086    }
1087
1088    if (smartPosition) {
1089      if (position) {
1090        top = top + 20;
1091      }
1092    }
1093
1094    if (position == 'left') {
1095      left = parentRect.left - rect.width - 5;
1096      top =  parentRect.top;
1097    }
1098
1099    if (position == 'right') {
1100      left = parentRect.right + 10;
1101      top = parentRect.top;
1102    }
1103
1104    if (position == 'top') {
1105      top = parentRect.top - rect.height + 5;
1106      left = parentRect.left;
1107    }
1108
1109    popup.style.zIndex = 2000;
1110    popup.style.left = left + scrollLeft + 'px';
1111    popup.style.top = top + scrollTop + 'px';
1112
1113    if (!popup.classList.contains('rz-overlaypanel')) {
1114        popup.classList.add('rz-popup');
1115    }
1116
1117    Radzen[id] = function (e) {
1118        var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1];
1119        var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup;
1120
1121        if (lastPopup) {
1122            currentPopup.instance = lastPopup.instance;
1123            currentPopup.callback = lastPopup.callback;
1124        }
1125
1126        if(e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return;
1127        if (!/Android/i.test(navigator.userAgent) &&
1128            !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') {
1129            Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1130            return;
1131        }
1132
1133        var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link'));
1134        if (closestLink && closestLink.closest && closestLink.closest('a')) {
1135            if (Radzen.closeAllPopups) {
1136                Radzen.closeAllPopups();
1137            }
1138        }
1139        if (parent) {
1140          if (e.type == 'mousedown' && !parent.contains(e.target) && !currentPopup.contains(e.target)) {
1141              Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1142          }
1143        } else {
1144          if (!currentPopup.contains(e.target)) {
1145              Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e);
1146          }
1147        }
1148    };
1149
1150    if (!Radzen.popups) {
1151        Radzen.popups = [];
1152    }
1153
1154    Radzen.popups.push({ id, instance, callback });
1155

1156    document.body.appendChild(popup);
1157    document.removeEventListener('mousedown', Radzen[id]);
1158    document.addEventListener('mousedown', Radzen[id]);
1159    window.removeEventListener('resize', Radzen[id]);
1160    window.addEventListener('resize', Radzen[id]);
1161
1162    var p = parent;
1163    while (p && p != document.body) {
1164        if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) {
1165            p.removeEventListener('scroll', Radzen.closeAllPopups);
1166            p.addEventListener('scroll', Radzen.closeAllPopups);
1167        }
1168        p = p.parentElement;
1169    }
1170
1171    if (!parent) {
1172        document.removeEventListener('contextmenu', Radzen[id]);
1173        document.addEventListener('contextmenu', Radzen[id]);
1174    }
1175
1176    if (autoFocusFirstElement) {
1177        setTimeout(function () {
1178            popup.removeEventListener('keydown', Radzen.focusTrap);
1179            popup.addEventListener('keydown', Radzen.focusTrap);
1180
1181            var focusable = Radzen.getFocusableElements(popup);
1182            var firstFocusable = focusable[0];
1183            if (firstFocusable) {
1184                firstFocusable.focus();
1185            }
1186        }, 500);
1187    }
1188  },
1189  closeAllPopups: function (e, id) {
1190    if (!Radzen.popups) return;
1191    var el = e && e.target || id && documentElement.getElementById(id);
1192    var popups = Radzen.popups;
1193      for (var i = 0; i < popups.length; i++) {
1194        var p = popups[i];
1195
1196        var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel'));
1197        if (closestPopup && closestPopup != p) {
1198            return;
1199        }
1200
1201        Radzen.closePopup(p.id, p.instance, p.callback, e);
1202    }
1203    Radzen.popups = [];
1204  },
1205  closePopup: function (id, instance, callback, e) {
1206    var popup = document.getElementById(id);
1207    if (!popup) return;
1208    if (popup.style.display == 'none') {
1209        var popups = Radzen.findPopup(id);
1210        if (popups.length > 1) {
1211            for (var i = 0; i < popups.length; i++) {
1212                if (popups[i].style.display == 'none') {
1213                    popups[i].parentNode.removeChild(popups[i]);
1214                } else {
1215                    popup = popups[i];
1216                }
1217            }
1218        } else {
1219            return;
1220        }
1221    }
1222
1223    if (popup) {
1224      if (popup.minWidth) {
1225          popup.style.minWidth = '';
1226      }
1227
1228      if (window.chrome && Radzen[id + 'FZL']) {
1229        Radzen[id + 'FZL'].cell.style.left = Radzen[id + 'FZL'].left;
1230        Radzen[id + 'FZL'] = null;
1231      }
1232
1233      popup.style.display = 'none';
1234    }
1235    document.removeEventListener('mousedown', Radzen[id]);
1236    window.removeEventListener('resize', Radzen[id]);
1237    Radzen[id] = null;
1238
1239    if (instance) {
1240      instance.invokeMethodAsync(callback);
1241    }
1242    Radzen.popups = (Radzen.popups || []).filter(function (obj) {
1243        return obj.id !== id;
1244    });
1245
1246    if (Radzen.activeElement && Radzen.activeElement == document.activeElement ||
1247        Radzen.activeElement && document.activeElement == document.body ||
1248        Radzen.activeElement && document.activeElement &&
1249            (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) {
1250        setTimeout(function () {
1251            if (e && e.target && e.target.tabIndex != -1) {
1252                Radzen.activeElement = e.target;
1253            }
1254            if (Radzen.activeElement) {
1255               Radzen.activeElement.focus();
1256            }
1257            Radzen.activeElement = null;
1258        }, 100);
1259    }
1260  },
1261  popupOpened: function (id) {
1262    var popup = document.getElementById(id);
1263    if (popup) {
1264        return popup.style.display != 'none';
1265    }
1266    return false;
1267  },
1268  togglePopup: function (parent, id, syncWidth, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false) {
1269    var popup = document.getElementById(id);
1270    if (!popup) return;
1271    if (popup.style.display == 'block') {
1272      Radzen.closePopup(id, instance, callback);
1273    } else {
1274      Radzen.openPopup(parent, id, syncWidth, null, null, null, instance, callback, closeOnDocumentClick, autoFocusFirstElement);
1275    }
1276  },
1277  destroyPopup: function (id) {
1278    var popup = document.getElementById(id);
1279    if (popup) {
1280      popup.parentNode.removeChild(popup);
1281    }
1282    document.removeEventListener('mousedown', Radzen[id]);
1283  },
1284  scrollDataGrid: function (e) {
1285    var scrollLeft =
1286      (e.target.scrollLeft ? '-' + e.target.scrollLeft : 0) + 'px';
1287
1288      e.target.previousElementSibling.style.marginLeft = scrollLeft;
1289      e.target.previousElementSibling.firstElementChild.style.paddingRight =
1290          e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
1291
1292    if (e.target.nextElementSibling) {
1293        e.target.nextElementSibling.style.marginLeft = scrollLeft;
1294        e.target.nextElementSibling.firstElementChild.style.paddingRight =
1295            e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
1296    }
1297
1298    for (var i = 0; i < document.body.children.length; i++) {
1299        if (document.body.children[i].classList.contains('rz-overlaypanel')) {
1300            document.body.children[i].style.display = 'none';
1301        }
1302    }
1303  },
1304  openDialog: function (options, dialogService, dialog) {
1305    if (Radzen.closeAllPopups) {
1306        Radzen.closeAllPopups();
1307    }
1308    Radzen.dialogService = dialogService;
1309    if (
1310      document.documentElement.scrollHeight >
1311      document.documentElement.clientHeight
1312    ) {
1313      document.body.classList.add('no-scroll');
1314    }
1315
1316    setTimeout(function () {
1317        var dialogs = document.querySelectorAll('.rz-dialog-content');
1318        if (dialogs.length == 0) return;
1319        var lastDialog = dialogs[dialogs.length - 1];
1320
1321        if (lastDialog) {
1322            lastDialog.removeEventListener('keydown', Radzen.focusTrap);
1323            lastDialog.addEventListener('keydown', Radzen.focusTrap);
1324
1325            if (options.resizable) {
1326                dialog.offsetWidth = lastDialog.parentElement.offsetWidth;
1327                dialog.offsetHeight = lastDialog.parentElement.offsetHeight;
1328                var dialogResize = function (e) {
1329                    if (!dialog) return;
1330                    if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) {
1331
1332                        dialog.offsetWidth = e[0].target.offsetWidth;
1333                        dialog.offsetHeight = e[0].target.offsetHeight;
1334
1335                        dialog.invokeMethodAsync(
1336                            'RadzenDialog.OnResize',
1337                            e[0].target.offsetWidth,
1338                            e[0].target.offsetHeight
1339                        );
1340                    }
1341                };
1342                Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement);
1343            }
1344
1345            if (options.autoFocusFirstElement) {
1346                if (lastDialog.querySelectorAll('.rz-html-editor-content').length) {
1347                    var editable = lastDialog.querySelector('.rz-html-editor-content');
1348                    if (editable) {
1349                        var selection = window.getSelection();
1350                        var range = document.createRange();
1351                        range.setStart(editable, 0);
1352                        range.setEnd(editable, 0);
1353                        selection.removeAllRanges();
1354                        selection.addRange(range);
1355                    }
1356                } else {
1357                    var focusable = Radzen.getFocusableElements(lastDialog);
1358                    var firstFocusable = focusable[0];
1359                    if (firstFocusable) {
1360                        firstFocusable.focus();
1361                    }
1362                }
1363            }
1364        }
1365    }, 500);
1366
1367    document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1368    if (options.closeDialogOnEsc) {
1369        document.addEventListener('keydown', Radzen.closePopupOrDialog);
1370    }
1371  },
1372  closeDialog: function () {
1373    Radzen.dialogResizer = null;
1374    document.body.classList.remove('no-scroll');
1375    var dialogs = document.querySelectorAll('.rz-dialog-content');
1376    if (dialogs.length <= 1) {
1377        document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1378        delete Radzen.dialogService;
1379    }
1380  },
1381  disableKeydown: function (e) {
1382      e = e || window.event;
1383      e.preventDefault();
1384  },
1385  getFocusableElements: function (element) {
1386    return [...element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]')]
1387        .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null);
1388  },
1389  focusTrap: function (e) {
1390    e = e || window.event;
1391    var isTab = false;
1392    if ("key" in e) {
1393        isTab = (e.key === "Tab");
1394    } else {
1395        isTab = (e.keyCode === 9);
1396    }
1397    if (isTab) {
1398        var focusable = Radzen.getFocusableElements(e.currentTarget);
1399        var firstFocusable = focusable[0];

1400        var lastFocusable = focusable[focusable.length - 1];
1401
1402        if (firstFocusable && e.shiftKey && document.activeElement === firstFocusable) {
1403            e.preventDefault();
1404            firstFocusable.focus();
1405        } else if (lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) {
1406            e.preventDefault();
1407            lastFocusable.focus();
1408        }
1409    }
1410  },
1411  closePopupOrDialog: function (e) {
1412      e = e || window.event;
1413      var isEscape = false;
1414      if ("key" in e) {
1415          isEscape = (e.key === "Escape" || e.key === "Esc");
1416      } else {
1417          isEscape = (e.keyCode === 27);
1418      }
1419      if (isEscape && Radzen.dialogService) {
1420          var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel');
1421          for (var i = 0; i < popups.length; i++) {
1422              if (popups[i].style.display != 'none') {
1423                  return;
1424              }
1425          }
1426
1427          Radzen.dialogService.invokeMethodAsync('DialogService.Close', null);
1428
1429          var dialogs = document.querySelectorAll('.rz-dialog-content');
1430          if (dialogs.length <= 1) {
1431              document.removeEventListener('keydown', Radzen.closePopupOrDialog);
1432              delete Radzen.dialogService;
1433              var layout = document.querySelector('.rz-layout');
1434              if (layout) {
1435                  layout.removeEventListener('keydown', Radzen.disableKeydown);
1436              }
1437          }
1438      }
1439  },
1440  getInputValue: function (arg) {
1441    var input =
1442      arg instanceof Element || arg instanceof HTMLDocument
1443        ? arg
1444        : document.getElementById(arg);
1445    return input && input.value != '' ? input.value : null;
1446  },
1447  setInputValue: function (arg, value) {
1448    var input =
1449      arg instanceof Element || arg instanceof HTMLDocument
1450        ? arg
1451        : document.getElementById(arg);
1452    if (input) {
1453      input.value = value;
1454    }
1455  },
1456  readFileAsBase64: function (fileInput, maxFileSize, maxWidth, maxHeight) {
1457    var calculateWidthAndHeight = function (img) {
1458      var width = img.width;
1459      var height = img.height;
1460      // Change the resizing logic
1461      if (width > height) {
1462        if (width > maxWidth) {
1463          height = height * (maxWidth / width);
1464          width = maxWidth;
1465        }
1466      } else {
1467        if (height > maxHeight) {
1468          width = width * (maxHeight / height);
1469          height = maxHeight;
1470        }
1471      }
1472      return { width, height };
1473    };
1474    var readAsDataURL = function (fileInput) {
1475      return new Promise(function (resolve, reject) {
1476        var reader = new FileReader();
1477        reader.onerror = function () {
1478          reader.abort();
1479          reject('Error reading file.');
1480        };
1481        reader.addEventListener(
1482          'load',
1483          function () {
1484            if (maxWidth > 0 && maxHeight > 0) {
1485              var img = document.createElement("img");
1486              img.onload = function (event) {
1487                // Dynamically create a canvas element
1488                var canvas = document.createElement("canvas");
1489                var res = calculateWidthAndHeight(img);
1490                canvas.width = res.width;
1491                canvas.height = res.height;
1492                var ctx = canvas.getContext("2d");
1493                ctx.drawImage(img, 0, 0, res.width, res.height);
1494                resolve(canvas.toDataURL(fileInput.type));
1495              }
1496              img.src = reader.result;
1497            } else {
1498              resolve(reader.result);
1499            }
1500          },
1501          false
1502          );
1503        var file = fileInput.files[0];
1504        if (!file) return;
1505        if (file.size <= maxFileSize) {
1506          reader.readAsDataURL(file);
1507        } else {
1508          reject('File too large.');
1509        }
1510      });
1511    };
1512
1513    return readAsDataURL(fileInput);
1514  },
1515  toggleMenuItem: function (target, event, defaultActive) {
1516    var item = target.closest('.rz-navigation-item');
1517
1518    var active = defaultActive != undefined ? defaultActive : !item.classList.contains('rz-navigation-item-active');
1519
1520    function toggle(active) {
1521      item.classList.toggle('rz-navigation-item-active', active);
1522
1523      target.classList.toggle('rz-navigation-item-wrapper-active', active);
1524
1525      var children = item.querySelector('.rz-navigation-menu');
1526
1527      if (children) {
1528        children.style.display = active ? '' : 'none';
1529      }
1530
1531      var icon = item.querySelector('.rz-navigation-item-icon-children');
1532
1533      if (icon) {
1534        var deg = active ? '180deg' : 0;
1535        icon.style.transform = 'rotate(' + deg + ')';
1536      }
1537    }
1538
1539    toggle(active);
1540
1541    document.removeEventListener('click', target.clickHandler);
1542
1543    target.clickHandler = function (event) {
1544      if (item.contains(event.target)) {
1545        var child = event.target.closest('.rz-navigation-item');
1546        if (child && child.querySelector('.rz-navigation-menu')) {
1547          return;
1548        }
1549      }
1550      toggle(false);
1551    }
1552
1553    document.addEventListener('click', target.clickHandler);
1554  },
1555  destroyChart: function (ref) {
1556    ref.removeEventListener('mouseleave', ref.mouseLeaveHandler);
1557    delete ref.mouseLeaveHandler;
1558    ref.removeEventListener('mouseenter', ref.mouseEnterHandler);
1559    delete ref.mouseEnterHandler;
1560    ref.removeEventListener('mousemove', ref.mouseMoveHandler);
1561    delete ref.mouseMoveHandler;
1562    ref.removeEventListener('click', ref.clickHandler);
1563    delete ref.clickHandler;
1564    this.destroyResizable(ref);
1565  },
1566  destroyGauge: function (ref) {
1567    this.destroyResizable(ref);
1568  },
1569  destroyResizable: function (ref) {
1570    if (ref.resizeObserver) {
1571      ref.resizeObserver.disconnect();
1572      delete ref.resizeObserver;
1573    }
1574    if (ref.resizeHandler) {
1575      window.removeEventListener('resize', ref.resizeHandler);
1576      delete ref.resizeHandler;
1577    }
1578  },
1579  createResizable: function (ref, instance) {
1580    ref.resizeHandler = function () {
1581      var rect = ref.getBoundingClientRect();
1582
1583      instance.invokeMethodAsync('Resize', rect.width, rect.height);
1584    };
1585
1586    if (window.ResizeObserver) {
1587      ref.resizeObserver = new ResizeObserver(ref.resizeHandler);
1588      ref.resizeObserver.observe(ref);
1589    } else {
1590      window.addEventListener('resize', ref.resizeHandler);
1591    }
1592
1593    var rect = ref.getBoundingClientRect();
1594
1595    return {width: rect.width, height: rect.height};
1596  },
1597  createChart: function (ref, instance) {
1598    var inside = false;
1599    ref.mouseMoveHandler = this.throttle(function (e) {
1600      if (inside) {
1601        if (e.target.matches('.rz-chart-tooltip-content') || e.target.closest('.rz-chart-tooltip-content')) {
1602            return
1603        }
1604        var rect = ref.getBoundingClientRect();
1605        var x = e.clientX - rect.left;
1606        var y = e.clientY - rect.top;
1607        instance.invokeMethodAsync('MouseMove', x, y);
1608     }
1609    }, 100);
1610    ref.mouseEnterHandler = function () {
1611        inside = true;
1612    };
1613    ref.mouseLeaveHandler = function () {
1614        inside = false;
1615        instance.invokeMethodAsync('MouseMove', -1, -1);
1616    };
1617    ref.clickHandler = function (e) {
1618      var rect = ref.getBoundingClientRect();
1619      var x = e.clientX - rect.left;
1620      var y = e.clientY - rect.top;
1621      if (!e.target.closest('.rz-marker')) {
1622        instance.invokeMethodAsync('Click', x, y);
1623      }
1624    };
1625
1626    ref.addEventListener('mouseenter', ref.mouseEnterHandler);
1627    ref.addEventListener('mouseleave', ref.mouseLeaveHandler);
1628    ref.addEventListener('mousemove', ref.mouseMoveHandler);
1629    ref.addEventListener('click', ref.clickHandler);
1630
1631    return this.createResizable(ref, instance);
1632  },
1633  createGauge: function (ref, instance) {
1634    return this.createResizable(ref, instance);
1635  },
1636  destroyScheduler: function (ref) {
1637    if (ref.resizeHandler) {
1638      window.removeEventListener('resize', ref.resizeHandler);
1639      delete ref.resizeHandler;
1640    }
1641  },
1642  createScheduler: function (ref, instance) {
1643    ref.resizeHandler = function () {
1644      var rect = ref.getBoundingClientRect();
1645
1646      instance.invokeMethodAsync('Resize', rect.width, rect.height);
1647    };
1648
1649    window.addEventListener('resize', ref.resizeHandler);
1650
1651    var rect = ref.getBoundingClientRect();
1652    return {width: rect.width, height: rect.height};
1653  },
1654  innerHTML: function (ref, value) {
1655    if (value != undefined) {
1656        if (ref != null) {
1657            ref.innerHTML = value;
1658        }
1659    } else {
1660      return ref.innerHTML;
1661    }
1662  },
1663  execCommand: function (ref, name, value) {
1664    if (document.activeElement != ref && ref) {
1665      ref.focus();
1666    }
1667    document.execCommand(name, false, value);
1668    return this.queryCommands(ref);
1669  },
1670  queryCommands: function (ref) {
1671    return {
1672      html: ref != null ? ref.innerHTML : null,
1673      fontName: document.queryCommandValue('fontName'),
1674      fontSize: document.queryCommandValue('fontSize'),
1675      formatBlock: document.queryCommandValue('formatBlock'),
1676      bold: document.queryCommandState('bold'),
1677      underline: document.queryCommandState('underline'),
1678      justifyRight: document.queryCommandState('justifyRight'),
1679      justifyLeft: document.queryCommandState('justifyLeft'),
1680      justifyCenter: document.queryCommandState('justifyCenter'),
1681      justifyFull: document.queryCommandState('justifyFull'),
1682      italic: document.queryCommandState('italic'),

1683      strikeThrough: document.queryCommandState('strikeThrough'),
1684      superscript: document.queryCommandState('superscript'),
1685      subscript: document.queryCommandState('subscript'),
1686      unlink: document.queryCommandEnabled('unlink'),
1687      undo: document.queryCommandEnabled('undo'),
1688      redo: document.queryCommandEnabled('redo')
1689    };
1690  },
1691  mediaQueries: {},
1692  mediaQuery: function(query, instance) {
1693    if (instance) {
1694      function callback(event) {
1695          instance.invokeMethodAsync('OnChange', event.matches)
1696      };
1697      var query = matchMedia(query);
1698      this.mediaQueries[instance._id] = function() {
1699          query.removeListener(callback);
1700      }
1701      query.addListener(callback);
1702      return query.matches;
1703    } else {
1704        instance = query;
1705        if (this.mediaQueries[instance._id]) {
1706            this.mediaQueries[instance._id]();
1707            delete this.mediaQueries[instance._id];
1708        }
1709    }
1710  },
1711  createEditor: function (ref, uploadUrl, paste, instance, shortcuts) {
1712    ref.inputListener = function () {
1713      instance.invokeMethodAsync('OnChange', ref.innerHTML);
1714    };
1715    ref.keydownListener = function (e) {
1716      var key = '';
1717      if (e.ctrlKey || e.metaKey) {
1718        key += 'Ctrl+';
1719      }
1720      if (e.altKey) {
1721        key += 'Alt+';
1722      }
1723      if (e.shiftKey) {
1724        key += 'Shift+';
1725      }
1726      key += e.code.replace('Key', '').replace('Digit', '').replace('Numpad', '');
1727
1728      if (shortcuts.includes(key)) {
1729        e.preventDefault();
1730        instance.invokeMethodAsync('ExecuteShortcutAsync', key);
1731      }
1732    };
1733
1734    ref.clickListener = function (e) {
1735      if (e.target && e.target.matches('a,button')) {
1736        e.preventDefault();
1737      }
1738    }
1739
1740    ref.selectionChangeListener = function () {
1741      if (document.activeElement == ref) {
1742        instance.invokeMethodAsync('OnSelectionChange');
1743      }
1744    };
1745    ref.pasteListener = function (e) {
1746      var item = e.clipboardData.items[0];
1747
1748      if (item.kind == 'file') {
1749        e.preventDefault();
1750        var file = item.getAsFile();
1751
1752        if (uploadUrl) {
1753            var xhr = new XMLHttpRequest();
1754            var data = new FormData();
1755            data.append("file", file);
1756            xhr.onreadystatechange = function (e) {
1757                if (xhr.readyState === XMLHttpRequest.DONE) {
1758                    var status = xhr.status;
1759                    if (status === 0 || (status >= 200 && status < 400)) {
1760                        var result = JSON.parse(xhr.responseText);
1761                        document.execCommand("insertHTML", false, '<img src="' + result.url + '">');
1762                    } else {
1763                        instance.invokeMethodAsync('OnError', xhr.responseText);
1764                    }
1765                }
1766            }
1767            instance.invokeMethodAsync('GetHeaders').then(function (headers) {
1768                xhr.open('POST', uploadUrl, true);
1769                for (var name in headers) {
1770                    xhr.setRequestHeader(name, headers[name]);
1771                }
1772                xhr.send(data);
1773            });
1774        } else {
1775            var reader = new FileReader();
1776            reader.onload = function (e) {
1777                document.execCommand("insertHTML", false, '<img src="' + e.target.result + '">');
1778            };
1779            reader.readAsDataURL(file);
1780        }
1781      } else if (paste) {
1782        e.preventDefault();
1783        var data = e.clipboardData.getData('text/html') || e.clipboardData.getData('text/plain');
1784
1785        instance.invokeMethodAsync('OnPaste', data)
1786          .then(function (html) {
1787            document.execCommand("insertHTML", false, html);
1788          });
1789      }
1790    };
1791    ref.addEventListener('input', ref.inputListener);
1792    ref.addEventListener('paste', ref.pasteListener);
1793    ref.addEventListener('keydown', ref.keydownListener);
1794    ref.addEventListener('click', ref.clickListener);
1795    document.addEventListener('selectionchange', ref.selectionChangeListener);
1796    document.execCommand('styleWithCSS', false, true);
1797  },
1798  saveSelection: function (ref) {
1799    if (document.activeElement == ref) {
1800      var selection = getSelection();
1801      if (selection.rangeCount > 0) {
1802        ref.range = selection.getRangeAt(0);

1803      }
1804    }
1805  },
1806  restoreSelection: function (ref) {
1807    var range = ref.range;
1808    if (range) {
1809      delete ref.range;
1810      if(ref) {
1811          ref.focus();
1812      }
1813      var selection = getSelection();
1814      selection.removeAllRanges();
1815      selection.addRange(range);
1816    }
1817  },
1818  selectionAttributes: function (selector, attributes, container) {
1819    var selection = getSelection();
1820    var range = selection.rangeCount > 0 && selection.getRangeAt(0);
1821    var parent = range && range.commonAncestorContainer;
1822    var inside = false;
1823    while (parent) {
1824      if (parent == container) {
1825        inside = true;
1826        break;
1827      }
1828      parent = parent.parentNode;
1829    }
1830    if (!inside) {
1831      return {};
1832    }
1833    var target = selection.focusNode;
1834    var innerHTML;
1835    if (target) {
1836      if (target.nodeType == 3) {
1837        target = target.parentElement;
1838      } else {
1839        target = target.childNodes[selection.focusOffset];
1840        if (target) {
1841          innerHTML = target.outerHTML;
1842        }
1843      }
1844      if (target && target.matches && !target.matches(selector)) {
1845        target = target.closest(selector);
1846      }
1847    }
1848    return attributes.reduce(function (result, name) {
1849      if (target) {
1850        result[name] = target[name];
1851      }
1852      return result;
1853    }, { innerText: selection.toString(), innerHTML: innerHTML });
1854  },
1855  destroyEditor: function (ref) {
1856    if (ref) {
1857      ref.removeEventListener('input', ref.inputListener);
1858      ref.removeEventListener('paste', ref.pasteListener);
1859      ref.removeEventListener('keydown', ref.keydownListener);
1860      ref.removeEventListener('click', ref.clickListener);
1861      document.removeEventListener('selectionchange', ref.selectionChangeListener);
1862    }
1863  },
1864  startDrag: function (ref, instance, handler) {
1865    if (!ref) {
1866        return { left: 0, top: 0, width: 0, height: 0 };
1867    }
1868    ref.mouseMoveHandler = function (e) {
1869      instance.invokeMethodAsync(handler, { clientX: e.clientX, clientY: e.clientY });
1870    };
1871    ref.touchMoveHandler = function (e) {
1872      if (e.targetTouches[0] && ref.contains(e.targetTouches[0].target)) {
1873        instance.invokeMethodAsync(handler, { clientX: e.targetTouches[0].clientX, clientY: e.targetTouches[0].clientY });
1874      }
1875    };
1876    ref.mouseUpHandler = function (e) {
1877      Radzen.endDrag(ref);
1878    };
1879    document.addEventListener('mousemove', ref.mouseMoveHandler);
1880    document.addEventListener('mouseup', ref.mouseUpHandler);
1881    document.addEventListener('touchmove', ref.touchMoveHandler, { passive: true, capture: true })
1882    document.addEventListener('touchend', ref.mouseUpHandler, { passive: true });
1883    return Radzen.clientRect(ref);
1884  },
1885  submit: function (form) {
1886    form.submit();
1887  },
1888  clientRect: function (arg) {
1889    var el = arg instanceof Element || arg instanceof HTMLDocument
1890        ? arg
1891        : document.getElementById(arg);
1892    var rect = el.getBoundingClientRect();
1893    return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
1894  },
1895  endDrag: function (ref) {
1896    document.removeEventListener('mousemove', ref.mouseMoveHandler);
1897    document.removeEventListener('mouseup', ref.mouseUpHandler);
1898    document.removeEventListener('touchmove', ref.touchMoveHandler)
1899    document.removeEventListener('touchend', ref.mouseUpHandler);
1900  },
1901  startColumnReorder: function(id) {
1902      var el = document.getElementById(id + '-drag');
1903      var cell = el.parentNode.parentNode;
1904      var visual = document.createElement("th");
1905      visual.className = cell.className + ' rz-column-draggable';
1906      visual.style = cell.style;
1907      visual.style.display = 'none';
1908      visual.style.position = 'absolute';
1909      visual.style.height = cell.offsetHeight + 'px';
1910      visual.style.width = cell.offsetWidth + 'px';
1911      visual.style.zIndex = 2000;
1912      visual.innerHTML = cell.innerHTML;
1913      visual.id = id + 'visual';
1914      document.body.appendChild(visual);
1915
1916      var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer');
1917      for (let i = 0; i < resizers.length; i++) {
1918          resizers[i].style.display = 'none';
1919      }
1920
1921      Radzen[id + 'end'] = function (e) {
1922          var el = document.getElementById(id + 'visual');
1923          if (el) {
1924              document.body.removeChild(el);
1925              Radzen[id + 'end'] = null;
1926              Radzen[id + 'move'] = null;
1927              var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer');
1928              for (let i = 0; i < resizers.length; i++) {
1929                  resizers[i].style.display = 'block';
1930              }
1931          }
1932      }
1933      document.removeEventListener('click', Radzen[id + 'end']);
1934      document.addEventListener('click', Radzen[id + 'end']);
1935
1936      Radzen[id + 'move'] = function (e) {
1937          var el = document.getElementById(id + 'visual');
1938          if (el) {
1939              el.style.display = 'block';
1940
1941              if (/Edge/.test(navigator.userAgent)) {
1942                  var scrollLeft = document.body.scrollLeft;
1943                  var scrollTop = document.body.scrollTop;
1944              } else {
1945                  var scrollLeft = document.documentElement.scrollLeft;
1946                  var scrollTop = document.documentElement.scrollTop;
1947              }
1948
1949              el.style.top = e.clientY + scrollTop + 10 + 'px';
1950              el.style.left = e.clientX + scrollLeft + 10 + 'px';
1951          }
1952      }
1953      document.removeEventListener('mousemove', Radzen[id + 'move']);
1954      document.addEventListener('mousemove', Radzen[id + 'move']);
1955  },
1956  stopColumnResize: function (id, grid, columnIndex) {
1957    var el = document.getElementById(id + '-resizer');
1958    if(!el) return;
1959    var cell = el.parentNode.parentNode;
1960    if (!cell) return;
1961    if (Radzen[el]) {
1962        grid.invokeMethodAsync(
1963            'RadzenGrid.OnColumnResized',
1964            columnIndex,
1965            cell.getBoundingClientRect().width
1966        );
1967        el.style.width = null;
1968        document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
1969        document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
1970        document.removeEventListener('touchmove', Radzen[el].touchMoveHandler)
1971        document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
1972        Radzen[el] = null;
1973    }
1974  },
1975  startColumnResize: function(id, grid, columnIndex, clientX) {
1976      var el = document.getElementById(id + '-resizer');
1977      var cell = el.parentNode.parentNode;
1978      var col = document.getElementById(id + '-col');
1979      var dataCol = document.getElementById(id + '-data-col');
1980      var footerCol = document.getElementById(id + '-footer-col');
1981      Radzen[el] = {
1982          clientX: clientX,
1983          width: cell.getBoundingClientRect().width,
1984          mouseUpHandler: function (e) {
1985              if (Radzen[el]) {
1986                  grid.invokeMethodAsync(
1987                      'RadzenGrid.OnColumnResized',
1988                      columnIndex,
1989                      cell.getBoundingClientRect().width
1990                  );
1991                  el.style.width = null;
1992                  document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
1993                  document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
1994                  document.removeEventListener('touchmove', Radzen[el].touchMoveHandler)
1995                  document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
1996                  Radzen[el] = null;
1997              }
1998          },
1999          mouseMoveHandler: function (e) {
2000              if (Radzen[el]) {
2001                  var widthFloat = (Radzen[el].width - (Radzen[el].clientX - e.clientX));
2002                  var minWidth = parseFloat(cell.style.minWidth || 0)
2003
2004                  if (widthFloat < minWidth) {
2005                      widthFloat = minWidth;
2006                  }
2007
2008                  var width = widthFloat + 'px';
2009
2010                  if (cell) {
2011                      cell.style.width = width;
2012                  }
2013                  if (col) {
2014                      col.style.width = width;
2015                  }
2016                  if (dataCol) {
2017                      dataCol.style.width = width;
2018                  }
2019                  if (footerCol) {
2020                      footerCol.style.width = width;
2021                  }
2022              }
2023          },
2024          touchMoveHandler: function (e) {
2025              if (e.targetTouches[0]) {
2026                  Radzen[el].mouseMoveHandler(e.targetTouches[0]);
2027              }
2028          }
2029      };
2030      el.style.width = "100%";
2031      document.addEventListener('mousemove', Radzen[el].mouseMoveHandler);
2032      document.addEventListener('mouseup', Radzen[el].mouseUpHandler);
2033      document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true })
2034      document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true });

2035  },
2036      startSplitterResize: function(id,
2037        splitter,
2038        paneId,
2039        paneNextId,
2040        orientation,
2041        clientPos,
2042        minValue,
2043        maxValue,
2044        minNextValue,
2045        maxNextValue) {
2046
2047        var el = document.getElementById(id);
2048        var pane = document.getElementById(paneId);
2049        var paneNext = document.getElementById(paneNextId);
2050        var paneLength;
2051        var paneNextLength;
2052        var panePerc;
2053        var paneNextPerc;
2054        var isHOrientation=orientation == 'Horizontal';
2055
2056        var totalLength = 0.0;
2057        Array.from(el.children).forEach(element => {
2058            totalLength += isHOrientation
2059                ? element.getBoundingClientRect().width
2060                : element.getBoundingClientRect().height;
2061        });
2062
2063        if (pane) {
2064            paneLength = isHOrientation
2065                ? pane.getBoundingClientRect().width
2066                : pane.getBoundingClientRect().height;
2067
2068            panePerc = (paneLength / totalLength * 100) + '%';
2069        }
2070
2071        if (paneNext) {
2072            paneNextLength = isHOrientation
2073                ? paneNext.getBoundingClientRect().width
2074                : paneNext.getBoundingClientRect().height;
2075
2076            paneNextPerc = (paneNextLength / totalLength * 100) + '%';
2077        }
2078
2079        function ensurevalue(value) {
2080            if (!value)
2081                return null;
2082
2083            value=value.trim().toLowerCase();
2084
2085            if (value.endsWith("%"))
2086                return totalLength*parseFloat(value)/100;
2087
2088            if (value.endsWith("px"))
2089                return parseFloat(value);
2090
2091            throw 'Invalid value';
2092        }
2093
2094        minValue=ensurevalue(minValue);
2095        maxValue=ensurevalue(maxValue);
2096        minNextValue=ensurevalue(minNextValue);
2097        maxNextValue=ensurevalue(maxNextValue);
2098
2099        Radzen[el] = {
2100            clientPos: clientPos,
2101            panePerc: parseFloat(panePerc),
2102            paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0,
2103            paneLength: paneLength,
2104            paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0,
2105            mouseUpHandler: function(e) {
2106                if (Radzen[el]) {
2107                    splitter.invokeMethodAsync(
2108                        'RadzenSplitter.OnPaneResized',
2109                        parseInt(pane.getAttribute('data-index')),
2110                        parseFloat(pane.style.flexBasis),
2111                        paneNext ? parseInt(paneNext.getAttribute('data-index')) : null,
2112                        paneNext ? parseFloat(paneNext.style.flexBasis) : null
2113                    );
2114                    document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
2115                    document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
2116                    document.removeEventListener('touchmove', Radzen[el].touchMoveHandler);
2117                    document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
2118                    Radzen[el] = null;
2119                }
2120            },
2121            mouseMoveHandler: function(e) {
2122                if (Radzen[el]) {
2123
2124                    splitter.invokeMethodAsync(
2125                        'RadzenSplitter.OnPaneResizing'
2126                    );
2127
2128                    var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc;
2129                    var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength;
2130
2131                    var length = (Radzen[el].paneLength -
2132                        (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY)));
2133
2134                    if (length > spaceLength)
2135                        length = spaceLength;
2136
2137                    if (minValue && length < minValue) length = minValue;
2138                    if (maxValue && length > maxValue) length = maxValue;
2139
2140                    if (paneNext) {
2141                        var nextSpace=spaceLength-length;
2142                        if (minNextValue && nextSpace < minNextValue) length = spaceLength-minNextValue;
2143                        if (maxNextValue && nextSpace >

2143 maxNextValue) length = spaceLength+maxNextValue;
2144                    }
2145
2146                    var perc = length / Radzen[el].paneLength;
2147                    if (!isFinite(perc)) {
2148                        perc = 1;
2149                        Radzen[el].panePerc = 0.1;
2150                        Radzen[el].paneLength =isHOrientation
2151                            ? pane.getBoundingClientRect().width
2152                            : pane.getBoundingClientRect().height;
2153                    }
2154
2155                    var newPerc =  Radzen[el].panePerc * perc;
2156                    if (newPerc < 0) newPerc = 0;
2157                    if (newPerc > 100) newPerc = 100;
2158
2159                    pane.style.flexBasis = newPerc + '%';
2160                    if (paneNext)
2161                        paneNext.style.flexBasis = (spacePerc - newPerc) + '%';
2162                }
2163            },
2164            touchMoveHandler: function(e) {
2165                if (e.targetTouches[0]) {
2166                    Radzen[el].mouseMoveHandler(e.targetTouches[0]);
2167                }
2168            }
2169        };
2170        document.addEventListener('mousemove', Radzen[el].mouseMoveHandler);
2171        document.addEventListener('mouseup', Radzen[el].mouseUpHandler);
2172        document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true });
2173        document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true });
2174    },
2175    resizeSplitter(id, e) {
2176        var el = document.getElementById(id);
2177        if (el && Radzen[el]) {
2178            Radzen[el].mouseMoveHandler(e);
2179            Radzen[el].mouseUpHandler(e);
2180        }
2181    },
2182    openWaiting: function() {
2183        if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
2184            document.body.classList.add('no-scroll');
2185        }
2186        if (Radzen.WaitingIntervalId != null) {
2187            clearInterval(Radzen.WaitingIntervalId);
2188        }
2189
2190        setTimeout(function() {
2191                var timerObj = document.getElementsByClassName('rz-waiting-timer');
2192                if (timerObj.length == 0) return;
2193                var timerStart = new Date().getTime();
2194                Radzen.WaitingIntervalId = setInterval(function() {
2195                        if (timerObj == null || timerObj[0] == null) {
2196                            clearInterval(Radzen.WaitingIntervalId);
2197                        } else {
2198                            var time = new Date(new Date().getTime() - timerStart);
2199                            timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100);
2200                        }
2201                    },
2202                    100);
2203            },
2204            100);
2205    },
2206    closeWaiting: function() {
2207        document.body.classList.remove('no-scroll');
2208        if (Radzen.WaitingIntervalId != null) {
2209            clearInterval(Radzen.WaitingIntervalId);
2210            Radzen.WaitingIntervalId = null;
2211        }
2212    },
2213    toggleDictation: function (componentRef, language) {
2214        function start() {
2215            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
2216
2217            if (!SpeechRecognition) {
2218                return;
2219            }
2220
2221            radzenRecognition = new SpeechRecognition();
2222            radzenRecognition.componentRef = componentRef;
2223            radzenRecognition.continuous = true;
2224
2225            if (language) {
2226                radzenRecognition.lang = language;
2227            }
2228
2229            radzenRecognition.onresult = function (event) {
2230                if (event.results.length < 1) {
2231                    return;
2232                }
2233
2234                let current = event.results[event.results.length - 1][0]
2235                let result = current.transcript;
2236
2237                componentRef.invokeMethodAsync("OnResult", result);
2238            };
2239            radzenRecognition.onend = function (event) {
2240                componentRef.invokeMethodAsync("StopRecording");
2241                radzenRecognition = null;
2242            };
2243            radzenRecognition.start();
2244        }
2245
2246        if (radzenRecognition) {
2247            if (radzenRecognition.componentRef._id != componentRef._id) {
2248                radzenRecognition.addEventListener('end', start);
2249            }
2250            radzenRecognition.stop();
2251        } else {
2252            start();
2253        }
2254    }
2255};