feat(item-reorder): add side support (#11642)

fixes #11637

src/components/item/item-reorder-gesture.ts

@@ -134,7 +134,7 @@ export class ItemReorderGesture {
   }
 
   private itemForCoord(coord: PointerCoordinates): HTMLElement {
-    const sideOffset = this.plt.isRTL ? 100 : -100;
+    const sideOffset = this.reorderList._isStart === this.plt.isRTL ? -100 : 100;
     const x = this.offset.x + sideOffset;
     const y = coord.y;
     const element = this.plt.getElementFromPoint(x, y);
@@ -167,6 +167,7 @@ const SCROLL_JUMP = 10;
 const ITEM_REORDER_ACTIVE = 'reorder-active';
 
 export interface ItemReorderGestureDelegate {
+  _isStart: boolean;
   getNativeElement: () => any;
   _reorderPrepare: () => void;
   _scrollContent: (scrollPosition: number) => number;

src/components/item/item-reorder.scss

@@ -1,10 +1,12 @@
 @import "../../themes/ionic.globals";
 
+$reorder-initial-transform: 160% !default;
+
 // Item reorder
 // --------------------------------------------------
 
 ion-reorder {
-  @include transform(translate3d(160%, 0, 0));
+  @include transform(translate3d($reorder-initial-transform, 0, 0));
 
   display: none;
 
@@ -18,13 +20,18 @@ ion-reorder {
   font-size: 1.7em;
   opacity: .25;
 
-
   transition: transform 140ms ease-in;
 
   pointer-events: all;
   touch-action: manipulation;
 }
 
+.reorder-side-start ion-reorder {
+  @include transform(translate3d(-$reorder-initial-transform, 0, 0));
+
+  order: -1;
+}
+
 ion-reorder ion-icon {
   pointer-events: none;
 }

src/components/item/item-reorder.ts

@@ -142,12 +142,14 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
+    '[class.reorder-side-start]': '_isStart'
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {
 
   _enableReorder: boolean = false;
   _visibleReorder: boolean = false;
+  _isStart: boolean = false;
   _reorderGesture: ItemReorderGesture;
   _lastToIndex: number = -1;
   _element: HTMLElement;
@@ -158,6 +160,14 @@ export class ItemReorder implements ItemReorderGestureDelegate {
    */
   @Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>();
 
+  /**
+   * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
+   */
+  @Input('side')
+  set side(side: 'start' | 'end') {
+    this._isStart = side === 'start';
+  }
+
   constructor(
     private _plt: Platform,
     private _dom: DomController,

src/components/item/test/reorder/pages/root-page/root-page.html

@@ -13,24 +13,30 @@
 
   <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
     <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
-    [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
-    [style.min-height]="item*2+35+'px'">
+            [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
+            [style.min-height]="item*2+35+'px'">
       {{item}}
     </button>
   </ion-list>
 
-  <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)">
-    <ion-item-sliding *ngFor="let item of items">
-      <button ion-item (click)="clickedButton(item)">
-        <h2>Sliding item {{item}}</h2>
-      </button>
-      <ion-item-options side="right" icon-start>
-        <button ion-button color='danger'>
-          <ion-icon name="trash"></ion-icon>
-          Remove
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
+  <div *ngFor="let side of ['start', 'end']">
+    <ion-list>
+      <ion-list-header>{{side}}</ion-list-header>
+      <ion-item-group [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+        <ion-item-sliding *ngFor="let item of items">
+          <button ion-item (click)="clickedButton(item)">
+            <h2>Sliding item {{item}}</h2>
+            <div item-end>right</div>
+          </button>
+          <ion-item-options side="right" icon-start>
+            <button ion-button color='danger'>
+              <ion-icon name="trash"></ion-icon>
+              Remove
+            </button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
+    </ion-list>
+  </div>
 
 </ion-content>

src/components/item/test/reorder/pages/root-page/root-page.ts

@@ -9,7 +9,7 @@ export class RootPage {
   isReordering: boolean = false;
 
   constructor() {
-    let nu = 9;
+    let nu = 5;
     for (let i = 0; i < nu; i++) {
       this.items.push(i);
     }