@wavemaker/app-ng-runtime 12.0.0-next.140535 → 12.0.0-next.141131

app-ng-runtime/components/base/public_api.d.ts

@@ -7,6 +7,7 @@ export { BaseComponent } from './widgets/common/base/base.component';
 export * from './widgets/common/base/base-container.component';
 export { DatasetAwareNavComponent, NavNode } from './widgets/common/base/dataset-aware-nav.component';
 export * from './widgets/common/base/partial-container.directive';
+export * from './widgets/common/base/custom-widget-container.directive';
 export * from './widgets/common/base/base-field-validations';
 export * from './widgets/common/item-template/item-template.directive';
 export * from './widgets/common/repeat-template/repeat-template.directive';

app-ng-runtime/components/base/widgets/common/base/base.component.d.ts

@@ -3,6 +3,10 @@ import { EventManager } from '@angular/platform-browser';
 import { App } from '@wm/core';
 import { ChangeListener, IWidgetConfig } from '../../framework/types';
 import * as i0 from "@angular/core";
+interface Child {
+    widget: any;
+    nativeElement: any;
+}
 export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterViewInit, AfterContentInit {
     protected inj: Injector;
     /**
@@ -101,7 +105,7 @@ export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterV
      * (for List, Dynamic Tabs, Accordion, Nav, Carousel)
      */
     trackId: string;
-    protected constructor(inj: Injector, config: IWidgetConfig, explicitContext: any, initPromise?: Promise<any>);
+    protected constructor(inj: Injector, config: IWidgetConfig, explicitContext?: any, initPromise?: Promise<any>);
     getNativeElement(): HTMLElement;
     getWidgetType(): string;
     getWidgetSubType(): string;
@@ -172,12 +176,12 @@ export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterV
      * @param {string} eventName
      * @param {string} expr
      */
-    protected processEventAttr(eventName: string, expr: string, meta?: string): void;
+    protected processEventAttr(eventName: string, expr: string, meta?: string, child?: Child): void;
     /**
      * Process the bound property
      * Register a watch on the bound expression
      */
-    protected processBindAttr(propName: string, expr: string): void;
+    protected processBindAttr(propName: string, expr: string, child?: any): void;
     /**
      * Remove watch on the bound property
      */
@@ -194,7 +198,7 @@ export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterV
      *      and keep in eventHandlers
      * If the attribute is a bound expression, register a watch on the expression
      */
-    protected processAttr(attrName: string, attrValue: string): void;
+    protected processAttr(attrName: string, attrValue: string, child?: Child): void;
     /**
      * This is required as the native element attributes are case insensitive(camelcase) like customExpressions becomes customexpression
      * and our logic to check like these changes will fail. Before IVY changes, angular maintains a separate object with these attributes
@@ -202,7 +206,7 @@ export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterV
      * @private
      * _tNode.attrs attributes are stored in array(even index: key, odd index: value)
      */
-    private getAttributes;
+    protected getAttributes(): string[];
     /**
      * Process the attributes
      */
@@ -268,3 +272,4 @@ export declare abstract class BaseComponent implements OnDestroy, OnInit, AfterV
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, [null, null, { optional: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<BaseComponent>;
 }
+export {};

app-ng-runtime/components/base/widgets/common/base/custom-widget-container.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef, Injector, ViewContainerRef } from '@angular/core';
+import { App, CustomWidgetRefProvider } from '@wm/core';
+import * as i0 from "@angular/core";
+export declare class CustomWidgetContainerDirective {
+    componentInstance: any;
+    vcRef: ViewContainerRef;
+    elRef: ElementRef;
+    inj: Injector;
+    private app;
+    private customWidgetRefProvider;
+    constructor(componentInstance: any, vcRef: ViewContainerRef, elRef: ElementRef, inj: Injector, app: App, widgetname: string, customWidgetRefProvider: CustomWidgetRefProvider);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomWidgetContainerDirective, [{ self: true; }, null, null, null, null, { attribute: "widgetname"; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CustomWidgetContainerDirective, "[customWidgetContainer][widgetname]", never, {}, {}, never, never, false, never>;
+}

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

@@ -69,7 +69,10 @@
         ['tabindex', { value: 0, ...i4.PROP_NUMBER }],
         ['type', { value: 'search', ...i4.PROP_STRING }],
         ['debouncetime', { value: 250, ...i4.PROP_NUMBER }],
-        ['width', i4.PROP_STRING]
+        ['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 }],
     ]);
     const registerProps = () => {
         i4.register('wm-search', searchProps);
@@ -436,54 +439,63 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("hidden", !ctx_r1.showClosebtn);
     } }
-    function SearchComponent_ng_template_5_span_5_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_ng_template_5_span_6_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 32);
     } }
