Merges PRs from inital repo

README.md

@@ -1,15 +1,17 @@
 # Angular2 Materialize
 
-[![travis build](https://img.shields.io/travis/InfomediaLtd/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/InfomediaLtd/angular2-materialize)
-[![version](https://img.shields.io/npm/v/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize)
-[![downloads](https://img.shields.io/npm/dm/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize)
-[![MIT Licence](https://img.shields.io/npm/l/angular2-materialize.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+**This repo is a fork from [InfomediaLtd/angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) that is not maintained on a regular basis.**
+
+[![travis build](https://img.shields.io/travis/samber/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/samber/angular2-materialize)
+[![version](https://img.shields.io/npm/v/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
+[![downloads](https://img.shields.io/npm/dm/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
+[![MIT Licence](https://img.shields.io/npm/l/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)
 [![PRs Welcome](https://img.shields.io/badge/prs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[![NPM](https://nodei.co/npm/angular2-materialize.png?downloads=true)](https://www.npmjs.com/package/angular2-materialize)
-[![NPM](https://nodei.co/npm-dl/angular2-materialize.png?height=2&months=12)](https://www.npmjs.com/package/angular2-materialize)
+[![NPM](https://nodei.co/npm/@samuelberthe/angular2-materialize.png?downloads=true)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
+[![NPM](https://nodei.co/npm-dl/@samuelberthe/angular2-materialize.png?height=2&months=12)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize)
 
 Angular 2 support for Materialize CSS framework [http://materializecss.com/](http://materializecss.com/)
 
@@ -70,14 +72,14 @@ Apply an empty [MaterializeDirective](https://github.com/InfomediaLtd/angular2-m
 </form>
 ```
 
-The [MaterializeDirective](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc.
+The [MaterializeDirective](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc.
 
 For example, to apply tooltip:
 ```html
 <a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
 ```
 
-The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.
+The [Materialize](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.
 
 Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters:
 
@@ -214,4 +216,3 @@ Another thing you would need to confirm is being able to load web fonts properly
 Notice that the url-loader is required for this to work (npm install it).
 
 The following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize: [InfomediaLtd/angular2-webpack-starter](https://github.com/InfomediaLtd/angular2-webpack-starter)
-

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "angular2-materialize",
+  "name": "@samuelberthe/angular2-materialize",
   "description": "Angular 2 support for Materialize CSS framework",
   "repository": {
     "type": "git",
-    "url": "https://github.com/InfomediaLtd/angular2-materialize.git"
+    "url": "https://github.com/samber/angular2-materialize.git"
   },
+  "version": "1.0.0-rc.2",
   "keywords": [
     "angular",
     "angular2",
@@ -19,9 +20,9 @@
   "author": "Ruby Boyarski <[email protected]>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/InfomediaLtd/angular2-materialize/issues"
+    "url": "https://github.com/samber/angular2-materialize/issues"
   },
-  "homepage": "https://github.com/InfomediaLtd/angular2-materialize#readme",
+  "homepage": "https://github.com/samber/angular2-materialize#readme",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
@@ -32,8 +33,8 @@
     "postsemantic-release": "semantic-release post"
   },
   "peerDependencies": {
-    "materialize-css": "^0.100.1",
-    "@angular/common": "^5.0.0"
+    "materialize-css": "1.0.0-rc.2",
+    "@angular/common": ">=4.0.0"
   },
   "config": {
     "commitizen": {
@@ -62,7 +63,7 @@
     "gulp-typescript": "3.1.6",
     "hammerjs": "^2.0.8",
     "jquery": "^2.2.4",
-    "materialize-css": "^0.100.1",
+    "materialize-css": "1.0.0-rc.1",
     "rollup": "^0.41.6",
     "run-sequence": "1.2.2",
     "rxjs": "^5.1.0",

sample/package.json

@@ -23,10 +23,10 @@
     "hammerjs": "^2.0.8",
     "intl": "1.2.5",
     "jquery": "^2.2.4",
-    "materialize-css": "^0.100.1",
-    "rxjs": "^5.1.0",
-    "web-animations-js": "2.2.4",
-    "zone.js": "0.8.7"
+      "materialize-css": "^1.0.0-rc.2",
+      "rxjs": "^5.1.0",
+      "web-animations-js": "2.2.4",
+      "zone.js": "0.8.7"
   },
   "devDependencies": {
     "@angular/cli": "1.0.3",

sample/src/app/buttons/buttons.component.html

@@ -10,7 +10,7 @@
   <i class="material-icons right">send</i>
 </button>
 <br/><br/>
-<a class="waves-effect waves-light btn no-upper-case" (click)="updateTextFields()">Call Materialize.updateTextFields()</a>
+<a class="waves-effect waves-light btn no-upper-case" (click)="updateTextFields()">Call M.updateTextFields()</a>
 
 <br/>
 <br/>
@@ -40,4 +40,3 @@ <h5>Title</h5>
     <p>A bunch of text</p>
   </div>
 </div>
-

sample/src/app/buttons/buttons.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, OnInit } from '@angular/core';
 import { Router } from "@angular/router";
 import {MaterializeAction} from "angular2-materialize"
 
-declare var Materialize:any;
+declare var M:any;
 
 @Component({
   selector: 'app-buttons',
@@ -23,7 +23,7 @@ export class ButtonsComponent implements OnInit {
   }
 
   updateTextFields() {
-    Materialize.updateTextFields();
+    M.updateTextFields();
     console.log("updateTextFields called");
   }
 

sample/src/app/components/datepicker.ts

@@ -1,7 +1,7 @@
 import {Component, EventEmitter} from '@angular/core';
 import {MaterializeAction} from '../../../lib/materialize-directive';
 import {FormBuilder, FormGroup, FormControl} from '@angular/forms';
-declare var Materialize: any;
+declare var M: any;
 
 @Component({
     selector: "datePicker",
@@ -19,35 +19,35 @@ declare var Materialize: any;
           <div class="col s6">
              <label for="birthtime">Birthtime {{birthTime}}</label>
              <input id="birthtime" name="birthtime" [(ngModel)]="birthTime"
-                    materialize="pickatime" 
+                    materialize="pickatime"
                     [materializeActions]="birthTimeActions"
                     [materializeParams]="[{twelvehour: false}]"
                     placeholder="00:00" class="validate" type="text">
           </div>
-          
+
     </div>
     <div class="row">
           <div class="col s6">
             <a class="waves-effect waves-light btn" (click)="openDatePicker()">Open Date Picker</a>
           </div>
-            
+
           <div class="col s3">
            <a class="waves-effect waves-light btn" (click)="setTime('01:15')">Set Time to 01:15</a>
           </div>
           <div class="col s3">
            <a class="waves-effect waves-light btn" (click)="openTimePicker()">Open Time Picker</a>
           </div>
     </div>
-    
+
     <div class="row"></div>
     <div class="row"></div>
-    
+
     <div class="row"><h4>Form Binding</h4></div>
-    
+
     <form [formGroup]="form" materialize class="col s12">
         <div class="row">
            <div class="col s4">
-          
+
             <label for="birthdate2">Birthdate {{form.value.fromDate}}</label>
             <input id="birthdate2" name="birthdate2" formControlName="fromDate"
                    materialize="pickadate"

sample/src/app/components/dialogs.ts

@@ -42,8 +42,8 @@ import {Component,EventEmitter} from "@angular/core"
       <br/><br/>
 
       <!-- toast -->
-      <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast 1!</a>
-      <a class="btn" (click)="triggerToast()" materialize [materializeParams]="['I am also a toast',4000]" [materializeActions]="globalActions">Toast 2!</a>
+      <a class="btn" onclick="M.toast('I am a toast', 4000)">Toast 1!</a>
+<a class="btn" (click)="triggerToast()" materialize [materializeParams]="['I am also a toast',4000]" [materializeActions]="globalActions">Toast 2!</a>
     `
 })
 export class Dialogs {

sample/src/app/components/model-bindings/model-bindings.ts

@@ -3,7 +3,7 @@ import {Option} from "./option";
 import {MaterialInput} from "./input";
 import {MaterialSelect} from "./select";
 import {MaterializeDirective} from "angular2-materialize";
-import * as Materialize from "angular2-materialize";
+import * as M from "angular2-materialize";
 import "rxjs";
 import {Observable} from "rxjs/Observable";
 
@@ -86,11 +86,11 @@ export class ModelBindings {
     }
 
     onInputValChange(val){
-        Materialize.toast(`parent input: ${val}`, 500)
+        M.toast(`parent input: ${val}`, 500)
     }
 
     onSelectValChange(val){
-        Materialize.toast(`parent select: ${val}`, 2000)
+        M.toast(`parent select: ${val}`, 2000)
     }
 
     onCountryChange(e) {

src/custom-event-polyfill.ts

@@ -3,7 +3,7 @@ export function CustomEvent ( type, detail = undefined, params = { bubbles: fals
     event.initCustomEvent( type, params.bubbles, params.cancelable, detail );
     return event;
 }
-if ("Event" in window) {
+if ("undefined"!=typeof window && "Event" in window) {
     CustomEvent.prototype = (window as any).Event.prototype;
 }
 

src/index.ts

@@ -1,27 +1,29 @@
-export {MaterializeDirective,MaterializeAction} from "./materialize-directive";
-export {MaterializeModule} from "./materialize-module";
+export { MaterializeDirective, MaterializeAction } from "./materialize-directive";
+export { MaterializeModule } from "./materialize-module";
 
-if (!("Materialize" in window)) {
-  throw new Error("Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.");
-}
-if (!("Waves" in window)) {
-  throw new Error("Couldn't find Waves object on window. It is supposed to be created by the materialize-css library. Please import materialize-css before importing angular2-materialize.");
-}
 
-declare var Waves:any;
-Waves.displayEffect();
+declare var Waves: any;
+declare var M: any;
+
+if ("undefined" != typeof window) {
+    if (!("M" in window)) {
+        throw new Error("Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.");
+    }
+    if (!("Waves" in window)) {
+        throw new Error("Couldn't find Waves object on window. It is supposed to be created by the materialize-css library. Please import materialize-css before importing angular2-materialize.");
+    }
 
-declare var Materialize:any;
+  Waves.displayEffect();
+  // polyfill remove any elem in DOM - https://github.com/InfomediaLtd/angular2-materialize/issues/377 (IE)
+  if (!Element.prototype.remove) {
+    Element.prototype.remove = function remove() {
+      if (this.parentNode) {
+        this.parentNode.removeChild(this);
+      }
+    };
+  }
+}
 
 export function toast(...args) {
-  Materialize.toast(...args);
+  M.toast(...args);
 }
-
-// polyfill remove any elem in DOM - https://github.com/InfomediaLtd/angular2-materialize/issues/377 (IE)
-if (!Element.prototype.remove) {
-  Element.prototype.remove = function remove() {
-    if (this.parentNode) {
-      this.parentNode.removeChild(this);
-    }
-  };
-}