fix(item): sliding item events are zone wrapped

fixes #7630

Author: manucorporat

src/components/item/item-sliding.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, Directive, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, Directive, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation, NgZone } from '@angular/core';
 
 import { CSS, nativeRaf, nativeTimeout, clearNativeTimeout } from '../../util/dom';
 import { Item } from './item';
@@ -40,7 +40,6 @@ export const enum ItemSideFlags {
   selector: 'ion-item-options',
 })
 export class ItemOptions {
-
   /**
    * @input {string} the side the option button should be on. Defaults to right
    * If you have multiple `ion-item-options`, a side must be provided for each.
@@ -54,13 +53,6 @@ export class ItemOptions {
 
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {}
 
-  /**
-   * @private
-   */
-  setCssStyle(property: string, value: string) {
-    this._renderer.setElementStyle(this._elementRef.nativeElement, property, value);
-  }
-
   /**
    * @private
    */
@@ -225,10 +217,14 @@ export class ItemSliding {
    */
   @Output() ionDrag: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>();
 
-  constructor( @Optional() list: List, private _renderer: Renderer, private _elementRef: ElementRef) {
+  constructor(
+    @Optional() list: List,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef,
+    private _zone: NgZone) {
     list && list.containsSlidingItem(true);
     _elementRef.nativeElement.$ionComponent = this;
-    this._setCssClass('item-wrapper', true);
+    this.setElementClass('item-wrapper', true);
   }
 
   @ContentChildren(ItemOptions)
@@ -341,9 +337,9 @@ export class ItemSliding {
    */
   private fireSwipeEvent() {
     if (this._state & SlidingState.SwipeRight) {
-      this._rightOptions.ionSwipe.emit(this);
+      this._zone.run(() => this._rightOptions.ionSwipe.emit(this));
     } else if (this._state & SlidingState.SwipeLeft) {
-      this._leftOptions.ionSwipe.emit(this);
+      this._zone.run(() => this._leftOptions.ionSwipe.emit(this));
     }
   }
 
@@ -404,18 +400,18 @@ export class ItemSliding {
     }
 
     this.item.setElementStyle(CSS.transform, `translate3d(${-openAmount}px,0,0)`);
-    this.ionDrag.emit(this);
+    this._zone.run(() => this.ionDrag.emit(this));
   }
 
   private _setState(state: SlidingState) {
     if (state === this._state) {
       return;
     }
-    this._setCssClass('active-slide', (state !== SlidingState.Disabled));
-    this._setCssClass('active-options-right', !!(state & SlidingState.Right));
-    this._setCssClass('active-options-left', !!(state & SlidingState.Left));
-    this._setCssClass('active-swipe-right', !!(state & SlidingState.SwipeRight));
-    this._setCssClass('active-swipe-left', !!(state & SlidingState.SwipeLeft));
+    this.setElementClass('active-slide', (state !== SlidingState.Disabled));
+    this.setElementClass('active-options-right', !!(state & SlidingState.Right));
+    this.setElementClass('active-options-left', !!(state & SlidingState.Left));
+    this.setElementClass('active-swipe-right', !!(state & SlidingState.SwipeRight));
+    this.setElementClass('active-swipe-left', !!(state & SlidingState.SwipeLeft));
     this._state = state;
   }
 
@@ -461,16 +457,9 @@ export class ItemSliding {
   /**
    * @private
    */
-  _setCssClass(cssClass: string, shouldAdd: boolean) {
+  setElementClass(cssClass: string, shouldAdd: boolean) {
     this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
   }
-
-  /**
-   * @private
-   */
-  _setCssStyle(property: string, value: string) {
-    this._renderer.setElementStyle(this._elementRef.nativeElement, property, value);
-  }
 }
 
 function shouldClose(isCloseDirection: boolean, isMovingFast: boolean, isOnCloseZone: boolean): boolean {

src/components/item/test/sliding/app-module.ts

@@ -87,14 +87,14 @@ export class E2EPage {
   }
 
   download(item: ItemSliding) {
-    item._setCssClass('downloading', true);
+    item.setElementClass('downloading', true);
     setTimeout(() => {
       const toast = this.toastCtrl.create({
         message: 'Item was downloaded!'
       });
       toast.present();
 
-      item._setCssClass('downloading', false);
+      item.setElementClass('downloading', false);
       item.close();
       setTimeout(() => {
         toast.dismiss();