-    function SearchComponent_ng_template_5_span_9_Template(rf, ctx) { if (rf & 1) {
+    function SearchComponent_ng_template_5_span_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_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.ɵɵ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.ɵɵelement(3, "i");
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c8, ctx_r1.disabled));
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(5, _c8, ctx_r1.disabled));
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("disabled", ctx_r1.disabled);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.searchiconclass, "");
     } }
     function SearchComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
         const _r17 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "span", 25);
-        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_span_click_0_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.closeSearch()); });
+        i0__namespace.ɵɵ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.ɵɵelement(1, "i");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(1, "span", 26);
-        i0__namespace.ɵɵtext(2, "Back button");
+        i0__namespace.ɵɵelementStart(2, "span", 26);
+        i0__namespace.ɵɵtext(3, "Back button");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(3, "input", 27);
-        i0__namespace.ɵɵtwoWayListener("ngModelChange", function SearchComponent_ng_template_5_Template_input_ngModelChange_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.query, $event) || (ctx_r1.query = $event); return i0__namespace.ɵɵresetView($event); });
-        i0__namespace.ɵɵlistener("input", function SearchComponent_ng_template_5_Template_input_input_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onInputChange($event)); })("keydown", function SearchComponent_ng_template_5_Template_input_keydown_3_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.listenQuery = true); })("keydown.enter", function SearchComponent_ng_template_5_Template_input_keydown_enter_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.$typeaheadEvent = $event; return i0__namespace.ɵɵresetView(ctx_r1.handleEnterEvent($event)); })("keydown.arrowdown", function SearchComponent_ng_template_5_Template_input_keydown_arrowdown_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.selectNext($event)); })("blur", function SearchComponent_ng_template_5_Template_input_blur_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx_r1.onFocusOut()); })("click", function SearchComponent_ng_template_5_Template_input_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.handleFocus($event)); })("focus", function SearchComponent_ng_template_5_Template_input_focus_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1._unsubscribeDv = false; ctx_r1.listenQuery = true; ctx_r1.handleFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnFocus($event)); })("typeaheadLoading", function SearchComponent_ng_template_5_Template_input_typeaheadLoading_3_listener() { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1._loadingItems); })("typeaheadOnSelect", function SearchComponent_ng_template_5_Template_input_typeaheadOnSelect_3_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.typeaheadOnSelect($event)); });
+        i0__namespace.ɵɵ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.ɵɵelementEnd();
-        i0__namespace.ɵɵelement(4, "input", 28);
-        i0__namespace.ɵɵtemplate(5, SearchComponent_ng_template_5_span_5_Template, 1, 0, "span", 29);
-        i0__namespace.ɵɵelementStart(6, "span", 30);
-        i0__namespace.ɵɵlistener("click", function SearchComponent_ng_template_5_Template_span_click_6_listener($event) { i0__namespace.ɵɵrestoreView(_r17); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.clearSearch($event, true)); });
+        i0__namespace.ɵɵ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(8, "i");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(7, "span", 26);
-        i0__namespace.ɵɵtext(8, "Clear button");
+        i0__namespace.ɵɵelementStart(9, "span", 26);
+        i0__namespace.ɵɵtext(10, "Clear button");
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(9, SearchComponent_ng_template_5_span_9_Template, 3, 4, "span", 31);
+        i0__namespace.ɵɵtemplate(11, SearchComponent_ng_template_5_span_11_Template, 4, 7, "span", 31);
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         const customItemTemplate_r15 = i0__namespace.ɵɵreference(1);
         const customListTemplate_r16 = i0__namespace.ɵɵreference(3);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.backsearchiconclass, "");
         i0__namespace.ɵɵadvance(3);
         i0__namespace.ɵɵproperty("title", ctx_r1.query || "")("placeholder", ctx_r1.placeholder || "")("container", ctx_r1.containerTarget || ".wm-app")("disabled", ctx_r1.disabled);
         i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.query);
