Skip to content

Commit 61fa941

Browse files
author
pipeline
committed
sample(ej2-1920): sample moved from development branch
1 parent 32fad53 commit 61fa941

File tree

130 files changed

+268
-183
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+268
-183
lines changed

‎package.json

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
{
2-
"name": "@syncfusion/ej2-ng-samples",
3-
"version": "1.0.17",
4-
"description": "Essential JS 2 Sample Browser for Angular",
5-
"author": "Syncfusion Inc.",
6-
"license": "SEE LICENSE IN license",
7-
"dependencies": {
8-
"@angular/common": "^4.3.0",
9-
"@angular/compiler": "^4.3.0",
10-
"@angular/core": "^4.3.0",
11-
"@angular/forms": "^4.3.0",
12-
"@angular/http": "^4.3.0",
13-
"@angular/upgrade": "^4.3.0",
14-
"@angular/platform-browser": "^4.3.0",
15-
"@angular/platform-browser-dynamic": "^4.3.0",
16-
"@angular/router": "^4.3.0",
17-
"zone.js": "^0.8.4",
18-
"core-js": "^2.4.1",
19-
"rxjs": "^5.0.1",
20-
"@syncfusion/ej2": "^1.0.17",
21-
"@syncfusion/ej2-ng-base": "^1.0.17",
22-
"@syncfusion/ej2-ng-buttons": "^1.0.17",
23-
"@syncfusion/ej2-ng-lists": "^1.0.17",
24-
"@syncfusion/ej2-ng-grids": "^1.0.17",
25-
"@syncfusion/ej2-ng-charts": "^1.0.17",
26-
"@syncfusion/ej2-ng-circulargauge": "^1.0.17",
27-
"@syncfusion/ej2-ng-lineargauge": "^1.0.17",
28-
"@syncfusion/ej2-ng-dropdowns": "^1.0.17",
29-
"@syncfusion/ej2-ng-calendars": "^1.0.17",
30-
"@syncfusion/ej2-ng-navigations": "^1.0.17",
31-
"@syncfusion/ej2-ng-inputs": "^1.0.17",
32-
"@syncfusion/ej2-ng-popups": "^1.0.17",
33-
"systemjs": "^0.19.40",
34-
"reflect-metadata": "^0.1.9"
35-
},
36-
"devDependencies": {
37-
"@angular/compiler-cli": "^4.3.0",
38-
"@angular/platform-server": "^4.3.0",
39-
"@types/jasmine": "^2.2.29",
40-
"@types/requirejs": "^2.1.26",
41-
"@types/node": "^6.0.46",
42-
"es6-module-loader": "^0.17.11",
43-
"gulp-clean": "^0.3.2",
44-
"karma-systemjs": "^0.16.0",
45-
"systemjs-plugin-babel": "0.0.17",
46-
"es6-promise": "^3.2.1",
47-
"gulp": "^3.9.1",
48-
"gulp-sass": "^3.1.0",
49-
"gulp-typescript": "^3.1.6",
50-
"requirejs": "^2.3.3",
51-
"typescript": "2.3.4",
52-
"browser-sync": "2.11.2",
53-
"webpack": "2.5.1"
54-
},
55-
"scripts": {
56-
"build": "gulp styles && ngc -p tsconfig-aot.json && gulp bundle",
57-
"serve": "npm run build && gulp serve"
58-
}
2+
"name": "@syncfusion/ej2-ng-samples",
3+
"version": "0.0.1",
4+
"description": "Essential JS 2 Sample Browser for Angular",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"dependencies": {
8+
"@angular/common": "^4.3.0",
9+
"@angular/compiler": "^4.3.0",
10+
"@angular/core": "^4.3.0",
11+
"@angular/forms": "^4.3.0",
12+
"@angular/http": "^4.3.0",
13+
"@angular/upgrade": "^4.3.0",
14+
"@angular/platform-browser": "^4.3.0",
15+
"@angular/platform-browser-dynamic": "^4.3.0",
16+
"@angular/router": "^4.3.0",
17+
"zone.js": "^0.8.4",
18+
"core-js": "^2.4.1",
19+
"rxjs": "^5.0.1",
20+
"@syncfusion/ej2": "*",
21+
"@syncfusion/ej2-ng-base": "*",
22+
"@syncfusion/ej2-ng-buttons": "*",
23+
"@syncfusion/ej2-ng-lists": "*",
24+
"@syncfusion/ej2-ng-grids": "*",
25+
"@syncfusion/ej2-ng-charts": "*",
26+
"@syncfusion/ej2-ng-circulargauge": "*",
27+
"@syncfusion/ej2-ng-lineargauge": "*",
28+
"@syncfusion/ej2-ng-dropdowns": "*",
29+
"@syncfusion/ej2-ng-calendars": "*",
30+
"@syncfusion/ej2-ng-navigations": "*",
31+
"@syncfusion/ej2-ng-inputs": "*",
32+
"@syncfusion/ej2-ng-popups": "*",
33+
"systemjs": "^0.19.40",
34+
"reflect-metadata": "^0.1.9"
35+
},
36+
"devDependencies": {
37+
"@angular/compiler-cli": "^4.3.0",
38+
"@angular/platform-server": "^4.3.0",
39+
"@types/jasmine": "^2.2.29",
40+
"@types/requirejs": "^2.1.26",
41+
"@types/node": "^6.0.46",
42+
"es6-module-loader": "^0.17.11",
43+
"gulp-clean": "^0.3.2",
44+
"karma-systemjs": "^0.16.0",
45+
"systemjs-plugin-babel": "0.0.17",
46+
"es6-promise": "^3.2.1",
47+
"gulp": "^3.9.1",
48+
"gulp-sass": "^3.1.0",
49+
"gulp-typescript": "^3.1.6",
50+
"requirejs": "^2.3.3",
51+
"typescript": "2.3.4",
52+
"browser-sync": "2.11.2",
53+
"webpack": "2.5.1"
54+
},
55+
"scripts": {
56+
"build": "gulp styles && ngc -p tsconfig-aot.json && gulp bundle",
57+
"serve": "npm run build && gulp serve"
58+
}
5959
}

