refactor(overlays): [title] -> [header]

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

@@ -122,7 +122,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       this.activated = enteringView.ref;
     } else {
       const snapshot = (activatedRoute as any)._futureSnapshot;
-
       const component = <any>snapshot.routeConfig !.component;
       resolver = resolver || this.resolver;
 

angular/src/directives/navigation/tab-delegate.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Directive, ElementRef, Injector } from '@angular/core';
+import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { AngularDelegate } from '../../providers/angular-delegate';
 
 
@@ -8,12 +8,23 @@ import { AngularDelegate } from '../../providers/angular-delegate';
 export class TabDelegate {
 
   constructor(
-    ref: ElementRef,
+    private elementRef: ElementRef,
     cfr: ComponentFactoryResolver,
     injector: Injector,
     angularDelegate: AngularDelegate,
   ) {
-    ref.nativeElement.delegate = angularDelegate.create(cfr, injector);
+    elementRef.nativeElement.delegate = angularDelegate.create(cfr, injector);
+  }
+
+  @HostListener('ionNavDidChange')
+  async onNavChanged() {
+    const tab = this.elementRef.nativeElement as HTMLIonTabElement;
+    await tab.componentOnReady();
+    const tabs = tab.closest('ion-tabs');
+    if (tabs) {
+      await tabs.componentOnReady();
+      await tabs.select(tab);
+    }
   }
 
 }

angular/src/directives/navigation/tabs-delegate.ts

@@ -1,4 +1,4 @@
-import { Directive, HostListener, Optional } from '@angular/core';
+import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Directive({
@@ -8,15 +8,18 @@ export class TabsDelegate {
 
   constructor(
     @Optional() private router: Router,
-  ) {}
+    elementRef: ElementRef
+  ) {
+    if (router) {
+      elementRef.nativeElement.useRouter = true;
+    }
+  }
 
   @HostListener('ionTabbarClick', ['$event'])
-  ionTabbarClick(ev: UIEvent) {
+  onTabbarClick(ev: UIEvent) {
     const tabElm: HTMLIonTabElement = ev.detail as any;
     if (this.router && tabElm && tabElm.href) {
       this.router.navigateByUrl(tabElm.href);
     }
   }
-
 }
-

angular/src/directives/proxies.ts

@@ -15,7 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) {
   });
 }
 
-const accept = 'accept', activated = 'activated', active = 'active', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', btnId = 'btnId', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', goBack = 'goBack', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavChanged = 'ionNavChanged', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', 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', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', strong = 'strong', subTitle = 'subTitle', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabBadge = 'tabBadge', tabBadgeStyle = 'tabBadgeStyle', tabIcon = 'tabIcon', tabTitle = 'tabTitle', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', text = 'text', threshold = 'threshold', title = 'title', toggleActive = 'toggleActive', translucent = 'translucent', type = 'type', url = 'url', useTapClick = 'useTapClick', value = 'value', vertical = 'vertical', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues';
+const accept = 'accept', activated = 'activated', active = 'active', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', btnId = 'btnId', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', goBack = 'goBack', header = 'header', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavDidChange = 'ionNavDidChange', ionNavWillChange = 'ionNavWillChange', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', 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', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', strong = 'strong', subHeader = 'subHeader', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabBadge = 'tabBadge', tabBadgeStyle = 'tabBadgeStyle', tabIcon = 'tabIcon', tabTitle = 'tabTitle', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', text = 'text', threshold = 'threshold', toggleActive = 'toggleActive', translucent = 'translucent', type = 'type', url = 'url', useRouter = 'useRouter', useTapClick = 'useTapClick', value = 'value', vertical = 'vertical', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues';
 
 @NgDirective({ selector: 'ion-app' })
 export class App {
@@ -868,10 +868,11 @@ export class Nav {
   @NgInput() delegate: any;
   @NgInput() rootParams: any;
   @NgInput() root: any;
-  @NgOutput() ionNavChanged: NgEventEmitter<any>;
+  @NgOutput() ionNavWillChange: NgEventEmitter<any>;
+  @NgOutput() ionNavDidChange: NgEventEmitter<any>;
   constructor(el: ElementRef) {
     inputs(this, el, [swipeBackEnabled, animated, delegate, rootParams, root]);
-    outputs(this, [ionNavChanged]);
+    outputs(this, [ionNavWillChange, ionNavDidChange]);
   }
 }
 
@@ -1316,12 +1317,12 @@ export class SelectOption {
 
 @NgDirective({ selector: 'ion-select-popover' })
 export class SelectPopover {
-  @NgInput() title: string;
+  @NgInput() header: string;
-  @NgInput() subTitle: string;
+  @NgInput() subHeader: string;
   @NgInput() message: string;
   @NgInput() options: any;
   constructor(el: ElementRef) {
-    inputs(this, el, [title, subTitle, message, options]);
+    inputs(this, el, [header, subHeader, message, options]);
   }
 }
 
@@ -1511,11 +1512,13 @@ export class Tabs {
    */
   @NgInput() translucent: boolean;
   @NgInput() scrollable: boolean;
+  @NgInput() useRouter: boolean;
   @NgOutput() ionChange: NgEventEmitter<any>;
-  @NgOutput() ionNavChanged: NgEventEmitter<any>;
+  @NgOutput() ionNavWillChange: NgEventEmitter<any>;
+  @NgOutput() ionNavDidChange: NgEventEmitter<any>;
   constructor(el: ElementRef) {
-    inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable]);
+    inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable, useRouter]);
-    outputs(this, [ionChange, ionNavChanged]);
+    outputs(this, [ionChange, ionNavWillChange, ionNavDidChange]);
   }
 }
 

angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts

@@ -25,7 +25,7 @@ export class ActionSheetPageComponent {
 
   async clickMe() {
     const actionSheet = await this.actionSheetController.create({
-      title: 'Albums',
+      header: 'Albums',
       buttons: [{
         text: 'Delete',
         role: 'destructive',

angular/test/nav/src/app/alert/alert-page.component.ts

@@ -23,7 +23,7 @@ export class AlertPageComponent {
 
   async clickMe() {
     const alert = await this.alertController.create({
-      title: 'ohhhh snap',
+      header: 'ohhhh snap',
       message: 'Ive been injected via Angular keeping the old api',
       buttons: [
         {

core/package-lock.json

@@ -14,9 +14,9 @@
       }
     },
     "@stencil/core": {
-      "version": "0.7.10",
+      "version": "0.7.12",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.7.10.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.7.12.tgz",
-      "integrity": "sha512-XriVhMUuFkZwXY0fbDjG7cHmEqbGzWbR7L0A79caSzsdVL1acwxKBThsu51IxSev8VG7yPPqA6PF0AJtvAVUfQ==",
+      "integrity": "sha512-rNIMb49b4mN0xOR9r9CLVIzMkuHVVoLLGL5J+hhvn5d1wTnlXjpWG5yF5EDyMo+xWxg1nXwP8Q9tdDK9K9Chvw==",
       "dev": true,
       "requires": {
         "chokidar": "2.0.1",
@@ -203,9 +203,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "9.6.0",
+      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.1.tgz",
-      "integrity": "sha512-h3YZbOq2+ZoDFI1z8Zx0Ck/xRWkOESVaLdgLdd/c25mMQ1Y2CAkILu9ny5A15S5f32gGcQdaUIZ2jzYr8D7IFg==",
+      "integrity": "sha512-xwlHq5DXQFRpe+u6hmmNkzYk/3oxxqDp71a/AJMupOQYmxyaBetqrVMqdNlSQfbg7XTJYD8vARjf3Op06OzdtQ==",
       "dev": true
     },
     "abab": {
@@ -8872,7 +8872,7 @@
       "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
       "dev": true,
       "requires": {
-        "@types/node": "9.6.0"
+        "@types/node": "9.6.1"
       }
     },
     "pascalcase": {

core/package.json

@@ -24,7 +24,7 @@
     "ionicons": "4.0.0-18"
   },
   "devDependencies": {
-    "@stencil/core": "0.7.10",
+    "@stencil/core": "0.7.12",
     "@stencil/dev-server": "latest",
     "@stencil/postcss": "0.0.2",
     "@stencil/sass": "0.0.3",

core/src/components.d.ts

@@ -183,6 +183,10 @@ declare global {
      * Animation to use when the action sheet is presented.
      */
     'enterAnimation': AnimationBuilder;
+    /**
+     * Title for the action sheet.
+     */
+    'header': string;
     'keyboardClose': boolean;
     /**
      * Animation to use when the action sheet is dismissed.
@@ -204,11 +208,7 @@ declare global {
     /**
      * Subtitle for the action sheet.
      */
-    'subTitle': string;
+    'subHeader': string;
-    /**
-     * Title for the action sheet.
-     */
-    'title': string;
     /**
      * If true, the action sheet will be translucent. Defaults to `false`.
      */
@@ -251,6 +251,10 @@ declare global {
        * Animation to use when the action sheet is presented.
        */
       'enterAnimation'?: AnimationBuilder;
+      /**
+       * Title for the action sheet.
+       */
+      'header'?: string;
       'keyboardClose'?: boolean;
       /**
        * Animation to use when the action sheet is dismissed.
@@ -284,11 +288,7 @@ declare global {
       /**
        * Subtitle for the action sheet.
        */
-      'subTitle'?: string;
+      'subHeader'?: string;
-      /**
-       * Title for the action sheet.
-       */
-      'title'?: string;
       /**
        * If true, the action sheet will be translucent. Defaults to `false`.
        */
@@ -353,6 +353,10 @@ declare global {
      * Animation to use when the alert is presented.
      */
     'enterAnimation': AnimationBuilder;
+    /**
+     * The main title in the heading of the alert.
+     */
+    'header': string;
     /**
      * Array of input to show in the alert.
      */
@@ -383,11 +387,7 @@ declare global {
     /**
      * The subtitle in the heading of the alert. Displayed under the title.
      */
-    'subTitle': string;
+    'subHeader': string;
-    /**
-     * The main title in the heading of the alert.
-     */
-    'title': string;
     /**
      * If true, the alert will be translucent. Defaults to `false`.
      */
@@ -430,6 +430,10 @@ declare global {
        * Animation to use when the alert is presented.
        */
       'enterAnimation'?: AnimationBuilder;
+      /**
+       * The main title in the heading of the alert.
+       */
+      'header'?: string;
       /**
        * Array of input to show in the alert.
        */
@@ -472,11 +476,7 @@ declare global {
       /**
        * The subtitle in the heading of the alert. Displayed under the title.
        */
-      'subTitle'?: string;
+      'subHeader'?: string;
-      /**
-       * The main title in the heading of the alert.
-       */
-      'title'?: string;
       /**
        * If true, the alert will be translucent. Defaults to `false`.
        */
@@ -3556,7 +3556,8 @@ declare global {
     export interface IonNavAttributes extends HTMLAttributes {
       'animated'?: boolean;
       'delegate'?: FrameworkDelegate|undefined;
-      'onIonNavChanged'?: (event: CustomEvent<void>) => void;
+      'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
+      'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
       'root'?: NavComponent|undefined;
       'rootParams'?: ComponentProps|undefined;
       'swipeBackEnabled'?: boolean;
@@ -4735,6 +4736,8 @@ declare global {
       'animated'?: boolean;
       'animationBuilder'?: AnimationBuilder;
       'delegate'?: FrameworkDelegate;
+      'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
+      'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
     }
   }
 }
@@ -5180,10 +5183,10 @@ declare global {
 
 declare global {
   interface HTMLIonSelectPopoverElement extends HTMLStencilElement {
+    'header': string;
     'message': string;
     'options': SelectPopoverOption[];
-    'subTitle': string;
+    'subHeader': string;
-    'title': string;
   }
   var HTMLIonSelectPopoverElement: {
     prototype: HTMLIonSelectPopoverElement;
@@ -5202,10 +5205,10 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSelectPopoverAttributes extends HTMLAttributes {
+      'header'?: string;
       'message'?: string;
       'options'?: SelectPopoverOption[];
-      'subTitle'?: string;
+      'subHeader'?: string;
-      'title'?: string;
     }
   }
 }
@@ -5957,6 +5960,7 @@ declare global {
      * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
      */
     'translucent': boolean;
+    'useRouter': boolean;
   }
   var HTMLIonTabsElement: {
     prototype: HTMLIonTabsElement;
@@ -5987,7 +5991,8 @@ declare global {
        * Emitted when the tab changes.
        */
       'onIonChange'?: (event: CustomEvent) => void;
-      'onIonNavChanged'?: (event: CustomEvent<void>) => void;
+      'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
+      'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
       'scrollable'?: boolean;
       /**
        * If true, the tabbar
@@ -6009,6 +6014,7 @@ declare global {
        * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
        */
       'translucent'?: boolean;
+      'useRouter'?: boolean;
     }
   }
 }

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

@@ -8,7 +8,7 @@ async function presentBasic() {
   await actionSheetController.componentOnReady();
 
   const actionSheetElement = await actionSheetController.create({
-    title: "Albums",
+    header: "Albums",
     buttons: [{
       text: 'Delete',
       role: 'destructive',

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

@@ -60,15 +60,15 @@ export class ActionSheet implements OverlayInterface {
    */
   @Prop() enableBackdropDismiss = true;
 
-  /**
-   * Subtitle for the action sheet.
-   */
-  @Prop() subTitle: string;
-
   /**
    * Title for the action sheet.
    */
-  @Prop() title: string;
+  @Prop() header: string;
+
+  /**
+   * Subtitle for the action sheet.
+   */
+  @Prop() subHeader: string;
 
   /**
    * If true, the action sheet will be translucent. Defaults to `false`.
@@ -231,11 +231,11 @@ export class ActionSheet implements OverlayInterface {
       <div class='action-sheet-wrapper' role='dialog'>
         <div class='action-sheet-container'>
           <div class='action-sheet-group'>
-            {this.title
+            {this.header
               ? <div class='action-sheet-title'>
-                {this.title}
+                {this.header}
-                {this.subTitle
+                {this.subHeader
-                ? <div class='action-sheet-sub-title'>{this.subTitle}</div>
+                ? <div class='action-sheet-sub-title'>{this.subHeader}</div>
                 : null}
               </div>
               : null}
@@ -287,8 +287,8 @@ function buttonClass(button: ActionSheetButton): CssClassMap {
 }
 
 export interface ActionSheetOptions {
-  title?: string;
+  header?: string;
-  subTitle?: string;
+  subHeader?: string;
   cssClass?: string;
   buttons?: (ActionSheetButton | string)[];
   enableBackdropDismiss?: boolean;

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

@@ -45,6 +45,13 @@ If true, the action sheet will be dismissed when the backdrop is clicked. Defaul
 Animation to use when the action sheet is presented.
 
 
+#### header
+
+string
+
+Title for the action sheet.
+
+
 #### keyboardClose
 
 boolean
@@ -62,20 +69,13 @@ Animation to use when the action sheet is dismissed.
 number
 
 
-#### subTitle
+#### subHeader
 
 string
 
 Subtitle for the action sheet.
 
 
-#### title
-
-string
-
-Title for the action sheet.
-
-
 #### translucent
 
 boolean
@@ -121,6 +121,13 @@ If true, the action sheet will be dismissed when the backdrop is clicked. Defaul
 Animation to use when the action sheet is presented.
 
 
+#### header
+
+string
+
+Title for the action sheet.
+
+
 #### keyboard-close
 
 boolean
@@ -138,20 +145,13 @@ Animation to use when the action sheet is dismissed.
 number
 
 
-#### sub-title
+#### sub-header
 
 string
 
 Subtitle for the action sheet.
 
 
-#### title
-
-string
-
-Title for the action sheet.
-
-
 #### translucent
 
 boolean

core/src/components/action-sheet/test/basic/index.html

@@ -42,7 +42,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -86,7 +86,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -343,7 +343,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Custom Css Class",
+        header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
           {

core/src/components/action-sheet/test/preview/index.html

@@ -42,7 +42,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -86,7 +86,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -343,7 +343,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Custom Css Class",
+        header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
           {

core/src/components/action-sheet/test/standalone/index.html

@@ -40,7 +40,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -84,7 +84,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',
@@ -339,7 +339,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        title: "Custom Css Class",
+        header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
           {

core/src/components/action-sheet/test/translucent/index.html

@@ -41,7 +41,7 @@
           </ion-row>
         </ion-grid>
       </ion-content>
-    
+
   </ion-app>
 
   <script>
@@ -53,7 +53,7 @@
       await actionSheetController.componentOnReady();
 
       const actionSheetElement = await actionSheetController.create({
-        title: "Albums",
+        header: "Albums",
         buttons: [{
           text: 'Delete',
           role: 'destructive',

core/src/components/action-sheet/usage/angular.md

@@ -13,7 +13,7 @@ export class ActionSheetExample {
 
   presentActionSheet() {
     const actionSheet = this.actionSheetController.create({
-      title: "Albums",
+      header: "Albums",
       buttons: [{
         text: 'Delete',
         role: 'destructive',

core/src/components/action-sheet/usage/javascript.md

@@ -4,7 +4,7 @@ async function presentActionSheet() {
   await actionSheetController.componentOnReady();
 
   const actionSheet = await actionSheetController.create({
-    title: "Albums",
+    header: "Albums",
     buttons: [{
       text: 'Delete',
       role: 'destructive',

core/src/components/alert-controller/readme.md

@@ -9,8 +9,8 @@ async function presentAlert() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Alert',
+    header: 'Alert',
-    subTitle: 'Subtitle',
+    subHeader: 'Subtitle',
     message: 'This is an alert message.',
     buttons: ['OK']
   });

core/src/components/alert/alert.tsx

@@ -56,12 +56,12 @@ export class Alert implements OverlayInterface {
   /**
    * The main title in the heading of the alert.
    */
-  @Prop() title: string;
+  @Prop() header: string;
 
   /**
    * The subtitle in the heading of the alert. Displayed under the title.
    */
-  @Prop() subTitle: string;
+  @Prop() subHeader: string;
 
   /**
    * The main message to be displayed in the alert.
@@ -358,10 +358,10 @@ export class Alert implements OverlayInterface {
     const subHdrId = `alert-${this.overlayId}-sub-hdr`;
     const msgId = `alert-${this.overlayId}-msg`;
 
-    if (this.title || !this.subTitle) {
+    if (this.header || !this.subHeader) {
       this.hdrId = hdrId;
 
-    } else if (this.subTitle) {
+    } else if (this.subHeader) {
       this.hdrId = subHdrId;
     }
 
@@ -413,11 +413,11 @@ export class Alert implements OverlayInterface {
       <ion-backdrop tappable={this.enableBackdropDismiss}/>,
       <div class='alert-wrapper'>
         <div class='alert-head'>
-          {this.title
+          {this.header
-            ? <h2 id={hdrId} class='alert-title'>{this.title}</h2>
+            ? <h2 id={hdrId} class='alert-title'>{this.header}</h2>
             : null}
-          {this.subTitle
+          {this.subHeader
-            ? <h2 id={subHdrId} class='alert-sub-title'>{this.subTitle}</h2>
+            ? <h2 id={subHdrId} class='alert-sub-title'>{this.subHeader}</h2>
             : null}
         </div>
 
@@ -452,8 +452,8 @@ function buttonClass(button: AlertButton): CssClassMap {
 }
 
 export interface AlertOptions {
-  title?: string;
+  header?: string;
-  subTitle?: string;
+  subHeader?: string;
   message?: string;
   cssClass?: string | string[];
   mode?: string;

core/src/components/alert/readme.md

@@ -54,6 +54,13 @@ If true, the alert will be dismissed when the backdrop is clicked. Defaults to `
 Animation to use when the alert is presented.
 
 
+#### header
+
+string
+
+The main title in the heading of the alert.
+
+
 #### inputs
 
 
@@ -90,20 +97,13 @@ string
 number
 
 
-#### subTitle
+#### subHeader
 
 string
 
 The subtitle in the heading of the alert. Displayed under the title.
 
 
-#### title
-
-string
-
-The main title in the heading of the alert.
-
-
 #### translucent
 
 boolean
@@ -149,6 +149,13 @@ If true, the alert will be dismissed when the backdrop is clicked. Defaults to `
 Animation to use when the alert is presented.
 
 
+#### header
+
+string
+
+The main title in the heading of the alert.
+
+
 #### inputs
 
 
@@ -185,20 +192,13 @@ string
 number
 
 
-#### sub-title
+#### sub-header
 
 string
 
 The subtitle in the heading of the alert. Displayed under the title.
 
 
-#### title
-
-string
-
-The main title in the heading of the alert.
-
-
 #### translucent
 
 boolean

core/src/components/alert/test/basic/index.html

@@ -43,8 +43,8 @@
       await alertController.componentOnReady();
 
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
@@ -55,7 +55,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
@@ -66,8 +66,8 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
@@ -78,7 +78,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         buttons: ['OK']
       });
       return await alert.present();
@@ -88,7 +88,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Confirm!',
+        header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
           {
@@ -113,7 +113,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Prompt!',
+        header: 'Prompt!',
         inputs: [
           {
             placeholder: 'Placeholder 1'
@@ -176,7 +176,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Radio',
+        header: 'Radio',
         inputs: [
           {
             type: 'radio',
@@ -235,7 +235,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Checkbox',
+        header: 'Checkbox',
         inputs: [
           {
             type: 'checkbox',
@@ -297,8 +297,8 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
         message: 'This is an alert message.',
         buttons: [ {

core/src/components/alert/test/preview/index.html

@@ -43,8 +43,8 @@
       await alertController.componentOnReady();
 
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
@@ -55,7 +55,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
@@ -66,8 +66,8 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
@@ -78,7 +78,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         buttons: ['OK']
       });
       return await alert.present();
@@ -88,7 +88,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Confirm!',
+        header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
           {
@@ -113,7 +113,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Prompt!',
+        header: 'Prompt!',
         inputs: [
           {
             placeholder: 'Placeholder 1'
@@ -176,7 +176,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Radio',
+        header: 'Radio',
         inputs: [
           {
             type: 'radio',
@@ -235,7 +235,7 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Checkbox',
+        header: 'Checkbox',
         inputs: [
           {
             type: 'checkbox',
@@ -297,8 +297,8 @@
       const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
         message: 'This is an alert message.',
         buttons: [ {

core/src/components/alert/test/standalone/index.html

@@ -79,8 +79,8 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
@@ -91,7 +91,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
@@ -102,8 +102,8 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
@@ -114,7 +114,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         buttons: ['OK']
       });
       return await alert.present();
@@ -124,7 +124,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Confirm!',
+        header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
           {
@@ -149,7 +149,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Prompt!',
+        header: 'Prompt!',
         inputs: [
           {
             placeholder: 'Placeholder 1'
@@ -212,7 +212,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Radio',
+        header: 'Radio',
         inputs: [
           {
             type: 'radio',
@@ -271,7 +271,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Checkbox',
+        header: 'Checkbox',
         inputs: [
           {
             type: 'checkbox',
@@ -333,8 +333,8 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
         message: 'This is an alert message.',
         buttons: [ {

core/src/components/alert/test/translucent/index.html

@@ -54,8 +54,8 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK'],
         translucent: true
@@ -67,7 +67,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK'],
         translucent: true
@@ -79,8 +79,8 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
-        subTitle: 'Subtitle',
+        subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete'],
         translucent: true
@@ -92,7 +92,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Alert',
+        header: 'Alert',
         buttons: ['OK'],
         translucent: true
       });
@@ -103,7 +103,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Confirm!',
+        header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
           {
@@ -129,7 +129,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Prompt!',
+        header: 'Prompt!',
         inputs: [
           {
             placeholder: 'Placeholder 1'
@@ -193,7 +193,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Radio',
+        header: 'Radio',
         inputs: [
           {
             type: 'radio',
@@ -253,7 +253,7 @@
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
       const alert = await alertController.create({
-        title: 'Checkbox',
+        header: 'Checkbox',
         inputs: [
           {
             type: 'checkbox',

core/src/components/alert/usage/angular.md

@@ -13,8 +13,8 @@ export class AlertExample {
 
   presentAlert() {
     const alert = this.alertController.create({
-      title: 'Alert',
+      header: 'Alert',
-      subTitle: 'Subtitle',
+      subHeader: 'Subtitle',
       message: 'This is an alert message.',
       buttons: ['OK']
     });
@@ -24,8 +24,8 @@ export class AlertExample {
 
   presentAlertMultipleButtons() {
     const alert = this.alertController.create({
-      title: 'Alert',
+      header: 'Alert',
-      subTitle: 'Subtitle',
+      subHeader: 'Subtitle',
       message: 'This is an alert message.',
       buttons: ['Cancel', 'Open Modal', 'Delete']
     });
@@ -35,7 +35,7 @@ export class AlertExample {
 
   presentAlertConfirm() {
     const alert = this.alertController.create({
-      title: 'Confirm!',
+      header: 'Confirm!',
       message: 'Message <strong>text</strong>!!!',
       buttons: [
         {
@@ -59,7 +59,7 @@ export class AlertExample {
 
   presentAlertPrompt() {
     const alert = this.alertController.create({
-      title: 'Prompt!',
+      header: 'Prompt!',
       inputs: [
         {
           placeholder: 'Placeholder 1'
@@ -121,7 +121,7 @@ export class AlertExample {
 
   presentAlertRadio() {
     const alert = this.alertController.create({
-      title: 'Radio',
+      header: 'Radio',
       inputs: [
         {
           type: 'radio',
@@ -177,7 +177,7 @@ export class AlertExample {
 
   presentAlertCheckbox() {
     const alert = this.alertController.create({
-      title: 'Checkbox',
+      header: 'Checkbox',
       inputs: [
         {
           type: 'checkbox',

core/src/components/alert/usage/javascript.md

@@ -4,8 +4,8 @@ async function presentAlert() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Alert',
+    header: 'Alert',
-    subTitle: 'Subtitle',
+    subHeader: 'Subtitle',
     message: 'This is an alert message.',
     buttons: ['OK']
   });
@@ -17,8 +17,8 @@ async function presentAlertMultipleButtons() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Alert',
+    header: 'Alert',
-    subTitle: 'Subtitle',
+    subHeader: 'Subtitle',
     message: 'This is an alert message.',
     buttons: ['Cancel', 'Open Modal', 'Delete']
   });
@@ -30,7 +30,7 @@ async function presentAlertConfirm() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Confirm!',
+    header: 'Confirm!',
     message: 'Message <strong>text</strong>!!!',
     buttons: [
       {
@@ -56,7 +56,7 @@ async function presentAlertPrompt() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Prompt!',
+    header: 'Prompt!',
     inputs: [
       {
         placeholder: 'Placeholder 1'
@@ -120,7 +120,7 @@ async function presentAlertRadio() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Radio',
+    header: 'Radio',
     inputs: [
       {
         type: 'radio',
@@ -178,7 +178,7 @@ async function presentAlertCheckbox() {
   await alertController.componentOnReady();
 
   const alert = await alertController.create({
-    title: 'Checkbox',
+    header: 'Checkbox',
     inputs: [
       {
         type: 'checkbox',

core/src/components/content/content.tsx

@@ -38,7 +38,7 @@ export class Content {
 
   @Prop() scrollEvents = false;
 
-  @Listen('body:ionNavChanged')
+  @Listen('body:ionNavDidChange')
   onNavChanged() {
     this.resize();
   }

core/src/components/nav/nav.tsx

@@ -56,7 +56,8 @@ export class Nav implements NavOutlet {
     }
   }
 
-  @Event() ionNavChanged: EventEmitter<void>;
+  @Event() ionNavWillChange: EventEmitter<void>;
+  @Event() ionNavDidChange: EventEmitter<void>;
 
   componentWillLoad() {
     this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
@@ -314,7 +315,6 @@ export class Nav implements NavOutlet {
         router && router.navChanged(direction);
       }
     }
-    this.ionNavChanged.emit();
   }
 
   private failed(rejectReason: any, ti: TransitionInstruction) {
@@ -358,6 +358,7 @@ export class Nav implements NavOutlet {
   private async runTransition(ti: TransitionInstruction) {
     try {
       // set that this nav is actively transitioning
+      this.ionNavWillChange.emit();
       this.isTransitioning = true;
       this.prepareTI(ti);
 
@@ -378,6 +379,7 @@ export class Nav implements NavOutlet {
 
       const result = await this.transition(enteringView, leavingView, ti);
       this.success(result, ti);
+      this.ionNavDidChange.emit();
     } catch (rejectReason) {
       this.failed(rejectReason, ti);
     }

core/src/components/nav/readme.md

@@ -61,7 +61,10 @@ boolean
 
 ## Events
 
-#### ionNavChanged
+#### ionNavDidChange
+
+
+#### ionNavWillChange
 
 
 ## Methods

core/src/components/router-outlet/readme.md

@@ -39,6 +39,14 @@ boolean
 
 
 
+## Events
+
+#### ionNavDidChange
+
+
+#### ionNavWillChange
+
+
 ## Methods
 
 #### commit()

core/src/components/router-outlet/route-outlet.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Method, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
 import { transition } from '../../utils';
 import { NavDirection } from '../nav/nav-util';
 import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, NavOutlet } from '../..';
@@ -28,6 +28,9 @@ export class RouterOutlet implements NavOutlet {
   @Prop() animationBuilder: AnimationBuilder;
   @Prop() delegate: FrameworkDelegate;
 
+  @Event() ionNavWillChange: EventEmitter<void>;
+  @Event() ionNavDidChange: EventEmitter<void>;
+
   componentWillLoad() {
     if (this.animated === undefined) {
       this.animated = this.config.getBoolean('animate', true);
@@ -45,6 +48,9 @@ export class RouterOutlet implements NavOutlet {
     }
     this.activeComponent = component;
 
+    // emit nav will change event
+    this.ionNavWillChange.emit();
+
     // attach entering view to DOM
     const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
     const leavingEl = this.activeEl;
@@ -56,6 +62,9 @@ export class RouterOutlet implements NavOutlet {
     this.activeEl = enteringEl;
     detachComponent(this.delegate, leavingEl);
 
+    // emit nav changed event
+    this.ionNavDidChange.emit();
+
     return true;
   }
 

core/src/components/select-popover/readme.md

@@ -7,6 +7,11 @@
 
 ## Properties
 
+#### header
+
+string
+
+
 #### message
 
 string
@@ -17,18 +22,18 @@ string
 
 
 
-#### subTitle
+#### subHeader
-
-string
-
-
-#### title
 
 string
 
 
 ## Attributes
 
+#### header
+
+string
+
+
 #### message
 
 string
@@ -39,12 +44,7 @@ string
 
 
 
-#### sub-title
+#### sub-header
-
-string
-
-
-#### title
 
 string
 

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

@@ -18,9 +18,9 @@ export interface SelectPopoverOption {
 export class SelectPopover {
   private mode: string;
 
-  @Prop() title: string;
+  @Prop() header: string;
 
-  @Prop() subTitle: string;
+  @Prop() subHeader: string;
 
   @Prop() message: string;
 
@@ -35,11 +35,11 @@ export class SelectPopover {
   render() {
     return (
       <ion-list no-lines={this.mode === 'md'}>
-        { this.title ? <ion-list-header>{this.title}</ion-list-header> : null }
+        { this.header ? <ion-list-header>{this.header}</ion-list-header> : null }
-        { this.subTitle || this.message
+        { this.subHeader || this.message
           ? <ion-item>
               <ion-label>
-                { this.subTitle ? <h3>{this.subTitle}</h3> : null }
+                { this.subHeader ? <h3>{this.subHeader}</h3> : null }
                 { this.message ? <p>{this.message}</p> : null }
               </ion-label>
             </ion-item>

core/src/components/select/readme.md

@@ -71,8 +71,8 @@ For example, to change the `title` and `subTitle` of the overlay, pass it into `
 ```javascript
 var customSelect = document.getElementById('customSelect');
 customSelect.interfaceOptions = {
-  title: 'Pizza Toppings',
+  header: 'Pizza Toppings',
-  subTitle: 'Select your toppings'
+  subHeader: 'Select your toppings'
 };
 ```
 

core/src/components/select/test/basic/index.html

@@ -253,8 +253,8 @@
 
       var customAlertSelect = document.getElementById('customAlertSelect');
       var customAlertOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.00 per topping',
         translucent: true
       };
@@ -262,16 +262,16 @@
 
       var customPopoverSelect = document.getElementById('customPopoverSelect');
       var customPopoverOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.50 charge for every topping'
       };
       customPopoverSelect.interfaceOptions = customPopoverOptions;
 
       var customActionSheetSelect = document.getElementById('customActionSheetSelect');
       var customActionSheetOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.50 charge for every topping'
       };
       customActionSheetSelect.interfaceOptions = customActionSheetOptions;

core/src/components/select/test/preview/index.html

@@ -253,8 +253,8 @@
 
       var customAlertSelect = document.getElementById('customAlertSelect');
       var customAlertOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.00 per topping',
         translucent: true
       };
@@ -262,16 +262,16 @@
 
       var customPopoverSelect = document.getElementById('customPopoverSelect');
       var customPopoverOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.50 charge for every topping'
       };
       customPopoverSelect.interfaceOptions = customAlertOptions;
 
       var customActionSheetSelect = document.getElementById('customActionSheetSelect');
       var customActionSheetOptions = {
-        title: 'Pizza Toppings',
+        header: 'Pizza Toppings',
-        subTitle: 'Select your toppings',
+        subHeader: 'Select your toppings',
         message: '$1.50 charge for every topping'
       };
       customActionSheetSelect.interfaceOptions = customAlertOptions;

core/src/components/tab/tab.tsx

@@ -95,6 +95,7 @@ export class Tab {
       }
     }
   }
+
   @Method()
   getTabId(): string|null {
     if (this.name) {

core/src/components/tabs/readme.md

@@ -149,6 +149,11 @@ attribute needs to be set on the content.
 Defaults to `false`.
 
 
+#### useRouter
+
+boolean
+
+
 ## Attributes
 
 #### color
@@ -210,6 +215,11 @@ attribute needs to be set on the content.
 Defaults to `false`.
 
 
+#### use-router
+
+boolean
+
+
 ## Events
 
 #### ionChange
@@ -217,7 +227,10 @@ Defaults to `false`.
 Emitted when the tab changes.
 
 
-#### ionNavChanged
+#### ionNavDidChange
+
+
+#### ionNavWillChange
 
 
 ## Methods

core/src/components/tabs/tabs.tsx

@@ -11,7 +11,6 @@ export class Tabs implements NavOutlet {
 
   private ids = -1;
   private transitioning = false;
-  private useRouter = false;
   private tabsId: number = (++tabIds);
   private leavingTab: HTMLIonTabElement | undefined;
 
@@ -64,14 +63,19 @@ export class Tabs implements NavOutlet {
 
   @Prop() scrollable = false;
 
+  @Prop({mutable: true}) useRouter: boolean;
+
   /**
    * Emitted when the tab changes.
    */
   @Event() ionChange: EventEmitter;
-  @Event() ionNavChanged: EventEmitter<void>;
+  @Event() ionNavWillChange: EventEmitter<void>;
+  @Event() ionNavDidChange: EventEmitter<void>;
 
   componentWillLoad() {
-    this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
+    if (!this.useRouter) {
+      this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
+    }
 
     this.loadConfig('tabsPlacement', 'bottom');
     this.loadConfig('tabsLayout', 'icon-top');
@@ -219,6 +223,7 @@ export class Tabs implements NavOutlet {
     this.transitioning = true;
     this.leavingTab = this.selectedTab;
     this.selectedTab = selectedTab;
+    this.ionNavWillChange.emit();
     return selectedTab.setActive();
   }
 
@@ -238,7 +243,7 @@ export class Tabs implements NavOutlet {
         leavingTab.active = false;
       }
       this.ionChange.emit(selectedTab);
-      this.ionNavChanged.emit();
+      this.ionNavDidChange.emit();
     }
   }