call-history-plnkr.json

{"index.css":" /* Layout customization */\r\n\r\n .layoutWrapper {\r\n    line-height: initial;\r\n    border: 1px solid black;\r\n    width: 285px;\r\n    height: 505px;\r\n    margin: auto;\r\n    margin-bottom: 15px;\r\n    border-radius: 28px;\r\n    position: relative;\r\n    visibility: hidden;\r\n}\r\n\r\n.layoutWrapper .speaker {\r\n    border: 1px solid black;\r\n    border-radius: 5px;\r\n    width: 33.33333333%;\r\n    height: 5px;\r\n    margin: 15px auto 0px auto;\r\n    position: relative;\r\n}\r\n\r\n.layoutWrapper .outerButton {\r\n    width: 30px;\r\n    height: 30px;\r\n    border: 1px solid black;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    bottom: calc(0% + 10px);\r\n    left: calc(50% - 15px);\r\n}\r\n\r\n.layoutWrapper .camera {\r\n    position: absolute;\r\n    left: calc(-15% - 10px);\r\n    top: -100%;\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    border: 1px solid black;\r\n}\r\n\r\n.layoutWrapper .layout {\r\n    border: 1px solid black;\r\n    margin: 20px 13px 0px 13px;\r\n}\r\n\r\n.layout #list-container .e-list-item {\r\n    cursor: pointer;\r\n}\r\n\r\n.layoutWrapper.e-device-layout {\r\n    visibility: visible;\r\n}\r\n\r\n.e-visbile-layer {\r\n    visibility: visible;\r\n}\r\n\r\n/* ListView customization */\r\n\r\n@font-face {\r\n    font-family: 'Phone Icons';\r\n    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmmdw7AwAAAcwAAAGYaGVhZBAplB8AAADQAAAANmhoZWEHewNsAAAArAAAACRobXR4C9D/4gAAAYAAAAAMbG9jYQCGAMwAAAHEAAAACG1heHABEABjAAABCAAAACBuYW1lDnsAzAAAA2QAAAJJcG9zdOnLJ3wAAAWwAAAASwABAAADUv9qAFoEAP/i//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAA7to7118PPPUACwPoAAAAANafJ7cAAAAA1p8nt//i/+MD6gPpAAAACAACAAAAAAAAAAEAAAADAFcAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6P/iAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAIYAzAADAAAAAAPqA+QAJgAyAFYAABMXFhQPAQYWFx4BFx4BFzY/ATYfARYUDwEGIzEiJicuASc0PwE2MiUXBxc3FzcnNycHJwUHBgceARceARcxNj8BNjQvASYiDwEGJy4BJyYzNzY0LwEmIr6BAQFoFwoJTcZ9CBcNGRJoAwSCAQE0Ql1f4nlqcgFCMwIDAWO1tSy1tSy1tSy1tf5ANFMBAX1zgfhsd1QzFBSBFDcUZwEOdLpJBwFoExOCFDcDpX8CAwJmGTMOfsRIBAgBARJmBASAAQQBM0F9dmrTW2BBMgIHtbUstbUstbUstbUIM1R5aOpyf4YBAVIzFDgUfxMTZgEGQ7h3D2YUNxSAEwAAA//i/+MD6gPpAA0AGwAoAAABDwEXNzU2NC8BLgEiBgUWBDcnBiYnLgE3JwYSExUHFzc2NC8BLgEjIgMgA0u4SxUVUQkbHBr9ypgBQ428WJ9LTUsfvEd5RU67SxUVUQoaDh0BWQNLuEsDFjgWUQwKCW2aeUe8H0tOSp9YvI3+vgJIA0u7URY4FlEMCgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsIEljb25zUmVndWxhckNhbGwgSWNvbnNDYWxsIEljb25zVmVyc2lvbiAxLjBDYWxsIEljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsACAASQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAgAEkAYwBvAG4AcwBDAGEAbABsACAASQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsACAASQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAEXRlbGVwaG9uZS1jYWxsLXdmDXRlbGVwaG9uZS0tMDIAAAA=) format('truetype');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n}\r\n\r\n@font-face {\r\n    font-family: 'Call-icons';\r\n    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRoAAAEoAAAAVmNtYXDOHM5nAAABjAAAAEBnbHlmtaNmiAAAAdQAAAEkaGVhZBAo7yMAAADQAAAANmhoZWEHegNsAAAArAAAACRobXR4C9H/wgAAAYAAAAAMbG9jYQBIAJIAAAHMAAAACG1heHABDwA6AAABCAAAACBuYW1ltZtoBgAAAvgAAAJJcG9zdNgJzA8AAAVEAAAAWAABAAADUv9qAFoEAP/h//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAvvVLOF8PPPUACwPoAAAAANafVTkAAAAA1p9VOf/h/+ED6gPrAAAACAACAAAAAAAAAAEAAAADAC4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAgNS/2oAWgPrAJYAAAABAAAAAAAABAAAAAPo/+ED6P/hAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucA5wL//wAA5wDnAv//AAAAAAABAAYABgAAAAEAAgAAAAAASACSAAL/4f/hA+oD6wAGACgAAAEnAyUnNyclDwEGEgAEPwE2NC8BJgciBg8BBiYnLgE/ATY0LwEmByIGAoldLAFSa5Zd/V8DUUp9AT4BU5JUFRVUGR0QHAxXXKZNUE4hSxUVVRgdDhoC913+rytrll5LBFGS/q7+wH9KVRg8FlUWAQwJTyBNUFClXVUYPBZXFwEJAAL/4f/hA+oD6wALAC0AAAEjFTMVMzUzNSM1IyUPAQYSAAQ/ATY0LwEmByIGDwEGJicuAT8BNjQvASYHIgYCmXp6S3p6S/3mA1FKfQE+AVOSVBUVVBkdEBwMV1ymTVBOIUsVFVUYHQ4aAsRLenpLepoEUZL+rv7Af0pVGDwWVRYBDAlPIE1QUKVdVRg8FlcXAQkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsLWljb25zUmVndWxhckNhbGwtaWNvbnNDYWxsLWljb25zVmVyc2lvbiAxLjBDYWxsLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAtAGkAYwBvAG4AcwBDAGEAbABsAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFHRlbGVwaG9uZS0tLWluY29taW5nF3RlbGVwaG9uZS0tLWFkZGNhbGwtLTAyAAA=) format('truetype');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n}\r\n\r\n.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-multi-line,\r\n.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-multi-line,\r\n.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {\r\n    padding: 5px;\r\n}\r\n\r\n.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-avatar,\r\n.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-avatar,\r\n.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-avatar {\r\n    padding-left: 50px;\r\n    padding-right: 5px;\r\n}\r\n\r\n.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,\r\n.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,\r\n.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {\r\n    top: 5px;\r\n    left: 5px;\r\n}\r\n\r\n.layout #list-container #all,\r\n.layout #list-container #received,\r\n.layout #list-container #missed {\r\n    max-height: 360px;\r\n}\r\n\r\n.layout #list-container {\r\n    height: 405px;\r\n}\r\n\r\n.layout #list-container .received {\r\n    font-family: Call-icons;\r\n}\r\n\r\n.layout #list-container .received:before {\r\n    content: '\\e700';\r\n    font-size: 8px;\r\n    margin-right: 6px;\r\n}\r\n\r\n.layout #list-container .missed {\r\n    font-family: Call-icons;\r\n}\r\n\r\n.layout #list-container .missed:before {\r\n    content: '\\e702';\r\n    font-size: 8px;\r\n    margin-right: 6px;\r\n}\r\n\r\n.layout #list-container .e-icon {\r\n    font-family: 'e-icons';\r\n    background: transparent;\r\n    color: black;\r\n}\r\n\r\n.layout #list-container .e-icon:before {\r\n    content: '\\e902';\r\n}\r\n\r\n/* ListView theme customization */\r\n\r\n.highcontrast .layoutWrapper .layout,\r\n.highcontrast .layoutWrapper .camera,\r\n.highcontrast .layoutWrapper .outerButton,\r\n.highcontrast .layoutWrapper .speaker,\r\n.highcontrast .layoutWrapper {\r\n    border-color: white;\r\n}","newsData":"/**\r\n * ListView Datasource\r\n */\r\nexport let newsData: any = [\r\n    {\r\n        'title': '\tIBM Open-Sources WebSphere Liberty Code',\r\n        'description': 'In late September, IBM announced that it would be open-sourcing the code for WebSphere...',\r\n        'content': '<p>In late September, IBM announced that it would be open-sourcing the code for'\r\n        + ' WebSphere Liberty, an application server intended to facilitate the development of Java'\r\n        + 'apps and microservices. Liberty is intended to allow developers to quickly develop and'\r\n        + 'deploy applications in a variety of environments while functioning seamlessly with other'\r\n        + 'solutions. IBM will continue to offer commercial versions of Liberty that include access to'\r\n        + 'dedicated technical support and advanced capabilities, but the core of the software will be'\r\n        + 'available to any developer.</p><p>By open-sourcing the code, IBM hopes to make Liberty a'\r\n        + 'relevant piece of software for some time to come while further improving the Java'\r\n        + 'development community. This fits in well with IBM’s earlier open-source contributions,'\r\n        + 'including Eclipse OpenJ9. In fact, with WebSphere Liberty, Eclipse OpenJ9, Eclipse'\r\n        + 'MicroProfile—which  IBM was a founding member of—and Java EE, it is possible to have a'\r\n        + 'fully open-licensed Java stack model to build, test, run, and scale Java applications. This'\r\n        + 'is fantastic news for Java developers, and an excellent opportunity to further the'\r\n        + 'standards of Java development for the entire community.</p><p>Are you a Java developer?'\r\n        + 'What do you think of this development? Let us know in the comments below or on Facebook or'\r\n        + ' Twitter.</p>'\r\n    },\r\n    {\r\n        'title': 'The Syncfusion Global License: Your Questions, Answered ',\r\n        'description': 'Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...',\r\n        'content': '<p>Syncfusion recently hosted a webinar to cover the ins and outs of the'\r\n        + 'Syncfusion global license. We received many questions about the license, and our client'\r\n        + 'relations team, led by Pat Staley, has provided answers. Read on for a full overview of the'\r\n        + 'Syncfusion global license, or visit Syncfusion’s YouTube channel to watch the webinar in'\r\n        + 'full.</p><p>Q: Regarding the free license for companies with 5 developers or less than $1m'\r\n        + 'in annual revenue: when does that license expire?</p><p>A: The Community License has'\r\n        + 'several criteria that make it distinct from the global license, so there is no single'\r\n        + 'answer to that question. Any customers with questions about the Community License should'\r\n        + 'contact a Syncfusion sales representative.</p><p>Q: Our business line in health care'\r\n        + 'requires that we obtain business agreements with contractors and vendors. Has Syncfusion'\r\n        + 'signed these kinds of BAs in the past?</p><p>A: We work with many companies that request'\r\n        + 'such documents, and we can always put you in touch with our legal team for'\r\n        + 'specifics.</p><p>Q: We develop products. If we want to use dashboards, do our clients need'\r\n        + 'to buy the Dashboard Server or is it royalty-free?</p><p>A: Please contact'\r\n        + 'clientrelations@syncfusion.com with your contact information and company details. In'\r\n        + 'situations like this, we work with our clients to reach the best solution; there is no'\r\n        + 'single answer.</p><p>Q: Is there a time limit?</p><p>A: Our license model reflects a 1-year'\r\n        + 'term unless you make other arrangements during the sales process.</p><p>Q: Can I use my'\r\n        + 'global license to create software that has Syncfusion controls embedded within it and sell'\r\n        + 'this software to my clients, or does that require a reseller or runtime license?</p><p>A:'\r\n        + 'If you are providing an end-product to your client, and additional coding will not be'\r\n        + 'needed, you may sell your software to your client with just the global license. If the'\r\n        + 'software requires additional work over time, you will need to speak with your Syncfusion'\r\n        + 'sales representative to ensure you have the correct license.</p><p>Q: When does my license'\r\n        + 'expire?</p><p>A: You can log into your portal and view the expiration date under License'\r\n        + 'and Keys.</p><p>Q:  Who is my client relations representative?</p><p>A:  Please send an'\r\n        + 'email to clientrelations@syncfusion.com and we will be happy to have your dedicated client'\r\n        + 'relations representative reach out to you.</p><p>Q:  How do I get added to a portal?'\r\n        + '</p><p>A:  Reach out to your portal administrator, or send an email to'\r\n        + 'clientrelations@syncfusion.com and we will reach out to you to assist.</p><p>Q:  The portal'\r\n        + 'shows my license is expired. How do I get this updated?</p><p>A: Please contact your portal'\r\n        + 'administrator to ensure that you are added to the portal, or you can contact'\r\n        + 'clientrelations@syncfusion.com and our team will assist you.</p><p>Q:  Why don’t I see the'\r\n        + 'global license under My Orders?</p><p>A:  The order may be under a different profile; only'\r\n        + 'orders placed under your login will show.</p><p>Q:  Is the purchase price a one-time fee?'\r\n        + '</p><p>A:  The global license is a subscription, renewing annually unless otherwise'\r\n        + 'negotiated.</p><p>Q:  Is support charged separately?</p><p>A:  No, all support is included'\r\n        + 'in your standard license subscription. However, we do offer consulting services for custom'\r\n        + 'development separate from the global license. You can contact'\r\n        + 'clientrelations@syncfusion.com for more information on consulting if you are'\r\n        + 'interested.</p><p>Q:  I have contractors that do my development. Are they covered by the'\r\n        + 'global license?</p><p>A:  They can be! The flat license structure (project, division, and'\r\n        + 'global) is designed for use by third-party contractors. If that is requested and agreed'\r\n        + 'upon, we will include that information in your Master License Agreement.</p><p>Q:  What is'\r\n        + 'the benefit of including all my users in the portal?</p><p>A:  Developers can see support'\r\n        + 'incidents created within the portal and can receive patches and updates so users are all'\r\n        + 'working on the same version of Syncfusion. Our client relations team also monitors accounts'\r\n        + 'to ensure that you do not have an excessive amount of support incidents open at one time.'\r\n        + 'Ensuring that all of your users are in the portal helps us to manage your account and'\r\n        + 'incidents.</p><p>Q:  Can you tell me more about the client relations department?</p><p>A: '\r\n        + 'The CRD is your trusted advisor within Syncfusion. You will have direct contact with a'\r\n        + 'representative who can assist with service, support, and product education, and who can be'\r\n        + 'the ally you need for your development.</p><p>Q:  If I have a flat license, do I have to'\r\n        + 'update Syncfusion with users I need added to the portal?</p><p>A:  Syncfusion does not need'\r\n        + 'to be notified when a user needs to be added.</p><p>Q:  Why would I want to create a new'\r\n        + 'portal each time I start a new project?</p><p>A:  Not only is this a great organizational'\r\n        + 'feature that keeps your projects autonomous from one another, each portal can support a'\r\n        + 'different product version, allowing you to upgrade each project as needed. There is no'\r\n        + 'co-dependency here.</p><p>Q:   Do I have to assign a platform or component to each project?'\r\n        + 'What if I have multiple components being used on one project?</p><p>A:  The only time'\r\n        + 'Syncfusion will ask you to associate a platform or component with a project is during'\r\n        + 'incident creation. You can use multiple controls or components on one project, but only if'\r\n        + 'the components are using the same product version. As mentioned, the portal can only'\r\n        + 'support one product version at a time.</p><p>'\r\n    },\r\n    {\r\n        'title': 'Interview with Application Security in .NET Succinctly Author Stan Drapkin ',\r\n        'description': 'The following is a short interview with Succinctly series author Stan Drapkin, whose latest book...',\r\n        'content': '<p>The following is a short interview with Succinctly series author Stan Drapkin, whose latest book'\r\n        + 'Application Security in .NET Succinctly was published on Tuesday, October 12. You can download the book'\r\n        + 'here.</p><p>What should people know about application security in the .NET Framework? Why is it important?'\r\n        + '</p><p>Microsoft’s .NET Framework ushered a new era of rapid application development that was almost as powerful as'\r\n        + 'C/C++ development on one hand, but did not have as many sharp edges and opportunities to \"shoot yourself in the'\r\n        + 'foot\" on the other hand. The unfortunate side effect was that .NET developers\\' efforts were mostly spent'\r\n        + 'discovering and calling the APIs provided by the .NET ecosystem, not learning how to use these APIs correctly. Many'\r\n        + 'of the .NET security-related APIs are not safe to use by a casual .NET developer. This book tries to raise'\r\n        + 'awareness of many important application security topics that most .NET developers are bound to run into.</p><p>The'\r\n        + 'importance of understanding the challenges and pitfalls of application security is hard to underestimate. The'\r\n        + 'security breaches are happening weekly if not daily, and their scope and magnitude continue to grow as users'\r\n        + 'entrust (or are forced to entrust) more of their information to digital repositories and their'\r\n        + 'operators.</p><p>When did you first become interested in application security?</p><p>I became interested in'\r\n        + 'application security through a fascination with cryptography when I was 15 years old. I wrote an \"unbreakable\"'\r\n        + 'XOR-based encryption mechanism in Turbo Pascal that I was very proud of. As laughable as it is now, I\\'m sure many'\r\n        + 'folks in the security field have a similar story to share. The writings of Bruce Schneier fueled my interest and'\r\n        + 'made me realize that the information security domain is too focused on cryptographic tools and primitives, and not'\r\n        + 'focused enough on how to use these tools to engineer secure systems.</p><p>By writing this e-book, did you learn'\r\n        + 'anything new yourself?</p><p>I learned that application security and security in general are difficult topics to'\r\n        + 'write about. Unlike basic things like math or computer science, application security is a rapidly moving and'\r\n        + 'evolving field, with new threats, vulnerabilities, exploits, and countermeasures arriving nonstop. The prescriptive'\r\n        + '\"do X, Y, and Z to be safe\" approach to security might work today, but is inadequate tomorrow. Rather than \"giving'\r\n        + 'readers a fish,\" I’ve tried to \"teach them how to fish\" in hopes that a foundational understanding of core concepts'\r\n        + 'will provide longer-term value.</p><p>How will application security change over the next few years?</p><p>I think'\r\n        + 'the security field has come to a threshold where it will start to be regulated. The amount of incompetence and'\r\n        + 'negligence in this field is only matched by the magnitude of damages, and that creates a lethal combination that'\r\n        + 'everyone in our digital economy suffers from. We already regulate doctors, lawyers, pilots, and many other'\r\n        + 'professions, as well as organizations employing them.</p><p>I think that the regulatory changes will affect not'\r\n        + 'only the technical in-the-field professionals, but will also impact the C-suite, and force senior leadership to'\r\n        + 'give security pros a seat at the table. One of the highlights of this profound lack of senior-level understanding'\r\n        + 'was in the Equifax Personnel-Change statement that followed the recent massive Equifax data breach. Equifax'\r\n        + 'appointed a new Chief Security Officer (CSO), and made the CSO report to the CIO. When the just-been-breached'\r\n        + 'Equifax does not understand why the CSO must report to the CEO and not the CIO, that\\'s another sign that executive'\r\n        + 'leadership still does not have the right perspective on security.</p><p>Another industry-wide change in perspective'\r\n        + 'that I’m anticipating is a shift from “defend the castle” to “inmates are running the asylum.” Insider threats are'\r\n        + 'already among the main security threats of 2017, and yet most security efforts are still just building'\r\n        + 'walls.</p><p>Do you see the application security as part of a larger trend in software development?</p><p>I believe'\r\n        + 'that thinking of application security as a larger trend in software development is like thinking of mathematics as'\r\n        + 'a larger trend in physics, or thinking of backups as a larger trend in disaster recovery. Not everyone must be a'\r\n        + 'highly skilled application-security professional, just like not everyone must be a highly-skilled accountant,'\r\n        + 'lawyer, or engineer. Yet most IT companies rely on professional services of a relatively small number of skilled'\r\n        + 'experts with unique domains of expertise. As software continues to \"eat the world,\" software development as a field'\r\n        + 'has long been vast enough and important enough to warrant domain specializations. Boeing does not advertise'\r\n        + '\"full-stack aerospace engineer\" positions, and yet one of the core \"career areas\" for Boeing is \"cybersecurity.\"'\r\n        + 'Ten years ago, every company became a software company. In 2017, every software company must become a'\r\n        + 'cybersecurity-focused company. Cybersecurity begins in the C-suite.</p><p>What other books or resources on'\r\n        + 'application security do you recommend?</p><p>Microsoft’s Security Development Lifecycle book is a good read for'\r\n        + 'software development managers and architects. Those interested in the foundations of cryptography may find Crypto'\r\n        + '101 or the Serious Cryptography book suitable. Those interested in the fundamentals of TLS, the largest application'\r\n        + 'of cryptography to the web, should check out Bulletproof SSL and TLS. Tangled Web is another favorite of mine,'\r\n        + 'which covers the insanity of the modern web.</p>'\r\n    },\r\n    {\r\n        'title': 'Employees Wake Up and Lace Up for Making Strides',\r\n        'description': 'The American Cancer Society reports that each year collectively more than one million people...',\r\n        'content': '<p>The American Cancer Society reports that each year collectively more than one'\r\n        + 'million people participate in nearly 300 Making Strides Against Breast Cancer events in the'\r\n        + 'US, raising at least $60 million. That’s why this weekend a number of Syncfusion employees'\r\n        + 'from the client relations, marketing, and sales teams will lace up their shoes to'\r\n        + 'participate in Raleigh’s Making Strides Against Breast Cancer event, happening this'\r\n        + 'Saturday morning, October 14, at Midtown Park Event Stage.</p><p>Team Brett-y and the Jets,'\r\n        + 'assembled by Enterprise License Renewal Representative Brett Jarrett, will take an early'\r\n        + 'morning walk around Raleigh to help raise funds, increase awareness, and consolidate a'\r\n        + 'community in the fight against breast cancer.</p><p>They invite you to join in the walk, or'\r\n        + 'make a donation to the cause.</p><p>Making Strides Information</p><p>Where: Midtown Park'\r\n        + 'Event Stage, Raleigh, NC</p><p>When: Saturday, October 14, 2017</p><p>Time: Check-in at'\r\n        + '7:30 AM, opening ceremony at 8:00 AM, walk begins at 9:15 AM</p><p>Video: '\r\n        + 'https://www.youtube.com/watch?v=QaAy1tW0xbE</p><p>Website:'\r\n        + 'http://main.acsevents.org/site/TR?pg=entry&fr_id=84845</p> '\r\n    }\r\n];\r\n//Define an array of JSON data\r\nexport let dataSource: any = [\r\n    {\r\n        id: '01',\r\n        title: newsData[0].title,\r\n        description: newsData[0].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/1.png', timeStamp: 'Syncfusion Blog - October 19, 2017',\r\n        child: [{\r\n            id: '01_1', title: newsData[0].title, category: newsData[0].title, text: newsData[0].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[0].content\r\n        }]\r\n    },\r\n    {\r\n        id: '02',\r\n        title: newsData[1].title,\r\n        description: newsData[1].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/3.png', timeStamp: 'Syncfusion Blog - October 18, 2017',\r\n        child: [{\r\n            id: '03_1', title: newsData[1].title, category: newsData[1].title, text: newsData[1].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[1].content\r\n        }]\r\n    },\r\n    {\r\n        id: '03',\r\n        title: newsData[2].title,\r\n        description: newsData[2].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/4.png', timeStamp: 'Syncfusion Blog - October 18, 2017',\r\n        child: [{\r\n            id: '04_1', title: newsData[2].title, category: newsData[2].title, text: newsData[2].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[2].content\r\n        }]\r\n    },\r\n    {\r\n        id: '04',\r\n        title: newsData[3].title,\r\n        description: newsData[3].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/7.png', timeStamp: 'Syncfusion Blog - October 13, 2017',\r\n        child: [{\r\n            id: '07_1', title: newsData[3].title, category: newsData[3].title, text: newsData[3].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[3].content\r\n        }]\r\n    }\r\n\r\n];\r\n\r\nexport let groupDataSource: any = [\r\n    { Name: 'WI-FI', content: 'Disabled', id: '1', class: 'wifi', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'Bluetooth', content: 'Disabled', id: '2', class: 'bluetooth', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'SIM cards', id: '3', content: 'AT&T', class: 'sim', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'Display', content: 'Adaptive brightness is OFF', id: '4', class: 'display', category: 'Device', order: 1 },\r\n    { Name: 'Sound', content: 'Ringer volume at 50%', id: '5', class: 'sound', category: 'Device', order: 1 },\r\n    { Name: 'Battery', content: '85%', id: '5', class: 'battery', category: 'Device', order: 1 },\r\n    { Name: 'Users', content: 'Signed in as Albert', id: '6', class: 'user', category: 'Device', order: 1 },\r\n    { Name: 'Location', content: 'ON / High accuracy', id: '7', class: 'location', category: 'Personal', order: 2 },\r\n    { Name: 'Security', id: '8', content: 'Screen Lock', class: 'security', category: 'Personal', order: 2 },\r\n    { Name: 'Languages & input', content: 'English (US)', id: '9', class: 'language', category: 'Personal', order: 2 }\r\n];\r\n\r\nexport let data1: { [key: string]: Object }[] = [\r\n    { text: 'Smith', id: 'received-01', icon: 'e-custom', type: 'received', group: 'Received', time: '2 hours ago', category: 'Today' },\r\n    { text: 'Johnson', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Williams', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: '4 hours ago', category: 'Today' },\r\n    { text: 'Jones', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Brown', id: 'received-03', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Anderson', id: 'received-01', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: '12 hours ago', category: 'Today' },\r\n    { text: 'Thomas', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Jackson', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Emily', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: '14 hours ago', category: 'Today' },\r\n    { text: 'White', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Jones', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: '18 hours ago', category: 'Today' },\r\n    { text: 'Grace', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Brooklyn', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Arianna', id: 'received-01', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Katherine', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n];\r\n","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Listview · CallHistory · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/listview\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/listview/default.html\"><span>Listview</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">CallHistory</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                <p>This sample demonstrates the use-case of call history application using <code>listview</code>. Click on the navigation tab to filter contacts based on call logs such as received, missed and all.</p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                <p>This sample filters the data based on selection of tab and update the <a href=\"https://ej2.syncfusion.com/react/documentation/list-view/api-listViewComponent.html#datasource\"><code>dataSource</code></a> for listview.</p>\n\n                \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * ListView CallHistory Sample\r\n */\r\n\r\nimport * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { ListViewComponent } from '@syncfusion/ej2-react-lists';\r\nimport { TabComponent, SelectEventArgs, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nimport { SampleBase } from './sample-base';\r\nimport { data1 } from '../newsData';\r\n\r\n\r\nexport class CallHistory extends SampleBase<{}, {}> {\r\n\r\n    //Map the appropriate columns to fields property\r\n    public fields: Object = { text: 'text', groupBy: 'category' };\r\n\r\n    public styleNone = { display: \"none\" };\r\n\r\n    public listTemplate(data: any): JSX.Element {\r\n        return (\r\n\r\n            <div className=\"e-list-wrapper e-list-avatar e-list-multi-line\">\r\n                <span className=\"e-avatar e-icon\"></span>\r\n                <span className=\"e-list-item-header\">{data.text}</span> <span className={`${data.type} e-list-content`}>{data.group}, {data.time}</span>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    public allInstance: ListViewComponent;\r\n    public receivedInstance: ListViewComponent;\r\n    public missedInstance: ListViewComponent;\r\n    public tab: TabComponent;\r\n    public listObjects: any = [];\r\n    public headerText: any = [\r\n        { \"text\": \"All\" },\r\n        { \"text\": \"Received\" },\r\n        { \"text\": \"Missed\" }];\r\n    public type: string[] = ['', 'received', 'missed'];\r\n\r\n    filterData(dataSource: any, value: any): any {\r\n        let newData: any = [];\r\n        dataSource.filter((data: any) => {\r\n            if ((data.id).indexOf(value) !== -1) {\r\n                newData.push(data);\r\n            }\r\n        });\r\n        return newData;\r\n    }\r\n\r\n    onCreated() {\r\n        if (!Browser.isDevice) {\r\n            document.getElementsByClassName('layoutWrapper')[0].classList.add('e-device-layout');\r\n        } else {\r\n            document.getElementsByClassName('tabContainer')[0].classList.add('e-visbile-layer');\r\n        }\r\n    }\r\n\r\n    setlectedHanlder(args: SelectEventArgs) {\r\n        let element01: any = document.getElementById('all');\r\n        let element02: any = document.getElementById('received');\r\n        let element03: any = document.getElementById('missed');\r\n        if (element01.ej2_instances !== undefined) {\r\n            this.listObjects = [element01.ej2_instances[0], element02.ej2_instances[0], element03.ej2_instances[0]];\r\n            let newData: any;\r\n            newData = this.filterData(data1, this.type[args.selectedIndex]);\r\n            this.listObjects[args.selectedIndex].dataSource = newData;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className='control-pane'>\r\n                <div className='slider-call-history col-lg-12 control-section'>\r\n                    <div className=\"layoutWrapper\">\r\n                        <div className=\"speaker\">\r\n                            <div className=\"camera\"></div>\r\n                        </div>\r\n                        <div className=\"layout\">\r\n                            <div id=\"list-container\">\r\n                                <div className=\"tabContainer\">\r\n                                    <TabComponent id=\"tab\" ref={tab => this.tab = tab} selected={this.setlectedHanlder.bind(this)} created={this.onCreated}>\r\n                                        <TabItemsDirective>\r\n                                            <TabItemDirective header={this.headerText[0]} content={\"#all\"} />\r\n                                            <TabItemDirective header={this.headerText[1]} content={\"#received\"} />\r\n                                            <TabItemDirective header={this.headerText[2]} content={\"#missed\"} />\r\n                                        </TabItemsDirective>\r\n                                    </TabComponent>\r\n                                </div>\r\n                                <ListViewComponent id=\"all\" dataSource={data1} fields={this.fields} style={this.styleNone} cssClass='e-list-template'\r\n                                    template={this.listTemplate as any} ref={(listview) => { this.allInstance = listview }} ></ListViewComponent>\r\n                                <ListViewComponent id=\"received\" dataSource={data1} fields={this.fields} style={this.styleNone} cssClass='e-list-template'\r\n                                    template={this.listTemplate as any} ref={(listview) => { this.receivedInstance = listview }}></ListViewComponent>\r\n                                <ListViewComponent id=\"missed\" dataSource={data1} fields={this.fields} style={this.styleNone} cssClass='e-list-template'\r\n                                    template={this.listTemplate as any} ref={(listview) => { this.missedInstance = listview }}></ListViewComponent>\r\n                            </div>\r\n                        </div>\r\n                        <div className=\"outerButton\"> </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\nReactDOM.render(<CallHistory />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}