@syncfusion/ej2-lists - npm Package Compare versions

Comparing version 15.4.26 to 16.1.24

CHANGELOG.md

@@ -7,2 +7,10 @@ # Changelog
 
+#### New Features
+
+- The `checklist` feature implemented, which is used to select multiple items in ListView.
+
+## 15.4.26-preview (2018-01-23)
+
+### ListView
+
 #### Bug Fixes
@@ -9,0 +17,0 @@

dist/ej2-lists.umd.min.js

 /*!
 *  filename: ej2-lists.umd.min.js
-*  version : 15.4.26
+*  version : 16.1.24
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -11,3 +11,3 @@ *  Use of this code is subject to the terms of our license.
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-data")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-data"],t):t(e.ej={},e.ej2Base,e.ej2Data)}(this,function(e,t,i){"use strict";function s(e,i){var s,r={};if(t.isNullOrUndefined(e))return e;if("string"==typeof e||"number"==typeof e)return e;if(t.isNullOrUndefined(e.isHeader))for(var n=0,l=Object.keys(i);n<l.length;n++){var o=l[n];if(!t.isNullOrUndefined(i[o])&&"string"==typeof i[o]){var a=i[o].split("."),d=a.length>1?a[0]:i[o];t.isNullOrUndefined(e[d])||(s=t.getValue(i[o],e),t.isNullOrUndefined(s)||(r[i[o]]=s))}}else!t.isNullOrUndefined(e.isHeader)&&e.isHeader&&(r=e);return r}e.cssClass={li:"e-list-item",ul:"e-list-parent e-ul",group:"e-list-group-item",icon:"e-list-icon",text:"e-list-text",check:"e-list-check",checked:"e-checked",selected:"e-selected",expanded:"e-expanded",textContent:"e-text-content",hasChild:"e-has-child",level:"e-level",url:"e-list-url",collapsible:"e-icon-collapsible",disabled:"e-disabled",image:"e-list-img",iconWrapper:"e-icon-wrapper"},function(r){function n(e,t,i){return L(l(e,t,i),null,i)}function l(i,s,r){var n=[],l=t.extend({},O,r);e.cssClass=g(l.moduleName);for(var o=y(),a=0;a<i.length;a++)if(!t.isNullOrUndefined(i[a])){var d=void 0;if(l.itemCreating&&"function"==typeof l.itemCreating){var c={dataSource:i,curData:i[a],text:i[a],options:l};l.itemCreating(c)}if(d=s?v(i[a],null,null,[],null,o,a,r):S(i[a],null,null,r),l.itemCreated&&"function"==typeof l.itemCreated){c={dataSource:i,curData:i[a],text:i[a],item:d,options:l};l.itemCreated(c)}n.push(d)}return n}function o(i,n,l,o){var d=t.extend({},O,n);e.cssClass=g(d.moduleName);var c,h=t.extend({},r.defaultMappedFields,d.fields),u=t.extend({},C,d.ariaAttributes);l&&(u.level=l);var f,b=[];Object.keys(i).length&&!p(i).item.hasOwnProperty(h.id)&&(c=y());for(var L=0;L<i.length;L++){var I=s(i[L],h);if(!t.isNullOrUndefined(i[L])){if(d.itemCreating&&"function"==typeof d.itemCreating){var w={dataSource:i,curData:i[L],text:I[h.text],options:d,fields:h};d.itemCreating(w)}var x=i[L];Object.keys(i).length&&I.hasOwnProperty(h.id)&&!t.isNullOrUndefined(I[h.id])&&(c=I.id);var D=[];if(d.showCheckBox&&D.push(t.createElement("input",{className:e.cssClass.check,attrs:{type:"checkbox"}})),!0===o)d.showIcon&&I.hasOwnProperty(h.iconCss)&&(t.isNullOrUndefined(I[h.iconCss])||D.push(t.createElement("span",{className:e.cssClass.icon+" "+I[h.iconCss]}))),f=v(x,h,d.itemClass,D,!(!x.hasOwnProperty("isHeader")||!x.isHeader),c,L,n);else{if((f=S(x,h,d.itemClass,n)).classList.add(e.cssClass.level+"-"+u.level),f.setAttribute("aria-level",u.level.toString()),I.hasOwnProperty(h.tooltip)&&f.setAttribute("title",I[h.tooltip]),I.hasOwnProperty(h.htmlAttributes)&&I[h.htmlAttributes]&&m(f,I[h.htmlAttributes]),I.hasOwnProperty(h.enabled)&&!1===I[h.enabled]&&f.classList.add(e.cssClass.disabled),I.hasOwnProperty(h.isVisible)&&!1===I[h.isVisible]&&(f.style.display="none"),I.hasOwnProperty(h.imageUrl)&&!t.isNullOrUndefined(I[h.imageUrl])){var N={src:I[h.imageUrl]};I.hasOwnProperty(h.imageUrl)&&t.merge(N,I[h.imageAttributes]),t.prepend([t.createElement("img",{className:e.cssClass.image,attrs:N})],f.firstElementChild)}d.showIcon&&I.hasOwnProperty(h.iconCss)&&!d.template&&(t.isNullOrUndefined(I[h.iconCss])||t.prepend([t.createElement("div",{className:e.cssClass.icon+" "+I[h.iconCss]})],f.firstElementChild)),D.length&&t.prepend(D,f.firstElementChild),function(i,r,n,l,o,d){var c=s(i,r),h=c[r.child]||[],u=c[r.hasChildren];if(h.length&&(u=!0,o.classList.add(e.cssClass.hasChild),l.processSubChild)){var p=a(h,l,++d);o.appendChild(p)}if(l.expandCollapse&&u&&!l.template){o.firstElementChild.classList.contains(e.cssClass.textContent)&&o.firstElementChild.classList.add(e.cssClass.iconWrapper);var m="left"===l.expandIconPosition?t.prepend:t.append;m([t.createElement("div",{className:"e-icons "+l.expandIconClass})],o.querySelector("."+e.cssClass.textContent))}}(x,h,0,d,f,u.level)}if(d.itemCreated&&"function"==typeof d.itemCreated){w={dataSource:i,curData:i[L],text:I[h.text],item:f,options:d,fields:h};d.itemCreated(w)}b.push(f)}}return b}function a(e,i,s,r){var n=t.extend({},O,i);return L(o(e,i,s,r),n.listClass,i)}function d(e,t){if(t&&e){return Array.prototype.slice.call(t).indexOf(e)}}function c(e,t,s){return void 0===s&&(s=new i.Query),"Ascending"===e?s.sortBy(t,"ascending",!0):"Descending"===e&&s.sortBy(t,"descending",!0),s}function h(e,t){return new i.DataManager(e).executeLocal(t)}function u(e,i){var s=t.extend({},O,i),n=t.extend({},r.defaultMappedFields,s.fields),l=e.cloneNode(!0),o=[];l.classList.add("json-parent");var a=l.querySelectorAll(".json-parent>li");l.classList.remove("json-parent");for(var d=0;d<a.length;d++){for(var c=a[d],h=c.querySelector("a"),p=c.querySelector("ul"),m={},v=h?h.childNodes:c.childNodes,g=Object.keys(v),b=0;b<v.length;b++)v[Number(g[b])].hasChildNodes()||(m[n.text]=v[Number(g[b])].textContent);m[n.id]=y();var S=f(c);Object.keys(S).length&&(m[n.htmlAttributes]=S),h&&(S=f(h),Object.keys(S).length&&(m[n.urlAttributes]=S)),p&&(m[n.child]=u(p,i)),o.push(m)}return o}function p(e){for(var i={typeof:null,item:null},s=0;s<e.length;s++)if(!t.isNullOrUndefined(e[s]))return i={typeof:typeof e[s],item:e[s]};return i}function m(e,i){var s={};t.merge(s,i),s.class&&(t.addClass([e],s.class.split(" ")),delete s.class),t.attributes(e,s)}function f(e){for(var t={},i=e.attributes,s=0;s<i.length;s++)t[i[s].nodeName]=i[s].nodeValue;return t}function y(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}function v(i,r,n,l,o,a,d,c){var h,u=t.extend({},O,c),p=t.extend({},C,u.ariaAttributes),f=i,y=i,v=s(i,r);"string"!=typeof i&&"number"!=typeof i&&(h=i,f=v[r.text]||"",y=v[r.value]);var g;g=t.isNullOrUndefined(h)||t.isNullOrUndefined(v[r.id])||""===v[r.id]?a+"-"+d:a;var S=t.createElement("li",{className:(!0===o?e.cssClass.group:e.cssClass.li)+" "+(t.isNullOrUndefined(n)?"":n),id:g,attrs:""!==p.groupItemRole&&""!==p.itemRole?{role:!0===o?p.groupItemRole:p.itemRole}:{}});return h&&v.hasOwnProperty(r.enabled)&&"false"===v[r.enabled].toString()&&S.classList.add(e.cssClass.disabled),o?S.innerText=f:(t.isNullOrUndefined(y)||S.setAttribute("data-value",y),S.setAttribute("role","option"),h&&v.hasOwnProperty(r.htmlAttributes)&&v[r.htmlAttributes]&&m(S,v[r.htmlAttributes]),l.length&&t.append(l,S),h&&v.hasOwnProperty(r.url)&&v[r.url]?S.appendChild(b(h,r,f)):S.appendChild(document.createTextNode(f))),S}function g(e){return{li:"e-"+e+"-item",ul:"e-"+e+"-parent e-ul",group:"e-"+e+"-group-item",icon:"e-"+e+"-icon",text:"e-"+e+"-text",check:"e-"+e+"-check",checked:"e-checked",selected:"e-selected",expanded:"e-expanded",textContent:"e-text-content",hasChild:"e-has-child",level:"e-level",url:"e-"+e+"-url",collapsible:"e-icon-collapsible",disabled:"e-disabled",image:"e-"+e+"-img",iconWrapper:"e-icon-wrapper"}}function b(i,r,n){var l=s(i,r),o={href:l[r.url]};l.hasOwnProperty(r.urlAttributes)&&l[r.urlAttributes]&&t.merge(o,l[r.urlAttributes]);var a=t.createElement("a",{className:e.cssClass.text+" "+e.cssClass.url,innerHTML:n});return m(a,o),a}function S(i,r,n,l){var o,a,d,c,h=t.extend({},O,l),u=t.extend({},C,h.ariaAttributes),p=i;"string"!=typeof i&&(d=i,p=(c=s(i,r))[r.text]||"",o=c[r.id],a=!(!i.hasOwnProperty("isHeader")||!i.isHeader));var m=t.createElement("li",{className:(!0===a?e.cssClass.group:e.cssClass.li)+" "+(t.isNullOrUndefined(n)?"":n),attrs:""!==u.groupItemRole&&""!==u.itemRole?{role:!0===a?u.groupItemRole:u.itemRole}:{}});if(t.isNullOrUndefined(o)?m.setAttribute("data-uid",y()):m.setAttribute("data-uid",o),a&&l&&l.groupTemplate){var f=t.compile(l.groupTemplate);t.append(f(i),m)}else if(!a&&l&&l.template){f=t.compile(l.template);t.append(f(i),m)}else{var v=t.createElement("div",{className:e.cssClass.textContent,attrs:""!==u.wrapperRole?{role:u.wrapperRole}:{}});d&&c.hasOwnProperty(r.url)&&c[r.url]?v.appendChild(b(d,r,p)):v.appendChild(t.createElement("span",{className:e.cssClass.text,innerHTML:p,attrs:""!==u.itemText?{role:u.itemText}:{}})),m.appendChild(v)}return m}function L(i,s,r){var n=t.extend({},O,r),l=t.extend({},C,n.ariaAttributes);e.cssClass=g(n.moduleName);var o=t.createElement("ul",{className:e.cssClass.ul+" "+(t.isNullOrUndefined(s)?"":s),attrs:""!==l.listRole?{role:l.listRole}:{}});return t.append(i,o),o}r.defaultMappedFields={id:"id",text:"text",url:"url",value:"value",isChecked:"isChecked",enabled:"enabled",expanded:"expanded",selected:"selected",iconCss:"iconCss",child:"child",isVisible:"isVisible",hasChildren:"hasChildren",tooltip:"tooltip",htmlAttributes:"htmlAttributes",urlAttributes:"urlAttributes",imageAttributes:"imageAttributes",imageUrl:"imageUrl",groupBy:null};var C={level:1,listRole:"presentation",itemRole:"presentation",groupItemRole:"group",itemText:"list-item",wrapperRole:"presentation"},O={showCheckBox:!1,showIcon:!1,expandCollapse:!1,fields:r.defaultMappedFields,ariaAttributes:C,listClass:"",itemClass:"",processSubChild:!1,sortOrder:"None",template:null,groupTemplate:null,expandIconClass:"e-icon-collapsible",moduleName:"list",expandIconPosition:"right"};r.createList=function(e,i,s){var r=t.extend({},O,i),l=t.extend({},C,r.ariaAttributes),o=p(e).typeof;return"string"===o||"number"===o?n(e,s,i):a(e,i,l.level,s)},r.createListFromArray=n,r.createListItemFromArray=l,r.createListItemFromJson=o,r.createListFromJson=a,r.getSiblingLI=function(i,s,r){if(e.cssClass=g(O.moduleName),i&&i.length){var n,l,o=Array.prototype.slice.call(i);for(n=o[(l=s?d(s,o):!0===r?o.length:-1)+(!0===r?-1:1)];n&&(!t.isVisible(n)||n.classList.contains(e.cssClass.disabled));)n=o[l+=!0===r?-1:1];return n}},r.indexOf=d,r.groupDataSource=function(e,t,s){void 0===s&&(s="None");var r=(new i.Query).group(t.groupBy),n=h(e,r=c(s,"key",r));e=[];for(var l=0;l<n.length;l++){var o=n[l].items,a={};a[t.text]=n[l].key,a.isHeader=!0,a.items=o,e.push(a);for(var d=0;d<o.length;d++)e.push(o[d])}return e},r.addSorting=c,r.getDataSource=h,r.createJsonFromElement=u,r.renderContentTemplate=function(i,r,n){e.cssClass=g(O.moduleName);for(var l=t.createElement("ul",{className:e.cssClass.ul,attrs:{role:"presentation"}}),o=t.compile(i),a=[],d=y(),c=0;c<r.length;c++){var h=s(r[c],n),u=r[c],p=u.isHeader,m=t.createElement("li",{id:d+"-"+c,className:p?e.cssClass.group:e.cssClass.li,attrs:{role:"presentation"}});if(p)m.innerText=h[n.text];else{var f="string"==typeof u||"number"==typeof u?u:h[n.value];t.append(o(u),m),m.setAttribute("data-value",f),m.setAttribute("role","option")}a.push(m)}return t.append(a,l),l},r.renderGroupTemplate=function(e,i,s,r){for(var n=t.compile(e),l=s.groupBy,o={},a=0,d=r;a<d.length;a++){var c=d[a];o[l]=c.textContent,c.innerHTML="",t.append(n(o),c)}return r},r.generateUL=L,r.generateIcon=function(i,s,r){var n=t.extend({},O,r);return t.extend({},C,n.ariaAttributes),e.cssClass=g(n.moduleName),("left"===n.expandIconPosition?t.prepend:t.append)([t.createElement("div",{className:"e-icons "+n.expandIconClass+" "+(t.isNullOrUndefined(s)?"":s)})],i.querySelector("."+e.cssClass.textContent)),i}}(e.ListBase||(e.ListBase={}));var r=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function s(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}}(),n=function(e,t,i,s){var r,n=arguments.length,l=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(r=e[o])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l},l={None:[],SlideLeft:["SlideRightOut","SlideLeftOut","SlideLeftIn","SlideRightIn"],SlideDown:["SlideTopOut","SlideBottomOut","SlideBottomIn","SlideTopIn"],Zoom:["FadeOut","FadeZoomOut","FadeZoomIn","FadeIn"],Fade:["FadeOut","FadeOut","FadeIn","FadeIn"]},o={None:[],SlideLeft:["SlideLeftOut","SlideRightOut","SlideRightIn","SlideLeftIn"],SlideDown:["SlideBottomOut","SlideTopOut","SlideTopIn","SlideBottomIn"],Zoom:["FadeZoomOut","FadeOut","FadeIn","FadeZoomIn"],Fade:["FadeOut","FadeOut","FadeIn","FadeIn"]},a="e-listview",d="e-hover",c="e-active",h="e-focused",u="e-list-parent",p="e-list-item",m="e-list-group-item",f="e-has-child",y="e-list-header",v="e-headertext",g="e-text",b="e-disabled",S="e-content",L="e-icons",C="e-icon-back",O=function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return r(i,e),n([t.Property("id")],i.prototype,"id",void 0),n([t.Property("text")],i.prototype,"text",void 0),n([t.Property("isChecked")],i.prototype,"isChecked",void 0),n([t.Property("isVisible")],i.prototype,"isVisible",void 0),n([t.Property("enabled")],i.prototype,"enabled",void 0),n([t.Property("iconCss")],i.prototype,"iconCss",void 0),n([t.Property("child")],i.prototype,"child",void 0),n([t.Property("tooltip")],i.prototype,"tooltip",void 0),n([t.Property("groupBy")],i.prototype,"groupBy",void 0),n([t.Property("text")],i.prototype,"sortBy",void 0),n([t.Property("htmlAttributes")],i.prototype,"htmlAttributes",void 0),n([t.Property("tableName")],i.prototype,"tableName",void 0),i}(t.ChildProperty),I=function(I){function w(e,i){var s=I.call(this,e,i)||this;return s.curDSLevel=[],s.curViewDS=[],s.keyConfigs={moveDown:"downarrow",moveUp:"uparrow",back:"backspace",home:"home",select:"enter",end:"end",tab:"tab"},s.animateOptions={},s.aniObj=new t.Animation(s.animateOptions),s}return r(w,I),w.prototype.onPropertyChanged=function(e,t){for(var i=0,s=Object.keys(e);i<s.length;i++){switch(s[i]){case"htmlAttributes":this.setHTMLAttribute();break;case"cssClass":this.setCSSClass(t.cssClass);break;case"enable":this.setEnable();break;case"width":case"height":this.setSize();break;case"enableRtl":this.setEnableRTL();break;case"fields":this.listBaseOption.fields=this.fields.properties,this.reRender();break;case"headerTitle":this.curDSLevel.length||this.header(this.headerTitle,!1);break;case"showHeader":this.header(this.headerTitle,!1);break;case"dataSource":this.reRender();break;case"sortOrder":case"showIcon":this.listBaseOption.showIcon=this.showIcon,this.curViewDS=this.getSubDS(),this.resetCurrentList()}}},w.prototype.setHTMLAttribute=function(){Object.keys(this.htmlAttributes).length&&t.attributes(this.element,this.htmlAttributes)},w.prototype.setCSSClass=function(e){this.cssClass&&t.addClass([this.element],this.cssClass.split(" ")),e&&t.removeClass([this.element],e.split(" "))},w.prototype.setSize=function(){this.element.style.height=t.formatUnit(this.height),this.element.style.width=t.formatUnit(this.width)},w.prototype.setEnable=function(){this.enableElement(this.element,this.enable)},w.prototype.setEnableRTL=function(){this.enableRtl?this.element.classList.add("e-rtl"):this.element.classList.remove("e-rtl")},w.prototype.enableElement=function(e,t){t?e.classList.remove(b):e.classList.add(b)},w.prototype.header=function(e,i){if(void 0===this.headerEle&&this.showHeader){this.headerEle=t.createElement("div",{className:y});var s=t.createElement("span",{className:v,innerHTML:this.headerTitle}),r=t.createElement("div",{className:g,innerHTML:s.outerHTML}),n=t.createElement("div",{className:L+" "+C+" e-but-back",attrs:{style:"display:none;"}});this.headerEle.appendChild(n),this.headerEle.appendChild(r),this.element.classList.add("e-has-header"),t.prepend([this.headerEle],this.element)}else if(this.headerEle)if(this.showHeader){this.headerEle.style.display="";r=this.headerEle.querySelector("."+v),n=this.headerEle.querySelector("."+C);r.innerHTML=e,n.style.display=!0===i?"":"none"}else this.headerEle.style.display="none"},w.prototype.switchView=function(e,t,i){var s=this;if(e&&t){var r=e.style.position,n="hidden"!==this.element.style.overflow?this.element.style.overflow:"";e.style.position="absolute",e.classList.add("e-view");var a=void 0,d=this.animation.duration;if(this.animation.effect)a=this.enableRtl?o[this.animation.effect]:l[this.animation.effect];else{a=l.SlideLeft,i=this.enableRtl,d=0}this.element.style.overflow="hidden",this.aniObj.animate(e,{name:!0===i?a[0]:a[1],duration:d,timingFunction:this.animation.easing,end:function(t){e.style.display="none",s.element.style.overflow=n,e.style.position=r,e.classList.remove("e-view")}}),t.style.display="",this.aniObj.animate(t,{name:!0===i?a[2]:a[3],duration:d,timingFunction:this.animation.easing,end:function(){s.trigger("actionComplete")}}),this.curUL=t}},w.prototype.preRender=function(){this.listBaseOption={template:this.template,groupTemplate:this.groupTemplate,expandCollapse:!0,listClass:"",ariaAttributes:{itemRole:"listitem",listRole:"list",itemText:"",groupItemRole:"group",wrapperRole:"presentation"},fields:this.fields.properties,sortOrder:this.sortOrder,showIcon:this.showIcon}},w.prototype.clickHandler=function(e){var i=e.target,s=i.classList;if(s.contains(C)||s.contains(v))this.back();else{var r=t.closest(i.parentNode,"."+p);null===r&&(r=i),this.setSelectLI(r,e)}},w.prototype.hoverHandler=function(e){var i=t.closest(e.target.parentNode,"."+p);this.setHoverLI(i)},w.prototype.leaveHandler=function(e){this.removeHover()},w.prototype.homeKeyHandler=function(e,t){var i=this.curUL.querySelectorAll("."+p),s=this.curUL.querySelector("."+h)||this.curUL.querySelector("."+c);s&&(s.classList.remove(h),s.classList.remove(c));var r=t?i.length-1:0;i[r].classList.contains(f)?i[r].classList.add(h):this.setSelectLI(i[r],e)},w.prototype.arrowKeyHandler=function(i,s){var r,n;!t.isNullOrUndefined(this.curUL.querySelector("."+f))?(n=this.curUL.querySelector("."+h)||this.curUL.querySelector("."+c),r=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+p),n,s),t.isNullOrUndefined(r)||(n&&(n.classList.remove(h),n.classList.remove(c)),r.classList.contains(f)?r.classList.add(h):this.setSelectLI(r,i))):(n=this.curUL.querySelector("."+c),r=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+p),n,s),this.setSelectLI(r,i))},w.prototype.enterKeyHandler=function(e){var i=!t.isNullOrUndefined(this.curUL.querySelector("."+f)),s=this.curUL.querySelector("."+h);i&&s&&(s.classList.remove(h),this.setSelectLI(s,e))},w.prototype.keyActionHandler=function(e){switch(e.preventDefault(),e.action){case"home":this.homeKeyHandler(e);break;case"end":this.homeKeyHandler(e,!0);break;case"moveDown":this.arrowKeyHandler(e);break;case"moveUp":this.arrowKeyHandler(e,!0);break;case"select":this.enterKeyHandler(e);break;case"back":this.back();break;case"tab":this.tabFocus(e)}},w.prototype.swipeActionHandler=function(e){"Right"===e.swipeDirection&&this.back()},w.prototype.focusout=function(){var e=this.curUL.querySelector("."+h),t=this.curUL.querySelector("[aria-selected = true]");e&&(e.classList.remove(h),t&&t.classList.add(c))},w.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(this.element,"mouseover",this.hoverHandler,this),t.EventHandler.add(this.element,"mouseout",this.leaveHandler,this),t.EventHandler.add(this.element,"focusout",this.focusout,this),this.keyboardModule=new t.KeyboardEvents(this.element,{keyAction:this.keyActionHandler.bind(this),keyConfigs:this.keyConfigs}),this.touchModule=new t.Touch(this.element,{swipe:this.swipeActionHandler.bind(this)})},w.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.element,"mouseover",this.hoverHandler),t.EventHandler.remove(this.element,"mouseout",this.leaveHandler),this.keyboardModule.destroy(),this.touchModule.destroy()},w.prototype.tabFocus=function(e){if(!this.curUL.querySelector("."+c)&&this.curUL){var i=this.curUL.querySelector("."+p);if(i.classList.contains(f)){var s=this.curUL.querySelector("."+h);t.isNullOrUndefined(s)&&i.classList.add(h)}else this.setSelectLI(i,e)}},w.prototype.removeHover=function(){var e=this.element.querySelector("."+d);e&&e.classList.remove(d)},w.prototype.removeSelect=function(){for(var e=0,t=this.element.querySelectorAll("[aria-selected = true]");e<t.length;e++){var i=t[e];i.removeAttribute("aria-selected"),""!==i.className&&i.classList.remove(c),this.selectedItems=void 0}},w.prototype.isValidLI=function(e){return e&&e.classList.contains(p)&&!e.classList.contains(m)&&!e.classList.contains(b)},w.prototype.setSelectLI=function(e,i){if(this.isValidLI(e)&&!e.classList.contains(c)&&this.enable){this.removeSelect(),e.classList.add(c),e.setAttribute("aria-selected","true");var r=this.getItemData(e),n=s(r,this.listBaseOption.fields);t.isNullOrUndefined(r)&&"string"==typeof this.dataSource[0]?this.selectedItems={item:e,text:e.innerText.trim(),data:this.dataSource}:this.selectedItems={item:e,text:n[this.listBaseOption.fields.text],data:r};var l={};t.merge(l,this.selectedItems),i&&t.merge(l,{isInteracted:!0,event:i}),this.trigger("select",l),this.selectedLI=e,this.renderSubList(e)}},w.prototype.setHoverLI=function(e){if(this.isValidLI(e)&&!e.classList.contains(d)&&this.enable){var i=this.element.querySelectorAll("."+d);i&&i.length&&t.removeClass(i,d),e.classList.contains(c)||e.classList.add(d)}},w.prototype.hoverSiblingLI=function(t){var i,s=this.curUL.querySelector("."+d);if(s||(s=this.curUL.querySelector("."+c)),s)i=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+p),s,t);else if(t){var r=this.curUL.querySelectorAll("."+p);i=r[r.length-1]}else i=this.curUL.querySelector("."+p);this.setHoverLI(i)},w.prototype.getSubDS=function(){var e=this.curDSLevel;if(e.length){for(var t=this.localData,i=0,r=e;i<r.length;i++){var n=r[i];this.curDSJSON=this.findItemFromDS(t,{id:n});var l=s(this.curDSJSON,this.listBaseOption.fields);t=this.curDSJSON?l[this.fields.child]:t}return t}return this.localData},w.prototype.getItemData=function(e){var t=this.getElementUID(e),i=this.dataSource;return this.findItemFromDS(i,t)},w.prototype.findItemFromDS=function(e,i,r){var n,l=this;return e&&e.length&&i?e.some(function(o){var a=s(o,l.listBaseOption.fields);if(!i.id&&!i.text||i.id&&a[l.fields.id]!==i.id||i.text&&a[l.fields.text]!==i.text)if(!t.isNullOrUndefined(i.id)&&t.isNullOrUndefined(a[l.fields.id])){l.element.querySelector('[data-uid="'+i.id+'"]').innerText.trim()===a[l.fields.text]&&(n=o)}else a.hasOwnProperty(l.fields.child)&&a[l.fields.child].length&&(n=l.findItemFromDS(a[l.fields.child],i,r));else n=r?e:o;return!!n}):n=e,n},w.prototype.getQuery=function(){var t=[],s=this.query?this.query:new i.Query;if(!this.query){for(var r=0,n=Object.keys(this.fields.properties);r<n.length;r++){var l=n[r];"tableName"!==l&&this.fields[l]&&this.fields[l]!==e.ListBase.defaultMappedFields[l]&&-1===t.indexOf(this.fields[l])&&t.push(this.fields[l])}s.select(t),this.fields.properties.hasOwnProperty("tableName")&&s.from(this.fields.tableName)}return s},w.prototype.setViewDataSource=function(t){void 0===t&&(t=this.localData),t&&this.fields.groupBy?this.curViewDS=e.ListBase.groupDataSource(t,this.fields,this.sortOrder):t&&"None"!==this.sortOrder?this.curViewDS=e.ListBase.getDataSource(t,e.ListBase.addSorting(this.sortOrder,this.fields.sortBy)):this.curViewDS=t},w.prototype.isInAnimation=function(){return this.curUL.classList.contains(".e-animate")},w.prototype.setLocalData=function(){var s=this;if(this.trigger("actionBegin"),this.dataSource instanceof i.DataManager)this.dataSource.executeQuery(this.getQuery()).then(function(e){s.isDestroyed||(s.localData=e.result,s.renderList(),s.trigger("actionComplete",e))}).catch(function(e){s.isDestroyed||s.trigger("actionFailure",e)});else if(this.dataSource&&this.dataSource.length)this.localData=this.dataSource,this.renderList(),this.trigger("actionComplete",{data:this.localData});else{var r=this.element.querySelector("ul");r&&(t.remove(r),this.setProperties({dataSource:e.ListBase.createJsonFromElement(r)},!0),this.localData=this.dataSource,this.renderList(),this.trigger("actionComplete",{data:this.localData}))}},w.prototype.reRender=function(){this.element.innerHTML="",this.curUL=this.headerEle=void 0,this.setLocalData(),this.header()},w.prototype.resetCurrentList=function(){this.setViewDataSource(this.curViewDS),this.contentContainer.innerHTML="",this.createList(),this.renderIntoDom(this.curUL)},w.prototype.createList=function(){this.ulElement=this.curUL=e.ListBase.createList(this.curViewDS,this.listBaseOption),this.liCollection=this.curUL.querySelectorAll("."+p)},w.prototype.renderSubList=function(i){var r=i.getAttribute("data-uid");if(i.classList.contains(f)&&r){var n=t.closest(i.parentNode,"."+u),l=this.element.querySelector("[pid='"+r+"']");this.curDSLevel.push(r),this.setViewDataSource(this.getSubDS()),l||((l=e.ListBase.createListFromJson(this.curViewDS,this.listBaseOption,this.curDSLevel.length)).setAttribute("pID",r),l.style.display="none",this.renderIntoDom(l)),this.switchView(n,l),this.liCollection=this.curUL.querySelectorAll("."+p);var o=s(this.selectedItems.data,this.listBaseOption.fields);this.header(o[this.listBaseOption.fields.text],!0),this.selectedLI=void 0}},w.prototype.renderIntoDom=function(e){this.contentContainer.appendChild(e)},w.prototype.renderList=function(){this.setViewDataSource(),this.createList(),this.contentContainer=t.createElement("div",{className:S}),this.element.appendChild(this.contentContainer),this.renderIntoDom(this.ulElement)},w.prototype.getElementUID=function(e){var t={};return e instanceof Element?t.id=e.getAttribute("data-uid"):t=e,t},w.prototype.render=function(){this.element.classList.add(a),t.attributes(this.element,{role:"list",tabindex:"0"}),this.setCSSClass(),this.setEnableRTL(),this.setEnable(),this.setSize(),this.wireEvents(),this.header(),this.setLocalData(),this.setHTMLAttribute(),this.rippleFn=t.rippleEffect(this.element,{selector:"."+p})},w.prototype.destroy=function(){this.unWireEvents();var e=[a,this.cssClass,b,"e-rtl","e-has-header"];t.removeClass([this.element],e),this.rippleFn(),I.prototype.destroy.call(this)},w.prototype.back=function(){var e=this.curDSLevel[this.curDSLevel.length-1];if(void 0!==e&&!this.isInAnimation()){this.curDSLevel.pop(),this.setViewDataSource(this.getSubDS());var t=this.element.querySelector("[data-uid='"+e+"']"),i=this.curUL;t?t=t.parentElement:(this.createList(),this.renderIntoDom(this.ulElement),t=this.curUL);var r=s(this.curDSJSON,this.listBaseOption.fields)[this.fields.text];this.switchView(i,t,!0),this.removeSelect(),this.liCollection=this.curUL.querySelectorAll("."+p),this.header(this.curDSLevel.length?r:this.headerTitle,!!this.curDSLevel.length)}},w.prototype.selectItem=function(e){if(!t.isNullOrUndefined(e)){var i=this.getItemData(e),r=s(i,this.listBaseOption.fields);if(i){var n=this.element.querySelector('[data-uid="'+r[this.fields.id]+'"]');if(t.isNullOrUndefined(n))for(var l=this.element.querySelectorAll("."+p),o=0;o<l.length;o++)l[o].innerText.trim()===i.text&&(n=l[o]);this.setSelectLI(n)}}},w.prototype.getSelectedItem=function(){return this.selectedItems},w.prototype.findItem=function(e){return this.findItemFromDS(this.dataSource,e)},w.prototype.enableItem=function(e){this.setItemState(e,!0)},w.prototype.disableItem=function(e){this.setItemState(e,!1)},w.prototype.setItemState=function(e,t){var i=this.getItemData(e),r=s(i,this.listBaseOption.fields);if(i){var n=this.element.querySelector('[data-uid="'+r[this.fields.id]+'"]');t?(n&&n.classList.remove(b),delete i[this.fields.enabled]):t||(n&&n.classList.add(b),i[this.fields.enabled]=!1)}},w.prototype.showItem=function(e){this.showHideItem(e,!1,"")},w.prototype.hideItem=function(e){this.showHideItem(e,!0,"none")},w.prototype.showHideItem=function(e,t,i){var r=this.getItemData(e),n=s(r,this.listBaseOption.fields);if(r){var l=this.element.querySelector('[data-uid="'+n[this.fields.id]+'"]');l&&(l.style.display=i),t?r[this.fields.isVisible]=!1:delete r[this.fields.isVisible]}},w.prototype.addItem=function(e,t){var i=this.findItemFromDS(this.dataSource,t),r=s(i,this.listBaseOption.fields)[this.fields.child];r||(r=[]),r=r.concat(e),i instanceof Array?(this.dataSource=this.localData=i.concat(e),this.setViewDataSource()):i[this.fields.child]=r,this.resetCurrentList()},w.prototype.removeItem=function(e){var i=this,r=this.getElementUID(e),n=this.findItemFromDS(this.dataSource,r,!0);if(n&&e){var l,o;n.some(function(e,t,n){var a=s(e,i.listBaseOption.fields);return!(!r.id&&!r.text||r.id&&a[i.fields.id]!==r.id||r.text&&a[i.fields.text]!==r.text)&&(l=n,o=t,!0)}),t.isNullOrUndefined(this.selectedItems)||this.selectedItems.data!==l[o]||(this.selectedItems=void 0),l.splice(o,1),this.curViewDS=l,this.resetCurrentList(),this.selectItem(this.selectedItems)}},w.prototype.getModuleName=function(){return"listview"},w.prototype.getPersistData=function(){return this.addOnPersist(["cssClass","enableRtl","htmlAttributes","enable","fields","animation","headerTitle","sortOrder","showIcon","height","width"])},n([t.Property()],w.prototype,"cssClass",void 0),n([t.Property({})],w.prototype,"htmlAttributes",void 0),n([t.Property(!0)],w.prototype,"enable",void 0),n([t.Property([])],w.prototype,"dataSource",void 0),n([t.Property()],w.prototype,"query",void 0),n([t.Complex(e.ListBase.defaultMappedFields,O)],w.prototype,"fields",void 0),n([t.Property({effect:"SlideLeft",duration:400,easing:"ease"})],w.prototype,"animation",void 0),n([t.Property("None")],w.prototype,"sortOrder",void 0),n([t.Property(!1)],w.prototype,"showIcon",void 0),n([t.Property("")],w.prototype,"headerTitle",void 0),n([t.Property(!1)],w.prototype,"showHeader",void 0),n([t.Property("")],w.prototype,"height",void 0),n([t.Property("")],w.prototype,"width",void 0),n([t.Property(null)],w.prototype,"template",void 0),n([t.Property(null)],w.prototype,"groupTemplate",void 0),n([t.Event()],w.prototype,"select",void 0),n([t.Event()],w.prototype,"actionBegin",void 0),n([t.Event()],w.prototype,"actionComplete",void 0),n([t.Event()],w.prototype,"actionFailure",void 0),w=n([t.NotifyPropertyChanges],w)}(t.Component);e.FieldSettings=O,e.ListView=I,e.getFieldValues=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-data"),require("@syncfusion/ej2-buttons")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-data","@syncfusion/ej2-buttons"],t):t(e.ej={},e.ej2Base,e.ej2Data,e.ej2Buttons)}(this,function(e,t,i,s){"use strict";function r(e,i){var s,r={};if(t.isNullOrUndefined(e))return e;if("string"==typeof e||"number"==typeof e)return e;if(t.isNullOrUndefined(e.isHeader))for(var o=0,n=Object.keys(i);o<n.length;o++){var a=n[o];if(!t.isNullOrUndefined(i[a])&&"string"==typeof i[a]){var l=i[a].split("."),c=l.length>1?l[0]:i[a];t.isNullOrUndefined(e[c])||(s=t.getValue(i[a],e),t.isNullOrUndefined(s)||(r[i[a]]=s))}}else!t.isNullOrUndefined(e.isHeader)&&e.isHeader&&(r=e);return r}e.cssClass={li:"e-list-item",ul:"e-list-parent e-ul",group:"e-list-group-item",icon:"e-list-icon",text:"e-list-text",check:"e-list-check",checked:"e-checked",selected:"e-selected",expanded:"e-expanded",textContent:"e-text-content",hasChild:"e-has-child",level:"e-level",url:"e-list-url",collapsible:"e-icon-collapsible",disabled:"e-disabled",image:"e-list-img",iconWrapper:"e-icon-wrapper"},function(s){function o(e,t,i){return C(n(e,t,i),null,i)}function n(i,s,r){var o=[],n=t.extend({},x,r);e.cssClass=g(n.moduleName);for(var a=y(),l=0;l<i.length;l++)if(!t.isNullOrUndefined(i[l])){var c=void 0;if(n.itemCreating&&"function"==typeof n.itemCreating){var d={dataSource:i,curData:i[l],text:i[l],options:n};n.itemCreating(d)}if(c=s?v(i[l],null,null,[],null,a,l,r):b(i[l],null,null,r),n.itemCreated&&"function"==typeof n.itemCreated){d={dataSource:i,curData:i[l],text:i[l],item:c,options:n};n.itemCreated(d)}o.push(c)}return o}function a(i,o,n,a){var c=t.extend({},x,o);e.cssClass=g(c.moduleName);var d,h=t.extend({},s.defaultMappedFields,c.fields),u=t.extend({},S,c.ariaAttributes);n&&(u.level=n);var f,L=[];Object.keys(i).length&&!p(i).item.hasOwnProperty(h.id)&&(d=y());for(var C=0;C<i.length;C++){var O=r(i[C],h);if(!t.isNullOrUndefined(i[C])){if(c.itemCreating&&"function"==typeof c.itemCreating){var I={dataSource:i,curData:i[C],text:O[h.text],options:c,fields:h};c.itemCreating(I)}var w=i[C];c.itemCreating&&"function"==typeof c.itemCreating&&(O=r(i[C],h)),Object.keys(i).length&&O.hasOwnProperty(h.id)&&!t.isNullOrUndefined(O[h.id])&&(d=O.id);var k=[];if(c.showCheckBox&&k.push(t.createElement("input",{className:e.cssClass.check,attrs:{type:"checkbox"}})),!0===a)c.showIcon&&O.hasOwnProperty(h.iconCss)&&(t.isNullOrUndefined(O[h.iconCss])||k.push(t.createElement("span",{className:e.cssClass.icon+" "+O[h.iconCss]}))),f=v(w,h,c.itemClass,k,!(!w.hasOwnProperty("isHeader")||!w.isHeader),d,C,o);else{if((f=b(w,h,c.itemClass,o)).classList.add(e.cssClass.level+"-"+u.level),f.setAttribute("aria-level",u.level.toString()),O.hasOwnProperty(h.tooltip)&&f.setAttribute("title",O[h.tooltip]),O.hasOwnProperty(h.htmlAttributes)&&O[h.htmlAttributes]&&m(f,O[h.htmlAttributes]),O.hasOwnProperty(h.enabled)&&!1===O[h.enabled]&&f.classList.add(e.cssClass.disabled),O.hasOwnProperty(h.isVisible)&&!1===O[h.isVisible]&&(f.style.display="none"),O.hasOwnProperty(h.imageUrl)&&!t.isNullOrUndefined(O[h.imageUrl])){var D={src:O[h.imageUrl]};O.hasOwnProperty(h.imageUrl)&&t.merge(D,O[h.imageAttributes]),t.prepend([t.createElement("img",{className:e.cssClass.image,attrs:D})],f.firstElementChild)}c.showIcon&&O.hasOwnProperty(h.iconCss)&&!c.template&&(t.isNullOrUndefined(O[h.iconCss])||t.prepend([t.createElement("div",{className:e.cssClass.icon+" "+O[h.iconCss]})],f.firstElementChild)),k.length&&t.prepend(k,f.firstElementChild),function(i,s,o,n,a,c){var d=r(i,s),h=d[s.child]||[],u=d[s.hasChildren];if(h.length&&(u=!0,a.classList.add(e.cssClass.hasChild),n.processSubChild)){var p=l(h,n,++c);a.appendChild(p)}if(n.expandCollapse&&u&&!n.template){a.firstElementChild.classList.contains(e.cssClass.textContent)&&a.firstElementChild.classList.add(e.cssClass.iconWrapper);var m="Left"===n.expandIconPosition?t.prepend:t.append;m([t.createElement("div",{className:"e-icons "+n.expandIconClass})],a.querySelector("."+e.cssClass.textContent))}}(w,h,0,c,f,u.level)}if(c.itemCreated&&"function"==typeof c.itemCreated){I={dataSource:i,curData:i[C],text:O[h.text],item:f,options:c,fields:h};c.itemCreated(I)}L.push(f)}}return L}function l(e,i,s,r){var o=t.extend({},x,i);return C(a(e,i,s,r),o.listClass,i)}function c(e,t){if(t&&e){return Array.prototype.slice.call(t).indexOf(e)}}function d(e,t,s){return void 0===s&&(s=new i.Query),"Ascending"===e?s.sortBy(t,"ascending",!0):"Descending"===e&&s.sortBy(t,"descending",!0),s}function h(e,t){return new i.DataManager(e).executeLocal(t)}function u(e,i){var r=t.extend({},x,i),o=t.extend({},s.defaultMappedFields,r.fields),n=e.cloneNode(!0),a=[];n.classList.add("json-parent");var l=n.querySelectorAll(".json-parent>li");n.classList.remove("json-parent");for(var c=0;c<l.length;c++){for(var d=l[c],h=d.querySelector("a"),p=d.querySelector("ul"),m={},v=h?h.childNodes:d.childNodes,g=Object.keys(v),L=0;L<v.length;L++)v[Number(g[L])].hasChildNodes()||(m[o.text]=v[Number(g[L])].textContent);m[o.id]=y();var b=f(d);Object.keys(b).length&&(m[o.htmlAttributes]=b),h&&(b=f(h),Object.keys(b).length&&(m[o.urlAttributes]=b)),p&&(m[o.child]=u(p,i)),a.push(m)}return a}function p(e){for(var i={typeof:null,item:null},s=0;s<e.length;s++)if(!t.isNullOrUndefined(e[s]))return i={typeof:typeof e[s],item:e[s]};return i}function m(e,i){var s={};t.merge(s,i),s.class&&(t.addClass([e],s.class.split(" ")),delete s.class),t.attributes(e,s)}function f(e){for(var t={},i=e.attributes,s=0;s<i.length;s++)t[i[s].nodeName]=i[s].nodeValue;return t}function y(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}function v(i,s,o,n,a,l,c,d){var h,u=t.extend({},x,d),p=t.extend({},S,u.ariaAttributes),f=i,y=i,v=r(i,s);"string"!=typeof i&&"number"!=typeof i&&(h=i,f=v[s.text]||"",y=v[s.value]);var g;g=t.isNullOrUndefined(h)||t.isNullOrUndefined(v[s.id])||""===v[s.id]?l+"-"+c:l;var b=t.createElement("li",{className:(!0===a?e.cssClass.group:e.cssClass.li)+" "+(t.isNullOrUndefined(o)?"":o),id:g,attrs:""!==p.groupItemRole&&""!==p.itemRole?{role:!0===a?p.groupItemRole:p.itemRole}:{}});return h&&v.hasOwnProperty(s.enabled)&&"false"===v[s.enabled].toString()&&b.classList.add(e.cssClass.disabled),a?b.innerText=f:(t.isNullOrUndefined(y)||b.setAttribute("data-value",y),b.setAttribute("role","option"),h&&v.hasOwnProperty(s.htmlAttributes)&&v[s.htmlAttributes]&&m(b,v[s.htmlAttributes]),n.length&&t.append(n,b),h&&v.hasOwnProperty(s.url)&&v[s.url]?b.appendChild(L(h,s,f)):b.appendChild(document.createTextNode(f))),b}function g(e){return{li:"e-"+e+"-item",ul:"e-"+e+"-parent e-ul",group:"e-"+e+"-group-item",icon:"e-"+e+"-icon",text:"e-"+e+"-text",check:"e-"+e+"-check",checked:"e-checked",selected:"e-selected",expanded:"e-expanded",textContent:"e-text-content",hasChild:"e-has-child",level:"e-level",url:"e-"+e+"-url",collapsible:"e-icon-collapsible",disabled:"e-disabled",image:"e-"+e+"-img",iconWrapper:"e-icon-wrapper"}}function L(i,s,o){var n=r(i,s),a={href:n[s.url]};n.hasOwnProperty(s.urlAttributes)&&n[s.urlAttributes]&&t.merge(a,n[s.urlAttributes]);var l=t.createElement("a",{className:e.cssClass.text+" "+e.cssClass.url,innerHTML:o});return m(l,a),l}function b(i,s,o,n){var a,l,c,d,h=t.extend({},x,n),u=t.extend({},S,h.ariaAttributes),p=i;"string"!=typeof i&&(c=i,p=(d=r(i,s))[s.text]||"",a=d[s.id],l=!(!i.hasOwnProperty("isHeader")||!i.isHeader));var m=t.createElement("li",{className:(!0===l?e.cssClass.group:e.cssClass.li)+" "+(t.isNullOrUndefined(o)?"":o),attrs:""!==u.groupItemRole&&""!==u.itemRole?{role:!0===l?u.groupItemRole:u.itemRole}:{}});if(t.isNullOrUndefined(a)?m.setAttribute("data-uid",y()):m.setAttribute("data-uid",a),l&&n&&n.groupTemplate){var f=t.compile(n.groupTemplate);t.append(f(i),m)}else if(!l&&n&&n.template){f=t.compile(n.template);t.append(f(i),m)}else{var v=t.createElement("div",{className:e.cssClass.textContent,attrs:""!==u.wrapperRole?{role:u.wrapperRole}:{}});c&&d.hasOwnProperty(s.url)&&d[s.url]?v.appendChild(L(c,s,p)):v.appendChild(t.createElement("span",{className:e.cssClass.text,innerHTML:p,attrs:""!==u.itemText?{role:u.itemText}:{}})),m.appendChild(v)}return m}function C(i,s,r){var o=t.extend({},x,r),n=t.extend({},S,o.ariaAttributes);e.cssClass=g(o.moduleName);var a=t.createElement("ul",{className:e.cssClass.ul+" "+(t.isNullOrUndefined(s)?"":s),attrs:""!==n.listRole?{role:n.listRole}:{}});return t.append(i,a),a}s.defaultMappedFields={id:"id",text:"text",url:"url",value:"value",isChecked:"isChecked",enabled:"enabled",expanded:"expanded",selected:"selected",iconCss:"iconCss",child:"child",isVisible:"isVisible",hasChildren:"hasChildren",tooltip:"tooltip",htmlAttributes:"htmlAttributes",urlAttributes:"urlAttributes",imageAttributes:"imageAttributes",imageUrl:"imageUrl",groupBy:null};var S={level:1,listRole:"presentation",itemRole:"presentation",groupItemRole:"group",itemText:"list-item",wrapperRole:"presentation"},x={showCheckBox:!1,showIcon:!1,expandCollapse:!1,fields:s.defaultMappedFields,ariaAttributes:S,listClass:"",itemClass:"",processSubChild:!1,sortOrder:"None",template:null,groupTemplate:null,expandIconClass:"e-icon-collapsible",moduleName:"list",expandIconPosition:"Right"};s.createList=function(e,i,s){var r=t.extend({},x,i),n=t.extend({},S,r.ariaAttributes),a=p(e).typeof;return"string"===a||"number"===a?o(e,s,i):l(e,i,n.level,s)},s.createListFromArray=o,s.createListItemFromArray=n,s.createListItemFromJson=a,s.createListFromJson=l,s.getSiblingLI=function(i,s,r){if(e.cssClass=g(x.moduleName),i&&i.length){var o,n,a=Array.prototype.slice.call(i);for(o=a[(n=s?c(s,a):!0===r?a.length:-1)+(!0===r?-1:1)];o&&(!t.isVisible(o)||o.classList.contains(e.cssClass.disabled));)o=a[n+=!0===r?-1:1];return o}},s.indexOf=c,s.groupDataSource=function(e,t,s){void 0===s&&(s="None");var r=(new i.Query).group(t.groupBy),o=h(e,r=d(s,"key",r));e=[];for(var n=0;n<o.length;n++){var a=o[n].items,l={};l[t.text]=o[n].key,l.isHeader=!0,l.items=a,e.push(l);for(var c=0;c<a.length;c++)e.push(a[c])}return e},s.addSorting=d,s.getDataSource=h,s.createJsonFromElement=u,s.renderContentTemplate=function(i,s,o,n){e.cssClass=g(x.moduleName);for(var a=t.createElement("ul",{className:e.cssClass.ul,attrs:{role:"presentation"}}),l=t.extend({},x,n),c=t.compile(i),d=[],h=y(),u=0;u<s.length;u++){var p=r(s[u],o),m=s[u],f=m.isHeader,v="string"==typeof m||"number"==typeof m?m:p[o.value];if(l.itemCreating&&"function"==typeof l.itemCreating){var L={dataSource:s,curData:m,text:v,options:l,fields:o};l.itemCreating(L)}l.itemCreating&&"function"==typeof l.itemCreating&&(v=(p=r(s[u],o))[o.value]);var b=t.createElement("li",{id:h+"-"+u,className:f?e.cssClass.group:e.cssClass.li,attrs:{role:"presentation"}});f?b.innerText=p[o.text]:(t.append(c(m),b),b.setAttribute("data-value",v),b.setAttribute("role","option")),l.itemCreated&&"function"==typeof l.itemCreated&&(L={dataSource:s,curData:m,text:v,item:b,options:l,fields:o},l.itemCreated(L)),d.push(b)}return t.append(d,a),a},s.renderGroupTemplate=function(e,i,s,r){for(var o=t.compile(e),n=s.groupBy,a={},l=0,c=r;l<c.length;l++){var d=c[l];a[n]=d.textContent,d.innerHTML="",t.append(o(a),d)}return r},s.generateUL=C,s.generateIcon=function(i,s,r){var o=t.extend({},x,r);return t.extend({},S,o.ariaAttributes),e.cssClass=g(o.moduleName),("Left"===o.expandIconPosition?t.prepend:t.append)([t.createElement("div",{className:"e-icons "+o.expandIconClass+" "+(t.isNullOrUndefined(s)?"":s)})],i.querySelector("."+e.cssClass.textContent)),i}}(e.ListBase||(e.ListBase={}));var o=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function s(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}}(),n=function(e,t,i,s){var r,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n},a={None:[],SlideLeft:["SlideRightOut","SlideLeftOut","SlideLeftIn","SlideRightIn"],SlideDown:["SlideTopOut","SlideBottomOut","SlideBottomIn","SlideTopIn"],Zoom:["FadeOut","FadeZoomOut","FadeZoomIn","FadeIn"],Fade:["FadeOut","FadeOut","FadeIn","FadeIn"]},l={None:[],SlideLeft:["SlideLeftOut","SlideRightOut","SlideRightIn","SlideLeftIn"],SlideDown:["SlideBottomOut","SlideTopOut","SlideTopIn","SlideBottomIn"],Zoom:["FadeZoomOut","FadeOut","FadeIn","FadeZoomIn"],Fade:["FadeOut","FadeOut","FadeIn","FadeIn"]},c="e-listview",d="e-hover",h="e-active",u="e-focused",p="e-list-parent",m="e-list-item",f="e-list-group-item",y="e-has-child",v="e-list-header",g="e-headertext",L="e-text",b="e-disabled",C="e-content",S="e-icons",x="e-icon-back",O="e-checkbox-wrapper",I="e-checkbox",w="e-check",k="e-frame",D="e-checkbox-right",E="e-checkbox-left",N=function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return o(i,e),n([t.Property("id")],i.prototype,"id",void 0),n([t.Property("text")],i.prototype,"text",void 0),n([t.Property("isChecked")],i.prototype,"isChecked",void 0),n([t.Property("isVisible")],i.prototype,"isVisible",void 0),n([t.Property("enabled")],i.prototype,"enabled",void 0),n([t.Property("iconCss")],i.prototype,"iconCss",void 0),n([t.Property("child")],i.prototype,"child",void 0),n([t.Property("tooltip")],i.prototype,"tooltip",void 0),n([t.Property("groupBy")],i.prototype,"groupBy",void 0),n([t.Property("text")],i.prototype,"sortBy",void 0),n([t.Property("htmlAttributes")],i.prototype,"htmlAttributes",void 0),n([t.Property("tableName")],i.prototype,"tableName",void 0),i}(t.ChildProperty),U=function(U){function B(e,i){var s=U.call(this,e,i)||this;return s.curDSLevel=[],s.curViewDS=[],s.keyConfigs={moveDown:"downarrow",moveUp:"uparrow",back:"backspace",home:"home",select:"enter",end:"end",tab:"tab",space:"space"},s.animateOptions={},s.isNestedList=!1,s.currentLiElements=[],s.resetList=!1,s.selectedData=[],s.selectedId=[],s.aniObj=new t.Animation(s.animateOptions),s}return o(B,U),B.prototype.onPropertyChanged=function(e,t){for(var i=0,s=Object.keys(e);i<s.length;i++){switch(s[i]){case"htmlAttributes":this.setHTMLAttribute();break;case"cssClass":this.setCSSClass(t.cssClass);break;case"enable":this.setEnable();break;case"width":case"height":this.setSize();break;case"enableRtl":this.setEnableRTL();break;case"fields":this.listBaseOption.fields=this.fields.properties,this.reRender();break;case"headerTitle":this.curDSLevel.length||this.header(this.headerTitle,!1);break;case"showHeader":this.header(this.headerTitle,!1);break;case"showCheckBox":case"checkBoxPosition":this.setCheckbox();break;case"dataSource":this.reRender();break;case"sortOrder":case"showIcon":this.listBaseOption.showIcon=this.showIcon,this.curViewDS=this.getSubDS(),this.resetCurrentList()}}},B.prototype.setHTMLAttribute=function(){Object.keys(this.htmlAttributes).length&&t.attributes(this.element,this.htmlAttributes)},B.prototype.setCSSClass=function(e){this.cssClass&&t.addClass([this.element],this.cssClass.split(" ")),e&&t.removeClass([this.element],e.split(" "))},B.prototype.setSize=function(){this.element.style.height=t.formatUnit(this.height),this.element.style.width=t.formatUnit(this.width)},B.prototype.setEnable=function(){this.enableElement(this.element,this.enable)},B.prototype.setEnableRTL=function(){this.enableRtl?this.element.classList.add("e-rtl"):this.element.classList.remove("e-rtl")},B.prototype.enableElement=function(e,t){t?e.classList.remove(b):e.classList.add(b)},B.prototype.header=function(e,i){if(void 0===this.headerEle&&this.showHeader){this.headerEle=t.createElement("div",{className:v});var s=t.createElement("span",{className:g,innerHTML:this.headerTitle}),r=t.createElement("div",{className:L,innerHTML:s.outerHTML}),o=t.createElement("div",{className:S+" "+x+" e-but-back",attrs:{style:"display:none;"}});this.headerEle.appendChild(o),this.headerEle.appendChild(r),this.element.classList.add("e-has-header"),t.prepend([this.headerEle],this.element)}else if(this.headerEle)if(this.showHeader){this.headerEle.style.display="";r=this.headerEle.querySelector("."+g),o=this.headerEle.querySelector("."+x);r.innerHTML=e,o.style.display=!0===i?"":"none"}else this.headerEle.style.display="none"},B.prototype.switchView=function(e,t,i){var s=this;if(e&&t){var r=e.style.position,o="hidden"!==this.element.style.overflow?this.element.style.overflow:"";e.style.position="absolute",e.classList.add("e-view");var n=void 0,c=this.animation.duration;if(this.animation.effect)n=this.enableRtl?l[this.animation.effect]:a[this.animation.effect];else{n=a.SlideLeft,i=this.enableRtl,c=0}this.element.style.overflow="hidden",this.aniObj.animate(e,{name:!0===i?n[0]:n[1],duration:c,timingFunction:this.animation.easing,end:function(t){e.style.display="none",s.element.style.overflow=o,e.style.position=r,e.classList.remove("e-view")}}),t.style.display="",this.aniObj.animate(t,{name:!0===i?n[2]:n[3],duration:c,timingFunction:this.animation.easing,end:function(){s.trigger("actionComplete")}}),this.curUL=t}},B.prototype.preRender=function(){this.listBaseOption={template:this.template,groupTemplate:this.groupTemplate,expandCollapse:!0,listClass:"",ariaAttributes:{itemRole:"listitem",listRole:"list",itemText:"",groupItemRole:"group",wrapperRole:"presentation"},fields:this.fields.properties,sortOrder:this.sortOrder,showIcon:this.showIcon,itemCreated:this.renderCheckbox.bind(this)}},B.prototype.renderCheckbox=function(e){if(this.showCheckBox&&this.isValidLI(e.item)&&!this.isNestedList)if(e.item.classList.contains(y))this.checkboxRevert();else{var t=void 0,i=void 0;(t=s.createCheckBox(!1,{checked:!1,enableRtl:this.enableRtl})).setAttribute("role","checkbox");var o=t.querySelector("."+k);e.item.classList.add("e-checklist"),e.item.firstElementChild.classList.add(I),"string"!=typeof this.dataSource[0]?(i=r(e.curData,this.listBaseOption.fields),!this.resetList&&i[this.listBaseOption.fields.isChecked]?this.checkItem(e,t):-1!==this.selectedData.indexOf(i[this.listBaseOption.fields.text])&&-1!==this.selectedId.indexOf(i[this.listBaseOption.fields.id])&&this.checkItem(e,t)):"string"==typeof this.dataSource[0]&&-1!==this.selectedData.indexOf(e.text)&&this.checkItem(e,t),t.setAttribute("aria-checked",o.classList.contains(w)?"true":"false"),"Left"===this.checkBoxPosition?(t.classList.add(E),e.item.firstElementChild.insertBefore(t,e.item.firstElementChild.childNodes[0])):(t.classList.add(D),e.item.firstElementChild.appendChild(t)),this.currentLiElements.push(e.item)}},B.prototype.checkItem=function(e,t){e.item.classList.add(h),t.querySelector("."+k).classList.add(w),t.setAttribute("aria-checked","true")},B.prototype.checkboxRevert=function(){this.isNestedList=!0,this.setProperties({showCheckBox:!1},!0);for(var e=0;e<this.currentLiElements.length;e++)this.currentLiElements[e].querySelector("."+O)&&(this.currentLiElements[e].firstElementChild.classList.remove(I),this.removeElement(this.currentLiElements[e].firstElementChild.firstElementChild))},B.prototype.setCheckbox=function(){var e=this;if(this.showCheckBox&&!this.curUL.querySelector("."+y)){var t={item:void 0,curData:void 0,dataSource:void 0,fields:void 0,options:void 0,text:""};this.liCollection.forEach(function(i){t.item=i,t.curData=e.getItemData(i),i.querySelector("."+O)&&e.removeElement(i.querySelector("."+O)),e.renderCheckbox(t)})}else this.liCollection.forEach(function(t){t.firstElementChild.classList.remove(I),t.querySelector("."+O)&&e.removeElement(t.querySelector("."+O))})},B.prototype.clickHandler=function(e){var i=e.target,s=i.classList;if(s.contains(x)||s.contains(g))this.back();else{var r=t.closest(i.parentNode,"."+m);null===r&&(r=i),this.enable&&this.showCheckBox&&this.isValidLI(r)?this.setCheckboxLI(r,e):this.setSelectLI(r,e)}},B.prototype.removeElement=function(e){return e&&e.parentNode&&e.parentNode.removeChild(e)},B.prototype.hoverHandler=function(e){var i=t.closest(e.target.parentNode,"."+m);this.setHoverLI(i)},B.prototype.leaveHandler=function(e){this.removeHover()},B.prototype.homeKeyHandler=function(e,t){var i=this.curUL.querySelectorAll("."+m),s=this.curUL.querySelector("."+u)||this.curUL.querySelector("."+h);s&&(s.classList.remove(u),this.showCheckBox||s.classList.remove(h));var r=t?i.length-1:0;i[r].classList.contains(y)||this.showCheckBox?i[r].classList.add(u):this.setSelectLI(i[r],e)},B.prototype.arrowKeyHandler=function(i,s){var r,o;!t.isNullOrUndefined(this.curUL.querySelector("."+y))||this.showCheckBox?(o=this.curUL.querySelector("."+u)||this.curUL.querySelector("."+h),r=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+m),o,s),t.isNullOrUndefined(r)||(o&&(o.classList.remove(u),this.showCheckBox||o.classList.remove(h)),r.classList.contains(y)||this.showCheckBox?r.classList.add(u):this.setSelectLI(r,i))):(o=this.curUL.querySelector("."+h),r=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+m),o,s),this.setSelectLI(r,i))},B.prototype.enterKeyHandler=function(e){var i=!t.isNullOrUndefined(this.curUL.querySelector("."+y)),s=this.curUL.querySelector("."+u);i&&s&&(s.classList.remove(u),this.setSelectLI(s,e))},B.prototype.spaceKeyHandler=function(e){if(this.enable&&this.showCheckBox){var t=this.curUL.querySelector("."+u);this.setCheckboxLI(t,e)}},B.prototype.keyActionHandler=function(e){switch(e.preventDefault(),e.action){case"home":this.homeKeyHandler(e);break;case"end":this.homeKeyHandler(e,!0);break;case"moveDown":this.arrowKeyHandler(e);break;case"moveUp":this.arrowKeyHandler(e,!0);break;case"select":this.enterKeyHandler(e);break;case"back":this.back();break;case"tab":this.tabFocus(e);break;case"space":this.spaceKeyHandler(e)}},B.prototype.swipeActionHandler=function(e){"Right"===e.swipeDirection&&this.back()},B.prototype.focusout=function(){var e=this.curUL.querySelector("."+u),t=this.curUL.querySelector("[aria-selected = true]");e&&!this.showCheckBox&&(e.classList.remove(u),t&&t.classList.add(h))},B.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(this.element,"mouseover",this.hoverHandler,this),t.EventHandler.add(this.element,"mouseout",this.leaveHandler,this),t.EventHandler.add(this.element,"focusout",this.focusout,this),this.keyboardModule=new t.KeyboardEvents(this.element,{keyAction:this.keyActionHandler.bind(this),keyConfigs:this.keyConfigs}),this.touchModule=new t.Touch(this.element,{swipe:this.swipeActionHandler.bind(this)})},B.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.element,"mouseover",this.hoverHandler),t.EventHandler.remove(this.element,"mouseout",this.leaveHandler),this.keyboardModule.destroy(),this.touchModule.destroy()},B.prototype.tabFocus=function(e){if(!this.curUL.querySelector("."+h)&&this.curUL||this.showCheckBox){var i=this.curUL.querySelector("."+m);if(i.classList.contains(y)||this.showCheckBox){var s=this.curUL.querySelector("."+u);t.isNullOrUndefined(s)&&i.classList.add(u)}else this.setSelectLI(i,e)}},B.prototype.removeHover=function(){var e=this.element.querySelector("."+d);e&&e.classList.remove(d)},B.prototype.removeSelect=function(){for(var e=0,t=this.element.querySelectorAll("[aria-selected = true]");e<t.length;e++){var i=t[e];i.removeAttribute("aria-selected"),""!==i.className&&i.classList.remove(h)}},B.prototype.isValidLI=function(e){return e&&e.classList.contains(m)&&!e.classList.contains(f)&&!e.classList.contains(b)},B.prototype.setCheckboxLI=function(e,i){if(this.isValidLI(e)&&this.enable&&this.showCheckBox){this.curUL.querySelector("."+u)&&this.curUL.querySelector("."+u).classList.remove(u),e.classList.add(u);var s=e.querySelector("."+O),r=s.querySelector("."+k+"."+S);if(this.removeHover(),r.classList.contains(w)?(r.classList.remove(w),e.classList.remove(h)):(r.classList.add(w),e.classList.add(h)),s.setAttribute("aria-checked",r.classList.contains(w)?"true":"false"),i){var o=this.selectEventData(e,i);t.merge(o,{isChecked:r.classList.contains(w)}),this.trigger("select",o)}}},B.prototype.selectEventData=function(e,i){var s,o=this.getItemData(e),n=r(o,this.listBaseOption.fields);s=t.isNullOrUndefined(o)&&"string"==typeof this.dataSource[0]?{item:e,text:e.innerText.trim(),data:this.dataSource}:{item:e,text:n[this.listBaseOption.fields.text],data:o};var a={};return t.merge(a,s),i&&t.merge(a,{isInteracted:!0,event:i,index:Array.prototype.indexOf.call(this.curUL.children,e)}),a},B.prototype.setSelectLI=function(e,t){if(this.isValidLI(e)&&!e.classList.contains(h)&&this.enable){this.removeSelect(),e.classList.add(h),e.setAttribute("aria-selected","true"),this.removeHover();var i=this.selectEventData(e,t);this.trigger("select",i),this.selectedLI=e,this.renderSubList(e)}},B.prototype.setHoverLI=function(e){if(this.isValidLI(e)&&!e.classList.contains(d)&&this.enable){var i=this.element.querySelectorAll("."+d);i&&i.length&&t.removeClass(i,d),e.classList.contains(h)&&!this.showCheckBox||e.classList.add(d)}},B.prototype.hoverSiblingLI=function(t){var i,s=this.curUL.querySelector("."+d);if(s||(s=this.curUL.querySelector("."+h)),s)i=e.ListBase.getSiblingLI(this.curUL.querySelectorAll("."+m),s,t);else if(t){var r=this.curUL.querySelectorAll("."+m);i=r[r.length-1]}else i=this.curUL.querySelector("."+m);this.setHoverLI(i)},B.prototype.getSubDS=function(){var e=this.curDSLevel;if(e.length){for(var t=this.localData,i=0,s=e;i<s.length;i++){var o=s[i];this.curDSJSON=this.findItemFromDS(t,{id:o});var n=r(this.curDSJSON,this.listBaseOption.fields);t=this.curDSJSON?n[this.fields.child]:t}return t}return this.localData},B.prototype.getItemData=function(e){var t=this.getElementUID(e),i=this.dataSource;return this.findItemFromDS(i,t)},B.prototype.findItemFromDS=function(e,i,s){var o,n=this;return e&&e.length&&i?e.some(function(a){var l=r(a,n.listBaseOption.fields);if(!i.id&&!i.text||i.id&&l[n.fields.id]!==i.id||i.text&&l[n.fields.text]!==i.text)if(!t.isNullOrUndefined(i.id)&&t.isNullOrUndefined(l[n.fields.id])){n.element.querySelector('[data-uid="'+i.id+'"]').innerText.trim()===l[n.fields.text]&&(o=a)}else l.hasOwnProperty(n.fields.child)&&l[n.fields.child].length&&(o=n.findItemFromDS(l[n.fields.child],i,s));else o=s?e:a;return!!o}):o=e,o},B.prototype.getQuery=function(){var t=[],s=this.query?this.query:new i.Query;if(!this.query){for(var r=0,o=Object.keys(this.fields.properties);r<o.length;r++){var n=o[r];"tableName"!==n&&this.fields[n]&&this.fields[n]!==e.ListBase.defaultMappedFields[n]&&-1===t.indexOf(this.fields[n])&&t.push(this.fields[n])}s.select(t),this.fields.properties.hasOwnProperty("tableName")&&s.from(this.fields.tableName)}return s},B.prototype.setViewDataSource=function(t){void 0===t&&(t=this.localData),t&&this.fields.groupBy?this.curViewDS=e.ListBase.groupDataSource(t,this.fields,this.sortOrder):t&&"None"!==this.sortOrder?this.curViewDS=e.ListBase.getDataSource(t,e.ListBase.addSorting(this.sortOrder,this.fields.sortBy)):this.curViewDS=t},B.prototype.isInAnimation=function(){return this.curUL.classList.contains(".e-animate")},B.prototype.setLocalData=function(){var s=this;if(this.trigger("actionBegin"),this.dataSource instanceof i.DataManager)this.dataSource.executeQuery(this.getQuery()).then(function(e){s.isDestroyed||(s.localData=e.result,s.renderList(),s.trigger("actionComplete",e))}).catch(function(e){s.isDestroyed||s.trigger("actionFailure",e)});else if(this.dataSource&&this.dataSource.length)this.localData=this.dataSource,this.renderList(),this.trigger("actionComplete",{data:this.localData});else{var r=this.element.querySelector("ul");r&&(t.remove(r),this.setProperties({dataSource:e.ListBase.createJsonFromElement(r)},!0),this.localData=this.dataSource,this.renderList(),this.trigger("actionComplete",{data:this.localData}))}},B.prototype.reRender=function(){this.element.innerHTML="",this.curUL=this.headerEle=void 0,this.setLocalData(),this.header()},B.prototype.resetCurrentList=function(){this.setViewDataSource(this.curViewDS),this.contentContainer.innerHTML="",this.createList(),this.renderIntoDom(this.curUL)},B.prototype.createList=function(){this.currentLiElements=[],this.ulElement=this.curUL=e.ListBase.createList(this.curViewDS,this.listBaseOption),this.liCollection=this.curUL.querySelectorAll("."+m)},B.prototype.renderSubList=function(i){var s=i.getAttribute("data-uid");if(i.classList.contains(y)&&s){var o=t.closest(i.parentNode,"."+p),n=this.element.querySelector("[pid='"+s+"']");this.curDSLevel.push(s),this.setViewDataSource(this.getSubDS()),n||((n=e.ListBase.createListFromJson(this.curViewDS,this.listBaseOption,this.curDSLevel.length)).setAttribute("pID",s),n.style.display="none",this.renderIntoDom(n)),this.switchView(o,n),this.liCollection=this.curUL.querySelectorAll("."+m);var a=r(this.getSelectedItems().data,this.listBaseOption.fields);this.header(a[this.listBaseOption.fields.text],!0),this.selectedLI=void 0}},B.prototype.renderIntoDom=function(e){this.contentContainer.appendChild(e)},B.prototype.renderList=function(){this.setViewDataSource(),this.createList(),this.contentContainer=t.createElement("div",{className:C}),this.element.appendChild(this.contentContainer),this.renderIntoDom(this.ulElement)},B.prototype.getElementUID=function(e){var t={};return e instanceof Element?t.id=e.getAttribute("data-uid"):t=e,t},B.prototype.render=function(){this.element.classList.add(c),t.attributes(this.element,{role:"list",tabindex:"0"}),this.setCSSClass(),this.setEnableRTL(),this.setEnable(),this.setSize(),this.wireEvents(),this.header(),this.setLocalData(),this.setHTMLAttribute(),this.rippleFn=t.rippleEffect(this.element,{selector:"."+m})},B.prototype.destroy=function(){this.unWireEvents();var e=[c,this.cssClass,b,"e-rtl","e-has-header"];t.removeClass([this.element],e),this.rippleFn(),U.prototype.destroy.call(this)},B.prototype.back=function(){var e=this.curDSLevel[this.curDSLevel.length-1];if(void 0!==e&&!this.isInAnimation()){this.curDSLevel.pop(),this.setViewDataSource(this.getSubDS());var t=this.element.querySelector("[data-uid='"+e+"']"),i=this.curUL;t?t=t.parentElement:(this.createList(),this.renderIntoDom(this.ulElement),t=this.curUL);var s=r(this.curDSJSON,this.listBaseOption.fields)[this.fields.text];this.switchView(i,t,!0),this.removeSelect(),this.liCollection=this.curUL.querySelectorAll("."+m),this.header(this.curDSLevel.length?s:this.headerTitle,!!this.curDSLevel.length)}},B.prototype.selectItem=function(e){t.isNullOrUndefined(e)||(this.showCheckBox?this.setCheckboxLI(this.getLiFromObjOrElement(e)):this.setSelectLI(this.getLiFromObjOrElement(e)))},B.prototype.getLiFromObjOrElement=function(e){var i;if(!t.isNullOrUndefined(e))if("string"==typeof this.dataSource[0]){for(var s=e.getAttribute("data-uid").toString(),o=0;o<this.liCollection.length;o++)if(this.liCollection[o].getAttribute("data-uid").toString()===s){i=this.liCollection[o];break}}else{var n=this.getItemData(e),a=r(n,this.listBaseOption.fields);if(n&&(i=this.element.querySelector('[data-uid="'+a[this.fields.id]+'"]'),t.isNullOrUndefined(i))){var l=this.element.querySelectorAll("."+m);for(o=0;o<l.length;o++)l[o].innerText.trim()===n.text&&(i=l[o])}}return i},B.prototype.selectMultipleItems=function(e){if(!t.isNullOrUndefined(e))for(var i=0;i<e.length;i++)t.isNullOrUndefined(e[i])||this.selectItem(e[i])},B.prototype.getSelectedItems=function(){if(this.selectedId=[],this.showCheckBox){var e=this.element.getElementsByClassName(h),i=[],s=[];this.selectedId=[];for(var o=0;o<e.length;o++)if("string"==typeof this.dataSource[0])i.push(e[o].innerText.trim());else{var n=r(this.getItemData(e[o]),this.listBaseOption.fields);i.push(n[this.listBaseOption.fields.text]),s.push(this.getItemData(e[o])),this.selectedId.push(n[this.listBaseOption.fields.id])}return"string"==typeof this.dataSource[0]?{item:e,data:this.dataSource,text:i}:{item:e,data:s,text:i}}var a=this.element.getElementsByClassName(h)[0];n=r(this.getItemData(a),this.listBaseOption.fields);return"string"==typeof this.dataSource[0]?t.isNullOrUndefined(a)?void 0:{item:a,data:this.dataSource,text:a.innerText.trim()}:t.isNullOrUndefined(n)||t.isNullOrUndefined(a)?void 0:(this.selectedId.push(n[this.listBaseOption.fields.id]),{text:n[this.listBaseOption.fields.text],item:a,data:this.getItemData(a)})},B.prototype.findItem=function(e){return this.findItemFromDS(this.dataSource,e)},B.prototype.enableItem=function(e){this.setItemState(e,!0)},B.prototype.disableItem=function(e){this.setItemState(e,!1)},B.prototype.setItemState=function(e,t){var i=this.getItemData(e),s=r(i,this.listBaseOption.fields);if(i){var o=this.element.querySelector('[data-uid="'+s[this.fields.id]+'"]');t?(o&&o.classList.remove(b),delete i[this.fields.enabled]):t||(o&&o.classList.add(b),i[this.fields.enabled]=!1)}},B.prototype.showItem=function(e){this.showHideItem(e,!1,"")},B.prototype.hideItem=function(e){this.showHideItem(e,!0,"none")},B.prototype.showHideItem=function(e,t,i){var s=this.getItemData(e),o=r(s,this.listBaseOption.fields);if(s){var n=this.element.querySelector('[data-uid="'+o[this.fields.id]+'"]');n&&(n.style.display=i),t?s[this.fields.isVisible]=!1:delete s[this.fields.isVisible]}},B.prototype.addItem=function(e,t){var i=this.findItemFromDS(this.dataSource,t),s=r(i,this.listBaseOption.fields)[this.fields.child];s||(s=[]),s=s.concat(e),i instanceof Array?(this.dataSource=this.localData=i.concat(e),this.setViewDataSource()):i[this.fields.child]=s,this.resetCurrentList()},B.prototype.removeItem=function(e){this.removeItemFromList(e,!0)},B.prototype.removeItemFromList=function(e,i){var s=this,o=!1;if("string"==typeof this.dataSource[0]){if("object"==typeof e){var n=[],a=0;this.liCollection.forEach(function(t){t===e?(o=!0,s.removeElement(t),s.dataSource.splice(a,1),s.localData=s.dataSource):n.push(t),a++}),this.liCollection=n}else if("string"==typeof e){var l=[],c=0,d=[];this.liCollection.forEach(function(t){t.innerText.trim()===e?(o=!0,s.removeElement(t)):(l.push(t),d.push(s.dataSource[c])),c++}),this.localData=this.curViewDS=this.dataSource=d,this.liCollection=l}var u=this.getSelectedItems();if(this.selectedData=t.isNullOrUndefined(u)?void 0:u.text,void 0,i&&o){if(this.resetList=!0,this.resetCurrentList(),!this.showCheckBox&&this.selectedData&&this.selectedData.length){this.removeSelect();var p=this.dataSource.lastIndexOf(this.selectedData);this.liCollection[p].classList.add(h),this.liCollection[p].setAttribute("aria-selected","true")}this.resetList=!1}}else{t.isNullOrUndefined(this.getSelectedItems())?void 0:this.getSelectedItems().data;var m,f=this.getElementUID(e),y=this.findItemFromDS(this.dataSource,f,!0);if(y&&e){var v;y.some(function(e,t,i){var o=r(e,s.listBaseOption.fields);return!(!f.id&&!f.text||f.id&&o[s.fields.id]!==f.id||f.text&&o[s.fields.text]!==f.text)&&(m=i,v=t,!0)}),this.removeElement(this.getLiFromObjOrElement(m[v])),m.splice(v,1),this.curViewDS=m}u=this.getSelectedItems();this.selectedData=t.isNullOrUndefined(u)?void 0:u.text,i&&m&&(this.resetList=!0,this.resetCurrentList(),this.showCheckBox||t.isNullOrUndefined(u)||this.selectItem(u.item),this.resetList=!1)}},B.prototype.removeMultipleItems=function(e){if(e.length)for(var t=0;t<e.length;t++)t===e.length-1?this.removeItemFromList(e[t],!0):this.removeItemFromList(e[t],!1)},B.prototype.getModuleName=function(){return"listview"},B.prototype.getPersistData=function(){return this.addOnPersist(["cssClass","enableRtl","htmlAttributes","enable","fields","animation","headerTitle","sortOrder","showIcon","height","width","showCheckBox","checkBoxPosition"])},n([t.Property()],B.prototype,"cssClass",void 0),n([t.Property({})],B.prototype,"htmlAttributes",void 0),n([t.Property(!0)],B.prototype,"enable",void 0),n([t.Property([])],B.prototype,"dataSource",void 0),n([t.Property()],B.prototype,"query",void 0),n([t.Complex(e.ListBase.defaultMappedFields,N)],B.prototype,"fields",void 0),n([t.Property({effect:"SlideLeft",duration:400,easing:"ease"})],B.prototype,"animation",void 0),n([t.Property("None")],B.prototype,"sortOrder",void 0),n([t.Property(!1)],B.prototype,"showIcon",void 0),n([t.Property(!1)],B.prototype,"showCheckBox",void 0),n([t.Property("Left")],B.prototype,"checkBoxPosition",void 0),n([t.Property("")],B.prototype,"headerTitle",void 0),n([t.Property(!1)],B.prototype,"showHeader",void 0),n([t.Property("")],B.prototype,"height",void 0),n([t.Property("")],B.prototype,"width",void 0),n([t.Property(null)],B.prototype,"template",void 0),n([t.Property(null)],B.prototype,"groupTemplate",void 0),n([t.Event()],B.prototype,"select",void 0),n([t.Event()],B.prototype,"actionBegin",void 0),n([t.Event()],B.prototype,"actionComplete",void 0),n([t.Event()],B.prototype,"actionFailure",void 0),B=n([t.NotifyPropertyChanges],B)}(t.Component);e.FieldSettings=N,e.ListView=U,e.getFieldValues=r,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-lists.umd.min.js.map

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 15.4.24
+*  version : 15.4.26
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -14,2 +14,3 @@ *  Use of this code is subject to the terms of our license.
 import * as _data from '@syncfusion/ej2-data';
+import * as _buttons from '@syncfusion/ej2-buttons';
 
@@ -20,2 +21,3 @@ export declare namespace ej {
     const data: typeof _data;
+    const buttons: typeof _buttons;
 }

package.json

 {
   "name": "@syncfusion/ej2-lists",
-  "version": "15.4.26",
+  "version": "16.1.24",
   "description": "Essential JS 2 List Components",
@@ -11,4 +11,5 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-data": "^15.4.23"
+    "@syncfusion/ej2-base": "^16.1.24",
+    "@syncfusion/ej2-data": "^16.1.24",
+    "@syncfusion/ej2-buttons": "^16.1.24"
   },
@@ -15,0 +16,0 @@ "devDependencies": {

src/common/list-base.d.ts

@@ -125,3 +125,3 @@ import { Query } from '@syncfusion/ej2-data';
         [key: string]: Object;
-    }[], fields?: FieldsMapping): HTMLElement;
+    }[], fields?: FieldsMapping, options?: ListBaseOptions): HTMLElement;
     /**
@@ -172,3 +172,3 @@ * Created header items from group template.
 }
-export declare type Position = 'right' | 'left';
+export declare type Position = 'Right' | 'Left';
 export interface AriaAttributesMapping {
@@ -175,0 +175,0 @@ level?: number;

src/common/list-base.js

@@ -67,3 +67,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_data_1) {
             moduleName: 'list',
-            expandIconPosition: 'right'
+            expandIconPosition: 'Right'
         };
@@ -157,2 +157,5 @@ function createList(dataSource, options, isSingleLevel) {
                 var curItem = dataSource[i];
+                if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {
+                    fieldData = getFieldValues(dataSource[i], fields);
+                }
                 if (Object.keys(dataSource).length && fieldData.hasOwnProperty(fields.id)
@@ -365,5 +368,6 @@ && !ej2_base_1.isNullOrUndefined(fieldData[fields.id])) {
         }
-        function renderContentTemplate(template, dataSource, fields) {
+        function renderContentTemplate(template, dataSource, fields, options) {
             exports.cssClass = getModuleClass(defaultListBaseOptions.moduleName);
             var ulElement = ej2_base_2.createElement('ul', { className: exports.cssClass.ul, attrs: { role: 'presentation' } });
+            var curOpt = ej2_base_1.extend({}, defaultListBaseOptions, options);
             var compiledString = ej2_base_3.compile(template);
@@ -374,4 +378,19 @@ var liCollection = [];
                 var fieldData = getFieldValues(dataSource[i], fields);
-                var item = dataSource[i];
-                var isHeader = item.isHeader;
+                var curItem = dataSource[i];
+                var isHeader = curItem.isHeader;
+                var value = (typeof curItem === 'string' || typeof curItem === 'number') ? curItem : fieldData[fields.value];
+                if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {
+                    var curData = {
+                        dataSource: dataSource,
+                        curData: curItem,
+                        text: value,
+                        options: curOpt,
+                        fields: fields
+                    };
+                    curOpt.itemCreating(curData);
+                }
+                if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {
+                    fieldData = getFieldValues(dataSource[i], fields);
+                    value = fieldData[fields.value];
+                }
                 var li = ej2_base_2.createElement('li', {
@@ -385,7 +404,17 @@ id: id + '-' + i,
                 else {
-                    var value = (typeof item === 'string' || typeof item === 'number') ? item : fieldData[fields.value];
-                    ej2_base_2.append(compiledString(item), li);
+                    ej2_base_2.append(compiledString(curItem), li);
                     li.setAttribute('data-value', value);
                     li.setAttribute('role', 'option');
                 }
+                if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {
+                    var curData = {
+                        dataSource: dataSource,
+                        curData: curItem,
+                        text: value,
+                        item: li,
+                        options: curOpt,
+                        fields: fields
+                    };
+                    curOpt.itemCreated(curData);
+                }
                 liCollection.push(li);
@@ -431,3 +460,3 @@ }
                 }
-                var expandElement = options.expandIconPosition === 'left' ? ej2_base_2.prepend : ej2_base_2.append;
+                var expandElement = options.expandIconPosition === 'Left' ? ej2_base_2.prepend : ej2_base_2.append;
                 expandElement([ej2_base_2.createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + exports.cssClass.textContent));
@@ -579,3 +608,3 @@ }
             exports.cssClass = getModuleClass(curOpt.moduleName);
-            var expandElement = curOpt.expandIconPosition === 'left' ? ej2_base_2.prepend : ej2_base_2.append;
+            var expandElement = curOpt.expandIconPosition === 'Left' ? ej2_base_2.prepend : ej2_base_2.append;
             expandElement([ej2_base_2.createElement('div', { className: 'e-icons ' + curOpt.expandIconClass + ' ' +
@@ -582,0 +611,0 @@ (ej2_base_1.isNullOrUndefined(className) ? '' : className) })], liElement.querySelector('.' + exports.cssClass.textContent));

src/list-view/list-view-model.d.ts

@@ -1,3 +0,3 @@
-import { merge, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, createElement, prepend, closest, remove } from '@syncfusion/ej2-base';import { Component, EventHandler, BaseEventArgs, Property, Complex, Event } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, KeyboardEvents } from '@syncfusion/ej2-base';import { KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, Effect, rippleEffect, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { ListBase, ListBaseOptions, SortOrder, getFieldValues } from '../common/list-base';
-import {AnimationSettings,SelectEventArgs} from "./list-view";
+import { merge, formatUnit, isNullOrUndefined, classList } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, createElement, prepend, closest, remove } from '@syncfusion/ej2-base';import { Component, EventHandler, BaseEventArgs, Property, Complex, Event } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, KeyboardEvents } from '@syncfusion/ej2-base';import { KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, Effect, rippleEffect, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createCheckBox } from '@syncfusion/ej2-buttons';import { ListBase, ListBaseOptions, SortOrder, getFieldValues, FieldsMapping } from '../common/list-base';
+import {AnimationSettings,checkBoxPosition,SelectEventArgs} from "./list-view";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -11,3 +11,3 @@
     /**
-     * Specifies ID field that mapped in dataSource.
+     * ID attribute of specific list-item.
      */
