@progress/telerik-jquery-report-viewer 25.25.211 → 26.25.521

package/dist/cjs/parametersArea.js

@@ -7,135 +7,174 @@ var stringResources = require('./stringResources.js');
 var parameterValidators = require('./parameterValidators.js');
 var parameters = require('./parameters.js');
 var enums = require('./enums.js');
-var globalSettings = require('./globalSettings.js');
+var eventEmitter = require('./event-emitter.js');
 
 var defaultOptions = {};
 var Events = {
   PARAMETERS_READY: "pa.parametersReady",
   ERROR: "pa.Error"
 };
-function ParametersArea(placeholder, options, otherOptions) {
-  options = $.extend({}, defaultOptions, options, otherOptions);
-  var parametersArea = {};
-  var $parametersArea = $(parametersArea);
-  var editors = {};
-  var controller = options.controller;
-  if (!controller) {
-    throw "No controller (telerikReporting.reportViewerController) has been specified.";
-  }
-  var parameterEditors = parameters.ParameterEditors;
-  if (options.parameterEditors && options.parameterEditors.length > 0) {
-    parameterEditors = [].concat(options.parameterEditors, parameters.ParameterEditors);
-  }
-  var recentParameterValues;
-  var parameters$1;
-  var initialParameterValues;
-  var processedParameterValues = void 0;
-  var $placeholder = $(placeholder);
-  var $content = $placeholder.find(".trv-parameters-area-content");
-  var $errorMessage = $placeholder.find(".trv-error-message");
-  var $previewButton = $placeholder.find(".trv-parameters-area-preview-button");
-  $previewButton.text(stringResources.stringResources[$previewButton.text()]);
-  $previewButton.attr("aria-label", stringResources.stringResources[$previewButton.attr("aria-label")]);
-  $previewButton.on("click", function(e) {
-    e.preventDefault();
-    if (allParametersValid()) {
-      applyParameters();
+class ParametersArea {
+  // #region fields
+  options;
+  viewerOptions;
+  element;
+  $element;
+  eventEmitter;
+  controller;
+  notificationService;
+  parameters;
+  editors;
+  parameterEditors;
+  initialParameterValues;
+  recentParameterValues;
+  processedParameterValues;
+  _parametersContainer;
+  _parametersWrapper;
+  $errorMessage;
+  $previewButton;
+  parameterContainerTemplate;
+  parametersAreaVisible;
+  parametersAreaNecessary;
+  enableAccessibility;
+  loadingCount;
+  initialized;
+  // #endregion
+  // #region constructor
+  constructor(element, options, viewerOptions) {
+    this.options = $.extend({}, defaultOptions, options, viewerOptions);
+    this.element = element;
+    this.eventEmitter = new eventEmitter.EventEmitter();
+    this.editors = {};
+    this.controller = this.options.controller;
+    if (!this.controller) {
+      throw "No controller (telerikReporting.reportViewerController) has been specified.";
     }
-  });
-  var parameterContainerTemplate = options.templates["trv-parameter"];
-  var parametersAreaVisible = options.parametersAreaVisible !== false;
-  var enableAccessibility = options.enableAccessibility;
-  init();
-  function init() {
-    replaceStringResources($placeholder);
-  }
-  function replaceStringResources($paramsArea) {
-    var $previewButton2 = $paramsArea.find(".trv-parameters-area-preview-button");
-    if (!$previewButton2) {
+    this.notificationService = options.notificationService;
+    if (!this.notificationService) {
+      throw "No notificationService (telerikReporting.NotificationService) has been specified.";
+    }
+    this.parameterEditors = parameters.ParameterEditors;
+    if (options.parameterEditors && options.parameterEditors.length > 0) {
+      this.parameterEditors = [].concat(options.parameterEditors, parameters.ParameterEditors);
+    }
+    this.recentParameterValues;
+    this.parameters;
+    this.initialParameterValues;
+    this.processedParameterValues = void 0;
+    this.$element = $(this.element);
+    this._parametersContainer = this.element?.querySelector(".trv-parameters-area-content");
+    this._parametersWrapper = this.element?.querySelector(".trv-parameters-wrapper");
+    this.$errorMessage = this.$element.find(".trv-error-message");
+    this.$previewButton = this.$element.find(".trv-parameters-area-preview-button");
+    this.$previewButton.text(stringResources.stringResources[this.$previewButton.text()]);
+    this.$previewButton.attr("aria-label", stringResources.stringResources[this.$previewButton.attr("aria-label")]);
+    this.$previewButton.on("click", (e) => {
+      e.preventDefault();
+      if (this.allParametersValid()) {
+        this.applyParameters();
+      }
+    });
+    this.parameterContainerTemplate = this.options.templates["trv-parameter"];
+    this.parametersAreaVisible = this.options.parametersAreaVisible !== false;
+    this.enableAccessibility = this.options.enableAccessibility;
+    this.loadingCount = 0;
+    this.parametersAreaNecessary = false;
+    this.initialized = false;
+    this.init();
+  }
+  // #endregion
+  // #region methods
+  init() {
+    if (this.initialized) {
       return;
     }
-    $previewButton2.attr("aria-label", stringResources.stringResources[$previewButton2.attr("aria-label")]);
-    $previewButton2.text(stringResources.stringResources[$previewButton2.text()]);
+    this._attachEvents();
+    this.replaceStringResources(this.$element);
   }
-  function toggleElementDisplay(el, shouldHide) {
+  replaceStringResources($paramsArea) {
+    var $previewButton = $paramsArea.find(".trv-parameters-area-preview-button");
+    if (!$previewButton) {
+      return;
+    }
+    $previewButton.attr("aria-label", stringResources.stringResources[$previewButton.attr("aria-label")]);
+    $previewButton.text(stringResources.stringResources[$previewButton.text()]);
+  }
+  toggleElementDisplay(el, shouldHide) {
     el.style.display = shouldHide ? "none" : "";
   }
-  function createParameterContainer() {
-    return $(parameterContainerTemplate);
+  createParameterContainer() {
+    return $(this.parameterContainerTemplate);
   }
-  function createParameterUI(parameter) {
-    var $container = createParameterContainer();
+  createParameterUI(parameter) {
+    var $container = this.createParameterContainer();
     var $editorPlaceholder = $container.find(".trv-parameter-value");
     var $title = $container.find(".trv-parameter-title");
     var $error = $container.find(".trv-parameter-error");
-    var $errorMessage2 = $container.find(".trv-parameter-error-message");
+    var $errorMessage = $container.find(".trv-parameter-error-message");
     var $useDefaultValueCheckbox = $container.find(".trv-parameter-use-default input");
-    var editorsTypes = options.parameters && options.parameters.editors ? options.parameters.editors : null;
-    var editorFactory = selectParameterEditorFactory(parameter, editorsTypes);
+    var editorsTypes = this.options.parameters && this.options.parameters.editors ? this.options.parameters.editors : null;
+    var editorFactory = this.selectParameterEditorFactory(parameter, editorsTypes);
     var parameterText = utils.escapeHtml(parameter.text);
     var isHiddenParameter = !parameter.isVisible;
     if (isHiddenParameter) {
       parameterText += " [<b>hidden</b>]";
     }
     $title.html(parameterText).attr("title", parameterText);
-    $errorMessage2.text(parameter.Error);
+    $errorMessage.text(parameter.Error);
     (parameter.Error ? $.fn.show : $.fn.hide).call($error);
     var editor = editorFactory.createEditor(
       $editorPlaceholder,
       {
-        templates: options.templates,
-        parameterChanged: function(parameter2, newValue) {
+        templates: this.options.templates,
+        parameterChanged: (parameter2, newValue) => {
           var invalidParameterLI = document.querySelector(".trv-pages-area .trv-error-message ul li." + parameter2.name);
           try {
             newValue = parameterValidators.ParameterValidators.validate(parameter2, newValue);
             $error.hide();
             if (invalidParameterLI) {
-              toggleElementDisplay(invalidParameterLI, true);
+              this.toggleElementDisplay(invalidParameterLI, true);
             }
-            onParameterChanged(parameter2, newValue);
+            this.onParameterChanged(parameter2, newValue);
           } catch (error) {
             if (invalidParameterLI) {
-              toggleElementDisplay(invalidParameterLI, false);
+              this.toggleElementDisplay(invalidParameterLI, false);
             }
             parameter2.Error = error;
             parameter2.value = [];
-            $errorMessage2.text(error);
+            $errorMessage.text(error);
             $error.show();
-            enablePreviewButton(false);
+            this.enablePreviewButton(false);
           } finally {
-            setAccessibilityErrorState(parameter2);
+            this.setAccessibilityErrorState(parameter2);
           }
         },
-        enableAccessibility
+        enableAccessibility: this.enableAccessibility
       }
     );
-    editors[parameter.id] = editor;
+    this.editors[parameter.id] = editor;
     editor.beginEdit(parameter);
-    if (enableAccessibility && !isHiddenParameter) {
+    if (this.enableAccessibility && !isHiddenParameter) {
       editor.addAccessibility(parameter);
     }
     if ($useDefaultValueCheckbox.length > 0) {
-      $useDefaultValueCheckbox.on(
-        "click",
-        function() {
-          var useDefaultValue = $(this).is(":checked");
-          if (useDefaultValue) {
-            delete recentParameterValues[parameter.id];
-            delete initialParameterValues[parameter.id];
-            invalidateChildParameters(parameter);
-            updateParameters(onLoadParametersSuccess);
-          } else {
-            recentParameterValues[parameter.id] = parameter.value;
-            initialParameterValues[parameter.id] = parameter.value;
-          }
-          editor.enable(!useDefaultValue);
-          raiseParametersReady();
+      $useDefaultValueCheckbox.on("click", (event) => {
+        var useDefaultValue = $(event.currentTarget).is(":checked");
+        if (useDefaultValue) {
+          delete this.recentParameterValues[parameter.id];
+          delete this.initialParameterValues[parameter.id];
+          this.invalidateChildParameters(parameter);
+          this.updateParameters(this.onLoadParametersSuccess.bind(this));
+        } else {
+          this.recentParameterValues[parameter.id] = parameter.value;
+          this.initialParameterValues[parameter.id] = parameter.value;
         }
-      );
-      var hasInitialValues = initialParameterValues !== null;
+        editor.enable(!useDefaultValue);
+        this.trigger(Events.PARAMETERS_READY, this.recentParameterValues);
+      });
+      var hasInitialValues = this.initialParameterValues !== null;
       if (hasInitialValues) {
-        if (!(parameter.id in initialParameterValues)) {
+        if (!(parameter.id in this.initialParameterValues)) {
           $useDefaultValueCheckbox.prop("checked", true);
           editor.enable(false);
         }
@@ -146,63 +185,63 @@ function ParametersArea(placeholder, options, otherOptions) {
     }
     return $container;
   }
-  function setAccessibilityErrorState(parameter) {
-    var editor = editors[parameter.id];
-    if (!editor || !enableAccessibility) {
+  setAccessibilityErrorState(parameter) {
+    var editor = this.editors[parameter.id];
+    if (!editor || !this.enableAccessibility) {
       return;
     }
     editor.setAccessibilityErrorState(parameter);
   }
-  function enablePreviewButton(enabled) {
+  enablePreviewButton(enabled) {
     if (enabled) {
-      $previewButton.prop("disabled", false);
-      $previewButton.removeClass("k-disabled");
+      this.$previewButton.prop("disabled", false);
+      this.$previewButton.removeClass("k-disabled");
     } else {
-      $previewButton.prop("disabled", true);
-      $previewButton.addClass("k-disabled");
+      this.$previewButton.prop("disabled", true);
+      this.$previewButton.addClass("k-disabled");
     }
   }
-  function selectParameterEditorFactory(parameter, editorsType) {
-    var factory = Array.from(parameterEditors).find((editor) => {
+  selectParameterEditorFactory(parameter, editorsType) {
+    var factory = Array.from(this.parameterEditors).find((editor) => {
       return editor.match(parameter, editorsType);
     });
     return factory;
   }
-  function showError(error) {
-    $errorMessage.text(error);
-    (error ? $.fn.addClass : $.fn.removeClass).call($placeholder, "trv-error");
+  showError(error) {
+    this.$errorMessage.text(error);
+    (error ? $.fn.addClass : $.fn.removeClass).call(this.$element, "trv-error");
   }
-  function showPreviewButton() {
-    (allParametersAutoRefresh() && controller.isReportAutoRun() ? $.fn.removeClass : $.fn.addClass).call($placeholder, "preview");
+  showPreviewButton(parameters) {
+    (this.allParametersAutoRefresh(parameters) && this.controller.autoRunEnabled ? $.fn.removeClass : $.fn.addClass).call(this.$element, "preview");
   }
-  function allParametersAutoRefresh() {
-    var allAuto = Array.from(parameters$1).every((parameter) => {
+  allParametersAutoRefresh(parameters) {
+    var allAuto = Array.from(parameters).every((parameter) => {
       return !parameter.isVisible || parameter.autoRefresh;
     });
     return allAuto;
   }
-  function allParametersValid() {
-    var allValid = Array.from(parameters$1).every((parameter) => {
+  allParametersValid() {
+    var allValid = Array.from(this.parameters).every((parameter) => {
       return !parameter.Error;
     });
     return allValid;
   }
-  function clearEditors() {
-    Object.entries(editors).forEach(([key, editor]) => {
+  clearEditors() {
+    Object.entries(this.editors).forEach(([key, editor]) => {
       if (typeof editor.destroy === "function") {
         editor.destroy();
       }
     });
-    editors = {};
+    this.editors = {};
   }
-  function fill(newParameters) {
-    recentParameterValues = {};
-    processedParameterValues = {};
-    parameters$1 = newParameters || [];
-    clearEditors();
+  fill(newParameters) {
+    this.recentParameterValues = {};
+    this.processedParameterValues = {};
+    this.parameters = newParameters || [];
+    this.clearEditors();
     var $parameterContainer;
     var $tempContainer = $("<div></div>");
-    Array.from(parameters$1).forEach((parameter) => {
+    Array.from(this.parameters).forEach((parameter) => {
       try {
         parameter.value = parameterValidators.ParameterValidators.validate(parameter, parameter.value);
       } catch (e) {
@@ -211,126 +250,126 @@ function ParametersArea(placeholder, options, otherOptions) {
       var hasError = Boolean(parameter.Error);
       var hasValue = !hasError;
       if (hasValue) {
-        recentParameterValues[parameter.id] = parameter.value;
+        this.recentParameterValues[parameter.id] = parameter.value;
       } else {
         parameter.Error = stringResources.stringResources.invalidParameter;
       }
       if (parameter.availableValues) {
-        processedParameterValues[parameter.id] = { valueMember: parameter.value, displayMember: parameter.label, availableValues: parameter.availableValues, multivalue: parameter.multivalue };
+        this.processedParameterValues[parameter.id] = { valueMember: parameter.value, displayMember: parameter.label, availableValues: parameter.availableValues, multivalue: parameter.multivalue };
       } else {
-        processedParameterValues[parameter.id] = parameter.value;
+        this.processedParameterValues[parameter.id] = parameter.value;
       }
-      if (parameter.isVisible || options.showHiddenParameters) {
-        $parameterContainer = createParameterUI(parameter);
+      if (parameter.isVisible || this.options.showHiddenParameters) {
+        $parameterContainer = this.createParameterUI(parameter);
         if ($parameterContainer) {
           $tempContainer.append($parameterContainer);
         }
       }
     });
-    if (initialParameterValues !== void 0) {
-      if (null === initialParameterValues) {
-        initialParameterValues = {};
-        Array.from(parameters$1).forEach((parameter) => {
+    if (this.initialParameterValues !== void 0) {
+      if (null === this.initialParameterValues) {
+        this.initialParameterValues = {};
+        Array.from(this.parameters).forEach((parameter) => {
           if (parameter.isVisible) {
-            initialParameterValues[parameter.id] = parameter.value;
+            this.initialParameterValues[parameter.id] = parameter.value;
           } else {
-            delete recentParameterValues[parameter.id];
+            delete this.recentParameterValues[parameter.id];
           }
         });
       } else {
-        Array.from(parameters$1).forEach((parameter) => {
-          if (!(parameter.id in initialParameterValues)) {
-            delete recentParameterValues[parameter.id];
+        Array.from(this.parameters).forEach((parameter) => {
+          if (!(parameter.id in this.initialParameterValues)) {
+            delete this.recentParameterValues[parameter.id];
           }
         });
       }
     }
-    $content.empty();
-    if (parameters$1.length > 0) {
-      $content.append($tempContainer.children());
-      if (enableAccessibility) {
-        $content.attr("aria-label", "Parameters area. Contains " + parameters$1.length + " parameters.");
+    if (this._parametersWrapper) {
+      kendo.destroy(this._parametersWrapper);
+      this._parametersWrapper.innerHTML = "";
+      if (this.parameters.length > 0) {
+        this._parametersWrapper.append(...$tempContainer.children().get());
+        if (this.enableAccessibility) {
+          this._parametersWrapper.setAttribute("aria-label", "Parameters area. Contains " + this.parameters.length + " parameters.");
+        }
       }
     }
-    showPreviewButton();
-    var allValid = allParametersValid();
-    enablePreviewButton(allValid);
-    applyProcessedParameters();
+    this.showPreviewButton(this.parameters);
+    var allValid = this.allParametersValid();
+    this.enablePreviewButton(allValid);
+    this.applyProcessedParameters();
   }
-  function applyParameters() {
-    controller.setParameters($.extend({}, recentParameterValues));
-    controller.previewReport(false);
+  applyParameters() {
+    this.controller.setParameters($.extend({}, this.recentParameterValues));
+    this.controller.previewReport(false);
   }
-  function applyProcessedParameters() {
-    controller.setProcessedParameter($.extend({}, processedParameterValues));
+  applyProcessedParameters() {
+    this.controller.setProcessedParameterValues($.extend({}, this.processedParameterValues));
   }
-  function allParametersValidForAutoRefresh() {
+  allParametersValidForAutoRefresh() {
     var triggerAutoUpdate = true;
-    for (var i = parameters$1.length - 1; triggerAutoUpdate && i >= 0; i--) {
-      var p = parameters$1[i];
-      triggerAutoUpdate = p.id in recentParameterValues && (Boolean(p.autoRefresh) || !p.isVisible);
+    for (var i = this.parameters.length - 1; triggerAutoUpdate && i >= 0; i--) {
+      var p = this.parameters[i];
+      triggerAutoUpdate = p.id in this.recentParameterValues && (Boolean(p.autoRefresh) || !p.isVisible);
     }
     return triggerAutoUpdate;
   }
-  function raiseParametersReady() {
-    parametersArea.parametersReady(recentParameterValues);
-  }
-  function tryRefreshReport() {
-    raiseParametersReady();
-    if (allParametersValidForAutoRefresh()) {
-      applyParameters();
+  tryRefreshReport() {
+    this.trigger(Events.PARAMETERS_READY, this.recentParameterValues);
+    if (this.allParametersValidForAutoRefresh() && this.controller.autoRunEnabled) {
+      this.applyParameters();
     }
   }
-  function invalidateChildParameters(parameter) {
+  invalidateChildParameters(parameter) {
     if (parameter.childParameters) {
       Array.from(parameter.childParameters).forEach((parameterId) => {
-        var childParameter = getParameterById(parameterId);
+        var childParameter = this.getParameterById(parameterId);
         if (childParameter) {
-          invalidateChildParameters(childParameter);
+          this.invalidateChildParameters(childParameter);
         }
-        delete recentParameterValues[parameterId];
-        resetPendingParameterChange(parameterId);
+        delete this.recentParameterValues[parameterId];
+        this.resetPendingParameterChange(parameterId);
       });
     }
   }
-  function resetPendingParameterChange(parameterId) {
-    if (editors) {
-      var editor = editors[parameterId];
+  resetPendingParameterChange(parameterId) {
+    if (this.editors) {
+      var editor = this.editors[parameterId];
       if (editor && typeof editor.clearPendingChange === "function") {
         editor.clearPendingChange();
       }
     }
   }
-  function onParameterChanged(parameter, newValue) {
+  onParameterChanged(parameter, newValue) {
     delete parameter["Error"];
     parameter.value = newValue;
-    recentParameterValues[parameter.id] = newValue;
-    if (initialParameterValues !== void 0) {
-      if (parameter.id in initialParameterValues) {
-        recentParameterValues[parameter.id] = newValue;
+    this.recentParameterValues[parameter.id] = newValue;
+    if (this.initialParameterValues !== void 0) {
+      if (parameter.id in this.initialParameterValues) {
+        this.recentParameterValues[parameter.id] = newValue;
       }
     } else {
-      recentParameterValues[parameter.id] = newValue;
+      this.recentParameterValues[parameter.id] = newValue;
     }
-    invalidateChildParameters(parameter);
+    this.invalidateChildParameters(parameter);
     if (parameter.childParameters) {
-      updateParameters(tryRefreshReport);
+      this.updateParameters(this.tryRefreshReport.bind(this));
     } else {
-      var allValid = allParametersValid();
-      enablePreviewButton(allValid);
+      var allValid = this.allParametersValid();
+      this.enablePreviewButton(allValid);
       if (allValid) {
         var errorMsg = document.querySelector(".trv-pages-area .trv-error-message");
-        if ($previewButton.is(":visible") && errorMsg) {
+        if (this.$previewButton.is(":visible") && errorMsg) {
           errorMsg.textContent = stringResources.stringResources.tryReportPreview;
         }
-        tryRefreshReport();
+        this.tryRefreshReport();
       }
     }
   }
-  function getParameterById(parameterId) {
-    if (parameters$1) {
-      for (var i = 0; i < parameters$1.length; i++) {
-        var p = parameters$1[i];
+  getParameterById(parameterId) {
+    if (this.parameters) {
+      for (var i = 0; i < this.parameters.length; i++) {
+        var p = this.parameters[i];
         if (p.id === parameterId) {
           return p;
         }
@@ -338,160 +377,129 @@ function ParametersArea(placeholder, options, otherOptions) {
     }
     return null;
   }
-  function hasVisibleParameters(params) {
-    if (!params || null === params) {
-      return false;
-    }
-    var hasVisible = Array.from(params).some((parameter) => {
+  setParametersAreaVisibility(visible) {
+    this.controller.setParametersAreaVisible({ visible });
+  }
+  hasVisibleParameters(params) {
+    return (params || []).some((parameter) => {
       return parameter.isVisible;
     });
-    return hasVisible;
   }
-  var loadingCount = 0;
-  function beginLoad() {
-    loadingCount++;
-    $placeholder.addClass("trv-loading");
+  beginLoad() {
+    this.loadingCount++;
+    this.$element.addClass("trv-loading");
   }
-  function endLoad() {
-    if (loadingCount > 0) {
-      if (0 === --loadingCount) {
-        $placeholder.removeClass("trv-loading");
+  endLoad() {
+    if (this.loadingCount > 0) {
+      if (0 === --this.loadingCount) {
+        this.$element.removeClass("trv-loading");
       }
     }
   }
-  var parametersAreaNecessary = false;
-  function onLoadParametersComplete(params, successAction) {
-    showParametersAreaIfNecessary(params);
-    fill(params);
-    showError("");
-    if (parametersAreaNecessary && parametersAreaVisible) {
-      showParametersArea(true);
-      if (enableAccessibility) {
-        setSplitbarAccessibilityAttributes();
+  onLoadParametersComplete(params, successAction) {
+    this.showParametersAreaIfNecessary(params);
+    this.fill(params);
+    this.showError("");
+    if (this.parametersAreaNecessary && this.parametersAreaVisible) {
+      this.showParametersArea(true);
+      if (this.enableAccessibility) {
+        this.setSplitbarAccessibilityAttributes();
       }
     }
-    controller.updateUIInternal();
+    this.notificationService.updateUIInternal();
     if (typeof successAction === "function") {
       successAction();
     }
-    endLoad();
-  }
-  function showParametersAreaIfNecessary(params) {
-    parametersAreaNecessary = hasVisibleParameters(params) || !controller.isReportAutoRun();
-    showParametersArea(parametersAreaVisible && parametersAreaNecessary);
-  }
-  function updateParameters(successAction) {
-    acceptParameters(controller.loadParameters(recentParameterValues), successAction);
-  }
-  function acceptParameters(controllerLoadParametersPromise, successAction) {
-    beginLoad();
-    controllerLoadParametersPromise.then(function(parameters2) {
-      onLoadParametersComplete(parameters2, successAction);
-    }).catch(function(error) {
-      endLoad();
-      clear();
-      if (!$placeholder.hasClass("trv-hidden")) {
-        showError(error);
+    this.endLoad();
+  }
+  showParametersAreaIfNecessary(params) {
+    this.parametersAreaNecessary = this.hasVisibleParameters(params) || !this.controller.autoRunEnabled;
+    this.showParametersArea(this.parametersAreaVisible && this.parametersAreaNecessary);
+  }
+  updateParameters(successAction) {
+    this.acceptParameters(this.controller.loadParameters(this.recentParameterValues), successAction);
+  }
+  acceptParameters(controllerLoadParametersPromise, successAction) {
+    this.beginLoad();
+    controllerLoadParametersPromise.then((parameters) => {
+      this.onLoadParametersComplete(parameters, successAction);
+    }).catch((error) => {
+      this.endLoad();
+      this.clear();
+      if (!this.$element.hasClass("k-hidden")) {
+        this.showError(error);
       }
-      parametersArea.error(error);
+      this.trigger(Events.ERROR, error);
     });
   }
-  function getEventHandlerFromArguments(args) {
-    var arg0;
-    if (args && args.length) {
-      arg0 = args[0];
-    }
-    if (typeof arg0 === "function") {
-      return arg0;
+  onLoadParametersSuccess() {
+    if (this.initialParameterValues === null) {
+      this.initialParameterValues = $.extend({}, this.recentParameterValues);
     }
-    return null;
-  }
-  function eventFactory(event, args) {
-    var h = getEventHandlerFromArguments(args);
-    if (h) {
-      $parametersArea.on(event, h);
-    } else {
-      $parametersArea.trigger(event, args);
-    }
-    return controller;
+    this.trigger(Events.PARAMETERS_READY, this.recentParameterValues);
   }
-  function onLoadParametersSuccess() {
-    if (initialParameterValues === null) {
-      initialParameterValues = $.extend({}, recentParameterValues);
-    }
-    raiseParametersReady();
-  }
-  function showParametersArea(show) {
-    var splitter = globalSettings.GlobalSettings.viewerInstances.find((element) => element.id === options.viewerSelector + "-parameters-splitter");
+  showParametersArea(show) {
+    var splitter = $("#" + this.options.viewerSelector + "-parameters-splitter").getKendoSplitter();
     if (!splitter) {
       return;
     }
-    var sibling = $placeholder.prev();
-    if (options.parametersAreaPosition === enums.ParametersAreaPositions.TOP || options.parametersAreaPosition === enums.ParametersAreaPositions.LEFT) {
-      sibling = $placeholder.next();
+    var sibling = this.$element.prev();
+    if (this.options.parametersAreaPosition === enums.ParametersAreaPositions.TOP || this.options.parametersAreaPosition === enums.ParametersAreaPositions.LEFT) {
+      sibling = this.$element.next();
     }
-    (parametersAreaNecessary ? $.fn.removeClass : $.fn.addClass).call(sibling, "trv-hidden");
-    splitter.instance.toggle(".trv-parameters-area", show);
-  }
-  function setSplitbarAccessibilityAttributes() {
-    var splitbar = $placeholder.prev();
-    var tabIndex = $placeholder.find(".trv-parameters-area-content").attr("tabIndex");
-    if (options.parametersAreaPosition === enums.ParametersAreaPositions.TOP || options.parametersAreaPosition === enums.ParametersAreaPositions.LEFT) {
-      splitbar = $placeholder.next();
+    (this.parametersAreaNecessary ? $.fn.removeClass : $.fn.addClass).call(sibling, "k-hidden");
+    splitter.toggle(".trv-parameters-area", show);
+  }
+  setSplitbarAccessibilityAttributes() {
+    var splitbar = this.$element.prev();
+    var tabIndex = this.$element.find(".trv-parameters-area-content").attr("tabIndex");
+    if (this.options.parametersAreaPosition === enums.ParametersAreaPositions.TOP || this.options.parametersAreaPosition === enums.ParametersAreaPositions.LEFT) {
+      splitbar = this.$element.next();
     }
     splitbar.attr("aria-label", stringResources.stringResources.ariaLabelParametersAreaSplitter);
     splitbar.attr("tabIndex", tabIndex);
   }
-  function onReloadParameters(event, controllerLoadParametersPromise) {
-    showError();
-    $content.empty();
-    acceptParameters(controllerLoadParametersPromise, onLoadParametersSuccess);
-  }
-  controller.reloadParameters(onReloadParameters).beforeLoadReport(function() {
-    loadingCount = 0;
-    beginLoad();
-  }).reportLoadComplete(function() {
-    showParametersAreaIfNecessary(parameters$1);
-    showPreviewButton();
-  }).error(endLoad).pageReady(endLoad);
-  controller.getParametersAreaState(function(event, args) {
-    var parametersAreaNecessary2 = false;
-    if (parameters$1) {
-      parametersAreaNecessary2 = hasVisibleParameters(parameters$1) || !controller.isReportAutoRun();
-    }
-    args.enabled = parametersAreaNecessary2;
-    args.visible = parametersAreaVisible;
-  }).setParametersAreaVisible(function(event, args) {
-    parametersAreaVisible = args.visible;
-    showParametersArea(args.visible && (hasVisibleParameters(parameters$1) || !controller.isReportAutoRun()));
-  });
-  function clear() {
-    fill([]);
-  }
-  $.extend(
-    parametersArea,
-    {
-      allParametersValid: function() {
-        return allParametersValid();
-      },
-      clear: function() {
-        clear();
-      },
-      error: function() {
-        return eventFactory(Events.ERROR, arguments);
-      },
-      parametersReady: function() {
-        return eventFactory(Events.PARAMETERS_READY, arguments);
-      },
-      fill: function(parameters2) {
-        return fill(parameters2);
-      },
-      setParameters: function(parameterValues) {
-        initialParameterValues = null === parameterValues ? null : $.extend({}, parameterValues);
+  _attachEvents() {
+    this.controller.on("reloadParameters", (controllerLoadParametersPromise) => {
+      this.showError();
+      kendo.destroy(this._parametersWrapper);
+      this._parametersWrapper.innerHTML = "";
+      this.acceptParameters(controllerLoadParametersPromise, this.onLoadParametersSuccess.bind(this));
+    }).onAsync("beforeLoadReport", async () => {
+      this.loadingCount = 0;
+      this.beginLoad();
+    }).onAsync("reportLoadComplete", async (reportInfo) => {
+      this.showParametersAreaIfNecessary(this.parameters);
+      this.showPreviewButton(this.parameters);
+    }).on("error", () => this.endLoad()).on("pageReady", () => this.endLoad());
+    this.notificationService.getParametersAreaState((event, args) => {
+      var parametersAreaNecessary = false;
+      if (this.parameters) {
+        parametersAreaNecessary = this.hasVisibleParameters(this.parameters) || !this.controller.autoRunEnabled;
       }
-    }
-  );
-  return parametersArea;
+      args.enabled = parametersAreaNecessary;
+      args.visible = this.parametersAreaVisible;
+    }).setParametersAreaVisible((event, args) => {
+      this.parametersAreaVisible = args.visible;
+      this.showParametersArea(args.visible && (this.hasVisibleParameters(this.parameters) || !this.controller.autoRunEnabled));
+    });
+  }
+  clear() {
+    this.fill([]);
+  }
+  setParameters(parameterValues) {
+    this.initialParameterValues = null === parameterValues ? null : $.extend({}, parameterValues);
+  }
+  // #endregion
+  // #region events
+  on(type, handler) {
+    this.eventEmitter.on(type, handler);
+    return this;
+  }
+  trigger(type, ...args) {
+    return this.eventEmitter.trigger(type, ...args);
+  }
+  // #endregion
 }
 
 exports.ParametersArea = ParametersArea;