javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): change detection in deep ViewContainers

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-10 23:51:59 +02:00
parent 4d23cba8a0
commit 850d7fc74d
10 changed files with 182 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
angular/src/directives/navigation/nav-delegate.ts
View File

@ -1,4 +1,4 @@
import { ComponentFactoryResolver, Directive, ElementRef, Injector } from '@angular/core';
import { ComponentFactoryResolver, Directive, ElementRef, Injector, ViewContainerRef } from '@angular/core';
import { AngularDelegate } from '../../providers/angular-delegate';
@Directive({
@ -7,10 +7,11 @@ import { AngularDelegate } from '../../providers/angular-delegate';
export class NavDelegate {
constructor(
ref: ElementRef,
cfr: ComponentFactoryResolver,
resolver: ComponentFactoryResolver,
injector: Injector,
angularDelegate: AngularDelegate,
location: ViewContainerRef
) {
ref.nativeElement.delegate = angularDelegate.create(cfr, injector);
ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
}
}

3
angular/src/directives/navigation/router-controller.ts
View File

@ -47,8 +47,7 @@ export class StackController {
pop(deep: number) {
const view = this.views[this.views.length - deep - 1];
this.navCtrl.setGoback();
this.router.navigateByUrl(view.url);
this.navCtrl.goBack(view.url);
}
private insertView(enteringView: RouteView, forcedGoBack: boolean): boolean {

7
angular/src/directives/navigation/tab-delegate.ts
View File

@ -1,4 +1,4 @@
import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector } from '@angular/core';
import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector, ViewContainerRef } from '@angular/core';
import { AngularDelegate } from '../../providers/angular-delegate';
@ -9,11 +9,12 @@ export class TabDelegate {
constructor(
private elementRef: ElementRef,
cfr: ComponentFactoryResolver,
resolver: ComponentFactoryResolver,
injector: Injector,
angularDelegate: AngularDelegate,
location: ViewContainerRef
) {
elementRef.nativeElement.delegate = angularDelegate.create(cfr, injector);
elementRef.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
}
@HostListener('ionRouterOutletActivated', ['$event'])

122
angular/src/directives/proxies.ts
View File

@ -32,18 +32,28 @@ export class Avatar {
@NgDirective({ selector: 'ion-back-button' })
export class BackButton {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@NgInput() color: string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* The text property is used to provide custom text for the back button while using the default look-and-feel.
* The url to navigate back to by default when there is no history.
*/
@NgInput() text: any;
@NgInput() icon: string;
@NgInput() defaultHref: string;
/**
* The icon name to use for the back button.
*/
@NgInput() icon: string;
/**
* The text to display in the back button.
*/
@NgInput() text: string;
constructor(r: ElementRef) {
inputs(this, r, [mode, text, icon, defaultHref]);
inputs(this, r, [color, mode, defaultHref, icon, text]);
}
}
@ -56,7 +66,7 @@ export class Badge {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -79,7 +89,7 @@ export class Button {
/**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/
@NgInput() size: any;
@NgInput() size: string;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@ -87,7 +97,7 @@ export class Button {
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
@NgInput() fill: any;
@NgInput() fill: string;
/**
* If true, activates a button with rounded corners.
*/
@ -95,7 +105,7 @@ export class Button {
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
*/
@NgInput() expand: any;
@NgInput() expand: string;
/**
* If true, activates a button with a heavier font weight.
*/
@ -107,7 +117,7 @@ export class Button {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
@NgInput() goBack: boolean;
@NgOutput() ionFocus: NgEventEmitter<any>;
@NgOutput() ionBlur: NgEventEmitter<any>;
@ -130,7 +140,7 @@ export class Card {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -145,7 +155,7 @@ export class CardContent {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -160,7 +170,7 @@ export class CardHeader {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the card header will be translucent. Defaults to `false`.
*/
@ -179,7 +189,7 @@ export class CardSubtitle {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -194,7 +204,7 @@ export class CardTitle {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -209,7 +219,7 @@ export class Checkbox {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* The name of the control, which is submitted with the form data.
*/
@ -245,7 +255,7 @@ export class Chip {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -260,7 +270,7 @@ export class ChipButton {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the user cannot interact with the chip button. Defaults to `false`.
*/
@ -350,39 +360,39 @@ export class Datetime {
/**
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
*/
@NgInput() yearValues: any;
@NgInput() yearValues: string;
/**
* Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.
*/
@NgInput() monthValues: any;
@NgInput() monthValues: string;
/**
* Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.
*/
@NgInput() dayValues: any;
@NgInput() dayValues: string;
/**
* Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
*/
@NgInput() hourValues: any;
@NgInput() hourValues: string;
/**
* Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.
*/
@NgInput() minuteValues: any;
@NgInput() minuteValues: string;
/**
* Full names for each month name. This can be used to provide locale month names. Defaults to English.
*/
@NgInput() monthNames: any;
@NgInput() monthNames: string;
/**
* Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.
*/
@NgInput() monthShortNames: any;
@NgInput() monthShortNames: string;
/**
* Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.
*/
@NgInput() dayNames: any;
@NgInput() dayNames: string;
/**
* Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.
*/
@NgInput() dayShortNames: any;
@NgInput() dayShortNames: string;
/**
* Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options.
*/
@ -408,11 +418,11 @@ export class Fab {
/**
* Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
*/
@NgInput() horizontal: any;
@NgInput() horizontal: string;
/**
* Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.
*/
@NgInput() vertical: any;
@NgInput() vertical: string;
/**
* If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
*/
@ -437,7 +447,7 @@ export class FabButton {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the fab button will be show a close icon. Defaults to `false`.
*/
@ -470,7 +480,7 @@ export class FabList {
/**
* The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
*/
@NgInput() side: any;
@NgInput() side: string;
constructor(r: ElementRef) {
inputs(this, r, [activated, side]);
}
@ -694,7 +704,7 @@ export class Item {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
@ -726,7 +736,7 @@ export class ItemDivider {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -745,7 +755,7 @@ export class ItemOption {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the user cannot interact with the item option. Defaults to `false`.
*/
@ -768,7 +778,7 @@ export class ItemOptions {
/**
* The side the option button should be on. Defaults to `"right"`. If you have multiple `ion-item-options`, a side must be provided for each.
*/
@NgInput() side: any;
@NgInput() side: string;
@NgOutput() ionSwipe: NgEventEmitter<any>;
isRightSide(...__args: any[]): Promise<any> {
return method(this.r, isRightSide, __args);
@ -826,7 +836,7 @@ export class Label {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the label will sit alongside an input. Defaults to `false`.
*/
@ -882,7 +892,7 @@ export class ListHeader {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -909,7 +919,7 @@ export class Menu {
/**
* Which side of the view the menu should be placed. Default `"start"`.
*/
@NgInput() side: any;
@NgInput() side: string;
/**
* If true, swiping the menu is enabled. Default `true`.
*/
@ -982,7 +992,7 @@ export class Nav {
@NgInput() animated: boolean;
@NgInput() delegate: any;
@NgInput() rootParams: any;
@NgInput() root: any;
@NgInput() root: string;
@NgOutput() ionNavWillChange: NgEventEmitter<any>;
@NgOutput() ionNavDidChange: NgEventEmitter<any>;
push(...__args: any[]): Promise<any> {
@ -1045,7 +1055,7 @@ export class NavPop {
@NgDirective({ selector: 'ion-nav-push' })
export class NavPush {
@NgInput() component: any;
@NgInput() component: string;
@NgInput() componentProps: any;
@NgInput() url: string;
constructor(r: ElementRef) {
@ -1055,7 +1065,7 @@ export class NavPush {
@NgDirective({ selector: 'ion-nav-set-root' })
export class NavSetRoot {
@NgInput() component: any;
@NgInput() component: string;
@NgInput() componentProps: any;
@NgInput() url: string;
constructor(r: ElementRef) {
@ -1072,7 +1082,7 @@ export class Note {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -1087,7 +1097,7 @@ export class Radio {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* The name of the control, which is submitted with the form data.
*/
@ -1147,7 +1157,7 @@ export class Range {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`.
*/
@ -1212,7 +1222,7 @@ export class Refresher {
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
@NgInput() pullMax: any;
@NgInput() pullMax: number;
/**
* Time it takes to close the refresher. Defaults to `280ms`.
*/
@ -1343,7 +1353,7 @@ export class Searchbar {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, enable searchbar animation. Default `false`.
*/
@ -1404,7 +1414,7 @@ export class Segment {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
@NgInput() disabled: boolean;
/**
* the value of the segment.
@ -1427,7 +1437,7 @@ export class SegmentButton {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the segment button is selected. Defaults to `false`.
*/
@ -1489,7 +1499,7 @@ export class Select {
/**
* the value of the select.
*/
@NgInput() value: any;
@NgInput() value: string;
@NgOutput() ionChange: NgEventEmitter<any>;
@NgOutput() ionCancel: NgEventEmitter<any>;
@NgOutput() ionFocus: NgEventEmitter<any>;
@ -1514,7 +1524,7 @@ export class SelectOption {
/**
* The text value of the option.
*/
@NgInput() value: any;
@NgInput() value: string;
@NgOutput() ionSelectOptionDidLoad: NgEventEmitter<any>;
@NgOutput() ionSelectOptionDidUnload: NgEventEmitter<any>;
constructor(r: ElementRef) {
@ -1681,7 +1691,7 @@ export class Spinner {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* Duration of the spinner animation in milliseconds. The default varies based on the spinner.
*/
@ -1708,7 +1718,7 @@ export class SplitPane {
/**
* When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
*/
@NgInput() when: any;
@NgInput() when: string;
@NgOutput() ionChange: NgEventEmitter<any>;
@NgOutput() ionSplitPaneVisible: NgEventEmitter<any>;
isVisible(...__args: any[]): Promise<any> {
@ -1751,7 +1761,7 @@ export class Tab {
/**
* The component to display inside of the tab.
*/
@NgInput() component: any;
@NgInput() component: string;
/**
* The name of the tab.
*/
@ -1850,7 +1860,7 @@ export class Text {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
constructor(r: ElementRef) {
inputs(this, r, [color, mode]);
}
@ -1949,7 +1959,7 @@ export class Toggle {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* The name of the control, which is submitted with the form data.
*/
@ -1985,7 +1995,7 @@ export class Toolbar {
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@NgInput() mode: any;
@NgInput() mode: string;
/**
* If true, the toolbar will be translucent. Note: In order to scroll content behind the toolbar, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/

32
angular/src/providers/angular-delegate.ts
View File

@ -1,4 +1,4 @@
import { ApplicationRef, ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone } from '@angular/core';
import { ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone, ViewContainerRef } from '@angular/core';
import { FrameworkDelegate, ViewLifecycle } from '@ionic/core';
import { NavParams } from '../directives/navigation/nav-params';
@ -7,12 +7,15 @@ import { NavParams } from '../directives/navigation/nav-params';
export class AngularDelegate {
constructor(
private appRef: ApplicationRef,
private zone: NgZone
) {}
create(cfr: ComponentFactoryResolver, injector: Injector) {
return new AngularFrameworkDelegate(cfr, injector, this.appRef, this.zone);
create(
resolver: ComponentFactoryResolver,
injector: Injector,
location: ViewContainerRef,
) {
return new AngularFrameworkDelegate(resolver, injector, location, this.zone);
}
}
@ -22,9 +25,9 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
private elRefMap = new WeakMap<HTMLElement, any>();
constructor(
private cfr: ComponentFactoryResolver,
private resolver: ComponentFactoryResolver,
private injector: Injector,
private appRef: ApplicationRef,
private location: ViewContainerRef,
private zone: NgZone,
) {}
@ -32,7 +35,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
return new Promise(resolve => {
this.zone.run(() => {
const el = attachView(
this.cfr, this.injector, this.appRef, this.elRefMap,
this.resolver, this.injector, this.location, this.elRefMap,
container, component, params, cssClasses
);
resolve(el);
@ -55,26 +58,25 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
}
export function attachView(
cfr: ComponentFactoryResolver,
resolver: ComponentFactoryResolver,
injector: Injector,
appRef: ApplicationRef,
location: ViewContainerRef,
elRefMap: WeakMap<HTMLElement, any>,
container: any, component: any, params?: any, cssClasses?: string[]) {
const componentFactory = cfr.resolveComponentFactory(component);
const hostElement = document.createElement(componentFactory.selector);
const factory = resolver.resolveComponentFactory(component);
const childInjector = Injector.create(getProviders(params), injector);
const componentRef = location.createComponent(factory, location.length, childInjector);
const hostElement = componentRef.location.nativeElement;
if (params) {
Object.assign(hostElement, params);
}
const childInjector = Injector.create(getProviders(params), injector);
const componentRef = componentFactory.create(childInjector, [], hostElement);
for (const clazz of cssClasses) {
hostElement.classList.add(clazz);
}
bindLifecycleEvents(componentRef.instance, hostElement);
container.appendChild(hostElement);
appRef.attachView(componentRef.hostView);
componentRef.changeDetectorRef.reattach();
elRefMap.set(hostElement, componentRef);
return hostElement;
}

10
angular/src/providers/modal-controller.ts
View File

@ -1,14 +1,16 @@
import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
import { ComponentFactoryResolver, Injectable, Injector, ViewContainerRef } from '@angular/core';
import { ModalOptions } from '@ionic/core';
import { OverlayBaseController } from '../util/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
constructor(
private cfr: ComponentFactoryResolver,
private injector: Injector,
private angularDelegate: AngularDelegate,
private resolver: ComponentFactoryResolver,
private injector: Injector,
private location: ViewContainerRef,
) {
super('ion-modal-controller');
}
@ -16,7 +18,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
create(opts?: ModalOptions): Promise<HTMLIonModalElement> {
return super.create({
...opts,
delegate: this.angularDelegate.create(this.cfr, this.injector)
delegate: this.angularDelegate.create(this.resolver, this.injector, this.location)
});
}
}

10
angular/src/providers/popover-controller.ts
View File

@ -1,14 +1,16 @@
import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
import { ComponentFactoryResolver, Injectable, Injector, ViewContainerRef } from '@angular/core';
import { PopoverOptions } from '@ionic/core';
import { OverlayBaseController } from '../util/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
constructor(
private cfr: ComponentFactoryResolver,
private injector: Injector,
private angularDelegate: AngularDelegate,
private resolver: ComponentFactoryResolver,
private injector: Injector,
private location: ViewContainerRef,
) {
super('ion-popover-controller');
}
@ -16,7 +18,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
create(opts?: PopoverOptions): Promise<HTMLIonPopoverElement> {
return super.create({
...opts,
delegate: this.angularDelegate.create(this.cfr, this.injector)
delegate: this.angularDelegate.create(this.resolver, this.injector, this.location)
});
}
}

8
angular/src/util/util.ts
View File

@ -1,17 +1,9 @@
import { ElementRef } from '@angular/core';
export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) {
const controller = ensureElementInBody(ctrlName);
return controller.componentOnReady()
.then(() => (controller as any)[methodName].apply(controller, args));
}
export function proxyEl(ref: ElementRef, methodName: string, ...args: any[]) {
return ref.nativeElement.componentOnReady()
.then((el: any) => el[methodName].apply(el, args));
}
export function ensureElementInBody(elementName: string) {
let element = document.querySelector(elementName);
if (!element) {

1
angular/tsconfig.json
View File

@ -1,6 +1,7 @@
{
"compilerOptions": {
"alwaysStrict": true,
"strict": false,
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"declaration": true,

154
core/src/components.d.ts vendored
View File

@ -134,8 +134,8 @@ import {
declare global {
interface HTMLIonActionSheetControllerElement extends HTMLStencilElement {
'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement>;
'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise<void>;
'create': (opts?: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
'dismiss': (data?: any, role?: string, actionSheetId?: number) => Promise<void>;
'getTop': () => HTMLIonActionSheetElement;
}
var HTMLIonActionSheetControllerElement: {
@ -174,7 +174,7 @@ declare global {
/**
* Dismiss the action sheet overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -195,11 +195,11 @@ declare global {
/**
* Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await actionSheet.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await actionSheet.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the action sheet overlay after it has been created.
@ -304,8 +304,8 @@ declare global {
declare global {
interface HTMLIonAlertControllerElement extends HTMLStencilElement {
'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement>;
'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise<void>;
'create': (opts?: AlertOptions) => Promise<HTMLIonAlertElement>;
'dismiss': (data?: any, role?: string, alertId?: number) => Promise<void>;
'getTop': () => HTMLIonAlertElement;
}
var HTMLIonAlertControllerElement: {
@ -344,7 +344,7 @@ declare global {
/**
* Dismiss the alert overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -374,11 +374,11 @@ declare global {
/**
* Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await alert.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await alert.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the alert overlay after it has been created.
@ -521,7 +521,7 @@ declare global {
declare global {
interface HTMLIonAnimationControllerElement extends HTMLStencilElement {
'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>;
'create': (animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any) => Promise<Animation>;
}
var HTMLIonAnimationControllerElement: {
prototype: HTMLIonAnimationControllerElement;
@ -1354,14 +1354,14 @@ declare global {
* If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
*/
'fullscreen': boolean;
'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
'scrollByPoint': (x: number, y: number, duration: number, done?: Function) => Promise<any>;
'scrollEnabled': boolean;
'scrollEvents': boolean;
/**
* Scroll to the bottom of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed.
*/
'scrollToBottom': (duration?: number) => Promise<void>;
'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
'scrollToPoint': (x: number, y: number, duration: number, done?: Function) => Promise<any>;
/**
* Scroll to the top of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed.
*/
@ -2829,11 +2829,11 @@ declare global {
/**
* Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene.
*/
'getOpenItem': () => ItemSliding | null;
'getOpenItem': () => ItemSliding;
/**
* Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item.
*/
'setOpenItem': (itemSliding: ItemSliding | null) => void;
'setOpenItem': (itemSliding: ItemSliding) => void;
}
var HTMLIonListElement: {
prototype: HTMLIonListElement;
@ -2860,8 +2860,8 @@ declare global {
declare global {
interface HTMLIonLoadingControllerElement extends HTMLStencilElement {
'create': (opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
'dismiss': (data?: any, role?: string | undefined, loadingId?: number) => Promise<void>;
'create': (opts?: LoadingOptions) => Promise<HTMLIonLoadingElement>;
'dismiss': (data?: any, role?: string, loadingId?: number) => Promise<void>;
'getTop': () => HTMLIonLoadingElement;
}
var HTMLIonLoadingControllerElement: {
@ -2900,7 +2900,7 @@ declare global {
/**
* Dismiss the loading overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
*/
@ -2925,11 +2925,11 @@ declare global {
/**
* Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await loading.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await loading.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the loading overlay after it has been created.
@ -3094,34 +3094,34 @@ declare global {
/**
* Programatically close the Menu. If no `menuId` is given as the first argument then it'll close any menu which is open. If a `menuId` is given then it'll close that exact menu.
*/
'close': (menuId?: string | undefined) => Promise<boolean>;
'close': (menuId?: string) => Promise<boolean>;
'createAnimation': (type: string, menuCmp: Menu) => Promise<Animation>;
/**
* Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side.
*/
'enable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null;
'enable': (shouldEnable: boolean, menuId?: string) => HTMLIonMenuElement;
/**
* Used to get a menu instance. If a `menuId` is not provided then it'll return the first menu found. If a `menuId` is `left` or `right`, then it'll return the enabled menu on that side. Otherwise, if a `menuId` is provided, then it'll try to find the menu using the menu's `id` property. If a menu is not found then it'll return `null`.
*/
'get': (menuId?: string | undefined) => HTMLIonMenuElement | null;
'get': (menuId?: string) => HTMLIonMenuElement;
'getMenus': () => HTMLIonMenuElement[];
'getOpen': () => HTMLIonMenuElement | null;
'getOpen': () => HTMLIonMenuElement;
'isAnimating': () => boolean;
'isEnabled': (menuId?: string | undefined) => boolean;
'isOpen': (menuId?: string | undefined) => boolean;
'isEnabled': (menuId?: string) => boolean;
'isOpen': (menuId?: string) => boolean;
/**
* Programatically open the Menu.
*/
'open': (menuId?: string | undefined) => Promise<boolean>;
'open': (menuId?: string) => Promise<boolean>;
'registerAnimation': (name: string, animation: AnimationBuilder) => void;
/**
* Used to enable or disable the ability to swipe open the menu.
*/
'swipeEnable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null;
'swipeEnable': (shouldEnable: boolean, menuId?: string) => HTMLIonMenuElement;
/**
* Toggle the menu. If it's closed, it will open, and if opened, it will close.
*/
'toggle': (menuId?: string | undefined) => Promise<boolean>;
'toggle': (menuId?: string) => Promise<boolean>;
}
var HTMLIonMenuControllerElement: {
prototype: HTMLIonMenuControllerElement;
@ -3287,8 +3287,8 @@ declare global {
declare global {
interface HTMLIonModalControllerElement extends HTMLStencilElement {
'create': (opts?: ModalOptions | undefined) => Promise<HTMLIonModalElement>;
'dismiss': (data?: any, role?: string | undefined, modalId?: number) => Promise<void>;
'create': (opts?: ModalOptions) => Promise<HTMLIonModalElement>;
'dismiss': (data?: any, role?: string, modalId?: number) => Promise<void>;
'getTop': () => HTMLIonModalElement;
}
var HTMLIonModalControllerElement: {
@ -3336,7 +3336,7 @@ declare global {
/**
* Dismiss the modal overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -3357,11 +3357,11 @@ declare global {
/**
* Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await modal.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await modal.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the modal overlay after it has been created.
@ -3557,24 +3557,24 @@ declare global {
declare global {
interface HTMLIonNavElement extends HTMLStencilElement {
'animated': boolean;
'canGoBack': (view?: ViewController | undefined) => boolean;
'canGoBack': (view?: ViewController) => boolean;
'delegate': FrameworkDelegate|undefined;
'getActive': () => ViewController | undefined;
'getByIndex': (index: number) => ViewController | undefined;
'getPrevious': (view?: ViewController | undefined) => ViewController | undefined;
'getRouteId': () => RouteID | undefined;
'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'getActive': () => ViewController;
'getByIndex': (index: number) => ViewController;
'getPrevious': (view?: ViewController) => ViewController;
'getRouteId': () => RouteID;
'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'length': () => number;
'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'push': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'pop': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'popToRoot': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'push': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'root': NavComponent|undefined;
'rootParams': ComponentProps|undefined;
'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'setPages': (views: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'setRoot': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
'swipeBackEnabled': boolean;
}
@ -3677,8 +3677,8 @@ declare global {
declare global {
interface HTMLIonPickerControllerElement extends HTMLStencilElement {
'create': (opts?: PickerOptions | undefined) => Promise<HTMLIonPickerElement>;
'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise<void>;
'create': (opts?: PickerOptions) => Promise<HTMLIonPickerElement>;
'dismiss': (data?: any, role?: string, pickerId?: number) => Promise<void>;
'getTop': () => HTMLIonPickerElement;
}
var HTMLIonPickerControllerElement: {
@ -3723,7 +3723,7 @@ declare global {
/**
* Dismiss the picker overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* Number of milliseconds to wait before dismissing the picker.
*/
@ -3736,7 +3736,7 @@ declare global {
* Animation to use when the picker is presented.
*/
'enterAnimation': AnimationBuilder;
'getColumn': (name: string) => PickerColumn | undefined;
'getColumn': (name: string) => PickerColumn;
'getColumns': () => PickerColumn[];
'keyboardClose': boolean;
/**
@ -3746,11 +3746,11 @@ declare global {
/**
* Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await picker.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await picker.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the picker overlay after it has been created.
@ -3893,8 +3893,8 @@ declare global {
declare global {
interface HTMLIonPopoverControllerElement extends HTMLStencilElement {
'create': (opts?: PopoverOptions | undefined) => Promise<HTMLIonPopoverElement>;
'dismiss': (data?: any, role?: string | undefined, popoverId?: number) => Promise<void>;
'create': (opts?: PopoverOptions) => Promise<HTMLIonPopoverElement>;
'dismiss': (data?: any, role?: string, popoverId?: number) => Promise<void>;
'getTop': () => HTMLIonPopoverElement;
}
var HTMLIonPopoverControllerElement: {
@ -3942,7 +3942,7 @@ declare global {
/**
* Dismiss the popover overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -3967,11 +3967,11 @@ declare global {
/**
* Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await popover.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await popover.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* Present the popover overlay after it has been created.
@ -4322,7 +4322,7 @@ declare global {
/**
* Returns the ratio of the upper value's is current location, which is a number between `0` and `1`. If there is only one knob, then this will return `null`.
*/
'ratioUpper': () => number | null;
'ratioUpper': () => number;
/**
* If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`.
*/
@ -4751,10 +4751,10 @@ declare global {
interface HTMLIonRouterOutletElement extends HTMLStencilElement {
'animated': boolean;
'animationBuilder': AnimationBuilder;
'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement, opts?: RouterOutletOptions) => Promise<boolean>;
'delegate': FrameworkDelegate;
'getRouteId': () => RouteID | undefined;
'setRoot': (component: ComponentRef, params?: ComponentProps | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
'getRouteId': () => RouteID;
'setRoot': (component: ComponentRef, params?: ComponentProps, opts?: RouterOutletOptions) => Promise<boolean>;
'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
}
var HTMLIonRouterOutletElement: {
@ -4850,10 +4850,10 @@ declare global {
*/
'forceOverscroll': boolean;
'mode': string;
'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
'scrollByPoint': (x: number, y: number, duration: number, done?: Function) => Promise<any>;
'scrollEvents': boolean;
'scrollToBottom': (duration: number) => Promise<void>;
'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
'scrollToPoint': (x: number, y: number, duration: number, done?: Function) => Promise<any>;
'scrollToTop': (duration: number) => Promise<void>;
}
var HTMLIonScrollElement: {
@ -5516,15 +5516,15 @@ declare global {
/**
* Transition to the next slide.
*/
'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
'slideNext': (speed?: number, runCallbacks?: boolean) => void;
/**
* Transition to the previous slide.
*/
'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
'slidePrev': (speed?: number, runCallbacks?: boolean) => void;
/**
* Transition to the specified slide.
*/
'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
'slideTo': (index: number, speed?: number, runCallbacks?: boolean) => void;
/**
* Start auto play.
*/
@ -5816,7 +5816,7 @@ declare global {
* If true, the user cannot interact with the tab. Defaults to `false`.
*/
'disabled': boolean;
'getTabId': () => string | null;
'getTabId': () => string;
/**
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
*/
@ -5971,9 +5971,9 @@ declare global {
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'getRouteId': () => RouteID | undefined;
'getSelected': () => HTMLIonTabElement | undefined;
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined;
'getRouteId': () => RouteID;
'getSelected': () => HTMLIonTabElement;
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement;
/**
* A unique name for the tabs
*/
@ -6362,8 +6362,8 @@ declare global {
declare global {
interface HTMLIonToastControllerElement extends HTMLStencilElement {
'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
'dismiss': (data?: any, role?: string | undefined, toastId?: number) => Promise<void>;
'create': (opts?: ToastOptions) => Promise<HTMLIonToastElement>;
'dismiss': (data?: any, role?: string, toastId?: number) => Promise<void>;
'getTop': () => HTMLIonToastElement;
}
var HTMLIonToastControllerElement: {
@ -6402,7 +6402,7 @@ declare global {
/**
* Dismiss the toast overlay after it has been presented.
*/
'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string) => Promise<void>;
/**
* If true, the toast will dismiss when the page changes. Defaults to `false`.
*/
@ -6427,11 +6427,11 @@ declare global {
/**
* Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await toast.onDidDismiss(); ```
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onDidDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await toast.onWillDismiss(); ```
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'onWillDismiss': (callback?: (detail: OverlayEventDetail) => void) => Promise<OverlayEventDetail>;
'overlayId': number;
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".