chore(packages): move the packages to root

core/src/components/content/content.tsx

@@ -0,0 +1,166 @@
+import { Component, Element, Listen, Method, Prop } from '@stencil/core';
+import { Config, DomController } from '../../index';
+
+@Component({
+  tag: 'ion-content',
+  styleUrl: 'content.scss'
+})
+export class Content {
+
+  private cTop = -1;
+  private cBottom = -1;
+  private dirty = false;
+  private scrollEl: HTMLIonScrollElement;
+
+  mode: string;
+  color: string;
+
+  @Element() private el: HTMLElement;
+
+  @Prop({ context: 'config' }) config: Config;
+  @Prop({ context: 'dom' }) dom: DomController;
+
+  /**
+   * If true, the content will scroll behind the headers
+   * and footers. This effect can easily be seen by setting the toolbar
+   * to transparent.
+   */
+  @Prop() fullscreen = false;
+
+  /**
+   * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
+   * If the content exceeds the bounds of ionContent, nothing will change.
+   * Note, the does not disable the system bounce on iOS. That is an OS level setting.
+   */
+  @Prop() forceOverscroll: boolean;
+
+
+  @Prop() scrollEvents = false;
+
+  @Listen('body:ionNavChanged')
+  onNavChanged() {
+    this.resize();
+  }
+
+  componentDidLoad() {
+    this.resize();
+  }
+
+  componentDidUnload() {
+    this.scrollEl = undefined as any;
+  }
+
+  /**
+   * Scroll to the top of the content component.
+   *
+   * Duration of the scroll animation in milliseconds. Defaults to `300`.
+   * Returns a promise which is resolved when the scroll has completed.
+   */
+  @Method()
+  scrollToTop(duration = 300) {
+    return this.scrollEl.scrollToTop(duration);
+  }
+
+  /**
+   * Scroll to the bottom of the content component.
+   *
+   * Duration of the scroll animation in milliseconds. Defaults to `300`.
+   * Returns a promise which is resolved when the scroll has completed.
+   */
+  @Method()
+  scrollToBottom(duration = 300) {
+    return this.scrollEl.scrollToBottom(duration);
+  }
+
+  @Method()
+  scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
+    return this.scrollEl.scrollByPoint(x, y, duration, done);
+  }
+
+  @Method()
+  scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
+    return this.scrollEl.scrollToPoint(x, y, duration, done);
+  }
+
+  private resize() {
+    if (!this.scrollEl) {
+      return;
+    }
+    if (this.fullscreen) {
+      this.dom.raf(() => {
+        this.dom.read(this.readDimensions.bind(this));
+        this.dom.write(this.writeDimensions.bind(this));
+      });
+    } else {
+      this.cTop = this.cBottom = -1;
+      this.dom.write(() => this.scrollEl && this.scrollEl.removeAttribute('style'));
+    }
+  }
+
+  private readDimensions() {
+    const page = getPageElement(this.el);
+    const top = Math.max(this.el.offsetTop, 0);
+    const bottom = Math.max(page.offsetHeight - top - this.el.offsetHeight, 0);
+    this.dirty = top !== this.cTop || bottom !== this.cBottom;
+    this.cTop = top;
+    this.cBottom = bottom;
+  }
+
+  private writeDimensions() {
+    if (this.dirty && this.scrollEl) {
+      const style = this.scrollEl.style;
+      style.paddingTop = this.cTop + 'px';
+      style.paddingBottom = this.cBottom + 'px';
+      style.top = -this.cTop + 'px';
+      style.bottom = -this.cBottom + 'px';
+      this.dirty = false;
+    }
+  }
+
+  hostData() {
+    return {
+      class: {
+        'statusbar-padding': this.config.getBoolean('statusbarPadding')
+      }
+    };
+  }
+
+  render() {
+    this.resize();
+
+    return [
+      <ion-scroll
+        ref={el => this.scrollEl = el as any}
+        mode={this.mode}
+        scrollEvents={this.scrollEvents}
+        forceOverscroll={this.forceOverscroll}>
+        <slot></slot>
+      </ion-scroll>,
+      <slot name='fixed'></slot>
+    ];
+  }
+}
+
+function getParentElement(el: any) {
+  if (el.parentElement ) {
+    // normal element with a parent element
+    return el.parentElement;
+  }
+  if (el.parentNode && el.parentNode.host) {
+    // shadow dom's document fragment
+    return el.parentNode.host;
+  }
+  return null;
+}
+
+function getPageElement(el: HTMLElement) {
+  const tabs = el.closest('ion-tabs');
+  if (tabs) {
+    return tabs;
+  }
+  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+  if (page) {
+    return page;
+  }
+  return getParentElement(el);
+}