@wavemaker/app-ng-runtime 11.10.5-rc.6100 → 11.11.0-next.27920

package/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'), 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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/forms'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('ngx-bootstrap/typeahead'), require('@wm/core'), require('@wm/components/input'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/forms', '@angular/core', 'rxjs', 'rxjs/operators', 'ngx-bootstrap/typeahead', '@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.common, global.wm.components.base, global.ng.forms, global.ng.core, global.rxjs, global.rxjs.operators, global.typeahead, global.wm.core, global.wm.components.input, global._));
+})(this, (function (exports, i2, i3, i4, i0, rxjs, operators, i5, i1, input, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,64 +21,96 @@
         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 i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
 
+    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(__ngFactoryType__) { return new (__ngFactoryType__ || ScrollableDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(SearchComponent)); }; }
+        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ScrollableDirective, selectors: [["", "scrollable", ""]], standalone: true }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ScrollableDirective, [{
+            type: i0.Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[scrollable]'
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: SearchComponent }], null); })();
+
     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],
-        ['clearsearchiconclass', { value: 'wi wi-close', ...i4.PROP_STRING }],
-        ['backsearchiconclass', { value: 'wi wi-arrow-left', ...i4.PROP_STRING }],
-        ['searchiconclass', { value: 'wm-sl-l sl-search', ...i4.PROP_STRING }],
+        ['casesensitive', { value: false, ...i3.PROP_BOOLEAN }],
+        ['class', i3.PROP_STRING],
+        ['datacompletemsg', { value: 'No more data to load', ...i3.PROP_STRING }],
+        ['datafield', { value: 'All Fields', ...i3.PROP_STRING }],
+        ['dataoptions', i3.PROP_ANY],
+        ['dataset', i3.PROP_ANY],
+        ['datasource', i3.PROP_ANY],
+        ['datavalue', i3.PROP_STRING],
+        ['datavaluesource', i3.PROP_ANY],
+        ['dateformat', i3.PROP_STRING],
+        ['disabled', i3.PROP_BOOLEAN],
+        ['displayimagesrc', i3.PROP_STRING],
+        ['displaylabel', i3.PROP_STRING],
+        ['displayexpression', i3.PROP_STRING],
+        ['dropup', i3.PROP_BOOLEAN],
+        ['groupby', i3.PROP_STRING],
+        ['hint', i3.PROP_STRING],
+        ['arialabel', i3.PROP_STRING],
+        ['imagewidth', { value: '16px', ...i3.PROP_STRING }],
+        ['limit', i3.PROP_NUMBER],
+        ['loadingdatamsg', { value: 'Loading items...', ...i3.PROP_STRING }],
+        ['match', i3.PROP_STRING],
+        ['matchmode', i3.PROP_STRING],
+        ['minchars', i3.PROP_NUMBER],
+        ['name', i3.PROP_STRING],
+        ['navsearchbar', { value: false, ...i3.PROP_BOOLEAN }],
+        ['orderby', i3.PROP_STRING],
+        ['placeholder', { value: 'Search', ...i3.PROP_STRING }],
+        ['position', i3.PROP_STRING],
+        ['query', i3.PROP_STRING],
+        ['readonly', i3.PROP_BOOLEAN],
+        ['required', i3.PROP_BOOLEAN],
+        ['searchkey', i3.PROP_STRING],
+        ['searchon', { value: 'typing', ...i3.PROP_STRING }],
+        ['shortcutkey', i3.PROP_STRING],
+        ['show', { value: true, ...i3.PROP_BOOLEAN }],
+        ['showclear', { value: false, ...i3.PROP_BOOLEAN }],
+        ['showsearchicon', i3.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...i3.PROP_NUMBER }],
+        ['type', { value: 'search', ...i3.PROP_STRING }],
+        ['debouncetime', { value: 250, ...i3.PROP_NUMBER }],
+        ['width', i3.PROP_STRING],
+        ['clearsearchiconclass', { value: 'wi wi-close', ...i3.PROP_STRING }],
+        ['backsearchiconclass', { value: 'wi wi-arrow-left', ...i3.PROP_STRING }],
+        ['searchiconclass', { value: 'wm-sl-l sl-search', ...i3.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));
+        i3.register('wm-search', searchProps);
+        i3.registerFormWidget(i1.FormWidgetType.AUTOCOMPLETE, new Map(searchProps));
+        i3.registerFormWidget(i1.FormWidgetType.TYPEAHEAD, new Map(searchProps));
     };
 
     class LocalDataProvider {
@@ -169,7 +201,7 @@
                 // Fetch the related field data
                 if (dataoptions.relatedField) {
                     return new Promise((resolve, reject) => {
-                        i4.interpolateBindExpressions(config.viewParent, dataoptions.filterExpr, (filterexpressions) => {
+                        i3.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);
@@ -318,18 +350,18 @@
     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);
+    function SearchComponent_ng_template_0_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "img", 7);
     } 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) {
+    function SearchComponent_ng_template_0_Conditional_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.ɵɵtemplate(1, SearchComponent_ng_template_0_Conditional_0_Conditional_1_Template, 1, 3, "img", 5);
+        i0__namespace.ɵɵelement(2, "span", 6);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
@@ -338,13 +370,13 @@
         const match_r5 = ctx_r2.match;
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", model_r1.imgSrc);
+        i0__namespace.ɵɵconditional(model_r1.imgSrc ? 1 : -1);
         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);
+    function SearchComponent_ng_template_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "a", 4);
+        i0__namespace.ɵɵelement(1, "div", 8);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const match_r5 = i0__namespace.ɵɵnextContext().match;
@@ -352,15 +384,15 @@
         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);