@@ -17,3 +17,3 @@ id?: string;
     /**
-     * Specifies text field that mapped in dataSource.
+     * It is used to map the text value of list item from the dataSource.
      */
@@ -23,3 +23,3 @@ text?: string;
     /**
-     * Specifies checked field that mapped in dataSource.
+     * This property used to check whether the list item is in checked state or not.
      */
@@ -29,3 +29,3 @@ isChecked?: string;
     /**
-     * Specifies visibility field that mapped in dataSource.
+     * To check whether the visibility state of list item.
      */
@@ -35,3 +35,3 @@ isVisible?: string;
     /**
-     * Specifies enabled field that mapped in dataSource.
+     * It is used to enable the list item
      */
@@ -41,3 +41,4 @@ enabled?: string;
     /**
-     * Specifies icon CSS class field that mapped in dataSource.
+     * It is used to customize the icon to the list items dynamically.
+     *  We can add specific image to the icons using iconCss property.
      */
@@ -47,3 +48,6 @@ iconCss?: string;
     /**
-     * Specifies child dataSource field that mapped in dataSource.
+     * This property used for nested navigation of list-items.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/nested-list.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
@@ -53,3 +57,3 @@ child?: string;
     /**
-     * Specifies title text field that mapped in dataSource.
+     * It is used to display `tooltip content of text` while hovering on list items.
      */
