Merge pull request #445 from valor-software/feature/angular4

Angular4 update
valor-software · May 26, 2017 · 86ed2a0 · 86ed2a0
2 parents f9f77bc + d958555
commit 86ed2a0
Show file tree

Hide file tree

Showing 30 changed files with 248 additions and 218 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,17 @@
-<a name="0.47.2"></a>
-## [0.47.2](https://github.com/valor-software/ng2-handsontable/compare/0.47.1...0.47.2) (2017-03-09)
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/valor-software/ng2-handsontable/compare/1.0.0-rc.1...v1.0.0) (2017-05-26)
+- Update to Angular 4
 
+### Breaking changes
+- Input property `[col-headers]` was renamed to `[colHeaders]`
+- Input property `[col-widths]` was renamed to `[colWidths]`
 
-### Features
-
-* **module:** update to latest build structure ([e8a9924](https://github.com/valor-software/ng2-handsontable/commit/e8a9924))
-* **package:** Fixed incompatibility with Angular 2 RC4: ([#123](https://github.com/valor-software/ng2-handsontable/issues/123)) ([ab762fc](https://github.com/valor-software/ng2-handsontable/commit/ab762fc))
-* **package:** Update handsontable to ^0.31.1 ([#338](https://github.com/valor-software/ng2-handsontable/issues/338)) ([7832eb3](https://github.com/valor-software/ng2-handsontable/commit/7832eb3))
-
+<a name="0.48.0"></a>
+# [0.48.0](https://github.com/valor-software/ng2-handsontable/compare/0.48.0...1.0.0-rc.1) (2017-03-13)
+- Several fixes & improvements
+- Update to latest build structure
 
 
+<a name="0.47.0"></a>
+# [0.47.0](https://github.com/valor-software/ng2-handsontable/compare/0.47.1...0.47.2) (2017-02-23)
+- Initial release for Angular 2.4.x
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Native Angular2 directive for the [Handsontable](https://github.com/handsontable
 3. Import the `HotTableModule` into your module. Here's a TypeScript example:
 
 ```typescript
-import {HotTableModule} from 'ng2-handsontable';
+import { HotTableModule } from 'ng2-handsontable';
 ...
 
 @NgModule({
@@ -35,8 +35,8 @@ export class MyModule {
 ```html
 <hot-table [data]="data"
            [columns]="columns"
-           [col-headers]="colHeaders"
-           [col-widths]="colHeaders"
+           [colHeaders]="colHeaders"
+           [colWidths]="colHeaders"
            [options]="options"
            (HANDSONTABLE_EVENT)="eventHandler">
 </hot-table>
@@ -45,8 +45,8 @@ export class MyModule {
 - `data: any[]` - data source for this `HotTable`
 - `pageData: Observable<any[]>` - observable data source for this `HotTable` for paged data
 - `columns?: any[]` - descriptors of columns that contains information regarding type, format, source, ... of particular column
-- `col-headers?: string[]` - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined
-- `col-widths?: number[]` - array of column sizes, default column size will be applied if this parameter is undefined
+- `colHeaders?: string[]` - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined
+- `colWidths?: number[]` - array of column sizes, default column size will be applied if this parameter is undefined
 - `options?: any` - any of the [Handsontable options](http://docs.handsontable.com/pro/Options.html)
 - 'HANDSONTABLE_EVENT' - all [Handsontable events](http://docs.handsontable.com/pro/Hooks.html#event:afterAddChild) are implemented as EventEmitters, e.g. `(beforeInit)="onBeforeInit"`.
 

diff --git a/demo/src/components/handsontable-section.ts b/demo/src/components/handsontable-section.ts
@@ -1,10 +1,13 @@
-import {Component} from '@angular/core';
+/* tslint:disable:max-line-length */
+import { Component } from '@angular/core';
 
-let name = 'Handsontable';
+const name = 'Handsontable';
 // webpack html imports
-let doc = require('html-loader!markdown-loader!../../../readme.md');
+/* tslint:disable-next-line:no-var-requires */
+const doc = require('html-loader!markdown-loader!../../../readme.md');
 
-let tabDesc:Array<any> = [
+/* tslint:disable-next-line:no-any */
+const tabDesc: any[] = [
   {
     heading: 'Basic',
     ts: require('!!prismjs-loader?lang=typescript!./handsontable/basic-demo.ts'),
@@ -52,10 +55,12 @@ let tabDesc:Array<any> = [
   }
 ];
 
-let dataLink = `<p>All data completes that used in these examples are available in
-  <a href="https://github.com/valor-software/ng2-handsontable/blob/master/demo/components/handsontable/data.ts">next file</a>.</p>`;
+const dataLink = `<p>
+  All data completes that used in these examples are available in
+  <a href="https://github.com/valor-software/ng2-handsontable/blob/master/demo/components/handsontable/data.ts">next
+  file</a>.</p>`;
 
-let tabsContent:string = ``;
+let tabsContent = ``;
 tabDesc.forEach(desc => {
   let source = '';
   if (desc.source) {
@@ -110,8 +115,8 @@ tabDesc.forEach(desc => {
   </section>
   `
 })
-export class HandsontableSection {
-  private currentHeading:string = 'Basic';
+export class HandsontableSectionComponent {
+  private currentHeading = 'Basic';
 
   private select(e) {
     if (e.heading) {

diff --git a/demo/src/components/handsontable/advanced-demo.html b/demo/src/components/handsontable/advanced-demo.html
@@ -1,4 +1,4 @@
 <hot-table [data]="data"
-           [col-headers]="colHeaders"
+           [colHeaders]="colHeaders"
            [columns]="columns"
            [options]="options"></hot-table>
diff --git a/demo/src/components/handsontable/advanced-demo.ts b/demo/src/components/handsontable/advanced-demo.ts
@@ -1,17 +1,17 @@
-import {Component} from '@angular/core';
+/* tslint:disable:no-any */
+import { Component } from '@angular/core';
 import * as Handsontable from 'handsontable/dist/handsontable.full.js';
-import {getAdvancedData} from './data';
-
+import { getAdvancedData } from './data';
 
 @Component({
   selector: 'advanced-demo',
   template: require('./advanced-demo.html')
 })
-export class AdvancedDemo {
-  private data:Array<any>;
-  private colHeaders:Array<string>;
-  private columns:Array<any>;
-  private options:any;
+export class AdvancedDemoComponent {
+  private data: any[];
+  private colHeaders: string[];
+  private columns: any[];
+  private options: any;
 
   constructor() {
     this.data = getAdvancedData();
@@ -21,10 +21,12 @@ export class AdvancedDemo {
       {data: 1, type: 'numeric', format: '0,0.00[0000]'},
       {data: 2, type: 'text'},
       {data: 3, type: 'numeric', format: '0'},
-      {data: 4, type: 'numeric', format: '0.00%', renderer: function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
-        Handsontable.renderers.NumericRenderer.apply(this, arguments);
-        td.style.color = (value < 0) ? 'red' : 'green';
-      }},
+      {data: 4, type: 'numeric', format: '0.00%', renderer:
+        function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
+          Handsontable.renderers.NumericRenderer.apply(this, arguments);
+          td.style.color = (value < 0) ? 'red' : 'green';
+        }
+      },
       {data: 5, type: 'numeric', format: '0,0.00[0000]'},
       {data: 6, type: 'numeric', format: '0,0.00[0000]'}
     ];

diff --git a/demo/src/components/handsontable/basic-demo.html b/demo/src/components/handsontable/basic-demo.html
@@ -1,8 +1,8 @@
 <hot-table [data]="data"
            (after-change)="afterChange($event)"
            (after-on-cell-mouse-down)="afterOnCellMouseDown($event)"
-           [col-headers]="colHeaders"
+           [colHeaders]="colHeaders"
            [columns]="columns"
            [options]="options"
-           [col-widths]="colWidths">
+           [colWidths]="colWidths">
 </hot-table>
diff --git a/demo/src/components/handsontable/basic-demo.ts b/demo/src/components/handsontable/basic-demo.ts
@@ -1,15 +1,16 @@
+/* tslint:disable:no-any no-magic-numbers prefer-function-over-method */
 import { Component } from '@angular/core';
 import { genData } from './data';
 
 @Component({
   selector: 'basic-demo',
   template: require('./basic-demo.html')
 })
-export class BasicDemo {
-  private data: Array<any> = genData(10);
-  private colHeaders: Array<string> = ['ID', 'First Name', 'Last Name', 'Address',
+export class BasicDemoComponent {
+  private data: any[] = genData(10);
+  private colHeaders: string[] = ['ID', 'First Name', 'Last Name', 'Address',
     'Favorite food', 'Price', 'Is active'];
-  private columns: Array<any> = [
+  private columns: any[] = [
     {
       data: 'id'
     },
@@ -45,7 +46,7 @@ export class BasicDemo {
       uncheckedTemplate: 'No'
     }
   ];
-  private colWidths: Array<number> = [null, null, null, null, null, null, 30];
+  private colWidths: number[] = [null, null, null, null, null, null, 30];
   private options: any = {
     stretchH: 'all',
     columnSorting: true,

diff --git a/demo/src/components/handsontable/data.ts b/demo/src/components/handsontable/data.ts
@@ -1,5 +1,6 @@
-export function genData(rows:number = 10):Array<any> {
-  let products:Array<any> = [
+/* tslint:disable:no-any no-magic-numbers max-file-line-count*/
+export function genData(rows = 10): any[] {
+  const products: any[] = [
       {
         description: 'Big Mac',
         options: [
@@ -18,16 +19,16 @@ export function genData(rows:number = 10):Array<any> {
           {description: 'Fried Onions'}
         ]
       }
-    ],
-    firstNames = ['Ted', 'John', 'Macy', 'Rob', 'Gwen', 'Fiona', 'Mario',
-      'Ben', 'Kate', 'Kevin', 'Thomas', 'Frank'],
-    lastNames = ['Tired', 'Johnson', 'Moore', 'Rocket', 'Goodman', 'Farewell',
-      'Manson', 'Bentley', 'Kowalski', 'Schmidt', 'Tucker', 'Fancy'],
-    address = ['Turkey', 'Japan', 'Michigan', 'Russia', 'Greece', 'France', 'USA',
+    ];
+  const firstNames = ['Ted', 'John', 'Macy', 'Rob', 'Gwen', 'Fiona', 'Mario',
+      'Ben', 'Kate', 'Kevin', 'Thomas', 'Frank'];
+  const lastNames = ['Tired', 'Johnson', 'Moore', 'Rocket', 'Goodman', 'Farewell',
+      'Manson', 'Bentley', 'Kowalski', 'Schmidt', 'Tucker', 'Fancy'];
+  const address = ['Turkey', 'Japan', 'Michigan', 'Russia', 'Greece', 'France', 'USA',
       'Germany', 'Sweden', 'Denmark', 'Poland', 'Belgium'];
 
-  let items:Array<any> = [];
-  let product:any;
+  const items: any[] = [];
+  let product: any;
   let newProduct;
 
   for (let i = 0; i < rows; i++) {
@@ -37,7 +38,7 @@ export function genData(rows:number = 10):Array<any> {
       description: product.description,
       options: []
     };
-    product.options.forEach(function (p) {
+    product.options.forEach(p => {
       newProduct.options.push({description: p.description});
     });
     /// clone expected product
@@ -58,9 +59,9 @@ export function genData(rows:number = 10):Array<any> {
   }
 
   return items;
-};
+}
 
-export function getAdvancedData():Array<any> {
+export function getAdvancedData(): any[] {
   return [
     ['Afghanistan', '30.552', '1000s', '2013', '0.0244', '27.708', '24.019', '11.215'],
     ['Albania', '2.774', '1000s', '2013', '-0.0100', '2.884', '3.015', '3.228'],
@@ -252,14 +253,19 @@ export function getAdvancedData():Array<any> {
     ['Zimbabwe', '14.15', '1000s', '2013', '0.0310', '12.889', '12.693', '10.167'],
     ['Zimbabwe', '14.15', '1000s', '2013', '0.0310', '12.889', '12.693', '10.167']
   ];
-};
+}
 
 export function getPersonalData() {
   return [
     ['', 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'Total'],
-    ['Total Incomes', '=SUM(B7:B12)', '=SUM(C7:C12)', '=SUM(D7:D12)', '=SUM(E7:E12)', '=SUM(F7:F12)', '=SUM(G7:G12)', '=SUM(H7:H12)', '=SUM(I7:I12)', '=SUM(J7:J12)', '=SUM(K7:K12)', '=SUM(L7:L12)', '=SUM(M7:M12)', '=SUM(B2:M2)'],
-    ['Total Expenses', '=SUM(B17:B43)', '=SUM(C17:C43)', '=SUM(D17:D43)', '=SUM(E17:E43)', '=SUM(F17:F43)', '=SUM(G17:G43)', '=SUM(H17:H43)', '=SUM(I17:I43)', '=SUM(J17:J43)', '=SUM(K17:K43)', '=SUM(L17:L43)', '=SUM(M17:M43)', '=SUM(B3:M3)'],
-    ['NET (Income - Expenses)', '=B2-B3', '=C2-C3', '=D2-D3', '=E2-E3', '=F2-F3', '=G2-G3', '=H2-H3', '=I2-I3', '=J2-J3', '=K2-K3', '=L2-L3', '=M2-M3', '=N2-N3', ''],
+    ['Total Incomes', '=SUM(B7:B12)', '=SUM(C7:C12)', '=SUM(D7:D12)', '=SUM(E7:E12)', '=SUM(F7:F12)',
+      '=SUM(G7:G12)', '=SUM(H7:H12)', '=SUM(I7:I12)', '=SUM(J7:J12)', '=SUM(K7:K12)', '=SUM(L7:L12)',
+      '=SUM(M7:M12)', '=SUM(B2:M2)'],
+    ['Total Expenses', '=SUM(B17:B43)', '=SUM(C17:C43)', '=SUM(D17:D43)', '=SUM(E17:E43)',
+      '=SUM(F17:F43)', '=SUM(G17:G43)', '=SUM(H17:H43)', '=SUM(I17:I43)', '=SUM(J17:J43)',
+      '=SUM(K17:K43)', '=SUM(L17:L43)', '=SUM(M17:M43)', '=SUM(B3:M3)'],
+    ['NET (Income - Expenses)', '=B2-B3', '=C2-C3', '=D2-D3', '=E2-E3', '=F2-F3', '=G2-G3',
+      '=H2-H3', '=I2-I3', '=J2-J3', '=K2-K3', '=L2-L3', '=M2-M3', '=N2-N3', ''],
     ['', '', '', '', '', '', '', '', '', '', '', '', '', ''],
     ['Income', '', '', '', '', '', '', '', '', '', '', '', '', ''],
     ['Salary', 11370, 11370, 11370, 11370, 11370, 11370, 11370, 11370, 11370, 11370, 11370, 11370, ''],
@@ -300,10 +306,11 @@ export function getPersonalData() {
     ['Retirement', 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, ''],
     ['Other', 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, '']
   ];
-};
+}
 
 export function getScienceData() {
   return [
+    // tslint:disable-next-line:max-line-length
     ['<div><a href="https://plot.ly/~JStevens/0/" target="_blank" title="An Age Distribution for Scientific Genius" style="display: block; text-align: center;"><img src="https://plot.ly/~JStevens/0.png" alt="An Age Distribution for Scientific Genius" style="max-width: 100%;width: 600px;"  width="600" onerror="this.onerror=null;this.src="\'https://plot.ly/404.png\'";" /></a><script data-plotly="JStevens:0" src="https://plot.ly/embed.js" async/></div>', 0.0008686210640608003, 18.235294117647058, 0.0015472312703583065, 18.235294117647058],
     ['', 0.0013436482084690554, 18.96551724137931, 0.002219055374592834, 18.843813387423936],
     ['', 0.0019408251900108608, 19.69574036511156, 0.0031867535287730727, 19.391480730223122],
@@ -415,7 +422,7 @@ export function getScienceData() {
     ['', 0.0005157437567861012, 73.24543610547667, null, null],
     ['', 0.0004275244299674336, 73.85395537525355, null, null]
   ];
-};
+}
 
 export function getSportData() {
   return [
@@ -449,7 +456,7 @@ export function getSportData() {
     [29, 'Minnesota Timberwolves', '<img src="assets/images/timberwolves.gif">', '625', '0.45', '0.016', '128', '6.9'],
     [30, 'Milwaukee Bucks', '<img src="assets/images/bucks.gif">', '600', '0.48', '0.029', '110', '11.5']
   ];
-};
+}
 
 export function getFinanceData() {
   return [
@@ -469,4 +476,4 @@ export function getFinanceData() {
     ['1310.00', '24/02/2015', '-0.01812', '-0.3310', '0'],
     ['1497.50', '24/02/2015', '0.0051', '-0.2309', '160']
   ];
-};
+}
diff --git a/demo/src/components/handsontable/finance-demo.html b/demo/src/components/handsontable/finance-demo.html
@@ -1,4 +1,4 @@
 <hot-table [data]="data"
-           [col-headers]="colHeaders"
+           [colHeaders]="colHeaders"
            [columns]="columns"
            [options]="options"></hot-table>
diff --git a/demo/src/components/handsontable/finance-demo.ts b/demo/src/components/handsontable/finance-demo.ts
@@ -1,15 +1,16 @@
-import {Component} from '@angular/core';
-import {getFinanceData} from './data';
+// tslint:disable:no-any
+import { Component } from '@angular/core';
+import { getFinanceData } from './data';
 
 @Component({
   selector: 'finance-demo',
   template: require('./finance-demo.html')
 })
-export class FinanceDemo {
-  private data:Array<any>;
-  private colHeaders:Array<string>;
-  private columns:Array<any>;
-  private options:any;
+export class FinanceDemoComponent {
+  private data: any[];
+  private colHeaders: string[];
+  private columns: any[];
+  private options: any;
 
   constructor() {
     this.data = getFinanceData();

diff --git a/demo/src/components/handsontable/personal-demo.html b/demo/src/components/handsontable/personal-demo.html
@@ -1 +1 @@
-<hot-table [data]="data" [col-widths]="colWidths" [options]="options"></hot-table>
+<hot-table [data]="data" [colWidths]="colWidths" [options]="options"></hot-table>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<hot-table [data]="data" [col-widths]="colWidths" [options]="options"></hot-table>
		<hot-table [data]="data" [colWidths]="colWidths" [options]="options"></hot-table>