docs(itemSliding, itemOptions): update docs

src/components/item/item-sliding.ts

@@ -16,13 +16,40 @@ export const enum SideFlags {
 }
 
 /**
- * @private
+ * @name ItemOptions
+ * @description
+ * The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
+ * You can combind the `(ionSiwpe)` event plus the `expandable` directive to create a full swipe action for the item.
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-item-sliding>
+ *   <ion-item>
+ *     Item 1
+ *   </ion-item>
+ *   <ion-item-options side="right" (ionSwipe)="saveItem(item)">
+ *     <button expandable (click)="saveItem(item)">
+ *       <ion-icon name="star"></ion-icon>
+ *     </button>
+ *   </ion-item-options>
+ * </ion-item-sliding>
+ *```
  */
 @Directive({
   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.
+   */
   @Input() side: string;
+
+  /**
+   * @output {event} Expression to evaluate when the item has been fully swiped.
+   */
   @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter();
 
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
@@ -46,6 +73,9 @@ export class ItemOptions {
     }
   }
 
+  /**
+   * @private
+   */
   width() {
     return this._elementRef.nativeElement.offsetWidth;
   }
@@ -62,70 +92,11 @@ const enum SlidingState {
 
 /**
  * @name ItemSliding
- *
  * @description
  * A sliding item is a list item that can be swiped to reveal buttons. It requires
  * an [Item](../Item) component as a child and a [List](../../list/List) component as
  * a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
  *
- * ### Swipe Direction
- * By default, the buttons are revealed when the sliding item is swiped from right to left,
- * so the buttons are placed in the right side. But it's also possible to reveal them
- * in the right side (sliding from left to right) by setting the `side` attribute
- * on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time
- * in order to reveal two different sets of buttons depending the swipping direction.
- *
- * ```html
- * <ion-item-options side="right">
- *   <button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </button>
- * </ion-item-options>
-
- * <ion-item-options>
- *   <button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </button>
- * </ion-item-options>
- * ```
- *
- * ### Listening for events (ionDrag) and (ionSwipe)
- * It's possible to know the current relative position of the sliding item by subscribing
- * to the (ionDrag)` event.
- *
- * ```html
- * <ion-item-options side="right">
- *   <button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </button>
- * </ion-item-options>
-
- * <ion-item-options>
- *   <button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </button>
- * </ion-item-options>
- * ```
- *
- * ### Button Layout
- * If an icon is placed with text in the option button, by default it will
- * display the icon on top of the text. This can be changed to display the icon
- * to the left of the text by setting `icon-left` as an attribute on the
- * `<ion-item-options>` element.
- *
- * ```html
- * <ion-item-sliding (ionDrag)="ondrag($event)">
- *   <ion-item>Item</ion-item>
- *   <ion-item-options>
- *     <button>Favorite</button>
- *   </ion-item-options>
- * </ion-item-sliding>
- * ```
- *
  * @usage
  * ```html
  * <ion-list>
@@ -145,6 +116,59 @@ const enum SlidingState {
  * </ion-list>
  * ```
  *
+ * ### Swipe Direction
+ * By default, the buttons are revealed when the sliding item is swiped from right to left,
+ * so the buttons are placed in the right side. But it's also possible to reveal them
+ * in the right side (sliding from left to right) by setting the `side` attribute
+ * on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time
+ * in order to reveal two different sets of buttons depending the swipping direction.
+ *
+ * ```html
+ * <ion-item-options side="right">
+ *   <button (click)="archive(item)">
+ *     <ion-icon name="archive"></ion-icon>
+ *     Archive
+ *   </button>
+ * </ion-item-options>
+
+ * <ion-item-options side="left">
+ *   <button (click)="archive(item)">
+ *     <ion-icon name="archive"></ion-icon>
+ *     Archive
+ *   </button>
+ * </ion-item-options>
+ * ```
+ *
+ * ### Listening for events (ionDrag) and (ionSwipe)
+ * It's possible to know the current relative position of the sliding item by subscribing
+ * to the (ionDrag)` event.
+ *
+ * ```html
+ * <ion-item-sliding (ionDrag)="logDrag($event)">
+ *   <ion-item>Item</ion-item>
+ *   <ion-item-options>
+ *     <button>Favorite</button>
+ *   </ion-item-options>
+ * </ion-item-sliding>
+ * ```
+ *
+ * ### Button Layout
+ * If an icon is placed with text in the option button, by default it will
+ * display the icon on top of the text. This can be changed to display the icon
+ * to the left of the text by setting `icon-left` as an attribute on the
+ * `<ion-item-options>` element.
+ *
+ * ```html
+ * <ion-item-options icon-left>
+ *    <button (click)="archive(item)">
+ *      <ion-icon name="archive"></ion-icon>
+ *      Archive
+ *    </button>
+ *  </ion-item-options>
+ *
+ * ```
+ *
+ *
  * @demo /docs/v2/demos/item-sliding/
  * @see {@link /docs/v2/components#lists List Component Docs}
  * @see {@link ../Item Item API Docs}
@@ -169,8 +193,15 @@ export class ItemSliding {
   private _rightOptions: ItemOptions;
   private _optsDirty: boolean = true;
   private _state: SlidingState = SlidingState.Disabled;
+
+  /**
+  * @private
+  * */
   slidingPercent: number = 0;
 
+  /**
+  * @private
+  * */
   @ContentChild(Item) private item: Item;
 
 
@@ -290,6 +321,9 @@ export class ItemSliding {
     return restingPoint;
   }
 
+  /**
+  * @private
+  * */
   fireSwipeEvent() {
     if (this.slidingPercent > SWIPE_FACTOR) {
       this._rightOptions.ionSwipe.emit(this);
@@ -298,6 +332,9 @@ export class ItemSliding {
     }
   }
 
+  /**
+  * @private
+  * */
   calculateOptsWidth() {
     nativeRaf(() => {
       if (this._optsDirty) {
@@ -382,7 +419,7 @@ export class ItemSliding {
   /**
    * Close the sliding item. Items can also be closed from the [List](../../list/List).
    *
-   * The sliding item can be closed by garbbing a reference to `ItemSliding`. In the
+   * The sliding item can be closed by grabbing a reference to `ItemSliding`. In the
    * below example, the template reference variable `slidingItem` is placed on the element
    * and passed to the `share` method.
    *
@@ -437,4 +474,4 @@ function shouldClose(isCloseDirection: boolean, isMovingFast: boolean, isOnClose
     let shouldClose = (!isMovingFast && isOnCloseZone) || (isCloseDirection && isMovingFast);
     return shouldClose;
 }
- 
+