chore(packages): move the packages to root

core/src/components/item-options/item-options.ios.scss

@@ -0,0 +1,17 @@
+@import "./item-options";
+@import "./item-options.ios.vars";
+
+// iOS Item Options
+// --------------------------------------------------
+
+.list-ios ion-item-options {
+  border-bottom: $hairlines-width solid $item-ios-border-color;
+}
+
+
+// iOS No Lines List
+// --------------------------------------------------
+
+.list-ios[no-lines] ion-item-options {
+  border-width: 0;
+}

core/src/components/item-options/item-options.ios.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Item Options
+// --------------------------------------------------

core/src/components/item-options/item-options.md.scss

@@ -0,0 +1,17 @@
+@import "./item-options";
+@import "./item-options.md.vars";
+
+// Material Design Item Options
+// --------------------------------------------------
+
+.list-md ion-item-options {
+  border-bottom: 1px solid $item-md-border-color;
+}
+
+
+// Material Design No Lines List
+// --------------------------------------------------
+
+.list-md[no-lines] ion-item-options {
+  border-width: 0;
+}

core/src/components/item-options/item-options.md.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Item Options
+// --------------------------------------------------

core/src/components/item-options/item-options.scss

@@ -0,0 +1,78 @@
+@import "./item-options.vars";
+
+// Item Options
+// --------------------------------------------------
+
+ion-item-options {
+  position: absolute;
+  z-index: $z-index-item-options;
+  display: none;
+
+  height: 100%;
+
+  font-size: 14px;
+
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    top: 0;
+
+    right: 0;
+  }
+
+  @include ltr() {
+    justify-content: flex-end;
+  }
+
+  @include rtl() {
+    justify-content: flex-start;
+
+    &:not(.item-options-right) {
+      // scss-lint:disable PropertySpelling
+      right: auto;
+      left: 0;
+
+      justify-content: flex-end;
+    }
+  }
+
+  &.hydrated {
+    visibility: hidden;
+  }
+}
+
+.item-options-left {
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    right: auto;
+    left: 0;
+  }
+
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
+}
+
+.item-sliding-active-slide {
+  @include rtl() {
+    &.item-sliding-active-options-left ion-item-options:not(.item-options-right) {
+      width: 100%;
+
+      visibility: visible;
+    }
+  }
+
+  ion-item-options {
+    display: flex;
+  }
+
+  &.item-sliding-active-options-left .item-options-left,
+  &.item-sliding-active-options-right ion-item-options:not(.item-options-left) {
+    width: 100%;
+
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,50 @@
+import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+import { Side, isRightSide } from '../../utils/helpers';
+
+
+@Component({
+  tag: 'ion-item-options',
+  styleUrls: {
+    ios: 'item-options.ios.scss',
+    md: 'item-options.md.scss'
+  }
+})
+export class ItemOptions {
+  @Element() private el: HTMLElement;
+
+  /**
+   * 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.
+   */
+  @Prop() side: Side = 'right';
+
+  /**
+   * Emitted when the item has been fully swiped.
+   */
+  @Event() ionSwipe: EventEmitter;
+
+  @Method()
+  isRightSide() {
+    return isRightSide(this.side, true);
+  }
+
+  @Method()
+  width(): number {
+    return this.el.offsetWidth;
+  }
+
+  @Method()
+  fireSwipeEvent(value: any) {
+    this.ionSwipe.emit(value);
+  }
+
+  hostData() {
+    return {
+      class: {
+        'item-options-left': !this.isRightSide(),
+        'item-options-right': this.isRightSide()
+      }
+    };
+  }
+
+}

core/src/components/item-options/item-options.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals";
+
+// Item Options
+// --------------------------------------------------

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

@@ -0,0 +1,65 @@
+# 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
+
+
+
+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.
+
+
+## Attributes
+
+#### side
+
+
+
+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.
+
+
+## Events
+
+#### ionSwipe
+
+Emitted when the item has been fully swiped.
+
+
+## Methods
+
+#### fireSwipeEvent()
+
+
+#### isRightSide()
+
+
+#### width()
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*