v17.4.0.39

README.md

@@ -93,4 +93,4 @@ Download our TypeScript Platform installer from [here](https://www.syncfusion.co
 
 * To renew the subscription, click [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing) or contact our sales team at <salessupport@syncfusion.com>.
 
-<p>Copyright © 2001-2019 Syncfusion, Inc. Updated on 2019-10-04 at precisely 14:43:08 EST.</p>
+<p>Copyright © 2001-2019 Syncfusion, Inc. Updated on 2019-12-17 at precisely 19:44:07 EST.</p>

RTE/default.html

@@ -0,0 +1,50 @@
+
+
+<div class="cols-sample-area">
+
+    <textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px">
+        &lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
+        &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in
+        client side. Customer easy to edit the contents and get the HTML content for
+        the displayed content. A rich text editor control provides users with a toolbar
+        that helps them to apply rich text formats to the text entered in the text
+        area. &lt;/p&gt;
+        &lt;p&gt;&lt;b&gt;Functional
+        Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
+        &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
+        the tool bar support, it’s also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
+        to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
+        to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
+        elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
+        the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
+        efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
+        navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
+    </textarea>
+</div>
+
+    <script type="text/javascript" src="RTE/default.js"></script>
+    <style type="text/css">
+        #rteSample {
+            margin: 0 auto;
+        }
+
+        .customUnOrder, .customOrder {
+            height: 25px;
+        }
+
+            .customUnOrder:after {
+                content: "\e7f1";
+                font-size: 20px;
+                float: left;
+                padding: 0px 4px 0px 4px;
+            }
+
+            .customOrder:after {
+                content: "\e7f0";
+                font-size: 20px;
+                float: left;
+                padding: 0px 4px 0px 4px;
+            }
+    </style>
+
+

RTE/default.js

@@ -0,0 +1,69 @@
+var RTEComponent;
+(function (RTEComponent) {
+    $(function () {
+        var sample = new ej.RTE($("#rteSample"), {
+            width: "100%",
+            minWidth: "150px",
+            showFooter: true,
+            showHtmlSource: true,
+            allowEditing: true,
+            allowKeyboardNavigation: true,
+            autoFocus: true,
+            autoHeight: true,
+            colorPaletteColumns: 10,
+            colorPaletteRows: 5,
+            cssClass: 'gradient-lime',
+            enableResize: true,
+            enableTabKeyNavigation: true,
+            fileBrowser: {
+                filePath: window.baseurl + "Content/FileBrowser/",
+                extensionAllow: "*.png, *.doc, *.pdf, *.txt, *.docx",
+                ajaxAction: window.baseurl + "api/FileExplorer/FileOperations"
+            },
+            imageBrowser: {
+                filePath: window.baseurl + "Content/FileBrowser/",
+                extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx",
+                ajaxAction: window.baseurl + "api/FileExplorer/FileOperations"
+            },
+            isResponsive: true,
+            showClearAll: true,
+            showClearFormat: true,
+            showDimensions: true,
+            showCharCount: true,
+            tools: {
+                formatStyle: ["format"],
+                edit: ["findAndReplace"],
+                font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
+                style: ["bold", "italic", "underline", "strikethrough"],
+                alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
+                lists: ["unorderedList", "orderedList"],
+                clipboard: ["cut", "copy", "paste"],
+                doAction: ["undo", "redo"],
+                indenting: ["outdent", "indent"],
+                clear: ["clearFormat", "clearAll"],
+                links: ["createLink", "removeLink"],
+                images: ["image"],
+                media: ["video"],
+                tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
+                effects: ["superscript", "subscript"],
+                casing: ["upperCase", "lowerCase"],
+                view: ["fullScreen", "zoomIn", "zoomOut"],
+                print: ["print"],
+                customUnorderedList: [{
+                        name: "unOrderInsert",
+                        tooltip: "Custom UnOrderList",
+                        css: "e-rte-toolbar-icon e-rte-unlistitems customUnOrder",
+                        text: "Smiley",
+                        listImage: "url('../content/images/rte/Smiley-GIF.gif')"
+                    }],
+                customOrderedList: [{
+                        name: "orderInsert",
+                        tooltip: "Custom OrderList",
+                        css: "e-rte-toolbar-icon e-rte-listitems customOrder",
+                        text: "Lower-Greek",
+                        listStyle: "lower-greek"
+                    }]
+            }
+        });
+    });
+})(RTEComponent || (RTEComponent = {}));

RTE/default.ts

@@ -0,0 +1,72 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module RTEComponent {
+    $(function () {
+        var sample = new ej.RTE($("#rteSample"),{
+            width: "100%",
+            minWidth: "150px",
+            showFooter: true,
+            showHtmlSource: true,
+            allowEditing: true,
+            allowKeyboardNavigation: true,
+            autoFocus: true,
+            autoHeight: true,
+            colorPaletteColumns: 10,
+            colorPaletteRows: 5,
+            cssClass: 'gradient-lime',
+            enableResize: true,
+            enableTabKeyNavigation: true,
+            fileBrowser: {
+                filePath: (<any>window).baseurl + "Content/FileBrowser/",
+                extensionAllow: "*.png, *.doc, *.pdf, *.txt, *.docx",
+                ajaxAction: (<any>window).baseurl + "api/FileExplorer/FileOperations"
+            },
+            imageBrowser: {
+                filePath: (<any>window).baseurl + "Content/FileBrowser/",
+                extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx",
+                ajaxAction: (<any>window).baseurl + "api/FileExplorer/FileOperations"
+            },
+            isResponsive: true,
+            showClearAll: true,
+            showClearFormat: true,
+            showDimensions: true,
+            showCharCount: true,
+            tools: {
+                formatStyle: ["format"],
+                edit: ["findAndReplace"],
+                font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
+                style: ["bold", "italic", "underline", "strikethrough"],
+                alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
+                lists: ["unorderedList", "orderedList"],
+                clipboard: ["cut", "copy", "paste"],
+                doAction: ["undo", "redo"],
+                indenting: ["outdent", "indent"],
+                clear: ["clearFormat", "clearAll"],
+                links: ["createLink", "removeLink"],
+                images: ["image"],
+                media: ["video"],
+                tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
+                effects: ["superscript", "subscript"],
+                casing: ["upperCase", "lowerCase"],
+                view: ["fullScreen", "zoomIn", "zoomOut"],
+                print: ["print"],
+                customUnorderedList: [{
+                    name: "unOrderInsert",
+                    tooltip: "Custom UnOrderList",
+                    css: "e-rte-toolbar-icon e-rte-unlistitems customUnOrder",
+                    text: "Smiley",
+                    listImage: "url('../content/images/rte/Smiley-GIF.gif')"
+                }],
+                customOrderedList: [{
+                    name: "orderInsert",
+                    tooltip: "Custom OrderList",
+                    css: "e-rte-toolbar-icon e-rte-listitems customOrder",
+                    text: "Lower-Greek",
+                    listStyle: "lower-greek"
+                }]
+            }
+        });
+    });
+
+}

