Merge pull request #16 from Saranya13/master

v18.3.35 Released

Author: ajithr

index.html

@@ -20,11 +20,21 @@
     <link href="src/common/lib/content/roboto.css" rel="stylesheet">
     <link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" />
     <link href="src/common/lib/highlightjs/styles/default.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
     <style rel="stylesheet" id="themelink"></style>
     <link href="styles/index.css" rel="stylesheet" />
     <link href="src/common/lib/content/codemirror.css" rel="stylesheet"></link>
     <script src="src/skipChunk.js" type="text/javascript"></script>
     <script src="src/common.min.js" type="text/javascript"></script>
+    <script>
+        var orgin = location.origin;
+        var baseref = location.href.split('#')[0].replace(orgin, '');
+        if (baseref.charAt(baseref.length - 1) !== '/') {
+            baseref += '/';
+        }
+        document.write('<base href="' + baseref + '">');
+        </script>
+    
     <script>
         if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
             document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"><\/script>');
@@ -140,7 +150,12 @@
                 <div class='sb-header-item sb-table-cell sb-download-wrapper'>
                     <a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank">
                         <button id='download-now' class='sb-download-btn'>
-                            <span class='sb-download-text'>Download Now</span>
+                            <span class='sb-download-text'>FREE TRIAL</span>
+                        </button>
+                    </a>
+                    <a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank">
+                        <button class='sb-npm-btn'>
+                            <img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span class="doc-npm-link">Install NPM</span>
                         </button>
                     </a>
                 </div>
@@ -354,6 +369,38 @@ <h1 class='sb-sample-text'>Chart</h1>
                 </div>
                 <div class='description-section sb-rightpane-padding'>
                 </div>
+                <div class="ad-wrapper">
+                    <div id='ad-image' class="ad-img">
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="col-sm-12">
+                                    <div id="ad-banner-head" class="ad-header">Transform your Javascript web apps today with Syncfusion Javascript controls</div>
+                                </div>
+                                <div class="col-sm-12 cnt-area">
+                                    <div class="content-area">
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                            <div class="cnt-text">65+ high-performance and responsive UI components</div>
+                                        </div>
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                            <div class="cnt-text">Dedicated support</div>
+                                        </div>
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                            <div class="cnt-text">Hassle-free licensing</div>
+                                        </div>
+                                    </div>
+                                    <a style="color:#ffff;text-decoration:none;"
+                                        href="https://www.syncfusion.com/downloads/essential-js2">
+                                        <div class="free-trial">TRY IT FOR FREE</div>
+                                    </a>
+                                </div>
+                            </div>
+                
+                        </div>
+                    </div>
+                </div>
                 <div class="sb-footer">
                     <div class="sb-footer-left">
                         <div class="sb-footer-links">

karma.conf.js

