@wavemaker/app-ng-runtime 12.0.0-next.45001 → 12.0.0-next.45005

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

@@ -1,8 +1,8 @@
 (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')) :
-    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'], 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));
-})(this, (function (exports, i0, i1$1, i2, i3, i4, rxjs, operators, i1, input) { 'use strict';
+    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);
@@ -79,17 +79,17 @@
 
     class LocalDataProvider {
         applyFilter(entry, queryText, filtername) {
-            entry = _.isNumber(entry) ? entry.toString() : entry;
-            if (_.includes(filtername, 'start')) {
-                return _.startsWith(entry, queryText);
+            entry = lodashEs.isNumber(entry) ? entry.toString() : entry;
+            if (lodashEs.includes(filtername, 'start')) {
+                return lodashEs.startsWith(entry, queryText);
             }
-            else if (_.includes(filtername, 'end')) {
-                return _.endsWith(entry, queryText);
+            else if (lodashEs.includes(filtername, 'end')) {
+                return lodashEs.endsWith(entry, queryText);
             }
-            else if (_.includes(filtername, 'exact')) {
-                return _.isEqual(entry, queryText);
+            else if (lodashEs.includes(filtername, 'exact')) {
+                return lodashEs.isEqual(entry, queryText);
             }
-            return _.includes(entry, queryText);
+            return lodashEs.includes(entry, queryText);
         }
         // LocalData filtering is done based on the searchkey.
         filter(config) {
@@ -97,7 +97,7 @@
             let casesensitive = config.casesensitive;
             const matchMode = config.matchMode;
             // for supporting existing projects
-            if (matchMode && !_.includes(matchMode, 'ignorecase')) {
+            if (matchMode && !lodashEs.includes(matchMode, 'ignorecase')) {
                 casesensitive = true;
             }
             let queryText = config.query, filteredData;
@@ -107,13 +107,13 @@
                  * return the filtered data containing the matching string.
                  */
                 if (config.searchKey) {
-                    const keys = _.split(config.searchKey, ',');
-                    filteredData = _.filter(config.dataset, (item) => {
+                    const keys = lodashEs.split(config.searchKey, ',');
+                    filteredData = lodashEs.filter(config.dataset, (item) => {
                         return keys.some(key => {
-                            let a = _.get(item, key), b = queryText;
+                            let a = lodashEs.get(item, key), b = queryText;
                             if (!casesensitive) {
-                                a = _.toLower(_.toString(a));
-                                b = _.toLower(_.toString(b));
+                                a = lodashEs.toLower(lodashEs.toString(a));
+                                b = lodashEs.toLower(lodashEs.toString(b));
                             }
                             return this.applyFilter(a, b, matchMode);
                         });
@@ -122,21 +122,23 @@
                 else {
                     // local search on data with array of objects.
                     // Iterate over each item and return the filtered data containing the matching string.
-                    if (_.isArray(entries) && _.isObject(entries[0])) {
-                        filteredData = _.filter(entries, entry => {
-                            let a = _.values(entry).join(' ');
+                    if (lodashEs.isArray(entries) && lodashEs.isObject(entries[0])) {
+                        filteredData = lodashEs.filter(entries, entry => {
+                            let a = lodashEs.values(entry).join(' ');
                             if (!casesensitive) {
-                                a = _.toLower(a);
-                                queryText = _.toLower(queryText);
+                                a = lodashEs.toLower(a);
+                                // @ts-ignore
+                                queryText = lodashEs.toLower(queryText);
                             }
                             return this.applyFilter(a, queryText);
                         });
                     }
                     else {
-                        filteredData = _.filter(entries, entry => {
+                        filteredData = lodashEs.filter(entries, entry => {
                             if (!casesensitive) {
-                                entry = _.toLower(entry);
-                                queryText = _.toLower(queryText);
+                                entry = lodashEs.toLower(entry);
+                                // @ts-ignore
+                                queryText = lodashEs.toLower(queryText);
                             }
                             return this.applyFilter(entry, queryText, matchMode);
                         });
@@ -166,7 +168,7 @@
                         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, _.assign({ relatedField: dataoptions.relatedField }, requestParams)).then(resolve, reject);
+                            config.datasource.execute(i1.DataSource.Operation.GET_RELATED_TABLE_DATA, lodashEs.assign({ relatedField: dataoptions.relatedField }, requestParams)).then(resolve, reject);
                         });
                     });
                 }
@@ -177,7 +179,7 @@
                         page: config.page,
                         fields: dataoptions.distinctField,
                         entityName: dataoptions.tableName,
-                        filterFields: _.assign(dataoptions.filterFields, requestParams.filterFields),
+                        filterFields: lodashEs.assign(dataoptions.filterFields, requestParams.filterFields),
                         filterExpr: i1.getClonedObject(dataoptions.filterExpr || {})
                     });
                 }
@@ -201,7 +203,7 @@
             // in case data received is value as string then add that string value to object and convert object into array
             if (tempResponse) {
                 const tempObj = {};
-                _.set(tempObj, operationResult, tempResponse);
+                lodashEs.set(tempObj, operationResult, tempResponse);
                 data = [tempObj]; // convert data into an array having tempObj
             }
             else {
@@ -214,7 +216,7 @@
             return [];
         }
         isLastPageForDistinctApi(data, page, totalElements, _isLastPage) {
-            return page > 1 && !_isLastPage && _.isEmpty(data) && totalElements === i1.AppConstants.INT_MAX_VALUE;
+            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) {
@@ -223,8 +225,8 @@
             let _isLastPage;
             let page;
             let isPaginatedData;
-            const expressionArray = _.split(config.binddataset, '.');
-            const dataExpression = _.slice(expressionArray, _.indexOf(expressionArray, 'dataSet') + 1).join('.');
+            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;
@@ -246,19 +248,19 @@
                 }
                 // if data expression exists, extract the data from the expression path
                 if (dataExpression) {
-                    if (_.isArray(data)) {
+                    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 (_.isObject(data)) {
-                        formattedData = _.get(data, dataExpression);
+                    else if (lodashEs.isObject(data)) {
+                        formattedData = lodashEs.get(data, dataExpression);
                     }
                     data = formattedData || data;
                 }
-                if (!_.isArray(data)) {
+                if (!lodashEs.isArray(data)) {
                     data = this.getTransformedData(config.datasource, data);
                 }
                 // in case of no data received, resolve the promise with empty array
@@ -306,47 +308,51 @@
     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", 8);
+        i0__namespace.ɵɵelement(0, "img", 10);
     } if (rf & 2) {
-        const model_r7 = i0__namespace.ɵɵnextContext(2).item;
-        const ctx_r13 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵstyleProp("width", ctx_r13.imagewidth);
-        i0__namespace.ɵɵproperty("src", model_r7.imgSrc, i0__namespace.ɵɵsanitizeUrl);
+        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", 6);
-        i0__namespace.ɵɵelement(2, "span", 7);
+        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_r15 = i0__namespace.ɵɵnextContext();
-        const model_r7 = ctx_r15.item;
-        const match_r10 = ctx_r15.match;
-        const query_r9 = ctx_r15.query;
-        const ctx_r11 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", model_r7.imgSrc);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("title", model_r7.label)("innerHtml", ctx_r11.highlight(match_r10, query_r9) || model_r7.label, i0__namespace.ɵɵsanitizeHtml);
+        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);
     } }
-    const _c3 = function (a0) { return { customTemplate: a0 }; };
     function SearchComponent_ng_template_0_a_1_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "a", 9);
-        i0__namespace.ɵɵelement(1, "div", 10);
+        i0__namespace.ɵɵelementStart(0, "a", 11);
+        i0__namespace.ɵɵelement(1, "div", 12);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const match_r10 = i0__namespace.ɵɵnextContext().match;
-        const ctx_r12 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(3, _c3, ctx_r12.content))("wmItemTemplate", ctx_r12.content)("userComponentParams", match_r10.item);
+        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", 4);
-        i0__namespace.ɵɵtemplate(1, SearchComponent_ng_template_0_a_1_Template, 2, 5, "a", 5);
+        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(1);
+        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) {
@@ -354,130 +360,132 @@
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const match_r22 = i0__namespace.ɵɵnextContext().$implicit;
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate(match_r22.value);
+        const match_r7 = i0__namespace.ɵɵnextContext().$implicit;
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(match_r7.value);
     } }
-    const _c4 = function (a0, a1, a2, a3) { return { item: a0, index: a1, match: a2, query: a3 }; };
     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 match_r22 = i0__namespace.ɵɵnextContext().$implicit;
-        const ctx_r27 = i0__namespace.ɵɵnextContext();
-        const itemTemplate_r18 = ctx_r27.itemTemplate;
-        const query_r19 = ctx_r27.query;
-        const ctx_r25 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", itemTemplate_r18)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction4(2, _c4, match_r22.item, ctx_r25.i, match_r22, query_r19));
+        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));
     } }
-    const _c5 = function (a0, a1) { return { active: a0, "list-group-header": a1 }; };
     function SearchComponent_ng_template_2_li_2_Template(rf, ctx) { if (rf & 1) {
-        const _r30 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "li", 17, 18);
-        i0__namespace.ɵɵlistener("mouseenter", function SearchComponent_ng_template_2_li_2_Template_li_mouseenter_0_listener() { const restoredCtx = i0__namespace.ɵɵrestoreView(_r30); const match_r22 = restoredCtx.$implicit; const ctx_r29 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r29.typeaheadContainer.selectActive(match_r22)); })("click", function SearchComponent_ng_template_2_li_2_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r30); const match_r22 = restoredCtx.$implicit; const ctx_r31 = i0__namespace.ɵɵnextContext(2); match_r22 && !match_r22.isHeader() && ctx_r31.typeaheadContainer.selectMatch(match_r22, $event); ctx_r31.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r31.notifySubscriber()); });
-        i0__namespace.ɵɵtemplate(2, SearchComponent_ng_template_2_li_2_h4_2_Template, 2, 1, "h4", 19);
-        i0__namespace.ɵɵtemplate(3, SearchComponent_ng_template_2_li_2_ng_container_3_Template, 1, 7, "ng-container", 20);
+        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_r22 = ctx.$implicit;
-        const ctx_r21 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c5, ctx_r21.typeaheadContainer && ctx_r21.typeaheadContainer.isActive(match_r22), match_r22 && match_r22.isHeader()));
+        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_r22.isHeader());
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", !match_r22.isHeader());
+        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", 11, 12);
-        i0__namespace.ɵɵtemplate(2, SearchComponent_ng_template_2_li_2_Template, 4, 6, "li", 13);
-        i0__namespace.ɵɵelementStart(3, "div", 14);
-        i0__namespace.ɵɵelement(4, "span", 15);
+        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", 14);
-        i0__namespace.ɵɵelement(6, "i", 16)(7, "span", 15);
+        i0__namespace.ɵɵelementStart(5, "div", 15);
+        i0__namespace.ɵɵelement(6, "i", 17)(7, "span", 16);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
-        const matches_r17 = ctx.matches;
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
+        const matches_r13 = ctx.matches;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngForOf", matches_r17);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("hidden", ctx_r3._loadingItems || !(ctx_r3.datacompletemsg && ctx_r3.dataProvider.isLastPage));
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("textContent", ctx_r3.datacompletemsg);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("hidden", !ctx_r3._loadingItems);
+        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_r3.loadingdatamsg);
+        i0__namespace.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
     } }
     function SearchComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-        const _r33 = i0__namespace.ɵɵgetCurrentView();
