fix(angular): goback navigation

angular/src/directives/proxies.ts

@@ -15,7 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) {
   });
 }
 
-const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', data = 'data', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap';
+const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap';
 
 @NgDirective({ selector: 'ion-anchor' })
 export class Anchor {
@@ -590,7 +590,7 @@ export class Item {
    */
   @NgInput() color: string;
   /**
-   * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
+   * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
    */
   @NgInput() detail: boolean;
   /**
@@ -604,10 +604,10 @@ export class Item {
   /**
    * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
    */
-  @NgInput() tappable: boolean;
+  @NgInput() button: boolean;
   @NgInput() goBack: boolean;
   constructor(el: ElementRef) {
-    inputs(this, el, [color, detail, disabled, href, tappable, goBack]);
+    inputs(this, el, [color, detail, disabled, href, button, goBack]);
   }
 }
 
@@ -777,21 +777,17 @@ export class NavPop {
 
 @NgDirective({ selector: 'ion-nav-push' })
 export class NavPush {
-  @NgInput() component: any;
   @NgInput() url: string;
-  @NgInput() data: any;
   constructor(el: ElementRef) {
-    inputs(this, el, [component, url, data]);
+    inputs(this, el, [url]);
   }
 }
 
 @NgDirective({ selector: 'ion-nav-set-root' })
 export class NavSetRoot {
-  @NgInput() component: any;
   @NgInput() url: string;
-  @NgInput() data: any;
   constructor(el: ElementRef) {
-    inputs(this, el, [component, url, data]);
+    inputs(this, el, [url]);
   }
 }
 

angular/src/navigation/ion-nav-controller.ts

@@ -4,25 +4,31 @@ import { Injectable } from '@angular/core';
 export class NavController {
 
   private direction = 1;
-  // private stack: string[] = [];
+  private goBack = false;
+  private stack: string[] = [];
 
   setGoback() {
-    this.direction = -1;
+    this.goBack = true;
   }
 
   consumeDirection() {
-    // if (this.direction === 0) {
+    if (this.direction === 0) {
-    //   const index = this.stack.indexOf(document.location.href);
+      const index = this.stack.indexOf(document.location.href);
-    //   if (index === -1) {
+      if (index === -1) {
-    //     this.stack.push(document.location.href);
+        this.stack.push(document.location.href);
-    //     this.direction = 1;
-    //   } else {
-    //     this.stack = this.stack.slice(0, index + 1);
-    //     this.direction = -1;
-    //   }
-    // }
-    const direction = this.direction;
         this.direction = 1;
+      } else if (index < this.stack.length - 1) {
+        this.stack = this.stack.slice(0, index + 1);
+        this.direction = -1;
+      }
+    }
+
+    const direction = this.goBack
+      ? -1
+      : this.direction;
+
+    this.goBack = false;
+    this.direction = 0;
     return direction;
   }
 }

angular/src/navigation/ion-router-outlet.ts

@@ -1,6 +1,7 @@
 import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router';
 import { StackController } from './router-controller';
+import { NavController } from '..';
 
 @Directive({
   selector: 'ion-router-outlet',
@@ -25,7 +26,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     @Attribute('name') name: string,
     @Optional() @Attribute('stack') stack: any,
     private changeDetector: ChangeDetectorRef,
-    // private navCtrl: NavController,
+    private navCtrl: NavController,
     router: Router
   ) {
     this.name = name || PRIMARY_OUTLET;
@@ -136,7 +137,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
     }
 
-    await this.stackCtrl.setActive(enteringView, undefined);
+    const direction = this.navCtrl.consumeDirection();
+    await this.stackCtrl.setActive(enteringView, direction);
     this.activateEvents.emit(this.activated.instance);
   }
 

angular/src/navigation/router-controller.ts

@@ -32,10 +32,10 @@ export class StackController {
     return this.views.length > deep;
   }
 
-  async setActive(enteringView: RouteView, defaultDir: number|undefined) {
+  async setActive(enteringView: RouteView, direction: number | undefined) {
     const leavingView = this.getActive();
     const reused = this.insertView(enteringView);
-    const direction = defaultDir != null ? defaultDir : (reused ? -1 : 1);
+    direction = direction != null ? direction : (reused ? -1 : 1);
     await this.transition(enteringView, leavingView, direction);
 
     this.cleanup();

core/src/components.d.ts

@@ -30,6 +30,8 @@ import {
   AlertOptions,
   Animation as Animation2,
   AnimationBuilder,
+  ComponentProps,
+  ComponentRef,
   FrameworkDelegate,
   LoadingOptions,
   Menu,
@@ -85,11 +87,16 @@ import {
   MenuChangeEventDetail,
 } from './components/menu/menu';
 import {
+  NavComponent,
   NavOptions,
-  NavParams,
   TransitionDoneFn,
   TransitionInstruction,
 } from './components/nav/nav-util';
+import {
+  AnimationBuilder as AnimationBuilder3,
+  ComponentProps as ComponentProps2,
+  FrameworkDelegate as FrameworkDelegate2,
+} from '.';
 import {
   ViewController,
 } from './components/nav/view-controller';
@@ -99,10 +106,6 @@ import {
   RouterEventDetail,
   RouteWrite,
 } from './components/router/utils/interfaces';
-import {
-  AnimationBuilder as AnimationBuilder3,
-  FrameworkDelegate as FrameworkDelegate2,
-} from '.';
 import {
   PickerButton,
   PickerColumn as PickerColumn2,
@@ -166,7 +169,7 @@ declare global {
     /**
      * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
      */
-    'cssClass': string;
+    'cssClass': string | string[];
     /**
      * Dismiss the action sheet overlay after it has been presented.
      */
@@ -238,7 +241,7 @@ declare global {
       /**
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
-      'cssClass'?: string;
+      'cssClass'?: string | string[];
       /**
        * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
        */
@@ -336,7 +339,7 @@ declare global {
     /**
      * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
      */
-    'cssClass': string;
+    'cssClass': string | string[];
     /**
      * Dismiss the alert overlay after it has been presented.
      */
@@ -417,7 +420,7 @@ declare global {
       /**
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
-      'cssClass'?: string;
+      'cssClass'?: string | string[];
       /**
        * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
        */
@@ -2851,7 +2854,7 @@ declare global {
     /**
      * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
      */
-    'cssClass': string;
+    'cssClass': string | string[];
     /**
      * Dismiss the loading overlay after it has been presented.
      */
@@ -2931,7 +2934,7 @@ declare global {
       /**
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
-      'cssClass'?: string;
+      'cssClass'?: string | string[];
       /**
        * If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
        */
@@ -3278,15 +3281,15 @@ declare global {
     /**
      * The component to display inside of the modal.
      */
-    'component': any;
+    'component': ComponentRef;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
-     */
-    'cssClass': string;
     /**
      * The data to pass to the modal component.
      */
-    'data': any;
+    'componentProps': ComponentProps;
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+     */
+    'cssClass': string | string[];
     'delegate': FrameworkDelegate;
     /**
      * Dismiss the modal overlay after it has been presented.
@@ -3355,15 +3358,15 @@ declare global {
       /**
        * The component to display inside of the modal.
        */
-      'component'?: any;
+      'component'?: ComponentRef;
-      /**
-       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
-       */
-      'cssClass'?: string;
       /**
        * The data to pass to the modal component.
        */
-      'data'?: any;
+      'componentProps'?: ComponentProps;
+      /**
+       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+       */
+      'cssClass'?: string | string[];
       'delegate'?: FrameworkDelegate;
       /**
        * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
@@ -3449,8 +3452,8 @@ declare global {
 
 declare global {
   interface HTMLIonNavPushElement extends HTMLStencilElement {
-    'component': any;
+    'component': NavComponent;
-    'data': any;
+    'componentProps': ComponentProps;
     'url': string;
   }
   var HTMLIonNavPushElement: {
@@ -3470,8 +3473,8 @@ declare global {
   }
   namespace JSXElements {
     export interface IonNavPushAttributes extends HTMLAttributes {
-      'component'?: any;
+      'component'?: NavComponent;
-      'data'?: any;
+      'componentProps'?: ComponentProps;
       'url'?: string;
     }
   }
@@ -3480,8 +3483,8 @@ declare global {
 
 declare global {
   interface HTMLIonNavSetRootElement extends HTMLStencilElement {
-    'component': any;
+    'component': NavComponent;
-    'data': any;
+    'componentProps': ComponentProps;
     'url': string;
   }
   var HTMLIonNavSetRootElement: {
@@ -3501,8 +3504,8 @@ declare global {
   }
   namespace JSXElements {
     export interface IonNavSetRootAttributes extends HTMLAttributes {
-      'component'?: any;
+      'component'?: NavComponent;
-      'data'?: any;
+      'componentProps'?: ComponentProps;
       'url'?: string;
     }
   }
@@ -3518,24 +3521,20 @@ declare global {
     'getByIndex': (index: number) => ViewController;
     'getPrevious': (view?: ViewController) => ViewController;
     'getRouteId': () => RouteID;
-    /**
-     * Return a view controller
-     */
-    'getViewById': (id: string) => ViewController;
     'getViews': () => ViewController[];
-    'insert': (insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
-    'insertPages': (insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'pop': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'popAll': () => Promise<boolean[]>;
-    'popTo': (indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'popToRoot': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
-    'push': (page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'push': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'removeView': (viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
-    'root': any;
+    'root': NavComponent;
-    'rootParams': any;
+    'rootParams': ComponentProps;
-    'setPages': (pages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'setPages': (views: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
-    'setRoot': (pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
+    'setRoot': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
     'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
     'swipeBackEnabled': boolean;
   }
@@ -3559,8 +3558,8 @@ declare global {
       'animated'?: boolean;
       'delegate'?: FrameworkDelegate;
       'onIonNavChanged'?: (event: CustomEvent<void>) => void;
-      'root'?: any;
+      'root'?: NavComponent;
-      'rootParams'?: any;
+      'rootParams'?: ComponentProps;
       'swipeBackEnabled'?: boolean;
     }
   }
@@ -3679,7 +3678,7 @@ declare global {
     /**
      * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
      */
-    'cssClass': string;
+    'cssClass': string | string[];
     /**
      * Dismiss the picker overlay after it has been presented.
      */
@@ -3753,7 +3752,7 @@ declare global {
       /**
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
-      'cssClass'?: string;
+      'cssClass'?: string | string[];
       /**
        * Number of milliseconds to wait before dismissing the picker.
        */
@@ -3889,15 +3888,15 @@ declare global {
     /**
      * The component to display inside of the popover.
      */
-    'component': string;
+    'component': ComponentRef;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
-     */
-    'cssClass': string;
     /**
      * The data to pass to the popover component.
      */
-    'data': any;
+    'componentProps': ComponentProps;
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+     */
+    'cssClass': string | string[];
     'delegate': FrameworkDelegate;
     /**
      * Dismiss the popover overlay after it has been presented.
@@ -3974,15 +3973,15 @@ declare global {
       /**
        * The component to display inside of the popover.
        */
-      'component'?: string;
+      'component'?: ComponentRef;
-      /**
-       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
-       */
-      'cssClass'?: string;
       /**
        * The data to pass to the popover component.
        */
-      'data'?: any;
+      'componentProps'?: ComponentProps;
+      /**
+       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+       */
+      'cssClass'?: string | string[];
       'delegate'?: FrameworkDelegate;
       /**
        * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
@@ -6353,7 +6352,7 @@ declare global {
     /**
      * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
      */
-    'cssClass': string;
+    'cssClass': string | string[];
     /**
      * Dismiss the toast overlay after it has been presented.
      */
@@ -6433,7 +6432,7 @@ declare global {
       /**
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
-      'cssClass'?: string;
+      'cssClass'?: string | string[];
       /**
        * If true, the toast will dismiss when the page changes. Defaults to `false`.
        */

core/src/components/action-sheet/readme.md

@@ -25,7 +25,7 @@ An array of buttons for the action sheet.
 
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
@@ -101,7 +101,7 @@ An array of buttons for the action sheet.
 
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.

core/src/components/alert/readme.md

@@ -34,7 +34,7 @@ Array of buttons to be added to the alert.
 
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
@@ -129,7 +129,7 @@ Array of buttons to be added to the alert.
 
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.

core/src/components/loading/readme.md

@@ -42,7 +42,7 @@ Optional text content to display in the loading indicator.
 
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
@@ -133,7 +133,7 @@ Optional text content to display in the loading indicator.
 
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.

core/src/components/modal/readme.md

@@ -59,26 +59,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 #### component
 
-any
+
 
 The component to display inside of the modal.
 
 
+#### componentProps
+
+
+
+The data to pass to the modal component.
+
+
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
 
 
-#### data
-
-any
-
-The data to pass to the modal component.
-
-
 #### delegate
 
 
@@ -151,26 +151,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 #### component
 
-any
+
 
 The component to display inside of the modal.
 
 
+#### component-props
+
+
+
+The data to pass to the modal component.
+
+
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
 
 
-#### data
-
-any
-
-The data to pass to the modal component.
-
-
 #### delegate
 
 

core/src/components/nav-push/readme.md

@@ -9,12 +9,12 @@
 
 #### component
 
-any
 
 
-#### data
 
-any
+#### componentProps
+
+
 
 
 #### url
@@ -26,12 +26,12 @@ string
 
 #### component
 
-any
 
 
-#### data
 
-any
+#### component-props
+
+
 
 
 #### url

core/src/components/nav-set-root/readme.md

@@ -9,12 +9,12 @@
 
 #### component
 
-any
 
 
-#### data
 
-any
+#### componentProps
+
+
 
 
 #### url
@@ -26,12 +26,12 @@ string
 
 #### component
 
-any
 
 
-#### data
 
-any
+#### component-props
+
+
 
 
 #### url

core/src/components/nav/readme.md

@@ -19,12 +19,12 @@ boolean
 
 #### root
 
-any
+
 
 
 #### rootParams
 
-any
+
 
 
 #### swipeBackEnabled
@@ -46,12 +46,12 @@ boolean
 
 #### root
 
-any
+
 
 
 #### root-params
 
-any
+
 
 
 #### swipe-back-enabled
@@ -81,11 +81,6 @@ boolean
 #### getRouteId()
 
 
-#### getViewById()
-
-Return a view controller
-
-
 #### getViews()
 
 

core/src/components/picker/readme.md

@@ -25,7 +25,7 @@ Array of columns to be displayed in the picker.
 
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
@@ -101,7 +101,7 @@ Array of columns to be displayed in the picker.
 
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.

core/src/components/popover/readme.md

@@ -39,26 +39,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 #### component
 
-string
+
 
 The component to display inside of the popover.
 
 
+#### componentProps
+
+
+
+The data to pass to the popover component.
+
+
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
 
 
-#### data
-
-any
-
-The data to pass to the popover component.
-
-
 #### delegate
 
 
@@ -145,26 +145,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 #### component
 
-string
+
 
 The component to display inside of the popover.
 
 
+#### component-props
+
+
+
+The data to pass to the popover component.
+
+
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
 
 
-#### data
-
-any
-
-The data to pass to the popover component.
-
-
 #### delegate
 
 

core/src/components/toast/readme.md

@@ -52,7 +52,7 @@ Text to display in the close button.
 
 #### cssClass
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.
@@ -143,7 +143,7 @@ Text to display in the close button.
 
 #### css-class
 
-string
+
 
 Additional classes to apply for custom CSS. If multiple classes are
 provided they should be separated by spaces.

core/src/utils/theme.ts

@@ -6,8 +6,7 @@ import { CssClassMap } from '../index';
 export function createThemedClasses(mode: string, color: string, classes: string): CssClassMap {
   const classObj: CssClassMap = {};
 
-  return classes.split(' ')
+  classes.split(' ').forEach(classString => {
-    .reduce((classObj: CssClassMap, classString: string): CssClassMap => {
     classObj[classString] = true;
 
     if (mode) {
@@ -20,7 +19,8 @@ export function createThemedClasses(mode: string, color: string, classes: string
     }
 
     return classObj;
-    }, classObj);
+  });
+  return classObj;
 }
 
 /**