@@ -19,6 +19,7 @@ module.exports = function (config) {
             "test-main.js",
             { pattern: "src/**/*.*", included: false },
             { pattern: "styles/**/*.*", included: false },
+            { pattern: "src/skipChunk.js", included: true },
             { pattern: "src/common.min.js", included: true },
             { pattern: "spec/**/*.spec.js", included: false },
             { pattern: "node_modules/@syncfusion/ej2-base/**/*.js", included: false },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "18.2.44",
+  "version": "18.3.35",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -79,8 +79,8 @@
     "@types/requirejs": "^2.1.26",
     "run-sequence": "^1.2.2",
     "typescript": "2.8.4",
-    "webpack": "*",
-    "webpack-cli": "*",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
     "shelljs": "*"
   },
   "scripts": {

src/accordion/ajax-stack.json

@@ -1 +1 @@
-{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div class=\"control_wrapper accordion-control-section\">\n        <div class=\"product_title\"> iPhone X Product Specification </div>\n        <div id=\"Accordion_Nested\"></div>\n    </div>\n\n    <div id=\"Sensor_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <td class=\"e-bold\">Proximity sensor</td>\n                <td>Yes</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Face ID</td>\n                <td>Yes</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Accelerometer</td>\n                <td>Yes</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"Hard_Soft_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th rowspan=\"3\"> Hardware</th>\n                <td class=\"e-bold\" rowspan=\"2 \">Chip</td>\n                <td>Apple A11 Bionic chip with 64-bit architecture</td>\n            </tr>\n            <tr>\n                <td>Embedded M11 motion coprocessor</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Capacity</td>\n                <td>64GB/256GB</td>\n            </tr>\n            <tr>\n                <th> Software</th>\n                <td class=\"e-bold\" rowspan=\"2 \">Operating System</td>\n                <td>iOS 11</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"Video_Rec_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th class=\"e-bold\" rowspan=\"9\">Video Recording</th>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">4K video recording</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">1080p &amp; 720p HD video recording</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Optical zoom, 6x digital zoom</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Slow motion video support</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Take 8MP still photos while recording 4K video</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Noise reduction</td>\n            </tr>\n\n        </tbody></table>\n    </div>\n    <div id=\"Camera_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th class=\"e-bold\" rowspan=\"3\">Camera</th>\n                <td class=\"e-bold\"> 12MP wide-angle</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Live Photos with stabilization</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Body and face detection</td>\n            </tr>\n            <tr>\n                <th class=\"e-bold\" rowspan=\"4\">TrueDepth Camera</th>\n                <td class=\"e-bold\"> 7MP camera</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\"> Animoji</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\"> Face detection</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"source_link\">Source: &#xA0;\n        <a href=\"https://www.apple.com/iphone-x/specs/\" target=\"_blank\">www.apple.com/iphone-x/specs/</a>\n   </div>\n</div>\n\n\n<style>\n\n    @-moz-document url-prefix() {\n      .e-accordion .e-content table {\n        border-collapse: initial;\n    }\n    }\n\n    .e-accordion table {\n        border-collapse: collapse;\n        border-spacing: 0;\n        width: 100%;\n    }\n\n    .e-accordion table th,\n    .e-accordion table td {\n        font-weight: normal;\n        padding: 5px;\n        text-align: left;\n        border: 1px solid #ddd\n    }\n\n    .product_title {\n        text-align: center;\n        margin: 20px 0;\n        padding: 10px 0;\n        text-overflow: ellipsis;\n        font-weight: bold;\n        font-size: 16px;\n    }\n\n    .accordion-control-section {\n        margin: 0 10% 0 10%;\n        padding-bottom: 25px;\n    }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Accordion Ajax Sample\n */\nimport { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';\nimport { Ajax } from '@syncfusion/ej2-base';\n\nlet acrdnObj: Accordion;\nlet nestAcrdn: Accordion;\n\n    \n\n    let ajax: Ajax = new Ajax('//ej2.syncfusion.com/demos/src/accordion/ajax-content.html', 'GET', true);\n    ajax.send().then();\n    ajax.onSuccess = (data: string): void => {\n        //Initialize Accordion component\n        acrdnObj = new Accordion({\n            expandMode: 'Single',\n            expanding: expand,\n            items: [\n                { header: 'Network & Connectivity', content: data, expanded: true },\n                { header: 'Feature', content: '<div id=\"nested_Acc\"></div>' },\n                { header: 'Hardware & Software', content: '#Hard_Soft_features' }\n            ]\n        });\n        //Render initialized Accordion component\n        acrdnObj.appendTo('#Accordion_Nested');\n    };\n\n//Expanding Event function for Accordion component.\nfunction expand(e: ExpandEventArgs): void {\n    if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n        if (e.element.querySelectorAll('.e-accordion').length > 0) {\n            return;\n        }\n        //Initialize Nested Accordion component\n        nestAcrdn = new Accordion({\n            expandMode: 'Single',\n            items: [\n                { header: 'Sensor', content: '#Sensor_features' },\n                { header: 'Camera', content: '#Camera_features' },\n                { header: 'Video Recording', content: '#Video_Rec_features' },\n            ]\n        });\n        //Render initialized Nested Accordion component\n        nestAcrdn.appendTo('#nested_Acc');\n    }\n}\n"}
+{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div class=\"control_wrapper accordion-control-section\">\n        <div class=\"product_title\"> iPhone X Product Specification </div>\n        <div id=\"Accordion_Nested\"></div>\n    </div>\n\n    <div id=\"Sensor_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <td class=\"e-bold\">Proximity sensor</td>\n                <td>Yes</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Face ID</td>\n                <td>Yes</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Accelerometer</td>\n                <td>Yes</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"Hard_Soft_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th rowspan=\"3\"> Hardware</th>\n                <td class=\"e-bold\" rowspan=\"2 \">Chip</td>\n                <td>Apple A11 Bionic chip with 64-bit architecture</td>\n            </tr>\n            <tr>\n                <td>Embedded M11 motion coprocessor</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Capacity</td>\n                <td>64GB/256GB</td>\n            </tr>\n            <tr>\n                <th> Software</th>\n                <td class=\"e-bold\" rowspan=\"2 \">Operating System</td>\n                <td>iOS 11</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"Video_Rec_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th class=\"e-bold\" rowspan=\"9\">Video Recording</th>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">4K video recording</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">1080p &amp; 720p HD video recording</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Optical zoom, 6x digital zoom</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Slow motion video support</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Take 8MP still photos while recording 4K video</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Noise reduction</td>\n            </tr>\n\n        </tbody></table>\n    </div>\n    <div id=\"Camera_features\" style=\"display:none\">\n        <table>\n            <tbody><tr>\n                <th class=\"e-bold\" rowspan=\"3\">Camera</th>\n                <td class=\"e-bold\"> 12MP wide-angle</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Live Photos with stabilization</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\">Body and face detection</td>\n            </tr>\n            <tr>\n                <th class=\"e-bold\" rowspan=\"4\">TrueDepth Camera</th>\n                <td class=\"e-bold\"> 7MP camera</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\"> Animoji</td>\n            </tr>\n            <tr>\n                <td class=\"e-bold\"> Face detection</td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div id=\"source_link\">Source: &#xA0;\n        <a href=\"https://www.apple.com/iphone-x/specs/\" target=\"_blank\">www.apple.com/iphone-x/specs/</a>\n   </div>\n</div>\n\n\n<style>\n\n    @-moz-document url-prefix() {\n      .e-accordion .e-content table {\n        border-collapse: initial;\n    }\n    }\n\n    .e-accordion table {\n        border-collapse: collapse;\n        border-spacing: 0;\n        width: 100%;\n    }\n\n    .e-accordion table th,\n    .e-accordion table td {\n        font-weight: normal;\n        padding: 5px;\n        text-align: left;\n        border: 1px solid #ddd\n    }\n\n    .product_title {\n        text-align: center;\n        margin: 20px 0;\n        padding: 10px 0;\n        text-overflow: ellipsis;\n        font-weight: bold;\n        font-size: 16px;\n    }\n\n    .accordion-control-section {\n        margin: 0 10% 0 10%;\n        padding-bottom: 25px;\n    }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Accordion Ajax Sample\n */\nimport { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';\nimport { Ajax } from '@syncfusion/ej2-base';\n\nlet acrdnObj: Accordion;\nlet nestAcrdn: Accordion;\n\n    \n\n    let ajax: Ajax = new Ajax('//npmci.syncfusion.com/production/demos/src/accordion/ajax-content.html', 'GET', true);\n    ajax.send().then();\n    ajax.onSuccess = (data: string): void => {\n        //Initialize Accordion component\n        acrdnObj = new Accordion({\n            expandMode: 'Single',\n            expanding: expand,\n            items: [\n                { header: 'Network & Connectivity', content: data, expanded: true },\n                { header: 'Feature', content: '<div id=\"nested_Acc\"></div>' },\n                { header: 'Hardware & Software', content: '#Hard_Soft_features' }\n            ]\n        });\n        //Render initialized Accordion component\n        acrdnObj.appendTo('#Accordion_Nested');\n    };\n\n//Expanding Event function for Accordion component.\nfunction expand(e: ExpandEventArgs): void {\n    if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n        if (e.element.querySelectorAll('.e-accordion').length > 0) {\n            return;\n        }\n        //Initialize Nested Accordion component\n        nestAcrdn = new Accordion({\n            expandMode: 'Single',\n            items: [\n                { header: 'Sensor', content: '#Sensor_features' },\n                { header: 'Camera', content: '#Camera_features' },\n                { header: 'Video Recording', content: '#Video_Rec_features' },\n            ]\n        });\n        //Render initialized Nested Accordion component\n        nestAcrdn.appendTo('#nested_Acc');\n    }\n}\n"}