@@ -59,3 +63,6 @@ tooltip?: string;
     /**
-     * Specifies category field that mapped in dataSource.
+     * It wraps the list view element into a group based on the value of groupBy property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/grouping.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
@@ -65,3 +72,3 @@ groupBy?: string;
     /**
-     * Specifies sorting field that mapped in dataSource.
+     * It is used to enable the sorting of list items to be ascending or descending.
      */
@@ -71,3 +78,3 @@ sortBy?: string;
     /**
-     * Specifies list html attributes field that mapped in dataSource.
+     * Defines the HTML attributes such as id, class, etc,. for the specific list item.
      */
@@ -77,3 +84,7 @@ htmlAttributes?: string;
     /**
-     * Specifies when need fetch specific table from remote data.
+     * It is used to fetch a specified named table data while using serviceUrl of DataManager
+     *  in dataSource property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/data/getting-started.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
@@ -90,4 +101,5 @@ tableName?: string;
     /**
-     * Specifies the CSS class name to be added.
-     * @default null
+     * This cssClass property helps to use custom skinning option for ListView component,
+     *  by adding the mentioned class name into root element of ListView.
+     * @default ''
      */
@@ -97,3 +109,3 @@ cssClass?: string;
     /**
-     * Specifies the HTML attributes to be added.
+     * Defines the HTML attributes such as id, class, etc., for the ListView.
      * @default {}
@@ -104,4 +116,4 @@ */
     /**
-     * Specifies whether the ListView is enable or not.
-     * @default null
+     * It specifies enabled state of ListView component.
+     * @default true
      */