accordion/default.html

@@ -0,0 +1,87 @@
+
+<div class="cols-sample-area">
+    <div id="basicAccordion" class="control_frame">
+        <h3>
+            <a href="#">Inbox</a>
+        </h3>
+        <div>
+            <div class="emp-list">
+                <img src="content/images/Employees/3.png" alt="employee" />
+                <div class="time-panel">7:30</div>
+                <b class="headername">Catriona</b><br />
+                All WinRT controls are optimized for touch, supporting common gestures: zooming, panning, selecting, double-tapping, rotating, resizing.
+            </div>
+            <div class="emp-list">
+                <img src="content/images/Employees/6.png" alt="employee" />
+                <div class="time-panel">5:33</div>
+                <b class="headername">John Linden</b><br />
+                All the components in the ASP.NET MVC have been built from the ground up with performance in mind and are extremely lightweight.
+            </div>
+            <div class="emp-list">
+                <img src="content/images/Employees/8.png" alt="employee" />
+                <div class="time-panel">2:10</div>
+                <b class="headername">Louis</b><br />
+                Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
+            </div>
+        </div>
+        <h3>
+            <a href="#">Sent</a>
+        </h3>
+        <div>
+            <div class="emp-list">
+                <img src="content/images/Employees/8.png" alt="employee" />
+                <div class="time-panel">3:55</div>
+                <b class="headername">Louis</b><br />
+                Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
+            </div>
+            <div class="emp-list">
+                <img src="content/images/Employees/6.png" alt="employee" />
+                <div class="time-panel">6:47</div>
+                <b class="headername">John Linden</b><br />
+                Cloud computing, also known as 'on-demand computing', is a kind of Internet-based computing, where shared resources, data and information are provided to computers and other devices on-demand.
+            </div>
+        </div>
+        <h3>
+            <a href="#">Trash</a>
+        </h3>
+        <div>
+            <div class="emp-list">
+                <img src="content/images/Employees/3.png" alt="employee" />
+                <div class="time-panel">8:30</div>
+                <b class="headername">Catriona</b><br />
+                With our sophisticated support system, built from the ground up to support all type of customers, you will have a streamlined experience working with our support team.
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript" src="accordion/default.js"></script>
+<style class="cssStyles">
+        #basicAccordion img {
+            float: left;
+            height: 40px;
+            padding-right: 6px;
+        }
+
+        .emp-list {
+            border-bottom: 1px solid #BBBCBB;
+            margin-bottom: 9px;
+            padding-bottom: 9px;
+        }
+
+            .emp-list:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+            }
+
+        .time-panel {
+            float: right;
+            color: #2382C3;
+        }
+
+        .headername {
+            font-size: 16px;
+            font-weight: 600;
+        }
+</style>
+

accordion/default.js

@@ -0,0 +1,20 @@
+var AccordionComponent;
+(function (AccordionComponent) {
+    $(function () {
+        var sample = new ej.Accordion($("#basicAccordion"), {
+            width: "100%",
+            allowKeyboardNavigation: true,
+            collapseSpeed: 500,
+            collapsible: true,
+            enableAnimation: true,
+            enableMultipleOpen: true,
+            events: "click",
+            expandSpeed: 500,
+            headerSize: "40px",
+            htmlAttributes: { title: "Demo" },
+            selectedItemIndex: 1,
+            showCloseButton: true,
+            showRoundedCorner: true
+        });
+    });
+})(AccordionComponent || (AccordionComponent = {}));

accordion/default.ts

@@ -0,0 +1,22 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module AccordionComponent {
+    $(function () {
+        var sample = new ej.Accordion($("#basicAccordion"), {
+            width: "100%",
+            allowKeyboardNavigation: true,
+            collapseSpeed: 500,
+            collapsible: true,
+            enableAnimation: true,
+            enableMultipleOpen: true,
+            events: "click",
+            expandSpeed: 500,
+            headerSize: "40px",
+            htmlAttributes: { title: "Demo" },
+            selectedItemIndex: 1,
+            showCloseButton: true,
+            showRoundedCorner: true
+        });
+    });
+}

autocomplete/autocomplete.html

@@ -0,0 +1,8 @@
+<div class="cols-sample-area">
+    <div class="frame">
+        <div class="control">
+            <input type="text" id="selectCar" />
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="autocomplete/autocomplete.js"></script>

autocomplete/autocomplete.js

@@ -0,0 +1,34 @@
+var AutocompleteComponent;
+(function (AutocompleteComponent) {
+    var carList = [
+        "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
+        "BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
+        "Chevrolet Camaro", "Cadillac",
+        "Duesenberg J", "Dodge Sprinter",
+        "Elantra", "Excavator",
+        "Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
+        "GAZ Siber",
+        "Honda S2000", "Hyundai Santro",
+        "Isuzu Swift", "Infiniti Skyline",
+        "Jaguar XJS",
+        "Kia Sedona EX", "Koenigsegg Agera",
+        "Lotus Esprit", "Lamborghini Diablo",
+        "Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
+        "Nissan Qashqai",
+        "Oldsmobile S98", "Opel Superboss",
+        "Porsche 356", "Pontiac Sunbird",
+        "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
+        "Triumph Spitfire", "Toyota 2000GT",
+        "Volvo P1800", "Volkswagen Shirako"
+    ];
+    $(function () {
+        var autocompleteInstance = new ej.Autocomplete($("#selectCar"), {
+            width: "100%",
+            watermarkText: "Select a car",
+            dataSource: carList,
+            enableAutoFill: true,
+            showPopupButton: true,
+            multiSelectMode: "delimiter"
+        });
+    });
+})(AutocompleteComponent || (AutocompleteComponent = {}));