+        const _r14 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementContainerStart(0);
         i0__namespace.ɵɵelementStart(1, "input", 23);
-        i0__namespace.ɵɵlistener("ngModelChange", function SearchComponent_ng_container_4_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r32 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r32.query = $event); })("input", function SearchComponent_ng_container_4_Template_input_input_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r34 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r34.onInputChange($event)); })("keydown", function SearchComponent_ng_container_4_Template_input_keydown_1_listener() { i0__namespace.ɵɵrestoreView(_r33); const ctx_r35 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r35.listenQuery = true); })("keydown.enter", function SearchComponent_ng_container_4_Template_input_keydown_enter_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r36 = i0__namespace.ɵɵnextContext(); ctx_r36.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r36.handleEnterEvent($event)); })("keydown.arrowdown", function SearchComponent_ng_container_4_Template_input_keydown_arrowdown_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r37 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r37.selectNext($event)); })("blur", function SearchComponent_ng_container_4_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r38 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r38.invokeOnTouched($event)); })("click", function SearchComponent_ng_container_4_Template_input_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r39 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r39.handleFocus($event)); })("focus", function SearchComponent_ng_container_4_Template_input_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r40 = i0__namespace.ɵɵnextContext(); ctx_r40._unsubscribeDv = false; ctx_r40.listenQuery = true; ctx_r40.handleFocus($event); return i0__namespace.ɵɵresetView(ctx_r40.invokeOnFocus($event)); })("focusout", function SearchComponent_ng_container_4_Template_input_focusout_1_listener() { i0__namespace.ɵɵrestoreView(_r33); const ctx_r41 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r41.onFocusOut()); })("typeaheadLoading", function SearchComponent_ng_container_4_Template_input_typeaheadLoading_1_listener() { i0__namespace.ɵɵrestoreView(_r33); const ctx_r42 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r42._loadingItems); })("typeaheadOnSelect", function SearchComponent_ng_container_4_Template_input_typeaheadOnSelect_1_listener($event) { i0__namespace.ɵɵrestoreView(_r33); const ctx_r43 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r43.typeaheadOnSelect($event)); });
+        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(_r33); const ctx_r44 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r44.clearSearch($event)); });
+        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_r4 = i0__namespace.ɵɵnextContext();
-        const _r0 = i0__namespace.ɵɵreference(1);
-        const _r2 = i0__namespace.ɵɵreference(3);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("title", ctx_r4.query || "")("placeholder", ctx_r4.placeholder || "")("disabled", ctx_r4.disabled)("ngModel", ctx_r4.query)("readonly", ctx_r4.readonly)("disabled", ctx_r4.disabled)("typeahead", ctx_r4.typeaheadDataSource)("typeaheadWaitMs", ctx_r4.debouncetime)("typeaheadItemTemplate", _r0)("optionsListTemplate", _r2)("typeaheadMinLength", ctx_r4.minchars)("typeaheadOptionsLimit", ctx_r4.limit)("typeaheadGroupField", ctx_r4.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r4.optionslimitinscrollableview)("dropup", ctx_r4.dropup)("tabindex", ctx_r4.tabindex);
-        i0__namespace.ɵɵattribute("name", ctx_r4.name)("aria-label", ctx_r4.hint || "Search field");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("hidden", !ctx_r4.showClosebtn);
+        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);
     } }
