import * as i0 from '@angular/core';
import { ViewContainerRef, Directive, Optional, HostBinding, HostListener, Input, Component, Attribute, Inject, ContentChild, ContentChildren, ViewChild, ViewChildren, NgModule } from '@angular/core';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@wm/components/base';
import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, widgetIdGenerator, StylableComponent, APPLY_STYLES_TYPE, styler, extractDataSourceName, DEBOUNCE_TIMES, handleHeaderClick, toggleAllHeaders, NAVIGATION_TYPE, getOrderedDataset, groupData, unsupportedStatePersistenceTypes, configureDnD, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
import * as i2$1 from '@wm/components/data/pagination';
import { PaginationComponent, PaginationModule } from '@wm/components/data/pagination';
import * as i2 from '@wm/core';
import { isMobileApp, $watch, noop, generateGUId, getClonedObject, $appDigest, isDefined, DataSource, isDataSourceEqual, isObject, switchClass, setListClass, isMobile, $invokeWatchers } from '@wm/core';
import { BaseFormComponent, ButtonComponent } from '@wm/components/input';
import { Subject } from 'rxjs';
import { SwipeAnimation } from '@swipey';
import { reduce, map, get, isEmpty, isArray, forEach, isEqual, isUndefined, includes, last, cloneDeep, isString, has, clone, remove, some, pullAllWith, toNumber, min, max, pullAt, isNumber } from 'lodash-es';

const registerProps = () => {
    register('wm-list', new Map([
        ['boundarylinks', { value: false, ...PROP_BOOLEAN }],
        ['class', PROP_STRING],
        ['collapsible', PROP_BOOLEAN],
        ['dateformat', PROP_STRING],
        ['dataset', PROP_ANY],
        ['datasource', PROP_ANY],
        ['direction', { value: 'vertical', ...PROP_STRING }],
        ['directionlinks', { value: true, ...PROP_BOOLEAN }],
        ['disableitem', PROP_BOOLEAN],
        ['enablereorder', PROP_BOOLEAN],
        ['forceellipses', { value: true, ...PROP_BOOLEAN }],
        ['groupby', PROP_STRING],
        ['iconclass', PROP_STRING],
        ['itemclass', { value: '', ...PROP_STRING }],
        ['itemsperrow', PROP_STRING],
        ['listclass', { value: 'list-group', ...PROP_STRING }],
        ['multiselect', PROP_BOOLEAN],
        ['loadingdatamsg', { value: 'Loading...', ...PROP_STRING }],
        ['loadingicon', { value: 'fa fa-circle-o-notch', ...PROP_STRING }],
        ['match', PROP_STRING],
        ['maxsize', { value: 5, ...PROP_NUMBER }],
        ['name', PROP_STRING],
        ['navigation', PROP_STRING],
        ['navigationalign', { value: 'left', ...PROP_STRING }],
        ['nodatamessage', { value: 'No data found', ...PROP_STRING }],
        ['ondemandmessage', { value: 'Load More', ...PROP_STRING }],
        ['orderby', PROP_STRING],
        ['paginationclass', PROP_STRING],
        ['pagesize', PROP_NUMBER],
        ['pulltorefresh', { value: isMobileApp(), ...PROP_BOOLEAN }],
        ['selectfirstitem', PROP_BOOLEAN],
        ['selectionlimit', PROP_NUMBER],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['showcount', PROP_BOOLEAN],
        ['showrecordcount', PROP_BOOLEAN],
        ['statehandler', { value: 'none', ...PROP_STRING }],
        ['subheading', PROP_STRING],
        ['tabindex', { value: 0, ...PROP_NUMBER }],
        ['title', PROP_STRING]
    ]));
};

class ListItemDirective {
    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, _viewParent) {
        this.inj = inj;
        this.app = app;
        this._viewParent = _viewParent;
        this.destroy = new Subject();
        this.destroy$ = this.destroy.asObservable();
        this.itemClass = '';
        this._currentItemWidgets = {};
        /**
         * To avoid re-rendering of widget, passing unique id as contextKey to createCustomInjector
         */
        this.trackId = widgetIdGenerator.nextUid();
        this.isActive = false;
        this.disableItem = false;
        this.viewContainerRef = inj.get(ViewContainerRef);
        this.nativeElement = elRef.nativeElement;
        this.listComponent = _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.nativeElement).data('listItemContext', this);
    }
    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($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) {
            // Triggered on click of edit action
            $editItem.addEventListener('click', evt => {
                this.listComponent.update();
            });
        }
        if ($deleteItem) {
            // Triggered on click of delete action
            $deleteItem.addEventListener('click', evt => {
                this.listComponent.delete();
            });
        }
    }
    ngOnInit() {
        if (this.listComponent.mouseEnterCB) {
            this.nativeElement.addEventListener('mouseenter', ($event) => {
                this.listComponent.invokeEventCallback('mouseenter', { widget: this, $event });
            });
        }
        if (this.listComponent.mouseLeaveCB) {
            this.nativeElement.addEventListener('mouseleave', ($event) => {
                this.listComponent.invokeEventCallback('mouseleave', { widget: this, $event });
            });
        }
        // adding item attribute on every list item
        $(this.nativeElement).attr('listitemindex', this.$index);
    }
    ngAfterViewInit() {
        this.setUpCUDHandlers();
        const componentElements = Array.from(this.nativeElement.querySelectorAll('[widget-id]'));
        componentElements.forEach((component) => {
            if (component.widget instanceof BaseFormComponent) {
                if (!component.widget.$attrs.get('datavaluesource.bind')) {
                    component.widget.datavaluesource = this.listComponent['datasource'];
                }
            }
        });
    }
    static { this.ɵfac = function ListItemDirective_Factory(t) { return new (t || ListItemDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(ListComponent, 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ListItemDirective, selectors: [["", "wmListItem", ""]], hostVars: 4, hostBindings: function ListItemDirective_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("focus", function ListItemDirective_focus_HostBindingHandler() { return ctx.onFocus(); });
        } if (rf & 2) {
            i0.ɵɵclassProp("active", ctx.isActive)("disable-item", ctx.disableItem);
        } }, inputs: { wmListItem: "wmListItem" }, exportAs: ["listItemRef"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListItemDirective, [{
        type: Directive,
        args: [{
                selector: '[wmListItem]',
                exportAs: 'listItemRef'
            }]
    }], () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.App }, { type: ListComponent, decorators: [{
                type: Optional
            }] }], { isActive: [{
            type: HostBinding,
            args: ['class.active']
        }], disableItem: [{
            type: HostBinding,
            args: ['class.disable-item']
        }], onFocus: [{
            type: HostListener,
            args: ['focus']
        }], wmListItem: [{
            type: Input
        }] }); })();

