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/)*