@@ -111,3 +123,4 @@ enable?: boolean;
     /**
-     * Contains the list of JSON data to generate ListView items.
+     * It provides the data to render the ListView component which is mapped
+     *  with the fields of ListView.
      * @default []
@@ -118,4 +131,7 @@ */
     /**
-     * Specifies the query that need to process remote dataSource.
-     * @default
+     * It is used to fetch the specific data from dataSource by using where, select key words.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/data-binding.html?lang=typescript#bind-to-remote-data here}
+     *  to know more about this property with demo.
+     * @default null
      */
@@ -125,3 +141,4 @@ query?: Query;
     /**
-     * Specifies the field settings to map keys from the dataSource.
+     * It is used to map keys from the dataSource which extracts the appropriate data from the dataSource
+     *  with specified mapped with the column fields to render the ListView.
      * @default ListBase.defaultMappedFields
@@ -132,3 +149,3 @@ */
     /**
-     * Configure the animation that affect in sub list navigation.
+     * It is used to apply the animation to sub list navigation of list items.
      * @default { effect: 'SlideLeft', duration: 400, easing: 'ease' }
@@ -139,3 +156,3 @@ */
     /**
-     * Specifies the sort order to sort the dataSource.
+     * It is used to enable the sorting of list items to be ascending or descending.
      * @default 'None'
@@ -146,3 +163,3 @@ */
     /**
-     * Specifies whether the icon to be shown or not.
+     * Using this property, we can show or hide the icon of list item.
      * @default false
@@ -153,3 +170,15 @@ */
     /**
-     * Specifies Header Title.
+     * Using this property, we can show or hide the `checkbox`.
+     * @default false
+     */
+    showCheckBox?: boolean;
+
+    /**
+     * It is used to set the position of check box in an item.
+     * @default 'Left'
+     */
+    checkBoxPosition?: checkBoxPosition;
+
+    /**
+     * It is used to set the title of ListView component.
      * @default ""
@@ -160,4 +189,4 @@ */
     /**
-     * Specifies whether to show the header.
-     * @default ""
+     * Using this property, we can show or hide the header of ListView component.
+     * @default false
      */
