(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],
        ['arialabel', 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)("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("accesskey", ctx_r1.shortcutkey)("name", ctx_r1.name)("aria-label", ctx_r1.arialabel || "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(26, _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("accesskey", ctx_r1.shortcutkey)("name", ctx_r1.name)("aria-label", ctx_r1.arialabel || "Search field");
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngIf", ctx_r1._loadingItems);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(27, _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);
        }
        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);
        }
        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", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 1, "fa", "fa-circle-o-notch", "fa-spin", "form-control-feedback"], [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, 29, "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           [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</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           [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    <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\" [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\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: 66 }); })();

    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;

}));
