chore(item-sliding): move item-options, item-option to separate directories

packages/core/src/components.d.ts

@@ -1252,7 +1252,7 @@ declare global {
 
 import {
   ItemOption as IonItemOption
-} from './components/item-sliding/item-option';
+} from './components/item-option/item-option';
 
 declare global {
   interface HTMLIonItemOptionElement extends IonItemOption, HTMLElement {
@@ -1286,7 +1286,7 @@ declare global {
 
 import {
   ItemOptions as IonItemOptions
-} from './components/item-sliding/item-options';
+} from './components/item-options/item-options';
 
 declare global {
   interface HTMLIonItemOptionsElement extends IonItemOptions, HTMLElement {

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

@@ -1,12 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 
-/**
+
- * @name ItemOption
- * @description
- * The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
- * You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
- * action for the item.
- */
 @Component({
   tag: 'ion-item-option',
   host: {

packages/core/src/components/item-option/readme.md

@@ -0,0 +1,58 @@
+# ion-item-option
+
+The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
+You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
+action for the item.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### color
+
+string
+
+
+#### disabled
+
+boolean
+
+
+#### href
+
+string
+
+
+#### mode
+
+any
+
+
+## Attributes
+
+#### color
+
+string
+
+
+#### disabled
+
+boolean
+
+
+#### href
+
+string
+
+
+#### mode
+
+any
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

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

@@ -2,27 +2,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
 import { Side, isRightSide } from '../../utils/helpers';
 
 
-/**
- * @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 combine the `(ionSwipe)` 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)">
- *     <ion-item-option expandable (click)="saveItem(item)">
- *       <ion-icon name="star"></ion-icon>
- *     </ion-item-option>
- *   </ion-item-options>
- * </ion-item-sliding>
- *```
- */
 @Component({
   tag: 'ion-item-options'
 })

packages/core/src/components/item-options/readme.md

@@ -0,0 +1,57 @@
+# ion-item-options
+
+The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
+You can combine the `(ionSwipe)` event plus the `expandable` directive to create a full swipe action for the item.
+
+
+```html
+<ion-item-sliding>
+  <ion-item>
+    Item 1
+  </ion-item>
+  <ion-item-options side="right" (ionSwipe)="saveItem(item)">
+    <ion-item-option expandable (click)="saveItem(item)">
+      <ion-icon name="star"></ion-icon>
+    </ion-item-option>
+  </ion-item-options>
+</ion-item-sliding>
+```
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### side
+
+any
+
+
+## Attributes
+
+#### side
+
+any
+
+
+## Events
+
+#### ionSwipe
+
+
+## Methods
+
+#### fireSwipeEvent()
+
+
+#### isRightSide()
+
+
+#### width()
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

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

@@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Method, State } from '@stencil
 
 import { GestureDetail } from '../../index';
 import { swipeShouldReset } from '../../utils/helpers';
-import { ItemOptions } from './item-options';
+import { ItemOptions } from '../item-options/item-options';
 
 
 const SWIPE_MARGIN = 30;
@@ -26,107 +26,6 @@ export 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.
- *
- * @usage
- * ```html
- * <ion-list>
- *   <ion-item-sliding #item>
- *     <ion-item>
- *       Item
- *     </ion-item>
- *     <ion-item-options side="left">
- *       <ion-button (click)="favorite(item)">Favorite</ion-button>
- *       <ion-button color="danger" (click)="share(item)">Share</ion-button>
- *     </ion-item-options>
- *
- *     <ion-item-options side="right">
- *       <ion-button (click)="unread(item)">Unread</ion-button>
- *     </ion-item-options>
- *   </ion-item-sliding>
- * </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">
- *   <ion-button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </ion-button>
- * </ion-item-options>
- *
- * <ion-item-options side="left">
- *   <ion-button (click)="archive(item)">
- *     <ion-icon name="archive"></ion-icon>
- *     Archive
- *   </ion-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>
- *     <ion-button>Favorite</ion-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-start` as an attribute on the
- * `<ion-item-options>` element.
- *
- * ```html
- * <ion-item-options icon-start>
- *    <ion-button (click)="archive(item)">
- *      <ion-icon name="archive"></ion-icon>
- *      Archive
- *    </ion-button>
- *  </ion-item-options>
- *
- * ```
- *
- * ### Expandable Options
- *
- * Options can be expanded to take up the full width of the item if you swipe past
- * a certain point. This can be combined with the `ionSwipe` event to call methods
- * on the class.
- *
- * ```html
- *
- * <ion-item-sliding (ionSwipe)="delete(item)">
- *   <ion-item>Item</ion-item>
- *   <ion-item-options>
- *     <ion-button expandable (click)="delete(item)">Delete</ion-button>
- *   </ion-item-options>
- * </ion-item-sliding>
- * ```
- *
- * We can call `delete` by either clicking the button, or by doing a full swipe on the item.
- *
- * @demo /docs/demos/src/item-sliding/
- * @see {@link /docs/components#lists List Component Docs}
- * @see {@link ../Item Item API Docs}
- * @see {@link ../../list/List List API Docs}
- */
 @Component({
   tag: 'ion-item-sliding',
   styleUrls: {

packages/core/src/components/item-sliding/readme.md

@@ -1,52 +1,125 @@
-# ion-item-option
+# ion-item-sliding
+
+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.
+
+@usage
+```html
+<ion-list>
+  <ion-item-sliding #item>
+    <ion-item>
+      Item
+    </ion-item>
+    <ion-item-options side="left">
+      <ion-button (click)="favorite(item)">Favorite</ion-button>
+      <ion-button color="danger" (click)="share(item)">Share</ion-button>
+    </ion-item-options>
+
+    <ion-item-options side="right">
+      <ion-button (click)="unread(item)">Unread</ion-button>
+    </ion-item-options>
+  </ion-item-sliding>
+</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">
+  <ion-button (click)="archive(item)">
+    <ion-icon name="archive"></ion-icon>
+    Archive
+  </ion-button>
+</ion-item-options>
+
+<ion-item-options side="left">
+  <ion-button (click)="archive(item)">
+    <ion-icon name="archive"></ion-icon>
+    Archive
+  </ion-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>
+    <ion-button>Favorite</ion-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-start` as an attribute on the
+`<ion-item-options>` element.
+
+```html
+<ion-item-options icon-start>
+   <ion-button (click)="archive(item)">
+     <ion-icon name="archive"></ion-icon>
+     Archive
+   </ion-button>
+ </ion-item-options>
+
+```
+
+
+### Expandable Options
+
+Options can be expanded to take up the full width of the item if you swipe past
+a certain point. This can be combined with the `ionSwipe` event to call methods
+on the class.
+
+```html
+
+<ion-item-sliding (ionSwipe)="delete(item)">
+  <ion-item>Item</ion-item>
+  <ion-item-options>
+    <ion-button expandable (click)="delete(item)">Delete</ion-button>
+  </ion-item-options>
+</ion-item-sliding>
+```
+
+We can call `delete` by either clicking the button, or by doing a full swipe on the item.
 
 
 
 <!-- Auto Generated Below -->
 
 
-## Properties
+## Events
 
-#### color
+#### ionDrag
-
-string
 
 
-#### disabled
+## Methods
 
-boolean
+#### close()
 
 
-#### href
+#### closeOpened()
-
-string
 
 
-#### mode
+#### getOpenAmount()
-
-any
 
 
-## Attributes
+#### getSlidingPercent()
-
-#### color
-
-string
-
-
-#### disabled
-
-boolean
-
-
-#### href
-
-string
-
-
-#### mode
-
-any
 
 
 

packages/core/src/index.d.ts

@@ -53,7 +53,7 @@ export { InfiniteScrollContent } from './components/infinite-scroll/infinite-scr
 export { Input } from './components/input/input';
 export { Item } from './components/item/item';
 export { ItemDivider } from './components/item-divider/item-divider';
-export { ItemOption } from './components/item-sliding/item-option';
+export { ItemOption } from './components/item-option/item-option';
 export { ItemSliding } from './components/item-sliding/item-sliding';
 export { KeyboardController } from './components/keyboard-controller/keyboard-controller';
 export * from './components/keyboard-controller/keys';