@@ -167,3 +196,3 @@ showHeader?: boolean;
     /**
-     * Specifies the element style height.
+     * It is used to set the height of the ListView component.
      * @default ''
@@ -174,3 +203,3 @@ */
     /**
-     * Specifies the element style width.
+     * It sets the width to the ListView component.
      * @default ''
@@ -181,3 +210,6 @@ */
     /**
-     * Specifies the item template.
+     * The ListView supports to customize the content of each list items with the help of template property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/customizing-templates.html?lang=typescript here}
+     *  to know more about this property with demo.
      * @default null
@@ -188,3 +220,6 @@ */
     /**
-     * Specifies the group header template.
+     * The ListView has an option to custom design the group header title with the help of groupTemplate property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/15.4.23/documentation/list-view/customizing-templates.html?lang=typescript#group-template here}
+     *  to know more about this property with demo.
      * @default null
@@ -195,3 +230,3 @@ */
     /**
-     * Event triggers when we select the list item.
+     * We can trigger the `select` event when we select the list item in the component.
      * @event
@@ -202,3 +237,3 @@ */
     /**
-     * Event triggers before loading.
+     * We can trigger `actionBegin` event before every ListView action starts.
      * @event
@@ -209,3 +244,4 @@ */
     /**
-     * Event triggers before loading.
+     * We can trigger `actionComplete` event for every ListView action success event
+     *  with the dataSource parameter.
      * @event
@@ -216,3 +252,4 @@ */
     /**
-     * Event triggers when load fails.
+     * We can trigger `actionFailure` event for every ListView action failure event
+     *  with the dataSource parameter.
      * @event
@@ -219,0 +256,0 @@ */