+        i0__namespace.ɵɵtemplate(0, SearchComponent_ng_template_0_Conditional_0_Template, 3, 3, "a")(1, SearchComponent_ng_template_0_Conditional_1_Template, 2, 5, "a", 4);
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngIf", !ctx_r1.content);
+        i0__namespace.ɵɵconditional(!ctx_r1.content ? 0 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.content);
+        i0__namespace.ɵɵconditional(ctx_r1.content ? 1 : -1);
     } }
-    function SearchComponent_ng_template_2_li_2_h4_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "h4", 21);
+    function SearchComponent_ng_template_2_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "h4", 15);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
@@ -368,47 +400,47 @@
         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);
+    function SearchComponent_ng_template_2_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementContainer(0, 16);
     } if (rf & 2) {
         const ctx_r7 = i0__namespace.ɵɵnextContext();
         const match_r7 = ctx_r7.$implicit;
-        const i_r9 = ctx_r7.index;
+        const ɵ$index_20_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));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", itemTemplate_r11)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction4(2, _c5, match_r7.item, ɵ$index_20_r9, match_r7, query_r12));
     } }
-    function SearchComponent_ng_template_2_li_2_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_ng_template_2_For_3_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.ɵɵelementStart(0, "li", 14, 3);
+        i0__namespace.ɵɵlistener("mouseenter", function SearchComponent_ng_template_2_For_3_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_For_3_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_For_3_Conditional_2_Template, 2, 1, "h4", 15)(3, SearchComponent_ng_template_2_For_3_Conditional_3_Template, 1, 7, "ng-container", 16);
         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.ɵɵconditional(match_r7.isHeader() ? 2 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", !match_r7.isHeader());
+        i0__namespace.ɵɵconditional(!match_r7.isHeader() ? 3 : -1);
     } }
     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.ɵɵelementStart(0, "ul", 9, 2);
+        i0__namespace.ɵɵrepeaterCreate(2, SearchComponent_ng_template_2_For_3_Template, 4, 6, "li", 10, i0__namespace.ɵɵrepeaterTrackByIdentity);
+        i0__namespace.ɵɵelementStart(4, "div", 11);
+        i0__namespace.ɵɵelement(5, "span", 12);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(5, "div", 15);
-        i0__namespace.ɵɵelement(6, "i", 17)(7, "span", 16);
+        i0__namespace.ɵɵelementStart(6, "div", 11);
+        i0__namespace.ɵɵelement(7, "i", 13)(8, "span", 12);
         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.ɵɵrepeater(matches_r13);
