chore(packages): move the packages to root

core/src/components/backdrop/backdrop.ios.scss

@@ -0,0 +1,6 @@
+@import "./backdrop";
+@import "./backdrop.ios.vars";
+
+.backdrop-ios {
+  background-color: $backdrop-ios-color;
+}

core/src/components/backdrop/backdrop.ios.vars.scss

@@ -0,0 +1 @@
+@import "../../themes/ionic.globals.ios";

core/src/components/backdrop/backdrop.md.scss

@@ -0,0 +1,6 @@
+@import "./backdrop";
+@import "./backdrop.md.vars";
+
+.backdrop-md {
+  background-color: $backdrop-md-color;
+}

core/src/components/backdrop/backdrop.md.vars.scss

@@ -0,0 +1 @@
+@import "../../themes/ionic.globals.md";

core/src/components/backdrop/backdrop.scss

@@ -0,0 +1,35 @@
+@import "./backdrop.vars";
+
+// Backdrop
+// --------------------------------------------------
+
+ion-backdrop {
+  @include position(0, null, null, 0);
+
+  position: absolute;
+  z-index: $z-index-backdrop;
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  cursor: pointer;
+  opacity: .01;
+  transform: translateZ(0);
+
+  touch-action: none;
+
+  contain: strict;
+
+  &.backdrop-hide {
+    background: transparent;
+  }
+
+  &.backdrop-no-tappable {
+    cursor: auto;
+  }
+}
+
+body.backdrop-no-scroll {
+  overflow: hidden;
+}

core/src/components/backdrop/backdrop.tsx

@@ -0,0 +1,79 @@
+import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+import { now } from '../../utils/helpers';
+
+@Component({
+  tag: 'ion-backdrop',
+  styleUrls: {
+    ios: 'backdrop.ios.scss',
+    md: 'backdrop.md.scss'
+  },
+  host: {
+    theme: 'backdrop'
+  }
+})
+export class Backdrop {
+
+  private lastClick = -10000;
+
+  @Prop() visible = true;
+  @Prop() tappable = true;
+  @Prop() stopPropagation = true;
+
+  @Event() ionBackdropTap: EventEmitter;
+
+  componentDidLoad() {
+    registerBackdrop(this);
+  }
+
+  componentDidUnload() {
+    unregisterBackdrop(this);
+  }
+
+  @Listen('touchstart', {passive: false, capture: true})
+  protected onTouchStart(ev: TouchEvent) {
+    this.lastClick = now(ev);
+    this.emitTap(ev);
+  }
+
+  @Listen('mousedown', {passive: false, capture: true})
+  protected onMouseDown(ev: TouchEvent) {
+    if (this.lastClick < now(ev) - 2500) {
+      this.emitTap(ev);
+    }
+  }
+
+  private emitTap(ev: Event) {
+    if (this.stopPropagation) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+    if (this.tappable) {
+      this.ionBackdropTap.emit();
+    }
+  }
+
+  hostData() {
+    return {
+      tabindex: '-1',
+      class: {
+        'backdrop-hide': !this.visible,
+        'backdrop-no-tappable': !this.tappable,
+      }
+    };
+  }
+}
+
+const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+const activeBackdrops = new Set();
+
+function registerBackdrop(backdrop: any) {
+  activeBackdrops.add(backdrop);
+  document.body.classList.add(BACKDROP_NO_SCROLL);
+}
+
+function unregisterBackdrop(backdrop: any) {
+  activeBackdrops.delete(backdrop);
+  if (activeBackdrops.size === 0) {
+    document.body.classList.remove(BACKDROP_NO_SCROLL);
+  }
+}

core/src/components/backdrop/backdrop.vars.scss

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

core/src/components/backdrop/readme.md

@@ -0,0 +1,55 @@
+# ion-backdrop
+
+Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.
+
+```html
+<ion-backdrop></ion-backdrop>
+```
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### stopPropagation
+
+boolean
+
+
+#### tappable
+
+boolean
+
+
+#### visible
+
+boolean
+
+
+## Attributes
+
+#### stop-propagation
+
+boolean
+
+
+#### tappable
+
+boolean
+
+
+#### visible
+
+boolean
+
+
+## Events
+
+#### ionBackdropTap
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*