fix(item-sliding): expose item sliding methods

packages/core/src/components.d.ts

@@ -1243,6 +1243,8 @@ declare global {
           mode?: string,
           color?: string,
         
+          isRightSide?: any,
+          width?: any,
           side?: string
       }
   }
@@ -1425,6 +1427,8 @@ declare global {
           mode?: string,
           color?: string,
         
+          getOpenedItem?: any,
+          setOpenedItem?: any,
           closeSlidingItems?: any
       }
   }

packages/core/src/components/item-sliding/item-options.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
 import { Side, isRightSide } from '../../utils/helpers';
 
 
@@ -40,18 +40,12 @@ export class ItemOptions {
    */
   @Event() ionSwipe: EventEmitter;
 
-  /**
-   * @hidden
-   */
-  isRightSide(): boolean {
+  @Method() isRightSide() {
     const isRTL = document.dir === 'rtl';
     return isRightSide(this.side, isRTL, true);
   }
 
-  /**
-   * @hidden
-   */
-  width(): number {
+  @Method() width(): number {
     return this.el.offsetWidth;
   }
 

packages/core/src/components/item-sliding/item-sliding.tsx

@@ -2,8 +2,8 @@ import { Component, Element, Event, EventEmitter, Method, State } from '@stencil
 
 import { GestureDetail, HTMLIonItemElement, HTMLIonListElement } from '../../index';
 import { swipeShouldReset } from '../../utils/helpers';
+import { ItemOptions } from './item-options';
 
-// import { ItemOptions } from './item-options';
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
@@ -147,11 +147,8 @@ export class ItemSliding {
   private sides: number;
   private tmr: any = null;
 
-  // TODO file with item sliding interfaces & item options implement
-  // leftOptions: ItemOptions;
-  // rightOptions: ItemOptions;
-  private leftOptions: any;
-  private rightOptions: any;
+  private leftOptions: ItemOptions;
+  private rightOptions: ItemOptions;
 
   private optsDirty: boolean = true;
 
@@ -222,7 +219,7 @@ export class ItemSliding {
     let container = this;
 
     // Close open container if it is not the selected one.
-    if (this.list && container !== this.list.openContainer) {
+    if (this.list && container !== this.list.getOpenedItem()) {
       this.closeOpened();
     }
 
@@ -234,7 +231,8 @@ export class ItemSliding {
   }
 
   onDragStart(gesture: GestureDetail) {
-    this.selectedContainer = this.list.openContainer = this.preSelectedContainer;
+    this.selectedContainer = this.preSelectedContainer;
+    this.list.setOpenedItem(this.selectedContainer);
     this.selectedContainer.startSliding(gesture.currentX);
   }
 
@@ -254,7 +252,7 @@ export class ItemSliding {
   closeOpened(): boolean {
     this.selectedContainer = null;
 
-    if (this.list.openContainer) {
+    if (this.list.getOpenedItem()) {
       this.list.closeSlidingItems();
       return true;
     }

packages/core/src/components/list/list.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop, State } from '@stencil/core';
+import { Component, Method } from '@stencil/core';
 
 import { ItemSliding } from '../item-sliding/item-sliding';
 
@@ -15,19 +15,25 @@ import { ItemSliding } from '../item-sliding/item-sliding';
   }
 })
 export class List {
+  private openedItem: ItemSliding;
 
-  @State() openContainer: ItemSliding;
+  @Method()
+  getOpenedItem() {
+    return this.openedItem;
+  }
+
+  @Method()
+  setOpenedItem(itemSliding: ItemSliding) {
+    this.openedItem = itemSliding;
+  }
+
+  @Method()
+  closeSlidingItems() {
+    this.openedItem && this.openedItem.close();
+    this.openedItem = null;
+  }
 
   protected render() {
     return <slot></slot>;
   }
-
-  /**
-   * Close any sliding items that are open.
-   */
-  @Method()
-  closeSlidingItems() {
-    this.openContainer.close();
-    this.openContainer = null;
-  }
 }