refactor(all): allow external imports

angular/src/directives/navigation/router-controller.ts

@@ -1,6 +1,5 @@
 import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NavDirection } from '@ionic/core';
 
 import { NavController } from '../../providers/nav-controller';
 
@@ -106,7 +105,7 @@ export class StackController {
       await containerEl.componentOnReady();
       await containerEl.commit(enteringEl, leavingEl, {
         duration: !animated ? 0 : undefined,
-        direction: direction === 1 ? NavDirection.Forward : NavDirection.Back,
+        direction: direction === 1 ? 'forward' : 'back',
         deepWait: true,
         showGoBack
       });

core/package.json

@@ -14,8 +14,9 @@
     "progressive web app",
     "pwa"
   ],
+  "module": "dist/collection/index.js",
   "main": "dist/ionic.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/interface.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "files": [
     "dist/"

core/src/components.d.ts

@@ -26,104 +26,70 @@ declare global {
 import 'ionicons';
 
 import {
+  ActionSheetButton,
   ActionSheetOptions,
+  AlertButton,
+  AlertInput,
   AlertOptions,
-  Animation as Animation2,
+  Animation,
   AnimationBuilder,
+  BlockerConfig,
+  CheckedInputChangeEvent,
   ComponentProps,
   ComponentRef,
   FrameworkDelegate,
+  GestureCallback,
+  GestureConfig,
+  GestureDetail,
+  InputChangeEvent,
   LoadingOptions,
   Menu,
+  MenuChangeEventDetail,
   ModalOptions,
   Mode,
+  NavComponent,
+  NavOptions,
+  PickerButton,
   PickerColumn,
   PickerOptions,
   PopoverOptions,
+  RangeInputChangeEvent,
+  RouteID,
+  RouteWrite,
+  SelectInputChangeEvent,
+  SelectPopoverOption,
+  StyleEvent,
   ToastOptions,
-} from './index';
+  TransitionDoneFn,
+  TransitionInstruction,
+} from './interface';
 import {
   OverlayEventDetail,
 } from './utils/overlays';
-import {
-  ActionSheetButton,
-} from './components/action-sheet/action-sheet';
 import {
   EventEmitter,
 } from '@stencil/core';
 import {
-  AlertButton,
-  AlertInput,
-} from './components/alert/alert';
-import {
-  Animation,
-  AnimationBuilder as AnimationBuilder2,
-} from './components/animation-controller/animation-interface';
-import {
-  AnimationBuilder as AnimationBuilder3,
-  ComponentProps as ComponentProps2,
-  ComponentRef as ComponentRef2,
-  FrameworkDelegate as FrameworkDelegate2,
-  Mode as Mode2,
-} from '.';
-import {
-  CheckedInputChangeEvent,
-  InputChangeEvent,
-  RangeInputChangeEvent,
-  SelectInputChangeEvent,
-  StyleEvent,
-} from './utils/input-interfaces';
-import {
-  BlockerConfig,
   BlockerDelegate,
-  GestureConfig,
   GestureDelegate,
 } from './components/gesture-controller/gesture-controller-utils';
-import {
-  GestureCallback,
-  GestureDetail,
-} from './components/gesture/gesture';
 import {
   Side,
 } from './utils/helpers';
-import {
-  ItemSliding,
-} from './components/item-sliding/item-sliding';
-import {
-  MenuChangeEventDetail,
-} from './components/menu/menu';
-import {
-  NavComponent,
-  NavOptions,
-  TransitionDoneFn,
-  TransitionInstruction,
-} from './components/nav/nav-util';
 import {
   ViewController,
 } from './components/nav/view-controller';
-import {
-  RouteID,
-  RouterDirection,
-  RouterEventDetail,
-  RouteWrite,
-} from './components/router/utils/interfaces';
-import {
-  PickerButton,
-  PickerColumn as PickerColumn2,
-} from './components/picker/picker';
 import {
   RouterOutletOptions,
 } from './components/router-outlet/route-outlet';
+import {
+  RouterDirection,
+  RouterEventDetail,
+} from './components/router/utils/interface';
 import {
   ScrollBaseDetail,
   ScrollDetail,
 } from './components/scroll/scroll';
-import {
-  SelectPopoverOption,
-} from './components/select-popover/select-popover';
-import {
-  FrameworkDelegate as FrameworkDelegate3,
-} from './utils/framework-delegate';
 import {
   TabbarLayout,
   TabbarPlacement,
@@ -3053,11 +3019,11 @@ declare global {
       /**
        * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene.
        */
-      'getOpenItem': () => ItemSliding | undefined;
+      'getOpenItem': () => HTMLIonItemSlidingElement | undefined;
       /**
        * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item.
        */
-      'setOpenItem': (itemSliding: ItemSliding | undefined) => void;
+      'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void;
     }
   }
 
