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

ionic-team · Apr 2, 2018 · a5e5403 · a5e5403
1 parent acd411d
commit a5e5403
Show file tree

Hide file tree

Showing 40 changed files with 286 additions and 223 deletions.
diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/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;
 

diff --git a/angular/src/directives/navigation/tab-delegate.ts b/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);
+    }
   }
 
 }

diff --git a/angular/src/directives/navigation/tabs-delegate.ts b/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);
     }
   }
-
 }
-
diff --git a/angular/src/directives/proxies.ts b/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() subTitle: string;
+  @NgInput() header: 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]);
-    outputs(this, [ionChange, ionNavChanged]);
+    inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable, useRouter]);
+    outputs(this, [ionChange, ionNavWillChange, ionNavDidChange]);
   }
 }
 

diff --git a/angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts b/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',

diff --git a/angular/test/nav/src/app/alert/alert-page.component.ts b/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: [
         {

diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/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",