@wavemaker-ai/app-ng-runtime 12.0.0-rc.335 → 12.0.1-rc.338

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

@@ -39,15 +39,15 @@ class ScrollableDirective {
     }
     ngOnDestroy() {
         // MEMORY LEAK FIX: Remove scroll event listener using stored bound function reference
-        if (this.elementRef && this.elementRef.nativeElement && this.boundNotifyParent) {
+        if (this.elementRef?.nativeElement && this.boundNotifyParent) {
             this.elementRef.nativeElement.removeEventListener('scroll', this.boundNotifyParent);
             this.boundNotifyParent = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScrollableDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: ScrollableDirective, isStandalone: true, selector: "[scrollableHandler]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ScrollableDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: ScrollableDirective, isStandalone: true, selector: "[scrollableHandler]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -153,30 +153,29 @@ class LocalDataProvider {
                     });
                 });
             }
+            else 
+            // local search on data with array of objects.
+            // Iterate over each item and return the filtered data containing the matching string.
+            if (isArray(entries) && isObject(entries[0])) {
+                filteredData = filter(entries, entry => {
+                    let a = values(entry).join(' ');
+                    if (!casesensitive) {
+                        a = toLower(a);
+                        // @ts-ignore
+                        queryText = toLower(queryText);
+                    }
+                    return this.applyFilter(a, queryText);
+                });
+            }
             else {
-                // local search on data with array of objects.
-                // Iterate over each item and return the filtered data containing the matching string.
-                if (isArray(entries) && isObject(entries[0])) {
-                    filteredData = filter(entries, entry => {
-                        let a = values(entry).join(' ');
-                        if (!casesensitive) {
-                            a = toLower(a);
-                            // @ts-ignore
-                            queryText = toLower(queryText);
-                        }
-                        return this.applyFilter(a, queryText);
-                    });
-                }
-                else {
-                    filteredData = filter(entries, entry => {
-                        if (!casesensitive) {
-                            entry = toLower(entry);
-                            // @ts-ignore
-                            queryText = toLower(queryText);
-                        }
-                        return this.applyFilter(entry, queryText, matchMode);
-                    });
-                }
+                filteredData = filter(entries, entry => {
+                    if (!casesensitive) {
+                        entry = toLower(entry);
+                        // @ts-ignore
+                        queryText = toLower(queryText);
+                    }
+                    return this.applyFilter(entry, queryText, matchMode);
+                });
             }
             resolve({
                 data: filteredData,
@@ -319,8 +318,8 @@ class DataProvider {
          * If datasource is a serviceVariable with no input params, then perform local search.
          * when there is no dataset on the datasource when first time make a remote call to set the dataset for service variable.
          */
-        const hasNoVariableDataset = config.datasource && config.datasource.execute(DataSource.Operation.IS_UPDATE_REQUIRED, config.hasData);
-        if (!config.isLocalFilter && (config.dataoptions || ((config.datasource && config.datasource.execute(DataSource.Operation.IS_API_AWARE))
+        const hasNoVariableDataset = config.datasource?.execute(DataSource.Operation.IS_UPDATE_REQUIRED, config.hasData);
+        if (!config.isLocalFilter && (config.dataoptions || ((config.datasource?.execute(DataSource.Operation.IS_API_AWARE))
             && config.searchKey
             && hasNoVariableDataset))) {
             promise = DataProvider.remoteDataProvider.filter(config);
@@ -642,7 +641,7 @@ class SearchComponent extends DatasetAwareFormComponent {
         let item;
         // WMS-22533: Before adding active typeahead el, check if the entered query matches with the active el or not
         const isQueryMatch = this.typeaheadContainer?.active?.value === this.query;
-        if (this.typeaheadContainer && this.typeaheadContainer.active && isQueryMatch) {
+        if (this.typeaheadContainer?.active && isQueryMatch) {
             item = this.typeaheadContainer.active.item;
         }
         $event = this.eventData($event, item || {});
@@ -797,13 +796,12 @@ class SearchComponent extends DatasetAwareFormComponent {
         else if (this.datafield === ALLFIELDS && isObject(data)) {
             this.queryModel = this.getTransformedData(extractDataAsArray(data));
         }
-        else {
-            // resetting the queryModel only when prevDatavalue is equal to data
-            if (this.prevDatavalue !== data) {
-                this.queryModel = undefined;
-                this.query = '';
-                return;
-            }
+        else 
+        // resetting the queryModel only when prevDatavalue is equal to data
+        if (this.prevDatavalue !== data) {
+            this.queryModel = undefined;
+            this.query = '';
+            return;
         }
         this.updateDatavalueFromQueryModel();
         // Show the label value on input.
@@ -835,7 +833,7 @@ class SearchComponent extends DatasetAwareFormComponent {
             binddataset: this.binddataset,
             datasource: this.datasource,
             datafield: this.datafield,
-            hasData: this.dataset && this.dataset.length,
+            hasData: this.dataset?.length,
             query: query,
             isLocalFilter: !this.searchkey,
             searchKey: searchOnDataField ? this.datafield : this.searchkey,
@@ -862,7 +860,7 @@ class SearchComponent extends DatasetAwareFormComponent {
             if (this.dataProvider && (!isDefined(this.dataset) || !this.dataset.length) && this.dataProvider.updateDataset) {
                 this.dataset = response;
             }
-            if (this.dataProvider && this.dataProvider.hasMoreData) {
+            if (this.dataProvider?.hasMoreData) {
                 this.formattedDataset = this.formattedDataset.concat(response);
             }
             else {
@@ -1045,14 +1043,14 @@ class SearchComponent extends DatasetAwareFormComponent {
         // Call parent ngOnDestroy (DatasetAwareFormComponent has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SearchComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'datavalue.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SearchComponent, isStandalone: true, selector: "[wmSearch]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: SearchComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'datavalue.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: SearchComponent, isStandalone: true, selector: "[wmSearch]", providers: [
             provideAs(SearchComponent, NG_VALUE_ACCESSOR, true),
             provideAs(SearchComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(SearchComponent)
         ], viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadDirective, descendants: true }, { propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], usesInheritance: true, ngImport: i0, 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\" scrollableHandler>\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]=\"typeaheadOptionsLimit\"\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()\">\n    <wm-app-icon [iconclass]=\"backsearchiconclass\" [iconurl]=\"backsearchiconurl\" alt=\"Back\"></wm-app-icon>\n  </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]=\"typeaheadOptionsLimit\"\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)\">\n    <wm-app-icon [iconclass]=\"clearsearchiconclass\" [iconurl]=\"clearsearchiconurl\" alt=\"Clear\"></wm-app-icon>\n  </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          <wm-app-icon [iconclass]=\"searchiconclass\" [iconurl]=\"searchiconurl\" alt=\"Search\"></wm-app-icon>\n        </button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ScrollableDirective, selector: "[scrollableHandler]" }, { kind: "ngmodule", type: TypeaheadModule }, { kind: "directive", type: i4.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: PartialContainerDirective, selector: "[partialContainer]" }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FormsModule, ScrollableDirective, TypeaheadModule, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective, WmAppIconComponent], selector: '[wmSearch]', providers: [
                         provideAs(SearchComponent, NG_VALUE_ACCESSOR, true),