fix(item): allow clicks from within item content

Closes #215

ionic/components/item/item.scss

@@ -63,6 +63,11 @@ ion-item-content {
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
+
+  a,
+  button {
+    pointer-events: auto;
+  }
 }
 
 .item-text-wrap ion-item-content {

ionic/components/item/test/buttons/index.ts

@@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+
+  testClick(ev) {
+    console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
+  }
+
+}

ionic/components/item/test/buttons/main.html

@@ -2,72 +2,72 @@
 
 <ion-list>
 
-  <a ion-item href="#">
+  <a ion-item href="#" (click)="testClick($event)">
     a[ion-item]
   </a>
 
-  <a ion-item class="activated" href="#">
+  <a ion-item class="activated" href="#" (click)="testClick($event)">
     a[ion-item].activated
   </a>
 
-  <button ion-item>
+  <button ion-item (click)="testClick($event)">
     button[ion-item]
   </button>
 
-  <button ion-item class="activated">
+  <button ion-item class="activated" (click)="testClick($event)">
     button[ion-item].activated
   </button>
 
   <ion-item>
-    <button item-left>Default</button>
+    <button item-left (click)="testClick($event)">Default</button>
     Inner Buttons
-    <button outline item-right>Outline</button>
+    <button outline item-right (click)="testClick($event)">Outline</button>
   </ion-item>
 
   <ion-item>
-    <button item-left>
+    <button item-left (click)="testClick($event)">
       <icon home></icon>
       Left Icon
     </button>
     left icon buttons
-    <button outline item-right>
+    <button outline item-right (click)="testClick($event)">
       <icon star></icon>
       Left Icon
     </button>
   </ion-item>
 
   <ion-item>
-    <button item-left>
+    <button item-left (click)="testClick($event)">
       Right Icon
       <icon home></icon>
     </button>
     right icon buttons
-    <button outline item-right>
+    <button outline item-right (click)="testClick($event)">
       Right Icon
       <icon star></icon>
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left>
+    <button clear item-left (click)="testClick($event)">
       <icon navigate></icon>
     </button>
     icon only buttons
-    <button clear item-right>
+    <button clear item-right (click)="testClick($event)">
       <icon navigate></icon>
     </button>
   </ion-item>
 
   <ion-item>
     ion-item right icon/text button
-    <button item-right>
+    <button item-right (click)="testClick($event)">
       <icon refresh></icon>
       Refresh
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left>
+    <button clear item-left (click)="testClick($event)">
       <icon settings></icon>
       Settings
     </button>
@@ -76,15 +76,16 @@
 
   <ion-item>
     ion-item right clear button
-    <button secondary clear item-right>
+    <button secondary clear item-right (click)="testClick($event)">
       Edit
     </button>
   </ion-item>
 
   <ion-item class="item-text-wrap">
     This is multiline text that has a
-    long description of about how the text is really long.
-    <button outline item-right>View</button>
+    long description of about how the text is really long
+    and a <a href="#" (click)="testClick($event)">link</a>.
+    <button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
 
 </ion-list>