class ListAnimator extends SwipeAnimation {
    constructor(list) {
        super();
        this.list = list;
        this.$el = $(this.list.getNativeElement()).find('ul.app-livelist-container').first();
        this.leftChildrenCount = this.$el.find('>.app-list-item-left-action-panel > button:visible').length;
        this.rightChildrenCount = this.$el.find('>.app-list-item-right-action-panel > button:visible').length;
        // when there are no children in both the templates then do not apply swipeAnimation;
        if (!this.leftChildrenCount && !this.rightChildrenCount) {
            return;
        }
        // initialise swipe animation on the list component.
        this.init(this.$el);
        // retrieves all the button components which are placed outside the listTemplate.
        this.$btnSubscription = this.list.btnComponents.changes.subscribe(items => this.actionItems = items);
    }
    // This method sets the css for left or right action panels based on the template. Appends the actionTemplate before li.
    createActionPanel(li, actionPanelTemplate) {
        actionPanelTemplate.css({
            width: li.outerWidth() + 'px',
            height: li.outerHeight() + 'px',
            marginBottom: -1 * li.outerHeight() + 'px',
            float: 'left',
            padding: 0
        });
        return actionPanelTemplate.insertBefore(li);
    }
    // Returns the total width occupied by all the children inside the element
    computeTotalChildrenWidth($ele) {
        return reduce($ele.children(), (totalWidth, el) => {
            return totalWidth + $(el).outerWidth();
        }, 0);
    }
    // Returns amount of transition to be applied on element when swiped left or right
    computeTransitionProportions($ele) {
        const totalWidth = this.computeTotalChildrenWidth($ele);
        const reverse = this.position === 'right';
        let d = 0;
        // @ts-ignore
        return map($ele.children(), e => {
            const f = (totalWidth - d) / totalWidth;
            d += $(e).outerWidth();
            return reverse ? f : (d / totalWidth);
        });
    }
    // Resets the transform applied on the element.
    resetElement(el) {
        if (el) {
            el.css({
                transform: 'none',
                transition: 'none'
            });
        }
    }
    resetState() {
        this.resetElement(this.li);
        this.resetElement(this.actionPanel);
        if (this.actionPanel) {
            this.actionPanel = null;
        }
    }
    // Returns the target button (child element) inside the left and right actionPanels.
    getChildActionElement(actionTemplate) {
        if (actionTemplate.children().length) {
            if (this.position === 'left') {
                return actionTemplate.children().first();
            }
            return actionTemplate.children().last();
        }
    }
    // create the actionPanels and set the background-color for remaining panel as that of first child element
    // calculates the children's width and its transition proportionates.
    initActionPanel(actionTemplate) {
        this.actionPanel = this.createActionPanel(this.li, actionTemplate);
        this.actionPanel.css({
            backgroundColor: this.getChildActionElement(this.actionPanel).css('background-color')
        });
        this.limit = this.computeTotalChildrenWidth(this.actionPanel);
        this.transitionProportions = this.computeTransitionProportions(this.actionPanel);
    }
    bounds(e, $d) {
        const target = $(e.target).closest('li');
        // default bounds when action template markup is not available.
        let bounds = {
            strictUpper: true,
            strictLower: true,
            lower: 0,
            center: 0,
            upper: 0
        };
        // apply swipe animation only on list items having "app-list-item" class.
        if (!target.hasClass('app-list-item')) {
            return bounds;
        }
        if (!this.li || this.li[0] !== target[0]) {
            let selector = $d > 0 ? '.app-list-item-left-action-panel' : '.app-list-item-right-action-panel';
            let actionTemplate = this.$el.find('>' + selector);
            // when groupby is set select the action panel from the list group items.
            if (!actionTemplate.length && this.list.groupby) {
                selector = 'li > ul.list-group >' + selector;
                actionTemplate = this.$el.find('>' + selector);
            }
            // check for children visiblity. If children are visible then initiate the action panel.
            if (!actionTemplate.length || !actionTemplate.find('button:visible').length) {
                return bounds;
            }
            this.resetState();
            this.li = target;
            this.position = actionTemplate.attr('position');
            this.initActionPanel(actionTemplate);
            if ($d > 0) {
                // bounds while swiping from right to left to open left action panel. It can be moved upto limit value (Upper bound).
                bounds = {
                    strictUpper: false,
                    lower: 0,
                    center: 0,
                    upper: this.limit
                };
            }
            else {
                // bounds while swiping from left to right to open right action panel. It can be moved in reverse direction with -limit value (lower bound).
                bounds = {
                    strictLower: false,
                    lower: -this.limit,
                    center: 0,
                    upper: 0
                };
            }
        }
        else if (this.position === 'left') {
            // when left action panel is visible (i.e. center at limit value) then this can be moved by distance (limit) in reverse direction to close the view.
            bounds = {
                strictUpper: false,
                lower: -this.limit,
                center: this.limit
            };
        }
        else if (this.position === 'right') {
            // when right action panel is visible (i.e. center at -limit value) then this can be moved by distance (limit) to close the view.
            bounds = {
                center: -this.limit,
                upper: this.limit,
                strictLower: false
            };
        }
        return bounds;
    }
    context() {
        return {
            computeActionTransition: (index, $d) => {
                const sign = $d > 0 ? 1 : -1;
                if (sign * $d > this.limit) {
                    // once the distance swiped is beyond the limit, then calculate the proportionate distance moved after the limit value.
                    return ($d - sign * this.limit) + (this.transitionProportions[index] * sign * this.limit);
                }
                return this.transitionProportions[index] * $d;
            }
        };
    }
    animation() {
        return [{
                target: () => this.li,
                css: {
                    transform: 'translate3d(${{$D + $d}}px, 0, 0)'
                }
            }, {
                target: () => (this.actionPanel && this.actionPanel.children()),
                css: {
                    transform: 'translate3d(${{computeActionTransition($i, $D + $d)}}px, 0, 0)'
                }
            }];
    }
    // Triggers full swipe event on the target element.
    invokeFullSwipeEvt($event) {
        let target, actions, index;
        // Check if button are visible or not, invoke the tap event of the last button which is visible.
        if (this.position === 'left') {
            actions = this.actionItems.filter(btn => {
                return btn.getAttr('swipe-position') === 'left' && btn.$element.is(':visible');
            });
            index = 0;
        }
        else {
            actions = this.actionItems.filter(btn => {
                return btn.getAttr('swipe-position') === 'right' && btn.$element.is(':visible');
            });
            index = actions.length - 1;
        }
        target = actions[index];
        if (target && target.hasEventCallback('tap')) {
            target.invokeEventCallback('tap', { $event });
        }
        this.resetState();
        this.li = null;
    }
    // Called when swipeEnd is triggered. d contains the total distance covered by the element until touchEnd.
    onAnimation($event, d) {
        // set the selecteditem on the list component on swipe.
        this.list.triggerListItemSelection(this.li, $event);
        if (this.actionPanel && this.actionPanel.attr('enablefullswipe') === 'true') {
            const sign = d > 0 ? 1 : -1;
            const $el = this.getChildActionElement(this.actionPanel);
            if ($el) {
                const index = this.position === 'right' ? this.rightChildrenCount - 1 : 0;
                // proportionate amount of distance covered by the target element.
                const distPercentage = this.transitionProportions[index] * sign * d * 100 / (this.li.outerWidth() - this.limit + $el.width());
                // If distance travelled by the target button element is more than 50% of the list item width then invoke the fullswipe.
                if (distPercentage > 50) {
                    // invoke fullswipe event
                    this.invokeFullSwipeEvt($event);
                }
            }
        }
    }
    onLower() {
        if (this.position === 'left') {
            this.resetState();
            this.li = null;
        }
    }
    onUpper() {
        if (this.position === 'right') {
            this.resetState();
            this.li = null;
        }
    }
    threshold() {
        return 10;
    }
}

