diff --git a/core/api.txt b/core/api.txt index 4e28ac3760..73302f7667 100644 --- a/core/api.txt +++ b/core/api.txt @@ -81,9 +81,6 @@ ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,fals ion-anchor,css-prop,--background ion-anchor,css-prop,--color -ion-animation-controller -ion-animation-controller,method,create,create(animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise - ion-app ion-avatar diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 6b21d294e2..3203fbfb16 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -14,7 +14,6 @@ import { AlertButton, AlertInput, AlertOptions, - Animation, AnimationBuilder, CheckedInputChangeEvent, Color, @@ -422,14 +421,6 @@ export namespace Components { 'routerDirection'?: RouterDirection; } - interface IonAnimationController { - /** - * Creates an animation instance - */ - 'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise; - } - interface IonAnimationControllerAttributes extends StencilHTMLAttributes {} - interface IonApp {} interface IonAppAttributes extends StencilHTMLAttributes {} @@ -5187,7 +5178,6 @@ declare global { 'IonAlertController': Components.IonAlertController; 'IonAlert': Components.IonAlert; 'IonAnchor': Components.IonAnchor; - 'IonAnimationController': Components.IonAnimationController; 'IonApp': Components.IonApp; 'IonAvatar': Components.IonAvatar; 'IonBackButton': Components.IonBackButton; @@ -5288,7 +5278,6 @@ declare global { 'ion-alert-controller': Components.IonAlertControllerAttributes; 'ion-alert': Components.IonAlertAttributes; 'ion-anchor': Components.IonAnchorAttributes; - 'ion-animation-controller': Components.IonAnimationControllerAttributes; 'ion-app': Components.IonAppAttributes; 'ion-avatar': Components.IonAvatarAttributes; 'ion-back-button': Components.IonBackButtonAttributes; @@ -5414,12 +5403,6 @@ declare global { new (): HTMLIonAnchorElement; }; - interface HTMLIonAnimationControllerElement extends Components.IonAnimationController, HTMLStencilElement {} - var HTMLIonAnimationControllerElement: { - prototype: HTMLIonAnimationControllerElement; - new (): HTMLIonAnimationControllerElement; - }; - interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {} var HTMLIonAppElement: { prototype: HTMLIonAppElement; @@ -5978,7 +5961,6 @@ declare global { 'ion-alert-controller': HTMLIonAlertControllerElement 'ion-alert': HTMLIonAlertElement 'ion-anchor': HTMLIonAnchorElement - 'ion-animation-controller': HTMLIonAnimationControllerElement 'ion-app': HTMLIonAppElement 'ion-avatar': HTMLIonAvatarElement 'ion-back-button': HTMLIonBackButtonElement @@ -6079,7 +6061,6 @@ declare global { 'ion-alert-controller': HTMLIonAlertControllerElement; 'ion-alert': HTMLIonAlertElement; 'ion-anchor': HTMLIonAnchorElement; - 'ion-animation-controller': HTMLIonAnimationControllerElement; 'ion-app': HTMLIonAppElement; 'ion-avatar': HTMLIonAvatarElement; 'ion-back-button': HTMLIonBackButtonElement; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 8f1b54f95d..1aa9f71f42 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -24,7 +24,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Element() el!: HTMLElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ @Prop() overlayIndex!: number; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index d7568f6a26..c9db76019e 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -29,7 +29,6 @@ export class Alert implements ComponentInterface, OverlayInterface { @Element() el!: HTMLStencilElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ diff --git a/core/src/components/animation-controller/animation-controller.tsx b/core/src/components/animation-controller/animation-controller.tsx deleted file mode 100644 index 35e3abb5d5..0000000000 --- a/core/src/components/animation-controller/animation-controller.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; - -import { Animation, AnimationBuilder, AnimationController, Config } from '../../interface'; - -import { Animator } from './animator'; - -/** @internal */ -@Component({ - tag: 'ion-animation-controller' -}) -export class AnimationControllerImpl implements ComponentInterface, AnimationController { - - @Prop({ context: 'config' }) config!: Config; - - /** - * Creates an animation instance - */ - @Method() - create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise { - Animator.animated = this.config.getBoolean('animated', true); - if (animationBuilder) { - return animationBuilder(Animator as any, baseEl, opts); - } - return Promise.resolve(new Animator() as any); - } -} diff --git a/core/src/components/animation-controller/readme.md b/core/src/components/animation-controller/readme.md deleted file mode 100644 index 8db979d704..0000000000 --- a/core/src/components/animation-controller/readme.md +++ /dev/null @@ -1,33 +0,0 @@ -# ion-animation-controller -Internal to `ionic/core`. - -Used to create an animation instance. - - - - - -## Methods - -### `create(animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise` - -Creates an animation instance - -#### Parameters - -| Name | Type | Description | -| ------------------ | -------------------------------------------------------------------------------------- | ----------- | -| `animationBuilder` | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | | -| `baseEl` | `any` | | -| `opts` | `any` | | - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 2fbe3fece3..be2208eb49 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -25,7 +25,6 @@ export class Loading implements ComponentInterface, OverlayInterface { @Element() el!: HTMLElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts index 28b2abb27c..a7e7ceb137 100644 --- a/core/src/components/menu-controller/menu-controller.ts +++ b/core/src/components/menu-controller/menu-controller.ts @@ -1,6 +1,6 @@ import { Build, Component, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, MenuControllerI, MenuI } from '../../interface'; +import { Animation, AnimationBuilder, Config, MenuControllerI, MenuI } from '../../interface'; import { menuOverlayAnimation } from './animations/overlay'; import { menuPushAnimation } from './animations/push'; @@ -15,8 +15,8 @@ export class MenuController implements MenuControllerI { private menus: MenuI[] = []; private menuAnimations = new Map(); - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'document' }) doc!: Document; + @Prop({ context: 'config' }) config!: Config; constructor() { this.registerAnimation('reveal', menuRevealAnimation); @@ -252,12 +252,17 @@ export class MenuController implements MenuControllerI { return menu._setOpen(shouldOpen, animated); } - _createAnimation(type: string, menuCmp: MenuI): Promise { + async _createAnimation(type: string, menuCmp: MenuI): Promise { const animationBuilder = this.menuAnimations.get(type); if (!animationBuilder) { - return Promise.reject('animation not registered'); + throw new Error('animation not registered'); } - return this.animationCtrl.create(animationBuilder, null, menuCmp); + const animation = await import('../../utils/animation') + .then(mod => mod.create(animationBuilder, null, menuCmp)); + if (!this.config.getBoolean('animated', true)) { + animation.duration(0); + } + return animation; } getOpenSync(): HTMLIonMenuElement | undefined { diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 2da4ee967b..f6d24d9014 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -28,7 +28,6 @@ export class Modal implements ComponentInterface, OverlayInterface { @Element() el!: HTMLElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 92ba7f3ada..b1a150fc2d 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -29,7 +29,6 @@ export class Nav implements NavOutlet { @Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'config' }) config!: Config; @Prop({ context: 'window' }) win!: Window; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; /** @internal */ @Prop() delegate?: FrameworkDelegate; @@ -779,13 +778,12 @@ export class Nav implements NavOutlet { const animationOpts: TransitionOptions = { mode: this.mode, showGoBack: this.canGoBackSync(enteringView), - animationCtrl: this.animationCtrl, queue: this.queue, window: this.win, baseEl: this.el, animationBuilder: this.animation || opts.animationBuilder || this.config.get('navAnimation'), progressCallback, - animated: this.animated, + animated: this.animated && this.config.getBoolean('animated', true), enteringEl, leavingEl, diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 323334088d..2c083dbc13 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -93,13 +93,13 @@ Inserts a component into the nav stack at the specified index. This is useful if #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `insertIndex` | `number` | | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `insertIndex` | `number` | | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -184,12 +184,12 @@ Push a new component onto the current navigation stack. Pass any additional info #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -240,12 +240,12 @@ Set the root for the current navigation stack. #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns diff --git a/core/src/components/nav/test/nav-controller.spec.ts b/core/src/components/nav/test/nav-controller.spec.ts index fe604f0d87..427d113a44 100644 --- a/core/src/components/nav/test/nav-controller.spec.ts +++ b/core/src/components/nav/test/nav-controller.spec.ts @@ -2,10 +2,9 @@ import { mockWindow } from '@stencil/core/mock-doc'; import { Config } from '../../../global/config'; import { ComponentProps } from '../../../interface'; -import { AnimationControllerImpl } from '../../animation-controller/animation-controller'; import { Nav } from '../nav'; import { NavOptions } from '../nav-interface'; -import { ViewController, ViewState } from '../view-controller'; +import { ViewController, VIEW_STATE_ATTACHED } from '../view-controller'; describe('NavController', () => { @@ -943,7 +942,6 @@ describe('NavController', () => { navI.ionNavDidChange = { emit() { return; } }; navI.ionNavWillChange = { emit() { return; } }; - navI.animationCtrl = new AnimationControllerImpl() as any; navI.config = new Config({ animated: false }); navI._viewInit = (enteringView: ViewController) => { if (!enteringView.element) { diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index fbea1b81dc..c68f55d8d0 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -23,7 +23,6 @@ export class Picker implements ComponentInterface, OverlayInterface { @Element() el!: HTMLElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index a7efe0a745..ec81ff9cda 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -28,7 +28,6 @@ export class Popover implements ComponentInterface, OverlayInterface { @Element() el!: HTMLElement; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; /** @internal */ diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index 5a374fd507..eaa7d6b2a7 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -20,7 +20,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { @Element() el!: HTMLElement; @Prop({ context: 'config' }) config!: Config; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'window' }) win!: Window; @Prop({ context: 'queue' }) queue!: QueueApi; @@ -150,7 +149,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { // emit nav will change event this.ionNavWillChange.emit(); - const { mode, queue, animationCtrl, win, el } = this; + const { mode, queue, win, el } = this; const animated = this.animated && this.config.getBoolean('animated', true); const animationBuilder = this.animation || opts.animationBuilder || this.config.get('navAnimation'); @@ -158,7 +157,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { mode, queue, animated, - animationCtrl, animationBuilder, window: win, enteringEl, diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 89dc6d763e..1e8f35266c 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -27,8 +27,6 @@ export class Toast implements ComponentInterface, OverlayInterface { animation: Animation | undefined; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; - @Prop({ context: 'config' }) config!: Config; /** diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 97822d4ece..85af9dd2f5 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -77,7 +77,6 @@ ion-route, ion-route-redirect, ion-router, ion-select-option, -ion-animation-controller, ion-nav-controller, ion-menu-controller, ion-action-sheet-controller, diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index dcb11957f1..41080d9feb 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -1,7 +1,6 @@ // Components interfaces export * from './components'; export * from './index'; -export * from './components/animation-controller/animation-interface'; export * from './components/alert/alert-interface'; export * from './components/action-sheet/action-sheet-interface'; export * from './components/content/content-interface'; @@ -30,8 +29,9 @@ export * from './components/virtual-scroll/virtual-scroll-interface'; export { Gesture, GestureDetail } from './utils/gesture/gesture'; export * from './utils/input-interface'; -export * from './global/config'; +export * from './utils/animation/animation-interface'; export * from './utils/overlays-interface'; +export * from './global/config'; // Global types export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time'; diff --git a/core/src/components/animation-controller/animation-interface.tsx b/core/src/utils/animation/animation-interface.ts similarity index 100% rename from core/src/components/animation-controller/animation-interface.tsx rename to core/src/utils/animation/animation-interface.ts diff --git a/core/src/components/animation-controller/animator.tsx b/core/src/utils/animation/animator.ts similarity index 99% rename from core/src/components/animation-controller/animator.tsx rename to core/src/utils/animation/animator.ts index a4e41cb88e..5601e85faf 100644 --- a/core/src/components/animation-controller/animator.tsx +++ b/core/src/utils/animation/animator.ts @@ -31,8 +31,6 @@ const raf = (window as any).requestAnimationFrame export class Animator { - static animated = true; - private _afterAddClasses?: string[]; private _afterRemoveClasses?: string[]; private _afterStyles?: { [property: string]: any; }; @@ -100,14 +98,12 @@ export class Animator { * not have a duration, then it'll get the duration from its parent. */ getDuration(opts?: PlayOptions): number { - if (Animator.animated) { - if (opts && opts.duration !== undefined) { - return opts.duration; - } else if (this._duration !== undefined) { - return this._duration; - } else if (this.parent) { - return this.parent.getDuration(); - } + if (opts && opts.duration !== undefined) { + return opts.duration; + } else if (this._duration !== undefined) { + return this._duration; + } else if (this.parent) { + return this.parent.getDuration(); } return 0; } diff --git a/core/src/utils/animation/index.ts b/core/src/utils/animation/index.ts new file mode 100644 index 0000000000..aca054e577 --- /dev/null +++ b/core/src/utils/animation/index.ts @@ -0,0 +1,10 @@ +import { Animation, AnimationBuilder } from '../../interface'; + +import { Animator } from './animator'; + +export function create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise { + if (animationBuilder) { + return animationBuilder(Animator as any, baseEl, opts); + } + return Promise.resolve(new Animator() as any); +} diff --git a/core/src/components/animation-controller/transition-end.ts b/core/src/utils/animation/transition-end.ts similarity index 100% rename from core/src/components/animation-controller/transition-end.ts rename to core/src/utils/animation/transition-end.ts diff --git a/core/src/utils/overlay-public.ts b/core/src/utils/overlay-public.ts new file mode 100644 index 0000000000..1ee6a325b8 --- /dev/null +++ b/core/src/utils/overlay-public.ts @@ -0,0 +1,38 @@ +import { ActionSheetOptions, AlertOptions, LoadingOptions, ModalOptions, PickerOptions, PopoverOptions } from '../interface'; + +import { createOverlay } from './overlays'; + +export function createAlert(opts: AlertOptions) { + return createOverlay(document.createElement('ion-alert'), opts); +} + +export function createActionSheet(opts: ActionSheetOptions) { + return createOverlay(document.createElement('ion-action-sheet'), opts); +} + +export function createLoading(opts: LoadingOptions) { + return createOverlay(document.createElement('ion-loading'), opts); +} + +export function createModal(opts: ModalOptions) { + return createOverlay(document.createElement('ion-modal'), opts); +} + +export function createPopover(opts: PopoverOptions) { + return createOverlay(document.createElement('ion-popover'), opts); +} + +export function createPicker(opts: PickerOptions) { + return createOverlay(document.createElement('ion-picker'), opts); +} + +export { dismissOverlay } from './overlays'; + +// export const alertController = { +// // Fool stencil: +// // document.createElement('ion-alert') +// create(opts: AlertOptions): Promise { +// return createOverlay(this.doc.createElement('ion-alert'), opts); +// } +// dismiss(data) +// } diff --git a/core/src/utils/overlays-interface.ts b/core/src/utils/overlays-interface.ts index 672cbf8c44..370da413ae 100644 --- a/core/src/utils/overlays-interface.ts +++ b/core/src/utils/overlays-interface.ts @@ -16,7 +16,6 @@ export interface OverlayInterface { overlayIndex: number; presented: boolean; animation?: Animation; - animationCtrl: HTMLIonAnimationControllerElement; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index b1920e60ad..82c10a91fd 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -145,9 +145,9 @@ async function overlayAnimation( baseEl.classList.remove('ion-page-invisible'); const aniRoot = baseEl.shadowRoot || overlay.el; - const animation = overlay.animation = await overlay.animationCtrl.create(animationBuilder, aniRoot, opts); + const animation = overlay.animation = await import('./animation').then(mod => mod.create(animationBuilder, aniRoot, opts)); overlay.animation = animation; - if (!overlay.animated) { + if (!overlay.animated || !overlay.config.getBoolean('animated', true)) { animation.duration(0); } if (overlay.keyboardClose) { diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts index 85d6b20f58..cc319c006d 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition.ts @@ -76,7 +76,7 @@ async function getAnimationBuilder(opts: TransitionOptions): Promise { await waitForReady(opts, true); - const trans = await opts.animationCtrl.create(animationBuilder, opts.baseEl, opts); + const trans = await import('./animation').then(mod => mod.create(animationBuilder, opts.baseEl, opts)); fireWillEvents(opts.enteringEl, opts.leavingEl); await playTransition(trans, opts); if (opts.progressCallback) { @@ -214,7 +214,6 @@ function setZIndex( } export interface TransitionOptions extends NavOptions { - animationCtrl: HTMLIonAnimationControllerElement; queue: QueueApi; progressCallback?: ((ani: Animation | undefined) => void); window: Window; diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 77e6b363dc..d95972c0f4 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -10,7 +10,6 @@ export const config: Config = { { components: ['ion-action-sheet', 'ion-action-sheet-controller'] }, { components: ['ion-alert', 'ion-alert-controller'] }, { components: ['ion-anchor', 'ion-back-button'] }, - { components: ['ion-animation-controller'] }, { components: ['ion-app', 'ion-buttons', 'ion-content', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] }, { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] }, { components: ['ion-backdrop'] }, @@ -104,7 +103,6 @@ export const config: Config = { // controllers 'ion-menu-controller', - 'ion-animation-controller', // navigation 'ion-router',