src/list-view/list-view.d.ts

@@ -5,11 +5,11 @@ import { Component, BaseEventArgs } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { SortOrder } from '../common/list-base';
+import { ListBaseOptions, SortOrder, FieldsMapping } from '../common/list-base';
 import { ListViewModel, FieldSettingsModel } from './list-view-model';
 export interface Fields {
     /**
-     * Specifies ID field that mapped in dataSource.
+     * ID attribute of specific list-item.
      */
     id?: string;
     /**
-     * Specifies text field that mapped in dataSource.
+     * It is used to map the text value of list item from the dataSource.
      */
@@ -20,47 +20,58 @@ text?: string;
     /**
-     * Specifies ID field that mapped in dataSource.
+     * ID attribute of specific list-item.
      */
     id: string;
     /**
-     * Specifies text field that mapped in dataSource.
+     * It is used to map the text value of list item from the dataSource.
      */
     text: string;
     /**
-     * Specifies checked field that mapped in dataSource.
+     * This property used to check whether the list item is in checked state or not.
      */
     isChecked: string;
     /**
-     * Specifies visibility field that mapped in dataSource.
+     * To check whether the visibility state of list item.
      */
     isVisible: string;
     /**
-     * Specifies enabled field that mapped in dataSource.
+     * It is used to enable the list item
      */
     enabled: string;
     /**
-     * Specifies icon CSS class field that mapped in dataSource.
+     * It is used to customize the icon to the list items dynamically.
+     *  We can add specific image to the icons using iconCss property.
      */
     iconCss: string;
     /**
-     * Specifies child dataSource field that mapped in dataSource.
+     * This property used for nested navigation of list-items.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/nested-list.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
     child: string;
     /**
-     * Specifies title text field that mapped in dataSource.
+     * It is used to display `tooltip content of text` while hovering on list items.
      */
     tooltip: string;
     /**
-     * Specifies category field that mapped in dataSource.
+     * It wraps the list view element into a group based on the value of groupBy property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/grouping.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
     groupBy: string;
     /**
-     * Specifies sorting field that mapped in dataSource.
+     * It is used to enable the sorting of list items to be ascending or descending.
      */
     sortBy: string;
     /**
-     * Specifies list html attributes field that mapped in dataSource.
+     * Defines the HTML attributes such as id, class, etc,. for the specific list item.
      */
     htmlAttributes: string;
     /**
-     * Specifies when need fetch specific table from remote data.
+     * It is used to fetch a specified named table data while using serviceUrl of DataManager
+     *  in dataSource property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/data/getting-started.html?lang=typescript here}
+     *  to know more about this property with demo.
      */
@@ -74,11 +85,11 @@ tableName: string;
     /**
-     * Specifies effect that shown in sub list transform.
+     * It is used to specify the effect which is shown in sub list transform.
      */
     effect?: ListViewEffect;
     /**
-     * Specifies time duration to transform object.
+     * It is used to specify the time duration of transform object.
      */
     duration?: number;
     /**
-     * Specifies easing effect applied while transform.
+     * It is used to specify the easing effect applied while transform
      */
@@ -92,2 +103,6 @@ easing?: string;
 /**
+ * ListView check box positions
+ */
+export declare type checkBoxPosition = 'Left' | 'Right';
+/**
  * Represents the EJ2 ListView control.
@@ -121,3 +136,2 @@ * ```html
     private contentContainer;
-    private selectedItems;
     private keyboardModule;
@@ -129,10 +143,16 @@ private touchModule;
     private rippleFn;
+    private isNestedList;
+    private currentLiElements;
+    private resetList;
+    private selectedData;
+    private selectedId;
     private aniObj;
     /**
-     * Specifies the CSS class name to be added.
-     * @default null
+     * This cssClass property helps to use custom skinning option for ListView component,
+     *  by adding the mentioned class name into root element of ListView.
+     * @default ''
      */
     cssClass: string;
     /**
-     * Specifies the HTML attributes to be added.
+     * Defines the HTML attributes such as id, class, etc., for the ListView.
      * @default {}
@@ -144,8 +164,9 @@ */
     /**
-     * Specifies whether the ListView is enable or not.
-     * @default null
+     * It specifies enabled state of ListView component.
+     * @default true
      */
     enable: boolean;
     /**
-     * Contains the list of JSON data to generate ListView items.
+     * It provides the data to render the ListView component which is mapped
+     *  with the fields of ListView.
      * @default []
@@ -157,8 +178,12 @@ */
     /**
-     * Specifies the query that need to process remote dataSource.
-     * @default
+     * It is used to fetch the specific data from dataSource by using where, select key words.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/data-binding.html?lang=typescript#bind-to-remote-data here}
+     *  to know more about this property with demo.
+     * @default null
      */
     query: Query;
     /**
-     * Specifies the field settings to map keys from the dataSource.
+     * It is used to map keys from the dataSource which extracts the appropriate data from the dataSource
+     *  with specified mapped with the column fields to render the ListView.
      * @default ListBase.defaultMappedFields
@@ -168,3 +193,3 @@ */
     /**
-     * Configure the animation that affect in sub list navigation.
+     * It is used to apply the animation to sub list navigation of list items.
      * @default { effect: 'SlideLeft', duration: 400, easing: 'ease' }
@@ -174,3 +199,3 @@ */
     /**
-     * Specifies the sort order to sort the dataSource.
+     * It is used to enable the sorting of list items to be ascending or descending.
      * @default 'None'
@@ -180,3 +205,3 @@ */
     /**
-     * Specifies whether the icon to be shown or not.
+     * Using this property, we can show or hide the icon of list item.
      * @default false
@@ -186,3 +211,13 @@ */
     /**
-     * Specifies Header Title.
+     * Using this property, we can show or hide the `checkbox`.
+     * @default false
+     */
+    showCheckBox: boolean;
+    /**
+     * It is used to set the position of check box in an item.
+     * @default 'Left'
+     */
+    checkBoxPosition: checkBoxPosition;
+    /**
+     * It is used to set the title of ListView component.
      * @default ""
@@ -192,8 +227,8 @@ */
     /**
-     * Specifies whether to show the header.
-     * @default ""
+     * Using this property, we can show or hide the header of ListView component.
+     * @default false
      */
     showHeader: boolean;
     /**
-     * Specifies the element style height.
+     * It is used to set the height of the ListView component.
      * @default ''
@@ -203,3 +238,3 @@ */
     /**
-     * Specifies the element style width.
+     * It sets the width to the ListView component.
      * @default ''
@@ -209,3 +244,6 @@ */
     /**
-     * Specifies the item template.
+     * The ListView supports to customize the content of each list items with the help of template property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/customizing-templates.html?lang=typescript here}
+     *  to know more about this property with demo.
      * @default null
@@ -215,3 +253,6 @@ */
     /**
-     * Specifies the group header template.
+     * The ListView has an option to custom design the group header title with the help of groupTemplate property.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/15.4.23/documentation/list-view/customizing-templates.html?lang=typescript#group-template here}
+     *  to know more about this property with demo.
      * @default null
@@ -221,3 +262,3 @@ */
     /**
-     * Event triggers when we select the list item.
+     * We can trigger the `select` event when we select the list item in the component.
      * @event
@@ -227,3 +268,3 @@ */
     /**
-     * Event triggers before loading.
+     * We can trigger `actionBegin` event before every ListView action starts.
      * @event
@@ -233,3 +274,4 @@ */
     /**
-     * Event triggers before loading.
+     * We can trigger `actionComplete` event for every ListView action success event
+     *  with the dataSource parameter.
      * @event
@@ -239,3 +281,4 @@ */
     /**
-     * Event triggers when load fails.
+     * We can trigger `actionFailure` event for every ListView action failure event
+     *  with the dataSource parameter.
      * @event
@@ -258,3 +301,8 @@ */
     protected preRender(): void;
+    private renderCheckbox(args);
+    private checkItem(args, checkboxElement);
+    private checkboxRevert();
+    private setCheckbox();
     private clickHandler(e);
+    private removeElement(element);
     private hoverHandler(e);
@@ -265,2 +313,3 @@ private leaveHandler(e);
     private enterKeyHandler(e);
+    private spaceKeyHandler(e);
     private keyActionHandler(e);
@@ -275,2 +324,4 @@ private swipeActionHandler(e);
     private isValidLI(li);
+    private setCheckboxLI(li, e?);
+    private selectEventData(li, e?);
     private setSelectLI(li, e?);
@@ -294,24 +345,28 @@ private setHoverLI(li);
     /**
-     * To Initialize the control rendering.
+     * It is used to Initialize the control rendering.
      */
     render(): void;
     /**
-     * To destroy the widget.
+     * It is used to destroy the ListView component.
      */
     destroy(): void;
     /**
-     * Function helps to switch back from navigated sub list.
+     * It helps to switch back from navigated sub list.
      */
     back(): void;
     /**
-     * Function that used to select the list item based on an input.
+     * It is used to select the list item from the ListView.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
      */
     selectItem(obj: Fields | HTMLElement): void;
+    private getLiFromObjOrElement(obj);
+    selectMultipleItems(obj: Fields[] | HTMLElement[]): void;
     /**
-     * Function returns currently selected item details.
+     * It is used to get the currently
+     *  {@link http://ej2.syncfusion.com/documentation/list-view/api-selectedItem.html?lang=typescript selected}
+     *  item details from the list items.
      */
-    getSelectedItem(): SelectedItem;
+    getSelectedItems(): SelectedItem | SelectedCollection;
     /**
-     * Function returns item details based on given input.
+     * It is used to find out an item details from the current list.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
@@ -321,3 +376,3 @@ */
     /**
-     * A function that used to enable the disabled list items based on given input.
+     * A function that used to enable the disabled list items based on passed element.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
@@ -327,3 +382,3 @@ */
     /**
-     * A function that used to disable the list items based on given input.
+     * It is used to disable the list items based on passed element.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
@@ -334,3 +389,3 @@ */
     /**
-     * A function helps to show an items based on given input.
+     * It is used to show an list item from the ListView.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
@@ -340,3 +395,3 @@ */
     /**
-     * A function helps to hide an items based on given input.
+     * It is used to hide an item from the ListView.
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
@@ -347,3 +402,5 @@ */
     /**
-     * Function to add new item to current view list.
+     * It adds new item to current ListView.
+     * To add a new item in the list view, we need to pass ‘data’ as array or object and ‘fields’ as object.
+     * For example fields: { text: 'Name', tooltip: 'Name', id:'id'}
      * @param  {{[key:string]:Object}[]} data - Array JSON Data that need to add.
@@ -356,6 +413,12 @@ * @param  {Fields} fields - Fields as an Object with ID and Text fields.
     /**
-     * A function that removes the item from data source based on given input.
+     * A function that removes the item from data source based on passed element like fields: { text: 'Name', tooltip: 'Name', id:'id'}
      * @param  {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.
      */
     removeItem(obj: Element | Fields): void;
+    private removeItemFromList(obj, resetList?);
+    /**
+     * A function that removes multiple item from list view based on given input.
+     * @param  {Fields[] | HTMLElement[]} obj - We can pass array of elements or array of field Object with ID and Text fields.
+     */
+    removeMultipleItems(obj: HTMLElement[] | Fields[]): void;
     protected getModuleName(): string;
@@ -369,11 +432,11 @@ /**
     /**
-     * Selected Item text.
+     * It denotes the Selected Item text.
      */
     text: string;
     /**
-     * Selected Item list element.
+     * It denotes the Selected Item list element.
      */
     item: HTMLElement | Element;
     /**
-     * Selected Item dataSource JSON object.
+     * It denotes the Selected Item dataSource JSON object.
      */
@@ -384,2 +447,20 @@ data: {
 }
+export interface SelectedCollection {
+    /**
+     * It denotes the Selected Item text data or collection.
+     */
+    text: string | string[];
+    /**
+     * It denotes the Selected Item list element or element collection.
+     */
+    item: HTMLElement | Element[] | HTMLCollection;
+    /**
+     * It denotes the Selected Item dataSource JSON object or object collection.
+     */
+    data: {
+        [key: string]: Object;
+    } | {
+        [key: string]: Object;
+    }[] | string[];
+}
 export interface SelectEventArgs extends BaseEventArgs, SelectedItem {
@@ -394,2 +475,22 @@ /**
     event: MouseEvent | KeyboardEvent;
+    /**
+     * It is used to denote the index of the selected element.
+     */
+    index: number;
+    /**
+     * It is used to check whether the element is checked or not.
+     */
+    isChecked?: boolean;
 }
+export interface ItemCreatedArgs {
+    curData: {
+        [key: string]: Object;
+    };
+    dataSource: {
+        [key: string]: Object;
+    } | string[];
+    fields: FieldsMapping;
+    item: HTMLElement;
+    options: ListBaseOptions;
+    text: string;
+}

src/list-view/list-view.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../common/list-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_data_1, list_base_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-buttons", "../common/list-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_data_1, ej2_buttons_1, list_base_1) {
     "use strict";
@@ -52,3 +52,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         icon: 'e-icons',
-        backIcon: 'e-icon-back'
+        backIcon: 'e-icon-back',
+        checkboxWrapper: 'e-checkbox-wrapper',
+        checkbox: 'e-checkbox',
+        checked: 'e-check',
+        checkboxIcon: 'e-frame',
+        checkboxRight: 'e-checkbox-right',
+        checkboxLeft: 'e-checkbox-left'
     };