const _c0 = ["listTemplate"];
const _c1 = ["listLeftActionTemplate"];
const _c2 = ["listRightActionTemplate"];
const _c3 = ["wmList", ""];
const _c4 = a0 => ({ "disabled": a0 });
const _c5 = (a0, a1, a2, a3, a4, a5) => ({ item: a0, $index: a1, itemRef: a2, $first: a3, $last: a4, currentItemWidgets: a5 });
const _c6 = a0 => ({ "collapsible-content": a0 });
function ListComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 14)(1, "h3", 15)(2, "div", 16);
    i0.ɵɵelement(3, "i", 17);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 16);
    i0.ɵɵelement(5, "div", 18)(6, "div", 19);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r1.iconclass, "");
    i0.ɵɵproperty("hidden", !ctx_r1.iconclass);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("innerHTML", ctx_r1.title, i0.ɵɵsanitizeHtml);
    i0.ɵɵadvance();
    i0.ɵɵproperty("innerHTML", ctx_r1.subheading, i0.ɵɵsanitizeHtml);
} }
function ListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 20)(1, "ul", 21)(2, "li", 22)(3, "a", 23);
    i0.ɵɵlistener("click", function ListComponent_div_1_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("prev", $event)); });
    i0.ɵɵelement(4, "i", 24);
    i0.ɵɵelementStart(5, "span", 25);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisablePrevious : true));
    i0.ɵɵadvance();
    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("Go to Previous page ", ctx_r1.dataNavigator.isDisablePrevious ? ", Disabled" : "", "");
} }
function ListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", "Page " + ctx_r1.dataNavigator.dn.currentPage + " of " + ctx_r1.dataNavigator.pageCount, "");
} }
function ListComponent_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵtext(1, " Press space bar to toggle drag drop mode, use arrow keys to move selected elements. ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate("id", ctx_r1.titleId);
} }
function ListComponent_div_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 28);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.ariaText + ctx_r1.currentIndex + " of " + ctx_r1.listItems.length, " ");
} }
function ListComponent_ng_template_7_li_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li", 30, 1);
    i0.ɵɵelementContainer(2, 31);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r4 = ctx.$implicit;
    const $index_r5 = ctx.index;
    const $first_r6 = ctx.first;
    const $last_r7 = ctx.last;
    const listItemRef_r8 = i0.ɵɵreference(1);
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassMapInterpolate1("app-list-item ", ctx_r1.direction === "horizontal" ? "" : ctx_r1.itemsPerRowClass, "");
    i0.ɵɵproperty("ngClass", listItemRef_r8.itemClass)("wmListItem", item_r4);
    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("falt_" + listItemRef_r8.trackId, i0.ɵɵpureFunction6(9, _c5, item_r4, $index_r5, listItemRef_r8, $first_r6, $last_r7, listItemRef_r8.currentItemWidgets)))("ngTemplateOutletContext", i0.ɵɵpureFunction6(16, _c5, item_r4, $index_r5, listItemRef_r8, $first_r6, $last_r7, listItemRef_r8.currentItemWidgets));
} }
function ListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 23, "li", 29);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngForOf", ctx_r1.fieldDefs);
} }
function ListComponent_div_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "div", 32);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("textContent", ctx_r1.nodatamessage);
} }
function ListComponent_div_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 33)(1, "span");
    i0.ɵɵelement(2, "i", 34);
    i0.ɵɵelementStart(3, "span", 25);
    i0.ɵɵtext(4, "Loading");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(5, "span", 35);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r1.loadingicon);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
} }
function ListComponent_div_12_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 36)(1, "ul", 21)(2, "li", 37)(3, "a", 23);
    i0.ɵɵlistener("click", function ListComponent_div_12_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
    i0.ɵɵelement(4, "i", 38);
    i0.ɵɵelementStart(5, "span", 25);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisableNext : true));
    i0.ɵɵadvance();
    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("Go to Next page ", ctx_r1.dataNavigator.isDisableNext ? ", Disabled" : "", "");
} }
function ListComponent_div_13_a_2_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "a", 42);
    i0.ɵɵlistener("click", function ListComponent_div_13_a_2_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngClass", ctx_r1.paginationclass)("textContent", ctx_r1.ondemandmessage);
} }
function ListComponent_div_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 39);
    i0.ɵɵelement(1, "nav", 40);
    i0.ɵɵtemplate(2, ListComponent_div_13_a_2_Template, 1, 2, "a", 41);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("hidden", !ctx_r1.showNavigation || ctx_r1.onDemandLoad && ctx_r1.dataNavigator.isDisableNext || ctx_r1.dataNavigator.dataSize <= ctx_r1.pagesize || !ctx_r1.dataNavigator.dataSize && !(ctx_r1.dataNavigator.datasource == null ? null : ctx_r1.dataNavigator.datasource.pagination == null ? null : ctx_r1.dataNavigator.datasource.pagination.next));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r1.onDemandLoad);
} }
function ListComponent_ng_template_14_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 52);
} }
function ListComponent_ng_template_14_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 53);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const groupObj_r12 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(groupObj_r12.data.length);
} }
function ListComponent_ng_template_14_li_0_li_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li", 54, 1);
    i0.ɵɵelementContainer(2, 31);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r13 = ctx.$implicit;
    const $index_r14 = ctx.index;
    const $first_r15 = ctx.first;
    const $last_r16 = ctx.last;
    const listItemRef_r17 = i0.ɵɵreference(1);
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r1.itemsPerRowClass, "");
    i0.ɵɵproperty("ngClass", listItemRef_r17.itemClass)("wmListItem", item_r13);
    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("group_" + listItemRef_r17.trackId, i0.ɵɵpureFunction6(9, _c5, item_r13, $index_r14, listItemRef_r17, $first_r15, $last_r16, listItemRef_r17.currentItemWidgets)))("ngTemplateOutletContext", i0.ɵɵpureFunction6(16, _c5, item_r13, $index_r14, listItemRef_r17, $first_r15, $last_r16, listItemRef_r17.currentItemWidgets));
} }
function ListComponent_ng_template_14_li_0_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 44)(1, "ul", 45)(2, "li", 46);
    i0.ɵɵlistener("click", function ListComponent_ng_template_14_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleHeaderClick($event)); });
    i0.ɵɵelementStart(3, "h4");
    i0.ɵɵtext(4);
    i0.ɵɵelementStart(5, "div", 47);
    i0.ɵɵtemplate(6, ListComponent_ng_template_14_li_0_i_6_Template, 1, 0, "i", 48)(7, ListComponent_ng_template_14_li_0_span_7_Template, 2, 1, "span", 49);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(8, "li", 50)(9, "ul");
    i0.ɵɵtemplate(10, ListComponent_ng_template_14_li_0_li_10_Template, 3, 23, "li", 51);
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const groupObj_r12 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.listclass);
    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c6, ctx_r1.collapsible));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("", groupObj_r12.key, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r1.collapsible);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.showcount);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r1.direction === "horizontal" ? "app-horizontal-list" : "", "");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", groupObj_r12.data)("ngForTrackBy", ctx_r1.trackByFn);
} }
function ListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ListComponent_ng_template_14_li_0_Template, 11, 13, "li", 43);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngForOf", ctx_r1.groupedData);
} }
const DEFAULT_CLS = 'app-livelist app-panel';
const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
class ListComponent extends StylableComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, cdRef, datePipe, app, appDefaults, ngZone, binditemclass, binddisableitem, binddataset, binddatasource, mouseEnterCB, mouseLeaveCB, statePersistence, paginationService, explicitContext) {
        let resolveFn = noop;
        const propsInitPromise = new Promise(res => resolveFn = res);
        super(inj, WIDGET_CONFIG, explicitContext, propsInitPromise);
        this.propsInitPromise = propsInitPromise;
        this.promiseResolverFn = resolveFn;
        styler(this.nativeElement, this, 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-' + generateGUId();
        // Updates pagination, filter, sort etc options for service and crud variables
        this._listenerDestroyers = [
            this.app.subscribe('check-state-persistence-options', options => {
                let dataSourceName = 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 = extractDataSourceName(this.binddatasource);
                }
                if (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 getClonedObject(this._items);
        }
        if (isEmpty(this._items)) {
            return {};
        }
        return getClonedObject(this._items[0]);
    }
    set selecteditem(items) {
        this._items.length = 0;
        this.deselectListItems();
        if (isArray(items)) {
            items.forEach(item => this.selectItem(item));
        }
        else {
            this.selectItem(items);
        }
        $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 (!isDefined(index)) {
            forEach(this.listItems.toArray(), (el) => {
                $target = get(el.currentItemWidgets, widgteName);
                if ($target) {
                    retVal.push($target);
                }
            });
            return retVal;
        }
        index = +index || 0;
        $target = get(this.listItems.toArray(), index);
        if ($target) {
            return [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 ListItemDirective) {
            return this.getListItemIndex(item);
        }
        else if (item) {
            return this.fieldDefs.findIndex((obj) => isEqual(obj, item));
        }
    }
    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(DataSource.Operation.IS_API_AWARE) && 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 (!isUndefined(totalEle)) {
                    this.noDataFound = totalEle === 0 ? true : false;
                }
                else { // totalelements is undefined
                    this.noDataFound = 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 ([DataSource.Operation.IS_API_AWARE, DataSource.Operation.IS_PAGEABLE, 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 = isArray(this.selecteditem) ? this.selecteditem.length : (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);
            }
        }
    }
    onPropertyChange(key, nv, ov) {
        if (key === 'dataset') {
            if (!nv && this.binddatasource && !this.datasource) {
                return;
            }
            this.onDataSetChange(nv);
        }
        else if (key === 'datasource') {
            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;
            }
            switchClass(this.nativeElement, nv, ov);
            this.onNavigationTypeChange(nv);
            if (this.dataNavigator) {
                this.dataNavigator.navigationClass = this.paginationclass;
            }
        }
        else if (key === 'itemsperrow') {
            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.dataNavigator.options = {
                maxResults: nv
            };
            this.dataNavigator.widget.maxResults = nv;
            this.dataNavigator.maxResults = 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 {
            super.onPropertyChange(key, nv, ov);
        }
    }
    onItemClick(evt, $listItem) {
        let selectCount;
        if (!$listItem.disableItem) {
            this.firstSelectedItem = this.firstSelectedItem || $listItem;
            // Setting selectCount value based number of items selected.
            selectCount = isArray(this.selecteditem) ? this.selecteditem.length : (isObject(this.selecteditem) ? 1 : 0);
            // Handling multiselect for mobile device
            if (this.multiselect && 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;
                }
            }
            $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 = noop;
        setTimeout(() => {
            this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME, this);
        }, 0);
        this._items = [];
        this.fieldDefs = [];
        this.reorderProps = {
            minIndex: null,
            maxIndex: null
        };
    }
    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 = handleHeaderClick;
                this.toggleAllHeaders = toggleAllHeaders.bind(undefined, this);
            }
            setListClass(this);
        });
        this.setupHandlers();
        const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
        styler($ul, this, APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
        if (this.enablereorder) {
            if ($ul) {
                $ul.setAttribute('aria-describedby', this.titleId);
            }
        }
        if (!this.enablereorder) {
            if ($ul) {
                $ul.removeAttribute('aria-describedby');
            }
        }
        if (isMobileApp() && $ul.querySelector('.app-list-item-action-panel')) {
            this._listAnimator = new ListAnimator(this);
        }
    }
    ngOnDestroy() {
        if (this._listAnimator && this._listAnimator.$btnSubscription) {
            this._listAnimator.$btnSubscription.unsubscribe();
        }
        this._listenerDestroyers.forEach(d => d && d());
        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 (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 (get(widgetState, 'pagination')) {
                options.options = options.options || {};
                options.options.page = widgetState.pagination;
            }
            if (get(widgetState, 'selectedItem')) {
                this._selectedItemsExist = true;
            }
        }
    }
    triggerWMEvent(eventName, item) {
        $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 ? 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 = NAVIGATION_TYPE.BASIC;
        this.showNavigation = true;
    }
    enableInlineNavigation() {
        this.navControls = NAVIGATION_TYPE.INLINE;
    }
    enableClassicNavigation() {
        this.navControls = NAVIGATION_TYPE.CLASSIC;
        this.showNavigation = true;
    }
    enablePagerNavigation() {
        this.navControls = NAVIGATION_TYPE.PAGER;
        this.showNavigation = true;
    }
    setNavigationTypeNone() {
        this.navControls = 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 NAVIGATION_TYPE.BASIC:
                this.enableBasicNavigation();
                break;
            case NAVIGATION_TYPE.INLINE:
                this.enableInlineNavigation();
                break;
            case NAVIGATION_TYPE.ADVANCED:
            case NAVIGATION_TYPE.CLASSIC:
                this.enableClassicNavigation();
                break;
            case NAVIGATION_TYPE.PAGER:
                this.enablePagerNavigation();
                break;
            case NAVIGATION_TYPE.NONE:
                this.setNavigationTypeNone();
                break;
            case NAVIGATION_TYPE.SCROLL:
                this.enableInfiniteScroll();
                break;
            case 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 = getOrderedDataset(this.fieldDefs, this.orderby);
        }
        if (this.groupby) {
            this.groupedData = 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;
        }
        $appDigest();
        this.listItems.setDirty();
    }
    onDataChange(newVal) {
        // Check for newVal is not empty
        if (!isEmpty(newVal)) {
            this.noDataFound = false;
            this.isDataChanged = true;
            if (this.datasource && this.datasource.execute(DataSource.Operation.IS_API_AWARE)) {
                // clone the the data in case of live and service variables to prevent the two-way binding for these variables.
                newVal = cloneDeep(newVal);
            }
            if (isObject(newVal) && !isArray(newVal)) {
                newVal = isEmpty(newVal) ? [] : [newVal];
            }
            if (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(DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
                newVal = this.datasource.execute(DataSource.Operation.LIST_RECORDS, {
                    'page': 1
                });
            }
            if (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 (get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none' && this._pageLoad) {
            const widgetState = this.statePersistence.getWidgetState(this);
            this._pageLoad = false;
            if (get(widgetState, 'pagination')) {
                this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
            }
            if (get(widgetState, 'selectedItem')) {
                this._selectedItemsExist = true;
            }
        }
        if (!this.dataNavigatorWatched) {
            if (this.navigation && this.navigation !== NAVIGATION_TYPE.NONE) {
                this.setupDataSource();
            }
            else {
                this.onDataChange(newVal);
            }
        }
        else if (this.navigation && this.navigation !== 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;
        $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 && !has(listModel, '_groupIndex')) {
                // If groupby is enabled, item contains _groupIndex property which should be excluded while comparing model.
                itemObj = clone(itemObj);
                delete itemObj._groupIndex;
            }
            if (isEqual(itemObj, listModel)) {
                return true;
            }
        }) || null;
    }
    updateSelectedItemsWidgets(statePersistenceTriggered) {
        let obj = {}, widgetState;
        const pageNum = 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 (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 {
                    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 (get(widgetState, 'selectedItem') && this.multiselect) {
                    if (!some(widgetState.selectedItem, obj)) {
                        widgetState.selectedItem.push(obj);
                    }
                }
                else {
                    widgetState.selectedItem = [obj];
                }
            }
        });
        if (this.getConfiguredState() !== 'none' && !statePersistenceTriggered) {
            if (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 && has(item, '_groupIndex')) {
                // If groupby is enabled, item contains _groupIndex property which should be excluded from selecteditem.
                item = clone(item);
                delete item._groupIndex;
            }
            if ($listItem.isActive) {
                this._items = pullAllWith(this._items, [item], 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.
            $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 (get(widgetState, 'selectedItem')) {
                this._selectedItemsExist = false;
                const selectedItemsLength = isArray(this.selecteditem) ? this.selecteditem.length : toNumber(!isEmpty(this.selecteditem));
                const currentPage = 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 = 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) {
            const smoothScrollEl = this.$element.closest('[wmsmoothscroll]');
            // if smoothscroll is set to false, then native scroll has to be applied
            // otherwise smoothscroll events will be binded.
            if (isMobileApp() && smoothScrollEl.length && smoothScrollEl.attr('wmsmoothscroll') === 'true') {
                this.paginationService.bindIScrollEvt(this, DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
            }
            else {
                // 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 (isMobile() && modalBody.length && listHt > modalHt) {
                    this.$element.css('height', modalHt + 'px');
                }
                this.paginationService.bindScrollEvt(this, '> ul', DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
            }
        }
        this.isDataChanged = false;
    }
    setupHandlers() {
        this.listItems.changes.subscribe(listItems => {
            this.onListRender(listItems);
            this.cdRef.detectChanges();
        });
        // handle click event in capturing phase.
        this.nativeElement.querySelector('ul.app-livelist-container').addEventListener('click', ($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);
        }, 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', 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 = min([newIndex, oldIndex]);
        const maxIndex = max([newIndex, oldIndex]);
        const draggedItem = 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 = min([minIndex, this.reorderProps.minIndex]);
            this.reorderProps.maxIndex = 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 = isMobileApp() ? {} : {
            appendTo: appendTo,
        };
        const $el = $(this.nativeElement);
        this.$ulEle = $el.find('.app-livelist-container');
        configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
        this.$ulEle.droppable({ 'accept': '.app-list-item' });
        if (isMobileApp()) {
            this.$ulEle.sortable('disable');
            this.$ulEle.on('touchstart', function (event) {
                let self = this;
                if (!self.touching) {
                    if (self.touched) {
                        clearTimeout(self.touched);
                    }
                    setTimeout(() => {
                        //Prevent context menu on mobile (IOS/ANDROID)
                        if (event.cancelable) {
                            event.preventDefault();
                        }
                    }, 50);
                    self.touched = setTimeout(() => {
                        $(event.currentTarget).addClass('no-selection');
                        //Enable draggable
                        $(event.currentTarget).sortable('enable');
                        //Set internal flag
                        self.touching = true;
                        //trigger touchstart again to enable draggable through touch punch
                        $(self).trigger(event);
                        //Choose preferred duration for taphold
                    }, 350);
                }
            }).on('touchend', function (event) {
                this.touching = false;
                $(event.currentTarget).removeClass('no-selection');
                //Disable draggable to enable default behaviour
                $(event.currentTarget).sortable('disable');
                clearTimeout(this.touched);
            }).on('touchmove', function () {
                clearTimeout(this.touched);
            });
        }
    }
    // 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 (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) {
            // Triggered on click of add action
            $addItem.addEventListener('click', evt => {
                this.create();
            });
        }
    }
    static { this.ɵfac = function ListComponent_Factory(t) { return new (t || ListComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToDatePipe), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵinjectAttribute('itemclass.bind'), i0.ɵɵinjectAttribute('disableitem.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('mouseenter.event'), i0.ɵɵinjectAttribute('mouseleave.event'), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent, selectors: [["div", "wmList", ""]], contentQueries: function ListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
            i0.ɵɵcontentQuery(dirIndex, ButtonComponent, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listLeftActionTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listRightActionTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.btnComponents = _t);
        } }, viewQuery: function ListComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(PaginationComponent, 5);
            i0.ɵɵviewQuery(ListItemDirective, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dataNavigator = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listItems = _t);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(ListComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c3, decls: 16, vars: 19, consts: [["groupedListTemplate", ""], ["listItemRef", "listItemRef"], ["class", "panel-heading", 4, "ngIf"], ["class", "app-datanavigator", "aria-label", "Page navigation", 4, "ngIf"], ["aria-live", "polite", "aria-atomic", "true", "class", "sr-only", 4, "ngIf"], ["class", "sr-only", 3, "id", 4, "ngIf"], ["aria-live", "assertive", "class", "sr-only", 4, "ngIf"], ["role", "list", 3, "keydown.enter", "keydown.space", "keydown.arrowup", "keydown.arrowdown", "keydown.arrowleft", "keydown.arrowright", "keydown.shift.arrowup", "keydown.shift.arrowdown", "keydown.shift.arrowleft", "keydown.shift.arrowright", "hidden"], [3, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet"], ["class", "no-data-msg", 3, "textContent", 4, "ngIf"], ["class", "loading-data-msg", 4, "ngIf"], ["class", "app-datanavigator", 4, "ngIf"], ["class", "panel-footer", 3, "hidden", 4, "ngIf"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], ["aria-hidden", "true", 3, "hidden"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["aria-label", "Page navigation", 1, "app-datanavigator"], [1, "pager"], [1, "previous", 3, "ngClass"], ["href", "javascript:void(0);", 3, "click"], ["aria-hidden", "true", 1, "wi", "wi-chevron-left"], [1, "sr-only"], ["aria-live", "polite", "aria-atomic", "true", 1, "sr-only"], [1, "sr-only", 3, "id"], ["aria-live", "assertive", 1, "sr-only"], ["role", "listitem", 3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf"], ["role", "listitem", 3, "ngClass", "wmListItem"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"], [1, "no-data-msg", 3, "textContent"], [1, "loading-data-msg"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", "fa-spin", 3, "ngClass"], [1, "loading-text", 3, "textContent"], [1, "app-datanavigator"], [1, "next", 3, "ngClass"], ["aria-hidden", "true", 1, "wi", "wi-chevron-right"], [1, "panel-footer", 3, "hidden"], ["wmPagination", "", "navigationalign.bind", "navigationalign", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks", "show.bind", "!onDemandLoad", "paginationchange.event", "beforePaginationChange($event, $index)"], ["href", "javascript:void(0);", "class", "app-button btn btn-block", 3, "ngClass", "textContent", "click", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-button", "btn", "btn-block", 3, "click", "ngClass", "textContent"], ["class", "app-list-item-group clearfix", 4, "ngFor", "ngForOf"], [1, "app-list-item-group", "clearfix"], [1, "list-group", "item-group", 3, "ngClass"], [1, "app-list-item-header", "list-item", "list-group-header", 3, "click", "ngClass"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 4, "ngIf"], ["class", "label label-default", 4, "ngIf"], [1, "list-group-container"], [3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "app-icon", "wi", "action", "wi-chevron-up"], [1, "label", "label-default"], [3, "ngClass", "wmListItem"]], template: function ListComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵtemplate(0, ListComponent_div_0_Template, 7, 6, "div", 2)(1, ListComponent_div_1_Template, 7, 6, "div", 3)(2, ListComponent_div_2_Template, 2, 1, "div", 4);
            i0.ɵɵelementStart(3, "div");
            i0.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 5)(5, ListComponent_div_5_Template, 2, 1, "div", 6);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "ul", 7);
            i0.ɵɵlistener("keydown.enter", function ListComponent_Template_ul_keydown_enter_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "select")); })("keydown.space", function ListComponent_Template_ul_keydown_space_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "space")); })("keydown.arrowup", function ListComponent_Template_ul_keydown_arrowup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowdown", function ListComponent_Template_ul_keydown_arrowdown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.arrowleft", function ListComponent_Template_ul_keydown_arrowleft_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowright", function ListComponent_Template_ul_keydown_arrowright_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.shift.arrowup", function ListComponent_Template_ul_keydown_shift_arrowup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowdown", function ListComponent_Template_ul_keydown_shift_arrowdown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); })("keydown.shift.arrowleft", function ListComponent_Template_ul_keydown_shift_arrowleft_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowright", function ListComponent_Template_ul_keydown_shift_arrowright_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); });
            i0.ɵɵtemplate(7, ListComponent_ng_template_7_Template, 1, 1, "ng-template", 8);
            i0.ɵɵelementContainer(8, 9)(9, 9);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(10, ListComponent_div_10_Template, 1, 1, "div", 10)(11, ListComponent_div_11_Template, 6, 2, "div", 11)(12, ListComponent_div_12_Template, 7, 6, "div", 12)(13, ListComponent_div_13_Template, 3, 2, "div", 13)(14, ListComponent_ng_template_14_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            const groupedListTemplate_r18 = i0.ɵɵreference(15);
            i0.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.enablereorder);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.listItems && ctx.enablereorder && ctx.currentIndex);
            i0.ɵɵadvance();
            i0.ɵɵclassMapInterpolate2("app-livelist-container clearfix ", ctx.direction === "horizontal" ? "app-horizontal-list" : "", " ", ctx.listclass, "");
            i0.ɵɵproperty("hidden", ctx.noDataFound && !ctx.variableInflight);
            i0.ɵɵattribute("tabindex", ctx.tabindex);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r18);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngTemplateOutlet", ctx.listLeftActionTemplate);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngTemplateOutlet", ctx.listRightActionTemplate);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.noDataFound && !ctx.variableInflight);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.variableInflight && !ctx.pulltorefresh);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.navigation !== "None");
        } }, encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
        type: Component,
        args: [{ selector: 'div[wmList]', providers: [
                    provideAsWidgetRef(ListComponent)
                ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" aria-hidden=\"true\" [hidden]=\"!iconclass\"></i>\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<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\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<div *ngIf=\"navigation === 'Inline' && !noDataFound\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class=\"sr-only\" *ngIf=\"enablereorder\">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live=\"assertive\" *ngIf=\"listItems && enablereorder && currentIndex\" class=\"sr-only\" >\n        {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\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    <ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n        <li *ngFor=\"let item of fieldDefs; index as $index; first as $first; last as $last;\" 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, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                          [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n<div class=\"no-data-msg\" *ngIf=\"noDataFound && !variableInflight\" [textContent]=\"nodatamessage\"></div>\n\n<div class=\"loading-data-msg\" *ngIf=\"variableInflight && !pulltorefresh\">\n    <span>\n        <i class=\"app-icon panel-icon fa-spin\" aria-hidden=\"true\" [ngClass]=\"loadingicon\"></i>\n        <span class=\"sr-only\">Loading</span>\n        <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n</div>\n\n<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\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<div class=\"panel-footer\" *ngIf=\"navigation !== 'None'\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!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    <a *ngIf=\"onDemandLoad\" 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</div>\n\n<!--This template will be displayed when groupby is specified-->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData; let groupIndex = index;\" class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\">\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                    <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\"></i>\n                    <span *ngIf=\"showcount\" class=\"label label-default\">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <li class=\"list-group-container\">\n                <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\">\n                    <li *ngFor=\"let item of groupObj.data; index as $index; trackBy: trackByFn; first as $first; last as $last;\" [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, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                                      [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                    </li>\n                </ul>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
    }], () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.ToDatePipe }, { type: i2.App }, { type: i2.AppDefaults }, { type: i0.NgZone }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['itemclass.bind']
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['disableitem.bind']
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['dataset.bind']
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['datasource.bind']
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['mouseenter.event']
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['mouseleave.event']
            }] }, { type: i2.StatePersistence }, { type: i2.PaginationService }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { listTemplate: [{
            type: ContentChild,
            args: ['listTemplate']
        }], listLeftActionTemplate: [{
            type: ContentChild,
            args: ['listLeftActionTemplate']
        }], listRightActionTemplate: [{
            type: ContentChild,
            args: ['listRightActionTemplate']
        }], btnComponents: [{
            type: ContentChildren,
            args: [ButtonComponent]
        }], dataNavigator: [{
            type: ViewChild,
            args: [PaginationComponent]
        }], listItems: [{
            type: ViewChildren,
            args: [ListItemDirective]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 91 }); })();

const components = [
    ListComponent,
    ListItemDirective
];
class ListModule {
    static { this.ɵfac = function ListModule_Factory(t) { return new (t || ListModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ListModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
            PaginationModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListModule, [{
        type: NgModule,
        args: [{
                imports: [
                    CommonModule,
                    PaginationModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ListModule, { declarations: [ListComponent,
        ListItemDirective], imports: [CommonModule,
        PaginationModule,
        WmComponentsModule], exports: [ListComponent,
        ListItemDirective] }); })();
i0.ɵɵsetComponentScope(ListComponent, [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$1.PaginationComponent, i1.TextContentDirective, ListItemDirective], []);

/**
 * Generated bundle index. Do not edit.
 */

export { ListComponent, ListItemDirective, ListModule };
//# sourceMappingURL=index.mjs.map
