chore(reorder): move reorder-group to separate directory

packages/core/src/components.d.ts

@@ -2318,7 +2318,7 @@ declare global {
 
 import {
   ReorderGroup as IonReorderGroup
-} from './components/reorder/reorder-group';
+} from './components/reorder-group/reorder-group';
 
 declare global {
   interface HTMLIonReorderGroupElement extends IonReorderGroup, HTMLElement {

packages/core/src/components/reorder-group/readme.md

@@ -0,0 +1,139 @@
+# ion-reorder-group
+
+Item reorder adds the ability to change an item's order in a group.
+It can be used within an `ion-list` or `ion-item-group` to provide a
+visual drag and drop interface.
+
+
+## Grouping Items
+
+All reorderable items must be grouped in the same element. If an item
+should not be reordered, it shouldn't be included in this group. For
+example, the following code works because the items are grouped in the
+`<ion-list>`:
+
+ ```html
+ <ion-list reorder="true">
+   <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+ </ion-list>
+ ```
+
+However, the below list includes a header that shouldn't be reordered:
+
+ ```html
+ <ion-list reorder="true">
+   <ion-list-header>Header</ion-list-header>
+   <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+ </ion-list>
+ ```
+
+In order to mix different sets of items, `ion-item-group` should be used to
+group the reorderable items:
+
+ ```html
+ <ion-list>
+   <ion-list-header>Header</ion-list-header>
+   <ion-item-group reorder="true">
+     <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+   </ion-item-group>
+ </ion-list>
+ ```
+
+It's important to note that in this example, the `[reorder]` directive is applied to
+the `<ion-item-group>` instead of the `<ion-list>`. This way makes it possible to
+mix items that should and shouldn't be reordered.
+
+
+## Implementing the Reorder Function
+
+When the item is dragged and dropped into the new position, the `(ionItemReorder)` event is
+emitted. This event provides the initial index (from) and the new index (to) of the reordered
+item. For example, if the first item is dragged to the fifth position, the event will emit
+`{from: 0, to: 4}`. Note that the index starts at zero.
+
+A function should be called when the event is emitted that handles the reordering of the items.
+See usage below for some examples.
+
+
+```html
+<ion-list>
+  <ion-list-header>Header</ion-list-header>
+  <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
+    <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+```ts
+class MyComponent {
+  items = [];
+
+  constructor() {
+    for (let x = 0; x < 5; x++) {
+      this.items.push(x);
+    }
+  }
+
+  reorderItems(indexes) {
+    let element = this.items[indexes.from];
+    this.items.splice(indexes.from, 1);
+    this.items.splice(indexes.to, 0, element);
+  }
+}
+```
+
+Ionic also provides a helper function called `reorderArray` to
+reorder the array of items. This can be used instead:
+
+```ts
+import { reorderArray } from 'ionic-angular';
+
+class MyComponent {
+  items = [];
+
+  constructor() {
+    for (let x = 0; x < 5; x++) {
+      this.items.push(x);
+    }
+  }
+
+  reorderItems(indexes) {
+    this.items = reorderArray(this.items, indexes);
+  }
+}
+```
+
+Alternatevely you can execute helper function inside template:
+
+```html
+<ion-list>
+  <ion-list-header>Header</ion-list-header>
+  <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
+    <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### enabled
+
+boolean
+
+
+## Attributes
+
+#### enabled
+
+boolean
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

packages/core/src/components/reorder-group/reorder-group.scss

@@ -2,8 +2,10 @@
 
 $reorder-initial-transform: 160% !default;
 
-// Reorder group general
+
+// Reorder Group
 // --------------------------------------------------
+
 ion-reorder-group > ion-gesture {
   display: block;
 }
@@ -23,10 +25,6 @@ ion-reorder-group > ion-gesture {
   transition: none !important;
 }
 
-
-// Reorder icon
-// --------------------------------------------------
-
 ion-reorder.no-hide {
   display: block;
 

packages/core/src/components/reorder-group/reorder-group.tsx

@@ -17,131 +17,9 @@ export class ReorderIndexes {
   }
 }
 
-/**
- * @name ReorderGroup
- * @description
- * Item reorder adds the ability to change an item's order in a group.
- * It can be used within an `ion-list` or `ion-item-group` to provide a
- * visual drag and drop interface.
- *
- * ## Grouping Items
- *
- * All reorderable items must be grouped in the same element. If an item
- * should not be reordered, it shouldn't be included in this group. For
- * example, the following code works because the items are grouped in the
- * `<ion-list>`:
- *
- *  ```html
- *  <ion-list reorder="true">
- *    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- *  </ion-list>
- *  ```
- *
- * However, the below list includes a header that shouldn't be reordered:
- *
- *  ```html
- *  <ion-list reorder="true">
- *    <ion-list-header>Header</ion-list-header>
- *    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- *  </ion-list>
- *  ```
- *
- * In order to mix different sets of items, `ion-item-group` should be used to
- * group the reorderable items:
- *
- *  ```html
- *  <ion-list>
- *    <ion-list-header>Header</ion-list-header>
- *    <ion-item-group reorder="true">
- *      <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- *    </ion-item-group>
- *  </ion-list>
- *  ```
- *
- * It's important to note that in this example, the `[reorder]` directive is applied to
- * the `<ion-item-group>` instead of the `<ion-list>`. This way makes it possible to
- * mix items that should and shouldn't be reordered.
- *
- *
- * ## Implementing the Reorder Function
- *
- * When the item is dragged and dropped into the new position, the `(ionItemReorder)` event is
- * emitted. This event provides the initial index (from) and the new index (to) of the reordered
- * item. For example, if the first item is dragged to the fifth position, the event will emit
- * `{from: 0, to: 4}`. Note that the index starts at zero.
- *
- * A function should be called when the event is emitted that handles the reordering of the items.
- * See [usage](#usage) below for some examples.
- *
- *
- * @usage
- *
- * ```html
- * <ion-list>
- *   <ion-list-header>Header</ion-list-header>
- *   <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
- *     <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- *   </ion-item-group>
- * </ion-list>
- * ```
- *
- * ```ts
- * class MyComponent {
- *   items = [];
- *
- *   constructor() {
- *     for (let x = 0; x < 5; x++) {
- *       this.items.push(x);
- *     }
- *   }
- *
- *   reorderItems(indexes) {
- *     let element = this.items[indexes.from];
- *     this.items.splice(indexes.from, 1);
- *     this.items.splice(indexes.to, 0, element);
- *   }
- * }
- * ```
- *
- * Ionic also provides a helper function called `reorderArray` to
- * reorder the array of items. This can be used instead:
- *
- * ```ts
- * import { reorderArray } from 'ionic-angular';
- *
- * class MyComponent {
- *   items = [];
- *
- *   constructor() {
- *     for (let x = 0; x < 5; x++) {
- *       this.items.push(x);
- *     }
- *   }
- *
- *   reorderItems(indexes) {
- *     this.items = reorderArray(this.items, indexes);
- *   }
- * }
- * ```
- * Alternatevely you can execute helper function inside template:
- *
- * ```html
- * <ion-list>
- *   <ion-list-header>Header</ion-list-header>
- *   <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
- *     <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- *   </ion-item-group>
- * </ion-list>
- * ```
- *
- * @demo /docs/demos/src/item-reorder/
- * @see {@link /docs/components#lists List Component Docs}
- * @see {@link ../../list/List List API Docs}
- * @see {@link ../Item Item API Docs}
- */
 @Component({
   tag: 'ion-reorder-group',
-  styleUrl: 'reorder.scss'
+  styleUrl: 'reorder-group.scss'
 })
 export class ReorderGroup {
   private selectedItemEl: HTMLElement = null;

packages/core/src/components/reorder/readme.md

@@ -5,20 +5,6 @@
 <!-- Auto Generated Below -->
 
 
-## Properties
-
-#### enabled
-
-boolean
-
-
-## Attributes
-
-#### enabled
-
-boolean
-
-
 
 ----------------------------------------------
 

packages/core/src/components/reorder/reorder.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, State } from '@stencil/core';
 
+
 @Component({
   tag: 'ion-reorder',
 })

packages/core/src/index.d.ts

@@ -113,7 +113,7 @@ export { RadioGroup } from './components/radio-group/radio-group';
 export { Radio, HTMLIonRadioElementEvent } from './components/radio/radio';
 export { Range, RangeEvent } from './components/range/range';
 export { RangeKnob } from './components/range-knob/range-knob';
-export { ReorderGroup } from './components/reorder/reorder-group';
+export { ReorderGroup } from './components/reorder-group/reorder-group';
 export {
   RouterEntry,
   RouterEntries,