├── src ├── assets │ ├── .gitkeep │ └── img │ │ ├── coffee11.png │ │ ├── cuppa-logo.png │ │ ├── angular-logo.png │ │ ├── datagrid-banner.png │ │ ├── cuppa-favicon16x16.png │ │ └── cuppa-logo-coffee11.png ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── app │ ├── angular2-dataGrid │ │ ├── fonts │ │ │ ├── Pe-icon-7-stroke.eot │ │ │ ├── Pe-icon-7-stroke.ttf │ │ │ └── Pe-icon-7-stroke.woff │ │ ├── keypipe.ts │ │ ├── dataGrid-directive.ts │ │ ├── column.ts │ │ ├── angular2-dataGrid.template.html │ │ ├── angular2-dataGrid.styles.css │ │ ├── angular2-dataGrid.ts │ │ └── icons.css │ ├── app.component.css │ ├── app.router.ts │ ├── app.module.ts │ ├── app.component.spec.ts │ ├── app.component.html │ ├── app.component.ts │ └── Examples │ │ ├── heading-template.ts │ │ ├── basic-example.ts │ │ ├── sorting-example.ts │ │ └── column-template-example.ts ├── main.ts ├── tsconfig.json ├── test.ts ├── polyfills.ts ├── index.html └── styles.css ├── cuppa-ng2-dataGrid.ts ├── docs ├── favicon.ico ├── assets │ └── img │ │ ├── coffee11.png │ │ ├── cuppa-logo.png │ │ ├── angular-logo.png │ │ ├── datagrid-banner.png │ │ ├── cuppa-favicon16x16.png │ │ └── cuppa-logo-coffee11.png ├── Pe-icon-7-stroke.71394c0c7ad6c1e7d5c7.eot ├── Pe-icon-7-stroke.b38ef310874bdd008ac1.woff ├── fontawesome-webfont.674f50d287a8c48dc19b.eot ├── fontawesome-webfont.b06871f281fee6b241d6.ttf ├── fontawesome-webfont.fee66e712a8a08eef580.woff ├── fontawesome-webfont.af7ae505a9eed503f8b8.woff2 ├── index.html ├── inline.bundle.js.map ├── inline.bundle.js └── styles.bundle.js ├── e2e ├── app.po.ts ├── app.e2e-spec.ts └── tsconfig.json ├── .editorconfig ├── .gitignore ├── .npmignore ├── protractor.conf.js ├── .angular-cli.json ├── karma.conf.js ├── package.json ├── tslint.json └── README.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /cuppa-ng2-dataGrid.ts: -------------------------------------------------------------------------------- 1 | export * from './src/app/angular2-dataGrid/angular2-dataGrid' -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/assets/img/coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/coffee11.png -------------------------------------------------------------------------------- /docs/assets/img/coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/coffee11.png -------------------------------------------------------------------------------- /docs/assets/img/cuppa-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/cuppa-logo.png -------------------------------------------------------------------------------- /src/assets/img/cuppa-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/cuppa-logo.png -------------------------------------------------------------------------------- /docs/assets/img/angular-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/angular-logo.png -------------------------------------------------------------------------------- /src/assets/img/angular-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/angular-logo.png -------------------------------------------------------------------------------- /docs/assets/img/datagrid-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/datagrid-banner.png -------------------------------------------------------------------------------- /src/assets/img/datagrid-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/datagrid-banner.png -------------------------------------------------------------------------------- /src/assets/img/cuppa-favicon16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/cuppa-favicon16x16.png -------------------------------------------------------------------------------- /docs/assets/img/cuppa-favicon16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/cuppa-favicon16x16.png -------------------------------------------------------------------------------- /docs/assets/img/cuppa-logo-coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/assets/img/cuppa-logo-coffee11.png -------------------------------------------------------------------------------- /src/assets/img/cuppa-logo-coffee11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/assets/img/cuppa-logo-coffee11.png -------------------------------------------------------------------------------- /docs/Pe-icon-7-stroke.71394c0c7ad6c1e7d5c7.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/Pe-icon-7-stroke.71394c0c7ad6c1e7d5c7.eot -------------------------------------------------------------------------------- /docs/Pe-icon-7-stroke.b38ef310874bdd008ac1.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/Pe-icon-7-stroke.b38ef310874bdd008ac1.woff -------------------------------------------------------------------------------- /docs/fontawesome-webfont.674f50d287a8c48dc19b.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/fontawesome-webfont.674f50d287a8c48dc19b.eot -------------------------------------------------------------------------------- /docs/fontawesome-webfont.b06871f281fee6b241d6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/fontawesome-webfont.b06871f281fee6b241d6.ttf -------------------------------------------------------------------------------- /docs/fontawesome-webfont.fee66e712a8a08eef580.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/fontawesome-webfont.fee66e712a8a08eef580.woff -------------------------------------------------------------------------------- /docs/fontawesome-webfont.af7ae505a9eed503f8b8.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/docs/fontawesome-webfont.af7ae505a9eed503f8b8.woff2 -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.eot -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.ttf -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CuppaLabs/angular2-dataGrid/HEAD/src/app/angular2-dataGrid/fonts/Pe-icon-7-stroke.woff -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .btn-default{ 2 | padding: 4px 12px; 3 | font-size: 12px; 4 | } 5 | 6 | .left-menu{ 7 | padding: 0px; 8 | } 9 | .example-content{ 10 | background: #fff; 11 | border: 1px solid #ccc; 12 | padding-bottom: 15px; 13 | } -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class CuppaNg2DatatablePage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/keypipe.ts: -------------------------------------------------------------------------------- 1 | import {Pipe, PipeTransform} from '@angular/core'; 2 | 3 | @Pipe({name: 'keys'}) 4 | export class KeysPipe implements PipeTransform { 5 | transform(value:any, args:string[]) : any { 6 | let keys:any = []; 7 | for (let key in value) { 8 | keys.push({key: key, value: value[key]}); 9 | } 10 | return keys; 11 | } 12 | } -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { CuppaNg2DatatablePage } from './app.po'; 2 | 3 | describe('cuppa-ng2-datatable App', () => { 4 | let page: CuppaNg2DatatablePage; 5 | 6 | beforeEach(() => { 7 | page = new CuppaNg2DatatablePage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "es2016" 9 | ], 10 | "module": "commonjs", 11 | "moduleResolution": "node", 12 | "outDir": "../dist/out-tsc-e2e", 13 | "sourceMap": true, 14 | "target": "es6", 15 | "typeRoots": [ 16 | "../node_modules/@types" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "", 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "es2016", 9 | "dom" 10 | ], 11 | "mapRoot": "./", 12 | "module": "es2015", 13 | "moduleResolution": "node", 14 | "outDir": "../dist/out-tsc", 15 | "sourceMap": true, 16 | "target": "es5", 17 | "typeRoots": [ 18 | "../node_modules/@types" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | 10 | # IDEs and editors 11 | /.idea 12 | .project 13 | .classpath 14 | .c9/ 15 | *.launch 16 | .settings/ 17 | *.sublime-workspace 18 | 19 | # IDE - VSCode 20 | .vscode/* 21 | !.vscode/settings.json 22 | !.vscode/tasks.json 23 | !.vscode/launch.json 24 | !.vscode/extensions.json 25 | 26 | # misc 27 | /.sass-cache 28 | /connect.lock 29 | /coverage/* 30 | /libpeerconnection.log 31 | npm-debug.log 32 | testem.log 33 | /typings 34 | 35 | # e2e 36 | /e2e/*.js 37 | /e2e/*.map 38 | 39 | #System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /docs 6 | /tmp 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage/* 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.ts 38 | /e2e/*.json 39 | 40 | #System Files 41 | .DS_Store 42 | Thumbs.db 43 | 44 | karma.conf.js 45 | protractor.conf.js 46 | tslint.json 47 | .npmignore 48 | .editorconfig 49 | .angular-cli.json 50 | 51 | /src/* 52 | /src/app/* 53 | !src/app/angular2-dataGrid -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | /*global jasmine */ 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | exports.config = { 8 | allScriptsTimeout: 11000, 9 | specs: [ 10 | './e2e/**/*.e2e-spec.ts' 11 | ], 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | directConnect: true, 16 | baseUrl: 'http://localhost:4200/', 17 | framework: 'jasmine', 18 | jasmineNodeOpts: { 19 | showColors: true, 20 | defaultTimeoutInterval: 30000, 21 | print: function() {} 22 | }, 23 | beforeLaunch: function() { 24 | require('ts-node').register({ 25 | project: 'e2e' 26 | }); 27 | }, 28 | onPrepare() { 29 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /src/app/app.router.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { BasicExample } from './Examples/basic-example'; 6 | import { ColumnTemplateExample } from './Examples/column-template-example'; 7 | import { HeadingTemplateExample } from './Examples/heading-template'; 8 | import { SortingExample } from './Examples/sorting-example'; 9 | 10 | const appRoutes: Routes = [ 11 | { path: '', redirectTo: '/basicexample',pathMatch: 'full'}, 12 | { path: 'basicexample', component: BasicExample}, 13 | { path: 'columntemplate', component: ColumnTemplateExample}, 14 | { path: 'sorting', component: SortingExample}, 15 | { path: 'headingtemplate', component: HeadingTemplateExample} 16 | ]; 17 | 18 | 19 | @NgModule({ 20 | imports: [ 21 | RouterModule.forRoot(appRoutes, { useHash: true }) 22 | ], 23 | exports: [ 24 | RouterModule 25 | ] 26 | 27 | }) 28 | export class AppRouterModule { } 29 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { BasicExample } from './Examples/basic-example'; 8 | import { ColumnTemplateExample } from './Examples/column-template-example'; 9 | import { HeadingTemplateExample } from './Examples/heading-template'; 10 | import { SortingExample } from './Examples/sorting-example'; 11 | import { CuppaDataGridModule } from './angular2-dataGrid/angular2-dataGrid'; 12 | import { AppRouterModule } from './app.router'; 13 | @NgModule({ 14 | declarations: [ 15 | AppComponent, 16 | BasicExample, 17 | ColumnTemplateExample, 18 | HeadingTemplateExample, 19 | SortingExample 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | FormsModule, 24 | HttpModule, 25 | CuppaDataGridModule, 26 | AppRouterModule 27 | ], 28 | providers: [], 29 | bootstrap: [AppComponent] 30 | }) 31 | export class AppModule { } 32 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }); 11 | TestBed.compileComponents(); 12 | }); 13 | 14 | it('should create the app', async(() => { 15 | const fixture = TestBed.createComponent(AppComponent); 16 | const app = fixture.debugElement.componentInstance; 17 | expect(app).toBeTruthy(); 18 | })); 19 | 20 | it(`should have as title 'app works!'`, async(() => { 21 | const fixture = TestBed.createComponent(AppComponent); 22 | const app = fixture.debugElement.componentInstance; 23 | expect(app.title).toEqual('app works!'); 24 | })); 25 | 26 | it('should render title in a h1 tag', async(() => { 27 | const fixture = TestBed.createComponent(AppComponent); 28 | fixture.detectChanges(); 29 | const compiled = fixture.debugElement.nativeElement; 30 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 31 | })); 32 | }); 33 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | declare var require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/dataGrid-directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[styleProp]' 5 | }) 6 | export class styleDirective { 7 | 8 | constructor(private el: ElementRef) { 9 | 10 | } 11 | 12 | @Input('styleProp') styleVal: number; 13 | 14 | ngOnInit() { 15 | 16 | this.el.nativeElement.style.top = this.styleVal; 17 | } 18 | ngOnChanges(): void { 19 | this.el.nativeElement.style.top = this.styleVal; 20 | } 21 | } 22 | 23 | @Directive({ 24 | selector: '[columnWidth]' 25 | }) 26 | export class columnWidth { 27 | 28 | constructor(private el: ElementRef) { 29 | 30 | } 31 | 32 | @Input('columnWidth') columns:any[]; 33 | 34 | ngOnInit() { 35 | this.el.nativeElement.style.width = (100/this.columns.length)+"%"; 36 | } 37 | } 38 | 39 | @Directive({ 40 | selector: '[setContainerHeight]' 41 | }) 42 | export class SetContainerHeight { 43 | 44 | constructor(private el: ElementRef) { 45 | 46 | } 47 | 48 | @Input('setContainerHeight') containerHeight:any[]; 49 | 50 | ngOnInit() { 51 | this.el.nativeElement.style.height = this.containerHeight+"px"; 52 | } 53 | ngOnChanges(): void { 54 | this.el.nativeElement.style.height = this.containerHeight+"px"; 55 | } 56 | } -------------------------------------------------------------------------------- /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "version": "1.0.0-beta.32.3", 5 | "name": "cuppa-ng2-grid" 6 | }, 7 | "apps": [ 8 | { 9 | "root": "src", 10 | "outDir": "docs", 11 | "assets": [ 12 | "assets", 13 | "favicon.ico" 14 | ], 15 | "index": "index.html", 16 | "main": "main.ts", 17 | "polyfills": "polyfills.ts", 18 | "test": "test.ts", 19 | "tsconfig": "tsconfig.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "../node_modules/font-awesome/css/font-awesome.min.css","styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "files": "src/**/*.ts", 40 | "project": "src/tsconfig.json" 41 | }, 42 | { 43 | "files": "e2e/**/*.ts", 44 | "project": "e2e/tsconfig.json" 45 | } 46 | ], 47 | "test": { 48 | "karma": { 49 | "config": "./karma.conf.js" 50 | } 51 | }, 52 | "defaults": { 53 | "styleExt": "css", 54 | "component": {} 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | { pattern: './src/test.ts', watched: false } 20 | ], 21 | preprocessors: { 22 | './src/test.ts': ['@angular/cli'] 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | config: './.angular-cli.json', 33 | environment: 'dev' 34 | }, 35 | reporters: config.angularCli && config.angularCli.codeCoverage 36 | ? ['progress', 'coverage-istanbul'] 37 | : ['progress', 'kjhtml'], 38 | port: 9876, 39 | colors: true, 40 | logLevel: config.LOG_INFO, 41 | autoWatch: true, 42 | browsers: ['Chrome'], 43 | singleRun: false 44 | }); 45 | }; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cuppa-ng2-grid", 3 | "version": "1.0.5", 4 | "description": "Angular 2 data grid component written in pure angular 2 and typescript", 5 | "keywords": [ 6 | "angular2", 7 | "angular2 data grid", 8 | "angular2 datatable", 9 | "angular2 grid", 10 | "ng2 grid" 11 | ], 12 | "author": "Pradeep Kumar Terli ", 13 | "homepage": "", 14 | "license": "MIT", 15 | "angular-cli": {}, 16 | "scripts": { 17 | "ng": "ng", 18 | "start": "ng serve", 19 | "test": "ng test", 20 | "lint": "ng lint", 21 | "e2e": "ng e2e" 22 | }, 23 | "private": false, 24 | "dependencies": { 25 | "@angular/common": "^4.0.0", 26 | "@angular/compiler": "^4.0.0", 27 | "@angular/core": "^4.0.0", 28 | "@angular/forms": "^4.0.0", 29 | "@angular/http": "^4.0.0", 30 | "@angular/platform-browser": "^4.0.0", 31 | "@angular/platform-browser-dynamic": "^4.0.0", 32 | "@angular/router": "^4.0.0", 33 | "bootstrap":"*", 34 | "font-awesome":"*", 35 | "core-js": "^2.4.1", 36 | "rxjs": "^5.1.0", 37 | "zone.js": "^0.8.4" 38 | }, 39 | "devDependencies": { 40 | "@angular/cli": "1.0.0", 41 | "@angular/compiler-cli": "^4.0.0", 42 | "@types/jasmine": "2.5.38", 43 | "@types/node": "~6.0.60", 44 | "codelyzer": "~2.0.0", 45 | "jasmine-core": "~2.5.2", 46 | "jasmine-spec-reporter": "~3.2.0", 47 | "karma": "~1.4.1", 48 | "karma-chrome-launcher": "~2.0.0", 49 | "karma-cli": "~1.0.1", 50 | "karma-jasmine": "~1.1.0", 51 | "karma-jasmine-html-reporter": "^0.2.2", 52 | "karma-coverage-istanbul-reporter": "^0.2.0", 53 | "protractor": "~5.1.0", 54 | "ts-node": "~2.0.0", 55 | "tslint": "~4.5.0", 56 | "typescript": "~2.2.0" 57 | }, 58 | "repository": { 59 | "type": "git", 60 | "url": "" 61 | }, 62 | "bugs": { 63 | "url": "" 64 | }, 65 | "engines": { 66 | "node": ">= 4.2.1", 67 | "npm": ">= 3" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/column.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy, NgModule, TemplateRef, AfterContentInit, ContentChild, EmbeddedViewRef, OnChanges, ViewContainerRef, ViewEncapsulation, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core'; 2 | import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; 3 | import { CommonModule } from '@angular/common'; 4 | import {KeysPipe} from './keypipe' 5 | import {styleDirective} from './dataGrid-directive' 6 | import {columnWidth} from './dataGrid-directive' 7 | import {SetContainerHeight} from './dataGrid-directive' 8 | 9 | 10 | @Component({ 11 | selector: 'c-column', 12 | template: `` 13 | }) 14 | 15 | export class Column { 16 | @Input() field: string; 17 | @ContentChild(TemplateRef) template: TemplateRef 18 | constructor() { 19 | } 20 | 21 | } 22 | 23 | @Component({ 24 | selector: 'c-heading', 25 | template: `` 26 | }) 27 | 28 | export class Heading implements AfterContentInit{ 29 | 30 | @ContentChild(TemplateRef) template: TemplateRef; 31 | 32 | constructor() { 33 | } 34 | ngAfterContentInit(){ 35 | } 36 | 37 | 38 | } 39 | 40 | @Component({ 41 | selector: 'c-templateRenderer', 42 | template: `` 43 | }) 44 | 45 | export class TemplateRenderer implements OnInit, OnDestroy { 46 | 47 | @Input() data: any 48 | view: EmbeddedViewRef; 49 | 50 | constructor(public viewContainer: ViewContainerRef) { 51 | } 52 | ngOnInit() { 53 | this.view = this.viewContainer.createEmbeddedView(this.data.template, { 54 | '\$implicit': this.data 55 | }); 56 | } 57 | 58 | ngOnDestroy() { 59 | this.view.destroy(); 60 | } 61 | 62 | } 63 | @Component({ 64 | selector: 'c-columnTemplateRenderer', 65 | template: `` 66 | }) 67 | 68 | export class ColumnTemplateRenderer implements OnInit, OnDestroy { 69 | 70 | @Input() data: any; 71 | @Input() rowData: any; 72 | view: EmbeddedViewRef; 73 | 74 | constructor(public viewContainer: ViewContainerRef) { 75 | } 76 | ngOnInit() { 77 | this.view = this.viewContainer.createEmbeddedView(this.data.template, { 78 | '\$implicit': this.data, 79 | 'rowData': this.rowData 80 | }); 81 | } 82 | 83 | ngOnDestroy() { 84 | this.view.destroy(); 85 | } 86 | 87 | } -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 27 |
28 |
29 | 30 | Examples 31 | 32 | Basic Example 33 | Sorting 34 | Column Template 35 | Heading Template 36 |
37 |
38 |
39 | 41 | 42 |
-------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es6/reflect'; 45 | import 'core-js/es7/reflect'; 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Angular 2 Data Grid | Render 10000 + records | Handle Large Datasets 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | Loading... 32 |
33 |
34 | 35 | 40 | 43 |
44 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/angular2-dataGrid.template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | {{config.title}} 6 |
7 |
8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 | {{column.title}} 16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | {{column.title}} 25 |
26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 |
37 | {{obj.value}} 38 | 39 |
40 | 41 | 42 |
43 | 44 | {{getColumnData(row, col.field)}} 45 |
46 | 47 |
48 |
49 |
50 | {{totalRows}} 51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Angular 2 Data Grid | Render 10000 + records | Handle Large Datasets 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | Loading... 32 |
33 |
34 | 35 | 40 | 43 |
44 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/angular2-dataGrid.styles.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | .cuppa-grid{ 6 | background: rgb(247, 247, 247); 7 | border: 2px solid #1976D2; 8 | font-family: 'Arial',sans-serif; 9 | font-size: 14px; 10 | width: 100%; 11 | margin: 0px auto; 12 | } 13 | .container{ 14 | width: calc(100% - 1px); 15 | height: 310px; 16 | overflow: auto; 17 | position: relative; 18 | padding: 0px; 19 | background:#fff; 20 | border-top: 1px solid #888; 21 | } 22 | .scroller{ 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 1px; 27 | height: 300px; 28 | } 29 | .vrow{ 30 | width: 100%; 31 | border-bottom: 1px solid #e4e4e4; 32 | height: 31px; 33 | cursor: pointer; 34 | transition: all .1s linear; 35 | } 36 | .cuppa-grid > .container > .vrow:hover{ 37 | background: rgba(25, 118, 210, 0.31); 38 | } 39 | .vcolumn{ 40 | display: inline-block; 41 | padding: 8px; 42 | border-right: 1px solid #e4e4e4; 43 | 44 | } 45 | .vrow > .vcolumn:last-child{ 46 | border-right: 0px; 47 | } 48 | .header-row > .vcolumn{ 49 | cursor: pointer; 50 | } 51 | .header-row > .vcolumn:hover{ 52 | box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.21); 53 | 54 | } 55 | .cuppa-grid{ 56 | position:relative; 57 | } 58 | .header-row{ 59 | width: calc(100% - 10px); 60 | background: rgb(247, 247, 247); 61 | border-bottom: 0px; 62 | color: #000; 63 | text-transform: capitalize; 64 | font-weight: bold; 65 | 66 | } 67 | ::-webkit-scrollbar { 68 | width: 10px; 69 | } 70 | 71 | ::-webkit-scrollbar-track { 72 | -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 73 | border-radius: 0px; 74 | background: #f5f5f5; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb { 78 | border-radius: 0px; 79 | background: #ccc; 80 | } 81 | .description{ 82 | text-align: center; 83 | } 84 | .header-title{ 85 | float: left; 86 | } 87 | .header-sort{ 88 | position: relative; 89 | float: right; 90 | width: 30px; 91 | height: 15px; 92 | } 93 | .icon{ 94 | cursor: pointer; 95 | position: absolute; 96 | font-size: 23px; 97 | top: -2px; 98 | } 99 | .grid-main-header{ 100 | background: #1976D2; 101 | height: 40px; 102 | padding: 6px; 103 | } 104 | .grid-search{ 105 | display: inline-block; 106 | float: right; 107 | } 108 | .grid-search > input{ 109 | border-color: transparent; 110 | height: 25px; 111 | border-radius: 3px; 112 | border-top-right-radius: 0px; 113 | border-bottom-right-radius: 0px; 114 | float: left; 115 | } 116 | .grid-search > button{ 117 | display: inline-block; 118 | padding: 0px 6px; 119 | background: #144c98; 120 | border: none; 121 | height: 25px; 122 | float: left; 123 | color: #fff; 124 | border-top-right-radius:3px; 125 | border-bottom-right-radius: 3px; 126 | } 127 | .grid-title{ 128 | float: left; 129 | line-height: 27px; 130 | color: #fff; 131 | font-weight: bold; 132 | font-size: 16px; 133 | } 134 | .grid-footer{ 135 | padding: 5px 5px 0px 5px; 136 | background: #f1f1f1; 137 | border-top: 1px solid #ccc; 138 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": [true, "ignore-params"], 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html{ 4 | height: 100%; 5 | } 6 | body{ 7 | background-color: #f7f7f7; 8 | height: 100%; 9 | font-family: 'Roboto',sans-serif; 10 | padding-top: 50px; 11 | } 12 | h1 { 13 | color: #00BCD4; 14 | } 15 | .example-title{ 16 | border-bottom: 1px solid #ccc; 17 | } 18 | .navbar-default { 19 | background-color: #ffffff; 20 | border-color: #ffffff; 21 | border-radius: 0px; 22 | margin: 0px; 23 | border: 0px; 24 | box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); 25 | } 26 | .navbar-brand { 27 | } 28 | .jumbotron{ 29 | text-align: center; 30 | margin-bottom: 0px; 31 | background: #2d3673; 32 | color: #fff; 33 | padding-bottom: 15px; 34 | } 35 | .jumbotron > p{ 36 | font-size: 18px; 37 | font-weight: 300; 38 | color: #656565; 39 | } 40 | .jumbotron h2{ 41 | font-weight: 300; 42 | } 43 | .jumbotron h4{ 44 | padding: 15px; 45 | font-weight: 300; 46 | } 47 | .component-title{ 48 | font-weight: 400; 49 | line-height: 50px; 50 | font-size: 20px; 51 | margin: 0px; 52 | 53 | } 54 | .component-title > span{ 55 | font-size: 50%; 56 | } 57 | iframe{ 58 | width: 100%; 59 | height: 100%; 60 | } 61 | .nav-pills > li{ 62 | display: inline-block !important; 63 | float: inherit; 64 | } 65 | .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{ 66 | background: none; 67 | color: #a9a9a9; 68 | } 69 | .nav > li > a:hover, .nav > li > a:focus{ 70 | text-decoration: underline; 71 | background: none; 72 | } 73 | .nav-pills > li > a{ 74 | font-weight: 300; 75 | padding: 10px 10px; 76 | } 77 | .datepicker-container{ 78 | padding: 0px 15px; 79 | } 80 | @media (min-width: 768px){ 81 | .component-title{ 82 | margin-top: 0px; 83 | } 84 | .nav-pills > li > a{ 85 | padding: 10px 15px; 86 | } 87 | .datepicker-container { 88 | padding: 80px 15px; 89 | } 90 | .bt-group{ 91 | padding: 35px 0px; 92 | } 93 | } 94 | .bt-group .btn{ 95 | background: -webkit-linear-gradient(#42a1ec, #0070c9); 96 | background: -o-linear-gradient(#42a1ec, #0070c9); 97 | background: linear-gradient(#42a1ec, #0070c9); 98 | border: none; 99 | } 100 | .ad-section{ 101 | display: block; 102 | position: absolute; 103 | bottom: 0; 104 | left: 0; 105 | right: 0; 106 | text-align: center; 107 | } 108 | .architecture figure, .flowchart figure{ 109 | text-align: center; 110 | } 111 | .architecture img, .flowchart img{ 112 | margin: 0px auto; 113 | } 114 | .flowchart figure img{ 115 | width: 40%; 116 | } 117 | .page-header{ 118 | text-align: center; 119 | margin: 60px 0 20px; 120 | } 121 | .documentation-container{ 122 | padding-top: 50px; 123 | } 124 | .documentation-container .page-header{ 125 | text-align: left; 126 | } 127 | .left-section{ 128 | padding-left: 0px; 129 | } 130 | .left-section .bs-docs-sidebar{ 131 | background: #fff; 132 | margin-top: 15px; 133 | } 134 | .right-section{ 135 | background: #fff; 136 | margin-top: 15px; 137 | padding: 25px; 138 | padding-top: 0px; 139 | } 140 | .right-section .row{ 141 | margin: 0px; 142 | } 143 | footer{ 144 | text-align: center; 145 | } 146 | .navbar-brand img{ 147 | height: 32px; 148 | margin-top: -7px; 149 | } 150 | .vcolumn .btn-default{ 151 | padding: 2px 10px; 152 | } 153 | .left-container{ 154 | padding: 0px; 155 | padding-left: 15px; 156 | padding-top: 15px; 157 | } 158 | .list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{ 159 | background-color: #FFCB2D; 160 | border-color: #FFCB2D; 161 | } 162 | .list-group-item{ 163 | border-right: 0px; 164 | } 165 | .list-group-item:first-child{ 166 | font-size: 18px; 167 | background: #fff; 168 | font-weight: 500; 169 | color: #333; 170 | } 171 | .list-group-item:first-child,.list-group-item:last-child { 172 | border-radius: 0px; 173 | } 174 | .c-notification{ 175 | position: fixed; 176 | top: 60px; 177 | right: 10px; 178 | width: 300px; 179 | height: 150px; 180 | background: #1976D2; 181 | padding: 15px; 182 | color: #fff; 183 | border-radius: 5px; 184 | transition: all .1s linear; 185 | z-index: 9999; 186 | } 187 | .c-notification > h4{ 188 | border-bottom: 1px solid #fff; 189 | } 190 | .c-notification > .fa-close{ 191 | cursor: pointer; 192 | position: absolute; 193 | right: 15px; 194 | top: 15px; 195 | transition: all .1s linear; 196 | } 197 | .c-notification > .fa-close:hover{ 198 | transform: rotate(90deg); 199 | } -------------------------------------------------------------------------------- /docs/inline.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap 1fcd4df3d966bae4666e"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,YAAI;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length)\n \t\t\tresolves.shift()();\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t4: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn Promise.resolve();\n\n \t\t// an Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".chunk.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\thead.appendChild(script);\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 1fcd4df3d966bae4666e"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/inline.bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // install a JSONP callback for chunk loading 3 | /******/ var parentJsonpFunction = window["webpackJsonp"]; 4 | /******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { 5 | /******/ // add "moreModules" to the modules object, 6 | /******/ // then flag all "chunkIds" as loaded and fire callback 7 | /******/ var moduleId, chunkId, i = 0, resolves = [], result; 8 | /******/ for(;i < chunkIds.length; i++) { 9 | /******/ chunkId = chunkIds[i]; 10 | /******/ if(installedChunks[chunkId]) 11 | /******/ resolves.push(installedChunks[chunkId][0]); 12 | /******/ installedChunks[chunkId] = 0; 13 | /******/ } 14 | /******/ for(moduleId in moreModules) { 15 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 16 | /******/ modules[moduleId] = moreModules[moduleId]; 17 | /******/ } 18 | /******/ } 19 | /******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); 20 | /******/ while(resolves.length) 21 | /******/ resolves.shift()(); 22 | /******/ if(executeModules) { 23 | /******/ for(i=0; i < executeModules.length; i++) { 24 | /******/ result = __webpack_require__(__webpack_require__.s = executeModules[i]); 25 | /******/ } 26 | /******/ } 27 | /******/ return result; 28 | /******/ }; 29 | /******/ 30 | /******/ // The module cache 31 | /******/ var installedModules = {}; 32 | /******/ 33 | /******/ // objects to store loaded and loading chunks 34 | /******/ var installedChunks = { 35 | /******/ 4: 0 36 | /******/ }; 37 | /******/ 38 | /******/ // The require function 39 | /******/ function __webpack_require__(moduleId) { 40 | /******/ 41 | /******/ // Check if module is in cache 42 | /******/ if(installedModules[moduleId]) 43 | /******/ return installedModules[moduleId].exports; 44 | /******/ 45 | /******/ // Create a new module (and put it into the cache) 46 | /******/ var module = installedModules[moduleId] = { 47 | /******/ i: moduleId, 48 | /******/ l: false, 49 | /******/ exports: {} 50 | /******/ }; 51 | /******/ 52 | /******/ // Execute the module function 53 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 54 | /******/ 55 | /******/ // Flag the module as loaded 56 | /******/ module.l = true; 57 | /******/ 58 | /******/ // Return the exports of the module 59 | /******/ return module.exports; 60 | /******/ } 61 | /******/ 62 | /******/ // This file contains only the entry chunk. 63 | /******/ // The chunk loading function for additional chunks 64 | /******/ __webpack_require__.e = function requireEnsure(chunkId) { 65 | /******/ if(installedChunks[chunkId] === 0) 66 | /******/ return Promise.resolve(); 67 | /******/ 68 | /******/ // an Promise means "currently loading". 69 | /******/ if(installedChunks[chunkId]) { 70 | /******/ return installedChunks[chunkId][2]; 71 | /******/ } 72 | /******/ // start chunk loading 73 | /******/ var head = document.getElementsByTagName('head')[0]; 74 | /******/ var script = document.createElement('script'); 75 | /******/ script.type = 'text/javascript'; 76 | /******/ script.charset = 'utf-8'; 77 | /******/ script.async = true; 78 | /******/ script.timeout = 120000; 79 | /******/ 80 | /******/ if (__webpack_require__.nc) { 81 | /******/ script.setAttribute("nonce", __webpack_require__.nc); 82 | /******/ } 83 | /******/ script.src = __webpack_require__.p + "" + chunkId + ".chunk.js"; 84 | /******/ var timeout = setTimeout(onScriptComplete, 120000); 85 | /******/ script.onerror = script.onload = onScriptComplete; 86 | /******/ function onScriptComplete() { 87 | /******/ // avoid mem leaks in IE. 88 | /******/ script.onerror = script.onload = null; 89 | /******/ clearTimeout(timeout); 90 | /******/ var chunk = installedChunks[chunkId]; 91 | /******/ if(chunk !== 0) { 92 | /******/ if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); 93 | /******/ installedChunks[chunkId] = undefined; 94 | /******/ } 95 | /******/ }; 96 | /******/ 97 | /******/ var promise = new Promise(function(resolve, reject) { 98 | /******/ installedChunks[chunkId] = [resolve, reject]; 99 | /******/ }); 100 | /******/ installedChunks[chunkId][2] = promise; 101 | /******/ 102 | /******/ head.appendChild(script); 103 | /******/ return promise; 104 | /******/ }; 105 | /******/ 106 | /******/ // expose the modules object (__webpack_modules__) 107 | /******/ __webpack_require__.m = modules; 108 | /******/ 109 | /******/ // expose the module cache 110 | /******/ __webpack_require__.c = installedModules; 111 | /******/ 112 | /******/ // identity function for calling harmony imports with the correct context 113 | /******/ __webpack_require__.i = function(value) { return value; }; 114 | /******/ 115 | /******/ // define getter function for harmony exports 116 | /******/ __webpack_require__.d = function(exports, name, getter) { 117 | /******/ if(!__webpack_require__.o(exports, name)) { 118 | /******/ Object.defineProperty(exports, name, { 119 | /******/ configurable: false, 120 | /******/ enumerable: true, 121 | /******/ get: getter 122 | /******/ }); 123 | /******/ } 124 | /******/ }; 125 | /******/ 126 | /******/ // getDefaultExport function for compatibility with non-harmony modules 127 | /******/ __webpack_require__.n = function(module) { 128 | /******/ var getter = module && module.__esModule ? 129 | /******/ function getDefault() { return module['default']; } : 130 | /******/ function getModuleExports() { return module; }; 131 | /******/ __webpack_require__.d(getter, 'a', getter); 132 | /******/ return getter; 133 | /******/ }; 134 | /******/ 135 | /******/ // Object.prototype.hasOwnProperty.call 136 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 137 | /******/ 138 | /******/ // __webpack_public_path__ 139 | /******/ __webpack_require__.p = ""; 140 | /******/ 141 | /******/ // on error function for async loading 142 | /******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; 143 | /******/ }) 144 | /************************************************************************/ 145 | /******/ ([]); 146 | //# sourceMappingURL=inline.bundle.js.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cuppa Angular 2 Data Grid Component 2 | 3 | [![npm version](https://img.shields.io/npm/v/cuppa-ng2-grid.svg)](https://www.npmjs.com/package/cuppa-ng2-grid) 4 | 5 | ### Render 10,000+ Records with high performance 6 | It is often required that, large datasets needs to be rendered in the front-end table. Cuppa Angular 2 Data Grid components handles 10K + records with high performance. Developed using `Angular 2`, `TypeScript`, `HTML`, `CSS` 7 | 8 | ### Features 9 | - Render `10k + records` with high performance 10 | - Faster Rendering without browser hanging. 11 | - Faster `Sorting algorithm` 12 | - Faster `filtering` and `search algorithm` 13 | 14 | 15 | ## Demo 16 | ### View the [Demo here](https://cuppalabs.github.io/angular2-dataGrid/). 17 | 18 | ## Getting Started 19 | 20 | ### Installation 21 | - Install with [npm](https://www.npmjs.com/package/cuppa-ng2-grid): 22 | `npm install cuppa-ng2-grid ` 23 | 24 | ### Usage 25 | 26 | - Import `CuppaDataGridModule` from the installed package into your module as follows: 27 | 28 | ```js 29 | import { CuppaDataGridModule } from 'cuppa-ng2-grid/cuppa-ng2-dataGrid'; 30 | ``` 31 | - Declare the data grid module in your `ngModule` as follows: 32 | 33 | ```js 34 | @NgModule({ 35 | bootstrap: [ AppComponent ], 36 | declarations: [ 37 | AppComponent, 38 | NoContentComponent ], 39 | imports: [ 40 | BrowserModule, 41 | FormsModule, 42 | HttpModule, 43 | CuppaDataGridModule // Import DataGrid module variable here 44 | ] 45 | }) 46 | ``` 47 | 48 | ## Initialize 49 | 50 | ### HTML 51 | - Place the component html tag in the template where the table needs to be rendered. 52 | ```html 53 | 54 | ``` 55 | 56 | ### JS 57 | - Component requires a `config` object to configure the grid and `datalist` to pass data to the component, as follows: 58 | 59 | ```js 60 | export class AppComponent implements OnInit { 61 | private config = { 62 | title: "Cuppa Data Table", 63 | w: 300, 64 | h: 300, 65 | itemHeight: 31, 66 | totalRows: 10000, 67 | items: this.arrayList, 68 | sort:{'id':'desc'} 69 | } 70 | private arrayList:any[] = 71 | [ 72 | {"id":1,"name":"Mayo","mobile":9240592804}, 73 | {"id":2,"name":"Nelson","mobile":9008774782}, 74 | {"id":3,"name":"Nichols","mobile":9965852134}, 75 | {"id":4,"name":"Summers","mobile":9600712058}, 76 | {"id":5,"name":"Novak","mobile":9045924098}, 77 | {"id":6,"name":"Bell","mobile":9001240358}, 78 | {"id":7,"name":"Marshall","mobile":9276107621}, 79 | {"id":8,"name":"May","mobile":9966279627}, 80 | {"id":9,"name":"Villanueva","mobile":9695365778}, 81 | {"id":10,"name":"Gonzalez","mobile":9946879817}, 82 | {"id":11,"name":"Dorsey","mobile":9243595415} 83 | ]; 84 | private onRowClick(row:any){ 85 | console.log(row); 86 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 87 | } 88 | } 89 | ``` 90 | 91 | ### Config Options 92 | The following config options can be used 93 | 94 | | Setting|Type| Description| 95 | | --- | --- | --- | 96 | | title | String | Set the title of the table | 97 | | w | Number | Set the width of the table. | 98 | | h | Number | Set the height of the table. | 99 | | itemHeight | Number | Set the height of the row. | 100 | | totalRows | Number | Total number of records. | 101 | | items | Array | Array of table records. | 102 | | sort | Object | Object to set the default column for sorting.| 103 | 104 | ### Column Template 105 | Custom content or elements can be added to table columns. 106 | 107 | - `` - Column component for the table. 108 | - Example: 109 | 110 | ```html 111 | 112 | 113 | 114 | 115 | {{person.name}} 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | ``` 126 | 127 | ### Heading Template 128 | The table heading can be customised with the `` tag. The following example show how to use a font awesome icon with text in the title section. 129 | -Example: 130 | 131 | ```html 132 | 133 | 134 | 135 | 136 | Heading Template 137 | 138 | 139 | 140 | 141 | ``` 142 | 143 | ### Events 144 | - `onRowSelect` - Return the clicked row object. 145 | 146 | Example : (onRowSelect)="onRowClick($event)" 147 | 148 | 149 | Thats all Folks !! You are good to go. 150 | 151 | Please raise any issues [here](https://github.com/CuppaLabs/angular2-dataGrid/issues) 152 | 153 | To run the code and build in your local, follw the below steps 154 | 155 | - git clone `https://github.com/CuppaLabs/angular2-dataGrid.git` 156 | - npm install 157 | - ng serve 158 | - Go to `http://localhost:4200` where your app will run. 159 | 160 | ## Licence 161 | 162 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info. 163 | 164 | -- 165 | 166 | The MIT License (MIT) 167 | Copyright (c) 2016 Cuppa Labs 168 | 169 | Permission is hereby granted, free of charge, to any person obtaining a copy 170 | of this software and associated documentation files (the "Software"), to deal 171 | in the Software without restriction, including without limitation the rights 172 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 173 | copies of the Software, and to permit persons to whom the Software is 174 | furnished to do so, subject to the following conditions: 175 | 176 | The above copyright notice and this permission notice shall be included in 177 | all copies or substantial portions of the Software. 178 | 179 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 180 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 181 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 182 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 183 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 184 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 185 | THE SOFTWARE. 186 | 187 | ## Author 188 | Pradeep Kumar Terli @ [Cuppa Labs](http://www.cuppalabs.com) 189 | 190 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'app works!'; 10 | arrayList:any[] = []; 11 | selectedRow: any = {}; 12 | notification: boolean = false; 13 | private config = { 14 | title:"Cuppa Data Table", 15 | w: 300, 16 | h: 300, 17 | itemHeight: 41, 18 | totalRows: 10000, 19 | items: this.arrayList, 20 | sort:{'id':'desc'} 21 | } 22 | private namesList:any[] = ["Smith","Johnson","Williams","Brown","Jones","Miller","Davis","Garcia","Rodriguez","Wilson","Martinez","Anderson","Taylor","Thomas","Hernandez","Moore","Martin","Jackson","Thompson","White","Lopez","Lee","Gonzalez","Harris","Clark","Lewis","Robinson","Walker","Perez","Hall","Young","Allen","Sanchez","Wright","King","Scott","Green","Baker","Adams","Nelson","Hill","Ramirez","Campbell","Mitchell","Roberts","Carter","Phillips","Evans","Turner","Torres","Parker","Collins","Edwards","Stewart","Flores","Morris","Nguyen","Murphy","Rivera","Cook","Rogers","Morgan","Peterson","Cooper","Reed","Bailey","Bell","Gomez","Kelly","Howard","Ward","Cox","Diaz","Richardson","Wood","Watson","Brooks","Bennett","Gray","James","Reyes","Cruz","Hughes","Price","Myers","Long","Foster","Sanders","Ross","Morales","Powell","Sullivan","Russell","Ortiz","Jenkins","Gutierrez","Perry","Butler","Barnes","Fisher","Henderson","Coleman","Simmons","Patterson","Jordan","Reynolds","Hamilton","Graham","Kim","Gonzales","Alexander","Ramos","Wallace","Griffin","West","Cole","Hayes","Chavez","Gibson","Bryant","Ellis","Stevens","Murray","Ford","Marshall","Owens","Mcdonald","Harrison","Ruiz","Kennedy","Wells","Alvarez","Woods","Mendoza","Castillo","Olson","Webb","Washington","Tucker","Freeman","Burns","Henry","Vasquez","Snyder","Simpson","Crawford","Jimenez","Porter","Mason","Shaw","Gordon","Wagner","Hunter","Romero","Hicks","Dixon","Hunt","Palmer","Robertson","Black","Holmes","Stone","Meyer","Boyd","Mills","Warren","Fox","Rose","Rice","Moreno","Schmidt","Patel","Ferguson","Nichols","Herrera","Medina","Ryan","Fernandez","Weaver","Daniels","Stephens","Gardner","Payne","Kelley","Dunn","Pierce","Arnold","Tran","Spencer","Peters","Hawkins","Grant","Hansen","Castro","Hoffman","Hart","Elliott","Cunningham","Knight","Bradley","Carroll","Hudson","Duncan","Armstrong","Berry","Andrews","Johnston","Ray","Lane","Riley","Carpenter","Perkins","Aguilar","Silva","Richards","Willis","Matthews","Chapman","Lawrence","Garza","Vargas","Watkins","Wheeler","Larson","Carlson","Harper","George","Greene","Burke","Guzman","Morrison","Munoz","Jacobs","Obrien","Lawson","Franklin","Lynch","Bishop","Carr","Salazar","Austin","Mendez","Gilbert","Jensen","Williamson","Montgomery","Harvey","Oliver","Howell","Dean","Hanson","Weber","Garrett","Sims","Burton","Fuller","Soto","Mccoy","Welch","Chen","Schultz","Walters","Reid","Fields","Walsh","Little","Fowler","Bowman","Davidson","May","Day","Schneider","Newman","Brewer","Lucas","Holland","Wong","Banks","Santos","Curtis","Pearson","Delgado","Valdez","Pena","Rios","Douglas","Sandoval","Barrett","Hopkins","Keller","Guerrero","Stanley","Bates","Alvarado","Beck","Ortega","Wade","Estrada","Contreras","Barnett","Caldwell","Santiago","Lambert","Powers","Chambers","Nunez","Craig","Leonard","Lowe","Rhodes","Byrd","Gregory","Shelton","Frazier","Becker","Maldonado","Fleming","Vega","Sutton","Cohen","Jennings","Parks","Mcdaniel","Watts","Barker","Norris","Vaughn","Vazquez","Holt","Schwartz","Steele","Benson","Neal","Dominguez","Horton","Terry","Wolfe","Hale","Lyons","Graves","Haynes","Miles","Park","Warner","Padilla","Bush","Thornton","Mccarthy","Mann","Zimmerman","Erickson","Fletcher","Mckinney","Page","Dawson","Joseph","Marquez","Reeves","Klein","Espinoza","Baldwin","Moran","Love","Robbins","Higgins","Ball","Cortez","Le","Griffith","Bowen","Sharp","Cummings","Ramsey","Hardy","Swanson","Barber","Acosta","Luna","Chandler","Blair","Daniel","Cross","Simon","Dennis","Oconnor","Quinn","Gross","Navarro","Moss","Fitzgerald","Doyle","Mclaughlin","Rojas","Rodgers","Stevenson","Singh","Yang","Figueroa","Harmon","Newton","Paul","Manning","Garner","Mcgee","Reese","Francis","Burgess","Adkins","Goodman","Curry","Brady","Christensen","Potter","Walton","Goodwin","Mullins","Molina","Webster","Fischer","Campos","Avila","Sherman","Todd","Chang","Blake","Malone","Wolf","Hodges","Juarez","Gill","Farmer","Hines","Gallagher","Duran","Hubbard","Cannon","Miranda","Wang","Saunders","Tate","Mack","Hammond","Carrillo","Townsend","Wise","Ingram","Barton","Mejia","Ayala","Schroeder","Hampton","Rowe","Parsons","Frank","Waters","Strickland","Osborne","Maxwell","Chan","Deleon","Norman","Harrington","Casey","Patton","Logan","Bowers","Mueller","Glover","Floyd","Hartman","Buchanan","Cobb","French","Kramer","Mccormick","Clarke","Tyler","Gibbs","Moody","Conner","Sparks","Mcguire","Leon","Bauer","Norton","Pope","Flynn","Hogan","Robles","Salinas","Yates","Lindsey","Lloyd","Marsh","Mcbride","Owen","Solis","Pham","Lang","Pratt","Lara","Brock","Ballard","Trujillo","Shaffer","Drake","Roman","Aguirre","Morton","Stokes","Lamb","Pacheco","Patrick","Cochran","Shepherd","Cain","Burnett","Hess","Li","Cervantes","Olsen","Briggs","Ochoa","Cabrera","Velasquez","Montoya","Roth","Meyers","Cardenas","Fuentes","Weiss","Hoover","Wilkins","Nicholson","Underwood","Short","Carson","Morrow","Colon","Holloway","Summers","Bryan","Petersen","Mckenzie","Serrano","Wilcox","Carey","Clayton","Poole","Calderon","Gallegos","Greer","Rivas","Guerra","Decker","Collier","Wall","Whitaker","Bass","Flowers","Davenport","Conley","Houston","Huff","Copeland","Hood","Monroe","Massey","Roberson","Combs","Franco","Larsen","Pittman","Randall","Skinner","Wilkinson","Kirby","Cameron","Bridges","Anthony","Richard","Kirk","Bruce","Singleton","Mathis","Bradford","Boone","Abbott","Charles","Allison","Sweeney","Atkinson","Horn","Jefferson","Rosales","York","Christian","Phelps","Farrell","Castaneda","Nash","Dickerson","Bond","Wyatt","Foley","Chase","Gates","Vincent","Mathews","Hodge","Garrison","Trevino","Villarreal","Heath","Dalton","Valencia","Callahan","Hensley","Atkins","Huffman","Roy","Boyer","Shields","Lin","Hancock","Grimes","Glenn","Cline","Delacruz","Camacho","Dillon","Parrish","Oneill","Melton","Booth","Kane","Berg","Harrell","Pitts","Savage","Wiggins","Brennan","Salas","Marks","Russo","Sawyer","Baxter","Golden","Hutchinson","Liu","Walter","Mcdowell","Wiley","Rich","Humphrey","Johns","Koch","Suarez","Hobbs","Beard","Gilmore","Ibarra","Keith","Macias","Khan","Andrade","Ware","Stephenson","Henson","Wilkerson","Dyer","Mcclure","Blackwell","Mercado","Tanner","Eaton","Clay","Barron","Beasley","Oneal","Preston","Small","Wu","Zamora","Macdonald","Vance","Snow","Mcclain","Stafford","Orozco","Barry","English","Shannon","Kline","Jacobson","Woodard","Huang","Kemp","Mosley","Prince","Merritt","Hurst","Villanueva","Roach","Nolan","Lam","Yoder","Mccullough","Lester","Santana","Valenzuela","Winters","Barrera","Leach","Orr","Berger","Mckee","Strong","Conway","Stein","Whitehead","Bullock","Escobar","Knox","Meadows","Solomon","Velez","Odonnell","Kerr","Stout","Blankenship","Browning","Kent","Lozano","Bartlett","Pruitt","Buck","Barr","Gaines","Durham","Gentry","Mcintyre","Sloan","Melendez","Rocha","Herman","Sexton","Moon","Hendricks","Rangel","Stark","Lowery","Hardin","Hull","Sellers","Ellison","Calhoun","Gillespie","Mora","Knapp","Mccall","Morse","Dorsey","Weeks","Nielsen","Livingston","Leblanc","Mclean","Bradshaw","Glass","Middleton","Buckley","Schaefer","Frost","Howe","House","Mcintosh","Ho","Pennington","Reilly","Hebert","Mcfarland","Hickman","Noble","Spears","Conrad","Arias","Galvan","Velazquez","Huynh","Frederick","Randolph","Cantu","Fitzpatrick","Mahoney","Peck","Villa","Michael","Donovan","Mcconnell","Walls","Boyle","Mayer","Zuniga","Giles","Pineda","Pace","Hurley","Mays","Mcmillan","Crosby","Ayers","Case","Bentley","Shepard","Everett","Pugh","David","Mcmahon","Dunlap","Bender","Hahn","Harding","Acevedo","Raymond","Blackburn","Duffy","Landry","Dougherty","Bautista","Shah","Potts","Arroyo","Valentine","Meza","Gould","Vaughan","Fry","Rush","Avery","Herring","Dodson","Clements","Sampson","Tapia","Bean","Lynn","Crane","Farley","Cisneros","Benton","Ashley","Mckay","Finley","Best","Blevins","Friedman","Moses","Sosa","Blanchard","Huber","Frye","Krueger","Bernard","Rosario","Rubio","Mullen","Benjamin","Haley","Chung","Moyer","Choi","Horne","Yu","Woodward","Ali","Nixon","Hayden","Rivers","Estes","Mccarty","Richmond","Stuart","Maynard","Brandt","Oconnell","Hanna","Sanford","Sheppard","Church","Burch","Levy","Rasmussen","Coffey","Ponce","Faulkner","Donaldson","Schmitt","Novak","Costa","Montes","Booker","Cordova","Waller","Arellano","Maddox","Mata","Bonilla","Stanton","Compton","Kaufman","Dudley","Mcpherson","Beltran","Dickson","Mccann","Villegas","Proctor","Hester","Cantrell","Daugherty","Cherry","Bray","Davila","Rowland","Levine","Madden","Spence","Good","Irwin","Werner","Krause","Petty","Whitney","Baird","Hooper","Pollard","Zavala","Jarvis","Holden","Haas","Hendrix","Mcgrath","Bird","Lucero","Terrell","Riggs","Joyce","Mercer","Rollins","Galloway","Duke","Odom","Andersen","Downs","Hatfield","Benitez","Archer","Huerta","Travis","Mcneil","Hinton","Zhang","Hays","Mayo","Fritz","Branch","Mooney","Ewing","Ritter","Esparza","Frey","Braun","Gay","Riddle","Haney","Kaiser","Holder","Chaney","Mcknight","Gamble","Vang","Cooley","Carney","Cowan","Forbes","Ferrell","Davies","Barajas","Shea","Osborn","Bright","Cuevas","Bolton","Murillo","Lutz","Duarte","Kidd","Key","Cooke"]; 23 | constructor() { 24 | for(var t=1;t<=10000;t++){ 25 | var tempObj = {"id":0,"name":"","mobile":0}; 26 | tempObj.id = t; 27 | tempObj.name= this.namesList[Math.floor(Math.random()*this.namesList.length)]; 28 | tempObj.mobile = Math.floor(Math.random() * (9999999999 - 9000000000 + 1)) + 9000000000; 29 | this.arrayList.push(tempObj); 30 | } 31 | } 32 | private onRowClick(row:any){ 33 | console.log(row); 34 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 35 | } 36 | getRowData(data:any){ 37 | console.log(data); 38 | this.notification = true; 39 | this.selectedRow = data; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/Examples/heading-template.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 |

Heading Template

6 | 7 | 8 | 9 | 10 | Heading Template 11 | 12 | 13 | 14 | ` 15 | }) 16 | export class HeadingTemplateExample { 17 | 18 | arrayList:any[] = []; 19 | selectedRow: any = {}; 20 | notification: boolean = false; 21 | private config = { 22 | w: 300, 23 | h: 300, 24 | itemHeight: 41, 25 | totalRows: 10000, 26 | items: this.arrayList, 27 | sort:{'id':'desc'} 28 | } 29 | private namesList:any[] = ["Smith","Johnson","Williams","Brown","Jones","Miller","Davis","Garcia","Rodriguez","Wilson","Martinez","Anderson","Taylor","Thomas","Hernandez","Moore","Martin","Jackson","Thompson","White","Lopez","Lee","Gonzalez","Harris","Clark","Lewis","Robinson","Walker","Perez","Hall","Young","Allen","Sanchez","Wright","King","Scott","Green","Baker","Adams","Nelson","Hill","Ramirez","Campbell","Mitchell","Roberts","Carter","Phillips","Evans","Turner","Torres","Parker","Collins","Edwards","Stewart","Flores","Morris","Nguyen","Murphy","Rivera","Cook","Rogers","Morgan","Peterson","Cooper","Reed","Bailey","Bell","Gomez","Kelly","Howard","Ward","Cox","Diaz","Richardson","Wood","Watson","Brooks","Bennett","Gray","James","Reyes","Cruz","Hughes","Price","Myers","Long","Foster","Sanders","Ross","Morales","Powell","Sullivan","Russell","Ortiz","Jenkins","Gutierrez","Perry","Butler","Barnes","Fisher","Henderson","Coleman","Simmons","Patterson","Jordan","Reynolds","Hamilton","Graham","Kim","Gonzales","Alexander","Ramos","Wallace","Griffin","West","Cole","Hayes","Chavez","Gibson","Bryant","Ellis","Stevens","Murray","Ford","Marshall","Owens","Mcdonald","Harrison","Ruiz","Kennedy","Wells","Alvarez","Woods","Mendoza","Castillo","Olson","Webb","Washington","Tucker","Freeman","Burns","Henry","Vasquez","Snyder","Simpson","Crawford","Jimenez","Porter","Mason","Shaw","Gordon","Wagner","Hunter","Romero","Hicks","Dixon","Hunt","Palmer","Robertson","Black","Holmes","Stone","Meyer","Boyd","Mills","Warren","Fox","Rose","Rice","Moreno","Schmidt","Patel","Ferguson","Nichols","Herrera","Medina","Ryan","Fernandez","Weaver","Daniels","Stephens","Gardner","Payne","Kelley","Dunn","Pierce","Arnold","Tran","Spencer","Peters","Hawkins","Grant","Hansen","Castro","Hoffman","Hart","Elliott","Cunningham","Knight","Bradley","Carroll","Hudson","Duncan","Armstrong","Berry","Andrews","Johnston","Ray","Lane","Riley","Carpenter","Perkins","Aguilar","Silva","Richards","Willis","Matthews","Chapman","Lawrence","Garza","Vargas","Watkins","Wheeler","Larson","Carlson","Harper","George","Greene","Burke","Guzman","Morrison","Munoz","Jacobs","Obrien","Lawson","Franklin","Lynch","Bishop","Carr","Salazar","Austin","Mendez","Gilbert","Jensen","Williamson","Montgomery","Harvey","Oliver","Howell","Dean","Hanson","Weber","Garrett","Sims","Burton","Fuller","Soto","Mccoy","Welch","Chen","Schultz","Walters","Reid","Fields","Walsh","Little","Fowler","Bowman","Davidson","May","Day","Schneider","Newman","Brewer","Lucas","Holland","Wong","Banks","Santos","Curtis","Pearson","Delgado","Valdez","Pena","Rios","Douglas","Sandoval","Barrett","Hopkins","Keller","Guerrero","Stanley","Bates","Alvarado","Beck","Ortega","Wade","Estrada","Contreras","Barnett","Caldwell","Santiago","Lambert","Powers","Chambers","Nunez","Craig","Leonard","Lowe","Rhodes","Byrd","Gregory","Shelton","Frazier","Becker","Maldonado","Fleming","Vega","Sutton","Cohen","Jennings","Parks","Mcdaniel","Watts","Barker","Norris","Vaughn","Vazquez","Holt","Schwartz","Steele","Benson","Neal","Dominguez","Horton","Terry","Wolfe","Hale","Lyons","Graves","Haynes","Miles","Park","Warner","Padilla","Bush","Thornton","Mccarthy","Mann","Zimmerman","Erickson","Fletcher","Mckinney","Page","Dawson","Joseph","Marquez","Reeves","Klein","Espinoza","Baldwin","Moran","Love","Robbins","Higgins","Ball","Cortez","Le","Griffith","Bowen","Sharp","Cummings","Ramsey","Hardy","Swanson","Barber","Acosta","Luna","Chandler","Blair","Daniel","Cross","Simon","Dennis","Oconnor","Quinn","Gross","Navarro","Moss","Fitzgerald","Doyle","Mclaughlin","Rojas","Rodgers","Stevenson","Singh","Yang","Figueroa","Harmon","Newton","Paul","Manning","Garner","Mcgee","Reese","Francis","Burgess","Adkins","Goodman","Curry","Brady","Christensen","Potter","Walton","Goodwin","Mullins","Molina","Webster","Fischer","Campos","Avila","Sherman","Todd","Chang","Blake","Malone","Wolf","Hodges","Juarez","Gill","Farmer","Hines","Gallagher","Duran","Hubbard","Cannon","Miranda","Wang","Saunders","Tate","Mack","Hammond","Carrillo","Townsend","Wise","Ingram","Barton","Mejia","Ayala","Schroeder","Hampton","Rowe","Parsons","Frank","Waters","Strickland","Osborne","Maxwell","Chan","Deleon","Norman","Harrington","Casey","Patton","Logan","Bowers","Mueller","Glover","Floyd","Hartman","Buchanan","Cobb","French","Kramer","Mccormick","Clarke","Tyler","Gibbs","Moody","Conner","Sparks","Mcguire","Leon","Bauer","Norton","Pope","Flynn","Hogan","Robles","Salinas","Yates","Lindsey","Lloyd","Marsh","Mcbride","Owen","Solis","Pham","Lang","Pratt","Lara","Brock","Ballard","Trujillo","Shaffer","Drake","Roman","Aguirre","Morton","Stokes","Lamb","Pacheco","Patrick","Cochran","Shepherd","Cain","Burnett","Hess","Li","Cervantes","Olsen","Briggs","Ochoa","Cabrera","Velasquez","Montoya","Roth","Meyers","Cardenas","Fuentes","Weiss","Hoover","Wilkins","Nicholson","Underwood","Short","Carson","Morrow","Colon","Holloway","Summers","Bryan","Petersen","Mckenzie","Serrano","Wilcox","Carey","Clayton","Poole","Calderon","Gallegos","Greer","Rivas","Guerra","Decker","Collier","Wall","Whitaker","Bass","Flowers","Davenport","Conley","Houston","Huff","Copeland","Hood","Monroe","Massey","Roberson","Combs","Franco","Larsen","Pittman","Randall","Skinner","Wilkinson","Kirby","Cameron","Bridges","Anthony","Richard","Kirk","Bruce","Singleton","Mathis","Bradford","Boone","Abbott","Charles","Allison","Sweeney","Atkinson","Horn","Jefferson","Rosales","York","Christian","Phelps","Farrell","Castaneda","Nash","Dickerson","Bond","Wyatt","Foley","Chase","Gates","Vincent","Mathews","Hodge","Garrison","Trevino","Villarreal","Heath","Dalton","Valencia","Callahan","Hensley","Atkins","Huffman","Roy","Boyer","Shields","Lin","Hancock","Grimes","Glenn","Cline","Delacruz","Camacho","Dillon","Parrish","Oneill","Melton","Booth","Kane","Berg","Harrell","Pitts","Savage","Wiggins","Brennan","Salas","Marks","Russo","Sawyer","Baxter","Golden","Hutchinson","Liu","Walter","Mcdowell","Wiley","Rich","Humphrey","Johns","Koch","Suarez","Hobbs","Beard","Gilmore","Ibarra","Keith","Macias","Khan","Andrade","Ware","Stephenson","Henson","Wilkerson","Dyer","Mcclure","Blackwell","Mercado","Tanner","Eaton","Clay","Barron","Beasley","Oneal","Preston","Small","Wu","Zamora","Macdonald","Vance","Snow","Mcclain","Stafford","Orozco","Barry","English","Shannon","Kline","Jacobson","Woodard","Huang","Kemp","Mosley","Prince","Merritt","Hurst","Villanueva","Roach","Nolan","Lam","Yoder","Mccullough","Lester","Santana","Valenzuela","Winters","Barrera","Leach","Orr","Berger","Mckee","Strong","Conway","Stein","Whitehead","Bullock","Escobar","Knox","Meadows","Solomon","Velez","Odonnell","Kerr","Stout","Blankenship","Browning","Kent","Lozano","Bartlett","Pruitt","Buck","Barr","Gaines","Durham","Gentry","Mcintyre","Sloan","Melendez","Rocha","Herman","Sexton","Moon","Hendricks","Rangel","Stark","Lowery","Hardin","Hull","Sellers","Ellison","Calhoun","Gillespie","Mora","Knapp","Mccall","Morse","Dorsey","Weeks","Nielsen","Livingston","Leblanc","Mclean","Bradshaw","Glass","Middleton","Buckley","Schaefer","Frost","Howe","House","Mcintosh","Ho","Pennington","Reilly","Hebert","Mcfarland","Hickman","Noble","Spears","Conrad","Arias","Galvan","Velazquez","Huynh","Frederick","Randolph","Cantu","Fitzpatrick","Mahoney","Peck","Villa","Michael","Donovan","Mcconnell","Walls","Boyle","Mayer","Zuniga","Giles","Pineda","Pace","Hurley","Mays","Mcmillan","Crosby","Ayers","Case","Bentley","Shepard","Everett","Pugh","David","Mcmahon","Dunlap","Bender","Hahn","Harding","Acevedo","Raymond","Blackburn","Duffy","Landry","Dougherty","Bautista","Shah","Potts","Arroyo","Valentine","Meza","Gould","Vaughan","Fry","Rush","Avery","Herring","Dodson","Clements","Sampson","Tapia","Bean","Lynn","Crane","Farley","Cisneros","Benton","Ashley","Mckay","Finley","Best","Blevins","Friedman","Moses","Sosa","Blanchard","Huber","Frye","Krueger","Bernard","Rosario","Rubio","Mullen","Benjamin","Haley","Chung","Moyer","Choi","Horne","Yu","Woodward","Ali","Nixon","Hayden","Rivers","Estes","Mccarty","Richmond","Stuart","Maynard","Brandt","Oconnell","Hanna","Sanford","Sheppard","Church","Burch","Levy","Rasmussen","Coffey","Ponce","Faulkner","Donaldson","Schmitt","Novak","Costa","Montes","Booker","Cordova","Waller","Arellano","Maddox","Mata","Bonilla","Stanton","Compton","Kaufman","Dudley","Mcpherson","Beltran","Dickson","Mccann","Villegas","Proctor","Hester","Cantrell","Daugherty","Cherry","Bray","Davila","Rowland","Levine","Madden","Spence","Good","Irwin","Werner","Krause","Petty","Whitney","Baird","Hooper","Pollard","Zavala","Jarvis","Holden","Haas","Hendrix","Mcgrath","Bird","Lucero","Terrell","Riggs","Joyce","Mercer","Rollins","Galloway","Duke","Odom","Andersen","Downs","Hatfield","Benitez","Archer","Huerta","Travis","Mcneil","Hinton","Zhang","Hays","Mayo","Fritz","Branch","Mooney","Ewing","Ritter","Esparza","Frey","Braun","Gay","Riddle","Haney","Kaiser","Holder","Chaney","Mcknight","Gamble","Vang","Cooley","Carney","Cowan","Forbes","Ferrell","Davies","Barajas","Shea","Osborn","Bright","Cuevas","Bolton","Murillo","Lutz","Duarte","Kidd","Key","Cooke"]; 30 | constructor() { 31 | for(var t=1;t<=10000;t++){ 32 | var tempObj = {"id":0,"name":"","mobile":0}; 33 | tempObj.id = t; 34 | tempObj.name= this.namesList[Math.floor(Math.random()*this.namesList.length)]; 35 | tempObj.mobile = Math.floor(Math.random() * (9999999999 - 9000000000 + 1)) + 9000000000; 36 | this.arrayList.push(tempObj); 37 | } 38 | } 39 | private onRowClick(row:any){ 40 | console.log(row); 41 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 42 | } 43 | getRowData(data:any){ 44 | console.log(data); 45 | this.notification = true; 46 | this.selectedRow = data; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/app/Examples/basic-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 |

Virtual Scrolling - 10k Rows

6 | 7 |
8 | 9 |

Selected Row Details

10 |
11 |
12 | 13 |
14 | ` 15 | }) 16 | export class BasicExample { 17 | 18 | arrayList:any[] = []; 19 | selectedRow: any = {}; 20 | notification: boolean = false; 21 | private config = { 22 | title:"Cuppa Data Table", 23 | w: 300, 24 | h: 300, 25 | itemHeight: 31, 26 | totalRows: 10000, 27 | items: this.arrayList 28 | } 29 | private namesList:any[] = ["Smith","Johnson","Williams","Brown","Jones","Miller","Davis","Garcia","Rodriguez","Wilson","Martinez","Anderson","Taylor","Thomas","Hernandez","Moore","Martin","Jackson","Thompson","White","Lopez","Lee","Gonzalez","Harris","Clark","Lewis","Robinson","Walker","Perez","Hall","Young","Allen","Sanchez","Wright","King","Scott","Green","Baker","Adams","Nelson","Hill","Ramirez","Campbell","Mitchell","Roberts","Carter","Phillips","Evans","Turner","Torres","Parker","Collins","Edwards","Stewart","Flores","Morris","Nguyen","Murphy","Rivera","Cook","Rogers","Morgan","Peterson","Cooper","Reed","Bailey","Bell","Gomez","Kelly","Howard","Ward","Cox","Diaz","Richardson","Wood","Watson","Brooks","Bennett","Gray","James","Reyes","Cruz","Hughes","Price","Myers","Long","Foster","Sanders","Ross","Morales","Powell","Sullivan","Russell","Ortiz","Jenkins","Gutierrez","Perry","Butler","Barnes","Fisher","Henderson","Coleman","Simmons","Patterson","Jordan","Reynolds","Hamilton","Graham","Kim","Gonzales","Alexander","Ramos","Wallace","Griffin","West","Cole","Hayes","Chavez","Gibson","Bryant","Ellis","Stevens","Murray","Ford","Marshall","Owens","Mcdonald","Harrison","Ruiz","Kennedy","Wells","Alvarez","Woods","Mendoza","Castillo","Olson","Webb","Washington","Tucker","Freeman","Burns","Henry","Vasquez","Snyder","Simpson","Crawford","Jimenez","Porter","Mason","Shaw","Gordon","Wagner","Hunter","Romero","Hicks","Dixon","Hunt","Palmer","Robertson","Black","Holmes","Stone","Meyer","Boyd","Mills","Warren","Fox","Rose","Rice","Moreno","Schmidt","Patel","Ferguson","Nichols","Herrera","Medina","Ryan","Fernandez","Weaver","Daniels","Stephens","Gardner","Payne","Kelley","Dunn","Pierce","Arnold","Tran","Spencer","Peters","Hawkins","Grant","Hansen","Castro","Hoffman","Hart","Elliott","Cunningham","Knight","Bradley","Carroll","Hudson","Duncan","Armstrong","Berry","Andrews","Johnston","Ray","Lane","Riley","Carpenter","Perkins","Aguilar","Silva","Richards","Willis","Matthews","Chapman","Lawrence","Garza","Vargas","Watkins","Wheeler","Larson","Carlson","Harper","George","Greene","Burke","Guzman","Morrison","Munoz","Jacobs","Obrien","Lawson","Franklin","Lynch","Bishop","Carr","Salazar","Austin","Mendez","Gilbert","Jensen","Williamson","Montgomery","Harvey","Oliver","Howell","Dean","Hanson","Weber","Garrett","Sims","Burton","Fuller","Soto","Mccoy","Welch","Chen","Schultz","Walters","Reid","Fields","Walsh","Little","Fowler","Bowman","Davidson","May","Day","Schneider","Newman","Brewer","Lucas","Holland","Wong","Banks","Santos","Curtis","Pearson","Delgado","Valdez","Pena","Rios","Douglas","Sandoval","Barrett","Hopkins","Keller","Guerrero","Stanley","Bates","Alvarado","Beck","Ortega","Wade","Estrada","Contreras","Barnett","Caldwell","Santiago","Lambert","Powers","Chambers","Nunez","Craig","Leonard","Lowe","Rhodes","Byrd","Gregory","Shelton","Frazier","Becker","Maldonado","Fleming","Vega","Sutton","Cohen","Jennings","Parks","Mcdaniel","Watts","Barker","Norris","Vaughn","Vazquez","Holt","Schwartz","Steele","Benson","Neal","Dominguez","Horton","Terry","Wolfe","Hale","Lyons","Graves","Haynes","Miles","Park","Warner","Padilla","Bush","Thornton","Mccarthy","Mann","Zimmerman","Erickson","Fletcher","Mckinney","Page","Dawson","Joseph","Marquez","Reeves","Klein","Espinoza","Baldwin","Moran","Love","Robbins","Higgins","Ball","Cortez","Le","Griffith","Bowen","Sharp","Cummings","Ramsey","Hardy","Swanson","Barber","Acosta","Luna","Chandler","Blair","Daniel","Cross","Simon","Dennis","Oconnor","Quinn","Gross","Navarro","Moss","Fitzgerald","Doyle","Mclaughlin","Rojas","Rodgers","Stevenson","Singh","Yang","Figueroa","Harmon","Newton","Paul","Manning","Garner","Mcgee","Reese","Francis","Burgess","Adkins","Goodman","Curry","Brady","Christensen","Potter","Walton","Goodwin","Mullins","Molina","Webster","Fischer","Campos","Avila","Sherman","Todd","Chang","Blake","Malone","Wolf","Hodges","Juarez","Gill","Farmer","Hines","Gallagher","Duran","Hubbard","Cannon","Miranda","Wang","Saunders","Tate","Mack","Hammond","Carrillo","Townsend","Wise","Ingram","Barton","Mejia","Ayala","Schroeder","Hampton","Rowe","Parsons","Frank","Waters","Strickland","Osborne","Maxwell","Chan","Deleon","Norman","Harrington","Casey","Patton","Logan","Bowers","Mueller","Glover","Floyd","Hartman","Buchanan","Cobb","French","Kramer","Mccormick","Clarke","Tyler","Gibbs","Moody","Conner","Sparks","Mcguire","Leon","Bauer","Norton","Pope","Flynn","Hogan","Robles","Salinas","Yates","Lindsey","Lloyd","Marsh","Mcbride","Owen","Solis","Pham","Lang","Pratt","Lara","Brock","Ballard","Trujillo","Shaffer","Drake","Roman","Aguirre","Morton","Stokes","Lamb","Pacheco","Patrick","Cochran","Shepherd","Cain","Burnett","Hess","Li","Cervantes","Olsen","Briggs","Ochoa","Cabrera","Velasquez","Montoya","Roth","Meyers","Cardenas","Fuentes","Weiss","Hoover","Wilkins","Nicholson","Underwood","Short","Carson","Morrow","Colon","Holloway","Summers","Bryan","Petersen","Mckenzie","Serrano","Wilcox","Carey","Clayton","Poole","Calderon","Gallegos","Greer","Rivas","Guerra","Decker","Collier","Wall","Whitaker","Bass","Flowers","Davenport","Conley","Houston","Huff","Copeland","Hood","Monroe","Massey","Roberson","Combs","Franco","Larsen","Pittman","Randall","Skinner","Wilkinson","Kirby","Cameron","Bridges","Anthony","Richard","Kirk","Bruce","Singleton","Mathis","Bradford","Boone","Abbott","Charles","Allison","Sweeney","Atkinson","Horn","Jefferson","Rosales","York","Christian","Phelps","Farrell","Castaneda","Nash","Dickerson","Bond","Wyatt","Foley","Chase","Gates","Vincent","Mathews","Hodge","Garrison","Trevino","Villarreal","Heath","Dalton","Valencia","Callahan","Hensley","Atkins","Huffman","Roy","Boyer","Shields","Lin","Hancock","Grimes","Glenn","Cline","Delacruz","Camacho","Dillon","Parrish","Oneill","Melton","Booth","Kane","Berg","Harrell","Pitts","Savage","Wiggins","Brennan","Salas","Marks","Russo","Sawyer","Baxter","Golden","Hutchinson","Liu","Walter","Mcdowell","Wiley","Rich","Humphrey","Johns","Koch","Suarez","Hobbs","Beard","Gilmore","Ibarra","Keith","Macias","Khan","Andrade","Ware","Stephenson","Henson","Wilkerson","Dyer","Mcclure","Blackwell","Mercado","Tanner","Eaton","Clay","Barron","Beasley","Oneal","Preston","Small","Wu","Zamora","Macdonald","Vance","Snow","Mcclain","Stafford","Orozco","Barry","English","Shannon","Kline","Jacobson","Woodard","Huang","Kemp","Mosley","Prince","Merritt","Hurst","Villanueva","Roach","Nolan","Lam","Yoder","Mccullough","Lester","Santana","Valenzuela","Winters","Barrera","Leach","Orr","Berger","Mckee","Strong","Conway","Stein","Whitehead","Bullock","Escobar","Knox","Meadows","Solomon","Velez","Odonnell","Kerr","Stout","Blankenship","Browning","Kent","Lozano","Bartlett","Pruitt","Buck","Barr","Gaines","Durham","Gentry","Mcintyre","Sloan","Melendez","Rocha","Herman","Sexton","Moon","Hendricks","Rangel","Stark","Lowery","Hardin","Hull","Sellers","Ellison","Calhoun","Gillespie","Mora","Knapp","Mccall","Morse","Dorsey","Weeks","Nielsen","Livingston","Leblanc","Mclean","Bradshaw","Glass","Middleton","Buckley","Schaefer","Frost","Howe","House","Mcintosh","Ho","Pennington","Reilly","Hebert","Mcfarland","Hickman","Noble","Spears","Conrad","Arias","Galvan","Velazquez","Huynh","Frederick","Randolph","Cantu","Fitzpatrick","Mahoney","Peck","Villa","Michael","Donovan","Mcconnell","Walls","Boyle","Mayer","Zuniga","Giles","Pineda","Pace","Hurley","Mays","Mcmillan","Crosby","Ayers","Case","Bentley","Shepard","Everett","Pugh","David","Mcmahon","Dunlap","Bender","Hahn","Harding","Acevedo","Raymond","Blackburn","Duffy","Landry","Dougherty","Bautista","Shah","Potts","Arroyo","Valentine","Meza","Gould","Vaughan","Fry","Rush","Avery","Herring","Dodson","Clements","Sampson","Tapia","Bean","Lynn","Crane","Farley","Cisneros","Benton","Ashley","Mckay","Finley","Best","Blevins","Friedman","Moses","Sosa","Blanchard","Huber","Frye","Krueger","Bernard","Rosario","Rubio","Mullen","Benjamin","Haley","Chung","Moyer","Choi","Horne","Yu","Woodward","Ali","Nixon","Hayden","Rivers","Estes","Mccarty","Richmond","Stuart","Maynard","Brandt","Oconnell","Hanna","Sanford","Sheppard","Church","Burch","Levy","Rasmussen","Coffey","Ponce","Faulkner","Donaldson","Schmitt","Novak","Costa","Montes","Booker","Cordova","Waller","Arellano","Maddox","Mata","Bonilla","Stanton","Compton","Kaufman","Dudley","Mcpherson","Beltran","Dickson","Mccann","Villegas","Proctor","Hester","Cantrell","Daugherty","Cherry","Bray","Davila","Rowland","Levine","Madden","Spence","Good","Irwin","Werner","Krause","Petty","Whitney","Baird","Hooper","Pollard","Zavala","Jarvis","Holden","Haas","Hendrix","Mcgrath","Bird","Lucero","Terrell","Riggs","Joyce","Mercer","Rollins","Galloway","Duke","Odom","Andersen","Downs","Hatfield","Benitez","Archer","Huerta","Travis","Mcneil","Hinton","Zhang","Hays","Mayo","Fritz","Branch","Mooney","Ewing","Ritter","Esparza","Frey","Braun","Gay","Riddle","Haney","Kaiser","Holder","Chaney","Mcknight","Gamble","Vang","Cooley","Carney","Cowan","Forbes","Ferrell","Davies","Barajas","Shea","Osborn","Bright","Cuevas","Bolton","Murillo","Lutz","Duarte","Kidd","Key","Cooke"]; 30 | constructor() { 31 | for(var t=1;t<=10000;t++){ 32 | var tempObj = {"id":0,"name":"","mobile":0}; 33 | tempObj.id = t; 34 | tempObj.name= this.namesList[Math.floor(Math.random()*this.namesList.length)]; 35 | tempObj.mobile = Math.floor(Math.random() * (9999999999 - 9000000000 + 1)) + 9000000000; 36 | this.arrayList.push(tempObj); 37 | } 38 | } 39 | private onRowClick(row:any){ 40 | console.log(row); 41 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 42 | } 43 | getRowData(data:any){ 44 | console.log(data); 45 | this.notification = true; 46 | this.selectedRow = data; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/angular2-dataGrid.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, NgModule, OnChanges, ContentChild, ContentChildren,QueryList, ViewEncapsulation, AfterContentInit, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core'; 2 | import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; 3 | import { CommonModule } from '@angular/common'; 4 | import {KeysPipe} from './keypipe' 5 | import {styleDirective} from './dataGrid-directive' 6 | import {columnWidth} from './dataGrid-directive' 7 | import {SetContainerHeight} from './dataGrid-directive' 8 | import {Column, Heading, TemplateRenderer, ColumnTemplateRenderer} from './column'; 9 | 10 | @Component({ 11 | selector: 'cuppa-datagrid', 12 | templateUrl: 'angular2-dataGrid.template.html', 13 | styleUrls: ['angular2-dataGrid.styles.css','icons.css'] 14 | }) 15 | 16 | export class CuppaDataGrid implements AfterViewInit, AfterContentInit{ 17 | 18 | @Input() datalist: Column[]; 19 | @Input() config: any; 20 | @Output('onRowSelect') 21 | rowClick: EventEmitter = new EventEmitter(); 22 | @ContentChild(Heading) heading: Heading; 23 | @ContentChildren(Column) columns: QueryList; 24 | 25 | private width:any; 26 | private height:any; 27 | private itemHeight:any; 28 | private items:any; 29 | private totalRows:any; 30 | private screenItemsLen:any; 31 | private cachedItemsLen:any; 32 | private lastRepaintY: any; 33 | private maxBuffer:any; 34 | private lastScrolled:any; 35 | private contianer:any 36 | private rmNodeInterval:any; 37 | private totalHeight: any; 38 | private scroller:any; 39 | private dataArray:any[] = ["111","222","333","444"]; 40 | private chunkArray:any[]; 41 | private scrollTop:any; 42 | private chunkIndex:any[] = []; 43 | private headSection:any[]; 44 | private cachedItems:any[] = []; 45 | 46 | constructor(private _elementRef : ElementRef, private sanitizer: DomSanitizer) { 47 | } 48 | 49 | ngOnInit() { 50 | this.width = (this.config && this.config.w + 'px') || '100%'; 51 | this.height = (this.config && this.config.h + 'px') || '100%'; 52 | this.itemHeight = this.config.itemHeight; 53 | this.items = this.config.items; 54 | this.totalRows = this.config.totalRows || (this.config.items && this.config.items.length); 55 | this.screenItemsLen = Math.ceil(this.config.h / this.itemHeight); 56 | this.cachedItemsLen = this.screenItemsLen * 3; 57 | this.totalHeight = this.itemHeight * this.totalRows; 58 | this.scroller = this.createScroller(this.totalHeight); 59 | this.maxBuffer = this.screenItemsLen * this.itemHeight; 60 | this.lastScrolled = 0; 61 | this.generateHeadArray(this.items[0]); 62 | this._renderChunk(0, this.cachedItemsLen / 2); 63 | } 64 | ngAfterViewInit() { 65 | this._elementRef.nativeElement.getElementsByClassName("container")[0].addEventListener('scroll', this.onScroll.bind(this)); 66 | } 67 | ngAfterContentInit(){ 68 | } 69 | private generateHeadArray(row:any[]){ 70 | 71 | this.headSection = []; 72 | var ind= 0; 73 | for(var prop in row){ 74 | var tempObj = {"title":prop,"sorting":"",'prop':prop,'index':ind}; 75 | if(this.config.sort){ 76 | 77 | for(var sortprop in this.config.sort){ 78 | if(this.config.sort.hasOwnProperty(prop)){ 79 | tempObj.sorting = this.config.sort[prop]; 80 | this.sortColumn(tempObj); 81 | } 82 | } 83 | } 84 | this.headSection.push(tempObj); 85 | ind++; 86 | } 87 | } 88 | private changeData(){ 89 | var temArr = ["1","2","3","4"]; 90 | this.dataArray = temArr; 91 | } 92 | private getHeightVal(i:any){ 93 | var c:any = i*31; 94 | c = c+"px"; 95 | return c; 96 | } 97 | private onScroll(e:any) { 98 | this.scrollTop = e.target.scrollTop; 99 | this.updateView(this.scrollTop); 100 | 101 | } 102 | private updateView(scrollTop:any){ 103 | var scrollPos = scrollTop ? scrollTop: 0; 104 | var first = (scrollPos / this.itemHeight) - this.screenItemsLen; 105 | var firstTemp = ""+first; 106 | first = parseInt(firstTemp) < 0 ? 0 : parseInt(firstTemp); 107 | this._renderChunk(first, this.cachedItemsLen); 108 | this.lastRepaintY = scrollPos; 109 | } 110 | 111 | /* 112 | Create Row DOM, iterating through the data array 113 | */ 114 | private _renderChunk(fromPos:any, howMany:any) { 115 | this.chunkArray = []; 116 | this.chunkIndex = []; 117 | var finalItem = fromPos + howMany; 118 | if (finalItem > this.totalRows) 119 | finalItem = this.totalRows; 120 | 121 | for (var i = fromPos; i < finalItem; i++) { 122 | this.chunkIndex.push((i * this.itemHeight) + 'px'); 123 | this.chunkArray.push(this.items[i]); 124 | } 125 | } 126 | 127 | private createScroller(h:any){ 128 | var scroller = document.createElement('div'); 129 | scroller.style.opacity = "0"; 130 | scroller.style.position = 'absolute'; 131 | scroller.style.top = "0"; 132 | scroller.style.left = "0"; 133 | scroller.style.width = '1px'; 134 | scroller.style.height = h + 'px'; 135 | return scroller; 136 | } 137 | private sortColumn(column:any){ 138 | if(this.config.sort){ 139 | for(var t=0;t item2[column].toLowerCase() && sortType == 'asc' ) 191 | return 1; 192 | if ( item1[column].toLowerCase() > item2[column].toLowerCase() && sortType == 'desc') 193 | return -1; 194 | if ( item1[column].toLowerCase() < item2[column].toLowerCase() && sortType == 'desc') 195 | return 1; 196 | else 197 | return 0; 198 | } 199 | else if(typeof item1[column] == 'number'){ 200 | if ( item1[column]< item2[column] && sortType == 'asc') 201 | return -1; 202 | if ( item1[column]> item2[column] && sortType == 'asc') 203 | return 1; 204 | if ( item1[column]> item2[column] && sortType == 'desc') 205 | return -1; 206 | if ( item1[column] < item2[column] && sortType == 'desc') 207 | return 1; 208 | else 209 | return 0; 210 | } 211 | 212 | } 213 | private search(evt:any){ 214 | var filteredElems:Array = []; 215 | if(evt.target.value.toString() != ''){ 216 | this.items.filter(function(el:any){ 217 | for(var prop in el){ 218 | if(el[prop].toString().toLowerCase().indexOf(evt.target.value.toString().toLowerCase()) >=0 ){ 219 | filteredElems.push(el); 220 | } 221 | } 222 | }); 223 | this.cachedItems = this.items; 224 | this.totalHeight = this.itemHeight * filteredElems.length; 225 | this.totalRows = filteredElems.length; 226 | this.items = []; 227 | this.items = filteredElems; 228 | this.updateView(this.scrollTop); 229 | } 230 | else if(evt.target.value.toString() == '' && this.cachedItems.length > 0){ 231 | this.items = []; 232 | this.items = this.cachedItems; 233 | this.totalHeight = this.itemHeight * this.items.length; 234 | this.totalRows = this.items.length; 235 | this.updateView(this.scrollTop); 236 | } 237 | } 238 | private filter(evt:any){ 239 | if(evt.target.value.toString() == '' && this.cachedItems.length > 0){ 240 | this.items = []; 241 | this.items = this.cachedItems; 242 | this.cachedItems = []; 243 | this.totalHeight = this.itemHeight * this.items.length; 244 | this.totalRows = this.items.length; 245 | this.updateView(this.scrollTop); 246 | } 247 | } 248 | private onRowClick(row:any){ 249 | this.rowClick.emit(row); 250 | } 251 | private getColumnData(row, field){ 252 | return row[field]; 253 | } 254 | 255 | } 256 | @NgModule({ 257 | imports: [ CommonModule ], 258 | declarations: [CuppaDataGrid,KeysPipe, styleDirective,columnWidth,SetContainerHeight, Column, Heading, TemplateRenderer, ColumnTemplateRenderer], 259 | exports: [CuppaDataGrid,KeysPipe, styleDirective,columnWidth,SetContainerHeight, Column, Heading, TemplateRenderer, ColumnTemplateRenderer] 260 | }) 261 | export class CuppaDataGridModule { } -------------------------------------------------------------------------------- /src/app/Examples/sorting-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 |

Sorting Example

6 | 7 | 8 | 9 | 10 | {{person.name}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |

Selected Row Details

23 |
24 |
25 | 26 |
27 | ` 28 | }) 29 | export class SortingExample { 30 | 31 | arrayList:any[] = []; 32 | selectedRow: any = {}; 33 | notification: boolean = false; 34 | private config = { 35 | title:"Cuppa Data Table", 36 | w: 300, 37 | h: 300, 38 | itemHeight: 41, 39 | totalRows: 10000, 40 | items: this.arrayList, 41 | sort:{'id':'desc'} 42 | } 43 | private namesList:any[] = ["Smith","Johnson","Williams","Brown","Jones","Miller","Davis","Garcia","Rodriguez","Wilson","Martinez","Anderson","Taylor","Thomas","Hernandez","Moore","Martin","Jackson","Thompson","White","Lopez","Lee","Gonzalez","Harris","Clark","Lewis","Robinson","Walker","Perez","Hall","Young","Allen","Sanchez","Wright","King","Scott","Green","Baker","Adams","Nelson","Hill","Ramirez","Campbell","Mitchell","Roberts","Carter","Phillips","Evans","Turner","Torres","Parker","Collins","Edwards","Stewart","Flores","Morris","Nguyen","Murphy","Rivera","Cook","Rogers","Morgan","Peterson","Cooper","Reed","Bailey","Bell","Gomez","Kelly","Howard","Ward","Cox","Diaz","Richardson","Wood","Watson","Brooks","Bennett","Gray","James","Reyes","Cruz","Hughes","Price","Myers","Long","Foster","Sanders","Ross","Morales","Powell","Sullivan","Russell","Ortiz","Jenkins","Gutierrez","Perry","Butler","Barnes","Fisher","Henderson","Coleman","Simmons","Patterson","Jordan","Reynolds","Hamilton","Graham","Kim","Gonzales","Alexander","Ramos","Wallace","Griffin","West","Cole","Hayes","Chavez","Gibson","Bryant","Ellis","Stevens","Murray","Ford","Marshall","Owens","Mcdonald","Harrison","Ruiz","Kennedy","Wells","Alvarez","Woods","Mendoza","Castillo","Olson","Webb","Washington","Tucker","Freeman","Burns","Henry","Vasquez","Snyder","Simpson","Crawford","Jimenez","Porter","Mason","Shaw","Gordon","Wagner","Hunter","Romero","Hicks","Dixon","Hunt","Palmer","Robertson","Black","Holmes","Stone","Meyer","Boyd","Mills","Warren","Fox","Rose","Rice","Moreno","Schmidt","Patel","Ferguson","Nichols","Herrera","Medina","Ryan","Fernandez","Weaver","Daniels","Stephens","Gardner","Payne","Kelley","Dunn","Pierce","Arnold","Tran","Spencer","Peters","Hawkins","Grant","Hansen","Castro","Hoffman","Hart","Elliott","Cunningham","Knight","Bradley","Carroll","Hudson","Duncan","Armstrong","Berry","Andrews","Johnston","Ray","Lane","Riley","Carpenter","Perkins","Aguilar","Silva","Richards","Willis","Matthews","Chapman","Lawrence","Garza","Vargas","Watkins","Wheeler","Larson","Carlson","Harper","George","Greene","Burke","Guzman","Morrison","Munoz","Jacobs","Obrien","Lawson","Franklin","Lynch","Bishop","Carr","Salazar","Austin","Mendez","Gilbert","Jensen","Williamson","Montgomery","Harvey","Oliver","Howell","Dean","Hanson","Weber","Garrett","Sims","Burton","Fuller","Soto","Mccoy","Welch","Chen","Schultz","Walters","Reid","Fields","Walsh","Little","Fowler","Bowman","Davidson","May","Day","Schneider","Newman","Brewer","Lucas","Holland","Wong","Banks","Santos","Curtis","Pearson","Delgado","Valdez","Pena","Rios","Douglas","Sandoval","Barrett","Hopkins","Keller","Guerrero","Stanley","Bates","Alvarado","Beck","Ortega","Wade","Estrada","Contreras","Barnett","Caldwell","Santiago","Lambert","Powers","Chambers","Nunez","Craig","Leonard","Lowe","Rhodes","Byrd","Gregory","Shelton","Frazier","Becker","Maldonado","Fleming","Vega","Sutton","Cohen","Jennings","Parks","Mcdaniel","Watts","Barker","Norris","Vaughn","Vazquez","Holt","Schwartz","Steele","Benson","Neal","Dominguez","Horton","Terry","Wolfe","Hale","Lyons","Graves","Haynes","Miles","Park","Warner","Padilla","Bush","Thornton","Mccarthy","Mann","Zimmerman","Erickson","Fletcher","Mckinney","Page","Dawson","Joseph","Marquez","Reeves","Klein","Espinoza","Baldwin","Moran","Love","Robbins","Higgins","Ball","Cortez","Le","Griffith","Bowen","Sharp","Cummings","Ramsey","Hardy","Swanson","Barber","Acosta","Luna","Chandler","Blair","Daniel","Cross","Simon","Dennis","Oconnor","Quinn","Gross","Navarro","Moss","Fitzgerald","Doyle","Mclaughlin","Rojas","Rodgers","Stevenson","Singh","Yang","Figueroa","Harmon","Newton","Paul","Manning","Garner","Mcgee","Reese","Francis","Burgess","Adkins","Goodman","Curry","Brady","Christensen","Potter","Walton","Goodwin","Mullins","Molina","Webster","Fischer","Campos","Avila","Sherman","Todd","Chang","Blake","Malone","Wolf","Hodges","Juarez","Gill","Farmer","Hines","Gallagher","Duran","Hubbard","Cannon","Miranda","Wang","Saunders","Tate","Mack","Hammond","Carrillo","Townsend","Wise","Ingram","Barton","Mejia","Ayala","Schroeder","Hampton","Rowe","Parsons","Frank","Waters","Strickland","Osborne","Maxwell","Chan","Deleon","Norman","Harrington","Casey","Patton","Logan","Bowers","Mueller","Glover","Floyd","Hartman","Buchanan","Cobb","French","Kramer","Mccormick","Clarke","Tyler","Gibbs","Moody","Conner","Sparks","Mcguire","Leon","Bauer","Norton","Pope","Flynn","Hogan","Robles","Salinas","Yates","Lindsey","Lloyd","Marsh","Mcbride","Owen","Solis","Pham","Lang","Pratt","Lara","Brock","Ballard","Trujillo","Shaffer","Drake","Roman","Aguirre","Morton","Stokes","Lamb","Pacheco","Patrick","Cochran","Shepherd","Cain","Burnett","Hess","Li","Cervantes","Olsen","Briggs","Ochoa","Cabrera","Velasquez","Montoya","Roth","Meyers","Cardenas","Fuentes","Weiss","Hoover","Wilkins","Nicholson","Underwood","Short","Carson","Morrow","Colon","Holloway","Summers","Bryan","Petersen","Mckenzie","Serrano","Wilcox","Carey","Clayton","Poole","Calderon","Gallegos","Greer","Rivas","Guerra","Decker","Collier","Wall","Whitaker","Bass","Flowers","Davenport","Conley","Houston","Huff","Copeland","Hood","Monroe","Massey","Roberson","Combs","Franco","Larsen","Pittman","Randall","Skinner","Wilkinson","Kirby","Cameron","Bridges","Anthony","Richard","Kirk","Bruce","Singleton","Mathis","Bradford","Boone","Abbott","Charles","Allison","Sweeney","Atkinson","Horn","Jefferson","Rosales","York","Christian","Phelps","Farrell","Castaneda","Nash","Dickerson","Bond","Wyatt","Foley","Chase","Gates","Vincent","Mathews","Hodge","Garrison","Trevino","Villarreal","Heath","Dalton","Valencia","Callahan","Hensley","Atkins","Huffman","Roy","Boyer","Shields","Lin","Hancock","Grimes","Glenn","Cline","Delacruz","Camacho","Dillon","Parrish","Oneill","Melton","Booth","Kane","Berg","Harrell","Pitts","Savage","Wiggins","Brennan","Salas","Marks","Russo","Sawyer","Baxter","Golden","Hutchinson","Liu","Walter","Mcdowell","Wiley","Rich","Humphrey","Johns","Koch","Suarez","Hobbs","Beard","Gilmore","Ibarra","Keith","Macias","Khan","Andrade","Ware","Stephenson","Henson","Wilkerson","Dyer","Mcclure","Blackwell","Mercado","Tanner","Eaton","Clay","Barron","Beasley","Oneal","Preston","Small","Wu","Zamora","Macdonald","Vance","Snow","Mcclain","Stafford","Orozco","Barry","English","Shannon","Kline","Jacobson","Woodard","Huang","Kemp","Mosley","Prince","Merritt","Hurst","Villanueva","Roach","Nolan","Lam","Yoder","Mccullough","Lester","Santana","Valenzuela","Winters","Barrera","Leach","Orr","Berger","Mckee","Strong","Conway","Stein","Whitehead","Bullock","Escobar","Knox","Meadows","Solomon","Velez","Odonnell","Kerr","Stout","Blankenship","Browning","Kent","Lozano","Bartlett","Pruitt","Buck","Barr","Gaines","Durham","Gentry","Mcintyre","Sloan","Melendez","Rocha","Herman","Sexton","Moon","Hendricks","Rangel","Stark","Lowery","Hardin","Hull","Sellers","Ellison","Calhoun","Gillespie","Mora","Knapp","Mccall","Morse","Dorsey","Weeks","Nielsen","Livingston","Leblanc","Mclean","Bradshaw","Glass","Middleton","Buckley","Schaefer","Frost","Howe","House","Mcintosh","Ho","Pennington","Reilly","Hebert","Mcfarland","Hickman","Noble","Spears","Conrad","Arias","Galvan","Velazquez","Huynh","Frederick","Randolph","Cantu","Fitzpatrick","Mahoney","Peck","Villa","Michael","Donovan","Mcconnell","Walls","Boyle","Mayer","Zuniga","Giles","Pineda","Pace","Hurley","Mays","Mcmillan","Crosby","Ayers","Case","Bentley","Shepard","Everett","Pugh","David","Mcmahon","Dunlap","Bender","Hahn","Harding","Acevedo","Raymond","Blackburn","Duffy","Landry","Dougherty","Bautista","Shah","Potts","Arroyo","Valentine","Meza","Gould","Vaughan","Fry","Rush","Avery","Herring","Dodson","Clements","Sampson","Tapia","Bean","Lynn","Crane","Farley","Cisneros","Benton","Ashley","Mckay","Finley","Best","Blevins","Friedman","Moses","Sosa","Blanchard","Huber","Frye","Krueger","Bernard","Rosario","Rubio","Mullen","Benjamin","Haley","Chung","Moyer","Choi","Horne","Yu","Woodward","Ali","Nixon","Hayden","Rivers","Estes","Mccarty","Richmond","Stuart","Maynard","Brandt","Oconnell","Hanna","Sanford","Sheppard","Church","Burch","Levy","Rasmussen","Coffey","Ponce","Faulkner","Donaldson","Schmitt","Novak","Costa","Montes","Booker","Cordova","Waller","Arellano","Maddox","Mata","Bonilla","Stanton","Compton","Kaufman","Dudley","Mcpherson","Beltran","Dickson","Mccann","Villegas","Proctor","Hester","Cantrell","Daugherty","Cherry","Bray","Davila","Rowland","Levine","Madden","Spence","Good","Irwin","Werner","Krause","Petty","Whitney","Baird","Hooper","Pollard","Zavala","Jarvis","Holden","Haas","Hendrix","Mcgrath","Bird","Lucero","Terrell","Riggs","Joyce","Mercer","Rollins","Galloway","Duke","Odom","Andersen","Downs","Hatfield","Benitez","Archer","Huerta","Travis","Mcneil","Hinton","Zhang","Hays","Mayo","Fritz","Branch","Mooney","Ewing","Ritter","Esparza","Frey","Braun","Gay","Riddle","Haney","Kaiser","Holder","Chaney","Mcknight","Gamble","Vang","Cooley","Carney","Cowan","Forbes","Ferrell","Davies","Barajas","Shea","Osborn","Bright","Cuevas","Bolton","Murillo","Lutz","Duarte","Kidd","Key","Cooke"]; 44 | constructor() { 45 | for(var t=1;t<=10000;t++){ 46 | var tempObj = {"id":0,"name":"","mobile":0}; 47 | tempObj.id = t; 48 | tempObj.name= this.namesList[Math.floor(Math.random()*this.namesList.length)]; 49 | tempObj.mobile = Math.floor(Math.random() * (9999999999 - 9000000000 + 1)) + 9000000000; 50 | this.arrayList.push(tempObj); 51 | } 52 | } 53 | private onRowClick(row:any){ 54 | console.log(row); 55 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 56 | } 57 | getRowData(data:any){ 58 | console.log(data); 59 | this.notification = true; 60 | this.selectedRow = data; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/Examples/column-template-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | template: ` 5 |

Column Template

6 | 7 | 8 | 9 | 10 | {{person.name}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |

Selected Row Details

23 |
24 |
25 | 26 |
27 | 28 | ` 29 | }) 30 | export class ColumnTemplateExample { 31 | 32 | arrayList:any[] = []; 33 | selectedRow: any = {}; 34 | notification: boolean = false; 35 | private config = { 36 | title:"Cuppa Data Table", 37 | w: 300, 38 | h: 300, 39 | itemHeight: 41, 40 | totalRows: 10000, 41 | items: this.arrayList, 42 | sort:{'id':'desc'} 43 | } 44 | private namesList:any[] = ["Smith","Johnson","Williams","Brown","Jones","Miller","Davis","Garcia","Rodriguez","Wilson","Martinez","Anderson","Taylor","Thomas","Hernandez","Moore","Martin","Jackson","Thompson","White","Lopez","Lee","Gonzalez","Harris","Clark","Lewis","Robinson","Walker","Perez","Hall","Young","Allen","Sanchez","Wright","King","Scott","Green","Baker","Adams","Nelson","Hill","Ramirez","Campbell","Mitchell","Roberts","Carter","Phillips","Evans","Turner","Torres","Parker","Collins","Edwards","Stewart","Flores","Morris","Nguyen","Murphy","Rivera","Cook","Rogers","Morgan","Peterson","Cooper","Reed","Bailey","Bell","Gomez","Kelly","Howard","Ward","Cox","Diaz","Richardson","Wood","Watson","Brooks","Bennett","Gray","James","Reyes","Cruz","Hughes","Price","Myers","Long","Foster","Sanders","Ross","Morales","Powell","Sullivan","Russell","Ortiz","Jenkins","Gutierrez","Perry","Butler","Barnes","Fisher","Henderson","Coleman","Simmons","Patterson","Jordan","Reynolds","Hamilton","Graham","Kim","Gonzales","Alexander","Ramos","Wallace","Griffin","West","Cole","Hayes","Chavez","Gibson","Bryant","Ellis","Stevens","Murray","Ford","Marshall","Owens","Mcdonald","Harrison","Ruiz","Kennedy","Wells","Alvarez","Woods","Mendoza","Castillo","Olson","Webb","Washington","Tucker","Freeman","Burns","Henry","Vasquez","Snyder","Simpson","Crawford","Jimenez","Porter","Mason","Shaw","Gordon","Wagner","Hunter","Romero","Hicks","Dixon","Hunt","Palmer","Robertson","Black","Holmes","Stone","Meyer","Boyd","Mills","Warren","Fox","Rose","Rice","Moreno","Schmidt","Patel","Ferguson","Nichols","Herrera","Medina","Ryan","Fernandez","Weaver","Daniels","Stephens","Gardner","Payne","Kelley","Dunn","Pierce","Arnold","Tran","Spencer","Peters","Hawkins","Grant","Hansen","Castro","Hoffman","Hart","Elliott","Cunningham","Knight","Bradley","Carroll","Hudson","Duncan","Armstrong","Berry","Andrews","Johnston","Ray","Lane","Riley","Carpenter","Perkins","Aguilar","Silva","Richards","Willis","Matthews","Chapman","Lawrence","Garza","Vargas","Watkins","Wheeler","Larson","Carlson","Harper","George","Greene","Burke","Guzman","Morrison","Munoz","Jacobs","Obrien","Lawson","Franklin","Lynch","Bishop","Carr","Salazar","Austin","Mendez","Gilbert","Jensen","Williamson","Montgomery","Harvey","Oliver","Howell","Dean","Hanson","Weber","Garrett","Sims","Burton","Fuller","Soto","Mccoy","Welch","Chen","Schultz","Walters","Reid","Fields","Walsh","Little","Fowler","Bowman","Davidson","May","Day","Schneider","Newman","Brewer","Lucas","Holland","Wong","Banks","Santos","Curtis","Pearson","Delgado","Valdez","Pena","Rios","Douglas","Sandoval","Barrett","Hopkins","Keller","Guerrero","Stanley","Bates","Alvarado","Beck","Ortega","Wade","Estrada","Contreras","Barnett","Caldwell","Santiago","Lambert","Powers","Chambers","Nunez","Craig","Leonard","Lowe","Rhodes","Byrd","Gregory","Shelton","Frazier","Becker","Maldonado","Fleming","Vega","Sutton","Cohen","Jennings","Parks","Mcdaniel","Watts","Barker","Norris","Vaughn","Vazquez","Holt","Schwartz","Steele","Benson","Neal","Dominguez","Horton","Terry","Wolfe","Hale","Lyons","Graves","Haynes","Miles","Park","Warner","Padilla","Bush","Thornton","Mccarthy","Mann","Zimmerman","Erickson","Fletcher","Mckinney","Page","Dawson","Joseph","Marquez","Reeves","Klein","Espinoza","Baldwin","Moran","Love","Robbins","Higgins","Ball","Cortez","Le","Griffith","Bowen","Sharp","Cummings","Ramsey","Hardy","Swanson","Barber","Acosta","Luna","Chandler","Blair","Daniel","Cross","Simon","Dennis","Oconnor","Quinn","Gross","Navarro","Moss","Fitzgerald","Doyle","Mclaughlin","Rojas","Rodgers","Stevenson","Singh","Yang","Figueroa","Harmon","Newton","Paul","Manning","Garner","Mcgee","Reese","Francis","Burgess","Adkins","Goodman","Curry","Brady","Christensen","Potter","Walton","Goodwin","Mullins","Molina","Webster","Fischer","Campos","Avila","Sherman","Todd","Chang","Blake","Malone","Wolf","Hodges","Juarez","Gill","Farmer","Hines","Gallagher","Duran","Hubbard","Cannon","Miranda","Wang","Saunders","Tate","Mack","Hammond","Carrillo","Townsend","Wise","Ingram","Barton","Mejia","Ayala","Schroeder","Hampton","Rowe","Parsons","Frank","Waters","Strickland","Osborne","Maxwell","Chan","Deleon","Norman","Harrington","Casey","Patton","Logan","Bowers","Mueller","Glover","Floyd","Hartman","Buchanan","Cobb","French","Kramer","Mccormick","Clarke","Tyler","Gibbs","Moody","Conner","Sparks","Mcguire","Leon","Bauer","Norton","Pope","Flynn","Hogan","Robles","Salinas","Yates","Lindsey","Lloyd","Marsh","Mcbride","Owen","Solis","Pham","Lang","Pratt","Lara","Brock","Ballard","Trujillo","Shaffer","Drake","Roman","Aguirre","Morton","Stokes","Lamb","Pacheco","Patrick","Cochran","Shepherd","Cain","Burnett","Hess","Li","Cervantes","Olsen","Briggs","Ochoa","Cabrera","Velasquez","Montoya","Roth","Meyers","Cardenas","Fuentes","Weiss","Hoover","Wilkins","Nicholson","Underwood","Short","Carson","Morrow","Colon","Holloway","Summers","Bryan","Petersen","Mckenzie","Serrano","Wilcox","Carey","Clayton","Poole","Calderon","Gallegos","Greer","Rivas","Guerra","Decker","Collier","Wall","Whitaker","Bass","Flowers","Davenport","Conley","Houston","Huff","Copeland","Hood","Monroe","Massey","Roberson","Combs","Franco","Larsen","Pittman","Randall","Skinner","Wilkinson","Kirby","Cameron","Bridges","Anthony","Richard","Kirk","Bruce","Singleton","Mathis","Bradford","Boone","Abbott","Charles","Allison","Sweeney","Atkinson","Horn","Jefferson","Rosales","York","Christian","Phelps","Farrell","Castaneda","Nash","Dickerson","Bond","Wyatt","Foley","Chase","Gates","Vincent","Mathews","Hodge","Garrison","Trevino","Villarreal","Heath","Dalton","Valencia","Callahan","Hensley","Atkins","Huffman","Roy","Boyer","Shields","Lin","Hancock","Grimes","Glenn","Cline","Delacruz","Camacho","Dillon","Parrish","Oneill","Melton","Booth","Kane","Berg","Harrell","Pitts","Savage","Wiggins","Brennan","Salas","Marks","Russo","Sawyer","Baxter","Golden","Hutchinson","Liu","Walter","Mcdowell","Wiley","Rich","Humphrey","Johns","Koch","Suarez","Hobbs","Beard","Gilmore","Ibarra","Keith","Macias","Khan","Andrade","Ware","Stephenson","Henson","Wilkerson","Dyer","Mcclure","Blackwell","Mercado","Tanner","Eaton","Clay","Barron","Beasley","Oneal","Preston","Small","Wu","Zamora","Macdonald","Vance","Snow","Mcclain","Stafford","Orozco","Barry","English","Shannon","Kline","Jacobson","Woodard","Huang","Kemp","Mosley","Prince","Merritt","Hurst","Villanueva","Roach","Nolan","Lam","Yoder","Mccullough","Lester","Santana","Valenzuela","Winters","Barrera","Leach","Orr","Berger","Mckee","Strong","Conway","Stein","Whitehead","Bullock","Escobar","Knox","Meadows","Solomon","Velez","Odonnell","Kerr","Stout","Blankenship","Browning","Kent","Lozano","Bartlett","Pruitt","Buck","Barr","Gaines","Durham","Gentry","Mcintyre","Sloan","Melendez","Rocha","Herman","Sexton","Moon","Hendricks","Rangel","Stark","Lowery","Hardin","Hull","Sellers","Ellison","Calhoun","Gillespie","Mora","Knapp","Mccall","Morse","Dorsey","Weeks","Nielsen","Livingston","Leblanc","Mclean","Bradshaw","Glass","Middleton","Buckley","Schaefer","Frost","Howe","House","Mcintosh","Ho","Pennington","Reilly","Hebert","Mcfarland","Hickman","Noble","Spears","Conrad","Arias","Galvan","Velazquez","Huynh","Frederick","Randolph","Cantu","Fitzpatrick","Mahoney","Peck","Villa","Michael","Donovan","Mcconnell","Walls","Boyle","Mayer","Zuniga","Giles","Pineda","Pace","Hurley","Mays","Mcmillan","Crosby","Ayers","Case","Bentley","Shepard","Everett","Pugh","David","Mcmahon","Dunlap","Bender","Hahn","Harding","Acevedo","Raymond","Blackburn","Duffy","Landry","Dougherty","Bautista","Shah","Potts","Arroyo","Valentine","Meza","Gould","Vaughan","Fry","Rush","Avery","Herring","Dodson","Clements","Sampson","Tapia","Bean","Lynn","Crane","Farley","Cisneros","Benton","Ashley","Mckay","Finley","Best","Blevins","Friedman","Moses","Sosa","Blanchard","Huber","Frye","Krueger","Bernard","Rosario","Rubio","Mullen","Benjamin","Haley","Chung","Moyer","Choi","Horne","Yu","Woodward","Ali","Nixon","Hayden","Rivers","Estes","Mccarty","Richmond","Stuart","Maynard","Brandt","Oconnell","Hanna","Sanford","Sheppard","Church","Burch","Levy","Rasmussen","Coffey","Ponce","Faulkner","Donaldson","Schmitt","Novak","Costa","Montes","Booker","Cordova","Waller","Arellano","Maddox","Mata","Bonilla","Stanton","Compton","Kaufman","Dudley","Mcpherson","Beltran","Dickson","Mccann","Villegas","Proctor","Hester","Cantrell","Daugherty","Cherry","Bray","Davila","Rowland","Levine","Madden","Spence","Good","Irwin","Werner","Krause","Petty","Whitney","Baird","Hooper","Pollard","Zavala","Jarvis","Holden","Haas","Hendrix","Mcgrath","Bird","Lucero","Terrell","Riggs","Joyce","Mercer","Rollins","Galloway","Duke","Odom","Andersen","Downs","Hatfield","Benitez","Archer","Huerta","Travis","Mcneil","Hinton","Zhang","Hays","Mayo","Fritz","Branch","Mooney","Ewing","Ritter","Esparza","Frey","Braun","Gay","Riddle","Haney","Kaiser","Holder","Chaney","Mcknight","Gamble","Vang","Cooley","Carney","Cowan","Forbes","Ferrell","Davies","Barajas","Shea","Osborn","Bright","Cuevas","Bolton","Murillo","Lutz","Duarte","Kidd","Key","Cooke"]; 45 | constructor() { 46 | for(var t=1;t<=10000;t++){ 47 | var tempObj = {"id":0,"name":"","mobile":0}; 48 | tempObj.id = t; 49 | tempObj.name= this.namesList[Math.floor(Math.random()*this.namesList.length)]; 50 | tempObj.mobile = Math.floor(Math.random() * (9999999999 - 9000000000 + 1)) + 9000000000; 51 | this.arrayList.push(tempObj); 52 | } 53 | } 54 | private onRowClick(row:any){ 55 | console.log(row); 56 | alert("selected row:"+ row.id +" "+row.name+" "+row.mobile); 57 | } 58 | getRowData(data:any){ 59 | console.log(data); 60 | this.notification = true; 61 | this.selectedRow = data; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/app/angular2-dataGrid/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Pe-icon-7-stroke'; 3 | src:url('./fonts/Pe-icon-7-stroke.eot?d7yf1v'); 4 | src:url('./fonts/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'), 5 | url('./fonts/Pe-icon-7-stroke.woff?d7yf1v') format('woff'), 6 | url('./fonts/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | [class^="pe-7s-"], [class*=" pe-7s-"] { 12 | display: inline-block; 13 | font-family: 'Pe-icon-7-stroke'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .pe-7s-album:before { 27 | content: "\e6aa"; 28 | } 29 | .pe-7s-arc:before { 30 | content: "\e6ab"; 31 | } 32 | .pe-7s-back-2:before { 33 | content: "\e6ac"; 34 | } 35 | .pe-7s-bandaid:before { 36 | content: "\e6ad"; 37 | } 38 | .pe-7s-car:before { 39 | content: "\e6ae"; 40 | } 41 | .pe-7s-diamond:before { 42 | content: "\e6af"; 43 | } 44 | .pe-7s-door-lock:before { 45 | content: "\e6b0"; 46 | } 47 | .pe-7s-eyedropper:before { 48 | content: "\e6b1"; 49 | } 50 | .pe-7s-female:before { 51 | content: "\e6b2"; 52 | } 53 | .pe-7s-gym:before { 54 | content: "\e6b3"; 55 | } 56 | .pe-7s-hammer:before { 57 | content: "\e6b4"; 58 | } 59 | .pe-7s-headphones:before { 60 | content: "\e6b5"; 61 | } 62 | .pe-7s-helm:before { 63 | content: "\e6b6"; 64 | } 65 | .pe-7s-hourglass:before { 66 | content: "\e6b7"; 67 | } 68 | .pe-7s-leaf:before { 69 | content: "\e6b8"; 70 | } 71 | .pe-7s-magic-wand:before { 72 | content: "\e6b9"; 73 | } 74 | .pe-7s-male:before { 75 | content: "\e6ba"; 76 | } 77 | .pe-7s-map-2:before { 78 | content: "\e6bb"; 79 | } 80 | .pe-7s-next-2:before { 81 | content: "\e6bc"; 82 | } 83 | .pe-7s-paint-bucket:before { 84 | content: "\e6bd"; 85 | } 86 | .pe-7s-pendrive:before { 87 | content: "\e6be"; 88 | } 89 | .pe-7s-photo:before { 90 | content: "\e6bf"; 91 | } 92 | .pe-7s-piggy:before { 93 | content: "\e6c0"; 94 | } 95 | .pe-7s-plugin:before { 96 | content: "\e6c1"; 97 | } 98 | .pe-7s-refresh-2:before { 99 | content: "\e6c2"; 100 | } 101 | .pe-7s-rocket:before { 102 | content: "\e6c3"; 103 | } 104 | .pe-7s-settings:before { 105 | content: "\e6c4"; 106 | } 107 | .pe-7s-shield:before { 108 | content: "\e6c5"; 109 | } 110 | .pe-7s-smile:before { 111 | content: "\e6c6"; 112 | } 113 | .pe-7s-usb:before { 114 | content: "\e6c7"; 115 | } 116 | .pe-7s-vector:before { 117 | content: "\e6c8"; 118 | } 119 | .pe-7s-wine:before { 120 | content: "\e6c9"; 121 | } 122 | .pe-7s-cloud-upload:before { 123 | content: "\e68a"; 124 | } 125 | .pe-7s-cash:before { 126 | content: "\e68c"; 127 | } 128 | .pe-7s-close:before { 129 | content: "\e680"; 130 | } 131 | .pe-7s-bluetooth:before { 132 | content: "\e68d"; 133 | } 134 | .pe-7s-cloud-download:before { 135 | content: "\e68b"; 136 | } 137 | .pe-7s-way:before { 138 | content: "\e68e"; 139 | } 140 | .pe-7s-close-circle:before { 141 | content: "\e681"; 142 | } 143 | .pe-7s-id:before { 144 | content: "\e68f"; 145 | } 146 | .pe-7s-angle-up:before { 147 | content: "\e682"; 148 | } 149 | .pe-7s-wristwatch:before { 150 | content: "\e690"; 151 | } 152 | .pe-7s-angle-up-circle:before { 153 | content: "\e683"; 154 | } 155 | .pe-7s-world:before { 156 | content: "\e691"; 157 | } 158 | .pe-7s-angle-right:before { 159 | content: "\e684"; 160 | } 161 | .pe-7s-volume:before { 162 | content: "\e692"; 163 | } 164 | .pe-7s-angle-right-circle:before { 165 | content: "\e685"; 166 | } 167 | .pe-7s-users:before { 168 | content: "\e693"; 169 | } 170 | .pe-7s-angle-left:before { 171 | content: "\e686"; 172 | } 173 | .pe-7s-user-female:before { 174 | content: "\e694"; 175 | } 176 | .pe-7s-angle-left-circle:before { 177 | content: "\e687"; 178 | } 179 | .pe-7s-up-arrow:before { 180 | content: "\e695"; 181 | } 182 | .pe-7s-angle-down:before { 183 | content: "\e688"; 184 | } 185 | .pe-7s-switch:before { 186 | content: "\e696"; 187 | } 188 | .pe-7s-angle-down-circle:before { 189 | content: "\e689"; 190 | } 191 | .pe-7s-scissors:before { 192 | content: "\e697"; 193 | } 194 | .pe-7s-wallet:before { 195 | content: "\e600"; 196 | } 197 | .pe-7s-safe:before { 198 | content: "\e698"; 199 | } 200 | .pe-7s-volume2:before { 201 | content: "\e601"; 202 | } 203 | .pe-7s-volume1:before { 204 | content: "\e602"; 205 | } 206 | .pe-7s-voicemail:before { 207 | content: "\e603"; 208 | } 209 | .pe-7s-video:before { 210 | content: "\e604"; 211 | } 212 | .pe-7s-user:before { 213 | content: "\e605"; 214 | } 215 | .pe-7s-upload:before { 216 | content: "\e606"; 217 | } 218 | .pe-7s-unlock:before { 219 | content: "\e607"; 220 | } 221 | .pe-7s-umbrella:before { 222 | content: "\e608"; 223 | } 224 | .pe-7s-trash:before { 225 | content: "\e609"; 226 | } 227 | .pe-7s-tools:before { 228 | content: "\e60a"; 229 | } 230 | .pe-7s-timer:before { 231 | content: "\e60b"; 232 | } 233 | .pe-7s-ticket:before { 234 | content: "\e60c"; 235 | } 236 | .pe-7s-target:before { 237 | content: "\e60d"; 238 | } 239 | .pe-7s-sun:before { 240 | content: "\e60e"; 241 | } 242 | .pe-7s-study:before { 243 | content: "\e60f"; 244 | } 245 | .pe-7s-stopwatch:before { 246 | content: "\e610"; 247 | } 248 | .pe-7s-star:before { 249 | content: "\e611"; 250 | } 251 | .pe-7s-speaker:before { 252 | content: "\e612"; 253 | } 254 | .pe-7s-signal:before { 255 | content: "\e613"; 256 | } 257 | .pe-7s-shuffle:before { 258 | content: "\e614"; 259 | } 260 | .pe-7s-shopbag:before { 261 | content: "\e615"; 262 | } 263 | .pe-7s-share:before { 264 | content: "\e616"; 265 | } 266 | .pe-7s-server:before { 267 | content: "\e617"; 268 | } 269 | .pe-7s-search:before { 270 | content: "\e618"; 271 | } 272 | .pe-7s-film:before { 273 | content: "\e6a5"; 274 | } 275 | .pe-7s-science:before { 276 | content: "\e619"; 277 | } 278 | .pe-7s-disk:before { 279 | content: "\e6a6"; 280 | } 281 | .pe-7s-ribbon:before { 282 | content: "\e61a"; 283 | } 284 | .pe-7s-repeat:before { 285 | content: "\e61b"; 286 | } 287 | .pe-7s-refresh:before { 288 | content: "\e61c"; 289 | } 290 | .pe-7s-add-user:before { 291 | content: "\e6a9"; 292 | } 293 | .pe-7s-refresh-cloud:before { 294 | content: "\e61d"; 295 | } 296 | .pe-7s-paperclip:before { 297 | content: "\e69c"; 298 | } 299 | .pe-7s-radio:before { 300 | content: "\e61e"; 301 | } 302 | .pe-7s-note2:before { 303 | content: "\e69d"; 304 | } 305 | .pe-7s-print:before { 306 | content: "\e61f"; 307 | } 308 | .pe-7s-network:before { 309 | content: "\e69e"; 310 | } 311 | .pe-7s-prev:before { 312 | content: "\e620"; 313 | } 314 | .pe-7s-mute:before { 315 | content: "\e69f"; 316 | } 317 | .pe-7s-power:before { 318 | content: "\e621"; 319 | } 320 | .pe-7s-medal:before { 321 | content: "\e6a0"; 322 | } 323 | .pe-7s-portfolio:before { 324 | content: "\e622"; 325 | } 326 | .pe-7s-like2:before { 327 | content: "\e6a1"; 328 | } 329 | .pe-7s-plus:before { 330 | content: "\e623"; 331 | } 332 | .pe-7s-left-arrow:before { 333 | content: "\e6a2"; 334 | } 335 | .pe-7s-play:before { 336 | content: "\e624"; 337 | } 338 | .pe-7s-key:before { 339 | content: "\e6a3"; 340 | } 341 | .pe-7s-plane:before { 342 | content: "\e625"; 343 | } 344 | .pe-7s-joy:before { 345 | content: "\e6a4"; 346 | } 347 | .pe-7s-photo-gallery:before { 348 | content: "\e626"; 349 | } 350 | .pe-7s-pin:before { 351 | content: "\e69b"; 352 | } 353 | .pe-7s-phone:before { 354 | content: "\e627"; 355 | } 356 | .pe-7s-plug:before { 357 | content: "\e69a"; 358 | } 359 | .pe-7s-pen:before { 360 | content: "\e628"; 361 | } 362 | .pe-7s-right-arrow:before { 363 | content: "\e699"; 364 | } 365 | .pe-7s-paper-plane:before { 366 | content: "\e629"; 367 | } 368 | .pe-7s-delete-user:before { 369 | content: "\e6a7"; 370 | } 371 | .pe-7s-paint:before { 372 | content: "\e62a"; 373 | } 374 | .pe-7s-bottom-arrow:before { 375 | content: "\e6a8"; 376 | } 377 | .pe-7s-notebook:before { 378 | content: "\e62b"; 379 | } 380 | .pe-7s-note:before { 381 | content: "\e62c"; 382 | } 383 | .pe-7s-next:before { 384 | content: "\e62d"; 385 | } 386 | .pe-7s-news-paper:before { 387 | content: "\e62e"; 388 | } 389 | .pe-7s-musiclist:before { 390 | content: "\e62f"; 391 | } 392 | .pe-7s-music:before { 393 | content: "\e630"; 394 | } 395 | .pe-7s-mouse:before { 396 | content: "\e631"; 397 | } 398 | .pe-7s-more:before { 399 | content: "\e632"; 400 | } 401 | .pe-7s-moon:before { 402 | content: "\e633"; 403 | } 404 | .pe-7s-monitor:before { 405 | content: "\e634"; 406 | } 407 | .pe-7s-micro:before { 408 | content: "\e635"; 409 | } 410 | .pe-7s-menu:before { 411 | content: "\e636"; 412 | } 413 | .pe-7s-map:before { 414 | content: "\e637"; 415 | } 416 | .pe-7s-map-marker:before { 417 | content: "\e638"; 418 | } 419 | .pe-7s-mail:before { 420 | content: "\e639"; 421 | } 422 | .pe-7s-mail-open:before { 423 | content: "\e63a"; 424 | } 425 | .pe-7s-mail-open-file:before { 426 | content: "\e63b"; 427 | } 428 | .pe-7s-magnet:before { 429 | content: "\e63c"; 430 | } 431 | .pe-7s-loop:before { 432 | content: "\e63d"; 433 | } 434 | .pe-7s-look:before { 435 | content: "\e63e"; 436 | } 437 | .pe-7s-lock:before { 438 | content: "\e63f"; 439 | } 440 | .pe-7s-lintern:before { 441 | content: "\e640"; 442 | } 443 | .pe-7s-link:before { 444 | content: "\e641"; 445 | } 446 | .pe-7s-like:before { 447 | content: "\e642"; 448 | } 449 | .pe-7s-light:before { 450 | content: "\e643"; 451 | } 452 | .pe-7s-less:before { 453 | content: "\e644"; 454 | } 455 | .pe-7s-keypad:before { 456 | content: "\e645"; 457 | } 458 | .pe-7s-junk:before { 459 | content: "\e646"; 460 | } 461 | .pe-7s-info:before { 462 | content: "\e647"; 463 | } 464 | .pe-7s-home:before { 465 | content: "\e648"; 466 | } 467 | .pe-7s-help2:before { 468 | content: "\e649"; 469 | } 470 | .pe-7s-help1:before { 471 | content: "\e64a"; 472 | } 473 | .pe-7s-graph3:before { 474 | content: "\e64b"; 475 | } 476 | .pe-7s-graph2:before { 477 | content: "\e64c"; 478 | } 479 | .pe-7s-graph1:before { 480 | content: "\e64d"; 481 | } 482 | .pe-7s-graph:before { 483 | content: "\e64e"; 484 | } 485 | .pe-7s-global:before { 486 | content: "\e64f"; 487 | } 488 | .pe-7s-gleam:before { 489 | content: "\e650"; 490 | } 491 | .pe-7s-glasses:before { 492 | content: "\e651"; 493 | } 494 | .pe-7s-gift:before { 495 | content: "\e652"; 496 | } 497 | .pe-7s-folder:before { 498 | content: "\e653"; 499 | } 500 | .pe-7s-flag:before { 501 | content: "\e654"; 502 | } 503 | .pe-7s-filter:before { 504 | content: "\e655"; 505 | } 506 | .pe-7s-file:before { 507 | content: "\e656"; 508 | } 509 | .pe-7s-expand1:before { 510 | content: "\e657"; 511 | } 512 | .pe-7s-exapnd2:before { 513 | content: "\e658"; 514 | } 515 | .pe-7s-edit:before { 516 | content: "\e659"; 517 | } 518 | .pe-7s-drop:before { 519 | content: "\e65a"; 520 | } 521 | .pe-7s-drawer:before { 522 | content: "\e65b"; 523 | } 524 | .pe-7s-download:before { 525 | content: "\e65c"; 526 | } 527 | .pe-7s-display2:before { 528 | content: "\e65d"; 529 | } 530 | .pe-7s-display1:before { 531 | content: "\e65e"; 532 | } 533 | .pe-7s-diskette:before { 534 | content: "\e65f"; 535 | } 536 | .pe-7s-date:before { 537 | content: "\e660"; 538 | } 539 | .pe-7s-cup:before { 540 | content: "\e661"; 541 | } 542 | .pe-7s-culture:before { 543 | content: "\e662"; 544 | } 545 | .pe-7s-crop:before { 546 | content: "\e663"; 547 | } 548 | .pe-7s-credit:before { 549 | content: "\e664"; 550 | } 551 | .pe-7s-copy-file:before { 552 | content: "\e665"; 553 | } 554 | .pe-7s-config:before { 555 | content: "\e666"; 556 | } 557 | .pe-7s-compass:before { 558 | content: "\e667"; 559 | } 560 | .pe-7s-comment:before { 561 | content: "\e668"; 562 | } 563 | .pe-7s-coffee:before { 564 | content: "\e669"; 565 | } 566 | .pe-7s-cloud:before { 567 | content: "\e66a"; 568 | } 569 | .pe-7s-clock:before { 570 | content: "\e66b"; 571 | } 572 | .pe-7s-check:before { 573 | content: "\e66c"; 574 | } 575 | .pe-7s-chat:before { 576 | content: "\e66d"; 577 | } 578 | .pe-7s-cart:before { 579 | content: "\e66e"; 580 | } 581 | .pe-7s-camera:before { 582 | content: "\e66f"; 583 | } 584 | .pe-7s-call:before { 585 | content: "\e670"; 586 | } 587 | .pe-7s-calculator:before { 588 | content: "\e671"; 589 | } 590 | .pe-7s-browser:before { 591 | content: "\e672"; 592 | } 593 | .pe-7s-box2:before { 594 | content: "\e673"; 595 | } 596 | .pe-7s-box1:before { 597 | content: "\e674"; 598 | } 599 | .pe-7s-bookmarks:before { 600 | content: "\e675"; 601 | } 602 | .pe-7s-bicycle:before { 603 | content: "\e676"; 604 | } 605 | .pe-7s-bell:before { 606 | content: "\e677"; 607 | } 608 | .pe-7s-battery:before { 609 | content: "\e678"; 610 | } 611 | .pe-7s-ball:before { 612 | content: "\e679"; 613 | } 614 | .pe-7s-back:before { 615 | content: "\e67a"; 616 | } 617 | .pe-7s-attention:before { 618 | content: "\e67b"; 619 | } 620 | .pe-7s-anchor:before { 621 | content: "\e67c"; 622 | } 623 | .pe-7s-albums:before { 624 | content: "\e67d"; 625 | } 626 | .pe-7s-alarm:before { 627 | content: "\e67e"; 628 | } 629 | .pe-7s-airplay:before { 630 | content: "\e67f"; 631 | } 632 | -------------------------------------------------------------------------------- /docs/styles.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([2,4],{ 2 | 3 | /***/ 156: 4 | /***/ (function(module, exports, __webpack_require__) { 5 | 6 | exports = module.exports = __webpack_require__(16)(); 7 | // imports 8 | 9 | 10 | // module 11 | exports.push([module.i, "/*!\n * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)\n */@font-face{font-family:'FontAwesome';src:url(" + __webpack_require__(162) + ");src:url(" + __webpack_require__(161) + "?#iefix&v=4.7.0) format('embedded-opentype'),url(" + __webpack_require__(199) + ") format('woff2'),url(" + __webpack_require__(200) + ") format('woff'),url(" + __webpack_require__(198) + ") format('truetype'),url(" + __webpack_require__(163) + "#fontawesomeregular) format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\";-webkit-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{-webkit-filter:none;filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:\"\\F000\"}.fa-music:before{content:\"\\F001\"}.fa-search:before{content:\"\\F002\"}.fa-envelope-o:before{content:\"\\F003\"}.fa-heart:before{content:\"\\F004\"}.fa-star:before{content:\"\\F005\"}.fa-star-o:before{content:\"\\F006\"}.fa-user:before{content:\"\\F007\"}.fa-film:before{content:\"\\F008\"}.fa-th-large:before{content:\"\\F009\"}.fa-th:before{content:\"\\F00A\"}.fa-th-list:before{content:\"\\F00B\"}.fa-check:before{content:\"\\F00C\"}.fa-remove:before,.fa-close:before,.fa-times:before{content:\"\\F00D\"}.fa-search-plus:before{content:\"\\F00E\"}.fa-search-minus:before{content:\"\\F010\"}.fa-power-off:before{content:\"\\F011\"}.fa-signal:before{content:\"\\F012\"}.fa-gear:before,.fa-cog:before{content:\"\\F013\"}.fa-trash-o:before{content:\"\\F014\"}.fa-home:before{content:\"\\F015\"}.fa-file-o:before{content:\"\\F016\"}.fa-clock-o:before{content:\"\\F017\"}.fa-road:before{content:\"\\F018\"}.fa-download:before{content:\"\\F019\"}.fa-arrow-circle-o-down:before{content:\"\\F01A\"}.fa-arrow-circle-o-up:before{content:\"\\F01B\"}.fa-inbox:before{content:\"\\F01C\"}.fa-play-circle-o:before{content:\"\\F01D\"}.fa-rotate-right:before,.fa-repeat:before{content:\"\\F01E\"}.fa-refresh:before{content:\"\\F021\"}.fa-list-alt:before{content:\"\\F022\"}.fa-lock:before{content:\"\\F023\"}.fa-flag:before{content:\"\\F024\"}.fa-headphones:before{content:\"\\F025\"}.fa-volume-off:before{content:\"\\F026\"}.fa-volume-down:before{content:\"\\F027\"}.fa-volume-up:before{content:\"\\F028\"}.fa-qrcode:before{content:\"\\F029\"}.fa-barcode:before{content:\"\\F02A\"}.fa-tag:before{content:\"\\F02B\"}.fa-tags:before{content:\"\\F02C\"}.fa-book:before{content:\"\\F02D\"}.fa-bookmark:before{content:\"\\F02E\"}.fa-print:before{content:\"\\F02F\"}.fa-camera:before{content:\"\\F030\"}.fa-font:before{content:\"\\F031\"}.fa-bold:before{content:\"\\F032\"}.fa-italic:before{content:\"\\F033\"}.fa-text-height:before{content:\"\\F034\"}.fa-text-width:before{content:\"\\F035\"}.fa-align-left:before{content:\"\\F036\"}.fa-align-center:before{content:\"\\F037\"}.fa-align-right:before{content:\"\\F038\"}.fa-align-justify:before{content:\"\\F039\"}.fa-list:before{content:\"\\F03A\"}.fa-dedent:before,.fa-outdent:before{content:\"\\F03B\"}.fa-indent:before{content:\"\\F03C\"}.fa-video-camera:before{content:\"\\F03D\"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:\"\\F03E\"}.fa-pencil:before{content:\"\\F040\"}.fa-map-marker:before{content:\"\\F041\"}.fa-adjust:before{content:\"\\F042\"}.fa-tint:before{content:\"\\F043\"}.fa-edit:before,.fa-pencil-square-o:before{content:\"\\F044\"}.fa-share-square-o:before{content:\"\\F045\"}.fa-check-square-o:before{content:\"\\F046\"}.fa-arrows:before{content:\"\\F047\"}.fa-step-backward:before{content:\"\\F048\"}.fa-fast-backward:before{content:\"\\F049\"}.fa-backward:before{content:\"\\F04A\"}.fa-play:before{content:\"\\F04B\"}.fa-pause:before{content:\"\\F04C\"}.fa-stop:before{content:\"\\F04D\"}.fa-forward:before{content:\"\\F04E\"}.fa-fast-forward:before{content:\"\\F050\"}.fa-step-forward:before{content:\"\\F051\"}.fa-eject:before{content:\"\\F052\"}.fa-chevron-left:before{content:\"\\F053\"}.fa-chevron-right:before{content:\"\\F054\"}.fa-plus-circle:before{content:\"\\F055\"}.fa-minus-circle:before{content:\"\\F056\"}.fa-times-circle:before{content:\"\\F057\"}.fa-check-circle:before{content:\"\\F058\"}.fa-question-circle:before{content:\"\\F059\"}.fa-info-circle:before{content:\"\\F05A\"}.fa-crosshairs:before{content:\"\\F05B\"}.fa-times-circle-o:before{content:\"\\F05C\"}.fa-check-circle-o:before{content:\"\\F05D\"}.fa-ban:before{content:\"\\F05E\"}.fa-arrow-left:before{content:\"\\F060\"}.fa-arrow-right:before{content:\"\\F061\"}.fa-arrow-up:before{content:\"\\F062\"}.fa-arrow-down:before{content:\"\\F063\"}.fa-mail-forward:before,.fa-share:before{content:\"\\F064\"}.fa-expand:before{content:\"\\F065\"}.fa-compress:before{content:\"\\F066\"}.fa-plus:before{content:\"\\F067\"}.fa-minus:before{content:\"\\F068\"}.fa-asterisk:before{content:\"\\F069\"}.fa-exclamation-circle:before{content:\"\\F06A\"}.fa-gift:before{content:\"\\F06B\"}.fa-leaf:before{content:\"\\F06C\"}.fa-fire:before{content:\"\\F06D\"}.fa-eye:before{content:\"\\F06E\"}.fa-eye-slash:before{content:\"\\F070\"}.fa-warning:before,.fa-exclamation-triangle:before{content:\"\\F071\"}.fa-plane:before{content:\"\\F072\"}.fa-calendar:before{content:\"\\F073\"}.fa-random:before{content:\"\\F074\"}.fa-comment:before{content:\"\\F075\"}.fa-magnet:before{content:\"\\F076\"}.fa-chevron-up:before{content:\"\\F077\"}.fa-chevron-down:before{content:\"\\F078\"}.fa-retweet:before{content:\"\\F079\"}.fa-shopping-cart:before{content:\"\\F07A\"}.fa-folder:before{content:\"\\F07B\"}.fa-folder-open:before{content:\"\\F07C\"}.fa-arrows-v:before{content:\"\\F07D\"}.fa-arrows-h:before{content:\"\\F07E\"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:\"\\F080\"}.fa-twitter-square:before{content:\"\\F081\"}.fa-facebook-square:before{content:\"\\F082\"}.fa-camera-retro:before{content:\"\\F083\"}.fa-key:before{content:\"\\F084\"}.fa-gears:before,.fa-cogs:before{content:\"\\F085\"}.fa-comments:before{content:\"\\F086\"}.fa-thumbs-o-up:before{content:\"\\F087\"}.fa-thumbs-o-down:before{content:\"\\F088\"}.fa-star-half:before{content:\"\\F089\"}.fa-heart-o:before{content:\"\\F08A\"}.fa-sign-out:before{content:\"\\F08B\"}.fa-linkedin-square:before{content:\"\\F08C\"}.fa-thumb-tack:before{content:\"\\F08D\"}.fa-external-link:before{content:\"\\F08E\"}.fa-sign-in:before{content:\"\\F090\"}.fa-trophy:before{content:\"\\F091\"}.fa-github-square:before{content:\"\\F092\"}.fa-upload:before{content:\"\\F093\"}.fa-lemon-o:before{content:\"\\F094\"}.fa-phone:before{content:\"\\F095\"}.fa-square-o:before{content:\"\\F096\"}.fa-bookmark-o:before{content:\"\\F097\"}.fa-phone-square:before{content:\"\\F098\"}.fa-twitter:before{content:\"\\F099\"}.fa-facebook-f:before,.fa-facebook:before{content:\"\\F09A\"}.fa-github:before{content:\"\\F09B\"}.fa-unlock:before{content:\"\\F09C\"}.fa-credit-card:before{content:\"\\F09D\"}.fa-feed:before,.fa-rss:before{content:\"\\F09E\"}.fa-hdd-o:before{content:\"\\F0A0\"}.fa-bullhorn:before{content:\"\\F0A1\"}.fa-bell:before{content:\"\\F0F3\"}.fa-certificate:before{content:\"\\F0A3\"}.fa-hand-o-right:before{content:\"\\F0A4\"}.fa-hand-o-left:before{content:\"\\F0A5\"}.fa-hand-o-up:before{content:\"\\F0A6\"}.fa-hand-o-down:before{content:\"\\F0A7\"}.fa-arrow-circle-left:before{content:\"\\F0A8\"}.fa-arrow-circle-right:before{content:\"\\F0A9\"}.fa-arrow-circle-up:before{content:\"\\F0AA\"}.fa-arrow-circle-down:before{content:\"\\F0AB\"}.fa-globe:before{content:\"\\F0AC\"}.fa-wrench:before{content:\"\\F0AD\"}.fa-tasks:before{content:\"\\F0AE\"}.fa-filter:before{content:\"\\F0B0\"}.fa-briefcase:before{content:\"\\F0B1\"}.fa-arrows-alt:before{content:\"\\F0B2\"}.fa-group:before,.fa-users:before{content:\"\\F0C0\"}.fa-chain:before,.fa-link:before{content:\"\\F0C1\"}.fa-cloud:before{content:\"\\F0C2\"}.fa-flask:before{content:\"\\F0C3\"}.fa-cut:before,.fa-scissors:before{content:\"\\F0C4\"}.fa-copy:before,.fa-files-o:before{content:\"\\F0C5\"}.fa-paperclip:before{content:\"\\F0C6\"}.fa-save:before,.fa-floppy-o:before{content:\"\\F0C7\"}.fa-square:before{content:\"\\F0C8\"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:\"\\F0C9\"}.fa-list-ul:before{content:\"\\F0CA\"}.fa-list-ol:before{content:\"\\F0CB\"}.fa-strikethrough:before{content:\"\\F0CC\"}.fa-underline:before{content:\"\\F0CD\"}.fa-table:before{content:\"\\F0CE\"}.fa-magic:before{content:\"\\F0D0\"}.fa-truck:before{content:\"\\F0D1\"}.fa-pinterest:before{content:\"\\F0D2\"}.fa-pinterest-square:before{content:\"\\F0D3\"}.fa-google-plus-square:before{content:\"\\F0D4\"}.fa-google-plus:before{content:\"\\F0D5\"}.fa-money:before{content:\"\\F0D6\"}.fa-caret-down:before{content:\"\\F0D7\"}.fa-caret-up:before{content:\"\\F0D8\"}.fa-caret-left:before{content:\"\\F0D9\"}.fa-caret-right:before{content:\"\\F0DA\"}.fa-columns:before{content:\"\\F0DB\"}.fa-unsorted:before,.fa-sort:before{content:\"\\F0DC\"}.fa-sort-down:before,.fa-sort-desc:before{content:\"\\F0DD\"}.fa-sort-up:before,.fa-sort-asc:before{content:\"\\F0DE\"}.fa-envelope:before{content:\"\\F0E0\"}.fa-linkedin:before{content:\"\\F0E1\"}.fa-rotate-left:before,.fa-undo:before{content:\"\\F0E2\"}.fa-legal:before,.fa-gavel:before{content:\"\\F0E3\"}.fa-dashboard:before,.fa-tachometer:before{content:\"\\F0E4\"}.fa-comment-o:before{content:\"\\F0E5\"}.fa-comments-o:before{content:\"\\F0E6\"}.fa-flash:before,.fa-bolt:before{content:\"\\F0E7\"}.fa-sitemap:before{content:\"\\F0E8\"}.fa-umbrella:before{content:\"\\F0E9\"}.fa-paste:before,.fa-clipboard:before{content:\"\\F0EA\"}.fa-lightbulb-o:before{content:\"\\F0EB\"}.fa-exchange:before{content:\"\\F0EC\"}.fa-cloud-download:before{content:\"\\F0ED\"}.fa-cloud-upload:before{content:\"\\F0EE\"}.fa-user-md:before{content:\"\\F0F0\"}.fa-stethoscope:before{content:\"\\F0F1\"}.fa-suitcase:before{content:\"\\F0F2\"}.fa-bell-o:before{content:\"\\F0A2\"}.fa-coffee:before{content:\"\\F0F4\"}.fa-cutlery:before{content:\"\\F0F5\"}.fa-file-text-o:before{content:\"\\F0F6\"}.fa-building-o:before{content:\"\\F0F7\"}.fa-hospital-o:before{content:\"\\F0F8\"}.fa-ambulance:before{content:\"\\F0F9\"}.fa-medkit:before{content:\"\\F0FA\"}.fa-fighter-jet:before{content:\"\\F0FB\"}.fa-beer:before{content:\"\\F0FC\"}.fa-h-square:before{content:\"\\F0FD\"}.fa-plus-square:before{content:\"\\F0FE\"}.fa-angle-double-left:before{content:\"\\F100\"}.fa-angle-double-right:before{content:\"\\F101\"}.fa-angle-double-up:before{content:\"\\F102\"}.fa-angle-double-down:before{content:\"\\F103\"}.fa-angle-left:before{content:\"\\F104\"}.fa-angle-right:before{content:\"\\F105\"}.fa-angle-up:before{content:\"\\F106\"}.fa-angle-down:before{content:\"\\F107\"}.fa-desktop:before{content:\"\\F108\"}.fa-laptop:before{content:\"\\F109\"}.fa-tablet:before{content:\"\\F10A\"}.fa-mobile-phone:before,.fa-mobile:before{content:\"\\F10B\"}.fa-circle-o:before{content:\"\\F10C\"}.fa-quote-left:before{content:\"\\F10D\"}.fa-quote-right:before{content:\"\\F10E\"}.fa-spinner:before{content:\"\\F110\"}.fa-circle:before{content:\"\\F111\"}.fa-mail-reply:before,.fa-reply:before{content:\"\\F112\"}.fa-github-alt:before{content:\"\\F113\"}.fa-folder-o:before{content:\"\\F114\"}.fa-folder-open-o:before{content:\"\\F115\"}.fa-smile-o:before{content:\"\\F118\"}.fa-frown-o:before{content:\"\\F119\"}.fa-meh-o:before{content:\"\\F11A\"}.fa-gamepad:before{content:\"\\F11B\"}.fa-keyboard-o:before{content:\"\\F11C\"}.fa-flag-o:before{content:\"\\F11D\"}.fa-flag-checkered:before{content:\"\\F11E\"}.fa-terminal:before{content:\"\\F120\"}.fa-code:before{content:\"\\F121\"}.fa-mail-reply-all:before,.fa-reply-all:before{content:\"\\F122\"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:\"\\F123\"}.fa-location-arrow:before{content:\"\\F124\"}.fa-crop:before{content:\"\\F125\"}.fa-code-fork:before{content:\"\\F126\"}.fa-unlink:before,.fa-chain-broken:before{content:\"\\F127\"}.fa-question:before{content:\"\\F128\"}.fa-info:before{content:\"\\F129\"}.fa-exclamation:before{content:\"\\F12A\"}.fa-superscript:before{content:\"\\F12B\"}.fa-subscript:before{content:\"\\F12C\"}.fa-eraser:before{content:\"\\F12D\"}.fa-puzzle-piece:before{content:\"\\F12E\"}.fa-microphone:before{content:\"\\F130\"}.fa-microphone-slash:before{content:\"\\F131\"}.fa-shield:before{content:\"\\F132\"}.fa-calendar-o:before{content:\"\\F133\"}.fa-fire-extinguisher:before{content:\"\\F134\"}.fa-rocket:before{content:\"\\F135\"}.fa-maxcdn:before{content:\"\\F136\"}.fa-chevron-circle-left:before{content:\"\\F137\"}.fa-chevron-circle-right:before{content:\"\\F138\"}.fa-chevron-circle-up:before{content:\"\\F139\"}.fa-chevron-circle-down:before{content:\"\\F13A\"}.fa-html5:before{content:\"\\F13B\"}.fa-css3:before{content:\"\\F13C\"}.fa-anchor:before{content:\"\\F13D\"}.fa-unlock-alt:before{content:\"\\F13E\"}.fa-bullseye:before{content:\"\\F140\"}.fa-ellipsis-h:before{content:\"\\F141\"}.fa-ellipsis-v:before{content:\"\\F142\"}.fa-rss-square:before{content:\"\\F143\"}.fa-play-circle:before{content:\"\\F144\"}.fa-ticket:before{content:\"\\F145\"}.fa-minus-square:before{content:\"\\F146\"}.fa-minus-square-o:before{content:\"\\F147\"}.fa-level-up:before{content:\"\\F148\"}.fa-level-down:before{content:\"\\F149\"}.fa-check-square:before{content:\"\\F14A\"}.fa-pencil-square:before{content:\"\\F14B\"}.fa-external-link-square:before{content:\"\\F14C\"}.fa-share-square:before{content:\"\\F14D\"}.fa-compass:before{content:\"\\F14E\"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:\"\\F150\"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:\"\\F151\"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:\"\\F152\"}.fa-euro:before,.fa-eur:before{content:\"\\F153\"}.fa-gbp:before{content:\"\\F154\"}.fa-dollar:before,.fa-usd:before{content:\"\\F155\"}.fa-rupee:before,.fa-inr:before{content:\"\\F156\"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:\"\\F157\"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:\"\\F158\"}.fa-won:before,.fa-krw:before{content:\"\\F159\"}.fa-bitcoin:before,.fa-btc:before{content:\"\\F15A\"}.fa-file:before{content:\"\\F15B\"}.fa-file-text:before{content:\"\\F15C\"}.fa-sort-alpha-asc:before{content:\"\\F15D\"}.fa-sort-alpha-desc:before{content:\"\\F15E\"}.fa-sort-amount-asc:before{content:\"\\F160\"}.fa-sort-amount-desc:before{content:\"\\F161\"}.fa-sort-numeric-asc:before{content:\"\\F162\"}.fa-sort-numeric-desc:before{content:\"\\F163\"}.fa-thumbs-up:before{content:\"\\F164\"}.fa-thumbs-down:before{content:\"\\F165\"}.fa-youtube-square:before{content:\"\\F166\"}.fa-youtube:before{content:\"\\F167\"}.fa-xing:before{content:\"\\F168\"}.fa-xing-square:before{content:\"\\F169\"}.fa-youtube-play:before{content:\"\\F16A\"}.fa-dropbox:before{content:\"\\F16B\"}.fa-stack-overflow:before{content:\"\\F16C\"}.fa-instagram:before{content:\"\\F16D\"}.fa-flickr:before{content:\"\\F16E\"}.fa-adn:before{content:\"\\F170\"}.fa-bitbucket:before{content:\"\\F171\"}.fa-bitbucket-square:before{content:\"\\F172\"}.fa-tumblr:before{content:\"\\F173\"}.fa-tumblr-square:before{content:\"\\F174\"}.fa-long-arrow-down:before{content:\"\\F175\"}.fa-long-arrow-up:before{content:\"\\F176\"}.fa-long-arrow-left:before{content:\"\\F177\"}.fa-long-arrow-right:before{content:\"\\F178\"}.fa-apple:before{content:\"\\F179\"}.fa-windows:before{content:\"\\F17A\"}.fa-android:before{content:\"\\F17B\"}.fa-linux:before{content:\"\\F17C\"}.fa-dribbble:before{content:\"\\F17D\"}.fa-skype:before{content:\"\\F17E\"}.fa-foursquare:before{content:\"\\F180\"}.fa-trello:before{content:\"\\F181\"}.fa-female:before{content:\"\\F182\"}.fa-male:before{content:\"\\F183\"}.fa-gittip:before,.fa-gratipay:before{content:\"\\F184\"}.fa-sun-o:before{content:\"\\F185\"}.fa-moon-o:before{content:\"\\F186\"}.fa-archive:before{content:\"\\F187\"}.fa-bug:before{content:\"\\F188\"}.fa-vk:before{content:\"\\F189\"}.fa-weibo:before{content:\"\\F18A\"}.fa-renren:before{content:\"\\F18B\"}.fa-pagelines:before{content:\"\\F18C\"}.fa-stack-exchange:before{content:\"\\F18D\"}.fa-arrow-circle-o-right:before{content:\"\\F18E\"}.fa-arrow-circle-o-left:before{content:\"\\F190\"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:\"\\F191\"}.fa-dot-circle-o:before{content:\"\\F192\"}.fa-wheelchair:before{content:\"\\F193\"}.fa-vimeo-square:before{content:\"\\F194\"}.fa-turkish-lira:before,.fa-try:before{content:\"\\F195\"}.fa-plus-square-o:before{content:\"\\F196\"}.fa-space-shuttle:before{content:\"\\F197\"}.fa-slack:before{content:\"\\F198\"}.fa-envelope-square:before{content:\"\\F199\"}.fa-wordpress:before{content:\"\\F19A\"}.fa-openid:before{content:\"\\F19B\"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:\"\\F19C\"}.fa-mortar-board:before,.fa-graduation-cap:before{content:\"\\F19D\"}.fa-yahoo:before{content:\"\\F19E\"}.fa-google:before{content:\"\\F1A0\"}.fa-reddit:before{content:\"\\F1A1\"}.fa-reddit-square:before{content:\"\\F1A2\"}.fa-stumbleupon-circle:before{content:\"\\F1A3\"}.fa-stumbleupon:before{content:\"\\F1A4\"}.fa-delicious:before{content:\"\\F1A5\"}.fa-digg:before{content:\"\\F1A6\"}.fa-pied-piper-pp:before{content:\"\\F1A7\"}.fa-pied-piper-alt:before{content:\"\\F1A8\"}.fa-drupal:before{content:\"\\F1A9\"}.fa-joomla:before{content:\"\\F1AA\"}.fa-language:before{content:\"\\F1AB\"}.fa-fax:before{content:\"\\F1AC\"}.fa-building:before{content:\"\\F1AD\"}.fa-child:before{content:\"\\F1AE\"}.fa-paw:before{content:\"\\F1B0\"}.fa-spoon:before{content:\"\\F1B1\"}.fa-cube:before{content:\"\\F1B2\"}.fa-cubes:before{content:\"\\F1B3\"}.fa-behance:before{content:\"\\F1B4\"}.fa-behance-square:before{content:\"\\F1B5\"}.fa-steam:before{content:\"\\F1B6\"}.fa-steam-square:before{content:\"\\F1B7\"}.fa-recycle:before{content:\"\\F1B8\"}.fa-automobile:before,.fa-car:before{content:\"\\F1B9\"}.fa-cab:before,.fa-taxi:before{content:\"\\F1BA\"}.fa-tree:before{content:\"\\F1BB\"}.fa-spotify:before{content:\"\\F1BC\"}.fa-deviantart:before{content:\"\\F1BD\"}.fa-soundcloud:before{content:\"\\F1BE\"}.fa-database:before{content:\"\\F1C0\"}.fa-file-pdf-o:before{content:\"\\F1C1\"}.fa-file-word-o:before{content:\"\\F1C2\"}.fa-file-excel-o:before{content:\"\\F1C3\"}.fa-file-powerpoint-o:before{content:\"\\F1C4\"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:\"\\F1C5\"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:\"\\F1C6\"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:\"\\F1C7\"}.fa-file-movie-o:before,.fa-file-video-o:before{content:\"\\F1C8\"}.fa-file-code-o:before{content:\"\\F1C9\"}.fa-vine:before{content:\"\\F1CA\"}.fa-codepen:before{content:\"\\F1CB\"}.fa-jsfiddle:before{content:\"\\F1CC\"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:\"\\F1CD\"}.fa-circle-o-notch:before{content:\"\\F1CE\"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:\"\\F1D0\"}.fa-ge:before,.fa-empire:before{content:\"\\F1D1\"}.fa-git-square:before{content:\"\\F1D2\"}.fa-git:before{content:\"\\F1D3\"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:\"\\F1D4\"}.fa-tencent-weibo:before{content:\"\\F1D5\"}.fa-qq:before{content:\"\\F1D6\"}.fa-wechat:before,.fa-weixin:before{content:\"\\F1D7\"}.fa-send:before,.fa-paper-plane:before{content:\"\\F1D8\"}.fa-send-o:before,.fa-paper-plane-o:before{content:\"\\F1D9\"}.fa-history:before{content:\"\\F1DA\"}.fa-circle-thin:before{content:\"\\F1DB\"}.fa-header:before{content:\"\\F1DC\"}.fa-paragraph:before{content:\"\\F1DD\"}.fa-sliders:before{content:\"\\F1DE\"}.fa-share-alt:before{content:\"\\F1E0\"}.fa-share-alt-square:before{content:\"\\F1E1\"}.fa-bomb:before{content:\"\\F1E2\"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:\"\\F1E3\"}.fa-tty:before{content:\"\\F1E4\"}.fa-binoculars:before{content:\"\\F1E5\"}.fa-plug:before{content:\"\\F1E6\"}.fa-slideshare:before{content:\"\\F1E7\"}.fa-twitch:before{content:\"\\F1E8\"}.fa-yelp:before{content:\"\\F1E9\"}.fa-newspaper-o:before{content:\"\\F1EA\"}.fa-wifi:before{content:\"\\F1EB\"}.fa-calculator:before{content:\"\\F1EC\"}.fa-paypal:before{content:\"\\F1ED\"}.fa-google-wallet:before{content:\"\\F1EE\"}.fa-cc-visa:before{content:\"\\F1F0\"}.fa-cc-mastercard:before{content:\"\\F1F1\"}.fa-cc-discover:before{content:\"\\F1F2\"}.fa-cc-amex:before{content:\"\\F1F3\"}.fa-cc-paypal:before{content:\"\\F1F4\"}.fa-cc-stripe:before{content:\"\\F1F5\"}.fa-bell-slash:before{content:\"\\F1F6\"}.fa-bell-slash-o:before{content:\"\\F1F7\"}.fa-trash:before{content:\"\\F1F8\"}.fa-copyright:before{content:\"\\F1F9\"}.fa-at:before{content:\"\\F1FA\"}.fa-eyedropper:before{content:\"\\F1FB\"}.fa-paint-brush:before{content:\"\\F1FC\"}.fa-birthday-cake:before{content:\"\\F1FD\"}.fa-area-chart:before{content:\"\\F1FE\"}.fa-pie-chart:before{content:\"\\F200\"}.fa-line-chart:before{content:\"\\F201\"}.fa-lastfm:before{content:\"\\F202\"}.fa-lastfm-square:before{content:\"\\F203\"}.fa-toggle-off:before{content:\"\\F204\"}.fa-toggle-on:before{content:\"\\F205\"}.fa-bicycle:before{content:\"\\F206\"}.fa-bus:before{content:\"\\F207\"}.fa-ioxhost:before{content:\"\\F208\"}.fa-angellist:before{content:\"\\F209\"}.fa-cc:before{content:\"\\F20A\"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:\"\\F20B\"}.fa-meanpath:before{content:\"\\F20C\"}.fa-buysellads:before{content:\"\\F20D\"}.fa-connectdevelop:before{content:\"\\F20E\"}.fa-dashcube:before{content:\"\\F210\"}.fa-forumbee:before{content:\"\\F211\"}.fa-leanpub:before{content:\"\\F212\"}.fa-sellsy:before{content:\"\\F213\"}.fa-shirtsinbulk:before{content:\"\\F214\"}.fa-simplybuilt:before{content:\"\\F215\"}.fa-skyatlas:before{content:\"\\F216\"}.fa-cart-plus:before{content:\"\\F217\"}.fa-cart-arrow-down:before{content:\"\\F218\"}.fa-diamond:before{content:\"\\F219\"}.fa-ship:before{content:\"\\F21A\"}.fa-user-secret:before{content:\"\\F21B\"}.fa-motorcycle:before{content:\"\\F21C\"}.fa-street-view:before{content:\"\\F21D\"}.fa-heartbeat:before{content:\"\\F21E\"}.fa-venus:before{content:\"\\F221\"}.fa-mars:before{content:\"\\F222\"}.fa-mercury:before{content:\"\\F223\"}.fa-intersex:before,.fa-transgender:before{content:\"\\F224\"}.fa-transgender-alt:before{content:\"\\F225\"}.fa-venus-double:before{content:\"\\F226\"}.fa-mars-double:before{content:\"\\F227\"}.fa-venus-mars:before{content:\"\\F228\"}.fa-mars-stroke:before{content:\"\\F229\"}.fa-mars-stroke-v:before{content:\"\\F22A\"}.fa-mars-stroke-h:before{content:\"\\F22B\"}.fa-neuter:before{content:\"\\F22C\"}.fa-genderless:before{content:\"\\F22D\"}.fa-facebook-official:before{content:\"\\F230\"}.fa-pinterest-p:before{content:\"\\F231\"}.fa-whatsapp:before{content:\"\\F232\"}.fa-server:before{content:\"\\F233\"}.fa-user-plus:before{content:\"\\F234\"}.fa-user-times:before{content:\"\\F235\"}.fa-hotel:before,.fa-bed:before{content:\"\\F236\"}.fa-viacoin:before{content:\"\\F237\"}.fa-train:before{content:\"\\F238\"}.fa-subway:before{content:\"\\F239\"}.fa-medium:before{content:\"\\F23A\"}.fa-yc:before,.fa-y-combinator:before{content:\"\\F23B\"}.fa-optin-monster:before{content:\"\\F23C\"}.fa-opencart:before{content:\"\\F23D\"}.fa-expeditedssl:before{content:\"\\F23E\"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:\"\\F240\"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:\"\\F241\"}.fa-battery-2:before,.fa-battery-half:before{content:\"\\F242\"}.fa-battery-1:before,.fa-battery-quarter:before{content:\"\\F243\"}.fa-battery-0:before,.fa-battery-empty:before{content:\"\\F244\"}.fa-mouse-pointer:before{content:\"\\F245\"}.fa-i-cursor:before{content:\"\\F246\"}.fa-object-group:before{content:\"\\F247\"}.fa-object-ungroup:before{content:\"\\F248\"}.fa-sticky-note:before{content:\"\\F249\"}.fa-sticky-note-o:before{content:\"\\F24A\"}.fa-cc-jcb:before{content:\"\\F24B\"}.fa-cc-diners-club:before{content:\"\\F24C\"}.fa-clone:before{content:\"\\F24D\"}.fa-balance-scale:before{content:\"\\F24E\"}.fa-hourglass-o:before{content:\"\\F250\"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:\"\\F251\"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:\"\\F252\"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:\"\\F253\"}.fa-hourglass:before{content:\"\\F254\"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:\"\\F255\"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:\"\\F256\"}.fa-hand-scissors-o:before{content:\"\\F257\"}.fa-hand-lizard-o:before{content:\"\\F258\"}.fa-hand-spock-o:before{content:\"\\F259\"}.fa-hand-pointer-o:before{content:\"\\F25A\"}.fa-hand-peace-o:before{content:\"\\F25B\"}.fa-trademark:before{content:\"\\F25C\"}.fa-registered:before{content:\"\\F25D\"}.fa-creative-commons:before{content:\"\\F25E\"}.fa-gg:before{content:\"\\F260\"}.fa-gg-circle:before{content:\"\\F261\"}.fa-tripadvisor:before{content:\"\\F262\"}.fa-odnoklassniki:before{content:\"\\F263\"}.fa-odnoklassniki-square:before{content:\"\\F264\"}.fa-get-pocket:before{content:\"\\F265\"}.fa-wikipedia-w:before{content:\"\\F266\"}.fa-safari:before{content:\"\\F267\"}.fa-chrome:before{content:\"\\F268\"}.fa-firefox:before{content:\"\\F269\"}.fa-opera:before{content:\"\\F26A\"}.fa-internet-explorer:before{content:\"\\F26B\"}.fa-tv:before,.fa-television:before{content:\"\\F26C\"}.fa-contao:before{content:\"\\F26D\"}.fa-500px:before{content:\"\\F26E\"}.fa-amazon:before{content:\"\\F270\"}.fa-calendar-plus-o:before{content:\"\\F271\"}.fa-calendar-minus-o:before{content:\"\\F272\"}.fa-calendar-times-o:before{content:\"\\F273\"}.fa-calendar-check-o:before{content:\"\\F274\"}.fa-industry:before{content:\"\\F275\"}.fa-map-pin:before{content:\"\\F276\"}.fa-map-signs:before{content:\"\\F277\"}.fa-map-o:before{content:\"\\F278\"}.fa-map:before{content:\"\\F279\"}.fa-commenting:before{content:\"\\F27A\"}.fa-commenting-o:before{content:\"\\F27B\"}.fa-houzz:before{content:\"\\F27C\"}.fa-vimeo:before{content:\"\\F27D\"}.fa-black-tie:before{content:\"\\F27E\"}.fa-fonticons:before{content:\"\\F280\"}.fa-reddit-alien:before{content:\"\\F281\"}.fa-edge:before{content:\"\\F282\"}.fa-credit-card-alt:before{content:\"\\F283\"}.fa-codiepie:before{content:\"\\F284\"}.fa-modx:before{content:\"\\F285\"}.fa-fort-awesome:before{content:\"\\F286\"}.fa-usb:before{content:\"\\F287\"}.fa-product-hunt:before{content:\"\\F288\"}.fa-mixcloud:before{content:\"\\F289\"}.fa-scribd:before{content:\"\\F28A\"}.fa-pause-circle:before{content:\"\\F28B\"}.fa-pause-circle-o:before{content:\"\\F28C\"}.fa-stop-circle:before{content:\"\\F28D\"}.fa-stop-circle-o:before{content:\"\\F28E\"}.fa-shopping-bag:before{content:\"\\F290\"}.fa-shopping-basket:before{content:\"\\F291\"}.fa-hashtag:before{content:\"\\F292\"}.fa-bluetooth:before{content:\"\\F293\"}.fa-bluetooth-b:before{content:\"\\F294\"}.fa-percent:before{content:\"\\F295\"}.fa-gitlab:before{content:\"\\F296\"}.fa-wpbeginner:before{content:\"\\F297\"}.fa-wpforms:before{content:\"\\F298\"}.fa-envira:before{content:\"\\F299\"}.fa-universal-access:before{content:\"\\F29A\"}.fa-wheelchair-alt:before{content:\"\\F29B\"}.fa-question-circle-o:before{content:\"\\F29C\"}.fa-blind:before{content:\"\\F29D\"}.fa-audio-description:before{content:\"\\F29E\"}.fa-volume-control-phone:before{content:\"\\F2A0\"}.fa-braille:before{content:\"\\F2A1\"}.fa-assistive-listening-systems:before{content:\"\\F2A2\"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:\"\\F2A3\"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:\"\\F2A4\"}.fa-glide:before{content:\"\\F2A5\"}.fa-glide-g:before{content:\"\\F2A6\"}.fa-signing:before,.fa-sign-language:before{content:\"\\F2A7\"}.fa-low-vision:before{content:\"\\F2A8\"}.fa-viadeo:before{content:\"\\F2A9\"}.fa-viadeo-square:before{content:\"\\F2AA\"}.fa-snapchat:before{content:\"\\F2AB\"}.fa-snapchat-ghost:before{content:\"\\F2AC\"}.fa-snapchat-square:before{content:\"\\F2AD\"}.fa-pied-piper:before{content:\"\\F2AE\"}.fa-first-order:before{content:\"\\F2B0\"}.fa-yoast:before{content:\"\\F2B1\"}.fa-themeisle:before{content:\"\\F2B2\"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:\"\\F2B3\"}.fa-fa:before,.fa-font-awesome:before{content:\"\\F2B4\"}.fa-handshake-o:before{content:\"\\F2B5\"}.fa-envelope-open:before{content:\"\\F2B6\"}.fa-envelope-open-o:before{content:\"\\F2B7\"}.fa-linode:before{content:\"\\F2B8\"}.fa-address-book:before{content:\"\\F2B9\"}.fa-address-book-o:before{content:\"\\F2BA\"}.fa-vcard:before,.fa-address-card:before{content:\"\\F2BB\"}.fa-vcard-o:before,.fa-address-card-o:before{content:\"\\F2BC\"}.fa-user-circle:before{content:\"\\F2BD\"}.fa-user-circle-o:before{content:\"\\F2BE\"}.fa-user-o:before{content:\"\\F2C0\"}.fa-id-badge:before{content:\"\\F2C1\"}.fa-drivers-license:before,.fa-id-card:before{content:\"\\F2C2\"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:\"\\F2C3\"}.fa-quora:before{content:\"\\F2C4\"}.fa-free-code-camp:before{content:\"\\F2C5\"}.fa-telegram:before{content:\"\\F2C6\"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:\"\\F2C7\"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:\"\\F2C8\"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:\"\\F2C9\"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:\"\\F2CA\"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:\"\\F2CB\"}.fa-shower:before{content:\"\\F2CC\"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:\"\\F2CD\"}.fa-podcast:before{content:\"\\F2CE\"}.fa-window-maximize:before{content:\"\\F2D0\"}.fa-window-minimize:before{content:\"\\F2D1\"}.fa-window-restore:before{content:\"\\F2D2\"}.fa-times-rectangle:before,.fa-window-close:before{content:\"\\F2D3\"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:\"\\F2D4\"}.fa-bandcamp:before{content:\"\\F2D5\"}.fa-grav:before{content:\"\\F2D6\"}.fa-etsy:before{content:\"\\F2D7\"}.fa-imdb:before{content:\"\\F2D8\"}.fa-ravelry:before{content:\"\\F2D9\"}.fa-eercast:before{content:\"\\F2DA\"}.fa-microchip:before{content:\"\\F2DB\"}.fa-snowflake-o:before{content:\"\\F2DC\"}.fa-superpowers:before{content:\"\\F2DD\"}.fa-wpexplorer:before{content:\"\\F2DE\"}.fa-meetup:before{content:\"\\F2E0\"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}\n", ""]); 12 | 13 | // exports 14 | 15 | 16 | /***/ }), 17 | 18 | /***/ 157: 19 | /***/ (function(module, exports, __webpack_require__) { 20 | 21 | exports = module.exports = __webpack_require__(16)(); 22 | // imports 23 | 24 | 25 | // module 26 | exports.push([module.i, "/* You can add global styles to this file, and also import other style files */\n\nhtml{\n\theight: 100%;\n}\nbody{\n\tbackground-color: #f7f7f7;\n\theight: 100%;\n font-family: 'Roboto',sans-serif;\n padding-top: 50px;\n}\nh1 {\n color: #00BCD4;\n}\n.example-title{\n border-bottom: 1px solid #ccc;\n}\n.navbar-default {\n background-color: #ffffff;\n border-color: #ffffff;\n border-radius: 0px;\n margin: 0px;\n border: 0px;\n box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);\n}\n.navbar-brand {\n}\n.jumbotron{\n text-align: center;\n margin-bottom: 0px;\n background: #2d3673;\n color: #fff;\n padding-bottom: 15px;\n}\n.jumbotron > p{\n font-size: 18px;\n font-weight: 300;\n color: #656565;\n}\n.jumbotron h2{\n font-weight: 300; \n}\n.jumbotron h4{\n padding: 15px; \n font-weight: 300; \n}\n.component-title{\n font-weight: 400;\n line-height: 50px;\n font-size: 20px;\n margin: 0px;\n\n}\n.component-title > span{\n font-size: 50%;\n}\niframe{\n\twidth: 100%;\n\theight: 100%;\n}\n.nav-pills > li{\n display: inline-block !important;\n float: inherit;\n}\n.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{\n background: none;\n color: #a9a9a9;\n}\n.nav > li > a:hover, .nav > li > a:focus{\n text-decoration: underline;\n background: none;\n}\n.nav-pills > li > a{\n font-weight: 300;\n padding: 10px 10px;\n}\n.datepicker-container{\n padding: 0px 15px;\n}\n@media (min-width: 768px){\n .component-title{ \n margin-top: 0px;\n }\n .nav-pills > li > a{\n padding: 10px 15px;\n }\n .datepicker-container {\n padding: 80px 15px;\n }\n .bt-group{\n padding: 35px 0px;\n }\n}\n.bt-group .btn{\n background: linear-gradient(#42a1ec, #0070c9);\n border: none;\n}\n.ad-section{\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n text-align: center;\n}\n.architecture figure, .flowchart figure{\n text-align: center;\n}\n.architecture img, .flowchart img{\n margin: 0px auto;\n}\n.flowchart figure img{\n width: 40%;\n}\n.page-header{\n text-align: center;\n margin: 60px 0 20px;\n}\n.documentation-container{\n padding-top: 50px;\n}\n.documentation-container .page-header{\n text-align: left;\n}\n.left-section{\n padding-left: 0px;\n}\n.left-section .bs-docs-sidebar{\n background: #fff;\n margin-top: 15px;\n}\n.right-section{\n background: #fff;\n margin-top: 15px;\n padding: 25px;\n padding-top: 0px;\n}\n.right-section .row{\n margin: 0px;\n}\nfooter{\n text-align: center;\n}\n.navbar-brand img{\n height: 32px;\n margin-top: -7px;\n}\n.vcolumn .btn-default{\n padding: 2px 10px;\n}\n.left-container{\n padding: 0px;\n padding-left: 15px;\n padding-top: 15px;\n}\n.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{\n background-color: #FFCB2D;\n border-color: #FFCB2D;\n}\n.list-group-item{\n border-right: 0px;\n}\n.list-group-item:first-child{\n font-size: 18px;\n background: #fff;\n font-weight: 500;\n color: #333;\n}\n.list-group-item:first-child,.list-group-item:last-child {\n border-radius: 0px;\n}\n.c-notification{\n position: fixed;\n top: 60px;\n right: 10px;\n width: 300px;\n height: 150px;\n background: #1976D2;\n padding: 15px;\n color: #fff;\n border-radius: 5px;\n transition: all .1s linear;\n z-index: 9999;\n}\n.c-notification > h4{\n border-bottom: 1px solid #fff;\n}\n.c-notification > .fa-close{\n cursor: pointer;\n position: absolute;\n right: 15px;\n top: 15px;\n transition: all .1s linear;\n}\n.c-notification > .fa-close:hover{\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}", ""]); 27 | 28 | // exports 29 | 30 | 31 | /***/ }), 32 | 33 | /***/ 16: 34 | /***/ (function(module, exports) { 35 | 36 | /* 37 | MIT License http://www.opensource.org/licenses/mit-license.php 38 | Author Tobias Koppers @sokra 39 | */ 40 | // css base code, injected by the css-loader 41 | module.exports = function() { 42 | var list = []; 43 | 44 | // return the list of modules as css string 45 | list.toString = function toString() { 46 | var result = []; 47 | for(var i = 0; i < this.length; i++) { 48 | var item = this[i]; 49 | if(item[2]) { 50 | result.push("@media " + item[2] + "{" + item[1] + "}"); 51 | } else { 52 | result.push(item[1]); 53 | } 54 | } 55 | return result.join(""); 56 | }; 57 | 58 | // import a list of modules into the list 59 | list.i = function(modules, mediaQuery) { 60 | if(typeof modules === "string") 61 | modules = [[null, modules, ""]]; 62 | var alreadyImportedModules = {}; 63 | for(var i = 0; i < this.length; i++) { 64 | var id = this[i][0]; 65 | if(typeof id === "number") 66 | alreadyImportedModules[id] = true; 67 | } 68 | for(i = 0; i < modules.length; i++) { 69 | var item = modules[i]; 70 | // skip already imported module 71 | // this implementation is not 100% perfect for weird media query combinations 72 | // when a module is imported multiple times with different media queries. 73 | // I hope this will never occur (Hey this way we have smaller bundles) 74 | if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { 75 | if(mediaQuery && !item[2]) { 76 | item[2] = mediaQuery; 77 | } else if(mediaQuery) { 78 | item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; 79 | } 80 | list.push(item); 81 | } 82 | } 83 | }; 84 | return list; 85 | }; 86 | 87 | 88 | /***/ }), 89 | 90 | /***/ 161: 91 | /***/ (function(module, exports, __webpack_require__) { 92 | 93 | module.exports = __webpack_require__.p + "fontawesome-webfont.674f50d287a8c48dc19b.eot"; 94 | 95 | /***/ }), 96 | 97 | /***/ 162: 98 | /***/ (function(module, exports, __webpack_require__) { 99 | 100 | module.exports = __webpack_require__.p + "fontawesome-webfont.674f50d287a8c48dc19b.eot"; 101 | 102 | /***/ }), 103 | 104 | /***/ 163: 105 | /***/ (function(module, exports, __webpack_require__) { 106 | 107 | module.exports = __webpack_require__.p + "fontawesome-webfont.912ec66d7572ff821749.svg"; 108 | 109 | /***/ }), 110 | 111 | /***/ 198: 112 | /***/ (function(module, exports, __webpack_require__) { 113 | 114 | module.exports = __webpack_require__.p + "fontawesome-webfont.b06871f281fee6b241d6.ttf"; 115 | 116 | /***/ }), 117 | 118 | /***/ 199: 119 | /***/ (function(module, exports, __webpack_require__) { 120 | 121 | module.exports = __webpack_require__.p + "fontawesome-webfont.af7ae505a9eed503f8b8.woff2"; 122 | 123 | /***/ }), 124 | 125 | /***/ 200: 126 | /***/ (function(module, exports, __webpack_require__) { 127 | 128 | module.exports = __webpack_require__.p + "fontawesome-webfont.fee66e712a8a08eef580.woff"; 129 | 130 | /***/ }), 131 | 132 | /***/ 203: 133 | /***/ (function(module, exports, __webpack_require__) { 134 | 135 | __webpack_require__(90); 136 | module.exports = __webpack_require__(91); 137 | 138 | 139 | /***/ }), 140 | 141 | /***/ 86: 142 | /***/ (function(module, exports) { 143 | 144 | /* 145 | MIT License http://www.opensource.org/licenses/mit-license.php 146 | Author Tobias Koppers @sokra 147 | */ 148 | var stylesInDom = {}, 149 | memoize = function(fn) { 150 | var memo; 151 | return function () { 152 | if (typeof memo === "undefined") memo = fn.apply(this, arguments); 153 | return memo; 154 | }; 155 | }, 156 | isOldIE = memoize(function() { 157 | return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase()); 158 | }), 159 | getHeadElement = memoize(function () { 160 | return document.head || document.getElementsByTagName("head")[0]; 161 | }), 162 | singletonElement = null, 163 | singletonCounter = 0, 164 | styleElementsInsertedAtTop = []; 165 | 166 | module.exports = function(list, options) { 167 | if(typeof DEBUG !== "undefined" && DEBUG) { 168 | if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); 169 | } 170 | 171 | options = options || {}; 172 | // Force single-tag solution on IE6-9, which has a hard limit on the # of