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

package/components/data/form/types/index.d.ts

@@ -10,12 +10,12 @@ import * as lodash from 'lodash';
 import { LiveTableComponent } from '@wm/components/data/live-table';
 
 declare class FormComponent extends StylableComponent implements OnDestroy, AfterContentInit, AfterViewInit {
-    private envInjector;
-    private fb;
-    private app;
-    private dialogService;
-    private dynamicComponentProvider;
-    private ngZone;
+    private readonly envInjector;
+    private readonly fb;
+    private readonly app;
+    private readonly dialogService;
+    private readonly dynamicComponentProvider;
+    private readonly ngZone;
     parentList: ListComponent;
     parentForm: FormComponent;
     parentPrefab: PrefabDirective;
@@ -24,8 +24,8 @@ declare class FormComponent extends StylableComponent implements OnDestroy, Afte
     onSubmitEvt: any;
     onBeforeRenderEvt: any;
     binddataset: any;
-    private bindformdata;
-    static initializeProps: void;
+    private readonly bindformdata;
+    static readonly initializeProps: void;
     dynamicFormRef: ViewContainerRef;
     messageRef: any;
     componentRefs: any;
@@ -101,7 +101,7 @@ declare class FormComponent extends StylableComponent implements OnDestroy, Afte
     private validationMessages;
     private formGroupName;
     private formArrayIndex;
-    private bindingValue;
+    private readonly bindingValue;
     private _formIsInList;
     private _triggeredByUser;
     private _debouncedSubmitForm;
@@ -236,7 +236,7 @@ declare class FormWidgetDirective implements OnInit, OnDestroy {
 
 declare class FormActionDirective extends BaseComponent implements OnInit, OnDestroy {
     form: FormComponent;
-    static initializeProps: void;
+    static readonly initializeProps: void;
     accessroles: any;
     action: any;
     binding: any;
@@ -267,13 +267,13 @@ declare class FormActionDirective extends BaseComponent implements OnInit, OnDes
 }
 
 declare class FormFieldDirective extends StylableComponent implements OnInit, AfterContentInit, OnDestroy {
-    static initializeProps: void;
+    static readonly initializeProps: void;
     formWidget: any;
     formWidgetMax: any;
-    private fb;
-    private viewport;
-    private excludeProps;
-    private _validators;
+    private readonly fb;
+    private readonly viewport;
+    private readonly excludeProps;
+    private readonly _validators;
     private _oldUploadVal;
     ngform: FormGroup;
     defaultvalue: any;
@@ -316,24 +316,24 @@ declare class FormFieldDirective extends StylableComponent implements OnInit, Af
     validationmessage: any;
     _fieldName: any;
     private _debounceSetUpValidators;
-    private _initPropsRes;
-    private parentList;
+    private readonly _initPropsRes;
+    private readonly parentList;
     private showPendingSpinner;
     private _activeField;
     private notifyForFields;
     private fieldValidations;
     private _triggeredByUser;
     private _clicktriggeredByUser;
-    private app;
+    private readonly app;
     onKeydownHandler(event: KeyboardEvent): void;
     handleClick(event: any): void;
-    private isFocused;
+    private readonly isFocused;
     constructor(inj: Injector, form: FormComponent, fb: FormBuilder, viewport: Viewport, app: App, parentList: ListComponent, bindChipclass: string, binddataset: any, binddisplayexpression: string, binddisplaylabel: string, _widgetType: any, name: any, binddisplayimagesrc: String, key: any, isRange: any, pcDisplay: any, mobileDisplay: any, tabletDisplay: any, contexts: Array<any>, explicitContext: any);
     _onFocusField($evt: any): void;
     getActiveElement(): HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
     setAriaAttributes(): void;
     _onBlurField($evt: any): void;
-    evaluateExpr(object: any, displayField: any, displayExpr: any): any;
+    evaluateExpr(object: any, displayField: any, displayExpr: any, bindExpr?: any): any;
     getDisplayExpr(): any;
     getCaption(): any;
     notifyChanges(): void;
@@ -399,18 +399,18 @@ declare class LiveActionsDirective implements OnDestroy {
 }
 
 declare class DependsonDirective implements AfterContentInit, OnDestroy {
-    private dialogService;
-    private app;
+    private readonly dialogService;
+    private readonly app;
     formChildren: any;
-    private dialogId;
-    private dependson;
-    private isLayoutDialog;
+    private readonly dialogId;
+    private readonly dependson;
+    private readonly isLayoutDialog;
     private form;
     private editMode;
     private currentOp;
     private currentFormData;
     private formSubscription;
-    private eventSubscription;
+    private readonly eventSubscription;
     constructor(dialogId: string, dependson: string, dialogService: AbstractDialogService, app: App);
     private openFormDialog;
     private onUpdate;
@@ -425,7 +425,7 @@ declare class DependsonDirective implements AfterContentInit, OnDestroy {
 
 declare class LiveFilterDirective implements OnDestroy {
     private form;
-    static initializeProps: void;
+    static readonly initializeProps: void;
     private _options;
     orderBy: any;
     _filter: (...args: any[]) => void;
@@ -449,8 +449,8 @@ declare class LiveFilterDirective implements OnDestroy {
 declare class LiveFormDirective implements OnDestroy {
     private form;
     datePipe: ToDatePipe;
-    private dialogService;
-    static initializeProps: void;
+    private readonly dialogService;
+    static readonly initializeProps: void;
     private _triggeredByUser;
     private _debouncedSavePrevDataValues;
     onKeydownHandler(event: KeyboardEvent): void;

package/components/data/list/bundles/index.umd.js

@@ -298,14 +298,14 @@
             }
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: ListItemDirective, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i2__namespace.App }, { token: i0__namespace.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: ListItemDirective, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i2__namespace.App }, { token: i0__namespace.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0__namespace }); }
     };
     exports.ListItemDirective = tslib.__decorate([
         i1.AutoLayout({ bindParent: 'listComponent.viewParent' }),
         tslib.__metadata("design:paramtypes", [i0.Injector, i0.ElementRef, i2.App, i0.Renderer2, Object])
     ], exports.ListItemDirective);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: exports.ListItemDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: exports.ListItemDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -482,7 +482,7 @@
         }
         handleLoading(data) {
             const dataSource = this.datasource;
-            if (dataSource && dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) && i2.isDataSourceEqual(data.variable, dataSource)) {
+            if (dataSource?.execute(i2.DataSource.Operation.IS_API_AWARE) && i2.isDataSourceEqual(data.variable, dataSource)) {
                 this.ngZone.run(() => {
                     this.handleStateParams(data);
                     this.variableInflight = data.active;
@@ -498,7 +498,7 @@
             }
         }
         triggerListItemSelection($el, $event) {
-            if ($el && $el[0]) {
+            if ($el?.[0]) {
                 const listItemContext = $el.data('listItemContext');
                 // Trigger click event only if the list item is from the corresponding list.
                 if (listItemContext.listComponent === this) {
@@ -804,12 +804,10 @@
                         this.invokeEventCallback('selectionlimitexceed', { $event: evt });
                     }
                 }
-                else {
-                    if (!$listItem.isActive || selectCount > 1) {
-                        this.clearSelectedItems();
-                        this.toggleListItemSelection($listItem);
-                        this.firstSelectedItem = this.lastSelectedItem = $listItem;
-                    }
+                else if (!$listItem.isActive || selectCount > 1) {
+                    this.clearSelectedItems();
+                    this.toggleListItemSelection($listItem);
+                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
                 }
                 i2.$appDigest();
             }
@@ -824,7 +822,7 @@
          */
         deselectItem(val) {
             const listItem = this.getItemRefByIndexOrModel(val);
-            if (listItem && listItem.isActive) {
+            if (listItem?.isActive) {
                 this.toggleListItemSelection(listItem);
             }
         }
@@ -867,7 +865,7 @@
                 super.ngAfterViewInit();
                 this.setUpCUDHandlers();
                 this.selectedItemWidgets = this.multiselect ? [] : {};
-                var ele = $(this.nativeElement).find('.app-livelist-container');
+                const ele = $(this.nativeElement).find('.app-livelist-container');
                 if (this.enablereorder && !this.groupby) {
                     if (ele) {
                         ele.attr('aria-describedby', this.titleId);
@@ -901,13 +899,13 @@
             this._readItemAttrsFromHost();
         }
         ngOnDestroy() {
-            if (this._listAnimator && this._listAnimator.$btnSubscription) {
+            if (this._listAnimator?.$btnSubscription) {
                 this._listAnimator.$btnSubscription.unsubscribe();
                 this._listAnimator = null;
             }
             // MEMORY LEAK FIX: Unsubscribe from all app subscriptions
             if (this._listenerDestroyers) {
-                this._listenerDestroyers.forEach(d => d && d());
+                this._listenerDestroyers.forEach(d => d?.());
                 this._listenerDestroyers = [];
             }
             // MEMORY LEAK FIX: Unsubscribe from navigator watches
@@ -936,7 +934,7 @@
                 this.boundClickHandler = null;
             }
             // MEMORY LEAK FIX: Destroy jQuery sortable widget
-            if (this.$ulEle && this.$ulEle.sortable) {
+            if (this.$ulEle?.sortable) {
                 try {
                     this.$ulEle.sortable('destroy');
                 }
@@ -1008,7 +1006,7 @@
         }
         getConfiguredState() {
             const mode = this.statePersistence.computeMode(this.statehandler);
-            return mode && mode.toLowerCase();
+            return mode?.toLowerCase();
         }
         handleStateParams(options) {
             if (this._pageLoad && this.getConfiguredState() !== 'none') {
@@ -1125,7 +1123,7 @@
             if (!lodashEs.isEmpty(newVal)) {
                 this.noDataFound = false;
                 this.isDataChanged = true;
-                if (this.datasource && this.datasource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                if (this.datasource?.execute(i2.DataSource.Operation.IS_API_AWARE)) {
                     // clone the the data in case of live and service variables to prevent the two-way binding for these variables.
                     newVal = lodashEs.cloneDeep(newVal);
                 }
@@ -1190,10 +1188,8 @@
                         this.dataNavigator.pageChanged({ page: widgetState.pagination || 1, pagesize: widgetState.pagesize }, true);
                     }
                 }
-                else {
-                    if (lodashEs.get(widgetState, 'pagination')) {
-                        this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
-                    }
+                else if (lodashEs.get(widgetState, 'pagination')) {
+                    this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
                 }
                 if (lodashEs.get(widgetState, 'selectedItem')) {
                     this._selectedItemsExist = true;
@@ -1378,7 +1374,6 @@
                 });
             }
             if (this.fieldDefs.length && this.infScroll) {
-                this.$element.closest('[wmsmoothscroll]');
                 // In case of mobile app when modal exists, and list items height is greater than the modal content provide ccontainer a scrollable height
                 const modalBody = this.$element.closest('.modal-body');
                 const listHt = this.$element.find('ul').height();
@@ -1516,7 +1511,7 @@
         // Invoke the datasource variable by default when pulltorefresh event is not specified.
         subscribeToPullToRefresh() {
             this._listenerDestroyers.push(this.app.subscribe('pulltorefresh', () => {
-                if (this.datasource && this.datasource.listRecords) {
+                if (this.datasource?.listRecords) {
                     this.datasource.listRecords();
                 }
             }));
@@ -1546,8 +1541,8 @@
                 this.itemAttrsMap = {};
             }
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: ListComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.ToDatePipe }, { token: i2__namespace.App }, { token: i2__namespace.AppDefaults }, { token: i0__namespace.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2__namespace.StatePersistence }, { token: i2__namespace.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: ListComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.ToDatePipe }, { token: i2__namespace.App }, { token: i2__namespace.AppDefaults }, { token: i0__namespace.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2__namespace.StatePersistence }, { token: i2__namespace.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
                 i1.provideAsWidgetRef(ListComponent)
             ], queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "listLeftActionTemplate", first: true, predicate: ["listLeftActionTemplate"], descendants: true }, { propertyName: "listRightActionTemplate", first: true, predicate: ["listRightActionTemplate"], descendants: true }, { propertyName: "btnComponents", predicate: button.ButtonComponent }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: pagination.PaginationComponent, descendants: true }, { propertyName: "listItems", predicate: exports.ListItemDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "@if (title || subheading || iconclass || iconurl) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"List icon\"></wm-app-icon>\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n    </h3>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\">\n    <ul class=\"pager\">\n      <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n          <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n@if (navigation === 'Inline' && !noDataFound) {\n  <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n}\n\n<div>\n  @if (enablereorder) {\n    <div id={{titleId}} class=\"sr-only\">\n      Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n  }\n\n  @if (listItems && enablereorder && currentIndex) {\n    <div aria-live=\"assertive\" class=\"sr-only\" >\n      {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n  }\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"list-group app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n  [class.list-group-autolayout]=\"hasAutolayout\"\n  (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n  (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n  (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n  (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n  (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n  (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n  [hidden]=\"noDataFound && !variableInflight\"\n  >\n  @if (!groupby) {\n    @for (item of fieldDefs; track item) {\n      <li class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n        [wmListItem]=\"item\"\n        #listItemRef=\"listItemRef\"\n        [attr.tabindex]=\"tabindex\"\n        role=\"listitem\">\n        <ng-container [ngTemplateOutlet]=\"listTemplate\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('falt_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n        [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n      </li>\n    }\n  } @else {\n    @for (groupObj of groupedData; track groupObj; let groupIndex = $index) {\n      <li class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\" [class.list-group-autolayout]=\"hasAutolayout\">\n          <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n              <div class=\"header-action\">\n                @if (collapsible) {\n                  <i class=\"app-icon wi action wi-chevron-up\"></i>\n                }\n                @if (showcount) {\n                  <span class=\"label label-default\">{{groupObj.data.length}}</span>\n                }\n              </div>\n            </h4>\n          </li>\n          <li class=\"list-group-container\">\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\" [class.list-group-autolayout]=\"hasAutolayout\">\n              @for (item of groupObj.data; track trackByFn($index, item)) {\n                <li [attr.tabindex]=\"tabindex\"\n                  class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                  [ngClass]=\"listItemRef.itemClass\"\n                  [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                  <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                    [ngTemplateOutletInjector]=\"createCustomInjector('group_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                  [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n              }\n            </ul>\n          </li>\n        </ul>\n      </li>\n    }\n  }\n  <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n  <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n@if (noDataFound && !variableInflight) {\n  <div class=\"no-data-msg\" [textContent]=\"nodatamessage\"></div>\n}\n\n@if (variableInflight && !pulltorefresh) {\n  <div class=\"loading-data-msg\">\n    <span>\n      <wm-app-icon [iconclass]=\"loadingicon\" [iconurl]=\"loadingiconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"loading icon\"></wm-app-icon>\n      <span class=\"sr-only\">Loading</span>\n      <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n    <ul class=\"pager\">\n      <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n          <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n\n@if (navigation !== 'None') {\n  <div class=\"panel-footer\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator?.dataSize <= pagesize && !allowpagesizechange) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n      navigationalign.bind=\"navigationalign\"\n      navigation.bind=\"navControls\"\n      showrecordcount.bind=\"showrecordcount\"\n      maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n      forceellipses.bind=\"forceellipses\"\n      directionlinks.bind=\"directionlinks\"\n      show.bind=\"!onDemandLoad\"\n      paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    @if (onDemandLoad) {\n      <a href=\"javascript:void(0);\"\n        (click)=\"dataNavigator.navigatePage('next', $event)\"\n        class=\"app-button btn btn-block\"\n        [ngClass]=\"paginationclass\"\n        [textContent]=\"ondemandmessage\"\n      ></a>\n    }\n  </div>\n}\n\n<!--This template will be displayed when groupby is specified-->\n", dependencies: [{ kind: "ngmodule", type: i3.CommonModule }, { kind: "directive", type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: pagination.PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "directive", type: exports.ListItemDirective, selector: "[wmListItem]", inputs: ["wmListItem"], exportAs: ["listItemRef"] }, { kind: "component", type: i1.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     };
@@ -1561,7 +1556,7 @@
             i0.NgZone, String, String, String, String, String, String, i2.StatePersistence,
             i2.PaginationService, Object])
     ], exports.ListComponent);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: exports.ListComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: exports.ListComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i3.CommonModule, i1.TextContentDirective, pagination.PaginationComponent, exports.ListItemDirective, i1.WmAppIconComponent], selector: 'div[wmList]', providers: [
                             i1.provideAsWidgetRef(exports.ListComponent)

package/components/data/list/fesm2022/index.mjs

@@ -285,14 +285,14 @@ let ListItemDirective = class ListItemDirective extends StylableComponent {
         }
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.App }, { token: i0.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.App }, { token: i0.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0 }); }
 };
 ListItemDirective = __decorate([
     AutoLayout({ bindParent: 'listComponent.viewParent' }),
     __metadata("design:paramtypes", [Injector, ElementRef, App, Renderer2, Object])
 ], ListItemDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -469,7 +469,7 @@ let ListComponent = class ListComponent extends StylableComponent {
     }
     handleLoading(data) {
         const dataSource = this.datasource;
-        if (dataSource && dataSource.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
+        if (dataSource?.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
             this.ngZone.run(() => {
                 this.handleStateParams(data);
                 this.variableInflight = data.active;
@@ -485,7 +485,7 @@ let ListComponent = class ListComponent extends StylableComponent {
         }
     }
     triggerListItemSelection($el, $event) {
-        if ($el && $el[0]) {
+        if ($el?.[0]) {
             const listItemContext = $el.data('listItemContext');
             // Trigger click event only if the list item is from the corresponding list.
             if (listItemContext.listComponent === this) {
@@ -791,12 +791,10 @@ let ListComponent = class ListComponent extends StylableComponent {
                     this.invokeEventCallback('selectionlimitexceed', { $event: evt });
                 }
             }
-            else {
-                if (!$listItem.isActive || selectCount > 1) {
-                    this.clearSelectedItems();
-                    this.toggleListItemSelection($listItem);
-                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
-                }
+            else if (!$listItem.isActive || selectCount > 1) {
+                this.clearSelectedItems();
+                this.toggleListItemSelection($listItem);
+                this.firstSelectedItem = this.lastSelectedItem = $listItem;
             }
             $appDigest();
         }
@@ -811,7 +809,7 @@ let ListComponent = class ListComponent extends StylableComponent {
      */
     deselectItem(val) {
         const listItem = this.getItemRefByIndexOrModel(val);
-        if (listItem && listItem.isActive) {
+        if (listItem?.isActive) {
             this.toggleListItemSelection(listItem);
         }
     }
@@ -854,7 +852,7 @@ let ListComponent = class ListComponent extends StylableComponent {
             super.ngAfterViewInit();
             this.setUpCUDHandlers();
             this.selectedItemWidgets = this.multiselect ? [] : {};
-            var ele = $(this.nativeElement).find('.app-livelist-container');
+            const ele = $(this.nativeElement).find('.app-livelist-container');
             if (this.enablereorder && !this.groupby) {
                 if (ele) {
                     ele.attr('aria-describedby', this.titleId);
@@ -888,13 +886,13 @@ let ListComponent = class ListComponent extends StylableComponent {
         this._readItemAttrsFromHost();
     }
     ngOnDestroy() {
-        if (this._listAnimator && this._listAnimator.$btnSubscription) {
+        if (this._listAnimator?.$btnSubscription) {
             this._listAnimator.$btnSubscription.unsubscribe();
             this._listAnimator = null;
         }
         // MEMORY LEAK FIX: Unsubscribe from all app subscriptions
         if (this._listenerDestroyers) {
-            this._listenerDestroyers.forEach(d => d && d());
+            this._listenerDestroyers.forEach(d => d?.());
             this._listenerDestroyers = [];
         }
         // MEMORY LEAK FIX: Unsubscribe from navigator watches
@@ -923,7 +921,7 @@ let ListComponent = class ListComponent extends StylableComponent {
             this.boundClickHandler = null;
         }
         // MEMORY LEAK FIX: Destroy jQuery sortable widget
-        if (this.$ulEle && this.$ulEle.sortable) {
+        if (this.$ulEle?.sortable) {
             try {
                 this.$ulEle.sortable('destroy');
             }
@@ -995,7 +993,7 @@ let ListComponent = class ListComponent extends StylableComponent {
     }
     getConfiguredState() {
         const mode = this.statePersistence.computeMode(this.statehandler);
-        return mode && mode.toLowerCase();
+        return mode?.toLowerCase();
     }
     handleStateParams(options) {
         if (this._pageLoad && this.getConfiguredState() !== 'none') {
@@ -1112,7 +1110,7 @@ let ListComponent = class ListComponent extends StylableComponent {
         if (!isEmpty(newVal)) {
             this.noDataFound = false;
             this.isDataChanged = true;
-            if (this.datasource && this.datasource.execute(DataSource.Operation.IS_API_AWARE)) {
+            if (this.datasource?.execute(DataSource.Operation.IS_API_AWARE)) {
                 // clone the the data in case of live and service variables to prevent the two-way binding for these variables.
                 newVal = cloneDeep(newVal);
             }
@@ -1177,10 +1175,8 @@ let ListComponent = class ListComponent extends StylableComponent {
                     this.dataNavigator.pageChanged({ page: widgetState.pagination || 1, pagesize: widgetState.pagesize }, true);
                 }
             }
-            else {
-                if (get(widgetState, 'pagination')) {
-                    this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
-                }
+            else if (get(widgetState, 'pagination')) {
+                this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
             }
             if (get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = true;
@@ -1365,7 +1361,6 @@ let ListComponent = class ListComponent extends StylableComponent {
             });
         }
         if (this.fieldDefs.length && this.infScroll) {
-            const smoothScrollEl = this.$element.closest('[wmsmoothscroll]');
             // In case of mobile app when modal exists, and list items height is greater than the modal content provide ccontainer a scrollable height
             const modalBody = this.$element.closest('.modal-body');
             const listHt = this.$element.find('ul').height();
@@ -1503,7 +1498,7 @@ let ListComponent = class ListComponent extends StylableComponent {
     // Invoke the datasource variable by default when pulltorefresh event is not specified.
     subscribeToPullToRefresh() {
         this._listenerDestroyers.push(this.app.subscribe('pulltorefresh', () => {
-            if (this.datasource && this.datasource.listRecords) {
+            if (this.datasource?.listRecords) {
                 this.datasource.listRecords();
             }
         }));
@@ -1533,8 +1528,8 @@ let ListComponent = class ListComponent extends StylableComponent {
             this.itemAttrsMap = {};
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.ToDatePipe }, { token: i2.App }, { token: i2.AppDefaults }, { token: i0.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.ToDatePipe }, { token: i2.App }, { token: i2.AppDefaults }, { token: i0.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
             provideAsWidgetRef(ListComponent)
         ], queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "listLeftActionTemplate", first: true, predicate: ["listLeftActionTemplate"], descendants: true }, { propertyName: "listRightActionTemplate", first: true, predicate: ["listRightActionTemplate"], descendants: true }, { propertyName: "btnComponents", predicate: ButtonComponent }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (title || subheading || iconclass || iconurl) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"List icon\"></wm-app-icon>\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n    </h3>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\">\n    <ul class=\"pager\">\n      <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n          <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n@if (navigation === 'Inline' && !noDataFound) {\n  <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n}\n\n<div>\n  @if (enablereorder) {\n    <div id={{titleId}} class=\"sr-only\">\n      Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n  }\n\n  @if (listItems && enablereorder && currentIndex) {\n    <div aria-live=\"assertive\" class=\"sr-only\" >\n      {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n  }\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"list-group app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n  [class.list-group-autolayout]=\"hasAutolayout\"\n  (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n  (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n  (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n  (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n  (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n  (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n  [hidden]=\"noDataFound && !variableInflight\"\n  >\n  @if (!groupby) {\n    @for (item of fieldDefs; track item) {\n      <li class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n        [wmListItem]=\"item\"\n        #listItemRef=\"listItemRef\"\n        [attr.tabindex]=\"tabindex\"\n        role=\"listitem\">\n        <ng-container [ngTemplateOutlet]=\"listTemplate\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('falt_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n        [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n      </li>\n    }\n  } @else {\n    @for (groupObj of groupedData; track groupObj; let groupIndex = $index) {\n      <li class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\" [class.list-group-autolayout]=\"hasAutolayout\">\n          <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n              <div class=\"header-action\">\n                @if (collapsible) {\n                  <i class=\"app-icon wi action wi-chevron-up\"></i>\n                }\n                @if (showcount) {\n                  <span class=\"label label-default\">{{groupObj.data.length}}</span>\n                }\n              </div>\n            </h4>\n          </li>\n          <li class=\"list-group-container\">\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\" [class.list-group-autolayout]=\"hasAutolayout\">\n              @for (item of groupObj.data; track trackByFn($index, item)) {\n                <li [attr.tabindex]=\"tabindex\"\n                  class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                  [ngClass]=\"listItemRef.itemClass\"\n                  [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                  <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                    [ngTemplateOutletInjector]=\"createCustomInjector('group_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                  [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n              }\n            </ul>\n          </li>\n        </ul>\n      </li>\n    }\n  }\n  <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n  <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n@if (noDataFound && !variableInflight) {\n  <div class=\"no-data-msg\" [textContent]=\"nodatamessage\"></div>\n}\n\n@if (variableInflight && !pulltorefresh) {\n  <div class=\"loading-data-msg\">\n    <span>\n      <wm-app-icon [iconclass]=\"loadingicon\" [iconurl]=\"loadingiconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"loading icon\"></wm-app-icon>\n      <span class=\"sr-only\">Loading</span>\n      <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n    <ul class=\"pager\">\n      <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n          <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n\n@if (navigation !== 'None') {\n  <div class=\"panel-footer\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator?.dataSize <= pagesize && !allowpagesizechange) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n      navigationalign.bind=\"navigationalign\"\n      navigation.bind=\"navControls\"\n      showrecordcount.bind=\"showrecordcount\"\n      maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n      forceellipses.bind=\"forceellipses\"\n      directionlinks.bind=\"directionlinks\"\n      show.bind=\"!onDemandLoad\"\n      paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    @if (onDemandLoad) {\n      <a href=\"javascript:void(0);\"\n        (click)=\"dataNavigator.navigatePage('next', $event)\"\n        class=\"app-button btn btn-block\"\n        [ngClass]=\"paginationclass\"\n        [textContent]=\"ondemandmessage\"\n      ></a>\n    }\n  </div>\n}\n\n<!--This template will be displayed when groupby is specified-->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "directive", type: ListItemDirective, selector: "[wmListItem]", inputs: ["wmListItem"], exportAs: ["listItemRef"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 };
@@ -1548,7 +1543,7 @@ ListComponent = __decorate([
         NgZone, String, String, String, String, String, String, StatePersistence,
         PaginationService, Object])
 ], ListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, TextContentDirective, PaginationComponent, ListItemDirective, WmAppIconComponent], selector: 'div[wmList]', providers: [
                         provideAsWidgetRef(ListComponent)