‎src/button/button.module.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import { NgModule, ModuleWithProviders } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { DefaultButtonController } from './default.component';
4+
import { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';
5+
import { CheckBoxController } from './check-box.component';
46
import { SharedModule } from '../common/shared.module';
57

68
export const buttonAppRoutes: Object[] = [
7-
{ path: 'button/default', component: DefaultButtonController, name: 'Default Functionalities', category: 'Button' }
9+
{ path: 'button/default', component: DefaultButtonController, name: 'Default Functionalities', category: 'Button' },
10+
{ path: 'button/check-box', component: CheckBoxController, name: 'CheckBox', category: 'Button', type: 'new' }
811
];
912

1013
export const buttonRouter: ModuleWithProviders = RouterModule.forChild(buttonAppRoutes);
1114

1215
@NgModule({
13-
imports: [buttonRouter, SharedModule],
16+
imports: [buttonRouter, CheckBoxModule, SharedModule],
1417
declarations: [
15-
DefaultButtonController
18+
DefaultButtonController,
19+
CheckBoxController
1620
]
1721
})
1822
export class ButtonModule { }

‎src/button/check-box-plnkr.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +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 { CheckBoxController } from './check-box.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\n\n\nimport { CheckBoxModule } from '@syncfusion/ej2-ng-buttons';\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n@NgModule({\n imports: [CheckBoxModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CheckBoxController],\nbootstrap: [CheckBoxController]\n})\nexport class AppModule { }","check-box.component":"import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';\nimport { CheckBoxComponent } from '@syncfusion/ej2-ng-buttons';\n\n/**\n * CheckBox Controller\n */\n@Component({\n selector: 'control-content',\n templateUrl: 'check-box.html',\n styleUrls: ['check-box.css'],\n encapsulation: ViewEncapsulation.None\n})\n\nexport class CheckBoxController {\n @ViewChild('checkbox')\n public checkbox: CheckBoxComponent;\n\n \n\n public changeHandler() : void {\n this.checkbox.label = 'CheckBox: ' + this.checkbox.checked;\n }\n }","check-box.html":"<div class=\"control-section\">\n <div class=\"checkbox-control\">\n <div class=\"row\">\n <ej-checkbox #checkbox label=\"CheckBox: true\" [checked]=\"true\" (change)=\"changeHandler()\"></ej-checkbox>\n </div>\n <div class=\"row\">\n <ej-checkbox label=\"Checked, Disabled\" [checked]=\"true\" [disabled] = \"true\"></ej-checkbox>\n </div>\n <div class=\"row\">\n <ej-checkbox label=\"Indeterminate, Disabled\" [indeterminate] = \"true\" [disabled] = \"true\"></ej-checkbox>\n </div>\n </div>\n</div>","check-box.css":".checkbox-control {\n margin-left: 40%;\n margin-top: 8%;\n}\n\n@media only screen and (max-width: 700px) {\n .checkbox-control {\n margin-left: 35%;\n margin-top: 27%;\n }\n\n .control-section {\n min-height: 200px;\n }\n}\n\n@media only screen and (max-width: 500px) {\n .checkbox-control {\n margin-left: 35%;\n margin-top: 27%;\n margin-bottom: 27%;\n }\n}\n\n.control-section .row {\n margin-top: 20px;\n}\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/check-box.component.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
2+
import { CheckBoxComponent } from '@syncfusion/ej2-ng-buttons';
3+
4+
/**
5+
* CheckBox Controller
6+
*/
7+
@Component({
8+
selector: 'control-content',
9+
templateUrl: 'check-box.html',
10+
styleUrls: ['check-box.css'],
11+
encapsulation: ViewEncapsulation.None
12+
})
13+
14+
export class CheckBoxController {
15+
@ViewChild('checkbox')
16+
public checkbox: CheckBoxComponent;
17+
18+
constructor(@Inject('sourceFiles') private sourceFiles: any) {
19+
sourceFiles.files = ['check-box.css'];
20+
}
21+
22+
public changeHandler() : void {
23+
this.checkbox.label = 'CheckBox: ' + this.checkbox.checked;
24+
}
25+
}

‎src/button/check-box.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.checkbox-control {
2+
margin-left: 40%;
3+
margin-top: 8%;
4+
}
5+
6+
@media only screen and (max-width: 700px) {
7+
.checkbox-control {
8+
margin-left: 35%;
9+
margin-top: 27%;
10+
}
11+
12+
.control-section {
13+
min-height: 200px;
14+
}
15+
}
16+
17+
@media only screen and (max-width: 500px) {
18+
.checkbox-control {
19+
margin-left: 35%;
20+
margin-top: 27%;
21+
margin-bottom: 27%;
22+
}
23+
}
24+
25+
.control-section .row {
26+
margin-top: 20px;
27+
}

‎src/button/check-box.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="control-section">
2+
<div class="checkbox-control">
3+
<div class="row">
4+
<ej-checkbox #checkbox label="CheckBox: true" [checked]="true" (change)="changeHandler()"></ej-checkbox>
5+
</div>
6+
<div class="row">
7+
<ej-checkbox label="Checked, Disabled" [checked]="true" [disabled] = "true"></ej-checkbox>
8+
</div>
9+
<div class="row">
10+
<ej-checkbox label="Indeterminate, Disabled" [indeterminate] = "true" [disabled] = "true"></ej-checkbox>
11+
</div>
12+
</div>
13+
</div>
14+
<div id="description">
15+
<p>
16+
CheckBox is a graphical user interface element that allows you to select one or more options from the choices. It contains
17+
checked, unchecked and indeterminate states.
18+
</p>
19+
<p>
20+
In this sample, Checked state is acheived using <b>checked</b> property, indeterminate state is acheived using <b>indeterminate</b> property and disabled state is acheived using <b>disabled</b> property.
21+
</p>
22+
<p>
23+
More information about CheckBox can be found in this
24+
<a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/check-box/getting-started.html">
25+
documentation section</a>.
26+
</p>
27+
</div>

0 commit comments

Comments
 (0)