@@ -112,5 +118,11 @@ var FieldSettings = (function (_super) {
                 end: 'end',
-                tab: 'tab'
+                tab: 'tab',
+                space: 'space'
             };
             _this.animateOptions = {};
+            _this.isNestedList = false;
+            _this.currentLiElements = [];
+            _this.resetList = false;
+            _this.selectedData = [];
+            _this.selectedId = [];
             _this.aniObj = new ej2_base_5.Animation(_this.animateOptions);
@@ -153,2 +165,6 @@ return _this;
                         break;
+                    case 'showCheckBox':
+                    case 'checkBoxPosition':
+                        this.setCheckbox();
+                        break;
                     case 'dataSource':
@@ -286,5 +302,85 @@ this.reRender();
                 },
-                fields: this.fields.properties, sortOrder: this.sortOrder, showIcon: this.showIcon
+                fields: this.fields.properties, sortOrder: this.sortOrder, showIcon: this.showIcon,
+                itemCreated: this.renderCheckbox.bind(this)
             };
         };
+        ListView.prototype.renderCheckbox = function (args) {
+            if (this.showCheckBox && this.isValidLI(args.item) && !this.isNestedList) {
+                if (args.item.classList.contains(classNames.hasChild)) {
+                    this.checkboxRevert();
+                }
+                else {
+                    var checkboxElement = void 0;
+                    var fieldData = void 0;
+                    checkboxElement = ej2_buttons_1.createCheckBox(false, { checked: false, enableRtl: this.enableRtl });
+                    checkboxElement.setAttribute('role', 'checkbox');
+                    var frameElement_1 = checkboxElement.querySelector('.' + classNames.checkboxIcon);
+                    args.item.classList.add('e-checklist');
+                    args.item.firstElementChild.classList.add(classNames.checkbox);
+                    if (typeof this.dataSource[0] !== 'string') {
+                        fieldData = list_base_1.getFieldValues(args.curData, this.listBaseOption.fields);
+                        if (!this.resetList && fieldData[this.listBaseOption.fields.isChecked]) {
+                            this.checkItem(args, checkboxElement);
+                        }
+                        else if (this.selectedData.indexOf(fieldData[this.listBaseOption.fields.text]) !== -1 &&
+                            this.selectedId.indexOf(fieldData[this.listBaseOption.fields.id]) !== -1) {
+                            this.checkItem(args, checkboxElement);
+                        }
+                    }
+                    else if (typeof this.dataSource[0] === 'string' && this.selectedData.indexOf(args.text) !== -1) {
+                        this.checkItem(args, checkboxElement);
+                    }
+                    checkboxElement.setAttribute('aria-checked', frameElement_1.classList.contains(classNames.checked) ? 'true' : 'false');
+                    if (this.checkBoxPosition === 'Left') {
+                        checkboxElement.classList.add(classNames.checkboxLeft);
+                        args.item.firstElementChild.insertBefore(checkboxElement, args.item.firstElementChild.childNodes[0]);
+                    }
+                    else {
+                        checkboxElement.classList.add(classNames.checkboxRight);
+                        args.item.firstElementChild.appendChild(checkboxElement);
+                    }
+                    this.currentLiElements.push(args.item);
+                }
+            }
+        };
+        ListView.prototype.checkItem = function (args, checkboxElement) {
+            args.item.classList.add(classNames.selected);
+            checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);
+            checkboxElement.setAttribute('aria-checked', 'true');
+        };
+        ListView.prototype.checkboxRevert = function () {
+            this.isNestedList = true;
+            this.setProperties({ 'showCheckBox': false }, true);
+            for (var i = 0; i < this.currentLiElements.length; i++) {
+                if (this.currentLiElements[i].querySelector('.' + classNames.checkboxWrapper)) {
+                    this.currentLiElements[i].firstElementChild.classList.remove(classNames.checkbox);
+                    this.removeElement(this.currentLiElements[i].firstElementChild.firstElementChild);
+                }
+            }
+        };
+        ListView.prototype.setCheckbox = function () {
+            var _this = this;
+            if (this.showCheckBox && !this.curUL.querySelector('.' + classNames.hasChild)) {
+                var args_1 = {
+                    item: undefined, curData: undefined, dataSource: undefined, fields: undefined,
+                    options: undefined, text: ''
+                };
+                this.liCollection.forEach(function (element) {
+                    args_1.item = element;
+                    args_1.curData = _this.getItemData(element);
+                    if (element.querySelector('.' + classNames.checkboxWrapper)) {
+                        _this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
+                    }
+                    _this.renderCheckbox(args_1);
+                });
+            }
+            else {
+                this.liCollection.forEach(function (element) {
+                    element.firstElementChild.classList.remove(classNames.checkbox);
+                    if (element.querySelector('.' + classNames.checkboxWrapper)) {
+                        _this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
+                    }
+                });
+            }
+        };
         ListView.prototype.clickHandler = function (e) {
@@ -301,5 +397,13 @@ var target = e.target;
                 }
-                this.setSelectLI(li, e);
+                if (this.enable && this.showCheckBox && this.isValidLI(li)) {
+                    this.setCheckboxLI(li, e);
+                }
+                else {
+                    this.setSelectLI(li, e);
+                }
             }
         };
+        ListView.prototype.removeElement = function (element) {
+            return element && element.parentNode && element.parentNode.removeChild(element);
+        };
         ListView.prototype.hoverHandler = function (e) {
@@ -319,6 +423,8 @@ var curLi = ej2_base_2.closest(e.target.parentNode, '.' + classNames.listItem);
                 focusedElement.classList.remove(classNames.focused);
-                focusedElement.classList.remove(classNames.selected);
+                if (!this.showCheckBox) {
+                    focusedElement.classList.remove(classNames.selected);
+                }
             }
             var index = !end ? 0 : li.length - 1;
-            if (li[index].classList.contains(classNames.hasChild)) {
+            if (li[index].classList.contains(classNames.hasChild) || this.showCheckBox) {
                 li[index].classList.add(classNames.focused);
@@ -334,3 +440,3 @@ }
             var hasChild = !ej2_base_1.isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;
-            if (hasChild) {
+            if (hasChild || this.showCheckBox) {
                 li = this.curUL.querySelector('.' + classNames.focused) || this.curUL.querySelector('.' + classNames.selected);
@@ -341,5 +447,7 @@ siblingLI = list_base_1.ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);
                         li.classList.remove(classNames.focused);
-                        li.classList.remove(classNames.selected);
+                        if (!this.showCheckBox) {
+                            li.classList.remove(classNames.selected);
+                        }
                     }
-                    if (siblingLI.classList.contains(classNames.hasChild)) {
+                    if (siblingLI.classList.contains(classNames.hasChild) || this.showCheckBox) {
                         siblingLI.classList.add(classNames.focused);
@@ -366,2 +474,8 @@ }
         };
+        ListView.prototype.spaceKeyHandler = function (e) {
+            if (this.enable && this.showCheckBox) {
+                var li = this.curUL.querySelector('.' + classNames.focused);
+                this.setCheckboxLI(li, e);
+            }
+        };
         ListView.prototype.keyActionHandler = function (e) {
@@ -391,2 +505,5 @@ e.preventDefault();
                     break;
+                case 'space':
+                    this.spaceKeyHandler(e);
+                    break;
             }
@@ -402,3 +519,3 @@ };
             var activeElement = this.curUL.querySelector('[aria-selected = true]');
