├── .gitignore
├── .npmignore
├── README.md
├── index.d.ts
├── index.js
├── index.ts
├── package.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.tgz
 2 | 
 3 | # Created by https://www.gitignore.io/api/node
 4 | 
 5 | ### Node ###
 6 | # Logs
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # node-waf configuration
29 | .lock-wscript
30 | 
31 | # Compiled binary addons (http://nodejs.org/api/addons.html)
32 | build/Release
33 | 
34 | # Dependency directories
35 | node_modules
36 | jspm_packages
37 | 
38 | # Optional npm cache directory
39 | .npm
40 | 
41 | # Optional REPL history
42 | .node_repl_history
43 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | index.ts
2 | *.json
3 | *.tgz
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Setting up `<iron-data-table>` with `ng cli`
 2 | #### Setup new project
 3 | - `ng new my-dream-app`
 4 | - `cd my-dream-app`
 5 | 
 6 | #### Install and Configure directives
 7 | - `npm install angular2-iron-data-table --save`
 8 | 
 9 | >> Installs `@vaadin/angular2-polymer` as a dependency
10 | 
11 | `angular-cli-build.json`:
12 | - Add `'@vaadin/angular2-polymer/**/*.js'` and `'angular2-iron-data-table/index.js'` to `vendorNpmFiles`
13 | 
14 | `src/system-config.ts`:
15 | - Add `@vaadin/angular2-polymer` and `angular2-iron-data-table` to `barrels`
16 | - Add `'@vaadin': 'vendor/@vaadin'` and `'angular2-iron-data-table': 'vendor/angular2-iron-data-table'` to `map`
17 | 
18 | #### Install and Configure `<iron-data-table>`
19 | - `cd public`
20 | - `bower install iron-data-table`
21 | 
22 | `index.html`:
23 | - Add `<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>`
24 | - Add `<link rel="import" href="bower_components/iron-data-table/iron-data-table.html">`
25 | - Add `<link rel="import" href="bower_components/iron-data-table/default-styles.html">` (optional)
26 | 
27 | `src/app/my-dream-app.component.ts`
28 | - Add `import { PolymerElement } from '@vaadin/angular2-polymer';`
29 | - Add `import { RowTemplate, HeaderTemplate, DetailsTemplate} from 'angular2-iron-data-table';`
30 | - Add `items = [{value: 'foo'}, {value: 'bar'}];` into constructor
31 | 
32 | `src/app/my-dream-app.component.html`
33 | - Add 
34 | ```html
35 | <iron-data-table [items]="items">
36 |   <data-table-column name="Column Name">
37 |     <div *headerTemplate="let column=column">Column name is: {{column.name}}</div>
38 |     <div *rowTemplate="let item=item">{{item.value}}</div>
39 |   </data-table-column>
40 | </iron-data-table>
41 | ```
42 | >> @vaadin/angular2-polymer converts the API to be angular2-compatible, see http://saulis.github.io/iron-data-table/ and http://saulis.github.io/iron-data-table/demo/ for more API details and usage examples.
43 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | export { RowTemplate, HeaderTemplate, DetailsTemplate } from './index';
2 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | System.register(['@angular/core', '@angular/platform-browser/src/dom/dom_adapter'], function(exports_1) {
  2 |     var __extends = (this && this.__extends) || function (d, b) {
  3 |         for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  4 |         function __() { this.constructor = d; }
  5 |         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  6 |     };
  7 |     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  8 |         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  9 |         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
 10 |         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
 11 |         return c > 3 && r && Object.defineProperty(target, key, r), r;
 12 |     };
 13 |     var __metadata = (this && this.__metadata) || function (k, v) {
 14 |         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 15 |     };
 16 |     var core_1, dom_adapter_1;
 17 |     var Polymer, saulis, dom, RowTemplateContext, Template, RowTemplate, HeaderTemplate, DetailsTemplate;
 18 |     return {
 19 |         setters:[
 20 |             function (core_1_1) {
 21 |                 core_1 = core_1_1;
 22 |             },
 23 |             function (dom_adapter_1_1) {
 24 |                 dom_adapter_1 = dom_adapter_1_1;
 25 |             }],
 26 |         execute: function() {
 27 |             Polymer = window.Polymer;
 28 |             saulis = window.saulis;
 29 |             dom = dom_adapter_1.getDOM();
 30 |             // see https://github.com/Polymer/polymer/issues/3742
 31 |             dom.appendChild = function (el, node) {
 32 |                 if (node.nodeName === '#comment') {
 33 |                     el.appendChild(node);
 34 |                 }
 35 |                 else {
 36 |                     Polymer.dom(el).appendChild(node);
 37 |                     Polymer.dom.flush();
 38 |                 }
 39 |             };
 40 |             RowTemplateContext = (function () {
 41 |                 function RowTemplateContext() {
 42 |                 }
 43 |                 RowTemplateContext.prototype.notifyPath = function (path, value) {
 44 |                     this[path] = value;
 45 |                 };
 46 |                 return RowTemplateContext;
 47 |             })();
 48 |             Template = (function () {
 49 |                 function Template(_templateRef, _viewContainer) {
 50 |                     if (!saulis.templatizeSet) {
 51 |                         var cell = document.createElement('data-table-cell');
 52 |                         var proto = Object.getPrototypeOf(cell);
 53 |                         var defaultTemplatize = proto._templatize;
 54 |                         var ng2Templatize = function (template) {
 55 |                             if (template.templateRef) {
 56 |                                 var viewRef = template.viewContainerRef.createEmbeddedView(template.templateRef, new RowTemplateContext());
 57 |                                 // in some cases, default header is already set.
 58 |                                 if (this._instance) {
 59 |                                     // remove default header template instance
 60 |                                     Polymer.dom(this).removeChild(Polymer.dom(this).querySelector('div'));
 61 |                                 }
 62 |                                 for (var i = 0; i < viewRef.rootNodes.length; i++) {
 63 |                                     Polymer.dom(this).appendChild(viewRef.rootNodes[i]);
 64 |                                 }
 65 |                                 Polymer.dom.flush();
 66 |                                 return viewRef.context;
 67 |                             }
 68 |                             else {
 69 |                                 return defaultTemplatize.bind(this)(template);
 70 |                             }
 71 |                         };
 72 |                         proto._templatize = ng2Templatize;
 73 |                         var detail = document.createElement('data-table-row-detail');
 74 |                         Object.getPrototypeOf(detail)._templatize = ng2Templatize;
 75 |                         saulis.templatizeSet = true;
 76 |                     }
 77 |                 }
 78 |                 return Template;
 79 |             })();
 80 |             RowTemplate = (function (_super) {
 81 |                 __extends(RowTemplate, _super);
 82 |                 function RowTemplate(_templateRef, _viewContainer) {
 83 |                     _super.call(this, _templateRef, _viewContainer);
 84 |                     var columnElement = _viewContainer.element.nativeElement.parentElement;
 85 |                     columnElement._setTemplate({ templateRef: _templateRef, viewContainerRef: _viewContainer });
 86 |                 }
 87 |                 RowTemplate = __decorate([
 88 |                     core_1.Directive({
 89 |                         selector: '[rowTemplate]'
 90 |                     }), 
 91 |                     __metadata('design:paramtypes', [core_1.TemplateRef, core_1.ViewContainerRef])
 92 |                 ], RowTemplate);
 93 |                 return RowTemplate;
 94 |             })(Template);
 95 |             exports_1("RowTemplate", RowTemplate);
 96 |             HeaderTemplate = (function (_super) {
 97 |                 __extends(HeaderTemplate, _super);
 98 |                 function HeaderTemplate(_templateRef, _viewContainer) {
 99 |                     _super.call(this, _templateRef, _viewContainer);
100 |                     var columnElement = _viewContainer.element.nativeElement.parentElement;
101 |                     columnElement._setHeaderTemplate({ templateRef: _templateRef, viewContainerRef: _viewContainer });
102 |                 }
103 |                 HeaderTemplate = __decorate([
104 |                     core_1.Directive({
105 |                         selector: '[headerTemplate]'
106 |                     }), 
107 |                     __metadata('design:paramtypes', [core_1.TemplateRef, core_1.ViewContainerRef])
108 |                 ], HeaderTemplate);
109 |                 return HeaderTemplate;
110 |             })(Template);
111 |             exports_1("HeaderTemplate", HeaderTemplate);
112 |             DetailsTemplate = (function (_super) {
113 |                 __extends(DetailsTemplate, _super);
114 |                 function DetailsTemplate(_templateRef, _viewContainer) {
115 |                     _super.call(this, _templateRef, _viewContainer);
116 |                     var tableElement = _viewContainer.element.nativeElement.parentElement;
117 |                     tableElement.rowDetail = { templateRef: _templateRef, viewContainerRef: _viewContainer };
118 |                 }
119 |                 DetailsTemplate = __decorate([
120 |                     core_1.Directive({
121 |                         selector: '[detailsTemplate]'
122 |                     }), 
123 |                     __metadata('design:paramtypes', [core_1.TemplateRef, core_1.ViewContainerRef])
124 |                 ], DetailsTemplate);
125 |                 return DetailsTemplate;
126 |             })(Template);
127 |             exports_1("DetailsTemplate", DetailsTemplate);
128 |         }
129 |     }
130 | });
131 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
  1 | import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
  2 | import { getDOM } from '@angular/platform-browser/src/dom/dom_adapter';
  3 | const Polymer:any = (<any>window).Polymer;
  4 | const saulis:any = (<any>window).saulis;
  5 | 
  6 | var dom = getDOM();
  7 | // see https://github.com/Polymer/polymer/issues/3742
  8 | dom.appendChild = function(el, node) {
  9 |   if (node.nodeName === '#comment') {
 10 |     el.appendChild(node);
 11 |   } else {
 12 |     Polymer.dom(el).appendChild(node); Polymer.dom.flush();
 13 |   }
 14 | }
 15 | 
 16 | class RowTemplateContext {
 17 |   constructor() {}
 18 | 
 19 |   notifyPath(path: string, value: any) {
 20 |     this[path] = value;
 21 |   }
 22 | }
 23 | 
 24 | class Template {
 25 |   constructor(
 26 |     _templateRef: TemplateRef<any>,
 27 |     _viewContainer: ViewContainerRef
 28 |     ) {
 29 |       if (!saulis.templatizeSet) {
 30 |         var cell = document.createElement('data-table-cell');
 31 |         var proto = Object.getPrototypeOf(cell);
 32 |         var defaultTemplatize = proto._templatize;
 33 |         var ng2Templatize = function(template) {
 34 |           if (template.templateRef) {
 35 |             var viewRef = template.viewContainerRef.createEmbeddedView(template.templateRef, new RowTemplateContext());
 36 | 
 37 |             // in some cases, default header is already set.
 38 |             if (this._instance) {
 39 |               // remove default header template instance
 40 |               Polymer.dom(this).removeChild(Polymer.dom(this).querySelector('div'));
 41 |             }
 42 |             for (var i = 0; i < viewRef.rootNodes.length; i++) {
 43 |               Polymer.dom(this).appendChild(viewRef.rootNodes[i]);
 44 |             }
 45 | 
 46 |             Polymer.dom.flush();
 47 |             return viewRef.context;
 48 |           } else {
 49 |             return defaultTemplatize.bind(this)(template);
 50 |           }
 51 |         };
 52 | 
 53 |         proto._templatize = ng2Templatize;
 54 |         var detail = document.createElement('data-table-row-detail');
 55 |         Object.getPrototypeOf(detail)._templatize = ng2Templatize;
 56 | 
 57 |         saulis.templatizeSet = true;
 58 |       }
 59 |   }
 60 | }
 61 | 
 62 | @Directive({
 63 |   selector: '[rowTemplate]'
 64 | })
 65 | export class RowTemplate extends Template {
 66 |   constructor(
 67 |     _templateRef: TemplateRef<any>,
 68 |     _viewContainer: ViewContainerRef
 69 |     ) {
 70 |     super(_templateRef, _viewContainer);
 71 |     let columnElement: any = _viewContainer.element.nativeElement.parentElement;
 72 |     columnElement._setTemplate({templateRef: _templateRef, viewContainerRef: _viewContainer});
 73 |   }
 74 | }
 75 | 
 76 | @Directive({
 77 |   selector: '[headerTemplate]'
 78 | })
 79 | export class HeaderTemplate extends Template {
 80 |   constructor(
 81 |     _templateRef: TemplateRef<any>,
 82 |     _viewContainer: ViewContainerRef
 83 |     ) {
 84 |     super(_templateRef, _viewContainer);
 85 |     let columnElement: any = _viewContainer.element.nativeElement.parentElement;
 86 |     columnElement._setHeaderTemplate({templateRef: _templateRef, viewContainerRef: _viewContainer});
 87 |   }
 88 | }
 89 | 
 90 | @Directive({
 91 |   selector: '[detailsTemplate]'
 92 | })
 93 | export class DetailsTemplate extends Template {
 94 |   constructor(
 95 |     _templateRef: TemplateRef<any>,
 96 |     _viewContainer: ViewContainerRef
 97 |     ) {
 98 |     super(_templateRef, _viewContainer);
 99 |     let tableElement: any = _viewContainer.element.nativeElement.parentElement;
100 |     tableElement.rowDetail = {templateRef: _templateRef, viewContainerRef: _viewContainer};
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-iron-data-table",
 3 |   "version": "0.9.0",
 4 |   "description": "Angular 2 directives to support iron-data-table",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Saulis/ng-iron-data-table.git"
12 |   },
13 |   "author": "Sauli Tähkäpää",
14 |   "license": "Apache-2.0",
15 |   "bugs": {
16 |     "url": "https://github.com/Saulis/ng-iron-data-table/issues"
17 |   },
18 |   "homepage": "https://github.com/Saulis/ng-iron-data-table#readme",
19 |   "dependencies": {
20 |     "@angular/common": "^2.0.0-rc.3",
21 |     "@angular/compiler": "^2.0.0-rc.3",
22 |     "@angular/core": "^2.0.0-rc.3",
23 |     "@angular/platform-browser": "^2.0.0-rc.3",
24 |     "@vaadin/angular2-polymer": "^1.0.0-beta1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "system",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": false,
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "removeComments": false,
10 |     "noImplicitAny": false
11 |   },
12 |   "exclude": [
13 |     "bower_components",
14 |     "node_modules",
15 |     "test",
16 |     "demo"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------