autocomplete/autocomplete.ts

@@ -0,0 +1,36 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module AutocompleteComponent{
+    var carList = [
+                "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
+                "BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
+                "Chevrolet Camaro", "Cadillac",
+                "Duesenberg J", "Dodge Sprinter",
+                "Elantra", "Excavator",
+                "Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
+                "GAZ Siber",
+                "Honda S2000", "Hyundai Santro",
+                "Isuzu Swift", "Infiniti Skyline",
+                "Jaguar XJS",
+                "Kia Sedona EX", "Koenigsegg Agera",
+                "Lotus Esprit", "Lamborghini Diablo",
+                "Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
+                "Nissan Qashqai",
+                "Oldsmobile S98", "Opel Superboss",
+                "Porsche 356", "Pontiac Sunbird",
+                "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
+                "Triumph Spitfire", "Toyota 2000GT",
+                "Volvo P1800", "Volkswagen Shirako"
+            ];
+    $(function () {
+        var autocompleteInstance =new ej.Autocomplete($("#selectCar"), {
+            width: "100%",
+            watermarkText: "Select a car",
+            dataSource: carList,
+            enableAutoFill: true,
+            showPopupButton: true,
+            multiSelectMode: "delimiter"
+        });
+    });
+}

barcode/barcode.html

@@ -0,0 +1,4 @@
+<div class="cols-sample-area">
+    <div id="Barcode" align="center" style="margin-top:100px"></div>
+</div>
+    <script type="text/javascript" src="barcode/barcode.js"></script>

barcode/barcode.js

@@ -0,0 +1,8 @@
+var Barcodecomponent;
+(function (Barcodecomponent) {
+    $(function () {
+        var barcodesample = new ej.datavisualization.Barcode($("#Barcode"), {
+            text: "http://www.syncfusion.com"
+        });
+    });
+})(Barcodecomponent || (Barcodecomponent = {}));

barcode/barcode.ts

@@ -0,0 +1,11 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module Barcodecomponent {
+    $(function () {
+        var barcodesample = new ej.datavisualization.Barcode($("#Barcode"), {
+            text:"http://www.syncfusion.com"
+        });
+    });
+}
+

bulletgraph/bulletgraph.html

@@ -0,0 +1,4 @@
+<div class="cols-sample-area">
+    <div id="BulletGraph" align="center" style="margin-top:100px"></div>
+</div>
+    <script type="text/javascript" src="bulletGraph/bulletgraph.js"></script>

bulletgraph/bulletgraph.js

@@ -0,0 +1,58 @@
+var Bulletgraphcomponent;
+(function (Bulletgraphcomponent) {
+    $(function () {
+        var bulletsample = new ej.datavisualization.BulletGraph($("#BulletGraph"), {
+            isResponsive: true,
+            load: function () {
+                var sender = $("#BulletGraph").data("ejBulletGraph");
+                var bulletTheme = window.themeStyle + window.themeColor + window.themeVarient;
+                if (bulletTheme) {
+                    switch (bulletTheme) {
+                        case "flatdark":
+                        case "flatazuredark":
+                        case "flatlimedark":
+                        case "flatsaffrondark":
+                        case "gradientdark":
+                        case "gradientazuredark":
+                        case "gradientlimedark":
+                        case "gradientsaffrondark":
+                        case "flathigh-contrast-01dark":
+                        case "flathigh-contrast-02dark":
+                            bulletTheme = "flatdark";
+                            break;
+                        case "flatoffice-365light":
+                        case "flatmateriallight":
+                            bulletTheme = "material";
+                            break;
+                        default:
+                            bulletTheme = "flatlight";
+                            break;
+                    }
+                    sender.model.theme = bulletTheme;
+                }
+            },
+            tooltipSettings: { visible: true },
+            quantitativeScaleSettings: {
+                featureMeasures: [{
+                        value: 8, comparativeMeasureValue: 6.7
+                    }]
+            },
+            qualitativeRanges: [{
+                    rangeEnd: 4.3, rangeStroke: "#ebebeb"
+                },
+                {
+                    rangeEnd: 7.3, rangeStroke: "#d8d8d8"
+                },
+                {
+                    rangeEnd: 10, rangeStroke: "#7f7f7f"
+                }
+            ],
+            captionSettings: {
+                textPosition: 'right', text: 'Revenue YTD',
+                subTitle: {
+                    text: "$ in Thousands", textPosition: "right"
+                }
+            }
+        });
+    });
+})(Bulletgraphcomponent || (Bulletgraphcomponent = {}));

bulletgraph/bulletgraph.ts

@@ -0,0 +1,62 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module Bulletgraphcomponent {
+    $(function () {
+        var bulletsample = new ej.datavisualization.BulletGraph($("#BulletGraph"), {
+            isResponsive: true,
+            load: function () {
+                var sender = $("#BulletGraph").data("ejBulletGraph");
+                var bulletTheme = (<any>window).themeStyle + (<any>window).themeColor + (<any>window).themeVarient;
+                if (bulletTheme) {
+                    switch (bulletTheme) {
+                        case "flatdark":
+                        case "flatazuredark":
+                        case "flatlimedark":
+                        case "flatsaffrondark":
+                        case "gradientdark":
+                        case "gradientazuredark":
+                        case "gradientlimedark":
+                        case "gradientsaffrondark":
+                        case "flathigh-contrast-01dark":
+                        case "flathigh-contrast-02dark":
+                            bulletTheme = "flatdark";
+                            break;
+                        case "flatoffice-365light":
+                        case "flatmateriallight":
+                            bulletTheme = "material";
+                            break;
+                        default:
+                           bulletTheme = "flatlight";
+                            break;
+                    }
+                    sender.model.theme = bulletTheme;
+                }
+
+            },
+            tooltipSettings: { visible: true },
+            quantitativeScaleSettings: {
+                featureMeasures: [{
+                    value: 8, comparativeMeasureValue:6.7
+                }]
+            },
+            qualitativeRanges: [{
+                rangeEnd: 4.3, rangeStroke:"#ebebeb",
+            },
+                {
+                    rangeEnd: 7.3, rangeStroke:"#d8d8d8"
+                },
+                {
+                    rangeEnd: 10, rangeStroke: "#7f7f7f"
+                }
+            ],
+            captionSettings: {
+                textPosition: 'right', text: 'Revenue YTD',
+                subTitle: {
+                    text: "$ in Thousands", textPosition:"right"
+                }
+            }
+        });
+    });
+}
+

