fix(tap): activated/ripple on ion-item-sliding

Closes #413

ionic/components/item/item-sliding.ts

@@ -46,7 +46,7 @@ export class ItemSlidingOptionButton {
  *  ```
  */
 @Component({
-  selector: 'ion-item-sliding,[ion-item-sliding]',
+  selector: 'ion-item-sliding',
   inputs: [
     'sliding'
   ],
@@ -68,6 +68,7 @@ export class ItemSliding {
   constructor(elementRef: ElementRef, renderer: Renderer, @Optional() @Host() list: List, zone: NgZone) {
     this._zone = zone;
     renderer.setElementClass(elementRef, 'item', true);
+    renderer.setElementAttribute(elementRef, 'tappable', '');
 
     this._isOpen = false;
     this._isSlideActive = false;

ionic/components/item/modes/ios.scss

@@ -203,7 +203,8 @@ ion-note {
 
 .item.activated,
 a.item.activated,
-button.item.activated {
+button.item.activated,
+.item.activated ion-item-sliding-content {
   background-color: $item-ios-activated-background-color;
   transition-duration: 0ms;
 }

ionic/components/item/modes/md.scss

@@ -246,13 +246,17 @@ ion-note {
 
 .item,
 a.item,
-button.item {
+button.item,
+.item ion-item-sliding-content {
   transition: background-color $button-md-transition-duration $button-md-animation-curve;
+}
 
-  &.activated {
-    background-color: $item-md-activated-background-color;
-    box-shadow: none;
-  }
+.item.activated,
+a.item.activated,
+button.item.activated,
+.item.activated ion-item-sliding-content {
+  background-color: $item-md-activated-background-color;
+  box-shadow: none;
 }
 
 .item[no-lines] {

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

@@ -13,7 +13,7 @@
     </ion-item-options>
   </ion-item-sliding>
 
-  <ion-item-sliding text-wrap detail-push>
+  <ion-item-sliding text-wrap detail-push class="activated">
     <h3>Adam Bradley</h3>
     <p>
       I think I figured out how to get more Mountain Dew

ionic/components/tap-click/ripple.scss

@@ -18,3 +18,7 @@ md-ripple {
 
   transform: scale(0.001) translateZ(0);
 }
+
+ion-item-sliding md-ripple {
+  z-index: 2;
+}

ionic/components/tap-click/tap-click.ts

@@ -174,14 +174,14 @@ function getActivatableTarget(ele) {
   return null;
 }
 
-function isActivatable(ele) {
-  if (/^(A|BUTTON)$/.test(ele.tagName)) {
+export function isActivatable(ele) {
+  if (ACTIVATABLE_ELEMENTS.test(ele.tagName)) {
     return true;
   }
 
   let attributes = ele.attributes;
   for (let i = 0, l = attributes.length; i < l; i++) {
-    if (/click|tappable/.test(attributes[i].name)) {
+    if (ACTIVATABLE_ATTRIBUTES.test(attributes[i].name)) {
       return true;
     }
   }
@@ -200,3 +200,6 @@ function addListener(type, listener, useCapture) {
 function removeListener(type, listener) {
   doc.removeEventListener(type, listener);
 }
+
+const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/;
+const ACTIVATABLE_ATTRIBUTES = /tappable/;

ionic/components/tap-click/test/tapClick.spec.ts

@@ -0,0 +1,44 @@
+import * as tapClick from 'ionic/ionic';
+
+export function run() {
+
+  describe("TapClick", () => {
+
+    describe("isActivatable", () => {
+
+      it('should be activatable on <a> element', () => {
+        let ele = document.createElement('a');
+        expect( tapClick.isActivatable(ele) ).toBe(true);
+      });
+
+      it('should be activatable on <button> element', () => {
+        let ele = document.createElement('button');
+        expect( tapClick.isActivatable(ele) ).toBe(true);
+      });
+
+      it('should be activatable on <ion-item-sliding> element', () => {
+        let ele = document.createElement('ion-item-sliding');
+        expect( tapClick.isActivatable(ele) ).toBe(true);
+      });
+
+      it('should be not activatable on <ion-item> element', () => {
+        let ele = document.createElement('ion-item');
+        expect( tapClick.isActivatable(ele) ).toBe(false);
+      });
+
+      it('should be not activatable on <div> element', () => {
+        let ele = document.createElement('div');
+        expect( tapClick.isActivatable(ele) ).toBe(false);
+      });
+
+      it('should be activatable with "tappable" attribute', () => {
+        let ele = document.createElement('div');
+        ele.setAttribute('tappable', true);
+        expect( tapClick.isActivatable(ele) ).toBe(true);
+      });
+
+    });
+
+  });
+
+}