Ej2 4469 radio button

pipeline · pipeline · commit a3e618860006 · 2017-09-28T09:38:19.000Z
diff --git a/src/button/default-plnkr.json b/src/button/default-plnkr.json
@@ -1 +1 @@
-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Button } from '@syncfusion/ej2-buttons';\n\n/**\n * Default button sample\n */\n\n    let button: Button = new Button();\n    button.appendTo('#normalbtn');\n\n    button = new Button({ isPrimary: true });\n    button.appendTo('#primarybtn');\n\n    button = new Button({ cssClass: 'e-flat' });\n    button.appendTo('#flatbtn');\n\n    button = new Button({ cssClass: 'e-outline', isPrimary: true });\n    button.appendTo('#outlinebtn');\n\n    button = new Button({ iconCss: 'e-icons e-prev-icon', cssClass: 'e-flat' });\n    button.appendTo('#previconbtn');\n\n    let togglebtn: Button = new Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });\n    togglebtn.appendTo('#togglebtn');\n\n    button = new Button({ iconCss: 'e-icons e-open-icon', cssClass: 'e-flat', iconPosition: 'right' });\n    button.appendTo('#openiconbtn');\n\n    button = new Button({ cssClass: 'e-success' });\n    button.appendTo('#successbtn');\n\n    button = new Button({ cssClass: 'e-info' });\n    button.appendTo('#infobtn');\n\n    button = new Button({ cssClass: 'e-warning' });\n    button.appendTo('#warningbtn');\n\n    button = new Button({ cssClass: 'e-danger' });\n    button.appendTo('#dangerbtn');\n\n    button = new Button({ cssClass: 'e-small' });\n    button.appendTo('#smallbtn');\n\n\n    document.getElementById('togglebtn').onclick = (): void => {\n        if (document.getElementById('togglebtn').classList.contains('e-active')) {\n            togglebtn.content = 'Pause';\n            togglebtn.iconCss = 'e-icons e-pause-icon';\n        } else {\n            togglebtn.content = 'Play';\n            togglebtn.iconCss = 'e-icons e-play-icon';\n        }\n    };\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n    <div class=\"button-section\">\n        <div id=\"button-control\">\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"primarybtn\">Primary</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"normalbtn\">Normal</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"outlinebtn\">Outline</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"flatbtn\">Flat</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"successbtn\">Success</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"warningbtn\">Warning</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"dangerbtn\">Danger</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"infobtn\">Info</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"previconbtn\"></button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"togglebtn\">Play</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"openiconbtn\">Open</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"smallbtn\">Small</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<style>\n    #button-control {\n        width: 100%;\n        margin-top: 10%;\n        text-align: center;\n    }\n    \n    @media only screen and (max-width: 500px) {\n        #button-control {\n            margin-left: -3%;\n        }\n    }\n    \n    .button-section {\n        width: 80%;\n        margin: auto;\n    }\n    \n    #button-control .col-xs-12 {\n        margin-bottom: 30px;\n    }\n    \n    #button-control .e-btn-icon::before {\n        position: relative;\n        top: 1px;\n    }\n    \n    .e-play-icon::before {\n        content: '\\e798';\n    }\n    \n    .e-pause-icon::before {\n        content: '\\e753';\n    }\n    \n    .e-open-icon::before {\n        content: '\\e782';\n    }\n\n    .e-prev-icon::before {\n        content: '\\e797';\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Button } from '@syncfusion/ej2-buttons';\n\n/**\n * Default button sample\n */\n\n    let button: Button = new Button();\n    button.appendTo('#normalbtn');\n\n    button = new Button({ isPrimary: true });\n    button.appendTo('#primarybtn');\n\n    button = new Button({ cssClass: 'e-flat' });\n    button.appendTo('#flatbtn');\n\n    button = new Button({ cssClass: 'e-outline', isPrimary: true });\n    button.appendTo('#outlinebtn');\n\n    button = new Button({ iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });\n    button.appendTo('#roundbtn');\n\n    let togglebtn: Button = new Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });\n    togglebtn.appendTo('#togglebtn');\n\n    button = new Button({ iconCss: 'e-icons e-open-icon', cssClass: 'e-flat', iconPosition: 'right' });\n    button.appendTo('#openiconbtn');\n\n    button = new Button({ cssClass: 'e-success' });\n    button.appendTo('#successbtn');\n\n    button = new Button({ cssClass: 'e-info' });\n    button.appendTo('#infobtn');\n\n    button = new Button({ cssClass: 'e-warning' });\n    button.appendTo('#warningbtn');\n\n    button = new Button({ cssClass: 'e-danger' });\n    button.appendTo('#dangerbtn');\n\n    button = new Button({ cssClass: 'e-small' });\n    button.appendTo('#smallbtn');\n\n\n    document.getElementById('togglebtn').onclick = (): void => {\n        if (document.getElementById('togglebtn').classList.contains('e-active')) {\n            togglebtn.content = 'Pause';\n            togglebtn.iconCss = 'e-icons e-pause-icon';\n        } else {\n            togglebtn.content = 'Play';\n            togglebtn.iconCss = 'e-icons e-play-icon';\n        }\n    };\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n    <div class=\"button-section\">\n        <div id=\"button-control\">\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"primarybtn\">Primary</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"normalbtn\">Normal</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"outlinebtn\">Outline</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"flatbtn\">Flat</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"successbtn\">Success</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"warningbtn\">Warning</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"dangerbtn\">Danger</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"infobtn\">Info</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"roundbtn\"></button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"togglebtn\">Play</button>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"openiconbtn\">Open</button>\n                    </div>\n                    <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n                        <button id=\"smallbtn\">Small</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<style>\n    #button-control {\n        width: 100%;\n        margin-top: 10%;\n        text-align: center;\n    }\n    \n    @media only screen and (max-width: 500px) {\n        #button-control {\n            margin-left: -3%;\n        }\n    }\n    \n    .button-section {\n        width: 80%;\n        margin: auto;\n    }\n    \n    #button-control .col-xs-12 {\n        margin-bottom: 30px;\n    }\n    \n    #button-control .e-btn-icon::before {\n        position: relative;\n        top: 1px;\n    }\n    \n    .e-play-icon::before {\n        content: '\\e798';\n    }\n    \n    .e-pause-icon::before {\n        content: '\\e753';\n    }\n    \n    .e-open-icon::before {\n        content: '\\e782';\n    }\n\n    .e-add-icon::before {\n        content: '\\e823';\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
diff --git a/src/button/default.html b/src/button/default.html
@@ -40,7 +40,7 @@
             <div class="row">
                 <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                     <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
