@progress/telerik-jquery-report-viewer 22.24.514 → 23.24.806

package/dist/es/search.js

@@ -1,148 +1,195 @@
-import { each, stringFormat } from './utils.js';
+import { stringFormat } from './utils.js';
 import { stringResources } from './stringResources.js';
 import { Binder } from './binder.js';
 import { PageModes } from './enums.js';
+import { Command } from './command.js';
 
 var defaultOptions = {};
-function Search(placeholder, options, viewerOptions) {
-  options = $.extend({}, defaultOptions, options);
-  var controller = options.controller;
-  var initialized = false;
-  var dialogVisible = false;
-  var $placeholder;
-  var $inputBox;
-  var $searchOptionsPlaceholder;
-  var searchOptionsMenu;
-  var $stopSearchPlaceholder;
-  var stopSearchMenu;
-  var $navigationPlaceholder;
-  var navigationMenu;
-  var $resultsLabel;
-  var $resultsPlaceholder;
-  var kendoComboBox;
-  var kendoSearchDialog;
-  var stopSearchCommand;
-  var optionsCommandSet;
-  var navigationCommandSet;
-  var searchResults;
-  var mruList = [];
-  var inputComboRebinding;
-  var searchMetadataRequested;
-  var searchMetadataLoaded;
-  var pendingHighlightItem;
-  var windowLocation;
-  var reportViewerWrapper = $("[data-selector='" + viewerOptions.viewerSelector + "']").find(".trv-report-viewer");
-  var lastSearch = "";
-  var highlightManager = {
-    shadedClassName: "trv-search-dialog-shaded-result",
-    //the results that are found, but not selected (highlighted)
-    highlightedClassName: "trv-search-dialog-highlighted-result",
-    //the result that is currently selected (highlighted)
-    current: null,
-    elements: []
-  };
-  if (!controller) {
-    throw "No controller (telerikReporting.ReportViewerController) has been specified.";
-  }
-  controller.pageReady(onPageReady).scrollPageReady(onPageReady).beginLoadReport(closeAndClear).viewModeChanged(closeAndClear);
-  controller.setSendEmailDialogVisible(function(event, args) {
-    if (args.visible && dialogVisible) {
-      toggle(!dialogVisible);
-    }
-  }).getSearchDialogState(function(event, args) {
-    args.visible = dialogVisible;
-  }).setSearchDialogVisible(function(event, args) {
-    toggleSearchDialog(args.visible);
-  });
-  function closeAndClear() {
-    if (searchMetadataRequested) {
+function replaceStringResources($search) {
+  if (!$search) {
+    return;
+  }
+  var $searchCaption = $search.find(".trv-search-dialog-caption-label");
+  var $searchOptions = $search.find(".trv-search-dialog-search-options");
+  var $searchStopButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_StopSearch']");
+  var $searchMatchCaseButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchCase']");
+  var $searchMatchWholeWordButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchWholeWord']");
+  var $searchUseRegexButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_UseRegex']");
+  var $searchNavigateUpButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateUp']");
+  var $searchNavigateDownButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateDown']");
+  replaceAttribute($search, "aria-label");
+  replaceAttribute($searchOptions, "aria-label");
+  replaceText($searchCaption);
+  replaceTitleAndAriaLabel($searchStopButton);
+  replaceTitleAndAriaLabel($searchMatchCaseButton);
+  replaceTitleAndAriaLabel($searchMatchWholeWordButton);
+  replaceTitleAndAriaLabel($searchUseRegexButton);
+  replaceTitleAndAriaLabel($searchNavigateUpButton);
+  replaceTitleAndAriaLabel($searchNavigateDownButton);
+}
+function replaceTitleAndAriaLabel($a) {
+  replaceAttribute($a, "title");
+  replaceAttribute($a, "aria-label");
+}
+function replaceText($el) {
+  if ($el) {
+    $el.text(stringResources[$el.text()]);
+  }
+}
+function replaceAttribute($el, attribute) {
+  if ($el) {
+    $el.attr(attribute, stringResources[$el.attr(attribute)]);
+  }
+}
+class Search {
+  constructor(element, options, viewerOptions) {
+    this.options = $.extend({}, defaultOptions, options);
+    this.viewerOptions = viewerOptions;
+    this.element = element;
+    this.controller = this.options.controller;
+    this.initialized = false;
+    this.dialogVisible = false;
+    this.$element;
+    this.$inputBox;
+    this.$searchOptionsPlaceholder;
+    this.searchOptionsMenu;
+    this.$stopSearchPlaceholder;
+    this.stopSearchMenu;
+    this.$navigationPlaceholder;
+    this.navigationMenu;
+    this.$resultsLabel;
+    this.$resultsPlaceholder;
+    this.kendoComboBox;
+    this.kendoSearchDialog;
+    this.stopSearchCommand;
+    this.optionsCommandSet;
+    this.navigationCommandSet;
+    this.searchResults;
+    this.mruList = [];
+    this.inputComboRebinding;
+    this.searchMetadataRequested;
+    this.searchMetadataLoaded;
+    this.pendingHighlightItem;
+    this.windowLocation;
+    this.reportViewerWrapper = $("[data-selector='" + this.viewerOptions.viewerSelector + "']").find(".trv-report-viewer");
+    this.lastSearch = "";
+    this.highlightManager = {
+      // the results that are found, but not selected (highlighted)
+      shadedClassName: "trv-search-dialog-shaded-result",
+      // the result that is currently selected (highlighted)
+      highlightedClassName: "trv-search-dialog-highlighted-result",
+      current: null,
+      elements: []
+    };
+    if (!this.controller) {
+      throw "No controller (telerikReporting.ReportViewerController) has been specified.";
+    }
+    this.controller.pageReady(this.onPageReady.bind(this)).scrollPageReady(this.onPageReady.bind(this)).beginLoadReport(this.closeAndClear.bind(this)).viewModeChanged(this.closeAndClear.bind(this));
+    this.controller.setSendEmailDialogVisible((event, args) => {
+      if (args.visible && this.dialogVisible) {
+        this.toggle(!this.dialogVisible);
+      }
+    }).getSearchDialogState((event, args) => {
+      args.visible = this.dialogVisible;
+    }).setSearchDialogVisible((event, args) => {
+      this.toggleSearchDialog(args.visible);
+    });
+    $(window).on("resize", () => {
+      if (this.kendoSearchDialog && this.kendoSearchDialog.options.visible) {
+        this.storeDialogPosition();
+        this.adjustDialogPosition();
+      }
+    });
+  }
+  closeAndClear() {
+    if (this.searchMetadataRequested) {
       return;
     }
-    toggle(false);
-    searchMetadataLoaded = false;
+    this.toggle(false);
+    this.searchMetadataLoaded = false;
   }
-  function toggleSearchDialog(show) {
-    dialogVisible = show;
+  toggleSearchDialog(show) {
+    this.dialogVisible = show;
     if (show) {
-      var searchMetadataOnDemand = viewerOptions.searchMetadataOnDemand;
-      if (searchMetadataOnDemand && !searchMetadataLoaded) {
-        searchMetadataRequested = true;
-        controller.reportLoadComplete(function() {
-          if (searchMetadataRequested) {
-            toggle(true);
-            searchMetadataRequested = false;
+      var searchMetadataOnDemand = this.viewerOptions.searchMetadataOnDemand;
+      if (searchMetadataOnDemand && !this.searchMetadataLoaded) {
+        this.searchMetadataRequested = true;
+        this.controller.reportLoadComplete((event, args) => {
+          if (this.searchMetadataRequested) {
+            this.toggle(true);
+            this.searchMetadataRequested = false;
           }
         });
-        controller.refreshReport(true);
+        this.controller.refreshReport(true);
         return;
       }
     }
-    toggle(show);
+    this.toggle(show);
   }
-  function toggle(show) {
-    dialogVisible = show;
+  toggle(show) {
+    this.dialogVisible = show;
     if (show) {
-      searchMetadataLoaded = true;
-      ensureInitialized();
-      kendoSearchDialog.open();
-      kendoComboBox.value("");
-      updateResultsUI(null);
-      toggleErrorLabel(false, null);
+      this.searchMetadataLoaded = true;
+      this.ensureInitialized();
+      this.kendoSearchDialog.open();
+      this.kendoComboBox.value("");
+      this.updateResultsUI(null);
+      this.toggleErrorLabel(false, null);
     } else {
-      clearColoredItems();
-      if (kendoSearchDialog && kendoSearchDialog.options.visible) {
-        kendoSearchDialog.close();
+      this.clearColoredItems();
+      if (this.kendoSearchDialog && this.kendoSearchDialog.options.visible) {
+        this.kendoSearchDialog.close();
       }
     }
   }
-  function ensureInitialized() {
-    if (!initialized) {
-      $placeholder = $(placeholder);
-      $inputBox = $placeholder.find(".trv-search-dialog-input-box");
-      $resultsLabel = $placeholder.find(".trv-search-dialog-results-label");
-      $resultsPlaceholder = $placeholder.find(".trv-search-dialog-results-area");
-      initResultsArea();
-      replaceStringResources($placeholder);
+  ensureInitialized() {
+    if (!this.initialized) {
+      this.$element = $(this.element);
+      this.$inputBox = this.$element.find(".trv-search-dialog-input-box");
+      this.$resultsLabel = this.$element.find(".trv-search-dialog-results-label");
+      this.$resultsPlaceholder = this.$element.find(".trv-search-dialog-results-area");
+      this.initResultsArea();
+      replaceStringResources(this.$element);
       try {
-        $searchOptionsPlaceholder = $placeholder.find(".trv-search-dialog-search-options").kendoMenu();
-        $stopSearchPlaceholder = $placeholder.find(".trv-search-dialog-stopsearch-placeholder").kendoMenu();
-        $navigationPlaceholder = $placeholder.find(".trv-search-dialog-navigational-buttons").kendoMenu();
-      } catch (e) {
-        console.error("Instantiation of Kendo Menu for Search Dialog threw an exception", e);
-        throw e;
+        this.$searchOptionsPlaceholder = this.$element.find(".trv-search-dialog-search-options").kendoMenu();
+        this.$stopSearchPlaceholder = this.$element.find(".trv-search-dialog-stopsearch-placeholder").kendoMenu();
+        this.$navigationPlaceholder = this.$element.find(".trv-search-dialog-navigational-buttons").kendoMenu();
+      } catch (error) {
+        console.error("Instantiation of Kendo Menu for Search Dialog threw an exception", error);
+        throw error;
       }
-      searchOptionsMenu = $searchOptionsPlaceholder.data("kendoMenu");
-      stopSearchMenu = $stopSearchPlaceholder.data("kendoMenu");
-      navigationMenu = $navigationPlaceholder.data("kendoMenu");
-      searchOptionsMenu.element.on("keydown", onKeyDown);
-      stopSearchMenu.element.on("keydown", onKeyDown);
-      navigationMenu.element.on("keydown", onKeyDown);
-      overrideDefaultMenuStyling(".trv-search-dialog-search-options");
+      this.searchOptionsMenu = this.$searchOptionsPlaceholder.data("kendoMenu");
+      this.stopSearchMenu = this.$stopSearchPlaceholder.data("kendoMenu");
+      this.navigationMenu = this.$navigationPlaceholder.data("kendoMenu");
+      this.searchOptionsMenu.element.on("keydown", this.onKeyDown);
+      this.stopSearchMenu.element.on("keydown", this.onKeyDown);
+      this.navigationMenu.element.on("keydown", this.onKeyDown);
+      this.overrideDefaultMenuStyling(".trv-search-dialog-search-options");
       try {
-        kendoComboBox = $inputBox.kendoComboBox({
+        this.kendoComboBox = this.$inputBox.kendoComboBox({
           dataTextField: "value",
           dataValueField: "value",
-          dataSource: mruList,
+          dataSource: this.mruList,
           contentElement: "",
-          change: kendoComboBoxSelect,
+          change: this.kendoComboBoxSelect.bind(this),
           ignoreCase: false,
-          filtering: onInputFiltering,
-          //the actual search-when-typing performs on this event.
+          // the actual search-when-typing performs on this event.
+          filtering: this.onInputFiltering.bind(this),
           filter: "startswith",
           delay: 1e3,
-          open: function(e) {
-            if (inputComboRebinding) {
-              e.preventDefault();
+          open: (event) => {
+            if (this.inputComboRebinding) {
+              event.preventDefault();
             }
           },
-          select: processComboBoxEvent
+          select: this.processComboBoxEvent.bind(this)
         }).data("kendoComboBox");
-      } catch (e) {
-        console.error("Instantiation of Kendo ComboBox as search input threw an exception", e);
-        throw e;
+      } catch (error) {
+        console.error("Instantiation of Kendo ComboBox as search input threw an exception", error);
+        throw error;
       }
       try {
-        kendoSearchDialog = reportViewerWrapper.find(".trv-search-window").kendoWindow({
+        this.kendoSearchDialog = this.reportViewerWrapper.find(".trv-search-window").kendoWindow({
           title: stringResources.searchDialogTitle,
           height: 390,
           width: 310,
@@ -150,38 +197,38 @@ function Search(placeholder, options, viewerOptions) {
           minHeight: 390,
           maxHeight: 700,
           scrollable: false,
-          close: function() {
-            storeDialogPosition();
-            lastSearch = "";
+          close: () => {
+            this.storeDialogPosition();
+            this.lastSearch = "";
           },
-          open: function() {
-            adjustDialogPosition();
+          open: () => {
+            this.adjustDialogPosition();
           },
-          deactivate: function() {
-            controller.setSearchDialogVisible({
+          deactivate: () => {
+            this.controller.setSearchDialogVisible({
               visible: false
             });
           },
-          activate: function() {
-            kendoComboBox.input.focus();
+          activate: () => {
+            this.kendoComboBox.input.focus();
           }
         }).data("kendoWindow");
-      } catch (e) {
-        console.error("Instantiation of Kendo Window for Search dialog threw an exception", e);
-        throw e;
+      } catch (error) {
+        console.error("Instantiation of Kendo Window for Search dialog threw an exception", error);
+        throw error;
       }
-      kendoSearchDialog.wrapper.addClass("trv-search");
-      initCommands();
-      initialized = true;
+      this.kendoSearchDialog.wrapper.addClass("trv-search");
+      this.initCommands();
+      this.initialized = true;
     }
   }
-  function overrideDefaultMenuStyling(kendoMenuSelector) {
+  overrideDefaultMenuStyling(kendoMenuSelector) {
     var menuItems = $(kendoMenuSelector).find(".k-menu-item");
     for (var i = 0; i < menuItems.length; i++) {
       $(menuItems[i]).removeClass("k-item");
     }
   }
-  function onKeyDown(event) {
+  onKeyDown(event) {
     var item = $(event.target).find(".k-focus");
     if (event.keyCode === 13 && item && item.length > 0) {
       var anchor = item.children("a");
@@ -190,44 +237,38 @@ function Search(placeholder, options, viewerOptions) {
       }
     }
   }
-  $(window).resize(function() {
-    if (kendoSearchDialog && kendoSearchDialog.options.visible) {
-      storeDialogPosition();
-      adjustDialogPosition();
-    }
-  });
-  function storeDialogPosition() {
-    var kendoWindow = kendoSearchDialog.element.parent(".k-window");
-    windowLocation = kendoWindow.offset();
+  storeDialogPosition() {
+    var kendoWindow = this.kendoSearchDialog.element.parent(".k-window");
+    this.windowLocation = kendoWindow.offset();
   }
-  function adjustDialogPosition() {
+  adjustDialogPosition() {
     var windowWidth = $(window).innerWidth();
     var windowHeight = $(window).innerHeight();
-    var kendoWindow = kendoSearchDialog.wrapper;
+    var kendoWindow = this.kendoSearchDialog.wrapper;
     var width = kendoWindow.outerWidth(true);
     var height = kendoWindow.outerHeight(true);
     var padding = 10;
-    if (!windowLocation) {
-      var reportViewerCoords = reportViewerWrapper[0].getBoundingClientRect();
+    if (!this.windowLocation) {
+      var reportViewerCoords = this.reportViewerWrapper[0].getBoundingClientRect();
       kendoWindow.css({
         top: reportViewerCoords.top + padding,
         left: reportViewerCoords.right - width - padding
       });
-      kendoSearchDialog.setOptions({
+      this.kendoSearchDialog.setOptions({
         position: {
           top: reportViewerCoords.top + padding,
           left: reportViewerCoords.right - width - padding
         }
       });
     } else {
-      var left = windowLocation.left;
-      var top = windowLocation.top;
+      var left = this.windowLocation.left;
+      var top = this.windowLocation.top;
       var right = left + width;
       var bottom = top + height;
       if (right > windowWidth - padding) {
         left = Math.max(padding, windowWidth - width - padding);
         kendoWindow.css({ left });
-        kendoSearchDialog.setOptions({
+        this.kendoSearchDialog.setOptions({
           position: {
             left
           }
@@ -236,7 +277,7 @@ function Search(placeholder, options, viewerOptions) {
       if (bottom > windowHeight - padding) {
         top = Math.max(padding, windowHeight - height - padding);
         kendoWindow.css({ top });
-        kendoSearchDialog.setOptions({
+        this.kendoSearchDialog.setOptions({
           position: {
             top
           }
@@ -244,272 +285,251 @@ function Search(placeholder, options, viewerOptions) {
       }
     }
   }
-  function processComboBoxEvent(e) {
+  processComboBoxEvent(event) {
     if (!(window.event || window.event.type)) {
       return;
     }
     var evt = window.event;
     if (evt.type === "keydown") {
-      e.preventDefault();
+      event.preventDefault();
       if (evt.keyCode === 40) {
-        moveListSelection(1);
-      } else if (evt.keyCode === 38) {
-        moveListSelection(-1);
+        this.moveListSelection(1);
+      }
+      if (evt.keyCode === 38) {
+        this.moveListSelection(-1);
       }
     }
   }
-  function initCommands() {
-    optionsCommandSet = {
-      //the command names MUST match the commands in the template.html with the "telerik_Reportviewer" prefix so the binder could work.
-      "searchDialog_MatchCase": new command(function() {
-        toggleCommand(this);
-      }),
-      "searchDialog_MatchWholeWord": new command(function() {
-        toggleCommand(this);
-      }),
-      "searchDialog_UseRegex": new command(function() {
-        toggleCommand(this);
-      })
+  initCommands() {
+    this.optionsCommandSet = {
+      "searchDialog_MatchCase": new Command(),
+      "searchDialog_MatchWholeWord": new Command(),
+      "searchDialog_UseRegex": new Command()
     };
-    Binder.bind(
-      $searchOptionsPlaceholder,
-      {
-        controller,
-        commands: optionsCommandSet
-      },
-      viewerOptions
-    );
-    stopSearchCommand = new command(function() {
-      stopSearch();
+    Object.entries(this.optionsCommandSet).forEach(([commandName, command]) => {
+      command.exec = () => {
+        this.toggleCommand(command);
+      };
     });
-    Binder.bind(
-      $stopSearchPlaceholder,
-      {
-        controller,
-        commands: { "searchDialog_StopSearch": stopSearchCommand }
-      },
-      viewerOptions
-    );
-    navigationCommandSet = {
-      "searchDialog_NavigateUp": new command(function() {
-        moveListSelection(-1);
+    Binder.attachCommands(this.$searchOptionsPlaceholder, this.optionsCommandSet, this.viewerOptions);
+    this.stopSearchCommand = new Command(() => {
+      this.stopSearch();
+    });
+    Binder.attachCommands(this.$stopSearchPlaceholder, { "searchDialog_StopSearch": this.stopSearchCommand }, this.viewerOptions);
+    this.navigationCommandSet = {
+      "searchDialog_NavigateUp": new Command(() => {
+        this.moveListSelection(-1);
       }),
-      "searchDialog_NavigateDown": new command(function() {
-        moveListSelection(1);
+      "searchDialog_NavigateDown": new Command(() => {
+        this.moveListSelection(1);
       })
     };
-    Binder.bind(
-      $navigationPlaceholder,
-      {
-        controller,
-        commands: navigationCommandSet
-      },
-      viewerOptions
-    );
+    Binder.attachCommands(this.$navigationPlaceholder, this.navigationCommandSet, this.viewerOptions);
   }
-  function initResultsArea() {
+  initResultsArea() {
     try {
-      $resultsPlaceholder.kendoListView({
+      this.$resultsPlaceholder.kendoListView({
         selectable: true,
         navigatable: true,
         dataSource: {},
         contentElement: "",
         template: "<div class='trv-search-dialog-results-row'><span>#: description #</span> <span class='trv-search-dialog-results-pageSpan'>" + stringResources.searchDialogPageText + " #:page#</span></div>",
-        change: function() {
-          var index = this.select().index();
-          var view = this.dataSource.view();
+        change: (event) => {
+          var listView = event.sender;
+          var index = listView.select().index();
+          var view = listView.dataSource.view();
           var dataItem = view[index];
-          onSelectedItem(dataItem);
-          updateUI(index, view.length);
+          this.onSelectedItem(dataItem);
+          this.updateUI(index, view.length);
         }
       });
-    } catch (e) {
-      console.error("Instantiation of Kendo ListView as search result area threw an exception", e);
-      throw e;
+    } catch (error) {
+      console.error("Instantiation of Kendo ListView as search result area threw an exception", error);
+      throw error;
     }
   }
-  function stopSearch() {
-    setStopButtonEnabledState(false);
+  stopSearch() {
+    this.setStopButtonEnabledState(false);
   }
-  function toggleCommand(cmd) {
+  toggleCommand(cmd) {
     cmd.checked(!cmd.checked());
-    searchForCurrentToken();
+    this.searchForCurrentToken();
   }
-  function setStopButtonEnabledState(enabledState) {
-    stopSearchCommand.enabled(enabledState);
+  setStopButtonEnabledState(enabledState) {
+    this.stopSearchCommand.enabled(enabledState);
   }
-  function onPageReady(args, page) {
-    if (dialogVisible) {
-      colorPageElements(searchResults);
+  onPageReady(args, page) {
+    if (this.dialogVisible) {
+      this.colorPageElements(this.searchResults);
     }
   }
-  function onInputFiltering(e) {
-    e.preventDefault();
-    if (e.filter && e.filter.value !== lastSearch) {
-      lastSearch = e.filter.value;
-      searchForToken(lastSearch);
+  onInputFiltering(event) {
+    event.preventDefault();
+    if (event.filter && event.filter.value !== this.lastSearch) {
+      this.lastSearch = event.filter.value;
+      this.searchForToken(this.lastSearch);
     }
   }
-  function kendoComboBoxSelect(e) {
-    var newValue = e.sender.value();
-    if (newValue && lastSearch !== newValue) {
-      lastSearch = newValue;
-      searchForToken(lastSearch);
+  kendoComboBoxSelect(event) {
+    var newValue = event.sender.value();
+    if (newValue && this.lastSearch !== newValue) {
+      this.lastSearch = newValue;
+      this.searchForToken(this.lastSearch);
     }
   }
-  function searchForCurrentToken() {
-    if (kendoComboBox) {
-      searchForToken(kendoComboBox.value());
+  searchForCurrentToken() {
+    if (this.kendoComboBox) {
+      this.searchForToken(this.kendoComboBox.value());
     }
   }
-  function searchForToken(token) {
-    onSearchStarted();
-    addToMRU(token);
-    controller.getSearchResults(
+  searchForToken(token) {
+    this.onSearchStarted();
+    this.addToMRU(token);
+    this.controller.getSearchResults(
       {
         searchToken: token,
-        matchCase: optionsCommandSet.searchDialog_MatchCase.checked(),
-        matchWholeWord: optionsCommandSet.searchDialog_MatchWholeWord.checked(),
-        useRegex: optionsCommandSet.searchDialog_UseRegex.checked()
+        matchCase: this.optionsCommandSet.searchDialog_MatchCase.checked(),
+        matchWholeWord: this.optionsCommandSet.searchDialog_MatchWholeWord.checked(),
+        useRegex: this.optionsCommandSet.searchDialog_UseRegex.checked()
       }
-    ).then(function(results) {
-      updateResultsUI(results, null);
-    }).catch(function(errorMessage) {
+    ).then((results) => {
+      this.updateResultsUI(results, null);
+    }).catch((errorMessage) => {
       if (errorMessage) {
-        updateResultsUI(null, errorMessage);
+        this.updateResultsUI(null, errorMessage);
       }
     });
   }
-  function onSearchStarted() {
-    $resultsLabel.text(stringResources.searchDialogSearchInProgress);
-    clearColoredItems();
-    searchResults = null;
-    setStopButtonEnabledState(true);
-    toggleErrorLabel(false, null);
+  onSearchStarted() {
+    this.$resultsLabel.text(stringResources.searchDialogSearchInProgress);
+    this.clearColoredItems();
+    this.searchResults = null;
+    this.setStopButtonEnabledState(true);
+    this.toggleErrorLabel(false, null);
   }
-  function updateResultsUI(results, error) {
-    setStopButtonEnabledState(false);
+  updateResultsUI(results, error) {
+    this.setStopButtonEnabledState(false);
     if (error) {
-      toggleErrorLabel(true, error);
+      this.toggleErrorLabel(true, error);
     }
-    displayResultsList(results);
-    searchResults = results;
+    this.displayResultsList(results);
+    this.searchResults = results;
     if (results && results.length > 0) {
-      colorPageElements(results);
-      selectFirstElement();
+      this.colorPageElements(results);
+      this.selectFirstElement();
     } else {
-      updateUI(-1, 0);
+      this.updateUI(-1, 0);
     }
   }
-  function addToMRU(token) {
+  addToMRU(token) {
     if (!token || token === "") {
       return;
     }
-    var exists = mruList.filter(function(mru) {
+    var exists = this.mruList.filter((mru) => {
       return mru.value === token;
     });
     if (exists && exists.length > 0) {
       return;
     }
-    mruList.unshift({ value: token });
-    if (mruList.length > 10) {
-      mruList.pop();
+    this.mruList.unshift({ value: token });
+    if (this.mruList.length > 10) {
+      this.mruList.pop();
     }
-    inputComboRebinding = true;
-    kendoComboBox.dataSource.data(mruList);
-    kendoComboBox.select(function(item) {
+    this.inputComboRebinding = true;
+    this.kendoComboBox.dataSource.data(this.mruList);
+    this.kendoComboBox.select((item) => {
       return item.value === token;
     });
-    inputComboRebinding = false;
+    this.inputComboRebinding = false;
   }
-  function displayResultsList(results) {
-    var $listView = $resultsPlaceholder.data("kendoListView");
+  displayResultsList(results) {
+    var $listView = this.$resultsPlaceholder.data("kendoListView");
     if (!results) {
       results = [];
     }
     $listView.dataSource.data(results);
   }
-  function colorPageElements(results) {
+  colorPageElements(results) {
     if (!results || results.length === 0) {
       return;
     }
-    var $parent = $placeholder.parent();
+    var $parent = this.$element.parent();
     var $pageContainer = $parent.find(".trv-page-container");
     var elements = $pageContainer.find("[data-search-id]");
-    each(results, function() {
-      var $searchElement = elements.filter("[data-search-id=" + this.id + "]");
+    Array.from(results).forEach((result) => {
+      var $searchElement = elements.filter("[data-search-id=" + result.id + "]");
       if ($searchElement) {
-        $searchElement.addClass(highlightManager.shadedClassName);
-        highlightManager.elements.push($searchElement);
+        $searchElement.addClass(this.highlightManager.shadedClassName);
+        this.highlightManager.elements.push($searchElement);
       }
     });
-    highlightItem(pendingHighlightItem);
-    pendingHighlightItem = null;
+    this.highlightItem(this.pendingHighlightItem);
+    this.pendingHighlightItem = null;
   }
-  function highlightItem(item) {
+  highlightItem(item) {
     if (item) {
       var currentItemId = item.id;
-      var newHighlighted = $(highlightManager.elements.filter(function(i) {
+      var newHighlighted = $(this.highlightManager.elements.filter((i) => {
         return i.attr("data-search-id") === currentItemId;
       })).first();
       if (newHighlighted) {
-        highlightManager.current = newHighlighted[0];
-        if (highlightManager.current) {
+        this.highlightManager.current = newHighlighted[0];
+        if (this.highlightManager.current) {
           var current = $("[data-search-id='" + currentItemId + "']");
-          current.removeClass(highlightManager.shadedClassName);
-          current.addClass(highlightManager.highlightedClassName);
+          current.removeClass(this.highlightManager.shadedClassName);
+          current.addClass(this.highlightManager.highlightedClassName);
         }
       }
     }
   }
-  function selectFirstElement() {
-    var $listView = $resultsPlaceholder.data("kendoListView");
+  selectFirstElement() {
+    var $listView = this.$resultsPlaceholder.data("kendoListView");
     var first = $listView.element.children().first();
     $listView.select(first);
     $listView.trigger("change");
   }
-  function onSelectedItem(item) {
+  onSelectedItem(item) {
     if (!item) {
       return;
     }
-    if (highlightManager.current) {
-      highlightManager.current.removeClass(highlightManager.highlightedClassName);
-      highlightManager.current.addClass(highlightManager.shadedClassName);
+    if (this.highlightManager.current) {
+      this.highlightManager.current.removeClass(this.highlightManager.highlightedClassName);
+      this.highlightManager.current.addClass(this.highlightManager.shadedClassName);
     }
-    if (item.page === controller.getCurrentPageNumber()) {
-      highlightItem(item);
+    if (item.page === this.controller.getCurrentPageNumber()) {
+      this.highlightItem(item);
     } else {
-      if (controller.getPageMode() !== PageModes.CONTINUOUS_SCROLL) {
-        clearColoredItems();
+      if (this.controller.getPageMode() !== PageModes.CONTINUOUS_SCROLL) {
+        this.clearColoredItems();
       } else {
-        highlightItem(item);
+        this.highlightItem(item);
       }
     }
-    pendingHighlightItem = item;
-    controller.navigateToPage(item.page, { type: "search", id: item.id });
+    this.pendingHighlightItem = item;
+    this.controller.navigateToPage(item.page, { type: "search", id: item.id });
   }
-  function updateUI(index, count) {
+  updateUI(index, count) {
     var str = count === 0 ? stringResources.searchDialogNoResultsLabel : stringFormat(stringResources.searchDialogResultsFormatLabel, [index + 1, count]);
-    $resultsLabel.text(str);
+    this.$resultsLabel.text(str);
     var allowMoveUp = index > 0;
     var allowMoveDown = index < count - 1;
-    navigationCommandSet.searchDialog_NavigateUp.enabled(allowMoveUp);
-    navigationCommandSet.searchDialog_NavigateDown.enabled(allowMoveDown);
+    this.navigationCommandSet.searchDialog_NavigateUp.enabled(allowMoveUp);
+    this.navigationCommandSet.searchDialog_NavigateDown.enabled(allowMoveDown);
   }
-  function clearColoredItems() {
-    if (highlightManager.elements && highlightManager.elements.length > 0) {
-      each(highlightManager.elements, function() {
-        this.removeClass(highlightManager.shadedClassName);
+  clearColoredItems() {
+    if (this.highlightManager.elements && this.highlightManager.elements.length > 0) {
+      Array.from(this.highlightManager.elements).forEach(($element) => {
+        $element.removeClass(this.highlightManager.shadedClassName);
       });
     }
-    if (highlightManager.current) {
-      highlightManager.current.removeClass(highlightManager.highlightedClassName);
+    if (this.highlightManager.current) {
+      this.highlightManager.current.removeClass(this.highlightManager.highlightedClassName);
     }
-    highlightManager.elements = [];
-    highlightManager.current = null;
+    this.highlightManager.elements = [];
+    this.highlightManager.current = null;
   }
-  function moveListSelection(offset) {
-    var $listView = $resultsPlaceholder.data("kendoListView");
+  moveListSelection(offset) {
+    var $listView = this.$resultsPlaceholder.data("kendoListView");
     var $selected = $listView.select();
     if (!$selected) {
       $selected = $listView.element.children().first();
@@ -525,12 +545,12 @@ function Search(placeholder, options, viewerOptions) {
         if (element) {
           $listView.select(element);
           $listView.trigger("change");
-          scrollIfNeeded(element[0], $listView.element[0]);
+          this.scrollIfNeeded(element[0], $listView.element[0]);
         }
       }
     }
   }
-  function scrollIfNeeded(element, container) {
+  scrollIfNeeded(element, container) {
     if (element.offsetTop - element.clientHeight < container.scrollTop) {
       element.scrollIntoView();
     } else {
@@ -541,13 +561,13 @@ function Search(placeholder, options, viewerOptions) {
       }
     }
   }
-  function toggleErrorLabel(show, message) {
-    var $errorIcon = $searchOptionsPlaceholder.find("i[data-role='telerik_ReportViewer_SearchDialog_Error']");
+  toggleErrorLabel(show, message) {
+    var $errorIcon = this.$searchOptionsPlaceholder.find("i[data-role='telerik_ReportViewer_SearchDialog_Error']");
     if (!$errorIcon || $errorIcon.length === 0) {
       console.log(message);
       return;
     }
-    var menuItem = $searchOptionsPlaceholder.data("kendoMenu").element.find("li").last();
+    var menuItem = this.$searchOptionsPlaceholder.data("kendoMenu").element.find("li").last();
     if (show) {
       $errorIcon[0].title = message;
       menuItem.show();
@@ -555,76 +575,6 @@ function Search(placeholder, options, viewerOptions) {
       menuItem.hide();
     }
   }
-  function replaceStringResources($search) {
-    if (!$search) {
-      return;
-    }
-    var $searchCaption = $search.find(".trv-search-dialog-caption-label");
-    var $searchOptions = $search.find(".trv-search-dialog-search-options");
-    var $searchStopButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_StopSearch']");
-    var $searchMatchCaseButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchCase']");
-    var $searchMatchWholeWordButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchWholeWord']");
-    var $searchUseRegexButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_UseRegex']");
-    var $searchNavigateUpButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateUp']");
-    var $searchNavigateDownButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateDown']");
-    replaceAttribute($search, "aria-label");
-    replaceAttribute($searchOptions, "aria-label");
-    replaceText($searchCaption);
-    replaceTitleAndAriaLabel($searchStopButton);
-    replaceTitleAndAriaLabel($searchMatchCaseButton);
-    replaceTitleAndAriaLabel($searchMatchWholeWordButton);
-    replaceTitleAndAriaLabel($searchUseRegexButton);
-    replaceTitleAndAriaLabel($searchNavigateUpButton);
-    replaceTitleAndAriaLabel($searchNavigateDownButton);
-  }
-  function replaceTitleAndAriaLabel($a) {
-    replaceAttribute($a, "title");
-    replaceAttribute($a, "aria-label");
-  }
-  function replaceText($el) {
-    if ($el) {
-      $el.text(stringResources[$el.text()]);
-    }
-  }
-  function replaceAttribute($el, attribute) {
-    if ($el) {
-      $el.attr(attribute, stringResources[$el.attr(attribute)]);
-    }
-  }
-  function command(execCallback) {
-    var enabledState = true;
-    var checkedState = false;
-    var cmd = {
-      enabled: function(state) {
-        if (arguments.length === 0) {
-          return enabledState;
-        }
-        var newState = Boolean(state);
-        enabledState = newState;
-        $(this).trigger("enabledChanged");
-        return cmd;
-      },
-      checked: function(state) {
-        if (arguments.length === 0) {
-          return checkedState;
-        }
-        var newState = Boolean(state);
-        checkedState = newState;
-        $(this).trigger("checkedChanged");
-        return cmd;
-      },
-      exec: execCallback
-    };
-    return cmd;
-  }
 }
-var pluginName = "telerik_ReportViewer_SearchDialog";
-$.fn[pluginName] = function(options, viewerOptions) {
-  return each(this, function() {
-    if (!$.data(this, pluginName)) {
-      $.data(this, pluginName, new Search(this, options, viewerOptions));
-    }
-  });
-};
 
 export { Search };