Merge pull request #10 from korel-san/feature-update-to-angular2-alph…

…a-40

Update: updated to angular2 alpha 40

README.md

@@ -22,12 +22,16 @@ Directive for [ng2-table](https://github.com/valor-software/ng2-table) component
 
 ## API
 
-### Properties
+### Inputs (Properties)
+
+- `page` (`number`) - the default page after the table component loading
+- `itemsPerPage` (`number`) - number of the displaying items (rows) on a page
+- `maxSize` (`number`) - number of the displaying pages before `...`
+- `numPages` (`number`) - total number of the pages
+- `length` (`number`) - total number of the items after filtering (of it's chosen)
 
 - `config` (`?any`) - config for setup all plugins (filtering, sorting, paging):
-  - `paging` (`?any`) - - switch on the paging plugin
-    - `page` (`number`) - the default page after the component loading
-    - `itemsPerPage` (`number`) - number of the displaying items on a page
+  - `paging` (`?boolean`) - - switch on the paging plugin
   - `sorting` (`?any`) - switch on the sorting plugin
     - `columns` (`Array<any>`) - only list of the columns for sorting
   - `filtering` (`?any`) - switch on the filtering plugin
@@ -40,7 +44,7 @@ Directive for [ng2-table](https://github.com/valor-software/ng2-table) component
     - `name` (`string`) - the property name in data
     - `sort` (`?string|boolean`) - config for columns (+ sorting settings if it's needed), sorting is switched on by default for each column
 
-### Events
+### Outputs (Events)
 
 - `table-changed` - onclick event handler
 

components/module.ts

@@ -1,3 +1,5 @@
+/// <reference path="../tsd.d.ts" />
+
 declare module 'ng2-table' {
-  export * from 'index';
+  export = require('index');
 }

components/pagination/pagination.ts

@@ -4,7 +4,7 @@ import {
   Component, View, Directive,
   OnInit, EventEmitter,
   ElementRef,
-  DefaultValueAccessor,
+  ControlValueAccessor,
   CORE_DIRECTIVES, NgClass,
   Self, NgModel, Renderer,
   ViewEncapsulation, ViewRef,
@@ -27,13 +27,13 @@ const paginationConfig = {
 
 @Component({
   selector: 'pagination[ng-model], [pagination][ng-model]',
-  properties: [
+  inputs: [
     'rotate', 'disabled',
     'totalItems', 'itemsPerPage', 'maxSize',
     'boundaryLinks', 'directionLinks',
     'firstText', 'previousText', 'nextText', 'lastText'
   ],
-  events: ['numPages', 'pagechanged']
+  outputs: ['numPages', 'pagechanged']
 })
 @View({
   template: `
@@ -70,7 +70,7 @@ const paginationConfig = {
   directives: [CORE_DIRECTIVES, NgClass],
   encapsulation: ViewEncapsulation.None
 })
-export class Pagination extends DefaultValueAccessor implements OnInit {
+export class Pagination implements ControlValueAccessor, OnInit {
   public config:any;
 
   private classMap:string;
@@ -142,8 +142,8 @@ export class Pagination extends DefaultValueAccessor implements OnInit {
   private _page:number;
   private pages:Array<any>;
 
-  constructor(@Self() cd:NgModel, renderer:Renderer, elementRef:ElementRef) {
-    super(cd, renderer, elementRef);
+  constructor(@Self() public cd:NgModel, public renderer:Renderer, public elementRef:ElementRef) {
+    cd.valueAccessor = this;
     this.config = this.config || paginationConfig;
   }
 
@@ -176,7 +176,8 @@ export class Pagination extends DefaultValueAccessor implements OnInit {
 
     if (!this.disabled) {
       if (event && event.target) {
-        event.target.blur();
+        let target: any = event.target;
+        target.blur();
       }
       this.writeValue(page);
       this.cd.viewToModelUpdate(this.page);
@@ -260,6 +261,17 @@ export class Pagination extends DefaultValueAccessor implements OnInit {
     let totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil(this.totalItems / this.itemsPerPage);
     return Math.max(totalPages || 0, 1);
   }
+
+  onChange = (_) => {};
+  onTouched = () => {};
+
+  registerOnChange(fn:(_:any) => {}):void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn:() => {}):void {
+    this.onTouched = fn;
+  }
 }
 
 
@@ -272,7 +284,7 @@ const pagerConfig = {
 
 @Component({
   selector: 'pager[ng-model], [pager][ng-model]',
-  properties: [
+  inputs: [
     'align',
     'totalItems', 'itemsPerPage',
     'previousText', 'nextText',

components/table/filtering.ts

@@ -1,17 +1,20 @@
 /// <reference path="../../tsd.d.ts" />
 
 import {
-  Directive, LifecycleEvent,
+  Directive,
   EventEmitter, ElementRef, Renderer,
   CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES
 } from 'angular2/angular2';
 
-import {setProperty} from 'angular2/src/forms/directives/shared';
+// import {setProperty} from 'angular2/ts/src/core/forms/directives/shared';
+function setProperty(renderer: Renderer, elementRef: ElementRef, propName: string, propValue: any) {
+  renderer.setElementProperty(elementRef, propName, propValue);
+}
 
 @Directive({
   selector: '[ng2-table-filter]',
-  properties: ['config: ng2TableFilter'],
-  events: ['tableChanged'],
+  inputs: ['config: ng2TableFilter'],
+  outputs: ['tableChanged'],
   host: {
     '(input)': 'onChangeFilter($event.target.value)'
   }

components/table/paging.ts

@@ -1,25 +1,27 @@
 /// <reference path="../../tsd.d.ts" />
 
 import {
-  Directive, LifecycleEvent,
+  Directive,
   EventEmitter, ElementRef,
   CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES
 } from 'angular2/angular2';
 
 @Directive({
   selector: '[ng2-table-paging]',
-  properties: ['config: ng2TablePaging'],
-  events: ['tableChanged'],
+  inputs: ['config: ng2TablePaging'],
+  outputs: ['tableChanged'],
   host: {
     '(pagechanged)': 'onChangePage($event)'
   }
 })
 export class Ng2TablePaging {
-  public config:any = {};
+  public config:boolean = true;
   public tableChanged:EventEmitter = new EventEmitter();
 
   onChangePage(event) {
-    Object.assign(this.config, event);
-    this.tableChanged.next({paging: this.config});
+    // Object.assign(this.config, event);
+    if (this.config) {
+      this.tableChanged.next({paging: event});
+    }
   }
 }

components/table/readme.md

@@ -12,12 +12,16 @@ in this case, don't forget to include all of the imported entities to the option
 
 There are only simple table with 3 plugins/directives: `filtering`, `paging`, `sorting`. You don't need special `config` variable for storing settings for all plugins as is used in demo example. It's just showing usage sample.
 
-### Properties
+### Inputs (Properties)
+
+- `page` (`number`) - the default page after the table component loading
+- `itemsPerPage` (`number`) - number of the displaying items (rows) on a page
+- `maxSize` (`number`) - number of the displaying pages before `...`
+- `numPages` (`number`) - total number of the pages
+- `length` (`number`) - total number of the items after filtering (of it's chosen)
 
 - `config` (`?any`) - config for setup all plugins (filtering, sorting, paging):
-  - `paging` (`?any`) - - switch on the paging plugin
-    - `page` (`number`) - the default page after the component loading
-    - `itemsPerPage` (`number`) - number of the displaying items on a page
+  - `paging` (`?boolean`) - - switch on the paging plugin
   - `sorting` (`?any`) - switch on the sorting plugin
     - `columns` (`Array<any>`) - only list of the columns for sorting
   - `filtering` (`?any`) - switch on the filtering plugin
@@ -30,7 +34,7 @@ There are only simple table with 3 plugins/directives: `filtering`, `paging`, `s
     - `name` (`string`) - the property name in data
     - `sort` (`?string|boolean`) - config for columns (+ sorting settings if it's needed), sorting is switched on by default for each column
 
-### Events
+### Outputs (Events)
 
 - `table-changed`: onclick event handler
 

components/table/sorting.ts

@@ -1,17 +1,15 @@
 /// <reference path="../../tsd.d.ts" />
 
 import {
-  Directive, Injectable, LifecycleEvent,
+  Directive, Injectable,
   EventEmitter, ElementRef, ViewEncapsulation,
   CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES
 } from 'angular2/angular2';
 
-import {Table} from './table';
-
 @Directive({
   selector: '[ng2-th-sortable]',
-  properties: ['config: ng2ThSortable', 'column'],
-  events: ['sortChanged'],
+  inputs: ['config: ng2ThSortable', 'column'],
+  outputs: ['sortChanged'],
   host: {
     '(click)': 'onToggleSort($event, $target)'
   }

components/table/table.ts

@@ -15,8 +15,8 @@ import {Ng2ThSortable} from './sorting';
 
 @Component({
   selector: 'ng2-table, [ng2-table]',
-  properties: ['rows', 'columns', 'config'],
-  events: ['tableChanged']
+  inputs: ['rows', 'columns', 'config'],
+  outputs: ['tableChanged']
 })
 @View({
   template: `
@@ -46,7 +46,7 @@ export class Table {
   private _columns:Array<any> = [];
   public config:any = {};
 
-  // Events
+  // Outputs (Events)
   public tableChanged:EventEmitter = new EventEmitter();
 
   public set columns(values:Array<any>) {

demo/components/table-section.ts

@@ -1,8 +1,8 @@
 /// <reference path="../../tsd.d.ts" />
 
-import {Component, View, CORE_DIRECTIVES, NgNonBindable} from 'angular2/angular2';
+import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
 
-import {tabs} from 'ng2-bootstrap';
+// import {tabs} from 'ng2-bootstrap';
 import {TableDemo} from './table/table-demo';
 
 let name = 'Table';
@@ -39,12 +39,12 @@ let html = require('!!prismjs?lang=markup!./table/table-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html">${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript">${ts}</code></pre>
           </div>
         </tab>
       </tabset>
@@ -58,7 +58,7 @@ let html = require('!!prismjs?lang=markup!./table/table-demo.html');
     </div>
   </section>
   `,
-  directives: [TableDemo, tabs, CORE_DIRECTIVES, NgNonBindable]
+  directives: [TableDemo, CORE_DIRECTIVES]
 })
 export class TableSection {
 }

demo/components/table/table-demo.html

@@ -12,12 +12,11 @@
             (table-changed)="onChangeTable($event)"
 
             [total-items]="length"
-            [(ng-model)]="config.paging.page"
-            [max-size]="config.paging.maxSize"
+            [(ng-model)]="page"
+            [max-size]="maxSize"
             class="pagination-sm"
             [boundary-links]="true"
             [rotate]="false"
-            (num-pages)="config.paging.numPages = $event">
+            (num-pages)="numPages = $event">
 </pagination>
-<pre *ng-if="config.paging" class="card card-block card-header">Page: {{config.paging.page}} / {{config.paging.numPages}}</pre>
-
+<pre *ng-if="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>

demo/components/table/table-demo.ts

@@ -2,7 +2,7 @@
 
 import {
   Component, Directive, View, EventEmitter, Host,
-  OnInit,
+  OnInit, Self, NgIf,
   CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES
 } from 'angular2/angular2';
 
@@ -17,7 +17,7 @@ let template = require('./table-demo.html');
 })
 @View({
   template: template,
-  directives: [Ng2Table, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
+  directives: [Ng2Table, NgClass, NgIf, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
 export class TableDemo implements OnInit {
   public rows:Array<any> = [];
@@ -29,9 +29,14 @@ export class TableDemo implements OnInit {
     {title: 'Start date', name: 'startDate'},
     {title: 'Salary', name: 'salary'}
   ];
+  public page:number = 1;
+  public itemsPerPage:number = 10;
+  public maxSize:number = 5;
+  public numPages:number = 1;
   public length:number = 0;
+
   public config:any = {
-    paging: {page: 1, itemsPerPage: 10, maxSize: 5},
+    paging: true,
     sorting: {columns: []},
     filtering: {filterString: '', columnName: 'position'}
   };
@@ -51,8 +56,8 @@ export class TableDemo implements OnInit {
       return data;
     }
 
-    let start = (this.config.paging.page - 1) * this.config.paging.itemsPerPage;
-    let end = this.config.paging.itemsPerPage > -1 ? (start + this.config.paging.itemsPerPage) : data.length;
+    let start = (this.page - 1) * this.itemsPerPage;
+    let end = this.itemsPerPage > -1 ? (start + this.itemsPerPage) : data.length;
     return data.slice(start, end);
   }
 
@@ -97,7 +102,8 @@ export class TableDemo implements OnInit {
       Object.assign(this.config.sorting, config.sorting);
     }
     if (config.paging) {
-      Object.assign(this.config.paging, config.paging);
+      this.page = config.paging.page;
+      this.itemsPerPage = config.paging.itemsPerPage;
     }
 
     let filteredData = this.changeFilter(this.data, this.config);

demo/index.ts

@@ -38,7 +38,7 @@ let gettingStarted = require('./getting-started.md');
     <div class="col-md-12 card card-block panel panel-default">
       <selection>
           <h1>ng2-table available with:
-          <a class="btn btn-default btn-secondary btn-lg" [ng-class]="{active: isBs3}" href="./">Bootstrap 3</a>
+          <a class="btn btn-default btn-secondary btn-lg" [ng-class]="{active: isBs3}" href="./index.html">Bootstrap 3</a>
           <a class="btn btn-default btn-secondary btn-lg" [ng-class]="{active: !isBs3}" href="./index-bs4.html">Bootstrap 4</a>
           </h1>
       </selection>

ng2-bootstrap.d.ts

@@ -0,0 +1,5 @@
+declare module 'ng2-bootstrap' {
+  export class ButtonCheckbox {
+  }
+  export var tabs: any;
+}