diff --git a/accordion/overview/angular.json b/accordion/overview/angular.json
new file mode 100644
index 000000000..df898eef3
--- /dev/null
+++ b/accordion/overview/angular.json
@@ -0,0 +1,122 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "demo": {
+ "root": "",
+ "sourceRoot": "src",
+ "projectType": "application",
+ "prefix": "app",
+ "schematics": {},
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/demo",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.app.json",
+ "assets": [
+ "src/assets"
+ ],
+ "styles": [
+ "./node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "demo:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "demo:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "demo:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.spec.json",
+ "karmaConfig": "src/karma.conf.js",
+ "styles": [
+ "styles.css"
+ ],
+ "scripts": [],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ]
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "src/tsconfig.app.json",
+ "src/tsconfig.spec.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ }
+ }
+ },
+ "demo-e2e": {
+ "root": "e2e/",
+ "projectType": "application",
+ "architect": {
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "demo:serve"
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": "e2e/tsconfig.e2e.json",
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ }
+ }
+ }
+ },
+ "defaultProject": "demo"
+}
+
\ No newline at end of file
diff --git a/accordion/overview/package.json b/accordion/overview/package.json
new file mode 100644
index 000000000..9be8f61c6
--- /dev/null
+++ b/accordion/overview/package.json
@@ -0,0 +1,53 @@
+{
+ "name": "angular-template",
+ "description": "",
+ "homepage": "https://stackblitz.com/edit/e8czwv.run",
+ "dependencies": {
+ "@angular/animations": "^7.0.0",
+ "@angular/common": "7.0.0",
+ "@angular/compiler": "7.0.0",
+ "@angular/core": "7.0.0",
+ "@angular/forms": "7.0.0",
+ "@angular/http": "^7.0.0",
+ "@angular/platform-browser": "7.0.0",
+ "@angular/platform-browser-dynamic": "7.0.0",
+ "@angular/router": "7.0.0",
+ "core-js": "2.5.7",
+ "rxjs": "6.3.3",
+ "zone.js": "0.8.26",
+ "moment": "2.22.2",
+ "smart-webcomponents-angular": "7.1.12"
+ },
+ "version": "0.0.0",
+ "license": "MIT",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "test": "ng test",
+ "lint": "ng lint",
+ "e2e": "ng e2e"
+ },
+ "private": true,
+ "devDependencies": {
+ "@angular/cli": "7.0.2",
+ "@angular/compiler-cli": "^7.0.0",
+ "@angular/language-service": "^7.0.0",
+ "@types/jasmine": "~2.8.9",
+ "@types/jasminewd2": "~2.0.5",
+ "@types/node": "~10.12.0",
+ "codelyzer": "~4.5.0",
+ "jasmine-core": "~3.2.1",
+ "jasmine-spec-reporter": "~4.2.1",
+ "karma": "~3.1.0",
+ "karma-chrome-launcher": "~2.2.0",
+ "karma-cli": "~1.0.1",
+ "karma-coverage-istanbul-reporter": "^2.0.4",
+ "karma-jasmine": "~1.1.2",
+ "karma-jasmine-html-reporter": "^1.3.1",
+ "protractor": "~5.4.1",
+ "ts-node": "~7.0.1",
+ "tslint": "~5.11.0",
+ "typescript": "~3.1.3"
+ }
+}
diff --git a/accordion/overview/src/app/app.component.css b/accordion/overview/src/app/app.component.css
new file mode 100644
index 000000000..953ff8b34
--- /dev/null
+++ b/accordion/overview/src/app/app.component.css
@@ -0,0 +1 @@
+/* Add application styles & imports to this file! */
diff --git a/accordion/overview/src/app/app.component.html b/accordion/overview/src/app/app.component.html
new file mode 100644
index 000000000..275de292b
--- /dev/null
+++ b/accordion/overview/src/app/app.component.html
@@ -0,0 +1,6 @@
+
+ First Item Content.
+ Second Item Content.
+ Third Item Content.
+ Fourth Item Content.
+
diff --git a/accordion/overview/src/app/app.component.ts b/accordion/overview/src/app/app.component.ts
new file mode 100644
index 000000000..8abd0e019
--- /dev/null
+++ b/accordion/overview/src/app/app.component.ts
@@ -0,0 +1,19 @@
+import { Component, ViewChild } from '@angular/core';
+import { AccordionComponent, AccordionItemComponent, AccordionExpandMode } from 'smart-webcomponents-angular/accordion';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html'
+})
+
+export class AppComponent {
+ @ViewChild('accordion', { read: AccordionComponent, static: false }) accordion: AccordionComponent;
+
+ ngOnInit(): void {
+
+ }
+ ngAfterViewInit(): void {
+ this.accordion.expandMode = "multiple";
+ this.accordion.expand(1);
+ }
+}
diff --git a/accordion/overview/src/app/app.module.ts b/accordion/overview/src/app/app.module.ts
new file mode 100644
index 000000000..ed4965342
--- /dev/null
+++ b/accordion/overview/src/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AccordionModule } from 'smart-webcomponents-angular/accordion';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [ AppComponent ],
+ imports: [ BrowserModule, AccordionModule ],
+ bootstrap: [ AppComponent ],
+ entryComponents: [ AppComponent ]
+})
+
+export class AppModule { }
diff --git a/accordion/overview/src/app/main.ts b/accordion/overview/src/app/main.ts
new file mode 100644
index 000000000..96b527ad9
--- /dev/null
+++ b/accordion/overview/src/app/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { AppModule } from './app.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(AppModule);
\ No newline at end of file
diff --git a/accordion/overview/src/index.html b/accordion/overview/src/index.html
new file mode 100644
index 000000000..80e7d569a
--- /dev/null
+++ b/accordion/overview/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ AngularTemplate
+
+
+
+ Smart Accordion Angular Overview Demo
+
+
+ Loading...
+
+
diff --git a/accordion/overview/src/main.ts b/accordion/overview/src/main.ts
new file mode 100644
index 000000000..185ae4806
--- /dev/null
+++ b/accordion/overview/src/main.ts
@@ -0,0 +1,16 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+ // Ensure Angular destroys itself on hot reloads.
+ if (window['ngRef']) {
+ window['ngRef'].destroy();
+ }
+ window['ngRef'] = ref;
+
+ // Otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/accordion/overview/src/polyfills.ts b/accordion/overview/src/polyfills.ts
new file mode 100644
index 000000000..7831e97b7
--- /dev/null
+++ b/accordion/overview/src/polyfills.ts
@@ -0,0 +1,72 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl'; // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';
diff --git a/data.json b/data.json
new file mode 100644
index 000000000..8d5a45f89
--- /dev/null
+++ b/data.json
@@ -0,0 +1,113 @@
+[{
+ "commodity": "Crude Oil",
+ "price": 38.1900,
+ "day": -2.00,
+ "week": 2.63,
+ "month": 58.53,
+ "year": -28.16
+ },
+ {
+ "commodity": "Brent",
+ "price": 40.5200,
+ "day": -1.63,
+ "week": 2.04,
+ "month": 37.02,
+ "year": -34.82
+ },
+ {
+ "commodity": "Natural Gas",
+ "price": 1.7370,
+ "day": 0.58,
+ "week": -4.35,
+ "month": -4.92,
+ "year": -27.55
+ },
+ {
+ "commodity": "Gasoline",
+ "price": 1.2073,
+ "day": -0.49,
+ "week": 8.36,
+ "month": 29.60,
+ "year": -31.07
+ },
+ {
+ "commodity": "Gold",
+ "price": 1720.00,
+ "day": 0.23,
+ "week": 1.30,
+ "month": 1.43,
+ "year": 29.67
+ },
+ {
+ "commodity": "Silver",
+ "price": 17.6600,
+ "day": 0.56,
+ "week": 0.20,
+ "month": 13.83,
+ "year": 20.41
+ },
+ {
+ "commodity": "Wheat",
+ "price": 506.2500,
+ "day": 0.40,
+ "week": -0.93,
+ "month": -1.65,
+ "year": -1.98
+ },
+ {
+ "commodity": "Palm Oil",
+ "price": 2306.00,
+ "day": -6.07,
+ "week": -5.69,
+ "month": 2.40,
+ "year": -5.57
+ },
+ {
+ "commodity": "Cheese",
+ "price": 2.1620,
+ "day": 1.84,
+ "week": 65.67,
+ "month": 72.96,
+ "year": 27.70
+ },
+ {
+ "commodity": "Rice",
+ "price": 16.3200,
+ "day": -7.09,
+ "week": -20.64,
+ "month": -2.91,
+ "year": 40.99
+ },
+ {
+ "commodity": "Copper",
+ "price": 2.6180,
+ "day": 0.67,
+ "week": 5.46,
+ "month": 10.32,
+ "year": -1.87
+ },
+ {
+ "commodity": "Steel",
+ "price": 3716.00,
+ "day": 0.19,
+ "week": 3.65,
+ "month": 9.07,
+ "year": -0.91
+ },
+ {
+ "commodity": "Aluminum",
+ "price": 1605.50,
+ "day": 0.03,
+ "week": 3.78,
+ "month": 7.21,
+ "year": -9.70
+ },
+ {
+ "commodity": "Tin",
+ "price": 16922,
+ "day": 1.54,
+ "week": 5.70,
+ "month": 11.04,
+ "year": -11.68
+ }
+]
diff --git a/grid/overview/angular.json b/grid/overview/angular.json
new file mode 100644
index 000000000..df898eef3
--- /dev/null
+++ b/grid/overview/angular.json
@@ -0,0 +1,122 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "demo": {
+ "root": "",
+ "sourceRoot": "src",
+ "projectType": "application",
+ "prefix": "app",
+ "schematics": {},
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/demo",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.app.json",
+ "assets": [
+ "src/assets"
+ ],
+ "styles": [
+ "./node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "demo:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "demo:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "demo:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.spec.json",
+ "karmaConfig": "src/karma.conf.js",
+ "styles": [
+ "styles.css"
+ ],
+ "scripts": [],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ]
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "src/tsconfig.app.json",
+ "src/tsconfig.spec.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ }
+ }
+ },
+ "demo-e2e": {
+ "root": "e2e/",
+ "projectType": "application",
+ "architect": {
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "demo:serve"
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": "e2e/tsconfig.e2e.json",
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ }
+ }
+ }
+ },
+ "defaultProject": "demo"
+}
+
\ No newline at end of file
diff --git a/grid/overview/package.json b/grid/overview/package.json
new file mode 100644
index 000000000..1fcbc69f1
--- /dev/null
+++ b/grid/overview/package.json
@@ -0,0 +1,53 @@
+{
+ "name": "angular-template",
+ "description": "",
+ "homepage": "https://stackblitz.com/edit/e8czwv.run",
+ "dependencies": {
+ "@angular/animations": "^7.0.0",
+ "@angular/common": "7.0.0",
+ "@angular/compiler": "7.0.0",
+ "@angular/core": "7.0.0",
+ "@angular/forms": "7.0.0",
+ "@angular/http": "^7.0.0",
+ "@angular/platform-browser": "7.0.0",
+ "@angular/platform-browser-dynamic": "7.0.0",
+ "@angular/router": "7.0.0",
+ "core-js": "2.5.7",
+ "rxjs": "6.3.3",
+ "zone.js": "0.8.26",
+ "moment": "2.22.2",
+ "smart-webcomponents-angular": "7.7.3"
+ },
+ "version": "0.0.0",
+ "license": "MIT",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "test": "ng test",
+ "lint": "ng lint",
+ "e2e": "ng e2e"
+ },
+ "private": true,
+ "devDependencies": {
+ "@angular/cli": "7.0.2",
+ "@angular/compiler-cli": "^7.0.0",
+ "@angular/language-service": "^7.0.0",
+ "@types/jasmine": "~2.8.9",
+ "@types/jasminewd2": "~2.0.5",
+ "@types/node": "~10.12.0",
+ "codelyzer": "~4.5.0",
+ "jasmine-core": "~3.2.1",
+ "jasmine-spec-reporter": "~4.2.1",
+ "karma": "~3.1.0",
+ "karma-chrome-launcher": "~2.2.0",
+ "karma-cli": "~1.0.1",
+ "karma-coverage-istanbul-reporter": "^2.0.4",
+ "karma-jasmine": "~1.1.2",
+ "karma-jasmine-html-reporter": "^1.3.1",
+ "protractor": "~5.4.1",
+ "ts-node": "~7.0.1",
+ "tslint": "~5.11.0",
+ "typescript": "~3.1.3"
+ }
+}
diff --git a/grid/overview/src/app/app.component.css b/grid/overview/src/app/app.component.css
new file mode 100644
index 000000000..953ff8b34
--- /dev/null
+++ b/grid/overview/src/app/app.component.css
@@ -0,0 +1 @@
+/* Add application styles & imports to this file! */
diff --git a/grid/overview/src/app/app.component.html b/grid/overview/src/app/app.component.html
new file mode 100644
index 000000000..1da866cf0
--- /dev/null
+++ b/grid/overview/src/app/app.component.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/grid/overview/src/app/app.component.ts b/grid/overview/src/app/app.component.ts
new file mode 100644
index 000000000..15365b301
--- /dev/null
+++ b/grid/overview/src/app/app.component.ts
@@ -0,0 +1,191 @@
+import { Component, VERSION } from '@angular/core';
+import { ViewChild, OnInit, AfterViewInit } from '@angular/core';
+import { GridComponent, GridColumn, DataAdapter, Smart } from 'smart-webcomponents-angular/grid';
+
+interface IRowGenerateData {
+ id: number;
+ reportsTo: number | null;
+ available: boolean | null;
+ firstName: string;
+ lastName: string;
+ name: string;
+ productName: string;
+ quantity: string | number;
+ total: string | number;
+ price: string | number;
+ date: Date;
+ leaf: boolean;
+}
+
+interface IRowGenerateOrdersData {
+ id: number | string;
+ parentid: number | null;
+ customer: string;
+ firstName: string;
+ lastName: string;
+ name: string;
+ price: string | number;
+ quantity: string | number;
+ total: string | number;
+ date: Date;
+}
+
+interface ITaskGenerateData {
+ id: number | string;
+ status: string;
+ text: string;
+ tags?: string;
+ priority?: string;
+ progress?: number;
+ checklist?: { text: string, completed: boolean }[];
+ color?: string;
+ comments?: { text: string, userId: number | string, time: Date }[];
+ userId?: number | string;
+ startDate?: Date;
+ dueDate?: Date
+}
+
+export function GetData(rowscount?: number, last?: number, hasNullValues?: boolean): IRowGenerateData[] {
+ const data: IRowGenerateData[] = new Array();
+
+ if (rowscount === undefined) {
+ rowscount = 100;
+ }
+
+ let startIndex = 0;
+
+ if (last) {
+ startIndex = rowscount;
+ rowscount = last - rowscount;
+ }
+
+ const firstNames =
+ [
+ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
+ ];
+
+ const lastNames =
+ [
+ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
+ ];
+
+ const productNames =
+ [
+ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Caramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
+ ];
+
+ const priceValues =
+ [
+ '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
+ ];
+
+ for (let i = 0; i < rowscount; i++) {
+ const row = {} as IRowGenerateData;
+
+ const productindex = Math.floor(Math.random() * productNames.length);
+ const price = parseFloat(priceValues[productindex]);
+ const quantity = 1 + Math.round(Math.random() * 10);
+
+ row.id = startIndex + i;
+ row.reportsTo = Math.floor(Math.random() * firstNames.length);
+
+ if (i % Math.floor(Math.random() * firstNames.length) === 0) {
+ row.reportsTo = null;
+ }
+
+ row.available = productindex % 2 === 0;
+
+ if (hasNullValues === true) {
+ if (productindex % 2 !== 0) {
+ const random = Math.floor(Math.random() * rowscount);
+ row.available = i % random === 0 ? null : false;
+ }
+ }
+
+ row.firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+ row.lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+ row.name = row.firstName + ' ' + row.lastName;
+ row.productName = productNames[productindex];
+ row.price = price;
+ row.quantity = quantity;
+ row.total = price * quantity;
+
+ const date = new Date();
+ date.setFullYear(2016, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
+ date.setHours(0, 0, 0, 0);
+ row.date = date;
+
+ data[i] = row;
+ }
+
+ return data;
+}
+
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: [ './app.component.css' ]
+})
+export class AppComponent {
+ name = 'Angular ' + VERSION.major;
+
+ @ViewChild('grid', { read: GridComponent, static: false }) grid: GridComponent;
+
+ public appearance = {
+ alternationStart: 0,
+ alternationCount: 2,
+ showRowHeader: true,
+ showRowHeaderFocusIcon: true,
+ showRowHeaderSelectIcon: true
+ };
+
+ public selection = {
+ enabled: true,
+ mode: 'one',
+ allowRowHeaderSelection: true
+ };
+
+ public pager = {
+ visible: true
+ };
+
+ public paging = {
+ enabled: true
+ };
+
+ public layout = {
+ rowHeight: 'auto',
+ allowCellsWrap: true
+ };
+
+ dataSource = new Smart.DataAdapter({
+ dataSource: GetData(30),
+ virtualDataSource: function (resultCallbackFunction) {
+ setTimeout(function () {
+ resultCallbackFunction({
+ dataSource: GetData(30)
+ });
+ }, 100);
+ },
+ dataFields: [
+ 'id: number',
+ 'firstName: string',
+ 'lastName: string',
+ 'productName: string',
+ 'quantity: number',
+ 'price: number',
+ 'total: number'
+ ]
+ });
+
+ columns: GridColumn[] = [
+ { label: 'First Name', dataField: 'firstName' },
+ { label: 'Last Name', dataField: 'lastName' },
+ { label: 'Product', dataField: 'productName' },
+ { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right' },
+ { label: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
+ { label: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
+ ]
+
+}
diff --git a/grid/overview/src/app/app.module.ts b/grid/overview/src/app/app.module.ts
new file mode 100644
index 000000000..648d4fc71
--- /dev/null
+++ b/grid/overview/src/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { GridModule } from 'smart-webcomponents-angular/grid';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [ AppComponent ],
+ imports: [ BrowserModule, GridModule ],
+ bootstrap: [ AppComponent ],
+ entryComponents: [ AppComponent ]
+})
+
+export class AppModule { }
diff --git a/grid/overview/src/app/main.ts b/grid/overview/src/app/main.ts
new file mode 100644
index 000000000..96b527ad9
--- /dev/null
+++ b/grid/overview/src/app/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { AppModule } from './app.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(AppModule);
\ No newline at end of file
diff --git a/grid/overview/src/index.html b/grid/overview/src/index.html
new file mode 100644
index 000000000..80e7d569a
--- /dev/null
+++ b/grid/overview/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ AngularTemplate
+
+
+
+ Smart Accordion Angular Overview Demo
+
+
+ Loading...
+
+
diff --git a/grid/overview/src/main.ts b/grid/overview/src/main.ts
new file mode 100644
index 000000000..185ae4806
--- /dev/null
+++ b/grid/overview/src/main.ts
@@ -0,0 +1,16 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+ // Ensure Angular destroys itself on hot reloads.
+ if (window['ngRef']) {
+ window['ngRef'].destroy();
+ }
+ window['ngRef'] = ref;
+
+ // Otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/grid/overview/src/polyfills.ts b/grid/overview/src/polyfills.ts
new file mode 100644
index 000000000..7831e97b7
--- /dev/null
+++ b/grid/overview/src/polyfills.ts
@@ -0,0 +1,72 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl'; // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';