@wavemaker/app-ng-runtime 11.11.6-rc.6189 → 11.11.7-rc.217

package/components/basic/search/fesm2022/index.mjs

@@ -582,7 +582,10 @@ class SearchComponent extends DatasetAwareFormComponent {
                 // if prev datavalue is not equal to current datavalue then clear the modelByKey and queryModel
                 if (!isObject(val) && this.prevDatavalue !== val) {
                     this._modelByKey = undefined;
-                    this.query = this.queryModel = '';
+                    if (this.queryModel === '' || this.queryModel === undefined) {
+                        this.query = '';
+                    }
+                    this.queryModel = '';
                 }
                 // if the datafield is ALLFILEDS do not fetch the records
                 // update the query model with the values we have
@@ -973,7 +976,9 @@ class SearchComponent extends DatasetAwareFormComponent {
             // resetting the queryModel only when prevDatavalue is equal to data
             if (this.prevDatavalue !== data) {
                 this.queryModel = undefined;
-                this.query = '';
+                if (!data || data === '') {
+                    this.query = '';
+                }
                 return;
             }
         }
@@ -988,6 +993,15 @@ class SearchComponent extends DatasetAwareFormComponent {
             this.typeahead.keyUpEventEmitter.emit(this.query);
         }
     }
+    handleInputBlur($event) {
+        this.queryModel = [{
+                key: this.query,
+                value: this.query,
+                label: this.query
+            }];
+        this._modelByValue = this.query;
+        this.datavalue = this.query;
+    }
     notifySubscriber() {
         const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
         if (parentEl.length > 0) {
@@ -1125,6 +1139,7 @@ class SearchComponent extends DatasetAwareFormComponent {
         super.ngAfterViewInit();
         styler(this.nativeElement, this);
         this.containerTarget = getContainerTargetClass(this.nativeElement);
+        this.nativeElement.querySelector('input')?.addEventListener('blur', this.handleInputBlur.bind(this));
     }
     ngAfterViewChecked() {
         const searchInputEl = $('.app-search-input');
@@ -1211,7 +1226,7 @@ class SearchComponent extends DatasetAwareFormComponent {
                 provideAs(SearchComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(SearchComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(SearchComponent)
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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"], ["type", "button", "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.ɵɵInheritDefinitionFeature, i0.ɵɵ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"], ["type", "button", "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"], ["type", "button", 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.ɵɵtemplate(0, SearchComponent_ng_template_0_Template, 2, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, SearchComponent_ng_template_2_Template, 9, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(4, SearchComponent_Conditional_4_Template, 2, 24)(5, SearchComponent_Conditional_5_Template, 12, 35);
         } if (rf & 2) {
             i0.ɵɵadvance(4);
@@ -1224,7 +1239,7 @@ class SearchComponent extends DatasetAwareFormComponent {
                     provideAs(SearchComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SearchComponent, NG_VALIDATORS, true),
                     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 type=\"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" }]
+                ], 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 type=\"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 type=\"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.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['datavalue.bind']