feat(chips): finished Component

Author: Lee Nathan

src/components/chip/chip.scss

@@ -12,7 +12,7 @@ $chip-margin:                2px 0 !default;
 
 $chip-label-color:           rgba(0, 0, 0, .87) !default;
 $chip-icon-color:            rgba(0, 0, 0, .87) !default;
-$chip-remove-color:          rgba(137, 137, 137, .54) !default;
+$chip-remove-icon-color:          rgba(137, 137, 137, .54) !default;
 
 ion-chip {
   display: inline-flex;
@@ -87,6 +87,6 @@ ion-chip {
 
     font-size: 1.4em;
 
-    color: $chip-remove-color;
+    color: $chip-remove-icon-color;
   }
 }

src/components/chip/chip.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Renderer, Attribute } from '@angular/core';
+import { Component, ElementRef, Renderer, Attribute } from '@angular/core';
 
 import { Config } from '../../config/config';
 
@@ -10,10 +10,13 @@ import { Config } from '../../config/config';
   * @see {@link /docs/v2/components/#chips Chips Component Docs}
  **/
 
-@Directive({
-  selector: 'ion-chip'
+@Component({
+  selector: 'ion-chip',
+  template: '<span class="hide"><ng-content></ng-content></span><ion-label></ion-label><button clear dark (click)="deleteChip()" *ngIf="deletable"><ion-icon name="close-circle"></ion-icon></button>'
 })
+
 export class Chip {
+  private deletable: boolean = false;
 
   constructor(
     config: Config,
@@ -25,31 +28,84 @@ export class Chip {
     this._readAttrs(element);
   }
 
+  /**
+   * @private
+   */
+   ngOnInit() {
+     this._fixContent(this._elementRef.nativeElement);
+   }
+
   /**
    * @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);
+      if (attrName === 'deletable') {
+        this._setDeletable();
       }
     }
   }
 
   /**
    * @private
    */
-  private _setClass(color: string) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, 'chip-' + color, true);
+  private deleteChip() {
+      this._elementRef.nativeElement.remove();
+  }
+
+  /**
+   * @private
+   */
+  private _setDeletable() {
+    this.deletable = true;
+  }
+
+
+  /**
+   * @private
+   */
+  private _fixContent(element: HTMLElement) {
+    // Take the first text node and add it to the label.
+    // Take the first icon or avatar and add it to the chip.
+    // Discard everything else.
+
+    let childNodes: NodeList = element.childNodes;
+    let innerNode:  Node     = childNodes[0];
+    let labelNode:  Node     = childNodes[1];
+    let addedNodes: NodeList = innerNode.childNodes;
+    element.removeChild(innerNode);
+
+    let missing = {image: true, text: true};
+    let childNode: Node;
+    let imageNode: Node;
+    let text: string;
+    for (let i = 0, l = addedNodes.length; i < l; i++) {
+      childNode = addedNodes[i];
+      if (childNode.nodeType === 3 && missing.text) {
+        text = childNode.textContent.trim();
+        if (text !== '') {
+          labelNode.textContent = text;
+          missing.text = false;
+        }
+      }
+      if (childNode.nodeType === 1 && missing.image) {
+        name = childNode.nodeName;
+        if (childNode.nodeName === 'ION-ICON' || childNode.nodeName === 'ION-AVATAR') {
+          missing.image = false;
+          imageNode = childNode;
+        }
+      }
+    }
+    if (imageNode) {
+      element.insertBefore(imageNode, element.firstChild);
+    }
   }
 }

src/components/chip/test/basic/main.html

@@ -11,12 +11,12 @@
 
   <p>
     <ion-chip>
-      <ion-label>Default</ion-label>
+      Default
     </ion-chip>
   </p>
   <p>
     <ion-chip>
-      <ion-label>Another Longer Text</ion-label>
+      Another With Longer Text
     </ion-chip>
   </p>
 

src/components/chip/test/delete/main.html

@@ -10,33 +10,38 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <ion-chip>
-      <ion-label>Default</ion-label>
-      <button ion-button icon-only clear dark (click)="deleteClicked()">
-        <ion-icon name="close-circle"></ion-icon>
-      </button>
+    <ion-chip deletable>
+      Default
     </ion-chip>
   </p>
 
   <p>
-    <ion-chip>
+    <ion-chip deletable>
       <ion-icon name="pin" primary></ion-icon>
-      <ion-label>Primary</ion-label>
-      <button ion-button icon-only clear dark (click)="deleteClicked()">
-        <ion-icon name="close-circle"></ion-icon>
-      </button>
+      With Icon
     </ion-chip>
   </p>
 
   <p>
-    <ion-chip>
+    <ion-chip deletable>
       <ion-avatar>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
-      <ion-label>Default</ion-label>
-      <button ion-button icon-only clear dark (click)="deleteClicked()">
-        <ion-icon name="close-circle"></ion-icon>
-      </button>
+      With Avatar
+    </ion-chip>
+  </p>
+
+  <p>
+    <ion-chip deletable>
+      <b>This Should Not Be Seen</b>
+
+      With Junk Elements
+      <ion-icon name="pin" primary></ion-icon>
+      <ion-avatar>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <hr>
+      This Should Not Be Seen Either
     </ion-chip>
   </p>
 

src/components/chip/test/icon/main.html

@@ -12,37 +12,37 @@
   <p>
     <ion-chip>
       <ion-icon name="pin"></ion-icon>
-      <ion-label>Default</ion-label>
+      Default
     </ion-chip>
   </p>
   <p>
     <ion-chip>
       <ion-icon name="pin" primary></ion-icon>
-      <ion-label>Primary</ion-label>
+      Primary
     </ion-chip>
   </p>
   <p>
     <ion-chip>
       <ion-icon name="pin" secondary></ion-icon>
-      <ion-label>Secondary</ion-label>
+      Secondary
     </ion-chip>
   </p>
   <p>
     <ion-chip>
       <ion-icon name="pin" danger></ion-icon>
-      <ion-label>Danger</ion-label>
+      Danger
     </ion-chip>
   </p>
   <p>
     <ion-chip>
       <ion-icon name="pin" light></ion-icon>
-      <ion-label>Light</ion-label>
+      Light
     </ion-chip>
   </p>
   <p>
     <ion-chip>
       <ion-icon name="pin" dark></ion-icon>
-      <ion-label>Dark</ion-label>
+      Dark
     </ion-chip>
   </p>
 

src/components/chip/test/image/main.html

@@ -14,7 +14,7 @@
       <ion-avatar>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
-      <ion-label>Default</ion-label>
+      Default
     </ion-chip>
   </p>