feature(EJ2-4469): Sample changes

Author: pipeline

src/button/button.css

@@ -19,11 +19,6 @@
         margin-bottom: 30px;
     }
 
-    #button-control .e-btn-icon::before {
-        position: relative;
-        top: 1px;
-    }
-    
     .e-play-icon::before {
         content: '\e798';
     }
@@ -36,6 +31,6 @@
         content: '\e782';
     }
 
-    .e-prev-icon::before {
-        content: '\e797';
-    }
+    .e-add-icon::before {
+        content: '\e823';
+    }

src/button/button.module.ts

@@ -8,7 +8,7 @@ import { SharedModule } from '../common/shared.module';
 
 export const buttonAppRoutes: Object[] = [
     { path: ':theme/button/default', component: DefaultButtonController, name: 'Default Functionalities', category: 'Button' },
-    { path: ':theme/button/check-box', component: CheckBoxController, name: 'CheckBox', category: 'Button', type: 'new' },
+    { path: ':theme/button/check-box', component: CheckBoxController, name: 'CheckBox', category: 'Button' },
     { path: ':theme/button/radio-button', component: RadioButtonController, name: 'RadioButton', category: 'Button', type: 'new' }
 ];
 

src/button/default-plnkr.json

@@ -39,7 +39,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 ej-button cssClass="e-flat" iconCss="e-icons e-prev-icon"></button>
+                    <button ej-button cssClass="e-small e-round" iconCss="e-icons e-add-icon" [isPrimary]="true"></button>
                 </div>
                 <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                     <button #toggleBtn ej-button cssClass="e-flat"  [isToggle]="true" (click)="btnClick()" iconCss="e-icons e-play-icon">Play</button>

src/button/default.html

@@ -1 +1 @@
-{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { RadioButtonController } from './radio-button.component';\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { CheckBoxModule, RadioButtonModule  } from '@syncfusion/ej2-ng-buttons';\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n@NgModule({\n    imports: [CheckBoxModule, RadioButtonModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [RadioButtonController],\nbootstrap: [RadioButtonController]\n})\nexport class AppModule { }","radio-button.component":"import { Component, ViewEncapsulation, Inject } from '@angular/core';;\n\n/**\n * RadioButton Controller\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'radio-button.html',\n    styleUrls: ['radio-button.css'],\n    encapsulation: ViewEncapsulation.None\n})\n\nexport class RadioButtonController {\n    \n }","radio-button.html":"<div class=\"control-section\">\n    <div class=\"radiobutton-control\">\n        <h4>Select the Payment mode</h4>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Credit/Debit card\" name=\"payment\" value=\"credit/debit\" checked=\"true\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Net Banking\" name=\"payment\" value=\"netbanking\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Cash on delivery\" name=\"payment\" value=\"cashondelivery\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Others\" name=\"payment\" vlue=\"others\"></ej-radiobutton>\n        </div>\n    </div>\n</div>","radio-button.css":".radiobutton-control {\n    margin-left: 40%;\n    margin-top: 8%;\n}\n\n@media only screen and (max-width: 500px) {\n    .radiobutton-control {\n        margin-left: 21%;\n        margin-top: 20%;\n        margin-bottom: 27%;\n    }\n}\n\n@media only screen and (max-width: 700px) {\n    .checkbox-control {\n        margin-left: 35%;\n        margin-top: 8%;\n    }\n\n    .control-section {\n        min-height: 200px;\n    }\n}\n\n.control-section .row {\n    margin-top: 20px;\n    margin-left: 0px; \n}\n\n.control-section h4 {\n    font-size: 15px;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\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    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","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        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.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-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        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { RadioButtonController } from './radio-button.component';\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\nimport { CheckBoxModule, RadioButtonModule  } from '@syncfusion/ej2-ng-buttons';\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n@NgModule({\n    imports: [CheckBoxModule, RadioButtonModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [RadioButtonController],\nbootstrap: [RadioButtonController]\n})\nexport class AppModule { }","radio-button.component":"import { Component, ViewEncapsulation, Inject } from '@angular/core';;\n\n/**\n * RadioButton Controller\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'radio-button.html',\n    styleUrls: ['radio-button.css'],\n    encapsulation: ViewEncapsulation.None\n})\n\nexport class RadioButtonController {\n    \n }","radio-button.html":"<div class=\"control-section\">\n    <div class=\"radiobutton-control\">\n        <h4>Select the Payment mode</h4>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Credit/Debit card\" name=\"payment\" value=\"credit/debit\" checked=\"true\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Net Banking\" name=\"payment\" value=\"netbanking\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Cash on Delivery\" name=\"payment\" value=\"cashondelivery\"></ej-radiobutton>\n        </div>\n        <div class=\"row\">\n            <ej-radiobutton label=\"Other Wallets\" name=\"payment\" value=\"others\"></ej-radiobutton>\n        </div>\n    </div>\n</div>","radio-button.css":".radiobutton-control {\n    margin-left: 40%;\n    margin-top: 8%;\n}\n\n@media only screen and (max-width: 500px) {\n    .radiobutton-control {\n        margin-left: 21%;\n        margin-top: 20%;\n        margin-bottom: 27%;\n    }\n}\n\n@media only screen and (max-width: 700px) {\n    .checkbox-control {\n        margin-left: 35%;\n        margin-top: 8%;\n    }\n\n    .control-section {\n        min-height: 200px;\n    }\n}\n\n.control-section .row {\n    margin-top: 20px;\n    margin-left: 0px; \n}\n\n.control-section h4 {\n    font-size: 15px;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\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    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","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        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.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-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        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/button/radio-button-plnkr.json

@@ -8,10 +8,10 @@ <h4>Select the Payment mode</h4>
             <ej-radiobutton label="Net Banking" name="payment" value="netbanking"></ej-radiobutton>
         </div>
         <div class="row">
-            <ej-radiobutton label="Cash on delivery" name="payment" value="cashondelivery"></ej-radiobutton>
+            <ej-radiobutton label="Cash on Delivery" name="payment" value="cashondelivery"></ej-radiobutton>
         </div>
         <div class="row">
-            <ej-radiobutton label="Others" name="payment" vlue="others"></ej-radiobutton>
+            <ej-radiobutton label="Other Wallets" name="payment" value="others"></ej-radiobutton>
         </div>
     </div>
 </div>

src/button/radio-button.html

@@ -0,0 +1 @@
+@import 'ej2/bootstrap.scss';