+        i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("hidden", ctx_r1._loadingItems || !(ctx_r1.datacompletemsg && ctx_r1.dataProvider.isLastPage));
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("textContent", ctx_r1.datacompletemsg);
@@ -417,22 +449,19 @@
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
     } }
-    function SearchComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_Conditional_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.ɵɵelementStart(0, "input", 17);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_Conditional_4_Template_input_ngModelChange_0_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_Conditional_4_Template_input_input_0_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onInputChange($event)); })("keydown", function SearchComponent_Conditional_4_Template_input_keydown_0_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.listenQuery = true); })("keydown.enter", function SearchComponent_Conditional_4_Template_input_keydown_enter_0_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_Conditional_4_Template_input_keydown_arrowdown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.selectNext($event)); })("blur", function SearchComponent_Conditional_4_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); })("click", function SearchComponent_Conditional_4_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.handleFocus($event)); })("focus", function SearchComponent_Conditional_4_Template_input_focus_0_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_Conditional_4_Template_input_focusout_0_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onFocusOut()); })("typeaheadLoading", function SearchComponent_Conditional_4_Template_input_typeaheadLoading_0_listener() { i0__namespace.ɵɵrestoreView(_r14); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1._loadingItems); })("typeaheadOnSelect", function SearchComponent_Conditional_4_Template_input_typeaheadOnSelect_0_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.ɵɵelementStart(1, "i", 18);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_Conditional_4_Template_i_click_1_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);
@@ -440,13 +469,13 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("hidden", !ctx_r1.showClosebtn);
     } }
-    function SearchComponent_ng_template_5_span_6_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "span", 32);
+    function SearchComponent_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "span", 23);
     } }
-    function SearchComponent_ng_template_5_span_11_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_Conditional_5_Conditional_11_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_11_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.ɵɵelementStart(0, "span", 25)(1, "form")(2, "button", 26);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_Conditional_5_Conditional_11_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.ɵɵelement(3, "i");
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
@@ -457,29 +486,29 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.searchiconclass, "");
     } }
-    function SearchComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
         const _r17 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "button", 25);
-        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.closeSearch()); });
+        i0__namespace.ɵɵelementStart(0, "button", 19);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_Conditional_5_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.closeSearch()); });
         i0__namespace.ɵɵelement(1, "i");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(2, "span", 26);
+        i0__namespace.ɵɵelementStart(2, "span", 20);
         i0__namespace.ɵɵtext(3, "Back button");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(4, "input", 27);
-        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_ng_template_5_Template_input_ngModelChange_4_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_4_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_4_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_4_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_4_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_4_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_4_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_4_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_4_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_4_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.typeaheadOnSelect($event)); });
+        i0__namespace.ɵɵelementStart(4, "input", 21);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_Conditional_5_Template_input_ngModelChange_4_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_Conditional_5_Template_input_input_4_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onInputChange($event)); })("keydown", function SearchComponent_Conditional_5_Template_input_keydown_4_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.listenQuery = true); })("keydown.enter", function SearchComponent_Conditional_5_Template_input_keydown_enter_4_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_Conditional_5_Template_input_keydown_arrowdown_4_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.selectNext($event)); })("blur", function SearchComponent_Conditional_5_Template_input_blur_4_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_Conditional_5_Template_input_click_4_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.handleFocus($event)); })("focus", function SearchComponent_Conditional_5_Template_input_focus_4_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_Conditional_5_Template_input_typeaheadLoading_4_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1._loadingItems); })("typeaheadOnSelect", function SearchComponent_Conditional_5_Template_input_typeaheadOnSelect_4_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(5, "input", 28);
-        i0__namespace.ɵɵtemplate(6, SearchComponent_ng_template_5_span_6_Template, 1, 0, "span", 29);
-        i0__namespace.ɵɵelementStart(7, "button", 30);
-        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_button_click_7_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.clearSearch($event, true)); });
+        i0__namespace.ɵɵelement(5, "input", 22);
+        i0__namespace.ɵɵtemplate(6, SearchComponent_Conditional_5_Conditional_6_Template, 1, 0, "span", 23);
+        i0__namespace.ɵɵelementStart(7, "button", 24);
+        i0__namespace.ɵɵlistener("click", function SearchComponent_Conditional_5_Template_button_click_7_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.clearSearch($event, true)); });
         i0__namespace.ɵɵelement(8, "i");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(9, "span", 26);
