devexpress-reporting 23.1.5 → 23.2.1-alpha-23254-1700

package/viewer/search/_searchViewModel.js

@@ -1,178 +1,91 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\search\_searchViewModel.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { formatUnicorn, guid } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, getLocalization, TabInfo } from '@devexpress/analytics-core/analytics-utils';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { formatUnicorn, guid, KeyboardEnum, generateIconTemplate } from '@devexpress/analytics-core/analytics-internal-native';
+import { getLocalization, TabInfo } from '@devexpress/analytics-core/analytics-utils-native';
 import DataSource from 'devextreme/data/data_source';
-import * as ko from 'knockout';
 import * as $ from 'jquery';
 import { SearchKeyboardHelper } from '../accessibility/_searchKeyboardHelper';
 import { ActionId } from '../constants';
 import { SearchAvailable } from '../settings';
 import { SearchResultNavigator } from './_searchResultNavigator';
 import CustomStore from 'devextreme/data/custom_store';
-export class SearchViewModel extends Disposable {
+import { BaseRenderingModel, createViewModelGenerator, mutable, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
+import { formatSearchResult } from './_utils';
+export class SearchViewModel extends BaseRenderingModel {
     constructor(reportPreview, searchSettings, enableKeyboardSupport) {
         var _a, _b;
         super();
-        this._searchIgnoreObs = ko.observable(false);
-        this.itemClickAction = (e) => {
-            this.goToResult(e.data);
-        };
+        this.reportPreview = reportPreview;
+        this._searchIgnoreObs = false;
         this.actions = [];
-        this.focusRequested = ko.observable(true);
-        this.matchWholeWord = ko.observable(false);
-        this.matchCase = ko.observable(false);
-        this.searchUp = ko.observable(false);
-        this.searchText = ko.observable();
-        this.searchResult = ko.observable();
-        this.loading = ko.observable(false);
-        this.searchCompleted = ko.observable(false);
-        this._renderedSearchResult = ko.observable([]);
-        this.searchResultDataSource = ko.observable(new DataSource([]));
-        this.useAsyncSearch = ko.observable(true);
+        this.searchUp = false;
+        this.searchResultCount = 0;
+        this.searchResultPageCount = 0;
+        this.stopSearchDisabled = false;
+        this.searchCompleted = false;
+        this._renderedSearchResult = [];
+        this.useAsyncSearch = true;
         this.searchRequestDeferred = $.Deferred();
         this.startSearchDeferred = $.Deferred();
         this.fetchLimit = 1000;
-        this.pageSize = 20;
-        this.searchResultHeaderId = `dxrd-${guid()}`;
+        this.pageSize = 30;
         this.resetSearchResult();
-        this.useAsyncSearch((_a = searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.useAsyncSearch) !== null && _a !== void 0 ? _a : true);
+        this.useAsyncSearch = (_a = searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.useAsyncSearch) !== null && _a !== void 0 ? _a : true;
         var searchEnabled = (_b = searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.searchEnabled) !== null && _b !== void 0 ? _b : true;
         if (!searchEnabled && SearchAvailable()) {
             SearchAvailable(false);
         }
         this._resultNavigator = SearchViewModel.createResultNavigator(this, reportPreview);
-        this.clean = () => { this.searchText(''); };
-        this._disposables.push(reportPreview._currentDocumentId.subscribe((newVal) => {
+        const getDisabled = () => reportPreview.documentBuilding || !reportPreview.documentId || reportPreview.pageIndex === -1;
+        let onDisabledChanged = null;
+        this.addDisposable(reportPreview.events.on('documentIdChanged', (args) => {
             this.resetSearchResult();
-        }));
-        this._disposables.push(reportPreview._currentReportId.subscribe((newVal) => {
+            this.tabInfo.visible = tabInfoVisible();
+            onDisabledChanged && onDisabledChanged(getDisabled());
+        }), reportPreview.events.on('pageIndexChanged', (args) => {
+            this.tabInfo.visible = tabInfoVisible();
+            onDisabledChanged && onDisabledChanged(getDisabled());
+        }), reportPreview.events.on('documentBuildingChanged', (args) => {
+            this.tabInfo.visible = tabInfoVisible();
+            onDisabledChanged && onDisabledChanged(getDisabled());
+        }), reportPreview.events.on('reportIdChanged', (args) => {
             this.resetSearchResult();
         }));
-        this.findUp = () => { this.searchUp(true); this.findNext(); };
-        this.findDown = () => { this.searchUp(false); this.findNext(); };
-        this.goToResult = (result) => { this._resultNavigator.goToResult(result.id); };
-        this._disposables.push(this.searchResultCount = ko.computed(() => {
-            var _a, _b;
-            return this.searchResult ? ((_b = (_a = this.searchResult()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) : 0;
-        }));
-        this._disposables.push(this.searchResultPageCount = ko.computed(() => {
-            var _a;
-            if ((_a = this.searchResult()) === null || _a === void 0 ? void 0 : _a.length) {
-                return new Set((this.searchResult().map(result => result.pageIndex))).size;
-            }
-            return 0;
-        }, this.stopSearchDisabled = ko.computed(() => this.loading() && !this.useAsyncSearch())));
-        this.newSearch = (text, matchCase, matchWholeWord) => {
-            this._searchTimeout && clearTimeout(this._searchTimeout);
-            this._searchTimeout = setTimeout(() => {
-                this._resultNavigator.currentResult(null);
-                var mCase = this.matchCase();
-                text = mCase ? this.searchText() : this.searchText().toLocaleLowerCase();
-                var cache = this.matchWholeWord()
-                    ? mCase ? this._cachedWholeWordWithCaseRequests : this._cachedWholeWordRequests
-                    : mCase ? this._cachedCaseSensitiveRequests : this._cachedRequests;
-                if (cache[text]) {
-                    this.loading(false);
-                    this.searchResult(cache[text]);
-                    return;
-                }
-                this._searchIgnoreObs(true);
-                this._searchIgnoreObs = ko.observable(false);
-                ((ignore) => {
-                    if (this.useAsyncSearch())
-                        this.performSearchAsync(text, reportPreview, ignore);
-                    else
-                        this.performSearch(text, reportPreview, cache, ignore);
-                })(this._searchIgnoreObs);
-            }, 100);
-        };
-        this.findNext = () => {
-            if (this.loading() && !this.useAsyncSearch()) {
-                return;
-            }
-            this._resultNavigator.next(this.searchUp());
-        };
-        this.stopSearchProcess = () => {
-            this.resetDeffereds();
-            if (this.searchOperationId && this.searchOperationId.length) {
-                reportPreview.requestWrapper.stopSearch(this.searchOperationId, ko.observable(false));
-            }
-            this.loading(false);
-            this.searchCompleted(false);
-        };
-        this.startSearchProcess = () => {
-            this.resetDeffereds();
-            this.searchCompleted(false);
-            this.searchResult([]);
-            this.resetSearchResultDataSource();
-            if (this.searchText()) {
-                this.loading(true);
-                this.newSearch(this.searchText(), this.matchCase(), this.matchWholeWord());
-            }
-            else {
-                reportPreview.pages() && reportPreview.pages()[reportPreview.pageIndex()] && reportPreview.pages()[reportPreview.pageIndex()].selectBrick('');
-            }
-        };
-        this.searchButtonClick = () => {
-            if (this.loading()) {
-                this.stopSearchProcess();
-            }
-            else {
-                this.startSearchProcess();
-            }
-        };
-        var updateSearch = (timeout) => {
-            if (!this.useAsyncSearch()) {
-                setTimeout(() => {
-                    this.startSearchProcess();
-                }, timeout);
-                return;
-            }
-            if (this.loading())
-                this.stopSearchProcess();
-            setTimeout(() => {
-                if (!this.loading())
-                    this.startSearchProcess();
-            }, timeout);
-        };
-        this._disposables.push(this.searchText.subscribe(() => {
-            updateSearch(200);
-        }));
-        this._disposables.push(this.matchCase.subscribe(() => {
-            updateSearch(100);
-        }));
-        this._disposables.push(this.matchWholeWord.subscribe(() => {
-            updateSearch(100);
-        }));
-        var disabled = ko.pureComputed(() => {
-            var documentId = reportPreview['_currentDocumentId']();
-            var pageIndex = reportPreview.pageIndex();
-            return reportPreview.documentBuilding() || !documentId || pageIndex === -1;
-        });
-        var visible = ko.pureComputed(() => SearchAvailable());
-        this._disposables.push(disabled, visible);
+        var tabInfoVisible = () => !getDisabled() && SearchAvailable();
         this.actions.push({
             id: ActionId.Search,
             text: getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header'),
             imageClassName: 'dxrd-image-search',
             imageTemplateName: 'dxrd-svg-preview-search',
-            disabled: disabled,
-            visible: visible,
+            getDisabled: () => getDisabled(),
+            setDisabledChangedEvent: (callback) => {
+                onDisabledChanged = callback;
+                return () => onDisabledChanged = undefined;
+            },
+            setVisibleChangedEvent: (callback) => {
+                const handler = () => callback(SearchAvailable());
+                const subscriptionDispose = SearchAvailable.subscribe(handler);
+                return () => {
+                    subscriptionDispose();
+                };
+            },
+            getVisible: () => SearchAvailable(),
             hasSeparator: true,
             hotKey: { ctrlKey: false, keyCode: 70 },
             clickAction: () => {
-                if (!this.tabInfo.active()) {
-                    this.tabInfo.active(true);
-                }
-                else {
-                    this.tabInfo.active.notifySubscribers(true);
-                }
+                this.tabInfo.active = true;
+                this.tabInfo.collapsed = false;
             }
         });
         this.tabInfo = new TabInfo({
@@ -183,61 +96,147 @@ export class SearchViewModel extends Disposable {
             localizationId: 'ASPxReportsStringId.SearchDialog_Header',
             imageClassName: 'search',
             imageTemplateName: 'dxrd-svg-preview-search',
-            visible: ko.pureComputed(() => !disabled() && SearchAvailable())
+            visible: tabInfoVisible()
         });
-        this._disposables.push(this.searchResult.subscribe((newVal) => {
-            if (newVal) {
-                this._renderedSearchResult(newVal.map((item) => { return { data: item }; }));
-                if (this.searchResultDataSource().items().length < this.pageSize)
-                    this.searchResultDataSource().reload();
-            }
+        this.addDisposable(SearchAvailable.subscribe(() => {
+            this.tabInfo.visible = tabInfoVisible();
         }));
         this._disposables.push(this.tabInfo);
     }
+    updateViewModel(args) {
+        var viewModel = this.getViewModel();
+        viewModel.buttons.searchButton.text = this.loading ? getLocalization('Stop', 'ASPxReportsStringId.SearchDialog_StopButton') :
+            getLocalization('Search', 'ASPxReportsStringId.SearchDialog_SearchButton');
+        viewModel.buttons.searchButton.disabled = this.loading && !this.useAsyncSearch;
+        viewModel.buttons.searchButton.text = this.getSearchButtonText();
+        viewModel.searchCompleted = this.searchCompleted;
+        viewModel.searchResultCount = this.searchResultCount;
+        viewModel.searchResultPageCount = this.searchResultPageCount;
+        viewModel.noResultText = this.noResultText();
+        if (args.propertyName === 'searchResultDataSource')
+            viewModel.searchResultDataSource = this.searchResultDataSource;
+        if (args.propertyName === 'loading')
+            viewModel.loading = this.loading;
+    }
+    createViewModel() {
+        const searchViewModel = createViewModelGenerator(super.createViewModel())
+            .generateProperty('buttons', createViewModelGenerator()
+            .generateProperty('searchButton', createViewModelGenerator()
+            .generateProperty('text', this.getSearchButtonText())
+            .generateProperty('disabled', this.loading && !this.useAsyncSearch)
+            .generateProperty('onClick', () => this.searchButtonClick())
+            .getViewModel())
+            .generateProperty('upButton', createViewModelGenerator()
+            .generateProperty('template', generateIconTemplate(''))
+            .generateProperty('icon', 'dxrd-svg-operations-arrowup')
+            .generateProperty('onClick', () => this.findNext(true))
+            .getViewModel())
+            .generateProperty('downButton', createViewModelGenerator()
+            .generateProperty('template', generateIconTemplate(''))
+            .generateProperty('icon', 'dxrd-svg-operations-arrowdown')
+            .generateProperty('onClick', () => this.findNext(false))
+            .getViewModel())
+            .getViewModel())
+            .generateProperty('searchEditor', createViewModelGenerator()
+            .generateProperty('onKeyDown', (e) => {
+            const findNext = (searchUp, text) => {
+                if (this.searchText !== text) {
+                    this.searchText = text;
+                }
+                else {
+                    this.findNext(searchUp);
+                    return true;
+                }
+            };
+            if (e.event.key === KeyboardEnum.Enter) {
+                e.event.stopPropagation();
+                e.event.preventDefault();
+                findNext(e.event.shiftKey, e.component.option('text'));
+            }
+            if (e.event.key == 'ArrowUp')
+                findNext(true, e.component.option('text')) && e.event.stopPropagation();
+            if (e.event.key == 'ArrowDown')
+                findNext(false, e.component.option('text')) && e.event.stopPropagation();
+        })
+            .generateProperty('onFocusOut', (e) => this.onSearchTextChanged(e))
+            .generateProperty('inputAttr', {
+            type: 'search',
+            title: getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header')
+        })
+            .getViewModel())
+            .generateProperty('matchCaseEditor', createViewModelGenerator()
+            .generateProperty('text', getLocalization('Match case', 'ASPxReportsStringId.SearchDialog_Case'))
+            .generateProperty('value', this.matchCase)
+            .generateProperty('onValueChanged', (event) => {
+            this.matchCase = event.value;
+        })
+            .getViewModel())
+            .generateProperty('matchWholeWordEditor', createViewModelGenerator()
+            .generateProperty('text', getLocalization('Match whole word only', 'ASPxReportsStringId.SearchDialog_WholeWord'))
+            .generateProperty('value', this.matchWholeWord)
+            .generateProperty('onValueChanged', (event) => {
+            this.matchWholeWord = event.value;
+        })
+            .getViewModel())
+            .generateProperty('loading', this.loading)
+            .generateProperty('searchCompleted', this.searchCompleted)
+            .generateProperty('headerText', getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header'))
+            .generateProperty('noResultText', this.noResultText())
+            .generateProperty('searchResultCount', this.searchResultCount)
+            .generateProperty('searchResultPageCount', this.searchResultPageCount)
+            .generateProperty('resultsInText', getLocalization('results in', 'ASPxReportsStringId.SearchDialog_Results_In'))
+            .generateProperty('resultsPagesText', getLocalization('pages', 'ASPxReportsStringId.SearchDialog_Results_Pages'))
+            .generateProperty('searchResultHeaderId', `dxrd-${guid()}`)
+            .generateProperty('searchResultDataSource', this.searchResultDataSource)
+            .generateProperty('doSearch', (searchUp) => this.findNext(searchUp))
+            .generateProperty('onItemRendered', (event) => this.onItemRendered())
+            .getViewModel();
+        return searchViewModel;
+    }
     resetSearchResult() {
         this._cachedRequests = {};
         this._cachedWholeWordRequests = {};
         this._cachedCaseSensitiveRequests = {};
         this._cachedWholeWordWithCaseRequests = {};
-        this.searchResult([]);
-        this.searchText('');
+        this.searchResult = [];
+        this.searchText = '';
         this.resetSearchResultDataSource();
     }
     findTextRequestDone(result, cache) {
-        this.loading(false);
+        this.loading = false;
         if (!result) {
-            this.searchResult([]);
+            this.searchResult = [];
             return;
         }
         cache = (result.success ? result.matches : []) || [];
-        this.searchResult(cache);
+        this.searchResult = cache;
     }
     appentSearchResult(result) {
         if (result && result.matches && result.matches.length) {
-            this.searchResult([...this.searchResult(), ...result.matches]);
+            this.searchResult = [...this.searchResult, ...result.matches];
         }
     }
-    performSearchAsync(text, reportPreview, ignore = ko.observable(true)) {
+    performSearchAsync(text, reportPreview, ignore = true) {
         this.searchRequestDeferred.reject();
         var getResult = (searchOperationId, startIndex, fetchLimit, ignore) => {
             this.searchRequestDeferred = $.Deferred();
             reportPreview.requestWrapper.getSearchStatus(searchOperationId, startIndex, fetchLimit, ignore)
                 .done(result => this.searchRequestDeferred.resolve(result))
-                .fail(fail => this.failRequestHandler(fail, ignore()));
+                .fail(fail => this.failRequestHandler(ignore));
             this.searchRequestDeferred.done(result => {
                 if (result.faultMessage) {
-                    this.loading(false);
+                    this.loading = false;
                     return;
                 }
                 this.appentSearchResult(result);
                 if (result.completed) {
-                    this.loading(false);
-                    this.searchCompleted(true);
+                    this.loading = false;
+                    this.searchCompleted = true;
                     return;
                 }
                 if (result.requestAgain) {
                     setTimeout(() => {
-                        getResult(searchOperationId, this.searchResult().length, fetchLimit, ignore);
+                        getResult(searchOperationId, this.searchResult.length, fetchLimit, ignore);
                     }, 100);
                 }
             });
@@ -245,59 +244,71 @@ export class SearchViewModel extends Disposable {
         this.resetDeffereds();
         reportPreview.requestWrapper.startSearch(text, ignore)
             .done(result => this.startSearchDeferred.resolve(result))
-            .fail(fail => this.failRequestHandler(fail, ignore()));
+            .fail(fail => this.failRequestHandler(ignore));
         this.startSearchDeferred.done(result => {
             if (result.success) {
                 if (result.faultMessage) {
-                    this.failRequestHandler(result.faultMessage, ignore());
+                    this.failRequestHandler(ignore);
                     return;
                 }
                 if (result.completed) {
                     this.appentSearchResult(result);
-                    this.loading(false);
-                    this.searchCompleted(true);
+                    this.loading = false;
+                    this.searchCompleted = true;
                     return;
                 }
                 this.searchOperationId = result.searchOperationId;
                 getResult(this.searchOperationId, 0, this.fetchLimit, ignore);
             }
             else {
-                this.failRequestHandler(result.faultMessage, ignore());
+                this.failRequestHandler(ignore);
             }
         });
     }
-    performSearch(text, reportPreview, cache, ignore = ko.observable(true)) {
+    performSearch(text, reportPreview, cache, ignore = true) {
         this.resetDeffereds();
         reportPreview.requestWrapper.findTextRequest(text, ignore)
             .done(result => this.searchRequestDeferred.resolve(result))
-            .fail(fail => this.failRequestHandler(fail, ignore()));
+            .fail(fail => this.failRequestHandler(ignore));
         this.searchRequestDeferred.done((result) => {
-            if (!ignore())
+            if (!ignore)
                 this.findTextRequestDone(result, cache[text]);
-            this.searchCompleted(true);
+            this.searchCompleted = true;
         });
     }
+    mapSearchResultsToViewModels(results) {
+        return results.map(item => createViewModelGenerator()
+            .createDefaultModel(item)
+            .generateProperty('data', item.data)
+            .generateProperty('itemClickAction', (data) => this.goToResult(data))
+            .generateProperty('attr', {
+            'aria-label': item.data.text + ', ' + formatSearchResult(item.data) + ', ' + (this.searchResult.indexOf(item.data) + 1) + ' of ' + this.searchResult.length
+        })
+            .generateProperty('info', formatSearchResult(item.data))
+            .getViewModel());
+    }
     resetSearchResultDataSource() {
-        if (this.searchResultDataSource && this.searchResultDataSource()) {
-            this.searchResultDataSource().reload();
-            this.searchResultDataSource().dispose();
+        if (this.searchResultDataSource) {
+            this.searchResultDataSource.reload();
+            this.searchResultDataSource.dispose();
         }
-        this.searchResultDataSource(new DataSource({
+        this.searchResultDataSource = new DataSource({
             store: new CustomStore({
                 load: (loadOptions) => {
                     var resultData = [];
                     if (loadOptions.take) {
-                        resultData = this._renderedSearchResult().splice(loadOptions.skip, loadOptions.take);
+                        resultData = this._renderedSearchResult.splice(loadOptions.skip, loadOptions.take);
                     }
                     else
-                        resultData = this._renderedSearchResult();
-                    var totalCount = this.fetchLimit > this.searchResult().length ? this.fetchLimit : this.searchResult().length;
-                    return $.Deferred().resolve(resultData, { totalCount: totalCount });
+                        resultData = this._renderedSearchResult;
+                    var totalCount = this.fetchLimit > this.searchResult.length ? this.fetchLimit : this.searchResult.length;
+                    var resultViewModels = this.mapSearchResultsToViewModels(resultData);
+                    return $.Deferred().resolve(resultViewModels, { totalCount: totalCount });
                 }
             }),
             paginate: true,
             pageSize: this.pageSize
-        }));
+        });
     }
     resetDeffereds() {
         this.startSearchDeferred.reject();
@@ -305,17 +316,119 @@ export class SearchViewModel extends Disposable {
         this.searchRequestDeferred.reject();
         this.searchRequestDeferred = $.Deferred();
     }
-    failRequestHandler(fail, ignore) {
+    failRequestHandler(ignore) {
         if (!ignore) {
-            this.searchResult([]);
-            this.loading(false);
+            this.searchResult = [];
+            this.loading = false;
+        }
+    }
+    onPropertyChanged(args) {
+        var _a;
+        if (args.propertyName === 'matchCase' || args.propertyName === 'matchWholeWord') {
+            this.updateSearch(100);
+        }
+        if (args.propertyName === 'searchText') {
+            this.updateSearch(200);
+        }
+        if (args.propertyName === 'searchResult') {
+            if (this.searchResult) {
+                this._renderedSearchResult = this.searchResult.map((item) => { return { data: item }; });
+                if (this.searchResultDataSource.items().length < this.pageSize)
+                    this.searchResultDataSource.reload();
+            }
+            if ((_a = this.searchResult) === null || _a === void 0 ? void 0 : _a.length) {
+                this.searchResultPageCount = new Set((this.searchResult.map(result => result.pageIndex))).size;
+                this.searchResultCount = this.searchResult.length;
+            }
+            else {
+                this.searchResultPageCount = this.searchResultCount = 0;
+            }
+        }
+    }
+    goToResult(result) {
+        this._resultNavigator.goToResult(result.id);
+    }
+    newSearch(text, matchCase, matchWholeWord) {
+        this._searchTimeout && clearTimeout(this._searchTimeout);
+        this._searchTimeout = setTimeout(() => {
+            this._resultNavigator.currentResult = null;
+            var mCase = this.matchCase;
+            text = mCase ? this.searchText : this.searchText.toLocaleLowerCase();
+            var cache = this.matchWholeWord
+                ? mCase ? this._cachedWholeWordWithCaseRequests : this._cachedWholeWordRequests
+                : mCase ? this._cachedCaseSensitiveRequests : this._cachedRequests;
+            if (cache[text]) {
+                this.loading = false;
+                this.searchResult = cache[text];
+                return;
+            }
+            this._searchIgnoreObs = true;
+            this._searchIgnoreObs = false;
+            ((ignore) => {
+                if (this.useAsyncSearch)
+                    this.performSearchAsync(text, this.reportPreview, ignore);
+                else
+                    this.performSearch(text, this.reportPreview, cache, ignore);
+            })(this._searchIgnoreObs);
+        }, 100);
+    }
+    stopSearchProcess() {
+        this.resetDeffereds();
+        if (this.searchOperationId && this.searchOperationId.length) {
+            this.reportPreview.requestWrapper.stopSearch(this.searchOperationId, false);
         }
+        this.loading = false;
+        this.searchCompleted = false;
+    }
+    startSearchProcess() {
+        var _a;
+        this.resetDeffereds();
+        this.searchCompleted = false;
+        this.searchResult = [];
+        this.resetSearchResultDataSource();
+        if (this.searchText) {
+            this.loading = true;
+            this.newSearch(this.searchText, this.matchCase, this.matchWholeWord);
+        }
+        else {
+            (_a = this.reportPreview.currentPage) === null || _a === void 0 ? void 0 : _a.selectBrick('');
+        }
+    }
+    searchButtonClick() {
+        if (this.loading) {
+            this.stopSearchProcess();
+        }
+        else {
+            this.startSearchProcess();
+        }
+    }
+    updateSearch(timeout) {
+        if (!this.useAsyncSearch) {
+            setTimeout(() => {
+                this.startSearchProcess();
+            }, timeout);
+            return;
+        }
+        if (this.loading)
+            this.stopSearchProcess();
+        setTimeout(() => {
+            if (!this.loading)
+                this.startSearchProcess();
+        }, timeout);
+    }
+    findNext(searchUp) {
+        if (searchUp != undefined)
+            this.searchUp = searchUp;
+        if (this.loading && !this.useAsyncSearch) {
+            return;
+        }
+        this._resultNavigator.next(this.searchUp);
     }
     dispose() {
         this._searchTimeout && clearTimeout(this._searchTimeout);
         super.dispose();
     }
-    onItemRendered(e) {
+    onItemRendered() {
         this._timeoutItemRendered && clearTimeout(this._timeoutItemRendered);
         this._timeoutItemRendered = setTimeout(() => {
             this.tabInfo.keyboardHelper && this.tabInfo.keyboardHelper.initialize();
@@ -325,10 +438,33 @@ export class SearchViewModel extends Disposable {
         return this.actions;
     }
     noResultText() {
-        return formatUnicorn(getLocalization('No results found for {0}', 'ASPxReportsStringId.WebDocumentViewer_AriaSearchNoResults'), '"' + this.searchText() + '"');
+        return formatUnicorn(getLocalization('No results found for {0}', 'ASPxReportsStringId.WebDocumentViewer_AriaSearchNoResults'), '"' + this.searchText + '"');
+    }
+    getSearchButtonText() {
+        return this.loading ? getLocalization('Stop', 'ASPxReportsStringId.SearchDialog_StopButton') : getLocalization('Search', 'ASPxReportsStringId.SearchDialog_SearchButton');
+    }
+    onSearchTextChanged(e) {
+        this.searchText = e.component.option('text');
     }
-    get disabled() { return this.loading(); }
 }
 SearchViewModel.createResultNavigator = (seacrhModel, reportPreview) => {
     return new SearchResultNavigator(seacrhModel, reportPreview);
 };
+__decorate([
+    mutable(false)
+], SearchViewModel.prototype, "matchWholeWord", void 0);
+__decorate([
+    mutable(false)
+], SearchViewModel.prototype, "matchCase", void 0);
+__decorate([
+    mutable('')
+], SearchViewModel.prototype, "searchText", void 0);
+__decorate([
+    mutableArray(() => [])
+], SearchViewModel.prototype, "searchResult", void 0);
+__decorate([
+    mutable(false)
+], SearchViewModel.prototype, "loading", void 0);
+__decorate([
+    mutable(() => new DataSource([]))
+], SearchViewModel.prototype, "searchResultDataSource", void 0);

package/viewer/search/_utils.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\search\_utils.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/viewer/search/_utils.js

@@ -1,9 +1,9 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\search\_utils.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { getLocalization } from '@devexpress/analytics-core/analytics-utils';
+import { getLocalization } from '@devexpress/analytics-core/analytics-utils-native';
 export var formatSearchResult = function (value) { return value && (getLocalization('page', 'ASPxReportsStringId.WebDocumentViewer_SearchPageNumberText') + ' ' + (value.pageIndex + 1)); };