@wavemaker-ai/app-ng-runtime 1.0.0-next.27766

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

@@ -0,0 +1,1612 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('@wm/core'), require('@wm/components/data/pagination'), require('@wm/components/input/button'), require('rxjs'), require('@wm/components/input/base-form'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'tslib', '@angular/common', '@wm/components/base', '@angular/core', '@wm/core', '@wm/components/data/pagination', '@wm/components/input/button', 'rxjs', '@wm/components/input/base-form', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.list = {}), global.tslib, global.ng.common, global.wm.components.base, global.ng.core, global.wm.core, global.wm.components.data.pagination, global.wm.components.input.button, global.rxjs, global.wm.components.input.baseForm, global._));
+})(this, (function (exports, tslib, i3, i1, i0, i2, pagination, button, rxjs, baseForm, lodashEs) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+
+    const registerProps$1 = () => {
+        i1.register('wm-list', new Map([
+            ['boundarylinks', { value: false, ...i1.PROP_BOOLEAN }],
+            ['class', i1.PROP_STRING],
+            ['collapsible', i1.PROP_BOOLEAN],
+            ['dateformat', i1.PROP_STRING],
+            ['dataset', i1.PROP_ANY],
+            ['datasource', i1.PROP_ANY],
+            ['direction', { value: 'vertical', ...i1.PROP_STRING }],
+            ['directionlinks', { value: true, ...i1.PROP_BOOLEAN }],
+            ['disableitem', i1.PROP_BOOLEAN],
+            ['enablereorder', i1.PROP_BOOLEAN],
+            ['forceellipses', { value: true, ...i1.PROP_BOOLEAN }],
+            ['groupby', i1.PROP_STRING],
+            ['iconclass', i1.PROP_STRING],
+            ['iconurl', i1.PROP_STRING],
+            ['itemclass', { value: '', ...i1.PROP_STRING }],
+            ['itemsperrow', i1.PROP_STRING],
+            ['listclass', { value: 'list-group', ...i1.PROP_STRING }],
+            ['multiselect', i1.PROP_BOOLEAN],
+            ['loadingdatamsg', { value: 'Loading...', ...i1.PROP_STRING }],
+            ['loadingicon', { value: 'fa fa-circle-o-notch', ...i1.PROP_STRING }],
+            ['loadingiconurl', i1.PROP_STRING],
+            ['match', i1.PROP_STRING],
+            ['maxsize', { value: 5, ...i1.PROP_NUMBER }],
+            ['name', i1.PROP_STRING],
+            ['navigation', i1.PROP_STRING],
+            ['navigationalign', { value: 'left', ...i1.PROP_STRING }],
+            ['nodatamessage', { value: 'No data found', ...i1.PROP_STRING }],
+            ['ondemandmessage', { value: 'Load More', ...i1.PROP_STRING }],
+            ['orderby', i1.PROP_STRING],
+            ['paginationclass', i1.PROP_STRING],
+            ['pagesize', i1.PROP_NUMBER],
+            ['pulltorefresh', { value: false, ...i1.PROP_BOOLEAN }],
+            ['selectfirstitem', i1.PROP_BOOLEAN],
+            ['selectionlimit', i1.PROP_NUMBER],
+            ['show', { value: true, ...i1.PROP_BOOLEAN }],
+            ['showcount', i1.PROP_BOOLEAN],
+            ['showrecordcount', i1.PROP_BOOLEAN],
+            ['statehandler', { value: 'none', ...i1.PROP_STRING }],
+            ['subheading', i1.PROP_STRING],
+            ['tabindex', { value: 0, ...i1.PROP_NUMBER }],
+            ['title', i1.PROP_STRING],
+            ['allowpagesizechange', { value: false, ...i1.PROP_BOOLEAN }],
+            ['pagesizeoptions', { value: '5,10,20,50,100', ...i1.PROP_STRING }],
+            ...i1.AUTO_LAYOUT_PROPS
+        ]));
+    };
+
+    const registerProps = () => {
+        i1.register('wm-listtemplate', new Map([
+            ...i1.AUTO_LAYOUT_PROPS
+        ]));
+    };
+
+    /********* Will come to this later for listtemplate = container variant **********/
+    // const DEFAULT_CLS = 'app-container';
+    // const WIDGET_CONFIG = { widgetType: 'wm-listtemplate', hostClass: DEFAULT_CLS};
+    const WIDGET_CONFIG$1 = { widgetType: 'wm-listtemplate' };
+    exports.ListItemDirective = class ListItemDirective extends i1.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        onFocus() {
+            // maintains which element is focused/selected most recently.
+            this.listComponent.lastSelectedItem = this;
+        }
+        get $index() {
+            return this.context.$index;
+        }
+        get $even() {
+            return this.context.even;
+        }
+        get $odd() {
+            return this.context.odd;
+        }
+        get $first() {
+            return this.context.first;
+        }
+        get $last() {
+            return this.context.last;
+        }
+        get currentItemWidgets() {
+            const componentElements = Array.from(this.nativeElement.querySelectorAll('[widget-id]'));
+            return Object.assign(this._currentItemWidgets, componentElements.reduce((result, comp) => {
+                result[comp.widget.name] = comp.widget;
+                return result;
+            }, {}));
+        }
+        set wmListItem(val) {
+            this.item = val;
+        }
+        constructor(inj, elRef, app, renderer, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
+            this.app = app;
+            this.renderer = renderer;
+            this.destroySub = new rxjs.Subject();
+            this.destroy$ = this.destroySub.asObservable();
+            this.itemClass = '';
+            this._currentItemWidgets = {};
+            /**
+             * To avoid re-rendering of widget, passing unique id as contextKey to createCustomInjector
+             */
+            this.trackId = i1.widgetIdGenerator.nextUid();
+            this.isActive = false;
+            this.disableItem = false;
+            this._viewParent = i0.inject(exports.ListComponent, { optional: true });
+            // addClass(this.nativeElement, DEFAULT_CLS); // Will come to this later for listtemplate = container variant
+            i1.styler(this.nativeElement, this, i1.APPLY_STYLES_TYPE.CONTAINER);
+            this.viewContainerRef = inj.get(i0.ViewContainerRef);
+            this.nativeElement = elRef.nativeElement;
+            this.listComponent = this._viewParent;
+            // this.context = (<NgForOfContext<ListItemDirective>>(<any>inj).view.context);
+            this.context = this.inj._lView[8];
+            //this.context = (this.viewContainerRef as any)._hostLView.find(t => t && !!t.$implicit);
+            this.itemClassWatcher(this.listComponent);
+            this.disableItemWatcher(this.listComponent);
+            this.itemAttrsHandler();
+            $(this.nativeElement).data('listItemContext', this);
+        }
+        /**
+        * Applies all the list item attributes and adds a watch on postion attribute
+        */
+        itemAttrsHandler() {
+            const attrsMap = this.listComponent.itemAttrsMap;
+            if (!attrsMap) {
+                return;
+            }
+            Object.keys(attrsMap).forEach(key => {
+                const value = attrsMap[key];
+                this.setProperty(key, value);
+            });
+        }
+        registerWatch(expression, callback) {
+            // Removing ngFor context as the same properties are availble on listitem scope.
+            // passing viewparent context for accessing varibales and widgets.
+            //[CSP]: expression will be generated in the component as e.g. 'item.className'
+            this.destroy$.subscribe(i2.$watch(expression, this.listComponent.viewParent, this, callback));
+        }
+        itemClassWatcher(listComponent) {
+            if (listComponent.binditemclass) {
+                this.registerWatch(listComponent.binditemclass, nv => this.itemClass = nv || '');
+            }
+            else {
+                this.itemClass = listComponent.itemclass;
+            }
+        }
+        disableItemWatcher($list) {
+            if ($list.binddisableitem) {
+                this.registerWatch($list.binddisableitem, nv => this.disableItem = nv || false);
+            }
+            else {
+                this.disableItem = $list.disableitem || false;
+            }
+        }
+        setUpCUDHandlers() {
+            const $editItem = this.nativeElement.querySelector('.edit-list-item');
+            const $deleteItem = this.nativeElement.querySelector('.delete-list-item');
+            if ($editItem) {
+                // MEMORY LEAK FIX: Store bound handler for cleanup
+                this.boundEditHandler = (evt) => {
+                    this.listComponent.update();
+                };
+                // Triggered on click of edit action
+                $editItem.addEventListener('click', this.boundEditHandler);
+            }
+            if ($deleteItem) {
+                // MEMORY LEAK FIX: Store bound handler for cleanup
+                this.boundDeleteHandler = (evt) => {
+                    this.listComponent.delete();
+                };
+                // Triggered on click of delete action
+                $deleteItem.addEventListener('click', this.boundDeleteHandler);
+            }
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            if (this.listComponent.mouseEnterCB) {
+                // MEMORY LEAK FIX: Store bound handler for cleanup
+                this.boundMouseEnterHandler = ($event) => {
+                    this.listComponent.invokeEventCallback('mouseenter', { widget: this, $event });
+                };
+                this.nativeElement.addEventListener('mouseenter', this.boundMouseEnterHandler);
+            }
+            if (this.listComponent.mouseLeaveCB) {
+                // MEMORY LEAK FIX: Store bound handler for cleanup
+                this.boundMouseLeaveHandler = ($event) => {
+                    this.listComponent.invokeEventCallback('mouseleave', { widget: this, $event });
+                };
+                this.nativeElement.addEventListener('mouseleave', this.boundMouseLeaveHandler);
+            }
+            // adding item attribute on every list item
+            $(this.nativeElement).attr('listitemindex', this.$index);
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            this.setUpCUDHandlers();
+            const componentElements = Array.from(this.nativeElement.querySelectorAll('[widget-id]'));
+            componentElements.forEach((component) => {
+                if (component.widget instanceof baseForm.BaseFormComponent) {
+                    if (!component.widget.$attrs.get('datavaluesource.bind')) {
+                        component.widget.datavaluesource = this.listComponent['datasource'];
+                    }
+                }
+            });
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Remove event listeners
+            if (this.boundMouseEnterHandler && this.nativeElement) {
+                try {
+                    this.nativeElement.removeEventListener('mouseenter', this.boundMouseEnterHandler);
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.boundMouseEnterHandler = null;
+            }
+            if (this.boundMouseLeaveHandler && this.nativeElement) {
+                try {
+                    this.nativeElement.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.boundMouseLeaveHandler = null;
+            }
+            if (this.nativeElement) {
+                const $editItem = this.nativeElement.querySelector('.edit-list-item');
+                if ($editItem && this.boundEditHandler) {
+                    try {
+                        $editItem.removeEventListener('click', this.boundEditHandler);
+                    }
+                    catch (e) {
+                        // Silently handle cleanup errors
+                    }
+                    this.boundEditHandler = null;
+                }
+                const $deleteItem = this.nativeElement.querySelector('.delete-list-item');
+                if ($deleteItem && this.boundDeleteHandler) {
+                    try {
+                        $deleteItem.removeEventListener('click', this.boundDeleteHandler);
+                    }
+                    catch (e) {
+                        // Silently handle cleanup errors
+                    }
+                    this.boundDeleteHandler = null;
+                }
+            }
+            // MEMORY LEAK FIX: Clear context to release references
+            if (this.context) {
+                Object.keys(this.context).forEach(key => {
+                    delete this.context[key];
+                });
+                this.context = null;
+            }
+            // MEMORY LEAK FIX: Clear ViewContainerRef reference
+            if (this.viewContainerRef) {
+                this.viewContainerRef = null;
+            }
+            // MEMORY LEAK FIX: Complete the destroy subject
+            if (this.destroySub) {
+                try {
+                    if (!this.destroySub.closed) {
+                        this.destroySub.next(null);
+                        this.destroySub.complete();
+                    }
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.destroySub = null;
+            }
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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: "20.3.19", 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: "20.3.19", ngImport: i0__namespace, type: exports.ListItemDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmListItem]',
+                        exportAs: 'listItemRef'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i2__namespace.App }, { type: i0__namespace.Renderer2 }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { isActive: [{
+                    type: i0.HostBinding,
+                    args: ['class.active']
+                }], disableItem: [{
+                    type: i0.HostBinding,
+                    args: ['class.disable-item']
+                }], onFocus: [{
+                    type: i0.HostListener,
+                    args: ['focus']
+                }], wmListItem: [{
+                    type: i0.Input
+                }] } });
+
+    const DEFAULT_CLS = 'app-livelist app-panel';
+    const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
+    exports.ListComponent = class ListComponent extends i1.StylableComponent {
+        static { this.initializeProps = registerProps$1(); }
+        constructor(inj, cdRef, datePipe, app, appDefaults, ngZone, binditemclass, binddisableitem, binddataset, binddatasource, mouseEnterCB, mouseLeaveCB, statePersistence, paginationService, explicitContext) {
+            let resolveFn = i2.noop;
+            const propsInitPromise = new Promise(res => resolveFn = res);
+            super(inj, WIDGET_CONFIG, explicitContext, propsInitPromise);
+            this.allowpagesizechange = false;
+            this.itemAttrsMap = {};
+            this.hasAutolayout = false;
+            this.propsInitPromise = propsInitPromise;
+            this.promiseResolverFn = resolveFn;
+            i1.styler(this.nativeElement, this, i1.APPLY_STYLES_TYPE.SHELL);
+            this.cdRef = cdRef;
+            this.ngZone = ngZone;
+            this.datePipe = datePipe;
+            this.statePersistence = statePersistence;
+            this.paginationService = paginationService;
+            this._pageLoad = true;
+            this.binditemclass = binditemclass;
+            this.binddisableitem = binddisableitem;
+            this.binddataset = binddataset;
+            this.mouseEnterCB = mouseEnterCB;
+            this.mouseLeaveCB = mouseLeaveCB;
+            this.binddatasource = binddatasource;
+            this.app = app;
+            this.appDefaults = appDefaults;
+            this.variableInflight = false;
+            this.noDataFound = !binddataset;
+            this.titleId = 'wmlist-' + i2.generateGUId();
+            // Updates pagination, filter, sort etc options for service and crud variables
+            this._listenerDestroyers = [
+                this.app.subscribe('check-state-persistence-options', options => {
+                    let dataSourceName = lodashEs.get(this.datasource, 'name');
+                    // in Prefabs, this.datasource is not resolved at the time of variable invocation, so additional check is required.
+                    if (!dataSourceName) {
+                        dataSourceName = i1.extractDataSourceName(this.binddatasource);
+                    }
+                    if (lodashEs.get(options, 'variable.name') !== dataSourceName) {
+                        return;
+                    }
+                    this.handleStateParams(options);
+                }),
+                // Show loading status based on the variable life cycle
+                this.app.subscribe('toggle-variable-state', this.handleLoading.bind(this)),
+                this.app.subscribe('setup-cud-listener', param => {
+                    if (this.nativeElement.getAttribute('name') !== param) {
+                        return;
+                    }
+                    this._isDependent = true;
+                })
+            ];
+        }
+        get selecteditem() {
+            if (this.multiselect) {
+                return i2.getClonedObject(this._items);
+            }
+            if (lodashEs.isEmpty(this._items)) {
+                return {};
+            }
+            return i2.getClonedObject(this._items[0]);
+        }
+        set selecteditem(items) {
+            this._items.length = 0;
+            this.deselectListItems();
+            if (lodashEs.isArray(items)) {
+                items.forEach(item => this.selectItem(item));
+            }
+            else {
+                this.selectItem(items);
+            }
+            i2.$appDigest();
+        }
+        /**
+         * Returns list of widgets present on list item by considering name and index of the widget.
+         * If we did'nt pass index, it returns array of all the widgets which are matching to widget name
+         * @param widgteName: Name of the widget
+         * @param index: Index of the widget
+         */
+        getWidgets(widgteName, index) {
+            let $target;
+            const retVal = [];
+            if (!widgteName) {
+                return;
+            }
+            if (!i2.isDefined(index)) {
+                lodashEs.forEach(this.listItems.toArray(), (el) => {
+                    $target = lodashEs.get(el.currentItemWidgets, widgteName);
+                    if ($target) {
+                        retVal.push($target);
+                    }
+                });
+                return retVal;
+            }
+            index = +index || 0;
+            $target = lodashEs.get(this.listItems.toArray(), index);
+            if ($target) {
+                return [lodashEs.get($target.currentItemWidgets, widgteName)];
+            }
+        }
+        // returns listitem reference by index value. This refers to the same method getListItemByIndex.
+        getItem(index) {
+            return this.getListItemByIndex(index);
+        }
+        /**
+         * Returns index of listItem(listItemDirective / listItemObject)
+         * If item is a directive, index is fetched from listItems
+         * If item is an object, index is fetched from fieldDefs
+         */
+        getIndex(item) {
+            if (item instanceof exports.ListItemDirective) {
+                return this.getListItemIndex(item);
+            }
+            else if (item) {
+                return this.fieldDefs.findIndex((obj) => lodashEs.isEqual(obj, item));
+            }
+        }
+        getUpdatedPageSize() {
+            return this.updatedPageSize;
+        }
+        create() {
+            if (this._isDependent) {
+                this.triggerWMEvent('insert');
+            }
+        }
+        editRow(item) {
+            if (this._isDependent) {
+                let listItem;
+                if (item) {
+                    listItem = this.getItemRefByIndexOrModel(item).item;
+                }
+                this.triggerWMEvent('update', listItem);
+            }
+        }
+        update(item) {
+            this.editRow(item);
+        }
+        deleteRow(item) {
+            if (this._isDependent) {
+                let listItem;
+                if (item) {
+                    listItem = this.getItemRefByIndexOrModel(item).item;
+                }
+                this.triggerWMEvent('delete', listItem);
+            }
+        }
+        delete(item) {
+            this.deleteRow(item);
+        }
+        handleLoading(data) {
+            const dataSource = this.datasource;
+            if (dataSource && dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) && i2.isDataSourceEqual(data.variable, dataSource)) {
+                this.ngZone.run(() => {
+                    this.handleStateParams(data);
+                    this.variableInflight = data.active;
+                    // Fix for [WMS-23772] Update nodatafound flag once the response is recieved from the server
+                    const totalEle = data.data?.pagination?.totalElements;
+                    if (!lodashEs.isUndefined(totalEle)) {
+                        this.noDataFound = totalEle === 0 ? true : false;
+                    }
+                    else { // totalelements is undefined
+                        this.noDataFound = lodashEs.isEmpty(data.data?.data);
+                    }
+                });
+            }
+        }
+        triggerListItemSelection($el, $event) {
+            if ($el && $el[0]) {
+                const listItemContext = $el.data('listItemContext');
+                // Trigger click event only if the list item is from the corresponding list.
+                if (listItemContext.listComponent === this) {
+                    this.onItemClick($event, listItemContext);
+                }
+            }
+        }
+        // this method is called form other data widgets like table.
+        execute(operation, options) {
+            if ([i2.DataSource.Operation.IS_API_AWARE, i2.DataSource.Operation.IS_PAGEABLE, i2.DataSource.Operation.SUPPORTS_SERVER_FILTER].includes(operation)) {
+                return false;
+            }
+            return this.datasource.execute(operation, options);
+        }
+        handleKeyDown($event, action) {
+            $event.stopPropagation();
+            if ($event.keyCode !== 13 && $event.keyCode !== 9 && !(($event.target.classList.contains('form-control') || $event.target.classList.contains('note-editable')) && $event.keyCode === 32)) {
+                $event.preventDefault();
+            }
+            const listItems = this.listItems;
+            let presentIndex = this.getListItemIndex(this.lastSelectedItem);
+            if (this.multiselect) {
+                const firstIndex = this.getListItemIndex(this.firstSelectedItem);
+                const selectCount = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : (i2.isObject(this.selecteditem) ? 1 : 0);
+                if (action === 'selectPrev') {
+                    if (presentIndex > 0) {
+                        if ((presentIndex <= firstIndex) && this.checkSelectionLimit(selectCount)) {
+                            this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
+                            this.toggleListItemSelection(this.lastSelectedItem);
+                        }
+                        else if (presentIndex > firstIndex) {
+                            this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
+                            this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
+                        }
+                        else {
+                            this.invokeEventCallback('selectionlimitexceed', { $event });
+                        }
+                    }
+                }
+                else if (action === 'selectNext') {
+                    if (presentIndex < listItems.length - 1) {
+                        if ((presentIndex >= firstIndex) && this.checkSelectionLimit(selectCount)) {
+                            this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
+                            this.toggleListItemSelection(this.lastSelectedItem);
+                        }
+                        else if (presentIndex < firstIndex) {
+                            this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
+                            this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
+                        }
+                        else {
+                            this.invokeEventCallback('selectionlimitexceed', { $event });
+                        }
+                    }
+                }
+            }
+            if (action === 'focusPrev') {
+                if (this.isListElementMovable) {
+                    presentIndex = presentIndex <= 0 ? 0 : (presentIndex);
+                    if (presentIndex === 0) {
+                        return;
+                    }
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    const prevElt = this.getListItemByIndex(presentIndex - 1);
+                    prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.statePersistence.removeWidgetState(this, 'selectedItem');
+                    const arr = this.listItems.toArray();
+                    [arr[presentIndex - 1], arr[presentIndex]] = [arr[presentIndex], arr[presentIndex - 1]];
+                    this.listItems.reset(arr);
+                    this.currentIndex = presentIndex;
+                    this.ariaText = "selected ";
+                }
+                else {
+                    presentIndex = presentIndex <= 0 ? 0 : (presentIndex - 1);
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.currentIndex = presentIndex + 1;
+                    this.ariaText = "selected ";
+                }
+            }
+            else if (action === 'focusNext') {
+                if (this.isListElementMovable) {
+                    presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex) : (listItems.length - 1);
+                    if (presentIndex === this.listItems.length - 1) {
+                        return;
+                    }
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    const nextElt = this.getListItemByIndex(presentIndex + 1);
+                    nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.statePersistence.removeWidgetState(this, 'selectedItem');
+                    const arr = this.listItems.toArray();
+                    [arr[presentIndex], arr[presentIndex + 1]] = [arr[presentIndex + 1], arr[presentIndex]];
+                    this.listItems.reset(arr);
+                    this.currentIndex = presentIndex + 2;
+                    this.ariaText = "selected ";
+                }
+                else {
+                    presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex + 1) : (listItems.length - 1);
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.currentIndex = presentIndex + 1;
+                    this.ariaText = "selected ";
+                }
+            }
+            else if (action === 'select') {
+                // if the enter click is pressed on the item which is not the last selected item, the find the item from which the event is originated.
+                if (presentIndex === -1 || !$($event.target).closest(this.lastSelectedItem.nativeElement)) {
+                    const $li = $($event.target).closest('li.app-list-item');
+                    const $ul = $li.closest('ul.app-livelist-container');
+                    presentIndex = $ul.find('li.app-list-item').index($li);
+                }
+                this.onItemClick($event, this.getListItemByIndex(presentIndex));
+            }
+            else if (action === 'space') {
+                if (!this.enablereorder) {
+                    return;
+                }
+                this.isListElementMovable = !this.isListElementMovable;
+                this.onItemClick($event, this.getListItemByIndex(presentIndex));
+                this.currentIndex = presentIndex + 1;
+                if (this.isListElementMovable) {
+                    this.ariaText = `Item ${this.currentIndex} grabbed, current position `;
+                    this.$ulEle.data('oldIndex', presentIndex);
+                }
+                else {
+                    this.ariaText = `Item ${this.currentIndex} dropped, final position `;
+                    this.onUpdate($event, undefined, presentIndex);
+                }
+            }
+        }
+        getActualPageSize() {
+            return this.actualPageSize || 20;
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'dataset') {
+                if (!nv && this.binddatasource && !this.datasource) {
+                    return;
+                }
+                this.onDataSetChange(nv);
+            }
+            else if (key === 'datasource') {
+                if (this.allowpagesizechange) {
+                    this.datasource.maxResults = this.pagesize || this.datasource.maxResults;
+                }
+                if (this.dataset) {
+                    this.onDataSetChange(this.dataset);
+                }
+            }
+            else if (key === 'navigation') {
+                // Support for older projects where navigation type was advanced instead of classic
+                if (nv === 'Advanced') {
+                    this.navigation = 'Classic';
+                    return;
+                }
+                i2.switchClass(this.nativeElement, nv, ov);
+                this.onNavigationTypeChange(nv);
+                if (this.dataNavigator) {
+                    this.dataNavigator.navigationClass = this.paginationclass;
+                }
+            }
+            else if (key === 'itemsperrow') {
+                i2.setListClass(this);
+            }
+            else if (key === 'tabindex') {
+                return;
+            }
+            else if (key === 'pulltorefresh' && nv) {
+                this.app.notify('pullToRefresh:enable');
+                this.subscribeToPullToRefresh();
+            }
+            else if (key === 'paginationclass') {
+                if (this.dataNavigator) {
+                    // Adding setTimeout because in pagination component updateNavSize method is overriding navigationclass
+                    setTimeout(() => this.dataNavigator.navigationClass = nv);
+                }
+            }
+            else if (key === 'pagesize') {
+                this.actualPageSize = nv; // maintain default page size to calculate pagesize options
+                this.setDefaultPageSize(nv);
+            }
+            else if (key === 'enablereorder') {
+                if (nv && this.$ulEle) {
+                    this.$ulEle.attr('aria-describedby', this.titleId);
+                    this.configureDnD();
+                    this.$ulEle.sortable('enable');
+                }
+                else if (this.$ulEle && !nv) {
+                    this.$ulEle.removeAttr('aria-describedby');
+                    this.$ulEle.sortable('disable');
+                }
+            }
+            else if (key === 'multiselect') {
+                // multiselect binding is evaluated after ngAfterViewInit, so initial value may be incorrect.
+                // Reassigning here to ensure selectedItemWidgets matches the updated multiselect value.
+                this.selectedItemWidgets = nv ? [] : {};
+            }
+            else if (key === 'allowpagesizechange') {
+                this.allowpagesizechange = nv;
+                this.dataNavigator.allowpagesizechange = nv;
+            }
+            else if (key === 'pagesizeoptions') {
+                this.prevPagesizeoptions = this.sanitizeCommaSeparatedIntegers(ov);
+                this.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
+                if (this.allowpagesizechange)
+                    this.setDefaultPageSize(nv);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        setDefaultPageSize(nv) {
+            if (this.allowpagesizechange) {
+                const widgetState = this.statePersistence.getWidgetState(this);
+                if (lodashEs.get(widgetState, 'pagesize')) {
+                    nv = lodashEs.get(widgetState, 'pagesize');
+                    this.pagesize = nv; // updating the default pagesize to user selected pagesize
+                }
+                else if (this.pagesizeoptions) {
+                    nv = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b)[0];
+                    this.pagesize = nv;
+                }
+                if (this.isPageSizeOptionsChanged()) {
+                    this.dataNavigator.defaultPageSizeOptions = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b) || [];
+                    this.dataNavigator.pageSizeOptions = [...this.dataNavigator.defaultPageSizeOptions];
+                }
+            }
+            this.updatedPageSize = nv;
+            this.dataNavigator.updatedPageSize = nv;
+            this.dataNavigator.options = {
+                maxResults: nv
+            };
+            this.dataNavigator.widget.maxResults = nv;
+            this.dataNavigator.maxResults = nv;
+            if (this.datasource) {
+                this.datasource.maxResults = this.pagesize || this.datasource.maxResults;
+            }
+        }
+        isPageSizeOptionsChanged() {
+            return !lodashEs.isEqual(this.prevPagesizeoptions, this.pagesizeoptions);
+        }
+        selectPageSize(pagesize) {
+            if (!this.allowpagesizechange && !pagesize)
+                return;
+            if (pagesize < this.dataNavigator.pageSizeOptions[0] || pagesize > this.dataNavigator.pageSizeOptions[this.dataNavigator.pageSizeOptions.length - 1]
+                || !this.dataNavigator.pageSizeOptions.includes(Number(pagesize))) {
+                pagesize = this.dataNavigator.pageSizeOptions[0];
+            }
+            this.dataNavigator.onPageSizeChange(undefined, pagesize);
+        }
+        sanitizeCommaSeparatedIntegers(input) {
+            if (!input)
+                return "";
+            const uniqueNumbers = Array.from(new Set(input
+                .split(",")
+                .map(v => v.trim())
+                .filter(v => /^-?\d+$/.test(v))
+                .map(v => Math.abs(parseInt(v, 10)))));
+            return uniqueNumbers.join(",");
+        }
+        onItemClick(evt, $listItem) {
+            let selectCount;
+            if (!$listItem.disableItem) {
+                this.firstSelectedItem = this.firstSelectedItem || $listItem;
+                // Setting selectCount value based number of items selected.
+                selectCount = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : (i2.isObject(this.selecteditem) ? 1 : 0);
+                // Handling multiselect for mobile device
+                if (this.multiselect && i2.isMobile()) {
+                    if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
+                        this.toggleListItemSelection($listItem);
+                    }
+                    else {
+                        this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                    }
+                }
+                else if ((evt.ctrlKey || evt.metaKey) && this.multiselect) {
+                    if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
+                        this.firstSelectedItem = this.lastSelectedItem = $listItem;
+                        this.toggleListItemSelection($listItem);
+                    }
+                    else {
+                        this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                    }
+                }
+                else if (evt.shiftKey && this.multiselect) {
+                    let first = $listItem.context.index;
+                    let last = this.firstSelectedItem.context.index;
+                    // if first is greater than last, then swap values
+                    if (first > last) {
+                        last = [first, first = last][0];
+                    }
+                    if (this.checkSelectionLimit(last - first)) {
+                        this.clearSelectedItems();
+                        this.listItems.forEach(($liItem) => {
+                            const index = $liItem.context.index;
+                            if (index >= first && index <= last) {
+                                this.toggleListItemSelection($liItem);
+                            }
+                        });
+                        this.lastSelectedItem = $listItem;
+                    }
+                    else {
+                        this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                    }
+                }
+                else {
+                    if (!$listItem.isActive || selectCount > 1) {
+                        this.clearSelectedItems();
+                        this.toggleListItemSelection($listItem);
+                        this.firstSelectedItem = this.lastSelectedItem = $listItem;
+                    }
+                }
+                i2.$appDigest();
+            }
+        }
+        // Empty the list content on clear
+        clear() {
+            this.updateFieldDefs([]);
+        }
+        /**
+         * deselects item in the list.
+         * @param val: index | model of the list item.
+         */
+        deselectItem(val) {
+            const listItem = this.getItemRefByIndexOrModel(val);
+            if (listItem && listItem.isActive) {
+                this.toggleListItemSelection(listItem);
+            }
+        }
+        /**
+         * selects item in the list.
+         * @param val: index | model of the list item.
+         */
+        selectItem(val, statePersistenceTriggered) {
+            const listItem = this.getItemRefByIndexOrModel(val);
+            if (!listItem) {
+                return;
+            }
+            if (!listItem.isActive) {
+                this.toggleListItemSelection(listItem, statePersistenceTriggered);
+            }
+            // focus the element.
+            listItem.nativeElement.focus();
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            this.handleHeaderClick = i2.noop;
+            setTimeout(() => {
+                this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, i1.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME, this);
+            }, 0);
+            this._items = [];
+            this.fieldDefs = [];
+            this.reorderProps = {
+                minIndex: null,
+                maxIndex: null
+            };
+            // Check if the host element has any of these autolayout attributes
+            const autoLayoutAttrs = ['wrap', 'alignment', 'gap', 'columngap'];
+            const directionValue = this.nativeElement.getAttribute('direction');
+            const hasAutoLayoutDirection = directionValue === 'row' || directionValue === 'column';
+            this.hasAutolayout = hasAutoLayoutDirection || autoLayoutAttrs.some(attr => this.nativeElement.hasAttribute(attr));
+        }
+        ngAfterViewInit() {
+            this.promiseResolverFn();
+            this.propsInitPromise.then(() => {
+                super.ngAfterViewInit();
+                this.setUpCUDHandlers();
+                this.selectedItemWidgets = this.multiselect ? [] : {};
+                var ele = $(this.nativeElement).find('.app-livelist-container');
+                if (this.enablereorder && !this.groupby) {
+                    if (ele) {
+                        ele.attr('aria-describedby', this.titleId);
+                    }
+                    this.configureDnD();
+                }
+                if (!this.enablereorder) {
+                    if (ele) {
+                        ele.removeAttr('aria-describedby');
+                    }
+                }
+                if (this.groupby && this.collapsible) {
+                    this.handleHeaderClick = i1.handleHeaderClick;
+                    this.toggleAllHeaders = i1.toggleAllHeaders.bind(undefined, this);
+                }
+                i2.setListClass(this);
+            });
+            this.setupHandlers();
+            const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
+            i1.styler($ul, this, i1.APPLY_STYLES_TYPE.CONTAINER);
+            if (this.enablereorder) {
+                if ($ul) {
+                    $ul.setAttribute('aria-describedby', this.titleId);
+                }
+            }
+            if (!this.enablereorder) {
+                if ($ul) {
+                    $ul.removeAttribute('aria-describedby');
+                }
+            }
+            this._readItemAttrsFromHost();
+        }
+        ngOnDestroy() {
+            if (this._listAnimator && 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 = [];
+            }
+            // MEMORY LEAK FIX: Unsubscribe from navigator watches
+            if (this.navigatorResultWatch) {
+                this.navigatorResultWatch.unsubscribe();
+                this.navigatorResultWatch = null;
+            }
+            if (this.navigatorMaxResultWatch) {
+                this.navigatorMaxResultWatch.unsubscribe();
+                this.navigatorMaxResultWatch = null;
+            }
+            // MEMORY LEAK FIX: Unsubscribe from listItems changes
+            if (this.listItemsChangesSubscription) {
+                this.listItemsChangesSubscription.unsubscribe();
+                this.listItemsChangesSubscription = null;
+            }
+            // MEMORY LEAK FIX: Remove native event listener
+            const ulElement = this.nativeElement?.querySelector('ul.app-livelist-container');
+            if (ulElement && this.boundClickHandler) {
+                try {
+                    ulElement.removeEventListener('click', this.boundClickHandler, true);
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.boundClickHandler = null;
+            }
+            // MEMORY LEAK FIX: Destroy jQuery sortable widget
+            if (this.$ulEle && this.$ulEle.sortable) {
+                try {
+                    this.$ulEle.sortable('destroy');
+                }
+                catch (e) {
+                    // Ignore errors during destroy
+                }
+                this.$ulEle = null;
+            }
+            // MEMORY LEAK FIX: Clear QueryList references
+            if (this.listItems) {
+                this.listItems = null;
+            }
+            if (this.btnComponents) {
+                this.btnComponents = null;
+            }
+            // MEMORY LEAK FIX: Clear ViewChild and ContentChild references
+            this.dataNavigator = null;
+            this.listTemplate = null;
+            this.listLeftActionTemplate = null;
+            this.listRightActionTemplate = null;
+            // MEMORY LEAK FIX: Clear all data arrays and objects
+            this.fieldDefs = [];
+            this._items = [];
+            this.groupedData = null;
+            if (Array.isArray(this.selectedItemWidgets)) {
+                this.selectedItemWidgets = [];
+            }
+            else {
+                this.selectedItemWidgets = {};
+            }
+            // MEMORY LEAK FIX: Remove add item event listener
+            const $addItem = document.getElementsByClassName("add-list-item")[0];
+            if ($addItem && this.boundAddItemHandler) {
+                $addItem.removeEventListener('click', this.boundAddItemHandler);
+                this.boundAddItemHandler = null;
+            }
+            // MEMORY LEAK FIX: Nullify closures and references
+            this.debouncedFetchNextDatasetOnScroll = null;
+            this.firstSelectedItem = null;
+            this.lastSelectedItem = null;
+            this.reorderProps = null;
+            super.ngOnDestroy();
+        }
+        ngOnDetach() {
+            super.ngOnDetach();
+            this._pageLoad = true;
+        }
+        handleEvent(node, eventName, eventCallback, locals) {
+            // tap and doubleTap events are not getting propagated.So, using mouse events instead.
+            const touchToMouse = {
+                tap: 'click',
+                doubletap: 'dblclick'
+            };
+            if (lodashEs.includes(['click', 'tap', 'dblclick', 'doubletap'], eventName)) {
+                this.eventManager.addEventListener(this.nativeElement, touchToMouse[eventName] || eventName, (evt) => {
+                    const target = $(evt.target).closest('.app-list-item');
+                    if (target.length) {
+                        const listItemContext = target.data('listItemContext');
+                        if (!listItemContext.disableItem) {
+                            this.invokeEventCallback(eventName, {
+                                widget: listItemContext,
+                                $event: evt,
+                                item: listItemContext.item
+                            });
+                        }
+                    }
+                });
+            }
+        }
+        getConfiguredState() {
+            const mode = this.statePersistence.computeMode(this.statehandler);
+            return mode && mode.toLowerCase();
+        }
+        handleStateParams(options) {
+            if (this._pageLoad && this.getConfiguredState() !== 'none') {
+                this._pageLoad = false;
+                const widgetState = this.statePersistence.getWidgetState(this);
+                if (lodashEs.get(widgetState, 'pagination')) {
+                    options.options = options.options || {};
+                    options.options.page = widgetState.pagination;
+                }
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    this._selectedItemsExist = true;
+                }
+            }
+        }
+        triggerWMEvent(eventName, item) {
+            i2.$invokeWatchers(true);
+            // If we have multiselect for the livelist(List with form template), in run mode deleting a record is getting failed. Becuase the selecteditem will be array of objects. So consider the last object.
+            let row = this.multiselect ? lodashEs.last(this.selecteditem) : this.selecteditem;
+            if (item) {
+                row = item;
+            }
+            this.app.notify('wm-event', { eventName, widgetName: this.name, row: row });
+        }
+        resetNavigation() {
+            this.showNavigation = false;
+            this.navControls = undefined;
+            this.infScroll = false;
+            this.onDemandLoad = false;
+        }
+        enableBasicNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.BASIC;
+            this.showNavigation = true;
+        }
+        enableInlineNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.INLINE;
+        }
+        enableClassicNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.CLASSIC;
+            this.showNavigation = true;
+        }
+        enablePagerNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.PAGER;
+            this.showNavigation = true;
+        }
+        setNavigationTypeNone() {
+            this.navControls = i1.NAVIGATION_TYPE.NONE;
+            this.showNavigation = false;
+        }
+        enableInfiniteScroll() {
+            this.infScroll = true;
+        }
+        enableOnDemandLoad() {
+            this.onDemandLoad = true;
+            this.showNavigation = true;
+        }
+        /**
+         * Sets Navigation type for the list.
+         * @param type
+         */
+        onNavigationTypeChange(type) {
+            this.resetNavigation();
+            switch (type) {
+                case i1.NAVIGATION_TYPE.BASIC:
+                    this.enableBasicNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.INLINE:
+                    this.enableInlineNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.ADVANCED:
+                case i1.NAVIGATION_TYPE.CLASSIC:
+                    this.enableClassicNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.PAGER:
+                    this.enablePagerNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.NONE:
+                    this.setNavigationTypeNone();
+                    break;
+                case i1.NAVIGATION_TYPE.SCROLL:
+                    this.enableInfiniteScroll();
+                    break;
+                case i1.NAVIGATION_TYPE.ONDEMAND:
+                    this.enableOnDemandLoad();
+                    break;
+            }
+        }
+        /**
+         * Update fieldDefs property, fieldDefs is the model of the List Component.
+         * fieldDefs is an Array type.
+         * @param newVal
+         */
+        updateFieldDefs(newVal) {
+            if (this.infScroll || this.onDemandLoad) {
+                [this.fieldDefs, this.currentPage] = this.paginationService.updateFieldsOnPagination(this, newVal);
+            }
+            else {
+                this.fieldDefs = newVal;
+            }
+            if (this.orderby) {
+                this.fieldDefs = i1.getOrderedDataset(this.fieldDefs, this.orderby);
+            }
+            if (this.groupby) {
+                this.groupedData = i1.groupData(this, this.fieldDefs, this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, undefined, this.appDefaults);
+            }
+            if (!this.fieldDefs.length) {
+                this.noDataFound = true;
+                this.selecteditem = undefined;
+            }
+            i2.$appDigest();
+            this.listItems.setDirty();
+        }
+        onDataChange(newVal) {
+            // Check for newVal is not empty
+            if (!lodashEs.isEmpty(newVal)) {
+                this.noDataFound = false;
+                this.isDataChanged = true;
+                if (this.datasource && 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);
+                }
+                if (i2.isObject(newVal) && !lodashEs.isArray(newVal)) {
+                    newVal = lodashEs.isEmpty(newVal) ? [] : [newVal];
+                }
+                if (lodashEs.isString(newVal)) {
+                    newVal = newVal.split(',');
+                }
+                // if the page number is greater than 1 on initial load then we render the first page.
+                if (this.datasource && this.datasource.owner === 'App' && (this.infScroll || this.onDemandLoad) && !this.currentPage && this.datasource.execute(i2.DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
+                    newVal = this.datasource.execute(i2.DataSource.Operation.LIST_RECORDS, {
+                        'page': 1
+                    });
+                }
+                if (lodashEs.isArray(newVal)) {
+                    if (newVal.length) {
+                        this.invokeEventCallback('beforedatarender', { $data: newVal });
+                    }
+                    this.updateFieldDefs(newVal);
+                }
+            }
+            else {
+                this.updateFieldDefs([]);
+            }
+        }
+        // Updates the dataSource when pagination is enabled for the Component.
+        setupDataSource() {
+            const dataNavigator = this.dataNavigator;
+            dataNavigator.options = {
+                maxResults: this.pagesize || 20
+            };
+            this.dataNavigatorWatched = true;
+            if (this.navigatorResultWatch) {
+                this.navigatorResultWatch.unsubscribe();
+            }
+            /*Register a watch on the "result" property of the "dataNavigator" so that the paginated data is displayed in the live-list.*/
+            this.navigatorResultWatch = dataNavigator.resultEmitter.subscribe((newVal) => {
+                this.onDataChange(newVal);
+            }, true);
+            /*De-register the watch if it is exists */
+            if (this.navigatorMaxResultWatch) {
+                this.navigatorMaxResultWatch.unsubscribe();
+            }
+            /*Register a watch on the "maxResults" property of the "dataNavigator" so that the "pageSize" is displayed in the live-list.*/
+            this.navigatorMaxResultWatch = dataNavigator.maxResultsEmitter.subscribe((val) => {
+                this.pagesize = val;
+            });
+            dataNavigator.maxResults = this.pagesize || 20;
+            this.removePropertyBinding('dataset');
+            // when list having "datasetboundexpr" attr indicates that list is bound to item context
+            // when dataset is bound to "item.FIELD" then item context is passed as the datasource.
+            const datasetBoundExpr = this.getAttr('datasetboundexpr');
+            this.dataNavigator.setBindDataSet(this.binddataset, this.viewParent, datasetBoundExpr ? this.context : this.datasource, this.dataset, this.binddatasource, datasetBoundExpr, this.statehandler);
+        }
+        onDataSetChange(newVal) {
+            if (lodashEs.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none' && this._pageLoad) {
+                const widgetState = this.statePersistence.getWidgetState(this);
+                this._pageLoad = false;
+                if (this.allowpagesizechange) { // maintain updated page size in the statePersistence
+                    if (lodashEs.get(widgetState, 'pagination') || lodashEs.get(widgetState, 'pagesize')) {
+                        this.dataNavigator.pageChanged({ page: widgetState.pagination || 1, pagesize: widgetState.pagesize }, true);
+                    }
+                }
+                else {
+                    if (lodashEs.get(widgetState, 'pagination')) {
+                        this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
+                    }
+                }
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    this._selectedItemsExist = true;
+                }
+            }
+            if (!this.dataNavigatorWatched) {
+                if (this.navigation && this.navigation !== i1.NAVIGATION_TYPE.NONE) {
+                    this.setupDataSource();
+                }
+                else {
+                    this.onDataChange(newVal);
+                }
+            }
+            else if (this.navigation && this.navigation !== i1.NAVIGATION_TYPE.NONE) {
+                // If navigation is already setup and datasource is changed, update the datasource on navigation
+                this.dataNavigator.setDataSource(this.datasource);
+            }
+        }
+        // All the ListItem's Active state is set to false.
+        deselectListItems() {
+            this.listItems.forEach(item => item.isActive = false);
+        }
+        // Deselect all the ListItems and clear the selecteditem(InOutBound Property model)
+        clearSelectedItems() {
+            this.deselectListItems();
+            this._items.length = 0;
+            i2.$appDigest();
+        }
+        /**
+         * return the ListItemDirective instance by checking the equality of the model.
+         * @param listModel: model to be searched for
+         * @returns ListItem if the model is matched else return null.
+         */
+        getListItemByModel(listModel) {
+            return this.listItems.find((listItem) => {
+                let itemObj = listItem.item;
+                if (this.groupby && !lodashEs.has(listModel, '_groupIndex')) {
+                    // If groupby is enabled, item contains _groupIndex property which should be excluded while comparing model.
+                    itemObj = lodashEs.clone(itemObj);
+                    delete itemObj._groupIndex;
+                }
+                if (lodashEs.isEqual(itemObj, listModel)) {
+                    return true;
+                }
+            }) || null;
+        }
+        updateSelectedItemsWidgets(statePersistenceTriggered) {
+            let obj = {}, widgetState;
+            const pageNum = lodashEs.get(this.dataNavigator, 'dn.currentPage') || 1;
+            if (this.getConfiguredState() !== 'none') {
+                // remove previously configured selected items for current page and construct new ones later below.
+                widgetState = this.statePersistence.getWidgetState(this) || {};
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    // when multiselect is on and an item is selected without pressing CTRL, previously selected items in state should be empty.
+                    if (this.multiselect && this.selecteditem.length === 1) {
+                        widgetState.selectedItem = [];
+                    }
+                    else {
+                        lodashEs.remove(widgetState.selectedItem, function (selectedItem) {
+                            return selectedItem.page === pageNum;
+                        });
+                    }
+                }
+            }
+            if (this.multiselect) {
+                this.selectedItemWidgets.length = 0;
+            }
+            this.listItems.forEach((item, index) => {
+                if (item.isActive) {
+                    if (this.multiselect) {
+                        this.selectedItemWidgets.push(item.currentItemWidgets);
+                    }
+                    else {
+                        this.selectedItemWidgets = item.currentItemWidgets;
+                    }
+                    obj = { page: pageNum, index: index };
+                    if (lodashEs.get(widgetState, 'selectedItem') && this.multiselect) {
+                        if (!lodashEs.some(widgetState.selectedItem, obj)) {
+                            widgetState.selectedItem.push(obj);
+                        }
+                    }
+                    else {
+                        widgetState.selectedItem = [obj];
+                    }
+                }
+            });
+            if (this.getConfiguredState() !== 'none' && !statePersistenceTriggered) {
+                if (i1.unsupportedStatePersistenceTypes.indexOf(this.navigation) < 0) {
+                    this.statePersistence.removeWidgetState(this, 'selectedItem');
+                    this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
+                }
+                else {
+                    console.warn('Retain State handling on Widget ' + this.name + ' is not supported for current pagination type.');
+                }
+            }
+        }
+        /**
+         * Selects the listItem and updates selecteditem property.
+         * If the listItem is already a selected item then deselects the item.
+         * @param {ListItemDirective} $listItem: Item to be selected of deselected.
+         */
+        toggleListItemSelection($listItem, statePersistenceTriggered) {
+            // item is not allowed to get selected if it is disabled.
+            if ($listItem && !$listItem.disableItem) {
+                let item = $listItem.item;
+                if (this.groupby && lodashEs.has(item, '_groupIndex')) {
+                    // If groupby is enabled, item contains _groupIndex property which should be excluded from selecteditem.
+                    item = lodashEs.clone(item);
+                    delete item._groupIndex;
+                }
+                if ($listItem.isActive) {
+                    this._items = lodashEs.pullAllWith(this._items, [item], lodashEs.isEqual);
+                    $listItem.isActive = false;
+                }
+                else {
+                    // if multiselect is false, clear the selectItem list before adding an item to the selectItem list.
+                    if (!this.multiselect) {
+                        this.clearSelectedItems();
+                    }
+                    this._items.push(item);
+                    this.invokeEventCallback('select', { widget: $listItem, $data: item });
+                    $listItem.isActive = true;
+                }
+                this.updateSelectedItemsWidgets(statePersistenceTriggered);
+            }
+        }
+        /**
+         * Method is Invoked when the model for the List Widget is changed.
+         * @param {QueryList<ListItemDirective>} listItems
+         */
+        onListRender(listItems) {
+            // Added render callback event. This method(onListRender) is calling multiple times so checking isDatachanged flag because this falg is changed whenever new data is rendered.
+            if (this.isDataChanged) {
+                // Whenever dataset is changed, trigger watchers to evaluate listitem bind expressions.
+                i2.$invokeWatchers(true);
+                this.invokeEventCallback('render', { $data: this.fieldDefs });
+            }
+            if (this.isDataChanged && this.getConfiguredState() !== 'none' && listItems.length && this._selectedItemsExist) {
+                const widgetState = this.statePersistence.getWidgetState(this);
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    this._selectedItemsExist = false;
+                    const selectedItemsLength = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : lodashEs.toNumber(!lodashEs.isEmpty(this.selecteditem));
+                    const currentPage = lodashEs.get(this.dataNavigator, 'dn.currentPage') || 1;
+                    widgetState.pagination = widgetState.pagination || 1;
+                    // to prevent item selection from being triggered more than once
+                    if (selectedItemsLength !== widgetState.selectedItem.length && widgetState.pagination === currentPage) {
+                        widgetState.selectedItem.forEach((item) => {
+                            if (item.page === currentPage) {
+                                this.selectItem(item.index, true);
+                            }
+                        });
+                    }
+                }
+            }
+            const selectedItems = lodashEs.isArray(this.selecteditem) ? this.selecteditem : [this.selecteditem];
+            this.firstSelectedItem = this.lastSelectedItem = null;
+            // don't select first item if multi-select is enabled and at least item is already selected in the list.
+            // don't select first item if state information has selected items
+            if (listItems.length && this.selectfirstitem && !(this._items.length && this.multiselect) && this._selectedItemsExist !== false) {
+                const $firstItem = listItems.first;
+                if (!$firstItem.disableItem &&
+                    this.isDataChanged &&
+                    // "infinite scroll" or "load on demand" is enabled and at least one item is selected then dont alter the selected list items.
+                    !((this.infScroll || this.onDemandLoad) &&
+                        this._items.length)) {
+                    this.clearSelectedItems();
+                    this.firstSelectedItem = this.lastSelectedItem = $firstItem;
+                    // selecting the first record
+                    this.selectItem(0);
+                }
+            }
+            else {
+                this.deselectListItems();
+                selectedItems.forEach(selecteditem => {
+                    const listItem = this.getListItemByModel(selecteditem);
+                    if (listItem) {
+                        listItem.isActive = true;
+                        this.lastSelectedItem = listItem;
+                        // focus the active element
+                        listItem.nativeElement.focus();
+                    }
+                });
+            }
+            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();
+                const modalHt = window.innerHeight - 140;
+                if (i2.isMobile() && modalBody.length && listHt > modalHt) {
+                    this.$element.css('height', modalHt + 'px');
+                }
+                setTimeout(() => this.paginationService.bindScrollEvt(this, '> ul', i1.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME), 500);
+                // this.paginationService.bindScrollEvt(this, '> ul', DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
+            }
+            this.isDataChanged = false;
+        }
+        setupHandlers() {
+            this.listItemsChangesSubscription = this.listItems.changes.subscribe(listItems => {
+                this.onListRender(listItems);
+                this.cdRef.detectChanges();
+            });
+            // handle click event in capturing phase.
+            this.boundClickHandler = ($event) => {
+                let target = $($event.target).closest('.app-list-item');
+                // Recursively find the current list item
+                while (target.get(0) && (target.closest('ul.app-livelist-container').get(0) !== $event.currentTarget)) {
+                    target = target.parent().closest('.app-list-item');
+                }
+                this.triggerListItemSelection(target, $event);
+            };
+            const ulElement = this.nativeElement.querySelector('ul.app-livelist-container');
+            if (ulElement) {
+                ulElement.addEventListener('click', this.boundClickHandler, true);
+            }
+        }
+        // Triggers on drag start while reordering.
+        onReorderStart(evt, ui) {
+            ui.placeholder.height(ui.item.height());
+            this.$ulEle.data('oldIndex', ui.item.index());
+        }
+        // Triggers during sorting
+        onSort(evt, ui) {
+            // In case of infinite scroll, when the element doesn't have scroll enabled
+            // on dragging the element to last item's position manually trigger loading of next items
+            if (this.infScroll) {
+                const lastItemOffset = this.$ulEle.find(`[listitemindex=${this.fieldDefs.length - 1}]`).offset();
+                if (lastItemOffset && lastItemOffset.top < ui.offset.top) {
+                    this.paginationService.bindScrollEvt(this, '> ul', i1.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
+                    this.debouncedFetchNextDatasetOnScroll();
+                }
+            }
+        }
+        // Triggers after the sorting.
+        onUpdate(evt, ui, presentIndex) {
+            const data = this.fieldDefs;
+            // If ui is not present then it is called from drag and drop using keyboard
+            const newIndex = ui === undefined ? presentIndex : ui.item.index();
+            const oldIndex = this.$ulEle.data('oldIndex');
+            const minIndex = lodashEs.min([newIndex, oldIndex]);
+            const maxIndex = lodashEs.max([newIndex, oldIndex]);
+            const draggedItem = lodashEs.pullAt(data, oldIndex)[0];
+            // Modify the data list only if we find a draggedItem
+            if (draggedItem) {
+                if (this.getConfiguredState() !== 'none') {
+                    this.statePersistence.removeWidgetState(this, 'selectedItem');
+                }
+                this.reorderProps.minIndex = lodashEs.min([minIndex, this.reorderProps.minIndex]);
+                this.reorderProps.maxIndex = lodashEs.max([maxIndex, this.reorderProps.maxIndex]);
+                data.splice(newIndex, 0, draggedItem);
+                this.cdRef.markForCheck();
+                this.cdRef.detectChanges();
+                const $changedItem = {
+                    oldIndex: oldIndex,
+                    newIndex: newIndex,
+                    item: data[newIndex]
+                };
+                this.invokeEventCallback('reorder', { $event: evt, $data: data, $changedItem });
+                this.$ulEle.removeData('oldIndex');
+            }
+        }
+        // configures reordering the list items.
+        configureDnD() {
+            let appendTo;
+            const modalEl = $(document).find('.modal');
+            if (this.getAttr('height')) { // when height is applied to the list, append should be the ul's parent as scroll is applied to the parent
+                appendTo = 'parent';
+            }
+            else if (modalEl.length) { // In case of dialog, appendTo should be the modal ele
+                appendTo = modalEl[modalEl.length - 1];
+            }
+            else { // As default append to should be body
+                appendTo = 'body';
+            }
+            const options = {
+                appendTo: appendTo,
+            };
+            const $el = $(this.nativeElement);
+            this.$ulEle = $el.find('.app-livelist-container');
+            i1.configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
+            this.$ulEle.droppable({ 'accept': '.app-list-item' });
+        }
+        // returns true if the selection limit is reached.
+        checkSelectionLimit(count) {
+            return (!this.selectionlimit || count < this.selectionlimit);
+        }
+        // returns listitem reference by index value.
+        getListItemByIndex(index) {
+            return this.listItems.toArray()[index];
+        }
+        /**
+         * return index of an (listItemDirective) in the listItem
+         * @param {ListItemDirective} item
+         * @returns {number}
+         */
+        getListItemIndex(item) {
+            return this.listItems.toArray().indexOf(item);
+        }
+        /**
+         *  Returns ListItem Reference based on the input provided.
+         * @param val: index | model of the list item.
+         * @returns {ListItemDirective}
+         */
+        getItemRefByIndexOrModel(val) {
+            let listItem;
+            if (lodashEs.isNumber(val)) {
+                listItem = this.getListItemByIndex(val);
+            }
+            else {
+                listItem = this.getListItemByModel(val);
+            }
+            return listItem;
+        }
+        beforePaginationChange($event, $index) {
+            this.invokeEventCallback('paginationchange', { $event, $index });
+        }
+        trackByFn($index) {
+            return $index; // Return a unique identifier for each item
+        }
+        // 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) {
+                    this.datasource.listRecords();
+                }
+            }));
+        }
+        setUpCUDHandlers() {
+            const $addItem = document.getElementsByClassName("add-list-item")[0];
+            if ($addItem) {
+                // MEMORY LEAK FIX: Store bound handler for cleanup
+                this.boundAddItemHandler = (evt) => {
+                    this.create();
+                };
+                // Triggered on click of add action
+                $addItem.addEventListener('click', this.boundAddItemHandler);
+            }
+        }
+        _readItemAttrsFromHost() {
+            const raw = this.nativeElement.getAttribute("itemattrs");
+            if (!raw) {
+                this.itemAttrsMap = {};
+                return;
+            }
+            try {
+                this.itemAttrsMap = JSON.parse(raw);
+            }
+            catch (e) {
+                console.warn("list.component: failed to parse itemattrs JSON", e, raw);
+                this.itemAttrsMap = {};
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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: "20.3.19", 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"] }] }); }
+    };
+    exports.ListComponent = tslib.__decorate([
+        i1.AutoLayout({ targetSelector: 'ul' }),
+        tslib.__metadata("design:paramtypes", [i0.Injector,
+            i0.ChangeDetectorRef,
+            i1.ToDatePipe,
+            i2.App,
+            i2.AppDefaults,
+            i0.NgZone, String, String, String, String, String, String, i2.StatePersistence,
+            i2.PaginationService, Object])
+    ], exports.ListComponent);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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)
+                        ], 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" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.ToDatePipe }, { type: i2__namespace.App }, { type: i2__namespace.AppDefaults }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['itemclass.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['disableitem.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['datasource.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['mouseenter.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['mouseleave.event']
+                    }] }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { listTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['listTemplate']
+                }], listLeftActionTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['listLeftActionTemplate']
+                }], listRightActionTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['listRightActionTemplate']
+                }], btnComponents: [{
+                    type: i0.ContentChildren,
+                    args: [button.ButtonComponent]
+                }], dataNavigator: [{
+                    type: i0.ViewChild,
+                    args: [pagination.PaginationComponent]
+                }], listItems: [{
+                    type: i0.ViewChildren,
+                    args: [exports.ListItemDirective]
+                }] } });
+
+}));