+        i0__namespace.ɵɵelementStart(9, "span", 20);
         i0__namespace.ɵɵtext(10, "Clear button");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(11, SearchComponent_ng_template_5_span_11_Template, 4, 7, "span", 31);
+        i0__namespace.ɵɵtemplate(11, SearchComponent_Conditional_5_Conditional_11_Template, 4, 7, "span", 25);
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         const customItemTemplate_r15 = i0__namespace.ɵɵreference(1);
@@ -492,13 +521,13 @@
         i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(32, _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.ɵɵconditional(ctx_r1._loadingItems ? 6 : -1);
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(33, _c7, ctx_r1.isQueryEntered()));
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.clearsearchiconclass, "");
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.showsearchicon);
+        i0__namespace.ɵɵconditional(ctx_r1.showsearchicon ? 11 : -1);
     } }
     const WIDGET_CONFIG = { widgetType: 'wm-search', hostClass: 'input-group' };
     class SearchComponent extends input.DatasetAwareFormComponent {
@@ -917,7 +946,7 @@
         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) {
+            if (i1.isDefined(data) && !lodashEs.isObject(data) && this.datasource && !i1.isDefined(this._modelByKey) && this.datafield !== i3.ALLFIELDS) {
                 // Avoid making default query if queryModel already exists.
                 if (i1.isDefined(this.queryModel) && !lodashEs.isEmpty(this.queryModel)) {
                     this.updateDatavalueFromQueryModel();
@@ -950,8 +979,8 @@
             if (selectedItem) {
                 this.queryModel = [selectedItem];
             }
-            else if (this.datafield === i4.ALLFIELDS && lodashEs.isObject(data)) {
-                this.queryModel = this.getTransformedData(i4.extractDataAsArray(data));
+            else if (this.datafield === i3.ALLFIELDS && lodashEs.isObject(data)) {
+                this.queryModel = this.getTransformedData(i3.extractDataAsArray(data));
             }
             else {
                 // resetting the queryModel only when prevDatavalue is equal to data
@@ -981,13 +1010,13 @@
         // 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) {
+            if (searchOnDataField && this.datafield === i3.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,
+                dataset: this.dataset ? i3.convertDataToObject(this.dataset) : undefined,
                 binddataset: this.binddataset,
                 datasource: this.datasource,
                 datafield: this.datafield,
@@ -1072,14 +1101,14 @@
             if (i1.isDefined(itemIndex)) {
                 itemIndex++;
             }
-            const transformedData = i4.transformFormData(this.getContext(this.viewParent), data, this.datafield, {
+            const transformedData = i3.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));
+            return i3.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) {
@@ -1107,8 +1136,8 @@
         }
         ngAfterViewInit() {
             super.ngAfterViewInit();
-            i4.styler(this.nativeElement, this);
-            this.containerTarget = i4.getContainerTargetClass(this.nativeElement);
+            i3.styler(this.nativeElement, this);
+            this.containerTarget = i3.getContainerTargetClass(this.nativeElement);
         }
         ngAfterViewChecked() {
             const searchInputEl = $('.app-search-input');
@@ -1183,7 +1212,7 @@
         }
         static { this.ɵfac = function SearchComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(i5.TypeaheadDirective, 5);
                 i0__namespace.ɵɵviewQuery(_c0, 5);
                 i0__namespace.ɵɵviewQuery(_c1, 5);
             } if (rf & 2) {
@@ -1191,25 +1220,24 @@
                 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, "btn", "btn-icon", "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, "btn", "btn-icon", "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", "btn", "btn-icon", 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, 12, 35, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
+            } }, standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
+                    i3.provideAs(SearchComponent, i4.NG_VALUE_ACCESSOR, true),
+                    i3.provideAs(SearchComponent, i4.NG_VALIDATORS, true),
+                    i3.provideAsWidgetRef(SearchComponent)
+                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c2, decls: 6, vars: 1, consts: [["customItemTemplate", ""], ["customListTemplate", ""], ["ulElement", ""], ["liElements", ""], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams"], ["alt", "Search", 3, "src", "width"], [3, "title", "innerHtml"], ["alt", "Search", 3, "src"], ["partial-container-target", ""], ["scrollable", "", 1, "app-search", "dropdown-menu"], [3, "ngClass"], [1, "status", 3, "hidden"], [3, "textContent"], [1, "fa", "fa-circle-o-notch", "fa-spin"], [3, "mouseenter", "click", "ngClass"], [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, "btn", "btn-icon", "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", 1, "fa", "fa-circle-o-notch", "fa-spin", "form-control-feedback"], [1, "btn", "btn-icon", "form-control-feedback", "clear-btn", 3, "click", "ngClass"], [1, "input-group-addon", 3, "ngClass"], ["title", "Search", "type", "submit", 1, "app-search-button", "btn", "btn-icon", 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, 9, 4, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(4, SearchComponent_Conditional_4_Template, 2, 24)(5, SearchComponent_Conditional_5_Template, 12, 35);
             } 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 }); }
+                i0__namespace.ɵɵconditional(ctx.navsearchbar ? 4 : 5);
+            } }, dependencies: [i2.CommonModule, i2__namespace.NgClass, i2__namespace.NgTemplateOutlet, i3.WmComponentsModule, i3__namespace.ItemTemplateDirective, i3__namespace.PartialParamHandlerDirective, i3__namespace.PartialContainerDirective, i3__namespace.TextContentDirective, i4.FormsModule, i4__namespace.ɵNgNoValidate, i4__namespace.DefaultValueAccessor, i4__namespace.NgControlStatus, i4__namespace.NgControlStatusGroup, i4__namespace.NgModel, i4__namespace.NgForm, ScrollableDirective, i5.TypeaheadModule, i5__namespace.TypeaheadDirective], 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    <button class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n    <span class=\"sr-only\">Back button</span>\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           [container]=\"containerTarget || '.wm-app'\"\n           [disabled]=\"disabled\"\n           [attr.accesskey]=\"shortcutkey\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event); onFocusOut()\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [tabindex]=\"tabindex\"\n           [dropup]=\"dropup\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"arialabel || 'Search field'\">\n    <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n    <span *ngIf=\"_loadingItems\" aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n    <button class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n    <span class=\"sr-only\">Clear button</span>\n    <span *ngIf=\"showsearchicon\" [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n        <form>\n            <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n                    (click)=\"onSearchSelect($event)\">\n                    <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n    </span>\n</ng-template>\n" }]
+            args: [{ standalone: true, imports: [i2.CommonModule, i3.WmComponentsModule, i4.FormsModule, ScrollableDirective, i5.TypeaheadModule], selector: '[wmSearch]', providers: [
+                        i3.provideAs(SearchComponent, i4.NG_VALUE_ACCESSOR, true),
+                        i3.provideAs(SearchComponent, i4.NG_VALIDATORS, true),
+                        i3.provideAsWidgetRef(SearchComponent)
+                    ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollable>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n" }]
         }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['datavalue.bind']
@@ -1223,7 +1251,7 @@
                     type: i0.Optional
                 }] }], { typeahead: [{
                 type: i0.ViewChild,
-                args: [i3.TypeaheadDirective]
+                args: [i5.TypeaheadDirective]
             }], ulElement: [{
                 type: i0.ViewChild,
                 args: ['ulElement']
@@ -1231,74 +1259,9 @@
                 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(__ngFactoryType__) { return new (__ngFactoryType__ || 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(__ngFactoryType__) { return new (__ngFactoryType__ || 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], []);
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SearchComponent, { className: "SearchComponent", filePath: "search.component.ts", lineNumber: 72 }); })();
 
     exports.ScrollableDirective = ScrollableDirective;
     exports.SearchComponent = SearchComponent;
-    exports.SearchModule = SearchModule;
 
 }));