button/button.html

@@ -0,0 +1,87 @@
+<div class="cols-sample-area">
+    <div class="frame">
+        <div class="control">
+            <table>
+                <tbody>
+                    <tr>
+                        <td class="btnsht">
+                            Button
+                        </td>
+                        <td class="btnsht" colspan="2">
+                            <button id="buttonnormal"></button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="btnsht">
+                            Toggle Button
+                        </td>
+                        <td class="btnsht" colspan="2">
+                            <input type="checkbox" id="TextOnly">
+                            <label for="TextOnly">
+                                Toggle
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="btnsht">
+                            Split Button
+                        </td>
+                        <td class="splttd btnsht" colspan="2">
+                            <button id="splitbuttonnormal"></button>
+                            <ul id="menu1">
+                                <li><span>Open</span></li>
+                                <li><span>Save</span></li>
+                                <li><span>Delete</span></li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="btnsht">
+                            Group Button
+                        </td>
+                        <td class="btnsht" colspan="2">
+                            <div id="groupButton">
+                                <ul>
+                                    <li>
+                                        Save
+                                    </li>
+                                    <li>
+                                        Open
+                                    </li>
+                                    <li>
+                                        Delete
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="btnsht">
+                            Checkbox
+                        </td>
+                        <td class="chkrad">
+                            <input type="checkbox" class="nodetext" id="check1">
+                            <label for="check1" class="clslab">File1</label>
+                        </td>
+                        <td class="chkrad">
+                            <input type="checkbox" class="nodetext" id="check2">
+                            <label for="check2" class="clslab">File2</label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="btnsht">
+                            Radio Button
+                        </td>
+                        <td class="chkrad">
+                            <input type="radio" name="small" id="radio1"><label for="radio1" class="clslab">Open</label>
+                        </td>
+                        <td class="chkrad" colspan="2">
+                            <input type="radio" name="small" id="radio2"><label for="radio2" class="clslab">Close</label>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="button/button.js"></script>

button/button.js

@@ -0,0 +1,45 @@
+var ButtonComponent;
+(function (ButtonComponent) {
+    $(function () {
+        var basicButton = new ej.Button($("#buttonnormal"), {
+            size: "large",
+            showRoundedCorner: true,
+            contentType: "textandimage",
+            prefixIcon: "e-icon e-save",
+            text: "Save"
+        });
+        var toggleButton = new ej.ToggleButton($("#TextOnly"), {
+            showRoundedCorner: true,
+            size: "large",
+            contentType: "textandimage",
+            defaultPrefixIcon: "e-icon e-save",
+            activePrefixIcon: "e-icon e-delete",
+            defaultText: "Save",
+            activeText: "Delete"
+        });
+        var splitbuttonnormal = new ej.SplitButton($("#splitbuttonnormal"), {
+            showRoundedCorner: true,
+            size: "large",
+            prefixIcon: "e-icon e-file-empty",
+            targetID: "menu1",
+            contentType: "textandimage",
+            text: "File"
+        });
+        var groupButton = new ej.GroupButton($("#groupButton"), {
+            showRoundedCorner: true,
+            size: "large"
+        });
+        var check1 = new ej.CheckBox($("#check1"), {
+            size: "medium", enableTriState: true
+        });
+        var check2 = new ej.CheckBox($("#check2"), {
+            size: "medium", enableTriState: true
+        });
+        var radio1 = new ej.RadioButton($("#radio1"), {
+            size: "medium"
+        });
+        var radio2 = new ej.RadioButton($("#radio2"), {
+            size: "medium", checked: true
+        });
+    });
+})(ButtonComponent || (ButtonComponent = {}));

button/button.ts

@@ -0,0 +1,47 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module ButtonComponent {
+    $(function () {
+        var basicButton = new ej.Button($("#buttonnormal"), {
+            size: "large",
+            showRoundedCorner: true,
+            contentType: "textandimage",
+            prefixIcon: "e-icon e-save",
+            text: "Save"
+        });
+        var toggleButton = new ej.ToggleButton($("#TextOnly"), {
+            showRoundedCorner: true,
+            size: "large",
+            contentType: "textandimage",
+            defaultPrefixIcon: "e-icon e-save",
+            activePrefixIcon: "e-icon e-delete",
+            defaultText: "Save",
+            activeText: "Delete"
+        });
+        var splitbuttonnormal = new ej.SplitButton($("#splitbuttonnormal"), {
+            showRoundedCorner: true,
+            size: "large",
+            prefixIcon: "e-icon e-file-empty",
+            targetID: "menu1",
+            contentType: "textandimage",
+            text: "File"
+        });
+        var groupButton = new ej.GroupButton($("#groupButton"), {
+            showRoundedCorner: true,
+            size: "large"
+        });
+        var check1 = new ej.CheckBox($("#check1"), {
+            size: "medium", enableTriState: true
+        });
+        var check2 = new ej.CheckBox($("#check2"), {
+            size: "medium", enableTriState: true
+        });
+        var radio1 = new ej.RadioButton($("#radio1"), {
+            size: "medium"
+        });
+        var radio2 = new ej.RadioButton($("#radio2"), {
+            size: "medium", checked: true
+        });
+    });
+}

chart/chart.html