-    const _c6 = function (a0) { return { "disabled": a0 }; };
     function SearchComponent_ng_template_5_span_9_Template(rf, ctx) { if (rf & 1) {
-        const _r48 = i0__namespace.ɵɵgetCurrentView();
+        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(_r48); const ctx_r47 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r47.onSearchSelect($event)); });
+        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_r46 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c6, ctx_r46.disabled));
+        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_r46.disabled);
+        i0__namespace.ɵɵproperty("disabled", ctx_r1.disabled);
     } }
-    const _c7 = function (a0) { return { "show-btn": a0 }; };
     function SearchComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-        const _r50 = i0__namespace.ɵɵgetCurrentView();
+        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(_r50); const ctx_r49 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r49.closeSearch()); });
+        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.ɵɵlistener("ngModelChange", function SearchComponent_ng_template_5_Template_input_ngModelChange_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r51 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r51.query = $event); })("input", function SearchComponent_ng_template_5_Template_input_input_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r52 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r52.onInputChange($event)); })("keydown", function SearchComponent_ng_template_5_Template_input_keydown_3_listener() { i0__namespace.ɵɵrestoreView(_r50); const ctx_r53 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r53.listenQuery = true); })("keydown.enter", function SearchComponent_ng_template_5_Template_input_keydown_enter_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r54 = i0__namespace.ɵɵnextContext(); ctx_r54.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r54.handleEnterEvent($event)); })("keydown.arrowdown", function SearchComponent_ng_template_5_Template_input_keydown_arrowdown_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r55 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r55.selectNext($event)); })("blur", function SearchComponent_ng_template_5_Template_input_blur_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r56 = i0__namespace.ɵɵnextContext(); ctx_r56.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx_r56.onFocusOut()); })("click", function SearchComponent_ng_template_5_Template_input_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r57 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r57.handleFocus($event)); })("focus", function SearchComponent_ng_template_5_Template_input_focus_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r58 = i0__namespace.ɵɵnextContext(); ctx_r58._unsubscribeDv = false; ctx_r58.listenQuery = true; ctx_r58.handleFocus($event); return i0__namespace.ɵɵresetView(ctx_r58.invokeOnFocus($event)); })("typeaheadLoading", function SearchComponent_ng_template_5_Template_input_typeaheadLoading_3_listener() { i0__namespace.ɵɵrestoreView(_r50); const ctx_r59 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r59._loadingItems); })("typeaheadOnSelect", function SearchComponent_ng_template_5_Template_input_typeaheadOnSelect_3_listener($event) { i0__namespace.ɵɵrestoreView(_r50); const ctx_r60 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r60.typeaheadOnSelect($event)); });
+        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(_r50); const ctx_r61 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r61.clearSearch($event, true)); });
+        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_r6 = i0__namespace.ɵɵnextContext();
-        const _r0 = i0__namespace.ɵɵreference(1);
-        const _r2 = i0__namespace.ɵɵreference(3);
+        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_r6.query || "")("placeholder", ctx_r6.placeholder || "")("container", ctx_r6.containerTarget || ".wm-app")("disabled", ctx_r6.disabled)("ngModel", ctx_r6.query)("readonly", ctx_r6.readonly)("typeahead", ctx_r6.typeaheadDataSource)("typeaheadWaitMs", ctx_r6.debouncetime)("typeaheadItemTemplate", _r0)("optionsListTemplate", _r2)("typeaheadMinLength", ctx_r6.minchars)("typeaheadOptionsLimit", ctx_r6.limit)("typeaheadGroupField", ctx_r6.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r6.optionslimitinscrollableview)("tabindex", ctx_r6.tabindex)("dropup", ctx_r6.dropup);
-        i0__namespace.ɵɵattribute("name", ctx_r6.name)("aria-label", ctx_r6.hint || "Search field");
+        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_r6._loadingItems);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(24, _c7, ctx_r6.isQueryEntered()));
+        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_r6.showsearchicon);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.showsearchicon);
     } }
     const WIDGET_CONFIG = { widgetType: 'wm-search', hostClass: 'input-group' };
     class SearchComponent extends input.DatasetAwareFormComponent {
@@ -491,8 +499,8 @@
             const data = this.datavalue || this.toBeProcessedDatavalue;
             this.updateByDatavalue(data);
         }