-        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(25, _c6))("readonly", ctx_r1.readonly)("typeahead", ctx_r1.typeaheadDataSource)("typeaheadWaitMs", ctx_r1.debouncetime)("typeaheadItemTemplate", customItemTemplate_r15)("optionsListTemplate", customListTemplate_r16)("typeaheadMinLength", ctx_r1.minchars)("typeaheadOptionsLimit", ctx_r1.limit)("typeaheadGroupField", ctx_r1.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r1.optionslimitinscrollableview)("tabindex", ctx_r1.tabindex)("dropup", ctx_r1.dropup);
+        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(31, _c6))("readonly", ctx_r1.readonly)("typeahead", ctx_r1.typeaheadDataSource)("typeaheadWaitMs", ctx_r1.debouncetime)("typeaheadItemTemplate", customItemTemplate_r15)("optionsListTemplate", customListTemplate_r16)("typeaheadMinLength", ctx_r1.minchars)("typeaheadOptionsLimit", ctx_r1.limit)("typeaheadGroupField", ctx_r1.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r1.optionslimitinscrollableview)("tabindex", ctx_r1.tabindex)("dropup", ctx_r1.dropup);
         i0__namespace.ɵɵattribute("name", ctx_r1.name)("aria-label", ctx_r1.hint || "Search field");
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("ngIf", ctx_r1._loadingItems);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(26, _c7, ctx_r1.isQueryEntered()));
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(32, _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);
     } }
