diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt index b0e675cb97..443628c5c0 100644 --- a/angular/src/directives/proxies-list.txt +++ b/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, diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index aafd100525..90ba301cf8 100644 --- a/angular/src/directives/proxies.ts +++ b/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: '', 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: '' }) export class IonNavPop { diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 5d92468a2b..0f7a952b04 100644 --- a/angular/src/ionic-module.ts +++ b/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, diff --git a/angular/src/providers/menu-controller.ts b/angular/src/providers/menu-controller.ts index 7b76abe6fe..68f508fc15 100644 --- a/angular/src/providers/menu-controller.ts +++ b/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); } diff --git a/core/api.txt b/core/api.txt index b9299fb039..cbf68e8a09 100644 --- a/core/api.txt +++ b/core/api.txt @@ -729,6 +729,11 @@ ion-nav,method,setRoot,setRoot(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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 3fb87a7c01..4b6581458a 100644 --- a/core/src/components.d.ts +++ b/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 { + /** + * 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 {} interface IonNavPush extends JSXBase.HTMLAttributes { /** @@ -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; diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 7264b099dc..e74019743d 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/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' }) diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md index 0621fc4d3e..913d88f193 100644 --- a/core/src/components/action-sheet-controller/readme.md +++ b/core/src/components/action-sheet-controller/readme.md @@ -5,6 +5,8 @@ Action Sheet controllers programmatically control the action sheet component. Ac +> **[DEPRECATED]** Use the `actionSheetController` exported from core. + ## Methods ### `create(options: ActionSheetOptions) => Promise` diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index 5c4bd3cfa0..cd4f392675 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/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' }) diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md index 03474a937e..743ea43cdb 100644 --- a/core/src/components/alert-controller/readme.md +++ b/core/src/components/alert-controller/readme.md @@ -6,6 +6,8 @@ Alert controllers programmatically control the alert component. Alerts can be cr +> **[DEPRECATED]** Use the `alertController` exported from core. + ## Methods ### `create(options: AlertOptions) => Promise` diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index 976466ed35..d2f71cf85f 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -40,7 +40,7 @@ export class Anchor implements ComponentInterface { @Prop() routerDirection: RouterDirection = 'forward'; componentDidLoad() { - console.warn('The component has been deprecated. Please use an if you are using a vanilla JS or Stencil project or an with the Angular router.'); + console.warn('[DEPRECATED][ion-anchor] The component has been deprecated. Please use an if you are using a vanilla JS or Stencil project or an with the Angular router.'); } private onClick = (ev: Event) => { diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index eefa66eb52..88058c5a57 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/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' }) diff --git a/core/src/components/loading-controller/readme.md b/core/src/components/loading-controller/readme.md index 99ba90b4cd..6ab1e09837 100644 --- a/core/src/components/loading-controller/readme.md +++ b/core/src/components/loading-controller/readme.md @@ -8,6 +8,8 @@ Loading controllers programmatically control the loading component. Loadings can +> **[DEPRECATED]** Use the `loadingController` exported from core. + ## Methods ### `create(options?: LoadingOptions | undefined) => Promise` diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index 88e15dd529..e1416b8e5d 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/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' }) diff --git a/core/src/components/modal-controller/readme.md b/core/src/components/modal-controller/readme.md index a840d7d804..0762dc3c25 100644 --- a/core/src/components/modal-controller/readme.md +++ b/core/src/components/modal-controller/readme.md @@ -6,6 +6,8 @@ Modal controllers programmatically control the modal component. Modals can be cr +> **[DEPRECATED]** Use the `modalController` exported from core. + ## Methods ### `create(options: ModalOptions) => Promise` diff --git a/core/src/components/nav-link/nav-link-utils.ts b/core/src/components/nav-link/nav-link-utils.ts new file mode 100644 index 0000000000..eea8851aea --- /dev/null +++ b/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); +}; diff --git a/core/src/components/nav-link/nav-link.tsx b/core/src/components/nav-link/nav-link.tsx new file mode 100644 index 0000000000..5ca2a340ad --- /dev/null +++ b/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 ( + + ); + } +} diff --git a/core/src/components/nav-link/readme.md b/core/src/components/nav-link/readme.md new file mode 100644 index 0000000000..6f601c741f --- /dev/null +++ b/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. + + + + + +## 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/)* diff --git a/core/src/components/nav-link/test/basic/index.html b/core/src/components/nav-link/test/basic/index.html new file mode 100644 index 0000000000..5b8c6d88f1 --- /dev/null +++ b/core/src/components/nav-link/test/basic/index.html @@ -0,0 +1,106 @@ + + + + + + Nav Push + + + + + + + + + + + + + + + + + diff --git a/core/src/components/nav-pop/nav-pop.tsx b/core/src/components/nav-pop/nav-pop.tsx index 6411800506..f350be228d 100644 --- a/core/src/components/nav-pop/nav-pop.tsx +++ b/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 `` 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] is deprecated. Use `` instead.'); + } + private pop = () => { - const nav = this.el.closest('ion-nav'); - if (nav) { - nav.pop({ skipIfBusy: true }); - } + return navLink(this.el, 'back'); } render() { diff --git a/core/src/components/nav-pop/readme.md b/core/src/components/nav-pop/readme.md index 574af86bd4..c7284798e4 100644 --- a/core/src/components/nav-pop/readme.md +++ b/core/src/components/nav-pop/readme.md @@ -6,6 +6,8 @@ +> **[DEPRECATED]** Use `` instead. + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx index 18075598d0..6a9489385c 100644 --- a/core/src/components/nav-push/nav-push.tsx +++ b/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 `` 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] `` is deprecated. Use `` instead.'); + } + private push = () => { - const nav = this.el.closest('ion-nav'); - const toPush = this.component; - if (nav && toPush !== undefined) { - nav.push(toPush, this.componentProps, { skipIfBusy: true }); - } + return navLink(this.el, 'forward', this.component, this.componentProps); } render() { diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md index ee96bc1920..f42d935736 100644 --- a/core/src/components/nav-push/readme.md +++ b/core/src/components/nav-push/readme.md @@ -7,6 +7,8 @@ It is the element form of `NavController.push()` +> **[DEPRECATED]** Use `` instead. + ## Properties | Property | Attribute | Description | Type | Default | diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx index fe376c9dca..3ebf21f0c3 100644 --- a/core/src/components/nav-set-root/nav-set-root.tsx +++ b/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 `` 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] `` is deprecated. Use `` instead.'); + } + private setRoot = () => { - const nav = this.el.closest('ion-nav'); - const toPush = this.component; - if (nav && toPush !== undefined) { - nav.setRoot(toPush, this.componentProps, { skipIfBusy: true }); - } + return navLink(this.el, 'root', this.component, this.componentProps); } render() { diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md index 1a71cb716d..bbc4e6583f 100644 --- a/core/src/components/nav-set-root/readme.md +++ b/core/src/components/nav-set-root/readme.md @@ -7,6 +7,8 @@ It is the component form of calling `NavController.setRoot()` +> **[DEPRECATED]** Use `` instead. + ## Properties | Property | Attribute | Description | Type | Default | diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index 0125ff4ee8..9b2876f9cc 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/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' }) diff --git a/core/src/components/picker-controller/readme.md b/core/src/components/picker-controller/readme.md index a40f463b30..7f5f39ad6b 100644 --- a/core/src/components/picker-controller/readme.md +++ b/core/src/components/picker-controller/readme.md @@ -5,6 +5,8 @@ +> **[DEPRECATED]** Use the `pickerController` exported from core. + ## Methods ### `create(options: PickerOptions) => Promise` diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx index 82a04a2cb3..42f1bc81ee 100644 --- a/core/src/components/popover-controller/popover-controller.tsx +++ b/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', }) diff --git a/core/src/components/popover-controller/readme.md b/core/src/components/popover-controller/readme.md index e1ace276dc..8d5a7ade4f 100644 --- a/core/src/components/popover-controller/readme.md +++ b/core/src/components/popover-controller/readme.md @@ -6,6 +6,8 @@ Popover controllers programmatically control the popover component. Popovers can +> **[DEPRECATED]** Use the `popoverController` exported from core. + ## Usage ### Javascript diff --git a/core/src/components/toast-controller/readme.md b/core/src/components/toast-controller/readme.md index eacf9d4d90..7df8fe93a2 100644 --- a/core/src/components/toast-controller/readme.md +++ b/core/src/components/toast-controller/readme.md @@ -6,6 +6,8 @@ ToastController is a component used to create Toast components. Please see the d +> **[DEPRECATED]** Use the `toastController` exported from core. + ## Methods ### `create(options?: ToastOptions | undefined) => Promise` diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx index 853f780e14..e8a1ff8f50 100644 --- a/core/src/components/toast-controller/toast-controller.tsx +++ b/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' }) diff --git a/core/stencil.config.ts b/core/stencil.config.ts index d3d3cbdab0..8ecffa57c2 100644 --- a/core/stencil.config.ts +++ b/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'] },