-                        <button id="previconbtn"></button>
+                        <button id="roundbtn"></button>
                     </div>
                     <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                         <button id="togglebtn">Play</button>
@@ -111,7 +111,7 @@
         content: '\e782';
     }
 
-    .e-prev-icon::before {
-        content: '\e797';
+    .e-add-icon::before {
+        content: '\e823';
     }
 </style>
diff --git a/src/button/default.ts b/src/button/default.ts
@@ -16,8 +16,8 @@ this.default = (): void => {
     button = new Button({ cssClass: 'e-outline', isPrimary: true });
     button.appendTo('#outlinebtn');
 
-    button = new Button({ iconCss: 'e-icons e-prev-icon', cssClass: 'e-flat' });
-    button.appendTo('#previconbtn');
+    button = new Button({ iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });
+    button.appendTo('#roundbtn');
 
     let togglebtn: Button = new Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });
     togglebtn.appendTo('#togglebtn');
diff --git a/src/button/sample.json b/src/button/sample.json
@@ -12,8 +12,7 @@
         {
             "url": "check-box",
             "name": "CheckBox",
-            "category": "Button",
-            "type": "new"
+            "category": "Button"
         },
         {
             "url": "radio-button",
diff --git a/src/common/sampleList.ts b/src/common/sampleList.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Button } from '@syncfusion/ej2-buttons';\n\n/*\n Default button sample\n /\n\n let button: Button = new Button();\n button.appendTo('#normalbtn');\n\n button = new Button({ isPrimary: true });\n button.appendTo('#primarybtn');\n\n button = new Button({ cssClass: 'e-flat' });\n button.appendTo('#flatbtn');\n\n button = new Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#outlinebtn');\n\n button = new Button({ iconCss: 'e-icons e-prev-icon', cssClass: 'e-flat' });\n button.appendTo('#previconbtn');\n\n let togglebtn: Button = new Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });\n togglebtn.appendTo('#togglebtn');\n\n button = new Button({ iconCss: 'e-icons e-open-icon', cssClass: 'e-flat', iconPosition: 'right' });\n button.appendTo('#openiconbtn');\n\n button = new Button({ cssClass: 'e-success' });\n button.appendTo('#successbtn');\n\n button = new Button({ cssClass: 'e-info' });\n button.appendTo('#infobtn');\n\n button = new Button({ cssClass: 'e-warning' });\n button.appendTo('#warningbtn');\n\n button = new Button({ cssClass: 'e-danger' });\n button.appendTo('#dangerbtn');\n\n button = new Button({ cssClass: 'e-small' });\n button.appendTo('#smallbtn');\n\n\n document.getElementById('togglebtn').onclick = (): void => {\n if (document.getElementById('togglebtn').classList.contains('e-active')) {\n togglebtn.content = 'Pause';\n togglebtn.iconCss = 'e-icons e-pause-icon';\n } else {\n togglebtn.content = 'Play';\n togglebtn.iconCss = 'e-icons e-play-icon';\n }\n };\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"button-section\">\n <div id=\"button-control\">\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"primarybtn\">Primary</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"normalbtn\">Normal</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"outlinebtn\">Outline</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"flatbtn\">Flat</button>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"successbtn\">Success</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"warningbtn\">Warning</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"dangerbtn\">Danger</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"infobtn\">Info</button>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"previconbtn\"></button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"togglebtn\">Play</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"openiconbtn\">Open</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"smallbtn\">Small</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<style>\n #button-control {\n width: 100%;\n margin-top: 10%;\n text-align: center;\n }\n \n @media only screen and (max-width: 500px) {\n #button-control {\n margin-left: -3%;\n }\n }\n \n .button-section {\n width: 80%;\n margin: auto;\n }\n \n #button-control .col-xs-12 {\n margin-bottom: 30px;\n }\n \n #button-control .e-btn-icon::before {\n position: relative;\n top: 1px;\n }\n \n .e-play-icon::before {\n content: '\\e798';\n }\n \n .e-pause-icon::before {\n content: '\\e753';\n }\n \n .e-open-icon::before {\n content: '\\e782';\n }\n\n .e-prev-icon::before {\n content: '\\e797';\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
	`1`	+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Button } from '@syncfusion/ej2-buttons';\n\n/*\n Default button sample\n /\n\n let button: Button = new Button();\n button.appendTo('#normalbtn');\n\n button = new Button({ isPrimary: true });\n button.appendTo('#primarybtn');\n\n button = new Button({ cssClass: 'e-flat' });\n button.appendTo('#flatbtn');\n\n button = new Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#outlinebtn');\n\n button = new Button({ iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });\n button.appendTo('#roundbtn');\n\n let togglebtn: Button = new Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });\n togglebtn.appendTo('#togglebtn');\n\n button = new Button({ iconCss: 'e-icons e-open-icon', cssClass: 'e-flat', iconPosition: 'right' });\n button.appendTo('#openiconbtn');\n\n button = new Button({ cssClass: 'e-success' });\n button.appendTo('#successbtn');\n\n button = new Button({ cssClass: 'e-info' });\n button.appendTo('#infobtn');\n\n button = new Button({ cssClass: 'e-warning' });\n button.appendTo('#warningbtn');\n\n button = new Button({ cssClass: 'e-danger' });\n button.appendTo('#dangerbtn');\n\n button = new Button({ cssClass: 'e-small' });\n button.appendTo('#smallbtn');\n\n\n document.getElementById('togglebtn').onclick = (): void => {\n if (document.getElementById('togglebtn').classList.contains('e-active')) {\n togglebtn.content = 'Pause';\n togglebtn.iconCss = 'e-icons e-pause-icon';\n } else {\n togglebtn.content = 'Play';\n togglebtn.iconCss = 'e-icons e-play-icon';\n }\n };\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"button-section\">\n <div id=\"button-control\">\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"primarybtn\">Primary</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"normalbtn\">Normal</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"outlinebtn\">Outline</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"flatbtn\">Flat</button>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"successbtn\">Success</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"warningbtn\">Warning</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"dangerbtn\">Danger</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"infobtn\">Info</button>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"roundbtn\"></button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"togglebtn\">Play</button>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"openiconbtn\">Open</button>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-lg-6 col-md-6\">\n <button id=\"smallbtn\">Small</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<style>\n #button-control {\n width: 100%;\n margin-top: 10%;\n text-align: center;\n }\n \n @media only screen and (max-width: 500px) {\n #button-control {\n margin-left: -3%;\n }\n }\n \n .button-section {\n width: 80%;\n margin: auto;\n }\n \n #button-control .col-xs-12 {\n margin-bottom: 30px;\n }\n \n #button-control .e-btn-icon::before {\n position: relative;\n top: 1px;\n }\n \n .e-play-icon::before {\n content: '\\e798';\n }\n \n .e-pause-icon::before {\n content: '\\e753';\n }\n \n .e-open-icon::before {\n content: '\\e782';\n }\n\n .e-add-icon::before {\n content: '\\e823';\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,7 @@`
`12`	`12`	`{`
`13`	`13`	`"url": "check-box",`
`14`	`14`	`"name": "CheckBox",`
`15`		`- "category": "Button",`
`16`		`- "type": "new"`
	`15`	`+ "category": "Button"`
`17`	`16`	`},`
`18`	`17`	`{`
`19`	`18`	`"url": "radio-button",`