-            if (focusedElement) {
+            if (focusedElement && !this.showCheckBox) {
                 focusedElement.classList.remove(classNames.focused);
@@ -430,5 +547,5 @@ if (activeElement) {
             var selectedList = this.curUL.querySelector('.' + classNames.selected);
-            if (!selectedList && this.curUL) {
+            if ((!selectedList && this.curUL) || this.showCheckBox) {
                 var li = this.curUL.querySelector('.' + classNames.listItem);
-                if (li.classList.contains(classNames.hasChild)) {
+                if (li.classList.contains(classNames.hasChild) || this.showCheckBox) {
                     var focusedElement = this.curUL.querySelector('.' + classNames.focused);
@@ -458,3 +575,2 @@ if (ej2_base_1.isNullOrUndefined(focusedElement)) {
                 }
-                this.selectedItems = undefined;
             }
@@ -467,30 +583,52 @@ };
         };
-        ListView.prototype.setSelectLI = function (li, e) {
-            if (this.isValidLI(li)
-                && !li.classList.contains(classNames.selected)
-                && this.enable) {
-                this.removeSelect();
-                li.classList.add(classNames.selected);
-                li.setAttribute('aria-selected', 'true');
-                var data = this.getItemData(li);
-                var fieldData = list_base_1.getFieldValues(data, this.listBaseOption.fields);
-                if (ej2_base_1.isNullOrUndefined(data) && typeof this.dataSource[0] === 'string') {
-                    this.selectedItems = {
-                        item: li,
-                        text: li.innerText.trim(),
-                        data: this.dataSource
-                    };
+        ListView.prototype.setCheckboxLI = function (li, e) {
+            if (this.isValidLI(li) && this.enable && this.showCheckBox) {
+                if (this.curUL.querySelector('.' + classNames.focused)) {
+                    this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
                 }
+                li.classList.add(classNames.focused);
+                var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
+                var checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
+                this.removeHover();
+                if (!checkIcon.classList.contains(classNames.checked)) {
+                    checkIcon.classList.add(classNames.checked);
+                    li.classList.add(classNames.selected);
+                }
                 else {
-                    this.selectedItems = {
-                        item: li,
-                        text: fieldData[this.listBaseOption.fields.text],
-                        data: data
-                    };
+                    checkIcon.classList.remove(classNames.checked);
+                    li.classList.remove(classNames.selected);
                 }
-                var eventArgs = {};
-                ej2_base_1.merge(eventArgs, this.selectedItems);
+                checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?
+                    'true' : 'false');
                 if (e) {
-                    ej2_base_1.merge(eventArgs, { isInteracted: true, event: e });
+                    var eventArgs = this.selectEventData(li, e);
+                    ej2_base_1.merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
+                    this.trigger('select', eventArgs);
                 }
+            }
+        };
+        ListView.prototype.selectEventData = function (li, e) {
+            var data = this.getItemData(li);
+            var fieldData = list_base_1.getFieldValues(data, this.listBaseOption.fields);
+            var selectedItem;
+            if (ej2_base_1.isNullOrUndefined(data) && typeof this.dataSource[0] === 'string') {
+                selectedItem = { item: li, text: li.innerText.trim(), data: this.dataSource };
+            }
+            else {
+                selectedItem = { item: li, text: fieldData[this.listBaseOption.fields.text], data: data };
+            }
+            var eventArgs = {};
+            ej2_base_1.merge(eventArgs, selectedItem);
+            if (e) {
+                ej2_base_1.merge(eventArgs, { isInteracted: true, event: e, index: Array.prototype.indexOf.call(this.curUL.children, li) });
+            }
+            return eventArgs;
+        };
+        ListView.prototype.setSelectLI = function (li, e) {
+            if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.enable) {
+                this.removeSelect();
+                li.classList.add(classNames.selected);
+                li.setAttribute('aria-selected', 'true');
+                this.removeHover();
+                var eventArgs = this.selectEventData(li, e);
                 this.trigger('select', eventArgs);
@@ -507,3 +645,3 @@ this.selectedLI = li;
                 }
-                if (!li.classList.contains(classNames.selected)) {
+                if (!li.classList.contains(classNames.selected) || this.showCheckBox) {
                     li.classList.add(classNames.hover);
@@ -663,2 +801,3 @@ }
         ListView.prototype.createList = function () {
+            this.currentLiElements = [];
             this.ulElement = this.curUL = list_base_1.ListBase.createList(this.curViewDS, this.listBaseOption);
@@ -682,3 +821,3 @@ this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
                 this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
-                var fieldData = list_base_1.getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
+                var fieldData = list_base_1.getFieldValues(this.getSelectedItems().data, this.listBaseOption.fields);
                 this.header((fieldData[this.listBaseOption.fields.text]), true);
@@ -757,22 +896,96 @@ this.selectedLI = undefined;
             if (!ej2_base_1.isNullOrUndefined(obj)) {
-                var resultJSON = this.getItemData(obj);
-                var fieldData = list_base_1.getFieldValues(resultJSON, this.listBaseOption.fields);
-                if (resultJSON) {
-                    var li = this.element.querySelector('[data-uid="'
-                        + fieldData[this.fields.id] + '"]');
-                    if (ej2_base_1.isNullOrUndefined(li)) {
-                        var curLi = this.element.querySelectorAll('.' + classNames.listItem);
-                        for (var i = 0; i < curLi.length; i++) {
-                            if (curLi[i].innerText.trim() === resultJSON.text) {
-                                li = curLi[i];
+                if (this.showCheckBox) {
+                    this.setCheckboxLI(this.getLiFromObjOrElement(obj));
+                }
+                else {
+                    this.setSelectLI(this.getLiFromObjOrElement(obj));
+                }
+            }
+        };
+        ListView.prototype.getLiFromObjOrElement = function (obj) {
+            var li;
+            if (!ej2_base_1.isNullOrUndefined(obj)) {
+                if (typeof this.dataSource[0] === 'string') {
+                    var uid = obj.getAttribute('data-uid').toString();
+                    for (var i = 0; i < this.liCollection.length; i++) {
+                        if (this.liCollection[i].getAttribute('data-uid').toString() === uid) {
+                            li = this.liCollection[i];
+                            break;
+                        }
+                    }
+                }
+                else {
+                    var resultJSON = this.getItemData(obj);
+                    var fieldData = list_base_1.getFieldValues(resultJSON, this.listBaseOption.fields);
+                    if (resultJSON) {
+                        li = this.element.querySelector('[data-uid="'
+                            + fieldData[this.fields.id] + '"]');
+                        if (ej2_base_1.isNullOrUndefined(li)) {
+                            var curLi = this.element.querySelectorAll('.' + classNames.listItem);
+                            for (var i = 0; i < curLi.length; i++) {
+                                if (curLi[i].innerText.trim() === resultJSON.text) {
+                                    li = curLi[i];
+                                }
                             }
                         }
                     }
-                    this.setSelectLI(li);
                 }
             }
+            return li;
         };
-        ListView.prototype.getSelectedItem = function () {
-            return this.selectedItems;
+        ListView.prototype.selectMultipleItems = function (obj) {
+            if (!ej2_base_1.isNullOrUndefined(obj)) {
+                for (var i = 0; i < obj.length; i++) {
+                    if (!ej2_base_1.isNullOrUndefined(obj[i])) {
+                        this.selectItem(obj[i]);
+                    }
+                }
+            }
         };
+        ListView.prototype.getSelectedItems = function () {
+            this.selectedId = [];
+            if (this.showCheckBox) {
+                var liCollection = this.element.getElementsByClassName(classNames.selected);
+                var liTextCollection = [];
+                var liDataCollection = [];
+                this.selectedId = [];
+                for (var i = 0; i < liCollection.length; i++) {
+                    if (typeof this.dataSource[0] === 'string') {
+                        liTextCollection.push(liCollection[i].innerText.trim());
+                    }
+                    else {
+                        var fieldData = list_base_1.getFieldValues(this.getItemData(liCollection[i]), this.listBaseOption.fields);
+                        liTextCollection.push(fieldData[this.listBaseOption.fields.text]);
+                        liDataCollection.push(this.getItemData(liCollection[i]));
+                        this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
+                    }
+                }
+                if (typeof this.dataSource[0] === 'string') {
+                    return { item: liCollection, data: this.dataSource, text: liTextCollection };
+                }
+                else {
+                    return { item: liCollection, data: liDataCollection, text: liTextCollection };
+                }
+            }
+            else {
+                var liElement = this.element.getElementsByClassName(classNames.selected)[0];
+                var fieldData = list_base_1.getFieldValues(this.getItemData(liElement), this.listBaseOption.fields);
+                if (typeof this.dataSource[0] === 'string') {
+                    return (!ej2_base_1.isNullOrUndefined(liElement)) ? {
+                        item: liElement, data: this.dataSource,
+                        text: liElement.innerText.trim()
+                    } : undefined;
+                }
+                else {
+                    if (ej2_base_1.isNullOrUndefined(fieldData) || ej2_base_1.isNullOrUndefined(liElement)) {
+                        return undefined;
+                    }
+                    else {
+                        this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
+                        return { text: fieldData[this.listBaseOption.fields.text], item: liElement,
+                            data: this.getItemData(liElement) };
+                    }
+                }
+            }
+        };
         ListView.prototype.findItem = function (fields) {
@@ -846,28 +1059,102 @@ return this.findItemFromDS(this.dataSource, fields);
         ListView.prototype.removeItem = function (obj) {
+            this.removeItemFromList(obj, true);
+        };
+        ListView.prototype.removeItemFromList = function (obj, resetList) {
             var _this = this;
-            var fields = this.getElementUID(obj);
-            var curDS = this.findItemFromDS(this.dataSource, fields, true);
-            if (curDS && obj) {
+            var currentlySelectedItems = [];
+            var selectedElements = [];
+            var valid = false;
+            if (typeof this.dataSource[0] === 'string') {
+                if (typeof obj === 'object') {
+                    var liCollection_1 = [];
+                    var idx_1 = 0;
+                    this.liCollection.forEach(function (element) {
+                        if (element === obj) {
+                            valid = true;
+                            _this.removeElement(element);
+                            _this.dataSource.splice(idx_1, 1);
+                            _this.localData = _this.dataSource;
+                        }
+                        else {
+                            liCollection_1.push(element);
+                        }
+                        idx_1++;
+                    });
+                    this.liCollection = liCollection_1;
+                }
+                else if (typeof obj === 'string') {
+                    var liCollection_2 = [];
+                    var idx_2 = 0;
+                    var ds_1 = [];
+                    this.liCollection.forEach(function (element) {
+                        if (element.innerText.trim() === obj) {
+                            valid = true;
+                            _this.removeElement(element);
+                        }
+                        else {
+                            liCollection_2.push(element);
+                            ds_1.push(_this.dataSource[idx_2]);
+                        }
+                        idx_2++;
+                    });
+                    this.localData = this.curViewDS = this.dataSource = ds_1;
+                    this.liCollection = liCollection_2;
+                }
+                var values = this.getSelectedItems();
+                this.selectedData = (!ej2_base_1.isNullOrUndefined(values)) ? values.text : undefined;
+                selectedElements = undefined;
+                if (resetList && valid) {
+                    this.resetList = true;
+                    this.resetCurrentList();
+                    if (!this.showCheckBox && this.selectedData && this.selectedData.length) {
+                        this.removeSelect();
+                        var index = this.dataSource.lastIndexOf(this.selectedData);
+                        this.liCollection[index].classList.add(classNames.selected);
+                        this.liCollection[index].setAttribute('aria-selected', 'true');
+                    }
+                    this.resetList = false;
+                }
+            }
+            else {
+                selectedElements = (!ej2_base_1.isNullOrUndefined(this.getSelectedItems())) ?
+                    this.getSelectedItems().data : undefined;
+                var fields_1 = this.getElementUID(obj);
                 var curAr_1;
-                var idx_1;
-                curDS.some(function (data, index, arr) {
-                    var fieldData = list_base_1.getFieldValues(data, _this.listBaseOption.fields);
-                    if ((fields.id || fields.text) &&
-                        (!fields.id || fieldData[_this.fields.id] === fields.id) &&
-                        (!fields.text || fieldData[_this.fields.text] === fields.text)) {
-                        curAr_1 = arr;
-                        idx_1 = index;
-                        return true;
+                var curDS = this.findItemFromDS(this.dataSource, fields_1, true);
+                if (curDS && obj) {
+                    var idx_3;
+                    curDS.some(function (data, index, arr) {
+                        var fieldData = list_base_1.getFieldValues(data, _this.listBaseOption.fields);
+                        if ((fields_1.id || fields_1.text) &&
+                            (!fields_1.id || fieldData[_this.fields.id] === fields_1.id) &&
+                            (!fields_1.text || fieldData[_this.fields.text] === fields_1.text)) {
+                            curAr_1 = arr;
+                            idx_3 = index;
+                            return true;
+                        }
+                        return false;
+                    });
+                    this.removeElement(this.getLiFromObjOrElement(curAr_1[idx_3]));
+                    curAr_1.splice(idx_3, 1);
+                    this.curViewDS = curAr_1;
+                }
+                var values = this.getSelectedItems();
+                this.selectedData = (!ej2_base_1.isNullOrUndefined(values)) ? values.text : undefined;
+                if (resetList && curAr_1) {
+                    this.resetList = true;
+                    this.resetCurrentList();
+                    if (!this.showCheckBox && !ej2_base_1.isNullOrUndefined(values)) {
+                        this.selectItem(values.item);
                     }
-                    return false;
-                });
-                if (!ej2_base_1.isNullOrUndefined(this.selectedItems) && this.selectedItems.data === curAr_1[idx_1]) {
-                    this.selectedItems = undefined;
+                    this.resetList = false;
                 }
-                curAr_1.splice(idx_1, 1);
-                this.curViewDS = curAr_1;
-                this.resetCurrentList();
-                this.selectItem(this.selectedItems);
             }
         };
+        ListView.prototype.removeMultipleItems = function (obj) {
+            if (obj.length) {
+                for (var i = 0; i < obj.length; i++) {
+                    (i === obj.length - 1) ? this.removeItemFromList(obj[i], true) : this.removeItemFromList(obj[i], false);
+                }
+            }
+        };
         ListView.prototype.getModuleName = function () {
@@ -879,3 +1166,3 @@ return 'listview';
                 'enable', 'fields', 'animation', 'headerTitle',
-                'sortOrder', 'showIcon', 'height', 'width']);
+                'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition']);
         };
@@ -910,2 +1197,8 @@ __decorate([
         __decorate([
+            ej2_base_3.Property(false)
+        ], ListView.prototype, "showCheckBox", void 0);
+        __decorate([
+            ej2_base_3.Property('Left')
+        ], ListView.prototype, "checkBoxPosition", void 0);
+        __decorate([
             ej2_base_3.Property('')
@@ -912,0 +1205,0 @@ ], ListView.prototype, "headerTitle", void 0);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3886348

increased by34.12%

Number of package files

55

increased by10%

Lines of code

22594

increased by35.76%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@syncfusion/ej2-buttons@^16.1.24

• + Added@syncfusion/ej2-base@16.4.52(transitive)

• + Added@syncfusion/ej2-buttons@16.4.55(transitive)

• + Added@syncfusion/ej2-data@16.4.52(transitive)

• - Removed@syncfusion/ej2-base@15.4.23(transitive)

• - Removed@syncfusion/ej2-data@15.4.30(transitive)

• Updated@syncfusion/ej2-base@^16.1.24

• Updated@syncfusion/ej2-data@^16.1.24