@@ -3850,7 +3816,7 @@ declare global {
     interface IonNav {
       'animated': boolean;
       'canGoBack': (view?: ViewController | undefined) => boolean;
-      'delegate': FrameworkDelegate|undefined;
+      'delegate': FrameworkDelegate;
       'getActive': () => ViewController | undefined;
       'getByIndex': (index: number) => ViewController | undefined;
       'getPrevious': (view?: ViewController | undefined) => ViewController | undefined;
@@ -3863,8 +3829,8 @@ declare global {
       'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
       'push': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
       'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
-      'root': NavComponent|undefined;
-      'rootParams': ComponentProps|undefined;
+      'root': NavComponent;
+      'rootParams': ComponentProps;
       'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
       'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
       'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
@@ -3892,11 +3858,11 @@ declare global {
   namespace JSXElements {
     export interface IonNavAttributes extends HTMLAttributes {
       'animated'?: boolean;
-      'delegate'?: FrameworkDelegate|undefined;
+      'delegate'?: FrameworkDelegate;
       'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
       'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
-      'root'?: NavComponent|undefined;
-      'rootParams'?: ComponentProps|undefined;
+      'root'?: NavComponent;
+      'rootParams'?: ComponentProps;
       'swipeBackEnabled'?: boolean;
     }
   }

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { ActionSheetOptions } from '../../index';
+import { ActionSheetOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({

core/src/components/action-sheet/action-sheet-interface.ts

@@ -0,0 +1,18 @@
+
+export interface ActionSheetOptions {
+  header?: string;
+  subHeader?: string;
+  cssClass?: string;
+  buttons: (ActionSheetButton | string)[];
+  enableBackdropDismiss?: boolean;
+  translucent?: boolean;
+}
+
+export interface ActionSheetButton {
+  text?: string;
+  role?: 'cancel' | 'destructive' | 'selected' | string;
+  icon?: string;
+  cssClass?: string;
+  handler?: () => boolean | void;
+}
+

core/src/components/action-sheet/action-sheet.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../index';
+import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
@@ -285,20 +285,3 @@ function buttonClass(button: ActionSheetButton): CssClassMap {
   return buttonClasses;
 }
 
-export interface ActionSheetOptions {
-  header?: string;
-  subHeader?: string;
-  cssClass?: string;
-  buttons: (ActionSheetButton | string)[];
-  enableBackdropDismiss?: boolean;
-  translucent?: boolean;
-}
-
-export interface ActionSheetButton {
-  text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
-  icon?: string;
-  cssClass?: string;
-  handler?: () => boolean | void;
-}
-

core/src/components/action-sheet/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Action Sheet Enter Animation

core/src/components/action-sheet/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Action Sheet Leave Animation

core/src/components/action-sheet/animations/md.enter.ts

@@ -1,5 +1,5 @@
 
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * MD Action Sheet Enter Animation

core/src/components/action-sheet/animations/md.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * MD Action Sheet Leave Animation

core/src/components/alert-controller/alert-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { AlertOptions } from '../../index';
+import { AlertOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({

core/src/components/alert/alert-interface.ts

@@ -0,0 +1,33 @@
+
+export interface AlertOptions {
+  header?: string;
+  subHeader?: string;
+  message?: string;
+  cssClass?: string | string[];
+  mode?: string;
+  inputs?: AlertInput[];
+  buttons?: (AlertButton|string)[];
+  enableBackdropDismiss?: boolean;
+  translucent?: boolean;
+}
+
+export interface AlertInput {
+  type: string;
+  name: string | number;
+  placeholder?: string;
+  value?: string;
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  handler?: Function;
+  min?: string | number;
+  max?: string | number;
+}
+
+export interface AlertButton {
+  text: string;
+  role?: string;
+  cssClass?: string | string[];
+  handler?: (value: any) => boolean|void;
+}

core/src/components/alert/alert.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../index';
+import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
@@ -445,36 +445,3 @@ function buttonClass(button: AlertButton): CssClassMap {
     ...getClassMap(button.cssClass)
   };
 }
-
-export interface AlertOptions {
-  header?: string;
-  subHeader?: string;
-  message?: string;
-  cssClass?: string | string[];
-  mode?: string;
-  inputs?: AlertInput[];
-  buttons?: (AlertButton|string)[];
-  enableBackdropDismiss?: boolean;
-  translucent?: boolean;
-}
-
-export interface AlertInput {
-  type: string;
-  name: string | number;
-  placeholder?: string;
-  value?: string;
-  label?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  id?: string;
-  handler?: Function;
-  min?: string | number;
-  max?: string | number;
-}
-
-export interface AlertButton {
-  text: string;
-  role?: string;
-  cssClass?: string | string[];
-  handler?: (value: any) => boolean|void;
-}

core/src/components/alert/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Alert Enter Animation

core/src/components/alert/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Alert Leave Animation

core/src/components/alert/animations/md.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Alert Enter Animation

core/src/components/alert/animations/md.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Alert Leave Animation

core/src/components/animation-controller/animation-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Method } from '@stencil/core';
-import { Animation, AnimationBuilder, AnimationController } from './animation-interface';
+import { Animation, AnimationBuilder, AnimationController } from '../../interface';
 import { Animator } from './animator';
 
 

core/src/components/app/app.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Config, Mode } from '../../index';
+import { Config, Mode } from '../../interface';
 import { isDevice, isHybrid, needInputShims } from '../../utils/platform';
 
 @Component({

core/src/components/back-button/back-button.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Config, Mode } from '../../index';
+import { Config, Mode } from '../../interface';
 import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
 
 @Component({

core/src/components/badge/badge.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/button/button.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
-import { CssClassMap, Mode } from '../../index';
+import { CssClassMap, Mode } from '../../interface';
 import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme';
 
 

core/src/components/card-content/card-content.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-card-content',

core/src/components/card-header/card-header.tsx

@@ -1,7 +1,7 @@
 import { Component, Prop } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-card-header',

core/src/components/card-subtitle/card-subtitle.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop} from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/card-title/card-title.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop} from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/card/card.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-card',

core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,5 @@
-import { CheckboxInput, CheckedInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { CssClassMap, Mode } from '../../index';
+import { CheckboxInput, CheckedInputChangeEvent, CssClassMap, Mode, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
 
 

core/src/components/chip-button/chip-button.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { CssClassMap, Mode } from '../../index';
+import { CssClassMap, Mode } from '../../interface';
 import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
 
 @Component({

core/src/components/chip/chip.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/content/content.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Listen, Method, Prop } from '@stencil/core';
-import { Config, Mode, QueueController } from '../../index';
+import { Config, Mode, QueueController } from '../../interface';
 
 
 @Component({

core/src/components/datetime/datetime.tsx

@@ -1,5 +1,4 @@
 import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { CssClassMap } from '../../index';
 
 import {
   DatetimeData,
@@ -20,8 +19,7 @@ import {
 } from './datetime-util';
 
 import { clamp, deferEvent } from '../../utils/helpers';
-import { PickerColumn, PickerController, PickerOptions } from '../../index';
-import { StyleEvent } from '../../utils/input-interfaces';
+import { CssClassMap, PickerColumn, PickerOptions, StyleEvent } from '../../interface';
 
 
 @Component({
@@ -49,7 +47,7 @@ export class Datetime {
 
   @State() text: any;
 
-  @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: PickerController;
+  @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: HTMLIonPickerControllerElement;
 
   /**
    * If true, the user cannot interact with the datetime. Defaults to `false`.

core/src/components/fab-button/fab-button.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
-import { CssClassMap, Mode } from '../../index';
+import { CssClassMap, Mode } from '../../interface';
 
 
 @Component({

core/src/components/footer/footer.tsx

@@ -1,7 +1,7 @@
 import { Component, Prop } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-footer',

core/src/components/gesture-controller/gesture-controller-interface.ts

@@ -0,0 +1,13 @@
+export { GestureController } from './gesture-controller';
+export * from './gesture-controller-utils';
+
+export interface GestureConfig {
+  name: string;
+  priority?: number;
+  disableScroll?: boolean;
+}
+
+export interface BlockerConfig {
+  disable?: string[];
+  disableScroll?: boolean;
+}

core/src/components/gesture-controller/gesture-controller-utils.ts

@@ -1,7 +1,7 @@
-import { GestureController } from '../..';
+import { GestureController } from '../../interface';
 
 export class GestureDelegate {
-  private ctrl: GestureController|undefined;
+  private ctrl?: GestureController;
 
   constructor(
     ctrl: any,
@@ -58,10 +58,9 @@ export class GestureDelegate {
   }
 }
 
-
 export class BlockerDelegate {
 
-  private ctrl: GestureController|undefined;
+  private ctrl?: GestureController;
 
   constructor(
     private id: number,
@@ -106,14 +105,3 @@ export class BlockerDelegate {
     this.ctrl = undefined;
   }
 }
-
-export interface GestureConfig {
-  name: string;
-  priority?: number;
-  disableScroll?: boolean;
-}
-
-export interface BlockerConfig {
-  disable?: string[];
-  disableScroll?: boolean;
-}

core/src/components/gesture-controller/gesture-controller.tsx

@@ -1,5 +1,6 @@
 import { Component, Event, EventEmitter, Method } from '@stencil/core';
-import { BlockerConfig, BlockerDelegate, GestureConfig, GestureDelegate } from './gesture-controller-utils';
+import { BlockerDelegate, GestureDelegate } from './gesture-controller-utils';
+import { BlockerConfig, GestureConfig } from '../../interface';
 
 
 @Component({

core/src/components/gesture/gesture-interface.ts

@@ -0,0 +1,20 @@
+
+export interface GestureDetail {
+  type: string;
+  startX: number;
+  startY: number;
+  startTimeStamp: number;
+  currentX: number;
+  currentY: number;
+  velocityX: number;
+  velocityY: number;
+  deltaX: number;
+  deltaY: number;
+  timeStamp: number;
+  event: UIEvent;
+  data?: any;
+}
+
+export interface GestureCallback {
+  (detail?: GestureDetail): boolean|void;
+}

core/src/components/gesture/gesture.tsx

@@ -1,6 +1,6 @@
 import { Component, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
+import { BlockerConfig, BlockerDelegate , GestureCallback, GestureDelegate, GestureDetail, QueueController } from '../../interface';
 import { assert, now } from '../../utils/helpers';
-import { BlockerConfig, BlockerDelegate, GestureDelegate, QueueController } from '../../index';
 import { PanRecognizer } from './recognizers';
 
 export const BLOCK_ALL: BlockerConfig = {
@@ -8,7 +8,6 @@ export const BLOCK_ALL: BlockerConfig = {
   disableScroll: true
 };
 
-
 @Component({
   tag: 'ion-gesture'
 })
@@ -388,26 +387,6 @@ export class Gesture {
 
 const MOUSE_WAIT = 2500;
 
-export interface GestureDetail {
-  type: string;
-  startX: number;
-  startY: number;
-  startTimeStamp: number;
-  currentX: number;
-  currentY: number;
-  velocityX: number;
-  velocityY: number;
-  deltaX: number;
-  deltaY: number;
-  timeStamp: number;
-  event: UIEvent;
-  data?: any;
-}
-
-export interface GestureCallback {
-  (detail?: GestureDetail): boolean|void;
-}
-
 function updateDetail(ev: any, detail: GestureDetail) {
   // get X coordinates for either a mouse click
   // or a touch depending on the given event

core/src/components/header/header.tsx

@@ -1,7 +1,7 @@
 import { Component, Prop } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-header',

core/src/components/hide-when/hide-when.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
-import { Config, Mode } from '../../index';
+import { Config, Mode } from '../../interface';
 
 import {
   DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults,

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Config } from '../../index';
+import { Config } from '../../interface';
 
 
 @Component({

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { QueueController } from '../../index';
+import { QueueController } from '../../interface';
 
 @Component({
   tag: 'ion-infinite-scroll',

core/src/components/input-shims/input-shims.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Prop } from '@stencil/core';
-import { Config } from '../..';
+import { Config } from '../../interface';
 
 import enableHideCaretOnScroll from './hacks/hide-caret';
 import enableInputBlurring from './hacks/input-blurring';

core/src/components/input/input-base.tsx

@@ -1,7 +1,7 @@
 // Shared Interfaces
 
 import { EventEmitter } from '@stencil/core';
-import { StyleEvent } from '../../utils/input-interfaces';
+import { StyleEvent } from '../../interface';
 
 export interface InputBaseComponent {
   ionStyle: EventEmitter<StyleEvent>;
@@ -44,7 +44,6 @@ export interface InputComponent extends InputBaseComponent {
 }
 
 export interface TextareaComponent extends InputBaseComponent {
-
   // Textarea Attributes
   cols?: number;
   rows?: number;

core/src/components/input/input.tsx

@@ -1,7 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
-import { Mode } from '../..';
+import { InputChangeEvent, Mode, StyleEvent  } from '../../interface';
 import { debounceEvent, deferEvent } from '../../utils/helpers';
-import { InputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
 import { createThemedClasses } from '../../utils/theme';
 import { InputComponent } from './input-base';
 

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

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

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

@@ -1,18 +1,18 @@
 import { Component, Element, Event, EventEmitter, Method, State } from '@stencil/core';
-import { GestureDetail } from '../../index';
+import { GestureDetail } from '../../interface';
 
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 
-export const enum ItemSide {
+const enum ItemSide {
   None = 0,
   Left = 1 << 0,
   Right = 1 << 1,
   Both = Left | Right
 }
 
-export const enum SlidingState {
+const enum SlidingState {
   Disabled = 1 << 1,
   Enabled = 1 << 2,
   Right = 1 << 3,
@@ -43,9 +43,9 @@ export class ItemSliding {
   private rightOptions?: HTMLIonItemOptionsElement;
   private optsDirty = true;
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLIonItemSlidingElement;
 
-  @State() state: SlidingState = SlidingState.Disabled;
+  @State() private state: SlidingState = SlidingState.Disabled;
 
   /**
    * Emitted when the sliding position changes.
@@ -132,7 +132,7 @@ export class ItemSliding {
 
   private canStart(): boolean {
     const selected = this.list && this.list.getOpenItem();
-    if (selected && selected !== this) {
+    if (selected && selected !== this.el) {
       this.closeOpened();
       return false;
     }
@@ -140,7 +140,7 @@ export class ItemSliding {
   }
 
   private onDragStart() {
-    this.list && this.list.setOpenItem(this);
+    this.list && this.list.setOpenItem(this.el);
 
     if (this.tmr) {
       clearTimeout(this.tmr);

core/src/components/item/item.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
 import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
-import { CssClassMap, Mode } from '../../index';
+import { CssClassMap, Mode } from '../../interface';
 
 
 @Component({

core/src/components/label/label.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
-import { Mode } from '../..';
-import { StyleEvent } from '../../utils/input-interfaces';
+import { Mode, StyleEvent } from '../../interface';
 
 
 @Component({

core/src/components/list-header/list-header.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/list/list.tsx

@@ -1,8 +1,5 @@
 import { Component, Method } from '@stencil/core';
 
-import { ItemSliding } from '../item-sliding/item-sliding';
-
-
 @Component({
   tag: 'ion-list',
   styleUrls: {
@@ -15,7 +12,7 @@ import { ItemSliding } from '../item-sliding/item-sliding';
 })
 export class List {
 
-  private openItem?: ItemSliding;
+  private openItem?: HTMLIonItemSlidingElement;
 
   /**
    * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene.
@@ -29,7 +26,7 @@ export class List {
    * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item.
    */
   @Method()
-  setOpenItem(itemSliding: ItemSliding | undefined) {
+  setOpenItem(itemSliding: HTMLIonItemSlidingElement | undefined) {
     this.openItem = itemSliding;
   }
 

core/src/components/loading-controller/loading-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { LoadingOptions } from '../../index';
+import { LoadingOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 

core/src/components/loading/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/loading/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/loading/animations/md.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Loading Enter Animation

core/src/components/loading/animations/md.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Loading Leave Animation

core/src/components/loading/loading-interface.ts

@@ -0,0 +1,10 @@
+
+export interface LoadingOptions {
+  spinner?: string;
+  content?: string;
+  cssClass?: string | string[];
+  showBackdrop?: boolean;
+  dismissOnPageChange?: boolean;
+  duration?: number;
+  translucent?: boolean;
+}

core/src/components/loading/loading.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, Mode } from '../../index';
+import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 
@@ -218,13 +218,3 @@ export class Loading implements OverlayInterface {
     ];
   }
 }
-
-export interface LoadingOptions {
-  spinner?: string;
-  content?: string;
-  cssClass?: string | string[];
-  showBackdrop?: boolean;
-  dismissOnPageChange?: boolean;
-  duration?: number;
-  translucent?: boolean;
-}

core/src/components/menu-button/menu-button.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Config } from '../../index';
+import { Config } from '../../interface';
 
 @Component({
   tag: 'ion-menu-button',

core/src/components/menu-controller/animations/base.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * baseAnimation

core/src/components/menu-controller/animations/overlay.ts

@@ -1,4 +1,4 @@
-import { Animation, Menu } from '../../../index';
+import { Animation, Menu } from '../../../interface';
 import baseAnimation from './base';
 
 const BOX_SHADOW_WIDTH = 8;

core/src/components/menu-controller/animations/push.ts

@@ -1,4 +1,4 @@
-import { Animation, Menu } from '../../../index';
+import { Animation, Menu } from '../../../interface';
 import baseAnimation from './base';
 
 /**

core/src/components/menu-controller/animations/reveal.ts

@@ -1,4 +1,4 @@
-import { Animation, Menu } from '../../../index';
+import { Animation, Menu } from '../../../interface';
 import baseAnimation from './base';
 
 /**

core/src/components/menu-controller/menu-controller.ts

@@ -1,5 +1,5 @@
 import { Component, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Menu } from '../../index';
+import { Animation, AnimationBuilder, Menu } from '../../interface';
 
 import MenuOverlayAnimation from './animations/overlay';
 import MenuPushAnimation from './animations/push';

core/src/components/menu/menu-interface.d.ts

@@ -1,2 +0,0 @@
-
-export * from './menu';

core/src/components/menu/menu-interface.ts

@@ -0,0 +1,11 @@
+export { Menu } from './menu';
+
+export interface MenuChangeEvent {
+  target: HTMLIonMenuElement;
+  detail: MenuChangeEventDetail;
+}
+
+export interface MenuChangeEventDetail {
+  disabled: boolean;
+  open: boolean;
+}

core/src/components/menu/menu.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { Animation, Config, GestureDetail, Mode } from '../../index';
+import { Animation, Config, GestureDetail, MenuChangeEventDetail, Mode } from '../../interface';
 import { Side, assert, isRightSide } from '../../utils/helpers';
 
 @Component({
@@ -14,7 +14,7 @@ import { Side, assert, isRightSide } from '../../utils/helpers';
 })
 export class Menu {
 
-  private animation: Animation|undefined;
+  private animation?: Animation;
   private isPane = false;
   private _isOpen = false;
   private lastOnEnd = 0;
@@ -24,10 +24,10 @@ export class Menu {
   isAnimating = false;
   width!: number; // TOOD
 
-  backdropEl: HTMLElement|undefined;
-  menuInnerEl: HTMLElement|undefined;
-  contentEl: HTMLElement|undefined;
-  menuCtrl: HTMLIonMenuControllerElement|undefined;
+  backdropEl?: HTMLElement;
+  menuInnerEl?: HTMLElement;
+  contentEl?: HTMLElement;
+  menuCtrl?: HTMLIonMenuControllerElement;
 
   @Element() el!: HTMLIonMenuElement;
 
@@ -38,6 +38,7 @@ export class Menu {
   @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl!: HTMLIonMenuControllerElement;
   @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
   @Prop({ context: 'window' }) win!: Window;
+
   /**
    * The content's id the menu should use.
    */
@@ -469,13 +470,3 @@ function checkEdgeSide(win: Window, posX: number, isRightSide: boolean, maxEdgeS
 const SHOW_MENU = 'show-menu';
 const SHOW_BACKDROP = 'show-backdrop';
 const MENU_CONTENT_OPEN = 'menu-content-open';
-
-export interface MenuChangeEvent {
-  target: HTMLIonMenuElement;
-  detail: MenuChangeEventDetail;
-}
-
-export interface MenuChangeEventDetail {
-  disabled: boolean;
-  open: boolean;
-}

core/src/components/modal-controller/modal-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { ModalOptions } from '../../index';
+import { ModalOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 

core/src/components/modal/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/modal/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/modal/animations/md.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Modal Enter Animation

core/src/components/modal/animations/md.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Modal Leave Animation

core/src/components/modal/modal-interface.ts

@@ -0,0 +1,12 @@
+import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
+
+export interface ModalOptions {
+  component: ComponentRef;
+  componentProps?: ComponentProps;
+  showBackdrop?: boolean;
+  enableBackdropDismiss?: boolean;
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+  cssClass?: string | string[];
+  delegate?: FrameworkDelegate;
+}

core/src/components/modal/modal.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../index';
+import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
 
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';

core/src/components/nav-push/nav-push.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
-import { ComponentProps } from '../..';
-import { NavComponent } from '../nav/nav-util';
+import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
   tag: 'ion-nav-push',

core/src/components/nav-set-root/nav-set-root.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
-import { ComponentProps } from '../..';
-import { NavComponent } from '../nav/nav-util';
+import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
   tag: 'ion-nav-set-root',

core/src/components/nav/animations/ios.transition.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 import { AnimationOptions } from '../../../utils/transition';
 
 const DURATION = 500;

core/src/components/nav/animations/md.transition.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 import { AnimationOptions } from '../../../utils/transition';
 
 const TRANSLATEY = 'translateY';

core/src/components/nav/nav-interface.ts

@@ -1,38 +1,9 @@
 import { ViewController } from './view-controller';
-import { Animation, ComponentRef, FrameworkDelegate } from '../..';
+import { Animation, ComponentRef, FrameworkDelegate } from '../../interface';
 
-export function convertToView(page: any, params: any): ViewController|null {
-  if (!page) {
-    return null;
-  }
-  if (page instanceof ViewController) {
-    return page;
-  }
-  return new ViewController(page, params);
-}
+export { Nav } from './nav';
 
-export function convertToViews(pages: any[]): ViewController[] {
-  return pages.map(page => {
-    if (page instanceof ViewController) {
-      return page;
-    }
-    if ('page' in page) {
-      return convertToView(page.page, page.params);
-    }
-    return convertToView(page, undefined);
-  }).filter(v => v !== null) as ViewController[];
-}
-
-export const enum ViewState {
-  New = 1,
-  Attached,
-  Destroyed
-}
-
-export const enum NavDirection {
-  Back = 'back',
-  Forward = 'forward'
-}
+export type NavDirection = 'back' | 'forward';
 
 export type NavComponent = ComponentRef | ViewController;
 
@@ -41,13 +12,13 @@ export interface NavResult {
   requiresTransition: boolean;
   enteringView?: ViewController;
   leavingView?: ViewController;
-  direction?: string;
+  direction?: NavDirection;
 }
 
 export interface NavOptions {
   animate?: boolean;
   animation?: string;
-  direction?: string;
+  direction?: NavDirection;
   duration?: number;
   easing?: string;
   id?: string;

core/src/components/nav/nav.tsx

@@ -1,13 +1,12 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
-import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavOutlet, QueueController } from '../..';
+import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavOutlet, QueueController, RouteID, RouteWrite, RouterDirection } from '../../interface';
 import { assert } from '../../utils/helpers';
 import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition';
-import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
+import { NavComponent, NavDirection, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction } from '../../interface';
+import { ViewController, ViewState, convertToViews, matches } from './view-controller';
+
 import iosTransitionAnimation from './animations/ios.transition';
 import mdTransitionAnimation from './animations/md.transition';
-import { NavComponent, NavDirection, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction, ViewState, convertToViews } from './nav-util';
-import { ViewController, matches } from './view-controller';
-
 
 
 @Component({
@@ -17,7 +16,7 @@ export class Nav implements NavOutlet {
 
   private init = false;
   private transInstr: TransitionInstruction[] = [];
-  private sbTrns: Animation|undefined;
+  private sbTrns?: Animation;
   private useRouter = false;
   private isTransitioning = false;
   private destroyed = false;
@@ -34,9 +33,9 @@ export class Nav implements NavOutlet {
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
   @Prop({ mutable: true }) swipeBackEnabled?: boolean;
   @Prop({ mutable: true }) animated?: boolean;
-  @Prop() delegate?: FrameworkDelegate|undefined;
-  @Prop() rootParams: ComponentProps|undefined;
-  @Prop() root: NavComponent|undefined;
+  @Prop() delegate?: FrameworkDelegate;
+  @Prop() rootParams?: ComponentProps;
+  @Prop() root?: NavComponent;
   @Watch('root')
   rootChanged() {
     const isDev = Build.isDev;
@@ -201,11 +200,11 @@ export class Nav implements NavOutlet {
       }
     };
     if (viewController) {
-      finish = this.popTo(viewController, {...commonOpts, direction: NavDirection.Back});
+      finish = this.popTo(viewController, {...commonOpts, direction: 'back'});
     } else if (direction === 1) {
       finish = this.push(id, params, commonOpts);
     } else if (direction === -1) {
-      finish = this.setRoot(id, params, {...commonOpts, direction: NavDirection.Back, animate: true});
+      finish = this.setRoot(id, params, {...commonOpts, direction: 'back', animate: true});
     } else {
       finish = this.setRoot(id, params, commonOpts);
     }
@@ -305,7 +304,7 @@ export class Nav implements NavOutlet {
     if (ti.opts!.updateURL !== false && this.useRouter) {
       const router = this.win.document.querySelector('ion-router');
       if (router) {
-        const direction = (result.direction === NavDirection.Back)
+        const direction = (result.direction === 'back')
           ? RouterDirection.Back
           : RouterDirection.Forward;
 
@@ -501,7 +500,7 @@ export class Nav implements NavOutlet {
         }
       }
       // default the direction to "back"
-      opts.direction = opts.direction || NavDirection.Back;
+      opts.direction = opts.direction || 'back';
     }
 
     const finalBalance = this.views.length + (insertViews ? insertViews.length : 0) - (removeCount ? removeCount : 0);
@@ -525,7 +524,7 @@ export class Nav implements NavOutlet {
 
       if (ti.enteringRequiresTransition) {
         // default to forward if not already set
-        opts.direction = opts.direction || NavDirection.Forward;
+        opts.direction = opts.direction || 'forward';
       }
     }
 
@@ -687,7 +686,7 @@ export class Nav implements NavOutlet {
 
     // default the direction to "back";
     const opts: NavOptions = {
-      direction: NavDirection.Back,
+      direction: 'back',
       progressAnimation: true
     };
 

core/src/components/nav/test/nav-controller.spec.ts

@@ -1,12 +1,12 @@
-import { Nav } from '../nav';
-import { ViewController } from '../view-controller';
-import { AnimationControllerImpl } from '../../animation-controller/animation-controller';
-
-import { NavDirection, NavOptions, ViewState } from '../nav-util';
 import { TestWindow } from '@stencil/core/dist/testing';
+import { AnimationControllerImpl } from '../../animation-controller/animation-controller';
+import { Nav } from '../nav';
+import { NavOptions } from '../nav-interface';
+import { ViewController, ViewState } from '../view-controller';
 import { Config } from '../../../global/config';
 
 
+
 describe('NavController', () => {
 
   describe('push and pop', () => {
@@ -27,7 +27,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(push1Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, undefined, NavDirection.Forward
+        hasCompleted, requiresTransition, view1, undefined, 'forward'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -37,7 +37,7 @@ describe('NavController', () => {
       await nav.push(view2, null, {animate: false}, push2Done);
 
       expect(push2Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view1, NavDirection.Forward
+        hasCompleted, requiresTransition, view2, view1, 'forward'
       );
 
       expect(nav.length()).toEqual(2);
@@ -49,7 +49,7 @@ describe('NavController', () => {
       await nav.push(view3, null, {animate: false}, push3Done);
 
       expect(push3Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view3, view2, NavDirection.Forward
+        hasCompleted, requiresTransition, view3, view2, 'forward'
       );
       expect(nav.length()).toEqual(3);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -60,7 +60,7 @@ describe('NavController', () => {
       const view4 = mockView(MockView4);
       await nav.push(view4, null, {animate: false}, push4Done);
       expect(push4Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view4, view3, NavDirection.Forward
+        hasCompleted, requiresTransition, view4, view3, 'forward'
       );
       expect(nav.length()).toEqual(4);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -71,7 +71,7 @@ describe('NavController', () => {
       // Pop 1
       await nav.pop({animate: false}, pop1Done);
       expect(pop1Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view3, view4, NavDirection.Back
+        hasCompleted, requiresTransition, view3, view4, 'back'
       );
       expect(nav.length()).toEqual(3);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -81,7 +81,7 @@ describe('NavController', () => {
       // Pop 2
       await nav.pop({animate: false}, pop2Done);
       expect(pop2Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view3, NavDirection.Back
+        hasCompleted, requiresTransition, view2, view3, 'back'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -90,7 +90,7 @@ describe('NavController', () => {
       // Pop 3
       await nav.pop({animate: false}, pop3Done);
       expect(pop3Done).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, view2, NavDirection.Back
+        hasCompleted, requiresTransition, view1, view2, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -107,7 +107,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, undefined, NavDirection.Forward
+        hasCompleted, requiresTransition, view1, undefined, 'forward'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -125,7 +125,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view1, NavDirection.Forward
+        hasCompleted, requiresTransition, view2, view1, 'forward'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -164,7 +164,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view1, NavDirection.Forward
+        hasCompleted, requiresTransition, view2, view1, 'forward'
       );
       expect(nav.length()).toEqual(2);
 
@@ -212,7 +212,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view1, NavDirection.Forward
+        hasCompleted, requiresTransition, view2, view1, 'forward'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(nav.length() - 1)!.component).toEqual(MockView2);
@@ -228,7 +228,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view1, NavDirection.Forward
+        hasCompleted, requiresTransition, view2, view1, 'forward'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(nav.length() - 1)!.component).toEqual(MockView2);
@@ -388,7 +388,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, view2, NavDirection.Back
+        hasCompleted, requiresTransition, view1, view2, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -412,7 +412,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view3, NavDirection.Back
+        hasCompleted, requiresTransition, view2, view3, 'back'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -433,7 +433,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view4, NavDirection.Back
+        hasCompleted, requiresTransition, view2, view4, 'back'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -491,7 +491,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, view4, NavDirection.Back
+        hasCompleted, requiresTransition, view1, view4, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -551,7 +551,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, view4, NavDirection.Back
+        hasCompleted, requiresTransition, view1, view4, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -754,7 +754,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view4, NavDirection.Back
+        hasCompleted, requiresTransition, view2, view4, 'back'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -851,7 +851,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view2, view3, NavDirection.Back
+        hasCompleted, requiresTransition, view2, view3, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView2);
@@ -896,7 +896,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view1, view3, NavDirection.Back
+        hasCompleted, requiresTransition, view1, view3, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
@@ -924,7 +924,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view4, view3, NavDirection.Back
+        hasCompleted, requiresTransition, view4, view3, 'back'
       );
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView4);
@@ -957,7 +957,7 @@ describe('NavController', () => {
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
-        hasCompleted, requiresTransition, view5, view2, NavDirection.Back
+        hasCompleted, requiresTransition, view5, view2, 'back'
       );
       expect(nav.length()).toEqual(2);
       expect(nav.getByIndex(0)!.component).toEqual(MockView4);

core/src/components/nav/view-controller.ts

@@ -1,15 +1,20 @@
-import { ViewState } from './nav-util';
-import { assert } from '../../utils/helpers';
-import { ComponentProps, FrameworkDelegate, Nav } from '../..';
+import { ComponentProps, FrameworkDelegate, Nav } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
+import { assert } from '../../utils/helpers';
 
 
+export const enum ViewState {
+  New = 1,
+  Attached,
+  Destroyed
+}
+
 export class ViewController {
 
-  nav: Nav|undefined;
   state: ViewState = ViewState.New;
-  element: HTMLElement|undefined;
-  delegate?: FrameworkDelegate|undefined;
+  nav?: Nav;
+  element?: HTMLElement;
+  delegate?: FrameworkDelegate;
 
   constructor(
     public component: any,
@@ -80,3 +85,25 @@ export function matches(view: ViewController|undefined, id: string, params: Comp
   }
   return true;
 }
+
+export function convertToView(page: any, params: any): ViewController|null {
+  if (!page) {
+    return null;
+  }
+  if (page instanceof ViewController) {
+    return page;
+  }
+  return new ViewController(page, params);
+}
+
+export function convertToViews(pages: any[]): ViewController[] {
+  return pages.map(page => {
+    if (page instanceof ViewController) {
+      return page;
+    }
+    if ('page' in page) {
+      return convertToView(page.page, page.params);
+    }
+    return convertToView(page, undefined);
+  }).filter(v => v !== null) as ViewController[];
+}

core/src/components/note/note.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../..';
+import { Mode } from '../../interface';
 
 
 @Component({

core/src/components/picker-column/picker-column.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { GestureDetail, Mode, PickerColumn, PickerColumnOption, QueueController } from '../../index';
+import { GestureDetail, Mode, PickerColumn, PickerColumnOption, QueueController } from '../../interface';
 import { hapticSelectionChanged } from '../../utils';
 import { clamp } from '../../utils/helpers';
 

core/src/components/picker-controller/picker-controller.tsx

@@ -1,6 +1,6 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { PickerOptions } from '../../index';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { PickerOptions } from '../../interface';
 
 
 @Component({

core/src/components/picker/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/picker/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 
 /**

core/src/components/picker/picker-interface.ts

@@ -0,0 +1,39 @@
+
+export interface PickerButton {
+  text?: string;
+  role?: string;
+  cssClass?: string | string[];
+  handler?: (value: any) => boolean|void;
+}
+
+export interface PickerOptions {
+  buttons?: PickerButton[];
+  columns?: PickerColumn[];
+  cssClass?: string | string[];
+  enableBackdropDismiss?: boolean;
+}
+
+export interface PickerColumn {
+  name: string;
+  align?: string;
+  selectedIndex?: number;
+  prevSelected?: number;
+  prefix?: string;
+  suffix?: string;
+  options: PickerColumnOption[];
+  cssClass?: string | string[];
+  columnWidth?: string;
+  prefixWidth?: string;
+  suffixWidth?: string;
+  optionsWidth?: string;
+  refresh?: () => void;
+}
+
+export interface PickerColumnOption {
+  text?: string;
+  value?: any;
+  disabled?: boolean;
+  duration?: number;
+  transform?: string;
+  selected?: boolean;
+}

core/src/components/picker/picker.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../index';
+import { Animation, AnimationBuilder, Config, CssClassMap, Mode, PickerButton, PickerColumn } from '../../interface';
 
 import { getClassMap } from '../../utils/theme';
 import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
@@ -337,42 +337,3 @@ function buttonClass(button: PickerButton): CssClassMap {
     ...getClassMap(button.cssClass)
   };
 }
-
-export interface PickerButton {
-  text?: string;
-  role?: string;
-  cssClass?: string | string[];
-  handler?: (value: any) => boolean|void;
-}
-
-export interface PickerOptions {
-  buttons?: PickerButton[];
-  columns?: PickerColumn[];
-  cssClass?: string | string[];
-  enableBackdropDismiss?: boolean;
-}
-
-export interface PickerColumn {
-  name: string;
-  align?: string;
-  selectedIndex?: number;
-  prevSelected?: number;
-  prefix?: string;
-  suffix?: string;
-  options: PickerColumnOption[];
-  cssClass?: string | string[];
-  columnWidth?: string;
-  prefixWidth?: string;
-  suffixWidth?: string;
-  optionsWidth?: string;
-  refresh?: () => void;
-}
-
-export interface PickerColumnOption {
-  text?: string;
-  value?: any;
-  disabled?: boolean;
-  duration?: number;
-  transform?: string;
-  selected?: boolean;
-}

core/src/components/popover-controller/popover-controller.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
-import { PopoverOptions } from '../../index';
+import { PopoverOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({

core/src/components/popover/animations/ios.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Popover Enter Animation

core/src/components/popover/animations/ios.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * iOS Popover Leave Animation

core/src/components/popover/animations/md.enter.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Popover Enter Animation

core/src/components/popover/animations/md.leave.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../index';
+import { Animation } from '../../../interface';
 
 /**
  * Md Popover Leave Animation

core/src/components/popover/popover-interface.ts

@@ -0,0 +1,14 @@
+import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
+
+export interface PopoverOptions {
+  component: ComponentRef;
+  componentProps?: ComponentProps;
+  showBackdrop?: boolean;
+  enableBackdropDismiss?: boolean;
+  translucent?: boolean;
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+  cssClass?: string | string[];
+  ev: Event;
+  delegate?: FrameworkDelegate;
+}

core/src/components/popover/popover.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../index';
+import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
 
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
@@ -253,19 +253,6 @@ export class Popover implements OverlayInterface {
   }
 }
 
-export interface PopoverOptions {
-  component: ComponentRef;
-  componentProps?: ComponentProps;
-  showBackdrop?: boolean;
-  enableBackdropDismiss?: boolean;
-  translucent?: boolean;
-  enterAnimation?: AnimationBuilder;
-  leaveAnimation?: AnimationBuilder;
-  cssClass?: string | string[];
-  ev: Event;
-  delegate?: FrameworkDelegate;
-}
-
 const LIFECYCLE_MAP: any = {
   'ionPopoverDidPresent': 'ionViewDidEnter',
   'ionPopoverWillPresent': 'ionViewWillEnter',

core/src/components/radio-group/radio-group.tsx

@@ -1,5 +1,5 @@
 import { Component, ComponentDidLoad, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
-import { InputChangeEvent, RadioGroupInput } from '../../utils/input-interfaces';
+import { InputChangeEvent, RadioGroupInput } from '../../interface';
 
 
 @Component({