@@ -0,0 +1,64 @@
+<div class="cols-sample-area">
+    <div id="Chart"></div>
+    <div id="Tooltip" style="display: none;" class="tooltipDiv">
+        <div id="icon">
+            <div id="eficon">
+                <img src="content/images/chart/eficon.png" />
+            </div>
+        </div>
+        <div id="value">
+            <div>
+                <label id="efpercentage">
+                    &nbsp;#point.y#
+                </label>
+                <label id="ef">
+                    Efficiency
+                </label>
+            </div>
+        </div>
+    </div>
+ </div>
+    <script type="text/javascript" src="chart/chart.js"></script>
+    <style class="cssStyles">
+        #efpercentage, #ef {
+            margin-bottom: -25px !important;
+            text-align: center !important;
+        }
+
+        .tooltipDiv {
+            background-color: #E94649;
+            color: white;
+            width: 130px;
+        }
+
+        #Tooltip > div:first-child {
+            float: left;
+        }
+
+        #Tooltip #value {
+            float: right;
+            height: 50px;
+            width: 68px;
+        }
+
+            #Tooltip #value > div {
+                margin: 5px 5px 5px 5px;
+            }
+
+        #Tooltip #efpercentage {
+            font-size: 20px;
+            font-family: segoe ui;
+            padding-left: 2px;
+        }
+
+        #Tooltip #ef {
+            font-size: 12px;
+            font-family: segoe ui;
+        }
+
+        #eficon {
+            height: 60px;
+            width: 60px;
+            background-repeat: no-repeat;
+        }
+    </style>

chart/chart.js

@@ -0,0 +1,118 @@
+var ChartComponent;
+(function (ChartComponent) {
+    $(function () {
+        var chartsample = new ej.datavisualization.Chart($("#Chart"), {
+            primaryXAxis: {
+                range: { min: 2005, max: 2011, interval: 1 },
+                title: { text: "Year" },
+                valueType: "category"
+            },
+            primaryYAxis: {
+                range: { min: 25, max: 50, interval: 5 },
+                labelFormat: "{value}%",
+                title: { text: "Efficiency" }
+            },
+            commonSeriesOptions: {
+                type: 'line', enableAnimation: true,
+                tooltip: { visible: true, template: 'Tooltip' },
+                marker: {
+                    shape: 'circle',
+                    size: {
+                        height: 10, width: 10
+                    },
+                    visible: true
+                },
+                border: { width: 2 }
+            },
+            series: [
+                {
+                    points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
+                        { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }],
+                    name: 'India'
+                },
+                {
+                    points: [{ x: 2005, y: 31 }, { x: 2006, y: 28 }, { x: 2007, y: 30 }, { x: 2008, y: 36 },
+                        { x: 2009, y: 36 }, { x: 2010, y: 39 }, { x: 2011, y: 37 }],
+                    name: 'Germany'
+                },
+                {
+                    points: [{ x: 2005, y: 36 }, { x: 2006, y: 32 }, { x: 2007, y: 34 }, { x: 2008, y: 41 },
+                        { x: 2009, y: 42 }, { x: 2010, y: 42 }, { x: 2011, y: 43 }],
+                    name: 'England'
+                },
+                {
+                    points: [{ x: 2005, y: 39 }, { x: 2006, y: 36 }, { x: 2007, y: 40 }, { x: 2008, y: 44 },
+                        { x: 2009, y: 45 }, { x: 2010, y: 48 }, { x: 2011, y: 46 }],
+                    name: 'France'
+                }
+            ],
+            isResponsive: true,
+            load: function () {
+                var sender = $("#Chart").data("ejChart");
+                if (!!window.orientation && sender) {
+                    var model = sender.model, seriesLength = model.series.length;
+                    model.legend.visible = false;
+                    model.size.height = null;
+                    model.size.width = null;
+                    for (var i = 0; i < seriesLength; i++) {
+                        if (!model.series[i].marker)
+                            model.series[i].marker = {};
+                        if (!model.series[i].marker.size)
+                            model.series[i].marker.size = {};
+                        model.series[i].marker.size.width = 6;
+                        model.series[i].marker.size.height = 6;
+                    }
+                    model.primaryXAxis.labelIntersectAction = "rotate45";
+                    if (model.primaryXAxis.title)
+                        model.primaryXAxis.title.text = "";
+                    if (model.primaryYAxis.title)
+                        model.primaryYAxis.title.text = "";
+                    model.primaryXAxis.edgeLabelPlacement = "hide";
+                    model.primaryYAxis.labelIntersectAction = "rotate45";
+                    model.primaryYAxis.edgeLabelPlacement = "hide";
+                }
+                var theme = window.themeStyle + window.themeColor + window.themeVarient;
+                if (theme) {
+                    switch (theme) {
+                        case "flatdark":
+                        case "flatazuredark":
+                        case "flatlimedark":
+                        case "flatsaffrondark":
+                            theme = "flatdark";
+                            break;
+                        case "gradientlight":
+                        case "gradientazurelight":
+                        case "gradientlimelight":
+                        case "gradientsaffronlight":
+                            theme = "gradientlight";
+                            break;
+                        case "gradientdark":
+                        case "gradientazuredark":
+                        case "gradientlimedark":
+                        case "gradientsaffrondark":
+                            theme = "gradientdark";
+                            break;
+                        case "flatbootstraplight":
+                            theme = "bootstrap";
+                            break;
+                        case "flathigh-contrast-01dark":
+                        case "flathigh-contrast-02dark":
+                            theme = "high-contrast-01";
+                            break;
+                        case "flatmateriallight":
+                        case "flatoffice-365light":
+                            theme = "material";
+                            break;
+                        default:
+                            theme = "flatlight";
+                            break;
+                    }
+                    sender.model.theme = theme;
+                }
+            },
+            title: { text: 'Efficiency of oil-fired power production' },
+            size: { height: "600" },
+            legend: { visible: true }
+        });
+    });
+})(ChartComponent || (ChartComponent = {}));

chart/chart.ts

@@ -0,0 +1,126 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module ChartComponent {
+    $(function () {
+        var chartsample = new ej.datavisualization.Chart($("#Chart"), {
+            primaryXAxis: {
+                range: { min: 2005, max: 2011, interval: 1 },
+                title: { text: "Year" },
+                valueType: "category"
+            },
+            primaryYAxis: {
+                range: { min: 25, max: 50, interval: 5 },
+                labelFormat: "{value}%",
+                title: { text: "Efficiency" },
+            },
+            commonSeriesOptions:
+			{
+                type: 'line', enableAnimation: true,
+				tooltip:{ visible :true, template:'Tooltip'},
+                marker:
+                {
+                    shape: 'circle',
+                    size:
+                    {
+                        height: 10, width: 10
+                    },
+                    visible: true
+                },
+                 border : {width: 2}
+            },
+            series:
+            [
+                {
+                    points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
+                        { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }],
+                    name: 'India'
+                },
+                {
+                    points: [{ x: 2005, y: 31 }, { x: 2006, y: 28 }, { x: 2007, y: 30 }, { x: 2008, y: 36 },
+                        { x: 2009, y: 36 }, { x: 2010, y: 39 }, { x: 2011, y: 37 }],
+                    name: 'Germany'
+                },
+                {
+                    points: [{ x: 2005, y: 36 }, { x: 2006, y: 32 }, { x: 2007, y: 34 }, { x: 2008, y: 41 },
+                        { x: 2009, y: 42 }, { x: 2010, y: 42 }, { x: 2011, y: 43 }],
+                    name: 'England'
+                },
+                {
+                    points: [{ x: 2005, y: 39 }, { x: 2006, y: 36 }, { x: 2007, y: 40 }, { x: 2008, y: 44 },
+                        { x: 2009, y: 45 }, { x: 2010, y: 48 }, { x: 2011, y: 46 }],
+                    name: 'France'
+                }
+            ],
+            isResponsive: true,
+            load: function () {
+                var sender = $("#Chart").data("ejChart");
+                if (!!window.orientation && sender) { //to modify chart properties for mobile view
+                    var model = sender.model,
+                        seriesLength = model.series.length;
+                    model.legend.visible = false;
+                    model.size.height = null;
+                    model.size.width = null;
+                    for (var i = 0; i < seriesLength; i++) {
+                        if (!model.series[i].marker)
+                            model.series[i].marker = {};
+                        if (!model.series[i].marker.size)
+                            model.series[i].marker.size = {};
+                        model.series[i].marker.size.width = 6;
+                        model.series[i].marker.size.height = 6;
+                    }
+                    model.primaryXAxis.labelIntersectAction = "rotate45";
+                    if (model.primaryXAxis.title)
+                        model.primaryXAxis.title.text = "";
+                    if (model.primaryYAxis.title)
+                        model.primaryYAxis.title.text = "";
+                    model.primaryXAxis.edgeLabelPlacement = "hide";
+                    model.primaryYAxis.labelIntersectAction = "rotate45";
+                    model.primaryYAxis.edgeLabelPlacement = "hide";
+                }
+                var theme = (<any>window).themeStyle + (<any>window).themeColor + (<any>window).themeVarient;
+                if (theme) {
+                    switch (theme) {
+                        case "flatdark":
+                        case "flatazuredark":
+                        case "flatlimedark":
+                        case "flatsaffrondark":
+                            theme = "flatdark";
+                            break;
+                        case "gradientlight":
+                        case "gradientazurelight":
+                        case "gradientlimelight":
+                        case "gradientsaffronlight":
+                            theme = "gradientlight";
+                            break;
+                        case "gradientdark":
+                        case "gradientazuredark":
+                        case "gradientlimedark":
+                        case "gradientsaffrondark":
+                            theme = "gradientdark";
+                            break;
+                        case "flatbootstraplight":
+                            theme = "bootstrap";
+                            break;
+                        case "flathigh-contrast-01dark":
+                        case "flathigh-contrast-02dark":
+                            theme = "high-contrast-01";
+                            break;
+                        case "flatmateriallight":
+                        case "flatoffice-365light":
+                            theme = "material";
+                            break;
+
+                        default:
+                            theme = "flatlight";
+                            break;
+                    }
+                    sender.model.theme = theme;
+                }
+            },
+            title: { text: 'Efficiency of oil-fired power production' },
+            size: { height: "600" },
+            legend: { visible: true},
+        });
+    });
+}

circulargauge/circulargauge.html

@@ -0,0 +1,4 @@
+<div class="cols-sample-area">
+    <div id="CircularGauge" align="center"></div>
+</div>
+    <script type="text/javascript" src="circulargauge/circulargauge.js"></script>

circulargauge/circulargauge.js

@@ -0,0 +1,51 @@
+var circulargaugecomponent;
+(function (circulargaugecomponent) {
+    $(function () {
+        var circularsample = new ej.datavisualization.CircularGauge($("#CircularGauge"), {
+            enableAnimation: false,
+            isResponsive: true,
+            backgroundColor: "transparent", width: 500,
+            scales: [{
+                    showRanges: true,
+                    startAngle: 122, sweepAngle: 296, radius: 130, showScaleBar: true, size: 1, maximum: 120, majorIntervalValue: 20, minorIntervalValue: 10,
+                    border: {
+                        width: 0.5
+                    },
+                    pointers: [{
+                            value: 60,
+                            showBackNeedle: true,
+                            backNeedleLength: 20,
+                            length: 95,
+                            width: 7
+                        }],
+                    ticks: [{
+                            type: "major",
+                            distanceFromScale: 2,
+                            height: 16,
+                            width: 1, color: "#8c8c8c"
+                        }, { type: "minor", height: 8, width: 1, distanceFromScale: 2, color: "#8c8c8c" }],
+                    labels: [{
+                            color: "#8c8c8c"
+                        }],
+                    ranges: [{
+                            distanceFromScale: -30,
+                            startValue: 0,
+                            endValue: 70
+                        }, {
+                            distanceFromScale: -30,
+                            startValue: 70,
+                            endValue: 110,
+                            backgroundColor: "#fc0606",
+                            border: { color: "#fc0606" }
+                        },
+                        {
+                            distanceFromScale: -30,
+                            startValue: 110,
+                            endValue: 120,
+                            backgroundColor: "#f5b43f",
+                            border: { color: "#f5b43f" }
+                        }]
+                }]
+        });
+    });
+})(circulargaugecomponent || (circulargaugecomponent = {}));

circulargauge/circulargauge.ts

@@ -0,0 +1,53 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module circulargaugecomponent {
+    $(function () {
+        var circularsample = new ej.datavisualization.CircularGauge($("#CircularGauge"), {
+            enableAnimation: false,
+            isResponsive: true,
+            backgroundColor: "transparent", width: 500,
+            scales: [{
+                showRanges: true,
+                startAngle: 122, sweepAngle: 296, radius: 130, showScaleBar: true, size: 1, maximum: 120, majorIntervalValue: 20, minorIntervalValue: 10,
+                border: {
+                    width: 0.5,
+                },
+                pointers: [{
+                    value: 60,
+                    showBackNeedle: true,
+                    backNeedleLength: 20,
+                    length: 95,
+                    width: 7
+                }],
+                ticks: [{
+                    type: "major",
+                    distanceFromScale: 2,
+                    height: 16,
+                    width: 1, color: "#8c8c8c"
+                }, { type: "minor", height: 8, width: 1, distanceFromScale: 2, color: "#8c8c8c" }],
+                labels: [{
+                    color: "#8c8c8c"
+                }],
+                ranges: [{
+                    distanceFromScale: -30,
+                    startValue: 0,
+                    endValue: 70
+                }, {
+                        distanceFromScale: -30,
+                        startValue: 70,
+                        endValue: 110,
+                        backgroundColor: "#fc0606",
+                        border: { color: "#fc0606" }
+                    },
+                    {
+                        distanceFromScale: -30,
+                        startValue: 110,
+                        endValue: 120,
+                        backgroundColor: "#f5b43f",
+                        border: { color: "#f5b43f" }
+                    }]
+            }]
+        });
+    });
+}

colorpicker/colorpicker.html

@@ -0,0 +1,14 @@
+<div class="cols-sample-area">
+    <div class="frame">
+        <div class="control">
+            <label>Choose Color</label>
+            <input type="text" id="colorpick" />
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="colorpicker/colorpicker.js"></script>
+<style>
+    .control{
+	    padding: 0 35%;
+	}
+</style>

colorpicker/colorpicker.js

@@ -0,0 +1,8 @@
+var ColorPickerComponent;
+(function (ColorPickerComponent) {
+    $(function () {
+        var colorSample = new ej.ColorPicker($("#colorpick"), {
+            value: "#278787"
+        });
+    });
+})(ColorPickerComponent || (ColorPickerComponent = {}));

colorpicker/colorpicker.ts

@@ -0,0 +1,10 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module ColorPickerComponent {
+    $(function () {
+        var colorSample = new ej.ColorPicker($("#colorpick"), {
+            value: "#278787"
+        });
+    });
+}

combobox/combobox.html

@@ -0,0 +1,8 @@
+<div class="cols-sample-area">
+    <div class="frame">
+        <div class="control">
+            <input type="text" id="selectCar" />
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="combobox/combobox.js"></script>

combobox/combobox.js

