feat(nav-link): merge nav-push/pop/set-root into a single component (#18909)

angular/src/directives/proxies-list.txt

@@ -43,6 +43,7 @@ d.IonApp,
   d.IonMenuButton,
   d.IonMenuToggle,
   d.IonNav,
+  d.IonNavLink,
   d.IonNavPop,
   d.IonNavPush,
   d.IonNavSetRoot,

angular/src/directives/proxies.ts

@@ -505,6 +505,17 @@ export class IonNav {
 proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
 proxyInputs(IonNav, ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']);
 
+export declare interface IonNavLink extends Components.IonNavLink {}
+@Component({ selector: 'ion-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps', 'routerDirection'] })
+export class IonNavLink {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);
+
 export declare interface IonNavPop extends Components.IonNavPop {}
 @Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonNavPop {

angular/src/ionic-module.ts

@@ -13,7 +13,7 @@ import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -66,6 +66,7 @@ const DECLARATIONS = [
   IonMenuButton,
   IonMenuToggle,
   IonNav,
+  IonNavLink,
   IonNavPop,
   IonNavPush,
   IonNavSetRoot,

angular/src/providers/menu-controller.ts

@@ -53,10 +53,10 @@ export class MenuController {
    * @param shouldEnable  True if it should be swipe-able, false if not.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
-   * @deprecated Use swipeGesture() instead
+   * @deprecated Use swipeGesture() instead.
    */
   swipeEnable(shouldEnable: boolean, menuId?: string) {
-    console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
+    console.warn('[DEPRECATED][ion-menu-controller] swipeEnable() is deprecated. Use MenuController.swipeGesture() instead');
     return this.swipeGesture(shouldEnable, menuId);
   }
 

core/api.txt

@@ -729,6 +729,11 @@ ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentPr
 ion-nav,event,ionNavDidChange,void,false
 ion-nav,event,ionNavWillChange,void,false
 
+ion-nav-link,none
+ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+
 ion-nav-pop,none
 
 ion-nav-push,none

core/src/components.d.ts

@@ -1639,6 +1639,20 @@ export namespace Components {
     */
     'swipeGesture'?: boolean;
   }
+  interface IonNavLink {
+    /**
+    * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
+    */
+    'componentProps'?: ComponentProps;
+    /**
+    * The transition direction when navigating to another page.
+    */
+    'routerDirection': RouterDirection;
+  }
   interface IonNavPop {}
   interface IonNavPush {
     /**
@@ -3186,6 +3200,12 @@ declare global {
     new (): HTMLIonNavElement;
   };
 
+  interface HTMLIonNavLinkElement extends Components.IonNavLink, HTMLStencilElement {}
+  var HTMLIonNavLinkElement: {
+    prototype: HTMLIonNavLinkElement;
+    new (): HTMLIonNavLinkElement;
+  };
+
   interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {}
   var HTMLIonNavPopElement: {
     prototype: HTMLIonNavPopElement;
@@ -3524,6 +3544,7 @@ declare global {
     'ion-modal': HTMLIonModalElement;
     'ion-modal-controller': HTMLIonModalControllerElement;
     'ion-nav': HTMLIonNavElement;
+    'ion-nav-link': HTMLIonNavLinkElement;
     'ion-nav-pop': HTMLIonNavPopElement;
     'ion-nav-push': HTMLIonNavPushElement;
     'ion-nav-set-root': HTMLIonNavSetRootElement;
@@ -4931,6 +4952,20 @@ declare namespace LocalJSX {
     */
     'swipeGesture'?: boolean;
   }
+  interface IonNavLink extends JSXBase.HTMLAttributes<HTMLIonNavLinkElement> {
+    /**
+    * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
+    */
+    'componentProps'?: ComponentProps;
+    /**
+    * The transition direction when navigating to another page.
+    */
+    'routerDirection'?: RouterDirection;
+  }
   interface IonNavPop extends JSXBase.HTMLAttributes<HTMLIonNavPopElement> {}
   interface IonNavPush extends JSXBase.HTMLAttributes<HTMLIonNavPushElement> {
     /**
@@ -6207,6 +6242,7 @@ declare namespace LocalJSX {
     'ion-modal': IonModal;
     'ion-modal-controller': IonModalController;
     'ion-nav': IonNav;
+    'ion-nav-link': IonNavLink;
     'ion-nav-pop': IonNavPop;
     'ion-nav-push': IonNavPush;
     'ion-nav-set-root': IonNavSetRoot;

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `actionSheetController` exported from core.
+ */
 @Component({
   tag: 'ion-action-sheet-controller'
 })

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

@@ -5,6 +5,8 @@ Action Sheet controllers programmatically control the action sheet component. Ac
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `actionSheetController` exported from core.
+
 ## Methods
 
 ### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `alertController` exported from core.
+ */
 @Component({
   tag: 'ion-alert-controller'
 })

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

@@ -6,6 +6,8 @@ Alert controllers programmatically control the alert component. Alerts can be cr
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `alertController` exported from core.
+
 ## Methods
 
 ### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`

core/src/components/anchor/anchor.tsx

@@ -40,7 +40,7 @@ export class Anchor implements ComponentInterface {
   @Prop() routerDirection: RouterDirection = 'forward';
 
   componentDidLoad() {
-    console.warn('The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
+    console.warn('[DEPRECATED][ion-anchor] The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
   }
 
   private onClick = (ev: Event) => {

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { LoadingOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `loadingController` exported from core.
+ */
 @Component({
   tag: 'ion-loading-controller'
 })

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

@@ -8,6 +8,8 @@ Loading controllers programmatically control the loading component. Loadings can
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `loadingController` exported from core.
+
 ## Methods
 
 ### `create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>`

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { ComponentRef, ModalOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `modalController` exported from core.
+ */
 @Component({
   tag: 'ion-modal-controller'
 })

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

@@ -6,6 +6,8 @@ Modal controllers programmatically control the modal component. Modals can be cr
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `modalController` exported from core.
+
 ## Methods
 
 ### `create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>`

core/src/components/nav-link/nav-link-utils.ts

@@ -0,0 +1,20 @@
+import { ComponentProps, NavComponent } from '../../interface';
+import { RouterDirection } from '../router/utils/interface';
+
+export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps) => {
+  const nav = el.closest('ion-nav');
+  if (nav) {
+    if (routerDirection === 'forward') {
+      if (component !== undefined) {
+        return nav.push(component, componentProps, { skipIfBusy: true });
+      }
+    } else if (routerDirection === 'root') {
+      if (component !== undefined) {
+        return nav.setRoot(component, componentProps, { skipIfBusy: true });
+      }
+    } else if (routerDirection === 'back') {
+      return nav.pop({ skipIfBusy: true });
+    }
+  }
+  return Promise.resolve(false);
+};

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

@@ -0,0 +1,37 @@
+import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
+
+import { ComponentProps, NavComponent, RouterDirection } from '../../interface';
+
+import { navLink } from './nav-link-utils';
+
+@Component({
+  tag: 'ion-nav-link'
+})
+export class NavLink implements ComponentInterface {
+  @Element() el!: HTMLElement;
+
+  /**
+   * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
+   */
+  @Prop() component?: NavComponent;
+
+  /**
+   * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
+   */
+  @Prop() componentProps?: ComponentProps;
+
+  /**
+   * The transition direction when navigating to another page.
+   */
+  @Prop() routerDirection: RouterDirection = 'forward';
+
+  private onClick = () => {
+    return navLink(this.el, this.routerDirection, this.component, this.componentProps);
+  }
+
+  render() {
+    return (
+      <Host onClick={this.onClick}></Host>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+# ion-nav-link
+
+A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.
+
+It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute          | Description                                                                                                       | Type                                                                       | Default     |
+| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
+| `component`       | `component`        | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.                          | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
+| `componentProps`  | --                 | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | `undefined \| { [key: string]: any; }`                                     | `undefined` |
+| `routerDirection` | `router-direction` | The transition direction when navigating to another page.                                                         | `"back" \| "forward" \| "root"`                                            | `'forward'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/nav-link/test/basic/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Push</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+  <style>
+    f {
+      display: block;
+      margin: 15px auto;
+      max-width: 150px;
+      height: 150px;
+      background: blue;
+    }
+
+    f:last-of-type {
+      background: yellow;
+    }
+
+  </style>
+</body>
+
+<script>
+
+  class FirstPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-push component="page-two">
+            <ion-button class="next">Go to Page Two</ion-button>
+          </ion-nav-push>
+        </ion-content>
+      `;
+    }
+  }
+
+  class SecondPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-nav-push component="page-three">
+            <ion-button class="next">Go to Page Three</ion-button>
+          </ion-nav-push>
+          <ion-nav-pop>
+            <ion-button class="back">Go Back</ion-button>
+          </ion-nav-pop>
+        </ion-content>
+      `;
+    }
+  }
+
+  class ThirdPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-nav-pop>
+            <ion-button class="back">Go Back</ion-button>
+          </ion-nav-pop>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', FirstPage);
+  customElements.define('page-two', SecondPage);
+  customElements.define('page-three', ThirdPage);
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.setRoot('page-one');
+  }
+</script>
+
+</html>

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

@@ -1,5 +1,10 @@
 import { Component, ComponentInterface, Element, Host, h } from '@stencil/core';
 
+import { navLink } from '../nav-link/nav-link-utils';
+
+/**
+ * @deprecated Use `<ion-nav-link routerDirection="back">` instead.
+ */
 @Component({
   tag: 'ion-nav-pop',
 })
@@ -7,11 +12,12 @@ export class NavPop implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 
+  componentDidLoad() {
+    console.warn('[DEPRECATED][ion-nav-pop] <ion-nav-pop> is deprecated. Use `<ion-nav-link routerDirection="back">` instead.');
+  }
+
   private pop = () => {
-    const nav = this.el.closest('ion-nav');
+    return navLink(this.el, 'back');
-    if (nav) {
-      nav.pop({ skipIfBusy: true });
-    }
   }
 
   render() {

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

@@ -6,6 +6,8 @@
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use `<ion-nav-link routerDirection="back">` instead.
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,7 +1,11 @@
 import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
 
 import { ComponentProps, NavComponent } from '../../interface';
+import { navLink } from '../nav-link/nav-link-utils';
 
+/**
+ * @deprecated Use `<ion-nav-link component="MyComponent">` instead.
+ */
 @Component({
   tag: 'ion-nav-push'
 })
@@ -18,12 +22,12 @@ export class NavPush implements ComponentInterface {
    */
   @Prop() componentProps?: ComponentProps;
 
+  componentDidLoad() {
+    console.warn('[DEPRECATED][ion-nav-push] `<ion-nav-push component="MyComponent">` is deprecated. Use `<ion-nav-link component="MyComponent">` instead.');
+  }
+
   private push = () => {
-    const nav = this.el.closest('ion-nav');
+    return navLink(this.el, 'forward', this.component, this.componentProps);
-    const toPush = this.component;
-    if (nav && toPush !== undefined) {
-      nav.push(toPush, this.componentProps, { skipIfBusy: true });
-    }
   }
 
   render() {

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

@@ -7,6 +7,8 @@ It is the element form of `NavController.push()`
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use `<ion-nav-link component="MyComponent">` instead.
+
 ## Properties
 
 | Property         | Attribute   | Description                                     | Type                                                                       | Default     |

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

@@ -1,7 +1,11 @@
 import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
 
 import { ComponentProps, NavComponent } from '../../interface';
+import { navLink } from '../nav-link/nav-link-utils';
 
+/**
+ * @deprecated Use `<ion-nav-link component="MyComponent" routerDirection="root">` instead.
+ */
 @Component({
   tag: 'ion-nav-set-root'
 })
@@ -19,12 +23,12 @@ export class NavSetRoot implements ComponentInterface {
    */
   @Prop() componentProps?: ComponentProps;
 
+  componentDidLoad() {
+    console.warn('[DEPRECATED][ion-nav-set-root] `<ion-nav-set-root component="MyComponent">` is deprecated. Use `<ion-nav-link component="MyComponent" routerDirection="root">` instead.');
+  }
+
   private setRoot = () => {
-    const nav = this.el.closest('ion-nav');
+    return navLink(this.el, 'root', this.component, this.componentProps);
-    const toPush = this.component;
-    if (nav && toPush !== undefined) {
-      nav.setRoot(toPush, this.componentProps, { skipIfBusy: true });
-    }
   }
 
   render() {

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

@@ -7,6 +7,8 @@ It is the component form of calling `NavController.setRoot()`
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use `<ion-nav-link component="MyComponent" routerDirection="root">` instead.
+
 ## Properties
 
 | Property         | Attribute   | Description                                              | Type                                                                       | Default     |

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { OverlayController, PickerOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `pickerController` exported from core.
+ */
 @Component({
   tag: 'ion-picker-controller'
 })

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

@@ -5,6 +5,8 @@
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `pickerController` exported from core.
+
 ## Methods
 
 ### `create(options: PickerOptions) => Promise<HTMLIonPickerElement>`

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { ComponentRef, OverlayController, PopoverOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `popoverController` exported from core.
+ */
 @Component({
   tag: 'ion-popover-controller',
 })

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

@@ -6,6 +6,8 @@ Popover controllers programmatically control the popover component. Popovers can
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `popoverController` exported from core.
+
 ## Usage
 
 ### Javascript

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

@@ -6,6 +6,8 @@ ToastController is a component used to create Toast components. Please see the d
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `toastController` exported from core.
+
 ## Methods
 
 ### `create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>`

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

@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 import { OverlayController, ToastOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `toastController` exported from core.
+ */
 @Component({
   tag: 'ion-toast-controller'
 })

core/stencil.config.ts

@@ -28,7 +28,7 @@ export const config: Config = {
     { components: ['ion-loading'] },
     { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
     { components: ['ion-modal'] },
-    { components: ['ion-nav', 'ion-nav-pop', 'ion-nav-push', 'ion-nav-set-root'] },
+    { components: ['ion-nav', 'ion-nav-link', 'ion-nav-pop', 'ion-nav-push', 'ion-nav-set-root'] },
     { components: ['ion-img'] },
     { components: ['ion-popover'] },
     { components: ['ion-progress-bar'] },