-        constructor(inj, app, binddatavalue, binddataset) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, app, binddatavalue, binddataset, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.binddatavalue = binddatavalue;
             this.binddataset = binddataset;
             this.query = '';
@@ -531,7 +539,7 @@
              * after getting the response, set the queryModel and query.
              */
             const datavalueSubscription = this.datavalue$.subscribe((val) => {
-                const query = (_.isArray(val) ? val[0] : val);
+                const query = (lodashEs.isArray(val) ? val[0] : val);
                 if (query === null || query === '') {
                     this._modelByValue = '';
                     // reset the query.
@@ -543,7 +551,7 @@
                 if (!this._unsubscribeDv) {
                     this._defaultQueryInvoked = false;
                     // if prev datavalue is not equal to current datavalue then clear the modelByKey and queryModel
-                    if (!_.isObject(val) && this.prevDatavalue !== val) {
+                    if (!lodashEs.isObject(val) && this.prevDatavalue !== val) {
                         this._modelByKey = undefined;
                         this.query = this.queryModel = '';
                     }
@@ -631,7 +639,7 @@
         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 && !_.get(this.dataoptions, 'filterFields') && i1.isDefined(this._lastResult)) {
+            if (this._lastQuery === query && !lodashEs.get(this.dataoptions, 'filterFields') && i1.isDefined(this._lastResult)) {
                 this._loadingItems = false;
                 return rxjs.of(this._lastResult);
             }
@@ -643,12 +651,12 @@
             */
             if (this.type === 'autocomplete' && this.searchkey && this.query && this.datavalue) {
                 let bindDisplayLabelArray = [];
-                const searchKeyArray = _.split(this.searchkey, ',');
+                const searchKeyArray = lodashEs.split(this.searchkey, ',');
                 let displaylabel;
                 if (this.binddisplaylabel) {
-                    bindDisplayLabelArray = _.split(this.binddisplaylabel, '+');
+                    bindDisplayLabelArray = lodashEs.split(this.binddisplaylabel, '+');
                     if (bindDisplayLabelArray.length === 1) {
-                        if (!_.includes(bindDisplayLabelArray[0], '|')) {
+                        if (!lodashEs.includes(bindDisplayLabelArray[0], '|')) {
                             const regex = /\[(.*?)\]/;
                             displaylabel = regex.exec(bindDisplayLabelArray[0])[1];
                         }
@@ -657,8 +665,8 @@
                         }
                     }
                 }
-                if ((bindDisplayLabelArray.length > 1 || (displaylabel && !_.includes(searchKeyArray, displaylabel))
-                    || (this.displayexpression && !_.includes(searchKeyArray, this.displayexpression)))) {
+                if ((bindDisplayLabelArray.length > 1 || (displaylabel && !lodashEs.includes(searchKeyArray, displaylabel))
+                    || (this.displayexpression && !lodashEs.includes(searchKeyArray, this.displayexpression)))) {
                     this._loadingItems = false;
                     return rxjs.of([]);
                 }
@@ -667,7 +675,7 @@
             return rxjs.from(this.getDataSource(query));
         }
         handleEvent(node, eventName, eventCallback, locals) {
-            if (!_.includes(['blur', 'focus', 'select', 'submit', 'change'], eventName)) {
+            if (!lodashEs.includes(['blur', 'focus', 'select', 'submit', 'change'], eventName)) {
                 super.handleEvent(node, eventName, eventCallback, locals);
             }
         }
@@ -717,7 +725,7 @@
             // trigger the typeahead change manually to fetch the next set of results.
             this.typeahead.onInput({
                 target: {
-                    value: _.trim(this.query) || '0' // dummy data to notify the observables
+                    value: lodashEs.trim(this.query) || '0' // dummy data to notify the observables
                 }
             });
         }
@@ -768,7 +776,7 @@
         // Triggered for enter event
         handleEnterEvent($event) {
             // submit event triggered when there is no search results
-            if (!_.get(this.typeahead, 'matches.length')) {
+            if (!lodashEs.get(this.typeahead, 'matches.length')) {
                 this.onSearchSelect($event);
             }
         }
@@ -810,7 +818,7 @@
             }
             // setting the ulElements, liElement on typeaheadContainer.
             // as we are using customOption template, liElements are not available on typeaheadContainer so append them explicitly.
-            const fn = _.debounce(() => {
+            const fn = lodashEs.debounce(() => {
                 this._isOpen = true;
                 this.typeaheadContainer = this.typeahead._container || this.typeahead._typeahead.instance;
                 this.typeaheadContainer.liElements = this.liElements;
@@ -828,7 +836,7 @@
                 const screenHeight = this.$element.closest('.app-content').height();
                 dropdownEl.css({ position: 'relative', top: 0, height: screenHeight + 'px' });
                 this.showClosebtn = this.query && this.query !== '';
-                if (!_.isUndefined(this.dataProvider.isLastPage) && !this.dataProvider.isLastPage) {
+                if (!lodashEs.isUndefined(this.dataProvider.isLastPage) && !this.dataProvider.isLastPage) {
                     this.triggerSearch();
                 }
             }
@@ -883,7 +891,7 @@
                     this.query = '';
                 }
                 if (this.clearData) {
-                    if (_.get(this.typeahead, '_typeahead.isShown')) {
+                    if (lodashEs.get(this.typeahead, '_typeahead.isShown')) {
                         this.typeahead.hide();
                     }
                 }
@@ -896,9 +904,9 @@
         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) && !_.isObject(data) && this.datasource && !i1.isDefined(this._modelByKey) && this.datafield !== i4.ALLFIELDS) {
+            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) && !_.isEmpty(this.queryModel)) {
+                if (i1.isDefined(this.queryModel) && !lodashEs.isEmpty(this.queryModel)) {
                     this.updateDatavalueFromQueryModel();
                     return;
                 }
@@ -911,8 +919,8 @@
         // updates the model value using queryModel
         updateDatavalueFromQueryModel() {
             if (i1.isDefined(this.queryModel)) {
-                this._modelByValue = _.isArray(this.queryModel) ? this.queryModel[0].value : this.queryModel;
-                this._modelByKey = _.isArray(this.queryModel) ? this.queryModel[0].key : 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;
             }
         }
@@ -922,14 +930,14 @@
             if (this._defaultQueryInvoked && this.searchkey) {
                 return;
             }
-            const selectedItem = _.find(this.datasetItems, (item) => {
-                return (_.isObject(item.value) ? _.isEqual(item.value, data) : (_.toString(item.value)).toLowerCase() === (_.toString(data)).toLowerCase());
+            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 && _.isObject(data)) {
+            else if (this.datafield === i4.ALLFIELDS && lodashEs.isObject(data)) {
                 this.queryModel = this.getTransformedData(i4.extractDataAsArray(data));
             }
             else {
@@ -942,7 +950,7 @@
             }
             this.updateDatavalueFromQueryModel();
             // Show the label value on input.
-            this._lastQuery = this.query = i1.isDefined(this.queryModel) && this.queryModel.length ? _.get(this.queryModel[0], 'label') : '';
+            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
@@ -1008,19 +1016,19 @@
                     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() && !_.isUndefined(this.dataProvider.isLastPage) && !this.dataProvider.isLastPage) {
+                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 = _.map(transformedData, 'value');
+                this.result = lodashEs.map(transformedData, 'value');
                 return transformedData;
             }, (error) => {
                 this._loadingItems = false;
                 return [];
             }).then(result => {
                 if (this.isScrolled) {
-                    (_.debounce(() => {
+                    (lodashEs.debounce(() => {
                         this.setLastActiveMatchAsSelected();
                     }, 30))();
                     this.isScrolled = false;
@@ -1042,7 +1050,7 @@
         }
         // this method returns the parent context i.e. Page context and not parent component's context.
         getContext(context) {
-            if (context && _.get(context, 'widget')) {
+            if (context && lodashEs.get(context, 'widget')) {
                 return this.getContext(context.viewParent);
             }
             return context;
@@ -1138,7 +1146,7 @@
             }
             // 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 = _.get(this._modelByValue, nv) || this._modelByValue;
+                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') {
@@ -1147,14 +1155,14 @@
                 }
                 else {
                     this.clearData = true;
-                    if (_.get(this.typeahead, '_typeahead.isShown')) {
+                    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')); }; }
+        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);
@@ -1168,31 +1176,33 @@
                     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", ""], [4, "ngIf", "ngIfElse"], ["searchTemplate", ""], [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"], ["ulElement", ""], [3, "ngClass", "mouseenter", "click", 4, "ngFor", "ngForOf"], [1, "status", 3, "hidden"], [3, "textContent"], [1, "fa", "fa-circle-o-notch", "fa-spin"], [3, "ngClass", "mouseenter", "click"], ["liElements", ""], ["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, "title", "placeholder", "disabled", "ngModel", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "dropup", "tabindex", "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "focusout", "typeaheadLoading", "typeaheadOnSelect"], [1, "btn-close", "wi", "wi-cancel", 3, "hidden", "click"], ["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, "title", "placeholder", "container", "disabled", "ngModel", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "tabindex", "dropup", "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "typeaheadLoading", "typeaheadOnSelect"], ["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, "ngClass", "click"], ["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, "disabled", "click"]], 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);
-                i0__namespace.ɵɵtemplate(2, SearchComponent_ng_template_2_Template, 8, 5, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(4, SearchComponent_ng_container_4_Template, 3, 22, "ng-container", 2);
-                i0__namespace.ɵɵtemplate(5, SearchComponent_ng_template_5_Template, 10, 26, "ng-template", null, 3, i0__namespace.ɵɵtemplateRefExtractor);
+                ]), 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 _r5 = i0__namespace.ɵɵreference(6);
+                const searchTemplate_r19 = i0__namespace.ɵɵreference(6);
                 i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("ngIf", ctx.navsearchbar)("ngIfElse", _r5);
+                i0__namespace.ɵɵproperty("ngIf", ctx.navsearchbar)("ngIfElse", searchTemplate_r19);
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchComponent, [{
+    (() => { (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\" [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           [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           [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" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                    ], 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']
-                }] }]; }, { typeahead: [{
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { typeahead: [{
                 type: i0.ViewChild,
                 args: [i3.TypeaheadDirective]
             }], ulElement: [{
@@ -1202,6 +1212,7 @@
                 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) {
@@ -1227,12 +1238,12 @@
         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", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ScrollableDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ScrollableDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[scrollable]'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: SearchComponent }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: SearchComponent }], null); })();
 
     const components = [
         SearchComponent,
@@ -1246,7 +1257,7 @@
                 i3.TypeaheadModule,
                 i4.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [