v16.4.0.42

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.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.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.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.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.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.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.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.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.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.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/images/NewOutlook-Icon/Outlook Icon/Embed Font in CSS/demo.html

@@ -0,0 +1,170 @@
+<html>
+<head>
+<title>Font Icon</title>
+<link rel="stylesheet" href="style.css"></head>
+<style> #wrapper {width: 500px; margin: 0 auto; } p {margin: 0px; } .ultile { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 100%; list-style-position: outside;  } .litile { float: left; height: 150px; width: 150px; padding: 15px 8px 0 8px; display: list-item; text-align: -webkit-match-parent;} .innerTile {background-color: white;  width: 100%; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; border-color: gray;border-radius: 10px; } .iconouterdiv{height:43%;width:100%;position:relative;margin:0 auto;} .iconinnerdiv{height:100%;width:100%;display:block;text-align:center;vertical-align: middle;} .txtouterdiv{height:22%;width:100%;} .txtinnerdiv{text-align:left;margin-left:10px;margin-top:5px} .nametxt{color:#4791F9;display:block;font-size:12px;font-family: Segoe UI;} .valuetxt{display:block;font-size:15px;font-family: Segoe UI;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;} .icon{display: inline-block;vertical-align: middle;line-height: normal;margin-top:10%;} </style>
+</head>
+<body style="background-color:#F4F4F4">
+  <div style ="width:100%;text-align:center;height:100%;display:block;top:30px;position:absolute">
+<div id="headingDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
+<div style="text-align:left;margin-left:10px;">
+<p style="color:darkblue;">Font Name : Outlook Icon</p></div></div>
+<div id="tileDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
+<ul class="ultile">
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-message-mail-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">message-mail-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e700</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-add icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">add</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e701</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-trash-can1-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">trash-can1-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e702</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-archive02-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">archive02-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e703</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-search icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">search</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e704</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-settings-01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">settings-01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e705</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-bell-new icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">bell-new</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e706</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-view-small-icons-01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">view-small-icons-01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e707</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-up-arrow---01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">up-arrow---01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e708</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-expander-down---01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">expander-down---01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e709</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-attachment-02-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">attachment-02-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e70a</span></div></div>
+ </div>     </li>
+ </ul>    </div>  </div>
+</body>
+</html>

content/images/NewOutlook-Icon/Outlook Icon/Embed Font in CSS/style.css

@@ -0,0 +1,32 @@
+@font-face {
+font-family: 'Outlook Icon';
+src:
+url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+font-weight: normal;
+font-style: normal;
+}
+
+[class^="ej-icon-"], [class*=" ej-icon-"] {
+ font-family: 'Outlook Icon' !important;
+speak: none;
+font-size: 55px;
+font-style: normal;
+font-weight: normal;
+font-variant: normal;
+text-transform: none;
+line-height: 1;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+
+.ej-icon-message-mail-wf:before { content: "\e700"; }
+.ej-icon-add:before { content: "\e701"; }
+.ej-icon-trash-can1-wf:before { content: "\e702"; }
+.ej-icon-archive02-wf:before { content: "\e703"; }
+.ej-icon-search:before { content: "\e704"; }
+.ej-icon-settings-01:before { content: "\e705"; }
+.ej-icon-bell-new:before { content: "\e706"; }
+.ej-icon-view-small-icons-01:before { content: "\e707"; }
+.ej-icon-up-arrow---01:before { content: "\e708"; }
+.ej-icon-expander-down---01:before { content: "\e709"; }
+.ej-icon-attachment-02-wf:before { content: "\e70a"; }

content/images/NewOutlook-Icon/Outlook Icon/Fonts/Outlook Icon.svg

@@ -0,0 +1,34 @@
+<?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 Syncfusion Metro Studio</metadata>
+<defs>
+<font id="Outlook Icon" horiz-adv-x="1024" >
+<font-face units-per-em="1024" ascent="819" descent="-205" />
+<missing-glyph horiz-adv-x="1024" />
+
+<glyph unicode="&#xe700;" glyph-name="message-mail-wf" d="M502.4,375L940,700.3 940,190 65,190 65,701.6 502.4,375z M940,815L940,778.2 502.5,453 65,779.6 65,815 940,815z M2.5,815L2.5,190C2.5,155.5,30.5,127.5,65,127.5L940,127.5C974.5,127.5,1002.5,155.5,1002.5,190L1002.5,815C1002.5,849.5,974.5,877.5,940,877.5L65,877.5C30.5,877.5,2.5,849.5,2.5,815z" />
+
+<glyph unicode="&#xe701;" glyph-name="add" d="M380.6,621.3L2.5,621.3 2.5,380.6 383.7,380.6 383.7,2.5 624.3,2.5 624.3,383.8 1002.4,383.8 1002.4,624.4 621.2,624.4 621.2,1002.5 380.6,1002.5 380.6,621.3z" />
+
+<glyph unicode="&#xe702;" glyph-name="trash-can1-wf" d="M627.5,158.8L690,158.8 690,752.6 627.5,752.6 627.5,158.8z M471.2,158.8L533.7,158.8 533.7,752.6 471.2,752.6 471.2,158.8z M315,158.8L377.5,158.8 377.5,752.6 315,752.6 315,158.8z M221.2,846.3L783.7,846.3 783.7,65 221.2,65 221.2,846.3 221.2,846.3z M564.8,921.3L564.8,908.8 439.8,908.8 439.8,921.3C439.8,932.6,444.8,939.3,446.1,940.1L557.8,940.2C559.8,939.3,564.8,932.5,564.8,921.3z M377.4,921.3L377.4,908.8 158.7,908.8 127.5,908.8 127.5,846.3 158.7,846.3 158.7,65C158.7,30.5,186.7,2.5,221.2,2.5L783.8,2.5C818.3,2.5,846.3,30.5,846.3,65L846.3,846.3 877.6,846.3 877.6,908.8 846.3,908.8 627.5,908.8 627.5,921.3C627.5,966.9,597.2,1002.6,558.7,1002.6L446.2,1002.6C407.7,1002.5,377.4,966.8,377.4,921.3z" />
+
+<glyph unicode="&#xe703;" glyph-name="archive02-wf" d="M628.8,628.8L628.8,564.1 376.3,564.1 376.3,628.8 628.8,628.8z M315.6,503.5L689.4,503.5 689.4,689.4 315.6,689.4 315.6,503.5z M879.2,754L879.2,63.1 125.7,63.1 125.7,754 879.2,754z M941.9,941.9L941.9,814.6 939.9,814.6 65.1999999999999,814.6 63.1999999999999,814.6 63.1999999999999,941.9 941.9,941.9z M2.5,754L65.1,754 65.1,2.5 939.8,2.5 939.8,754 1002.4,754 1002.4,1002.5 2.5,1002.5 2.5,754z" />
+
+<glyph unicode="&#xe704;" glyph-name="search" d="M428.5,858.6C559.4,849.3 652.9,743.3 640.5,627.9 628,509.5 512.6,425.3 381.7,437.8 250.8,447.1 157.3,553.1 169.7,668.5 182.2,777.6 285,858.7 403.5,858.7L428.5,858.7z M4.5,680.9C-17.3,484.5 141.7,309.9 359.9,291.2 434.7,284.9 503.3,297.4 565.7,322.4L833.7,32.5C868,-1.7 927.3,-8 967.8,23.2 1008.3,51.2 1014.5,107.4 980.3,141.6L715.3,425.3C759,478.3 787,540.6 796.4,609.2 818.2,805.6 659.2,980.2 441,998.9 428.5,1002 412.9,1002 400.5,1002 200.9,1002 26.3,864.9 4.5,680.9z" />
+
+<glyph unicode="&#xe705;" glyph-name="settings-01" d="M746.2,505.6C746.2,368.1 633.7,255.6 496.2,255.6 358.7,255.6 246.2,368.1 246.2,505.6 246.2,643.1 358.7,755.6 496.2,755.6 636.9,755.6 746.2,646.2 746.2,505.6z M252.5,946.2L268.1,796.2C252.5,783.7,236.8,768.1,221.2,752.5L65,777.5 2.5,636.9 127.5,540 127.5,486.9 127.5,477.5 2.5,386.9 58.7,243.1 218.1,265 224.4,255.6C230.6,249.4,236.9,240,246.3,233.7L249.4,230.6 221.3,68.1 361.9,5.6 465,136.9 477.5,136.9 518.1,136.9 524.4,136.9 618.1,2.5 765,61.9 743.1,230.6 749.4,236.9 771.3,258.8 774.4,261.9 933.8,233.8 996.3,374.4 868.2,471.3 868.2,515 1002.6,611.9 946.4,755.6 787,733.7 783.9,739.9C771.4,752.4,758.9,764.9,749.5,777.4L746.4,780.5 771.4,933.6 630.8,996.1 537,874.2 530.7,874.2 486.9,874.2 396.3,1002.3 252.5,946.2z" />
+
+<glyph unicode="&#xe706;" glyph-name="bell-new" d="M552.2,909.3L552.2,900 552.2,896.9 542.9,896.9C527.4,900 511.8,900 493.2,900 480.8,900 468.4,896.9 455.9,896.9L446.6,896.9 446.6,900 446.6,909.3C446.6,943.5 471.4,971.4 502.5,971.4 533.6,971.4 558.4,943.5 552.2,909.3z M421.8,909.3L421.8,896.9 421.8,893.8 412.5,890.7C316.2,862.8 254.1,788.2 254.1,701.3 254.1,685.8 257.2,667.1 263.4,648.5 272.7,567.7 278.9,415.6 204.4,350.3 101.9,260.2 129.9,188.8 142.3,167.1L456,167.1 484,167.1 484,92.6 480.9,92.6C465.4,83.3 453,67.8 453,49.1 453,24.3 474.7,2.49999999999999 499.6,2.49999999999999 524.4,2.49999999999999 546.2,24.3 546.2,49.1 546.2,70.8 533.8,86.4 518.3,92.6L515.2,92.6 515.2,167.1 543.1,167.1 863,167.1C875.4,188.9 903.4,257.2 800.9,350.3 735.7,412.4 735.7,539.8 741.9,623.6 754.3,645.3 760.5,670.2 760.5,698.1 760.5,788.2 686,859.6 586.6,887.5L580.4,890.6 586.6,890.6 586.6,909.3C586.6,962.1 549.4,1002.5 502.8,1002.5 459,1002.5 421.8,962.1 421.8,909.3z" />
+
+<glyph unicode="&#xe707;" glyph-name="view-small-icons-01" d="M731.7,2.5L998.4,2.5 998.4,269.2 731.7,269.2 731.7,2.5z M369.1,2.5L635.8,2.5 635.8,269.2 369.1,269.2 369.1,2.5z M6.6,2.5L273.3,2.5 273.3,269.2 6.6,269.2 6.6,2.5z M731.7,369.2L998.4,369.2 998.4,635.9 731.7,635.9 731.7,369.2z M369.1,369.2L635.8,369.2 635.8,635.9 369.1,635.9 369.1,369.2z M6.6,369.2L273.3,369.2 273.3,635.9 6.6,635.9 6.6,369.2z M731.7,735.8L998.4,735.8 998.4,1002.5 731.7,1002.5 731.7,735.8z M369.1,735.8L635.8,735.8 635.8,1002.5 369.1,1002.5 369.1,735.8z M6.6,735.8L273.3,735.8 273.3,1002.5 6.6,1002.5 6.6,735.8z" />
+
+<glyph unicode="&#xe708;" glyph-name="up-arrow---01" d="M509.5,806.3L2.5,458.1 2.5,194.1 513.7,545 1002.6,194 1002.6,458.1 517.8,806.3 516.7,811.1 513.7,809.1 510.6,811.1 509.5,806.3z" />
+
+<glyph unicode="&#xe709;" glyph-name="expander-down---01" d="M2.5,808.7L2.5,554.5 506.1,194 1002.5,548.5 1002.5,807.3 506,452.7 5.2,811 2.5,808.7z" />
+
+<glyph unicode="&#xe70a;" glyph-name="attachment-02-wf" d="M283.8,754.8L283.8,471.3 283.8,346.3 283.8,157C283.8,71.8 353.9,2.5 440,2.5 526.1,2.5 596.2,71.7 596.2,157L596.2,315 596.2,471.3 596.2,725.2C596.2,774.7 554.2,815 502.5,815 450.8,815 408.7,774.7 408.7,725.2L408.7,283.8C408.7,266.5 422.7,252.5 440,252.5 457.3,252.5 471.3,266.5 471.3,283.8L471.3,725.2C471.3,740.3 485.4,752.5 502.6,752.5 519.8,752.5 533.8,740.3 533.8,725.2L533.8,471.3 533.8,315 533.8,157C533.8,106.3 491.8,65 440.1,65 388.4,65 346.3,106.3 346.3,157L346.3,346.3 346.3,471.3 346.3,754.9C346.3,857 416.4,940 502.5,940 588.6,940 658.7,857 658.7,754.8L658.7,366.8C658.7,349.5 672.7,335.5 690,335.5 707.3,335.5 721.3,349.5 721.3,366.8L721.3,754.9C721.3,891.5 623.1,1002.6 502.5,1002.6 381.9,1002.6 283.8,891.5 283.8,754.8z" />
+
+</font>
+</defs>
+</svg>

content/images/NewOutlook-Icon/Outlook Icon/demo.html

@@ -0,0 +1,170 @@
+<html>
+<head>
+<title>Font Icon</title>
+<link rel="stylesheet" href="style.css"></head>
+<style> #wrapper {width: 500px; margin: 0 auto; } p {margin: 0px; } .ultile { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 100%; list-style-position: outside;  } .litile { float: left; height: 150px; width: 150px; padding: 15px 8px 0 8px; display: list-item; text-align: -webkit-match-parent;} .innerTile {background-color: white;  width: 100%; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; border-color: gray;border-radius: 10px; } .iconouterdiv{height:43%;width:100%;position:relative;margin:0 auto;} .iconinnerdiv{height:100%;width:100%;display:block;text-align:center;vertical-align: middle;} .txtouterdiv{height:22%;width:100%;} .txtinnerdiv{text-align:left;margin-left:10px;margin-top:5px} .nametxt{color:#4791F9;display:block;font-size:12px;font-family: Segoe UI;} .valuetxt{display:block;font-size:15px;font-family: Segoe UI;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;} .icon{display: inline-block;vertical-align: middle;line-height: normal;margin-top:10%;} </style>
+</head>
+<body style="background-color:#F4F4F4">
+  <div style ="width:100%;text-align:center;height:100%;display:block;top:30px;position:absolute">
+<div id="headingDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
+<div style="text-align:left;margin-left:10px;">
+<p style="color:darkblue;">Font Name : Outlook Icon</p></div></div>
+<div id="tileDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
+<ul class="ultile">
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-message-mail-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">message-mail-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e700</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-add icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">add</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e701</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-trash-can1-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">trash-can1-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e702</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-archive02-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">archive02-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e703</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-search icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">search</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e704</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-settings-01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">settings-01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e705</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-bell-new icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">bell-new</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e706</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-view-small-icons-01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">view-small-icons-01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e707</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-up-arrow---01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">up-arrow---01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e708</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-expander-down---01 icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">expander-down---01</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e709</span></div></div>
+ </div>     </li>
+<li class="litile">
+<div class="innerTile">
+<div class="iconouterdiv">
+<div class="iconinnerdiv">
+<span class="ej-icon-attachment-02-wf icon"> </span> </div> </div>
+<div class="txtouterdiv">
+<div class="txtinnerdiv">
+<span class="nametxt">Name</span>
+<span class="valuetxt">attachment-02-wf</span></div></div>
+    <div class="txtouterdiv">
+    <div class="txtinnerdiv">
+     <span class="nametxt">PUA</span>
+   <span class="valuetxt">e70a</span></div></div>
+ </div>     </li>
+ </ul>    </div>  </div>
+</body>
+</html>

content/images/NewOutlook-Icon/Outlook Icon/style.css

@@ -0,0 +1,35 @@
+@font-face {
+font-family: 'Outlook Icon';
+src:
+url('Fonts/Outlook Icon.ttf') format('truetype'),
+url('Fonts/Outlook Icon.woff') format('woff'),
+url('Fonts/Outlook Icon.eot') format('eot'),
+url('Fonts/Outlook Icon.svg?#Outlook Icon') format('svg');
+font-weight: normal;
+font-style: normal;
+}
+
+[class^="ej-icon-"], [class*=" ej-icon-"] {
+ font-family: 'Outlook Icon' !important;
+speak: none;
+font-size: 55px;
+font-style: normal;
+font-weight: normal;
+font-variant: normal;
+text-transform: none;
+line-height: 1;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+
+.ej-icon-message-mail-wf:before { content: "\e700"; }
+.ej-icon-add:before { content: "\e701"; }
+.ej-icon-trash-can1-wf:before { content: "\e702"; }
+.ej-icon-archive02-wf:before { content: "\e703"; }
+.ej-icon-search:before { content: "\e704"; }
+.ej-icon-settings-01:before { content: "\e705"; }
+.ej-icon-bell-new:before { content: "\e706"; }
+.ej-icon-view-small-icons-01:before { content: "\e707"; }
+.ej-icon-up-arrow---01:before { content: "\e708"; }
+.ej-icon-expander-down---01:before { content: "\e709"; }
+.ej-icon-attachment-02-wf:before { content: "\e70a"; }