From 421f637f96bfd4fc6a1edb8e8b3c628cfe3b2bb7 Mon Sep 17 00:00:00 2001
From: Lee Nathan <leetheguy@gmail.com>
Date: Thu, 11 Aug 2016 14:26:55 -0700
Subject: [PATCH] feat(chips): added Chip component

---
 src/components/chip/chip.ts | 55 +++++++++++++++++++++++++++++++++++++
 src/config/directives.ts    |  3 ++
 2 files changed, 58 insertions(+)
 create mode 100644 src/components/chip/chip.ts

diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
new file mode 100644
index 00000000000..21c7429d9bc
--- /dev/null
+++ b/src/components/chip/chip.ts
@@ -0,0 +1,55 @@
+import { Directive, ElementRef, Renderer, Attribute } from '@angular/core';
+
+import { Config } from '../../config/config';
+
+/**
+  * @name Chip
+  * @module ionic
+  * @description
+  * Chips represent complex entities in small blocks, such as a contact.
+  * @see {@link /docs/v2/components/#chips Chips Component Docs}
+ **/
+
+@Directive({
+  selector: 'ion-chip'
+})
+export class Chip {
+
+  constructor(
+    config: Config,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer
+  ) {
+    let element = _elementRef.nativeElement;
+
+    this._readAttrs(element);
+  }
+
+  /**
+   * @private
+   */
+  private _readAttrs(element: HTMLElement) {
+    let elementAttrs = element.attributes;
+    let attrName: string;
+
+    console.info("mushroom");
+
+    for (let i = 0, l = elementAttrs.length; i < l; i++) {
+      if (elementAttrs[i].value !== '') continue;
+
+      attrName = elementAttrs[i].name;
+
+      // Ignore attributes item-left, item-right
+      if (attrName.indexOf('item') === -1) {
+        this._setClass(attrName);
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _setClass(color: string) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'chip-' + color, true);
+  }
+}
diff --git a/src/config/directives.ts b/src/config/directives.ts
index 18e38598f02..f33759236ce 100644
--- a/src/config/directives.ts
+++ b/src/config/directives.ts
@@ -46,6 +46,7 @@ import { NavPush } from '../components/nav/nav-push';
 import { NavbarTemplate, Navbar } from '../components/navbar/navbar';
 import { ShowWhen, HideWhen } from '../components/show-hide-when/show-hide-when';
 import { Typography } from '../components/typography/typography';
+import { Chip } from '../components/chip/chip';
 
 /**
  * @private
@@ -67,6 +68,7 @@ import { Typography } from '../components/typography/typography';
  * - MenuClose
  * - Badge
  * - Button
+ * - Chip
  * - Content
  * - Scroll
  * - InfiniteScroll
@@ -131,6 +133,7 @@ export const IONIC_DIRECTIVES: any[] = [
   Backdrop,
   Badge,
   Button,
+  Chip,
   Content,
   Scroll,
   InfiniteScroll,