@@ -1176,8 +1188,8 @@
                     i4.provideAs(SearchComponent, i2.NG_VALUE_ACCESSOR, true),
                     i4.provideAs(SearchComponent, i2.NG_VALIDATORS, true),
                     i4.provideAsWidgetRef(SearchComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c2, decls: 7, vars: 2, consts: [["customItemTemplate", ""], ["customListTemplate", ""], ["searchTemplate", ""], ["ulElement", ""], ["liElements", ""], [4, "ngIf", "ngIfElse"], [4, "ngIf"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", 4, "ngIf"], ["alt", "Search", 3, "src", "width", 4, "ngIf"], [3, "title", "innerHtml"], ["alt", "Search", 3, "src"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", ""], ["scrollable", "", 1, "app-search", "dropdown-menu"], [3, "ngClass", "mouseenter", "click", 4, "ngFor", "ngForOf"], [1, "status", 3, "hidden"], [3, "textContent"], [1, "fa", "fa-circle-o-notch", "fa-spin"], [3, "mouseenter", "click", "ngClass"], ["class", "group-title", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [1, "group-title"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "text", "focus-target", "", "container", "body", "autocomplete", "off", "typeaheadOptionField", "label", 1, "app-textbox", "form-control", "list-of-objs", "app-search-input", 3, "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "focusout", "typeaheadLoading", "typeaheadOnSelect", "title", "placeholder", "disabled", "ngModel", "ngModelOptions", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "dropup", "tabindex"], [1, "btn-close", "wi", "wi-cancel", 3, "click", "hidden"], ["aria-hidden", "true", 1, "wi", "wi-arrow-left", "form-control-feedback", "back-btn", 3, "click"], [1, "sr-only"], ["type", "text", "focus-target", "", "autocomplete", "off", "typeaheadOptionField", "label", 1, "app-textbox", "form-control", "list-of-objs", "app-search-input", 3, "ngModelChange", "input", "keydown", "keydown.enter", "keydown.arrowdown", "blur", "click", "focus", "typeaheadLoading", "typeaheadOnSelect", "title", "placeholder", "container", "disabled", "ngModel", "ngModelOptions", "readonly", "typeahead", "typeaheadWaitMs", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadMinLength", "typeaheadOptionsLimit", "typeaheadGroupField", "typeaheadAsync", "typeaheadScrollable", "adaptivePosition", "typeaheadOptionsInScrollableView", "tabindex", "dropup"], ["ng-model", "proxyModel", "ng-required", "required", "tabindex", "-1", "aria-hidden", "true", 1, "model-holder"], ["aria-hidden", "true", "class", "fa fa-circle-o-notch fa-spin form-control-feedback", 4, "ngIf"], [1, "wi", "wi-close", "form-control-feedback", "clear-btn", 3, "click", "ngClass"], ["class", "input-group-addon", "aria-label", "search icon", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 1, "fa", "fa-circle-o-notch", "fa-spin", "form-control-feedback"], ["aria-label", "search icon", 1, "input-group-addon", 3, "ngClass"], ["title", "Search", "type", "submit", 1, "app-search-button", "wm-sl-l", "sl-search", 3, "click", "disabled"]], template: function SearchComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, SearchComponent_ng_template_0_Template, 2, 2, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor)(2, SearchComponent_ng_template_2_Template, 8, 5, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(4, SearchComponent_ng_container_4_Template, 3, 24, "ng-container", 5)(5, SearchComponent_ng_template_5_Template, 10, 28, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
+                ]), 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", "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", "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, 34, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
             } if (rf & 2) {
                 const searchTemplate_r19 = i0__namespace.ɵɵreference(6);
                 i0__namespace.ɵɵadvance(4);
@@ -1190,7 +1202,7 @@
                         i4.provideAs(SearchComponent, i2.NG_VALUE_ACCESSOR, true),
                         i4.provideAs(SearchComponent, i2.NG_VALIDATORS, true),
                         i4.provideAsWidgetRef(SearchComponent)
-                    ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n    <!-- Default item template -->\n    <a *ngIf=\"!content\">\n        <img *ngIf=\"model.imgSrc\" [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n        <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n    <!-- Custom partial template -->\n    <a *ngIf=\"content\" [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n        <div partial-container-target></div>\n    </a>\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n    <ul #ulElement class=\"app-search dropdown-menu\" scrollable>\n        <li #liElements *ngFor=\"let match of matches; let i = index;\" [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n            (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n            (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n            <!-- itemTemplate comes from the <input> -->\n            <h4 *ngIf=\"match.isHeader()\" class=\"group-title\">{{match.value}}</h4>\n            <ng-container *ngIf=\"!match.isHeader()\" [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n            </ng-container>\n        </li>\n        <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider.isLastPage)\">\n            <span [textContent]=\"datacompletemsg\"></span>\n        </div>\n        <div class=\"status\" [hidden]=\"!_loadingItems\">\n            <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n            <span [textContent]=\"loadingdatamsg\"></span>\n        </div>\n    </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n<ng-container *ngIf=\"navsearchbar; else searchTemplate\">\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           container=\"body\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event)\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n           (focusout)=\"onFocusOut()\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [dropup]=\"dropup\"\n           [tabindex]=\"tabindex\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\"/>\n    <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n</ng-container>\n<!--This template is for both web and fullscreen mode in mobile.-->\n<ng-template #searchTemplate>\n    <span class=\"wi wi-arrow-left form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"></span>\n    <span class=\"sr-only\">Back button</span>\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           [container]=\"containerTarget || '.wm-app'\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event); onFocusOut()\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [tabindex]=\"tabindex\"\n           [dropup]=\"dropup\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\">\n    <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n    <span *ngIf=\"_loadingItems\" aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n    <span class=\"wi wi-close form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"></span>\n    <span class=\"sr-only\">Clear button</span>\n    <span *ngIf=\"showsearchicon\" class=\"input-group-addon\" aria-label=\"search icon\" [ngClass]=\"{'disabled': disabled}\">\n        <form>\n            <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button wm-sl-l sl-search\" type=\"submit\"\n                    (click)=\"onSearchSelect($event)\"></button>\n        </form>\n    </span>\n</ng-template>\n" }]
+                    ], 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    <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           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    <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\" class=\"input-group-addon\" aria-label=\"search icon\" [ngClass]=\"{'disabled': disabled}\">\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" }]
         }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['datavalue.bind']