@@ -0,0 +1,18 @@
+var ComboBoxComponent;
+(function (ComboBoxComponent) {
+    var BikeList = [
+        { empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" },
+        { empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" },
+        { empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" },
+        { empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" }
+    ];
+    $(function () {
+        var comboboxInstance = new ej.ComboBox($("#selectCar"), {
+            width: "100%",
+            placeholder: "Select a Bike",
+            fields: { text: "text", value: "empid" },
+            dataSource: BikeList,
+            autofill: true
+        });
+    });
+})(ComboBoxComponent || (ComboBoxComponent = {}));

combobox/combobox.ts

@@ -0,0 +1,20 @@
+/// <reference path="../tsfiles/jquery.d.ts" />
+/// <reference path="../tsfiles/ej.web.all.d.ts" />
+
+module ComboBoxComponent{
+    var BikeList = [
+        { empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" },
+        { empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" },
+        { empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" },
+        { empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" }
+    ];
+    $(function () {
+        var comboboxInstance =new ej.ComboBox($("#selectCar"), {
+            width: "100%",
+            placeholder: "Select a Bike",
+			fields: { text: "text", value: "empid" },
+            dataSource: BikeList,
+            autofill: true
+        });
+    });
+}

content/ejthemes/bootstrap-theme/ej.reportdesigner.min.css

@@ -0,0 +1,3 @@
+@import url("../ej.reportdesigner.core.bootstrap.min.css");
+@import url("ej.reportdesigner.theme.min.css");
+

content/ejthemes/bootstrap-theme/ej.web.all.min.css

@@ -0,0 +1,3 @@
+@import url("../ej.widgets.core.bootstrap.min.css");
+@import url("ej.theme.min.css");
+

content/ejthemes/common-images/documenteditor/cellbottomalignment.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="20" class="st0" width="26" height="1"/>
+<rect x="5" y="25" class="st0" width="26" height="1"/>
+<rect x="5" y="30" class="st0" width="26" height="1"/>
+</svg>

content/ejthemes/common-images/documenteditor/cellcenteralignment.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="12" class="st0" width="26" height="1"/>
+<rect x="5" y="17" class="st0" width="26" height="1"/>
+<rect x="5" y="22" class="st0" width="26" height="1"/>
+</svg>

content/ejthemes/common-images/documenteditor/celltopalignment.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="5" class="st0" width="26" height="1"/>
+<rect x="5" y="10" class="st0" width="26" height="1"/>
+<rect x="5" y="15" class="st0" width="26" height="1"/>
+</svg>

content/ejthemes/common-images/documenteditor/tablecenteralignment.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="20" class="st0" width="26" height="1"/>
+<rect x="5" y="25" class="st0" width="26" height="1"/>
+<rect x="5" y="30" class="st0" width="16" height="1"/>
+<path class="st0" d="M22,6v9h-9V6H22 M23,5H12v11h11V5L23,5z"/>
+<polygon class="st0" points="18,6 17,6 17,15 18,15 18,6 "/>
+<polygon class="st0" points="22,10 13,10 13,11 22,11 22,10 "/>
+</svg>

content/ejthemes/common-images/documenteditor/tableleftalignment.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="20" class="st0" width="26" height="1"/>
+<rect x="5" y="25" class="st0" width="26" height="1"/>
+<rect x="5" y="30" class="st0" width="16" height="1"/>
+<path class="st0" d="M15,6v9H6V6H15 M16,5H5v11h11V5L16,5z"/>
+<polygon class="st0" points="11,6 10,6 10,15 11,15 11,6 "/>
+<polygon class="st0" points="15,10 6,10 6,11 15,11 15,10 "/>
+</svg>

content/ejthemes/common-images/documenteditor/tablerightalignment.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6B6B6B;}
+</style>
+<rect x="5" y="20" class="st0" width="26" height="1"/>
+<rect x="5" y="25" class="st0" width="26" height="1"/>
+<rect x="5" y="30" class="st0" width="16" height="1"/>
+<path class="st0" d="M30,6v9h-9V6H30 M31,5H20v11h11V5L31,5z"/>
+<polygon class="st0" points="26,6 25,6 25,15 26,15 26,6 "/>
+<polygon class="st0" points="30,10 21,10 21,11 30,11 30,10 "/>
+</svg>

content/ejthemes/common-images/kanban/nouser.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F0F2F4;}
+	.st1{fill:#C4C4C4;}
+	.st2{fill:#EAEAEA;}
+</style>
+<rect x="0.8" y="0.7" class="st0" width="43.5" height="43.7"/>
+<path class="st1" d="M34.6,28.5c-3.2,3-7.4,4.9-12.1,4.9s-8.9-1.9-12.1-4.9c-4.7,3.5-8.1,8.9-9.3,15.2h42.8
+	C42.7,37.3,39.3,31.9,34.6,28.5z"/>
+<circle class="st1" cx="22.5" cy="16" r="10.4"/>
+<path class="st2" d="M45,45H0V0h45V45z M1,44h43V1H1V44z"/>
+</svg>

content/ejthemes/common-images/navigationdrawer/icons.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="e-home" d="M426.667 85.333v256h170.667v-256h213.333v341.333h128l-426.667 384-426.667-384h128v-341.333h213.333z" />
+<glyph unicode="&#xe901;" glyph-name="e-profile" d="M512 874.667c-234.667 0-426.667-192-426.667-426.667s189.867-426.667 426.667-426.667 426.667 192 426.667 426.667-192 426.667-426.667 426.667zM512 106.667c-187.733 0-341.333 153.6-341.333 341.333s153.6 341.333 341.333 341.333 341.333-153.6 341.333-341.333-153.6-341.333-341.333-341.333zM512 473.6c57.6 0 104.533 46.933 104.533 104.533s-46.933 104.533-104.533 104.533-104.533-46.933-104.533-104.533 46.933-104.533 104.533-104.533zM512 422.4c-70.4 0-211.2-34.133-211.2-104.533v-53.333h422.4v53.333c0 68.267-140.8 104.533-211.2 104.533z" />
+<glyph unicode="&#xe902;" glyph-name="e-people" d="M682.667 490.667c70.827 0 127.573 57.173 127.573 128s-56.747 128-127.573 128c-70.827 0-128-57.173-128-128s57.173-128 128-128zM341.333 490.667c70.827 0 127.573 57.173 127.573 128s-56.747 128-127.573 128c-70.827 0-128-57.173-128-128s57.173-128 128-128zM341.333 405.333c-99.413 0-298.667-49.92-298.667-149.333v-106.667h597.333v106.667c0 99.413-199.253 149.333-298.667 149.333zM682.667 405.333c-12.373 0-26.453-0.853-41.387-2.133 49.493-35.84 84.053-84.053 84.053-147.2v-106.667h256v106.667c0 99.413-199.253 149.333-298.667 149.333z" />
+<glyph unicode="&#xe903;" glyph-name="e-photo" d="M896 832h-768c-42.667 0-85.333-42.667-85.333-85.333v-597.333c0-46.933 38.4-85.333 85.333-85.333h768c42.667 0 85.333 42.667 85.333 85.333v597.333c0 42.667-42.667 85.333-85.333 85.333zM213.333 234.667l149.333 192 106.667-128.427 149.333 192.427 192-256h-597.333z" />
+<glyph unicode="&#xe904;" glyph-name="e-communities" d="M925.867 445.867c0 44.8-36.267 81.067-78.933 85.333-29.867 123.733-128 219.733-249.6 251.733-4.267 44.8-40.533 78.933-85.333 78.933s-81.067-34.133-85.333-78.933c-123.733-32-219.733-128-249.6-251.733-44.8-2.133-78.933-40.533-78.933-85.333s36.267-83.2 81.067-85.333c32-121.6 128-215.467 247.467-247.467 2.133-44.8 38.4-83.2 85.333-83.2s83.2 36.267 85.333 83.2c121.6 29.867 217.6 125.867 247.467 247.467 44.8 4.267 81.067 40.533 81.067 85.333zM593.067 145.067c-12.8 32-42.667 57.6-81.067 57.6s-68.267-23.467-81.067-57.6c-106.667 27.733-192 113.067-221.867 219.733 34.133 10.667 57.6 42.667 57.6 81.067s-25.6 70.4-59.733 81.067c27.733 108.8 113.067 194.133 221.867 221.867 10.667-34.133 42.667-59.733 81.067-59.733s70.4 25.6 81.067 59.733c108.8-29.867 192-115.2 221.867-221.867-34.133-10.667-59.733-42.667-59.733-81.067s23.467-68.267 57.6-81.067c-25.6-106.667-110.933-189.867-217.6-219.733z" />
+<glyph unicode="&#xe905;" glyph-name="e-location" d="M512 618.667c-94.293 0-170.667-76.373-170.667-170.667s76.373-170.667 170.667-170.667 170.667 76.373 170.667 170.667-76.373 170.667-170.667 170.667zM893.44 490.667c-19.627 177.92-160.853 319.147-338.773 338.773v87.893h-85.333v-87.893c-177.92-19.627-319.147-160.853-338.773-338.773h-87.893v-85.333h87.893c19.627-177.92 160.853-319.147 338.773-338.773v-87.893h85.333v87.893c177.92 19.627 319.147 160.853 338.773 338.773h87.893v85.333h-87.893zM512 149.333c-165.12 0-298.667 133.547-298.667 298.667s133.547 298.667 298.667 298.667 298.667-133.547 298.667-298.667-133.547-298.667-298.667-298.667z" />
+</font></defs></svg>