@wavemaker/app-ng-runtime 11.8.0-rc.5667 → 11.8.0-rc.5670

app-ng-runtime/components/basic/search/bundles/index.umd.js

@@ -0,0 +1,1285 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/typeahead'), require('@wm/components/base'), require('rxjs'), require('rxjs/operators'), require('@wm/core'), require('@wm/components/input'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/typeahead', '@wm/components/base', 'rxjs', 'rxjs/operators', '@wm/core', '@wm/components/input', '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.core, global.ng.common, global.ng.forms, global.typeahead, global.wm.components.base, global.rxjs, global.rxjs.operators, global.wm.core, global.wm.components.input, global._));
+})(this, (function (exports, i0, i1$1, i2, i3, i4, rxjs, operators, i1, input, 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 i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const searchProps = new Map([
+        ['casesensitive', { value: false, ...i4.PROP_BOOLEAN }],
+        ['class', i4.PROP_STRING],
+        ['datacompletemsg', { value: 'No more data to load', ...i4.PROP_STRING }],
+        ['datafield', { value: 'All Fields', ...i4.PROP_STRING }],
+        ['dataoptions', i4.PROP_ANY],
+        ['dataset', i4.PROP_ANY],
+        ['datasource', i4.PROP_ANY],
+        ['datavalue', i4.PROP_STRING],
+        ['datavaluesource', i4.PROP_ANY],
+        ['dateformat', i4.PROP_STRING],
+        ['disabled', i4.PROP_BOOLEAN],
+        ['displayimagesrc', i4.PROP_STRING],
+        ['displaylabel', i4.PROP_STRING],
+        ['displayexpression', i4.PROP_STRING],
+        ['dropup', i4.PROP_BOOLEAN],
+        ['groupby', i4.PROP_STRING],
+        ['hint', i4.PROP_STRING],
+        ['imagewidth', { value: '16px', ...i4.PROP_STRING }],
+        ['limit', i4.PROP_NUMBER],
+        ['loadingdatamsg', { value: 'Loading items...', ...i4.PROP_STRING }],
+        ['match', i4.PROP_STRING],
+        ['matchmode', i4.PROP_STRING],
+        ['minchars', i4.PROP_NUMBER],
+        ['name', i4.PROP_STRING],
+        ['navsearchbar', { value: false, ...i4.PROP_BOOLEAN }],
+        ['orderby', i4.PROP_STRING],
+        ['placeholder', { value: 'Search', ...i4.PROP_STRING }],
+        ['position', i4.PROP_STRING],
+        ['query', i4.PROP_STRING],
+        ['readonly', i4.PROP_BOOLEAN],
+        ['required', i4.PROP_BOOLEAN],
+        ['searchkey', i4.PROP_STRING],
+        ['searchon', { value: 'typing', ...i4.PROP_STRING }],
+        ['shortcutkey', i4.PROP_STRING],
+        ['show', { value: true, ...i4.PROP_BOOLEAN }],
+        ['showclear', { value: false, ...i4.PROP_BOOLEAN }],
+        ['showsearchicon', i4.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...i4.PROP_NUMBER }],
+        ['type', { value: 'search', ...i4.PROP_STRING }],
+        ['debouncetime', { value: 250, ...i4.PROP_NUMBER }],
+        ['width', i4.PROP_STRING]
+    ]);
+    const registerProps = () => {
+        i4.register('wm-search', searchProps);
+        i4.registerFormWidget(i1.FormWidgetType.AUTOCOMPLETE, new Map(searchProps));
+        i4.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) => {
+                        i4.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 _c0 = ["ulElement"];
+    const _c1 = ["liElements"];
+    const _c2 = ["wmSearch", ""];
+    const _c3 = a0 => ({ customTemplate: a0 });
+    const _c4 = (a0, a1) => ({ active: a0, "list-group-header": a1 });
+    const _c5 = (a0, a1, a2, a3) => ({ item: a0, index: a1, match: a2, query: a3 });
+    const _c6 = () => ({ standalone: true });
+    const _c7 = a0 => ({ "show-btn": a0 });
+    const _c8 = a0 => ({ "disabled": a0 });
+    function SearchComponent_ng_template_0_a_0_img_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "img", 10);
+    } if (rf & 2) {
+        const model_r1 = i0__namespace.ɵɵnextContext(2).item;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵstyleProp("width", ctx_r1.imagewidth);
+        i0__namespace.ɵɵproperty("src", model_r1.imgSrc, i0__namespace.ɵɵsanitizeUrl);
+    } }
+    function SearchComponent_ng_template_0_a_0_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "a");
+        i0__namespace.ɵɵtemplate(1, SearchComponent_ng_template_0_a_0_img_1_Template, 1, 3, "img", 8);
+        i0__namespace.ɵɵelement(2, "span", 9);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        const model_r1 = ctx_r2.item;
+        const query_r4 = ctx_r2.query;
+        const match_r5 = ctx_r2.match;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", model_r1.imgSrc);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("title", model_r1.label)("innerHtml", ctx_r1.highlight(match_r5, query_r4) || model_r1.label, i0__namespace.ɵɵsanitizeHtml);
+    } }
+    function SearchComponent_ng_template_0_a_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "a", 11);
+        i0__namespace.ɵɵelement(1, "div", 12);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const match_r5 = i0__namespace.ɵɵnextContext().match;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(3, _c3, ctx_r1.content))("wmItemTemplate", ctx_r1.content)("userComponentParams", match_r5.item);
+    } }
+    function SearchComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵtemplate(0, SearchComponent_ng_template_0_a_0_Template, 3, 3, "a", 6)(1, SearchComponent_ng_template_0_a_1_Template, 2, 5, "a", 7);
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngIf", !ctx_r1.content);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.content);
+    } }
+    function SearchComponent_ng_template_2_li_2_h4_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "h4", 21);
+        i0__namespace.ɵɵtext(1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const match_r7 = i0__namespace.ɵɵnextContext().$implicit;
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(match_r7.value);
+    } }
+    function SearchComponent_ng_template_2_li_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementContainer(0, 22);
+    } if (rf & 2) {
+        const ctx_r7 = i0__namespace.ɵɵnextContext();
+        const match_r7 = ctx_r7.$implicit;
+        const i_r9 = ctx_r7.index;
+        const ctx_r9 = i0__namespace.ɵɵnextContext();
+        const itemTemplate_r11 = ctx_r9.itemTemplate;
+        const query_r12 = ctx_r9.query;
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", itemTemplate_r11)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction4(2, _c5, match_r7.item, i_r9, match_r7, query_r12));
+    } }
+    function SearchComponent_ng_template_2_li_2_Template(rf, ctx) { if (rf & 1) {
+        const _r6 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "li", 18, 4);
+        i0__namespace.ɵɵlistener("mouseenter", function SearchComponent_ng_template_2_li_2_Template_li_mouseenter_0_listener() { const match_r7 = i0__namespace.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.typeaheadContainer.selectActive(match_r7)); })("click", function SearchComponent_ng_template_2_li_2_Template_li_click_0_listener($event) { const match_r7 = i0__namespace.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); match_r7 && !match_r7.isHeader() && ctx_r1.typeaheadContainer.selectMatch(match_r7, $event); ctx_r1.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r1.notifySubscriber()); });
+        i0__namespace.ɵɵtemplate(2, SearchComponent_ng_template_2_li_2_h4_2_Template, 2, 1, "h4", 19)(3, SearchComponent_ng_template_2_li_2_ng_container_3_Template, 1, 7, "ng-container", 20);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const match_r7 = ctx.$implicit;
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c4, ctx_r1.typeaheadContainer && ctx_r1.typeaheadContainer.isActive(match_r7), match_r7 && match_r7.isHeader()));
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngIf", match_r7.isHeader());
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", !match_r7.isHeader());
+    } }
+    function SearchComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "ul", 13, 3);
+        i0__namespace.ɵɵtemplate(2, SearchComponent_ng_template_2_li_2_Template, 4, 6, "li", 14);
+        i0__namespace.ɵɵelementStart(3, "div", 15);
+        i0__namespace.ɵɵelement(4, "span", 16);
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(5, "div", 15);
+        i0__namespace.ɵɵelement(6, "i", 17)(7, "span", 16);
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const matches_r13 = ctx.matches;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngForOf", matches_r13);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("hidden", ctx_r1._loadingItems || !(ctx_r1.datacompletemsg && ctx_r1.dataProvider.isLastPage));
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("textContent", ctx_r1.datacompletemsg);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("hidden", !ctx_r1._loadingItems);
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
+    } }
+    function SearchComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+        const _r14 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementContainerStart(0);
+        i0__namespace.ɵɵelementStart(1, "input", 23);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_ng_container_4_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.query, $event) || (ctx_r1.query = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("input", function SearchComponent_ng_container_4_Template_input_input_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onInputChange($event)); })("keydown", function SearchComponent_ng_container_4_Template_input_keydown_1_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.listenQuery = true); })("keydown.enter", function SearchComponent_ng_container_4_Template_input_keydown_enter_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r1.handleEnterEvent($event)); })("keydown.arrowdown", function SearchComponent_ng_container_4_Template_input_keydown_arrowdown_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.selectNext($event)); })("blur", function SearchComponent_ng_container_4_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); })("click", function SearchComponent_ng_container_4_Template_input_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.handleFocus($event)); })("focus", function SearchComponent_ng_container_4_Template_input_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1._unsubscribeDv = false; ctx_r1.listenQuery = true; ctx_r1.handleFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnFocus($event)); })("focusout", function SearchComponent_ng_container_4_Template_input_focusout_1_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onFocusOut()); })("typeaheadLoading", function SearchComponent_ng_container_4_Template_input_typeaheadLoading_1_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1._loadingItems); })("typeaheadOnSelect", function SearchComponent_ng_container_4_Template_input_typeaheadOnSelect_1_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.typeaheadOnSelect($event)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(2, "i", 24);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_container_4_Template_i_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.clearSearch($event)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementContainerEnd();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const customItemTemplate_r15 = i0__namespace.ɵɵreference(1);
+        const customListTemplate_r16 = i0__namespace.ɵɵreference(3);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("title", ctx_r1.query || "")("placeholder", ctx_r1.placeholder || "")("disabled", ctx_r1.disabled);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.query);
+        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(23, _c6))("readonly", ctx_r1.readonly)("disabled", ctx_r1.disabled)("typeahead", ctx_r1.typeaheadDataSource)("typeaheadWaitMs", ctx_r1.debouncetime)("typeaheadItemTemplate", customItemTemplate_r15)("optionsListTemplate", customListTemplate_r16)("typeaheadMinLength", ctx_r1.minchars)("typeaheadOptionsLimit", ctx_r1.limit)("typeaheadGroupField", ctx_r1.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r1.optionslimitinscrollableview)("dropup", ctx_r1.dropup)("tabindex", ctx_r1.tabindex);
+        i0__namespace.ɵɵattribute("name", ctx_r1.name)("aria-label", ctx_r1.hint || "Search field");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("hidden", !ctx_r1.showClosebtn);
+    } }
+    function SearchComponent_ng_template_5_span_5_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "span", 32);
+    } }
+    function SearchComponent_ng_template_5_span_9_Template(rf, ctx) { if (rf & 1) {
+        const _r18 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "span", 33)(1, "form")(2, "button", 34);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_span_9_Template_button_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r18); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onSearchSelect($event)); });
+        i0__namespace.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c8, ctx_r1.disabled));
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("disabled", ctx_r1.disabled);
+    } }
+    function SearchComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+        const _r17 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "span", 25);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_span_click_0_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.closeSearch()); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(1, "span", 26);
+        i0__namespace.ɵɵtext(2, "Back button");
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(3, "input", 27);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_ng_template_5_Template_input_ngModelChange_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.query, $event) || (ctx_r1.query = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("input", function SearchComponent_ng_template_5_Template_input_input_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onInputChange($event)); })("keydown", function SearchComponent_ng_template_5_Template_input_keydown_3_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.listenQuery = true); })("keydown.enter", function SearchComponent_ng_template_5_Template_input_keydown_enter_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r1.handleEnterEvent($event)); })("keydown.arrowdown", function SearchComponent_ng_template_5_Template_input_keydown_arrowdown_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.selectNext($event)); })("blur", function SearchComponent_ng_template_5_Template_input_blur_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx_r1.onFocusOut()); })("click", function SearchComponent_ng_template_5_Template_input_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.handleFocus($event)); })("focus", function SearchComponent_ng_template_5_Template_input_focus_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1._unsubscribeDv = false; ctx_r1.listenQuery = true; ctx_r1.handleFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnFocus($event)); })("typeaheadLoading", function SearchComponent_ng_template_5_Template_input_typeaheadLoading_3_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1._loadingItems); })("typeaheadOnSelect", function SearchComponent_ng_template_5_Template_input_typeaheadOnSelect_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.typeaheadOnSelect($event)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelement(4, "input", 28);
+        i0__namespace.ɵɵtemplate(5, SearchComponent_ng_template_5_span_5_Template, 1, 0, "span", 29);
+        i0__namespace.ɵɵelementStart(6, "span", 30);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_span_click_6_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.clearSearch($event, true)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(7, "span", 26);
+        i0__namespace.ɵɵtext(8, "Clear button");
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵtemplate(9, SearchComponent_ng_template_5_span_9_Template, 3, 4, "span", 31);
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const customItemTemplate_r15 = i0__namespace.ɵɵreference(1);
+        const customListTemplate_r16 = i0__namespace.ɵɵreference(3);
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("title", ctx_r1.query || "")("placeholder", ctx_r1.placeholder || "")("container", ctx_r1.containerTarget || ".wm-app")("disabled", ctx_r1.disabled);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.query);
+        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(25, _c6))("readonly", ctx_r1.readonly)("typeahead", ctx_r1.typeaheadDataSource)("typeaheadWaitMs", ctx_r1.debouncetime)("typeaheadItemTemplate", customItemTemplate_r15)("optionsListTemplate", customListTemplate_r16)("typeaheadMinLength", ctx_r1.minchars)("typeaheadOptionsLimit", ctx_r1.limit)("typeaheadGroupField", ctx_r1.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r1.optionslimitinscrollableview)("tabindex", ctx_r1.tabindex)("dropup", ctx_r1.dropup);
+        i0__namespace.ɵɵattribute("name", ctx_r1.name)("aria-label", ctx_r1.hint || "Search field");
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1._loadingItems);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(26, _c7, ctx_r1.isQueryEntered()));
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.showsearchicon);
+    } }
+    const WIDGET_CONFIG = { widgetType: 'wm-search', hostClass: 'input-group' };
+    class SearchComponent extends input.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);
+            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.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 (!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.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.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 !== i4.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 === i4.ALLFIELDS && lodashEs.isObject(data)) {
+                this.queryModel = this.getTransformedData(i4.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 === i4.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 ? i4.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 ((!i1.isDefined(this.dataset) || !this.dataset.length) && this.dataProvider.updateDataset) {
+                    this.dataset = response;
+                }
+                if (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._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 = i4.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 i4.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.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();
+            i4.styler(this.nativeElement, this);
+            this.containerTarget = i4.getContainerTargetClass(this.nativeElement);
+        }
+        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);
+        }
+        static { this.ɵfac = function SearchComponent_Factory(t) { return new (t || SearchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵinjectAttribute('datavalue.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SearchComponent, selectors: [["", "wmSearch", ""]], viewQuery: function SearchComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(i3.TypeaheadDirective, 5);
+                i0__namespace.ɵɵviewQuery(_c0, 5);
+                i0__namespace.ɵɵviewQuery(_c1, 5);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.typeahead = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ulElement = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.liElements = _t);
+            } }, features: [i0__namespace.ɵɵProvidersFeature([
+                    i4.provideAs(SearchComponent, i2.NG_VALUE_ACCESSOR, true),
+                    i4.provideAs(SearchComponent, i2.NG_VALIDATORS, true),
+                    i4.provideAsWidgetRef(SearchComponent)
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c2, decls: 7, vars: 2, consts: [["customItemTemplate", ""], ["customListTemplate", ""], ["searchTemplate", ""], ["ulElement", ""], ["liElements", ""], [4, "ngIf", "ngIfElse"], [4, "ngIf"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", 4, "ngIf"], ["alt", "Search", 3, "src", "width", 4, "ngIf"], [3, "title", "innerHtml"], ["alt", "Search", 3, "src"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", ""], ["scrollable", "", 1, "app-search", "dropdown-menu"], [3, "ngClass", "mouseenter", "click", 4, "ngFor", "ngForOf"], [1, "status", 3, "hidden"], [3, "textContent"], [1, "fa", "fa-circle-o-notch", "fa-spin"], [3, "mouseenter", "click", "ngClass"], ["class", "group-title", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [1, "group-title"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "text", "focus-target", "", "container", "body", "autocomplete", "off", "typeaheadOptionField", "label", 1, "app-textbox", "form-control", "list-of-objs", "app-search-input", 3, "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "focusout", "typeaheadLoading", "typeaheadOnSelect", "title", "placeholder", "disabled", "ngModel", "ngModelOptions", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "dropup", "tabindex"], [1, "btn-close", "wi", "wi-cancel", 3, "click", "hidden"], ["aria-hidden", "true", 1, "wi", "wi-arrow-left", "form-control-feedback", "back-btn", 3, "click"], [1, "sr-only"], ["type", "text", "focus-target", "", "autocomplete", "off", "typeaheadOptionField", "label", 1, "app-textbox", "form-control", "list-of-objs", "app-search-input", 3, "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "typeaheadLoading", "typeaheadOnSelect", "title", "placeholder", "container", "disabled", "ngModel", "ngModelOptions", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "tabindex", "dropup"], ["ng-model", "proxyModel", "ng-required", "required", "tabindex", "-1", "aria-hidden", "true", 1, "model-holder"], ["aria-hidden", "true", "class", "fa fa-circle-o-notch fa-spin form-control-feedback", 4, "ngIf"], [1, "wi", "wi-close", "form-control-feedback", "clear-btn", 3, "click", "ngClass"], ["class", "input-group-addon", "aria-label", "search icon", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 1, "fa", "fa-circle-o-notch", "fa-spin", "form-control-feedback"], ["aria-label", "search icon", 1, "input-group-addon", 3, "ngClass"], ["title", "Search", "type", "submit", 1, "app-search-button", "wm-sl-l", "sl-search", 3, "click", "disabled"]], template: function SearchComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵtemplate(0, SearchComponent_ng_template_0_Template, 2, 2, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor)(2, SearchComponent_ng_template_2_Template, 8, 5, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(4, SearchComponent_ng_container_4_Template, 3, 24, "ng-container", 5)(5, SearchComponent_ng_template_5_Template, 10, 28, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
+            } if (rf & 2) {
+                const searchTemplate_r19 = i0__namespace.ɵɵreference(6);
+                i0__namespace.ɵɵadvance(4);
+                i0__namespace.ɵɵproperty("ngIf", ctx.navsearchbar)("ngIfElse", searchTemplate_r19);
+            } }, encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchComponent, [{
+            type: i0.Component,
+            args: [{ selector: '[wmSearch]', providers: [
+                        i4.provideAs(SearchComponent, i2.NG_VALUE_ACCESSOR, true),
+                        i4.provideAs(SearchComponent, i2.NG_VALIDATORS, true),
+                        i4.provideAsWidgetRef(SearchComponent)
+                    ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n    <!-- Default item template -->\n    <a *ngIf=\"!content\">\n        <img *ngIf=\"model.imgSrc\" [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n        <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n    <!-- Custom partial template -->\n    <a *ngIf=\"content\" [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n        <div partial-container-target></div>\n    </a>\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\" scrollable>\n        <li #liElements *ngFor=\"let match of matches; let i = index;\" [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            <h4 *ngIf=\"match.isHeader()\" class=\"group-title\">{{match.value}}</h4>\n            <ng-container *ngIf=\"!match.isHeader()\" [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n            </ng-container>\n        </li>\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<ng-container *ngIf=\"navsearchbar; else searchTemplate\">\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           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\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]=\"hint || 'Search field'\"/>\n    <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n</ng-container>\n<!--This template is for both web and fullscreen mode in mobile.-->\n<ng-template #searchTemplate>\n    <span class=\"wi wi-arrow-left form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"></span>\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           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]=\"hint || 'Search field'\">\n    <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n    <span *ngIf=\"_loadingItems\" aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n    <span class=\"wi wi-close form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"></span>\n    <span class=\"sr-only\">Clear button</span>\n    <span *ngIf=\"showsearchicon\" class=\"input-group-addon\" aria-label=\"search icon\" [ngClass]=\"{'disabled': disabled}\">\n        <form>\n            <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button wm-sl-l sl-search\" type=\"submit\"\n                    (click)=\"onSearchSelect($event)\"></button>\n        </form>\n    </span>\n</ng-template>\n" }]
+        }], () => [{ 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
+                }] }], { typeahead: [{
+                type: i0.ViewChild,
+                args: [i3.TypeaheadDirective]
+            }], ulElement: [{
+                type: i0.ViewChild,
+                args: ['ulElement']
+            }], liElements: [{
+                type: i0.ViewChildren,
+                args: ['liElements']
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SearchComponent, { className: "SearchComponent", filePath: "search.component.ts", lineNumber: 61 }); })();
+
+    class ScrollableDirective {
+        constructor(inj, searchRef) {
+            this.searchRef = searchRef;
+            this.elementRef = inj.get(i0.ElementRef);
+        }
+        ngAfterContentInit() {
+            // add the scroll event listener on the ul element.
+            this.elementRef.nativeElement.addEventListener('scroll', this.notifyParent.bind(this));
+            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);
+        }
+        static { this.ɵfac = function ScrollableDirective_Factory(t) { return new (t || ScrollableDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(SearchComponent)); }; }
+        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ScrollableDirective, selectors: [["", "scrollable", ""]] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ScrollableDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[scrollable]'
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: SearchComponent }], null); })();
+
+    const components = [
+        SearchComponent,
+        ScrollableDirective
+    ];
+    class SearchModule {
+        static { this.ɵfac = function SearchModule_Factory(t) { return new (t || SearchModule)(); }; }
+        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: SearchModule }); }
+        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1$1.CommonModule,
+                i2.FormsModule,
+                i3.TypeaheadModule,
+                i4.WmComponentsModule] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchModule, [{
+            type: i0.NgModule,
+            args: [{
+                    imports: [
+                        i1$1.CommonModule,
+                        i2.FormsModule,
+                        i3.TypeaheadModule,
+                        i4.WmComponentsModule
+                    ],
+                    declarations: [...components],
+                    exports: [...components]
+                }]
+        }], null, null); })();
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(SearchModule, { declarations: [SearchComponent,
+            ScrollableDirective], imports: [i1$1.CommonModule,
+            i2.FormsModule,
+            i3.TypeaheadModule,
+            i4.WmComponentsModule], exports: [SearchComponent,
+            ScrollableDirective] }); })();
+    i0__namespace.ɵɵsetComponentScope(SearchComponent, [i1$1__namespace.NgClass, i1$1__namespace.NgForOf, i1$1__namespace.NgIf, i1$1__namespace.NgTemplateOutlet, i2__namespace.ɵNgNoValidate, i2__namespace.DefaultValueAccessor, i2__namespace.NgControlStatus, i2__namespace.NgControlStatusGroup, i2__namespace.NgModel, i2__namespace.NgForm, i3__namespace.TypeaheadDirective, i4__namespace.ItemTemplateDirective, i4__namespace.PartialParamHandlerDirective, i4__namespace.PartialContainerDirective, i4__namespace.TextContentDirective, ScrollableDirective], []);
+
+    exports.ScrollableDirective = ScrollableDirective;
+    exports.SearchComponent = SearchComponent;
+    exports.SearchModule = SearchModule;
+
+}));