@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/basic/search/bundles/index.umd.js

@@ -0,0 +1,1091 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('ngx-bootstrap/typeahead'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/dataset-aware-form'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/forms', '@angular/core', 'rxjs', 'rxjs/operators', 'ngx-bootstrap/typeahead', '@wm/core', '@wm/components/base', '@wm/components/input/dataset-aware-form', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.search = {}), global.ng.common, global.ng.forms, global.ng.core, global.rxjs, global.rxjs.operators, global.ngxBootstrap.typeahead, global.wm.core, global.wm.components.base, global.wm.components.input.datasetawareform, global._));
+})(this, (function (exports, i2, i3, i0, rxjs, operators, i4, i1, base, datasetAwareForm, lodashEs) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    class ScrollableDirective {
+        constructor(inj) {
+            this.searchRef = i0.inject(SearchComponent);
+            this.elementRef = inj.get(i0.ElementRef);
+        }
+        ngAfterContentInit() {
+            // MEMORY LEAK FIX: Store bound function reference for proper removal
+            this.boundNotifyParent = this.notifyParent.bind(this);
+            // add the scroll event listener on the ul element.
+            this.elementRef.nativeElement.addEventListener('scroll', this.boundNotifyParent);
+            this.searchRef.dropdownEl = $(this.elementRef.nativeElement);
+            this.searchRef.onDropdownOpen();
+        }
+        ngAfterViewInit() {
+            if (!this.searchRef.isMobileAutoComplete()) {
+                // assigning width for the dropdown.
+                const typeAheadInput = this.searchRef.$element.find('input').first();
+                this.searchRef.dropdownEl.width(typeAheadInput.outerWidth());
+            }
+        }
+        notifyParent(evt) {
+            this.searchRef.onScroll(this.elementRef.nativeElement, evt);
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Remove scroll event listener using stored bound function reference
+            if (this.elementRef && this.elementRef.nativeElement && this.boundNotifyParent) {
+                this.elementRef.nativeElement.removeEventListener('scroll', this.boundNotifyParent);
+                this.boundNotifyParent = null;
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ScrollableDirective, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ScrollableDirective, isStandalone: true, selector: "[scrollableHandler]", ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ScrollableDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[scrollableHandler]'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }] });
+
+    const searchProps = new Map([
+        ['casesensitive', { value: false, ...base.PROP_BOOLEAN }],
+        ['class', base.PROP_STRING],
+        ['datacompletemsg', { value: 'No more data to load', ...base.PROP_STRING }],
+        ['datafield', { value: 'All Fields', ...base.PROP_STRING }],
+        ['dataoptions', base.PROP_ANY],
+        ['dataset', base.PROP_ANY],
+        ['datasource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['datavaluesource', base.PROP_ANY],
+        ['dateformat', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['displayimagesrc', base.PROP_STRING],
+        ['displaylabel', base.PROP_STRING],
+        ['displayexpression', base.PROP_STRING],
+        ['dropup', base.PROP_BOOLEAN],
+        ['groupby', base.PROP_STRING],
+        ['hint', base.PROP_STRING],
+        ['arialabel', base.PROP_STRING],
+        ['imagewidth', { value: '16px', ...base.PROP_STRING }],
+        ['limit', base.PROP_NUMBER],
+        ['loadingdatamsg', { value: 'Loading items...', ...base.PROP_STRING }],
+        ['match', base.PROP_STRING],
+        ['matchmode', base.PROP_STRING],
+        ['minchars', base.PROP_NUMBER],
+        ['name', base.PROP_STRING],
+        ['navsearchbar', { value: false, ...base.PROP_BOOLEAN }],
+        ['orderby', base.PROP_STRING],
+        ['placeholder', { value: 'Search', ...base.PROP_STRING }],
+        ['position', base.PROP_STRING],
+        ['query', base.PROP_STRING],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['searchkey', base.PROP_STRING],
+        ['searchon', { value: 'typing', ...base.PROP_STRING }],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showclear', { value: false, ...base.PROP_BOOLEAN }],
+        ['showsearchicon', base.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['type', { value: 'search', ...base.PROP_STRING }],
+        ['debouncetime', { value: 250, ...base.PROP_NUMBER }],
+        ['width', base.PROP_STRING],
+        ['clearsearchiconclass', { value: 'wi wi-close', ...base.PROP_STRING }],
+        ['backsearchiconclass', { value: 'wi wi-arrow-left', ...base.PROP_STRING }],
+        ['searchiconclass', { value: 'wm-sl-l sl-search', ...base.PROP_STRING }],
+    ]);
+    const registerProps = () => {
+        base.register('wm-search', searchProps);
+        base.registerFormWidget(i1.FormWidgetType.AUTOCOMPLETE, new Map(searchProps));
+        base.registerFormWidget(i1.FormWidgetType.TYPEAHEAD, new Map(searchProps));
+    };
+
+    class LocalDataProvider {
+        applyFilter(entry, queryText, filtername) {
+            entry = lodashEs.isNumber(entry) ? entry.toString() : entry;
+            if (lodashEs.includes(filtername, 'start')) {
+                return lodashEs.startsWith(entry, queryText);
+            }
+            else if (lodashEs.includes(filtername, 'end')) {
+                return lodashEs.endsWith(entry, queryText);
+            }
+            else if (lodashEs.includes(filtername, 'exact')) {
+                return lodashEs.isEqual(entry, queryText);
+            }
+            return lodashEs.includes(entry, queryText);
+        }
+        // LocalData filtering is done based on the searchkey.
+        filter(config) {
+            const entries = config.dataset;
+            let casesensitive = config.casesensitive;
+            const matchMode = config.matchMode;
+            // for supporting existing projects
+            if (matchMode && !lodashEs.includes(matchMode, 'ignorecase')) {
+                casesensitive = true;
+            }
+            let queryText = config.query, filteredData;
+            return new Promise((resolve, reject) => {
+                /**
+                 * If searchKey is defined, then check for match string against each item in the dataset with item's field name as the searchKey
+                 * return the filtered data containing the matching string.
+                 */
+                if (config.searchKey) {
+                    const keys = lodashEs.split(config.searchKey, ',');
+                    filteredData = lodashEs.filter(config.dataset, (item) => {
+                        return keys.some(key => {
+                            let a = lodashEs.get(item, key), b = queryText;
+                            if (!casesensitive) {
+                                a = lodashEs.toLower(lodashEs.toString(a));
+                                b = lodashEs.toLower(lodashEs.toString(b));
+                            }
+                            return this.applyFilter(a, b, matchMode);
+                        });
+                    });
+                }
+                else {
+                    // local search on data with array of objects.
+                    // Iterate over each item and return the filtered data containing the matching string.
+                    if (lodashEs.isArray(entries) && lodashEs.isObject(entries[0])) {
+                        filteredData = lodashEs.filter(entries, entry => {
+                            let a = lodashEs.values(entry).join(' ');
+                            if (!casesensitive) {
+                                a = lodashEs.toLower(a);
+                                // @ts-ignore
+                                queryText = lodashEs.toLower(queryText);
+                            }
+                            return this.applyFilter(a, queryText);
+                        });
+                    }
+                    else {
+                        filteredData = lodashEs.filter(entries, entry => {
+                            if (!casesensitive) {
+                                entry = lodashEs.toLower(entry);
+                                // @ts-ignore
+                                queryText = lodashEs.toLower(queryText);
+                            }
+                            return this.applyFilter(entry, queryText, matchMode);
+                        });
+                    }
+                }
+                resolve({
+                    data: filteredData,
+                    hasMoreData: false,
+                    isLastPage: true
+                });
+            });
+        }
+    }
+
+    class RemoteDataProvider {
+        filter(config) {
+            return this.filterData(config).then(response => this.onFilterSuccess(config, response), () => this.onFilterFailure());
+        }
+        filterData(config) {
+            if (config.dataoptions) {
+                const dataoptions = config.dataoptions;
+                const requestParams = config.datasource.execute(i1.DataSource.Operation.GET_REQUEST_PARAMS, config);
+                // If options are specified, make specifics calls to fetch the results
+                // Fetch the related field data
+                if (dataoptions.relatedField) {
+                    return new Promise((resolve, reject) => {
+                        base.interpolateBindExpressions(config.viewParent, dataoptions.filterExpr, (filterexpressions) => {
+                            requestParams.filterExpr = dataoptions.filterExpr = filterexpressions;
+                            dataoptions.filterExpr = filterexpressions;
+                            config.datasource.execute(i1.DataSource.Operation.GET_RELATED_TABLE_DATA, lodashEs.assign({ relatedField: dataoptions.relatedField }, requestParams)).then(resolve, reject);
+                        });
+                    });
+                }
+                // Fetch the distinct data
+                if (dataoptions.distinctField) {
+                    return config.datasource.execute(i1.DataSource.Operation.GET_DISTINCT_DATA_BY_FIELDS, {
+                        pagesize: config.limit || config.pagesize,
+                        page: config.page,
+                        fields: dataoptions.distinctField,
+                        entityName: dataoptions.tableName,
+                        filterFields: lodashEs.assign(dataoptions.filterFields, requestParams.filterFields),
+                        filterExpr: i1.getClonedObject(dataoptions.filterExpr || {})
+                    });
+                }
+            }
+            // search records using the searchkey
+            return config.datasource.execute(i1.DataSource.Operation.SEARCH_RECORDS, config);
+        }
+        // Check if the page retrieved currently is the last page. If last page, don't send any more request
+        isLast(page, dataSize, maxResults, currentResults) {
+            // if last page info is not returned by backend and current results is less than max results, this is the last page
+            if (dataSize === i1.AppConstants.INT_MAX_VALUE) {
+                return currentResults !== 0 && currentResults < maxResults;
+            }
+            const pageCount = ((dataSize > maxResults) ? (Math.ceil(dataSize / maxResults)) : (dataSize < 0 ? 0 : 1));
+            return page === pageCount;
+        }
+        // this function transform the response data in case it is not an array
+        getTransformedData(variable, data) {
+            const operationResult = variable.operation + 'Result'; // when output is only string it is available as oprationNameResult
+            const tempResponse = data[operationResult];
+            // in case data received is value as string then add that string value to object and convert object into array
+            if (tempResponse) {
+                const tempObj = {};
+                lodashEs.set(tempObj, operationResult, tempResponse);
+                data = [tempObj]; // convert data into an array having tempObj
+            }
+            else {
+                // in case data received is already an object then convert it into an array
+                data = [data];
+            }
+            return data;
+        }
+        onFilterFailure() {
+            return [];
+        }
+        isLastPageForDistinctApi(data, page, totalElements, _isLastPage) {
+            return page > 1 && !_isLastPage && lodashEs.isEmpty(data) && totalElements === i1.AppConstants.INT_MAX_VALUE;
+        }
+        // this function processes the response depending on pageOptions, isPageable and prepares the formattedDataset.
+        onFilterSuccess(config, response) {
+            let data = response.data;
+            let formattedData;
+            let _isLastPage;
+            let page;
+            let isPaginatedData;
+            const expressionArray = lodashEs.split(config.binddataset, '.');
+            const dataExpression = lodashEs.slice(expressionArray, lodashEs.indexOf(expressionArray, 'dataSet') + 1).join('.');
+            const $I = '[$i]';
+            return new Promise((resolve, reject) => {
+                const pageOptions = response.pagination;
+                if (config.datasource.execute(i1.DataSource.Operation.IS_PAGEABLE)) {
+                    page = pageOptions.number + 1;
+                    _isLastPage = this.isLast(page, (config.limit > 0 && config.limit) || pageOptions.totalElements, pageOptions.size, pageOptions.numberOfElements);
+                    isPaginatedData = true;
+                    if (this.isLastPageForDistinctApi(data, page, pageOptions.totalElements, _isLastPage)) {
+                        _isLastPage = true;
+                        resolve({
+                            data: [],
+                            isLastPage: _isLastPage,
+                            hasMoreData: page > 1,
+                            isPaginatedData,
+                            page
+                        });
+                        return;
+                    }
+                }
+                // if data expression exists, extract the data from the expression path
+                if (dataExpression) {
+                    if (lodashEs.isArray(data)) {
+                        const index = dataExpression.lastIndexOf($I);
+                        if (index > -1) {
+                            const restExpr = dataExpression.substr(index + 5);
+                            formattedData = data.map(datum => i1.findValueOf(datum, restExpr));
+                        }
+                    }
+                    else if (lodashEs.isObject(data)) {
+                        formattedData = lodashEs.get(data, dataExpression);
+                    }
+                    data = formattedData || data;
+                }
+                if (!lodashEs.isArray(data)) {
+                    data = this.getTransformedData(config.datasource, data);
+                }
+                // in case of no data received, resolve the promise with empty array
+                if (!data.length) {
+                    resolve({ data: [], isLastPage: _isLastPage, hasMoreData: page > 1, isPaginatedData, page });
+                }
+                else {
+                    resolve({ data: data, isLastPage: _isLastPage, hasMoreData: page > 1, isPaginatedData, page });
+                }
+            });
+        }
+    }
+
+    class DataProvider {
+        static { this.remoteDataProvider = new RemoteDataProvider(); }
+        static { this.localDataProvider = new LocalDataProvider(); }
+        filter(config) {
+            let promise;
+            /**
+             * Make call to remoteDataProvider when searchkey is available and data is not from local / model variable.
+             * Otherwise use localDataProvider
+             * If datasource is a serviceVariable with no input params, then perform local search.
+             * when there is no dataset on the datasource when first time make a remote call to set the dataset for service variable.
+             */
+            const hasNoVariableDataset = config.datasource && config.datasource.execute(i1.DataSource.Operation.IS_UPDATE_REQUIRED, config.hasData);
+            if (!config.isLocalFilter && (config.dataoptions || ((config.datasource && config.datasource.execute(i1.DataSource.Operation.IS_API_AWARE))
+                && config.searchKey
+                && hasNoVariableDataset))) {
+                promise = DataProvider.remoteDataProvider.filter(config);
+            }
+            else {
+                promise = DataProvider.localDataProvider.filter(config);
+            }
+            return promise.then(response => {
+                this.updateDataset = config.datasource && !config.datasource.execute(i1.DataSource.Operation.SUPPORTS_CRUD) && hasNoVariableDataset;
+                this.hasMoreData = response.hasMoreData;
+                this.isLastPage = response.isLastPage;
+                this.page = response.page;
+                this.isPaginatedData = response.isPaginatedData;
+                return response;
+            });
+        }
+    }
+
+    const WIDGET_CONFIG = { widgetType: 'wm-search', hostClass: 'input-group' };
+    class SearchComponent extends datasetAwareForm.DatasetAwareFormComponent {
+        static { this.initializeProps = registerProps(); }
+        // getter setter is added to pass the datasource to searchcomponent.
+        get datasource() {
+            return this._datasource;
+        }
+        set datasource(nv) {
+            this._datasource = nv;
+            const data = this.datavalue || this.toBeProcessedDatavalue;
+            this.updateByDatavalue(data);
+        }
+        constructor(inj, app, binddatavalue, binddataset, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.binddatavalue = binddatavalue;
+            this.binddataset = binddataset;
+            this.query = '';
+            this.page = 1;
+            // this flag will not allow the empty datafield values.
+            this.allowempty = false;
+            this.app = app;
+            i1.addClass(this.nativeElement, 'app-search', true);
+            /**
+             * Listens for the change in the ngModel on every search and retrieves the data as observable.
+             * This observable data is passed to the typeahead.
+             * @type {Observable<any>}
+             */
+            this.typeaheadDataSource = rxjs.Observable
+                .create((observer) => {
+                // Runs on every search
+                if (this.listenQuery) {
+                    this._defaultQueryInvoked = false;
+                    this._loadingItems = true;
+                    observer.next(this.query);
+                }
+                // on keydown, while scrolling the dropdown items, when last item is reached next call is triggered
+                // unless the call is resolved, we are able to scroll next to first item and soon
+                // This shows flickering from first item to next new items appended.
+                // By setting container to undefined, key events changes will be stopped while loading items
+                if (this.lastSelectedIndex) {
+                    this.typeahead._container = undefined;
+                }
+            }).pipe(operators.filter(() => {
+                this._loadingItems = false;
+                return (this.minchars === 0 || (this.query && this.query.length >= this.minchars));
+            }), operators.mergeMap((token) => this.getDataSourceAsObservable(token)));
+            this.dataProvider = new DataProvider();
+            /**
+             * When default datavalue is not found within the dataset, a filter call is made to get the record using fetchDefaultModel.
+             * after getting the response, set the queryModel and query.
+             */
+            const datavalueSubscription = this.datavalue$.subscribe((val) => {
+                const query = (lodashEs.isArray(val) ? val[0] : val);
+                if (query === null || query === '') {
+                    this._modelByValue = '';
+                    // reset the query.
+                    this.query = this.queryModel = '';
+                    // on clear or reset filter, empty the lastResults to fetch new records.
+                    this._lastResult = undefined;
+                    return;
+                }
+                if (!this._unsubscribeDv) {
+                    this._defaultQueryInvoked = false;
+                    // if prev datavalue is not equal to current datavalue then clear the modelByKey and queryModel
+                    if (!lodashEs.isObject(val) && this.prevDatavalue !== val) {
+                        this._modelByKey = undefined;
+                        this.query = this.queryModel = '';
+                    }
+                    // if the datafield is ALLFILEDS do not fetch the records
+                    // update the query model with the values we have
+                    this.updateByDatavalue(val);
+                }
+                // turn on showCloseBtn when a default value is given
+                this.showClosebtn = (this.query !== '');
+            });
+            this.registerDestroyListener(() => datavalueSubscription.unsubscribe());
+            const datasetSubscription = this.dataset$.subscribe(() => {
+                // set the next item index.
+                this.startIndex = this.datasetItems.length;
+                this._lastResult = undefined;
+                const defaultValue = this.datavalue || this.toBeProcessedDatavalue;
+                // invoking updateByDataset only when datavalue is present, as entered value i.e. query is setting back to ''
+                if (i1.isDefined(defaultValue)) {
+                    this.updateByDataset(defaultValue);
+                }
+            });
+            this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+        }
+        // on clear, trigger search with page size 1
+        clearSearch($event, loadOnClear) {
+            this.query = '';
+            this.onInputChange($event);
+            if (this.dataProvider) {
+                this.dataProvider.isLastPage = false;
+            }
+            this.listenQuery = false;
+            if (loadOnClear) {
+                this.listenQuery = true;
+                this._unsubscribeDv = false;
+                this.loadMoreData();
+            }
+            this.invokeEventCallback('clearsearch');
+            this._loadingItems = false;
+            // when search input is cleared, focus on the input field
+            if ($event) {
+                this.$element.find('.app-search-input').focus();
+            }
+        }
+        // function to  clear the input value
+        clearText() {
+            this.query = '';
+            this.showClosebtn = false;
+        }
+        // Close the full screen mode in mobile view of auto complete
+        closeSearch() {
+            this._loadingItems = false;
+            this.page = 1;
+            // after closing the search, insert the element at its previous position (elIndex)
+            this.insertAtIndex(this.elIndex);
+            this.elIndex = undefined;
+            this.parentEl = undefined;
+            this.$element.removeClass('full-screen');
+            if (this._domUpdated) {
+                this._domUpdated = false;
+            }
+            this.listenQuery = false;
+            this._unsubscribeDv = true;
+            this.typeahead.hide();
+        }
+        renderMobileAutoComplete() {
+            // Get the parent element of the search element which can be next or prev element, if both are empty then get the parent of element.
+            if (!i1.isDefined(this.elIndex)) {
+                this.parentEl = this.$element.parent();
+                this.elIndex = this.parentEl.children().index(this.$element);
+            }
+            if (!this.$element.hasClass('full-screen')) {
+                // this flag is set to notify that the typeahead-container dom has changed its position
+                this._domUpdated = true;
+                // Add full screen class on focus of the input element.
+                this.$element.addClass('full-screen');
+                // Add position to set the height to auto
+                if (this.position === 'inline') {
+                    this.$element.addClass(this.position);
+                }
+            }
+            // focus is lost when element is changed to full-screen, keydown to select next items will not work
+            // Hence explicitly focusing the input
+            if (this.$element.hasClass('full-screen')) {
+                this.$element.find('.app-search-input').focus();
+            }
+        }
+        getDataSourceAsObservable(query) {
+            // show dropdown only when there is change in query. This should not apply when dataoptions with filterFields are updated.
+            // when lastResult is not available i.e. still the first call is pending and second query is invoked then do not return.
+            if (this._lastQuery === query && !lodashEs.get(this.dataoptions, 'filterFields') && i1.isDefined(this._lastResult)) {
+                this._loadingItems = false;
+                return rxjs.of(this._lastResult);
+            }
+            /*
+                 WMS-19177: On focus of input field for autocomplete type, do not trigger api call when
+                     a) searchkey and displayexpression are different
+                     b) binddisplaylabel contains multiple values
+                     c) binddisplaylabel contains single value which does not match with searchkey
+            */
+            if (this.type === 'autocomplete' && this.searchkey && this.query && this.datavalue) {
+                let bindDisplayLabelArray = [];
+                const searchKeyArray = lodashEs.split(this.searchkey, ',');
+                let displaylabel;
+                if (this.binddisplaylabel) {
+                    bindDisplayLabelArray = lodashEs.split(this.binddisplaylabel, '+');
+                    if (bindDisplayLabelArray.length === 1) {
+                        if (!lodashEs.includes(bindDisplayLabelArray[0], '|')) {
+                            const regex = /\[(.*?)\]/;
+                            displaylabel = regex.exec(bindDisplayLabelArray[0])[1];
+                        }
+                        else {
+                            displaylabel = true;
+                        }
+                    }
+                }
+                if ((bindDisplayLabelArray.length > 1 || (displaylabel && !lodashEs.includes(searchKeyArray, displaylabel))
+                    || (this.displayexpression && !lodashEs.includes(searchKeyArray, this.displayexpression)))) {
+                    this._loadingItems = false;
+                    return rxjs.of([]);
+                }
+            }
+            this._lastQuery = this.query;
+            return rxjs.from(this.getDataSource(query));
+        }
+        handleEvent(node, eventName, eventCallback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'select', 'submit', 'change'], eventName)) {
+                super.handleEvent(node, eventName, eventCallback, locals);
+            }
+        }
+        // highlight the characters in the dropdown matching the query.
+        highlight(match, query) {
+            if (this.typeaheadContainer) {
+                // highlight of chars will work only when label are strings.
+                match.value = match.item.label.toString();
+                return this.typeaheadContainer.highlight(match, query);
+            }
+        }
+        // inserts the element at the index position
+        insertAtIndex(i) {
+            if (i === 0) {
+                this.parentEl.prepend(this.$element);
+            }
+            else {
+                const $elAtIndex = this.parentEl.children().eq(i);
+                if ($elAtIndex.length) {
+                    this.$element.insertBefore(this.parentEl.children().eq(i));
+                }
+                else {
+                    this.$element.insertAfter(this.parentEl.children().eq(i - 1));
+                }
+            }
+        }
+        // Check if the widget is of type autocomplete in mobile view/ app
+        isMobileAutoComplete() {
+            return this.type === 'autocomplete' && i1.isMobile();
+        }
+        // Check if the query is entered in the input and the view is not mobile
+        isQueryEntered() {
+            return this.showclear && this.showClosebtn;
+        }
+        loadMoreData(incrementPage) {
+            if (!this.dataProvider || this.dataProvider.isLastPage) {
+                return;
+            }
+            // Increase the page number and trigger force query update
+            this.page = incrementPage ? this.page + 1 : this.page;
+            this.isScrolled = true;
+            this._loadingItems = true;
+            // when invoking new set of results, reset the lastQuery.
+            if (incrementPage) {
+                this._lastQuery = undefined;
+            }
+            // trigger the typeahead change manually to fetch the next set of results.
+            this.typeahead.onInput({
+                target: {
+                    value: lodashEs.trim(this.query) || '0' // dummy data to notify the observables
+                }
+            });
+        }
+        // on focusout, subscribe to the datavalue changes again
+        onFocusOut() {
+            this._unsubscribeDv = false;
+            this._loadingItems = false;
+            // reset the page value on focusout.
+            this.page = 1;
+            // if domUpdated is true then do not hide the dropdown in the fullscreen
+            if (!this._domUpdated && this._isOpen) {
+                this.listenQuery = false;
+            }
+            this._isOpen = false;
+            // on outside click, typeahead is hidden. To avoid this, when fullscreen is set, overridding isFocused flag on the typeahead container
+            if (this._domUpdated && this.typeahead && this.typeahead._container) {
+                this.typeahead._container.isFocused = true;
+            }
+        }
+        onInputChange($event) {
+            // reset all the previous page details in order to fetch new set of result.
+            this.result = [];
+            this.page = 1;
+            this.listenQuery = this.isUpdateOnKeyPress();
+            this._modelByValue = undefined;
+            // when input is cleared, reset the datavalue
+            if (this.query === '') {
+                this.queryModel = '';
+                this._modelByValue = '';
+                this.updatePrevDatavalue(this._lastQuery);
+                this.invokeOnChange(this._modelByValue, {}, true);
+                this.invokeEventCallback('clear', { $event });
+                // trigger onSubmit only when the search input is cleared off and do not trigger when tab is pressed.
+                if ($event && $event.which !== 9) {
+                    this.invokeEventCallback('submit', { $event });
+                }
+            }
+            else {
+                // invoking change event on every input value change.
+                this.invokeEventCallback('change', {
+                    $event: $event,
+                    newVal: this._modelByValue || this.query,
+                    oldVal: this.prevDatavalue
+                });
+            }
+            this.showClosebtn = (this.query !== '');
+        }
+        // Triggered for enter event
+        handleEnterEvent($event) {
+            // submit event triggered when there is no search results
+            if (!lodashEs.get(this.typeahead, 'matches.length')) {
+                this.onSearchSelect($event);
+            }
+        }
+        // Triggerred when typeahead option is selected.
+        onSearchSelect($event) {
+            let item;
+            // WMS-22533: Before adding active typeahead el, check if the entered query matches with the active el or not
+            const isQueryMatch = this.typeaheadContainer?.active?.value === this.query;
+            if (this.typeaheadContainer && this.typeaheadContainer.active && isQueryMatch) {
+                item = this.typeaheadContainer.active.item;
+            }
+            $event = this.eventData($event, item || {});
+            // searchOn is set as onBtnClick, then invoke the search api call manually.
+            if (!this.isUpdateOnKeyPress()) {
+                this.listenQuery = true;
+                // trigger the typeahead change manually to fetch the next set of results.
+                this.typeahead.onInput({
+                    target: {
+                        value: this.query // dummy data to notify the observables
+                    }
+                });
+                return;
+            }
+            // when matches are available.
+            if (this.typeaheadContainer && this.liElements.length && isQueryMatch) {
+                this.typeaheadContainer.selectActiveMatch();
+            }
+            else {
+                this.queryModel = this.query;
+                this.invokeEventCallback('submit', { $event });
+            }
+        }
+        invokeOnBeforeServiceCall(inputData) {
+            this.invokeEventCallback('beforeservicecall', { inputData });
+        }
+        onDropdownOpen() {
+            if (this.clearData) {
+                this.typeahead.hide();
+            }
+            // setting the ulElements, liElement on typeaheadContainer.
+            // as we are using customOption template, liElements are not available on typeaheadContainer so append them explicitly.
+            const fn = lodashEs.debounce(() => {
+                this._isOpen = true;
+                this.typeaheadContainer = this.typeahead._container || this.typeahead._typeahead.instance;
+                this.typeaheadContainer.liElements = this.liElements;
+                this.typeaheadContainer.ulElement = this.ulElement;
+                i1.adjustContainerPosition($('typeahead-container'), this.nativeElement, this.typeahead._typeahead, $('typeahead-container .dropdown-menu'));
+            });
+            fn();
+            // open full-screen search view
+            if (this.isMobileAutoComplete()) {
+                if (!this.$element.hasClass('full-screen')) {
+                    this.renderMobileAutoComplete();
+                }
+                const dropdownEl = this.dropdownEl.closest('typeahead-container');
+                dropdownEl.insertAfter(this.$element.find('input').first());
+                const screenHeight = this.$element.closest('.app-content').height();
+                dropdownEl.css({ position: 'relative', top: 0, height: screenHeight + 'px' });
+                this.showClosebtn = this.query && this.query !== '';
+                if (this.dataProvider && !lodashEs.isUndefined(this.dataProvider.isLastPage) && !this.dataProvider.isLastPage) {
+                    this.triggerSearch();
+                }
+            }
+        }
+        selectNext() {
+            const matches = this.typeaheadContainer.matches;
+            if (!matches) {
+                return;
+            }
+            const index = matches.indexOf(this.typeaheadContainer.active);
+            // on keydown, if scroll is at the bottom and next page records are available, fetch next page items.
+            if (!this._loadingItems && this.dataProvider && !this.dataProvider.isLastPage && index + 1 > matches.length - 1) {
+                // index is saved in order to select the lastSelected item in the dropdown after fetching next page items.
+                this.lastSelectedIndex = index;
+                this.loadMoreData(true);
+            }
+        }
+        setLastActiveMatchAsSelected() {
+            if (this.lastSelectedIndex) {
+                this.typeaheadContainer._active = this.typeaheadContainer.matches[this.lastSelectedIndex];
+                this.typeaheadContainer.nextActiveMatch();
+                this.lastSelectedIndex = undefined;
+            }
+        }
+        triggerSearch() {
+            if (!this.dataProvider || this.dataProvider.isLastPage || !this.$element.hasClass('full-screen')) {
+                return;
+            }
+            const typeAheadDropDown = this.dropdownEl;
+            const $lastItem = typeAheadDropDown.find('li').last();
+            // Check if last item is not below the full screen
+            if ($lastItem.length && typeAheadDropDown.length && (typeAheadDropDown.height() + typeAheadDropDown.position().top > $lastItem.height() + $lastItem.position().top)) {
+                this.loadMoreData(true);
+            }
+        }
+        isUpdateOnKeyPress() {
+            return this.searchon === 'typing';
+        }
+        debounceDefaultQuery(data) {
+            this._defaultQueryInvoked = true;
+            this.getDataSource(data, true).then((response) => {
+                if (response.length) {
+                    this.queryModel = response;
+                    this._lastQuery = this.query = this.queryModel[0].label || '';
+                    this._modelByValue = this.queryModel[0].value;
+                    this._modelByKey = this.queryModel[0].key;
+                    this.showClosebtn = (this.query !== '');
+                }
+                else {
+                    this._modelByValue = undefined;
+                    this.queryModel = undefined;
+                    this.query = '';
+                }
+                if (this.clearData) {
+                    if (lodashEs.get(this.typeahead, '_typeahead.isShown')) {
+                        this.typeahead.hide();
+                    }
+                }
+            });
+        }
+        updateByDatavalue(data) {
+            this.updateByDataset(data);
+            this.updateByDataSource(data);
+        }
+        updateByDataSource(data) {
+            // value is present but the corresponding key is not found then fetch next set
+            // modelByKey will be set only when datavalue is available inside the localData otherwise make a N/w call.
+            if (i1.isDefined(data) && !lodashEs.isObject(data) && this.datasource && !i1.isDefined(this._modelByKey) && this.datafield !== base.ALLFIELDS) {
+                // Avoid making default query if queryModel already exists.
+                if (i1.isDefined(this.queryModel) && !lodashEs.isEmpty(this.queryModel)) {
+                    this.updateDatavalueFromQueryModel();
+                    return;
+                }
+                // Make default query call only when datasource supports CRUD (live variable).
+                if (!this._defaultQueryInvoked && this.datasource.execute(i1.DataSource.Operation.SUPPORTS_CRUD)) {
+                    this.debounceDefaultQuery(data);
+                }
+            }
+        }
+        // updates the model value using queryModel
+        updateDatavalueFromQueryModel() {
+            if (i1.isDefined(this.queryModel)) {
+                this._modelByValue = lodashEs.isArray(this.queryModel) ? this.queryModel[0].value : this.queryModel;
+                this._modelByKey = lodashEs.isArray(this.queryModel) ? this.queryModel[0].key : this.queryModel;
+                this.toBeProcessedDatavalue = undefined;
+            }
+        }
+        updateByDataset(data) {
+            // default query is already invoked then do not make other default query call.
+            // For local search i.e. searchkey is undefined, do not return, verify the datavalue against the datasetItems .
+            if (this._defaultQueryInvoked && this.searchkey) {
+                return;
+            }
+            const selectedItem = lodashEs.find(this.datasetItems, (item) => {
+                return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, data) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(data)).toLowerCase());
+            });
+            // set the default only when it is available in dataset.
+            if (selectedItem) {
+                this.queryModel = [selectedItem];
+            }
+            else if (this.datafield === base.ALLFIELDS && lodashEs.isObject(data)) {
+                this.queryModel = this.getTransformedData(base.extractDataAsArray(data));
+            }
+            else {
+                // resetting the queryModel only when prevDatavalue is equal to data
+                if (this.prevDatavalue !== data) {
+                    this.queryModel = undefined;
+                    this.query = '';
+                    return;
+                }
+            }
+            this.updateDatavalueFromQueryModel();
+            // Show the label value on input.
+            this._lastQuery = this.query = i1.isDefined(this.queryModel) && this.queryModel.length ? lodashEs.get(this.queryModel[0], 'label') : '';
+            this.showClosebtn = (this.query !== '');
+        }
+        // If we have last search results then open dropdown on focus
+        handleFocus($event) {
+            if (this.type === 'search' && this.query === this._lastQuery && this._lastResult) {
+                this.typeahead.keyUpEventEmitter.emit(this.query);
+            }
+        }
+        notifySubscriber() {
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: true, nativeEl: parentEl });
+            }
+        }
+        // This method returns a promise that provides the filtered data from the datasource.
+        getDataSource(query, searchOnDataField, nextItemIndex) {
+            // For default query, searchOnDataField is set to true, then do not make a n/w call when datafield is ALLFIELDS
+            if (searchOnDataField && this.datafield === base.ALLFIELDS) {
+                this._loadingItems = false;
+                return Promise.resolve([]);
+            }
+            // For default datavalue, search key as to be on datafield to get the default data from the filter call.
+            const dataConfig = {
+                dataset: this.dataset ? base.convertDataToObject(this.dataset) : undefined,
+                binddataset: this.binddataset,
+                datasource: this.datasource,
+                datafield: this.datafield,
+                hasData: this.dataset && this.dataset.length,
+                query: query,
+                isLocalFilter: !this.searchkey,
+                searchKey: searchOnDataField ? this.datafield : this.searchkey,
+                // default search call match mode should be startignorecase
+                matchMode: searchOnDataField ? 'startignorecase' : this.matchmode,
+                casesensitive: this.casesensitive,
+                isformfield: this.isformfield,
+                orderby: this.orderby,
+                limit: this.limit,
+                pagesize: this.pagesize,
+                page: this.page,
+                onBeforeservicecall: this.invokeOnBeforeServiceCall.bind(this)
+            };
+            if (this.dataoptions) {
+                dataConfig.dataoptions = this.dataoptions;
+                dataConfig.viewParent = this.viewParent;
+            }
+            this._loadingItems = true;
+            return this.dataProvider.filter(dataConfig)
+                .then((response) => {
+                // response from dataProvider returns always data object.
+                response = response.data || response;
+                // for service variable, updating the dataset only if it is not defined or empty
+                if (this.dataProvider && (!i1.isDefined(this.dataset) || !this.dataset.length) && this.dataProvider.updateDataset) {
+                    this.dataset = response;
+                }
+                if (this.dataProvider && this.dataProvider.hasMoreData) {
+                    this.formattedDataset = this.formattedDataset.concat(response);
+                }
+                else {
+                    this.formattedDataset = response;
+                }
+                // explicitly setting the optionslimit as the matches more than 20 will be ignored if optionslimit is not specified.
+                if (this.formattedDataset.length > 20 && !i1.isDefined(this.limit)) {
+                    this.typeahead.typeaheadOptionsLimit = this.formattedDataset.length;
+                }
+                // In mobile, trigger the search by default until the results have height upto page height. Other results can be fetched by scrolling
+                if (this.dataProvider && this._isOpen && this.isMobileAutoComplete() && !lodashEs.isUndefined(this.dataProvider.isLastPage) && !this.dataProvider.isLastPage) {
+                    this.triggerSearch();
+                }
+                const transformedData = this.getTransformedData(this.formattedDataset, nextItemIndex);
+                // result contains the datafield values.
+                this.result = lodashEs.map(transformedData, 'value');
+                return transformedData;
+            }, (error) => {
+                this._loadingItems = false;
+                return [];
+            }).then(result => {
+                if (this.isScrolled) {
+                    (lodashEs.debounce(() => {
+                        this.setLastActiveMatchAsSelected();
+                    }, 30))();
+                    this.isScrolled = false;
+                }
+                // When no result is found, set the datavalue to undefined.
+                if (!result.length) {
+                    this._modelByValue = undefined;
+                    this.queryModel = query;
+                }
+                // on focusout i.e. on other widget focus, if n/w is pending loading icon is shown, when data is available then dropdown is shown again.
+                // on unsubscribing do not show the results.
+                if (this._unsubscribeDv) {
+                    result = [];
+                }
+                this._loadingItems = false;
+                this._lastResult = result;
+                return result;
+            });
+        }
+        // this method returns the parent context i.e. Page context and not parent component's context.
+        getContext(context) {
+            if (context && lodashEs.get(context, 'widget')) {
+                return this.getContext(context.viewParent);
+            }
+            return context;
+        }
+        getTransformedData(data, itemIndex, iscustom) {
+            if (i1.isDefined(itemIndex)) {
+                itemIndex++;
+            }
+            const transformedData = base.transformFormData(this.getContext(this.viewParent), data, this.datafield, {
+                displayField: this.displaylabel || this.displayfield,
+                displayExpr: iscustom ? '' : this.displayexpression,
+                bindDisplayExpr: iscustom ? '' : this.binddisplaylabel,
+                bindDisplayImgSrc: this.binddisplayimagesrc,
+                displayImgSrc: this.displayimagesrc
+            }, itemIndex, this);
+            return base.getUniqObjsByDataField(transformedData, this.datafield, this.displayfield || this.displaylabel, i1.toBoolean(this.allowempty));
+        }
+        // OptionsListTemplate listens to the scroll event and triggers this function.
+        onScroll($scrollEl, evt) {
+            const totalHeight = $scrollEl.scrollHeight, clientHeight = $scrollEl.clientHeight;
+            // If scroll is at the bottom and no request is in progress and next page records are available, fetch next page items.
+            if (!this._loadingItems && this.dataProvider && !this.dataProvider.isLastPage && ($scrollEl.scrollTop + clientHeight >= totalHeight)) {
+                this.loadMoreData(true);
+            }
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            if (!i1.isDefined(this.minchars)) {
+                // for autocomplete set the minchars to 0
+                if (this.type === 'autocomplete') {
+                    this.minchars = 0;
+                }
+                else {
+                    this.minchars = 1;
+                }
+            }
+            this.listenQuery = this.isUpdateOnKeyPress();
+            // by default for autocomplete do not show the search icon
+            // by default show the searchicon for type = search
+            this.showsearchicon = i1.isDefined(this.showsearchicon) ? this.showsearchicon : (this.type === 'search');
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            base.styler(this.nativeElement, this);
+            this.containerTarget = base.getContainerTargetClass(this.nativeElement);
+        }
+        ngAfterViewChecked() {
+            const searchInputEl = $('.app-search-input');
+            if (searchInputEl) {
+                searchInputEl.removeAttr('aria-expanded');
+            }
+        }
+        eventData($event, item) {
+            if ($event) {
+                $event['data'] = {
+                    item: item.dataObject,
+                    model: item.value,
+                    label: item.label,
+                    query: this.query
+                };
+            }
+            return $event;
+        }
+        // triggered on select on option from the list. Set the queryModel, query and modelByKey from the matched item.
+        typeaheadOnSelect(match, $event) {
+            const item = match.item;
+            this.queryModel = item;
+            item.selected = true;
+            this.query = item.label;
+            this.showClosebtn = (this.query !== '');
+            $event = $event || this.$typeaheadEvent;
+            // As item.key can vary from key in the datasetItems
+            this._modelByKey = item.key;
+            this._modelByValue = item.value;
+            $event = this.eventData($event, item);
+            this.invokeOnTouched();
+            this.invokeOnChange(this.datavalue, $event || {});
+            // updating the variable bound to default value as invokeOnChange is not updating the variable.
+            if (this.datavalue !== this.prevDatavalue) {
+                this.updateBoundVariable(this.datavalue);
+            }
+            if (this.$element.hasClass('full-screen')) {
+                this.closeSearch();
+            }
+            this.invokeEventCallback('select', { $event, selectedValue: this.datavalue });
+            this.invokeEventCallback('submit', { $event });
+            this.updatePrevDatavalue(this.datavalue);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'tabindex') {
+                return;
+            }
+            // Backward compatability from 10.3.1 to 10.3.2
+            // 10.3.1 we had displaylabel as modal value
+            // From 10.3.2 onwords we will be having displayexpresion as modal value
+            if (this.type === 'autocomplete' && key === 'displaylabel' && this.displaylabel && (!this.displayexpression || (this.displayexpression && !this.datasource))) {
+                this.displayexpression = this.displaylabel;
+                this.displaylabel = undefined;
+            }
+            // when dataoptions are provided and there is no displaylabel given then displaylabel is set as the relatedfield
+            if (key === 'displaylabel' && this.dataoptions && this.binddisplaylabel === null) {
+                this.query = lodashEs.get(this._modelByValue, nv) || this._modelByValue;
+            }
+            // when search is disabled, do not load any more data or just clear the data that is already in process or loaded.
+            if (key === 'disabled') {
+                if (nv === false) {
+                    this.clearData = false;
+                }
+                else {
+                    this.clearData = true;
+                    if (lodashEs.get(this.typeahead, '_typeahead.isShown')) {
+                        this.typeahead.hide();
+                    }
+                }
+            }
+            super.onPropertyChange(key, nv, ov);
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Clear QueryList reference
+            this.liElements = null;
+            // MEMORY LEAK FIX: Clear data provider
+            if (this.dataProvider) {
+                this.dataProvider = null;
+            }
+            // MEMORY LEAK FIX: Clear typeahead reference
+            if (this.typeahead) {
+                this.typeahead = null;
+            }
+            // MEMORY LEAK FIX: Clear query model
+            this.queryModel = null;
+            this.query = '';
+            // Call parent ngOnDestroy (DatasetAwareFormComponent has cleanup)
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SearchComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'datavalue.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SearchComponent, isStandalone: true, selector: "[wmSearch]", providers: [
+                base.provideAs(SearchComponent, i3.NG_VALUE_ACCESSOR, true),
+                base.provideAs(SearchComponent, i3.NG_VALIDATORS, true),
+                base.provideAsWidgetRef(SearchComponent)
+            ], viewQueries: [{ propertyName: "typeahead", first: true, predicate: i4.TypeaheadDirective, descendants: true }, { propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i3.FormsModule }, { kind: "directive", type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ScrollableDirective, selector: "[scrollableHandler]" }, { kind: "ngmodule", type: i4.TypeaheadModule }, { kind: "directive", type: i4__namespace.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: base.ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: base.PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: base.PartialContainerDirective, selector: "[partialContainer]" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SearchComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.CommonModule, i3.FormsModule, ScrollableDirective, i4.TypeaheadModule, base.TextContentDirective, base.ItemTemplateDirective, base.PartialParamHandlerDirective, base.PartialContainerDirective], selector: '[wmSearch]', providers: [
+                            base.provideAs(SearchComponent, i3.NG_VALUE_ACCESSOR, true),
+                            base.provideAs(SearchComponent, i3.NG_VALIDATORS, true),
+                            base.provideAsWidgetRef(SearchComponent)
+                        ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['datavalue.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { typeahead: [{
+                    type: i0.ViewChild,
+                    args: [i4.TypeaheadDirective]
+                }], ulElement: [{
+                    type: i0.ViewChild,
+                    args: ['ulElement']
+                }], liElements: [{
+                    type: i0.ViewChildren,
+                    args: ['liElements']
+                }] } });
+
+    exports.ScrollableDirective = ScrollableDirective;
+    exports.SearchComponent = SearchComponent;
+
+}));