From 5b64ae7d2d5452b8099b8b91d0d9be512ec0185c Mon Sep 17 00:00:00 2001
From: Ruby Boyarski <rboyarski@infomedia.com.au>
Date: Tue, 29 Nov 2016 17:54:10 +0200
Subject: [PATCH] feat: Added support for chip events

#178
---
 app/components/chips.ts      |  9 ++++++++-
 src/custom-event-polyfill.ts |  4 ++--
 src/materialize-directive.ts | 12 ++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/components/chips.ts b/app/components/chips.ts
index 19b2df3..24d4780 100644
--- a/app/components/chips.ts
+++ b/app/components/chips.ts
@@ -6,7 +6,7 @@ import {Component} from "@angular/core"
         <div class="chip">Tag1<i class="close material-icons">close</i></div>
         <div class="chip">Tag2<i class="close material-icons">close</i></div>
         <br/><hr/>
-        <div class="chips" materialize="material_chip"></div>
+        <div class="chips" materialize="material_chip" (chip.add)="add($event.detail)" (chip.delete)="delete($event.detail)"></div>
         <div class="chips chips-initial" materialize="material_chip" [materializeParams]="[chipsInit]"></div>
         <div class="chips chips-placeholder" materialize="material_chip" [materializeParams]="[chipsPlaceholder]"></div>
         <br/><hr/>
@@ -29,4 +29,11 @@ export class Chips {
     secondaryPlaceholder: 'Enter a tag',
   };
 
+  add(chip) {
+    console.log("Chip added: " + chip.tag);
+  }
+
+  delete(chip) {
+    console.log("Chip deleted: " + chip.tag);
+  }
 }
diff --git a/src/custom-event-polyfill.ts b/src/custom-event-polyfill.ts
index f19cbb8..627884e 100644
--- a/src/custom-event-polyfill.ts
+++ b/src/custom-event-polyfill.ts
@@ -1,6 +1,6 @@
-export function CustomEvent ( type, params = { bubbles: false, cancelable: false, detail: undefined } ) {
+export function CustomEvent ( type, detail = undefined, params = { bubbles: false, cancelable: false } ) {
     var event = document.createEvent( 'CustomEvent' );
-    event.initCustomEvent( type, params.bubbles, params.cancelable, params.detail );
+    event.initCustomEvent( type, params.bubbles, params.cancelable, detail );
     return event;
 }
 if ("Event" in window) {
diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts
index 0446a80..bcaa691 100644
--- a/src/materialize-directive.ts
+++ b/src/materialize-directive.ts
@@ -148,6 +148,14 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
               picker.set('select', jQueryElement.val(), ...this._params));
       }
 
+      if (this.isChips()) {
+        const nativeElement = this._el.nativeElement;
+        const jQueryElement = $(nativeElement);
+        jQueryElement.on("chip.add", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.add",chip))));
+        jQueryElement.on("chip.delete", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.delete",chip))));
+        jQueryElement.on("chip.select", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.select",chip))));
+      }
+
       if (this.isTextarea()) {
           this._el.nativeElement.dispatchEvent((<any>CustomEvent("autoresize", {bubbles: true, cancelable: false, detail: undefined})));
       }
@@ -209,6 +217,10 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
       return (this._functionName && this._functionName === "pickadate");
     }
 
+    private isChips() {
+      return (this._functionName && this._functionName === "material_chip");
+    }
+
     private isAutocomplete() {
       return (this._functionName && this._functionName === "autocomplete");
     }