diff --git a/angular/src/directives/angular-component-lib/utils.ts b/angular/src/directives/angular-component-lib/utils.ts
index d6cf7bd49e..58ed93b7d3 100644
--- a/angular/src/directives/angular-component-lib/utils.ts
+++ b/angular/src/directives/angular-component-lib/utils.ts
@@ -4,46 +4,40 @@ import { fromEvent } from 'rxjs';
export const proxyInputs = (Cmp: any, inputs: string[]) => {
const Prototype = Cmp.prototype;
- inputs.forEach(item => {
+ inputs.forEach((item) => {
Object.defineProperty(Prototype, item, {
get() {
return this.el[item];
},
set(val: any) {
this.z.runOutsideAngular(() => (this.el[item] = val));
- }
+ },
});
});
};
export const proxyMethods = (Cmp: any, methods: string[]) => {
const Prototype = Cmp.prototype;
- methods.forEach(methodName => {
+ methods.forEach((methodName) => {
Prototype[methodName] = function () {
const args = arguments;
- return this.z.runOutsideAngular(() =>
- this.el[methodName].apply(this.el, args)
- );
+ return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
};
});
};
export const proxyOutputs = (instance: any, el: any, events: string[]) => {
- events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
-}
+ events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
export const defineCustomElement = (tagName: string, customElement: any) => {
- if (
- customElement !== undefined &&
- typeof customElements !== 'undefined' &&
- !customElements.get(tagName)
- ) {
+ if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
customElements.define(tagName, customElement);
}
-}
+};
// tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
const decorator = function (cls: any) {
const { defineCustomElementFn, inputs, methods } = opts;
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 4d7c1e2a3a..ba8cad6b4c 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1,24 +1,21 @@
/* tslint:disable */
/* auto-generated angular directive proxies */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
import { Components } from '@ionic/core';
-
-
-export declare interface IonAccordion extends Components.IonAccordion {}
-
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
})
@Component({
selector: 'ion-accordion',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
})
export class IonAccordion {
protected el: HTMLElement;
@@ -28,27 +25,19 @@ export class IonAccordion {
}
}
-import type { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
-export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
- /**
- * Emitted when the value property has changed
-as a result of a user action such as a click.
-This event will not emit when programmatically setting
-the value property.
- */
- ionChange: EventEmitter>;
-}
+export declare interface IonAccordion extends Components.IonAccordion {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
})
@Component({
selector: 'ion-accordion-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
})
export class IonAccordionGroup {
protected el: HTMLElement;
@@ -59,49 +48,21 @@ export class IonAccordionGroup {
}
}
-import type { OverlayEventDetail as IActionSheetOverlayEventDetail } from '@ionic/core';
-export declare interface IonActionSheet extends Components.IonActionSheet {
- /**
- * Emitted after the action sheet has presented.
- */
- ionActionSheetDidPresent: EventEmitter>;
- /**
- * Emitted before the action sheet has presented.
- */
- ionActionSheetWillPresent: EventEmitter>;
- /**
- * Emitted before the action sheet has dismissed.
- */
- ionActionSheetWillDismiss: EventEmitter>;
- /**
- * Emitted after the action sheet has dismissed.
- */
- ionActionSheetDidDismiss: EventEmitter>;
- /**
- * Emitted after the action sheet has presented.
-Shorthand for ionActionSheetWillDismiss.
- */
- didPresent: EventEmitter>;
- /**
- * Emitted before the action sheet has presented.
-Shorthand for ionActionSheetWillPresent.
- */
- willPresent: EventEmitter>;
- /**
- * Emitted before the action sheet has dismissed.
-Shorthand for ionActionSheetWillDismiss.
- */
- willDismiss: EventEmitter>;
- /**
- * Emitted after the action sheet has dismissed.
-Shorthand for ionActionSheetDidDismiss.
- */
- didDismiss: EventEmitter>;
+import type { AccordionGroupChangeEventDetail as IIonAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
+
+export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
+ /**
+ * Emitted when the value property has changed
+as a result of a user action such as a click.
+This event will not emit when programmatically setting
+the value property.
+ */
+ ionChange: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
})
@@ -109,7 +70,8 @@ Shorthand for ionActionSheetDidDismiss.
selector: 'ion-action-sheet',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
})
export class IonActionSheet {
protected el: HTMLElement;
@@ -120,49 +82,50 @@ export class IonActionSheet {
}
}
-import type { OverlayEventDetail as IAlertOverlayEventDetail } from '@ionic/core';
-export declare interface IonAlert extends Components.IonAlert {
+
+import type { OverlayEventDetail as IIonActionSheetOverlayEventDetail } from '@ionic/core';
+
+export declare interface IonActionSheet extends Components.IonActionSheet {
/**
- * Emitted after the alert has presented.
+ * Emitted after the action sheet has presented.
*/
- ionAlertDidPresent: EventEmitter>;
+ ionActionSheetDidPresent: EventEmitter>;
/**
- * Emitted before the alert has presented.
+ * Emitted before the action sheet has presented.
*/
- ionAlertWillPresent: EventEmitter>;
+ ionActionSheetWillPresent: EventEmitter>;
/**
- * Emitted before the alert has dismissed.
+ * Emitted before the action sheet has dismissed.
*/
- ionAlertWillDismiss: EventEmitter>;
+ ionActionSheetWillDismiss: EventEmitter>;
/**
- * Emitted after the alert has dismissed.
+ * Emitted after the action sheet has dismissed.
*/
- ionAlertDidDismiss: EventEmitter>;
+ ionActionSheetDidDismiss: EventEmitter>;
/**
- * Emitted after the alert has presented.
-Shorthand for ionAlertWillDismiss.
+ * Emitted after the action sheet has presented.
+Shorthand for ionActionSheetWillDismiss.
*/
didPresent: EventEmitter>;
/**
- * Emitted before the alert has presented.
-Shorthand for ionAlertWillPresent.
+ * Emitted before the action sheet has presented.
+Shorthand for ionActionSheetWillPresent.
*/
willPresent: EventEmitter>;
/**
- * Emitted before the alert has dismissed.
-Shorthand for ionAlertWillDismiss.
+ * Emitted before the action sheet has dismissed.
+Shorthand for ionActionSheetWillDismiss.
*/
- willDismiss: EventEmitter>;
+ willDismiss: EventEmitter>;
/**
- * Emitted after the alert has dismissed.
-Shorthand for ionAlertDidDismiss.
+ * Emitted after the action sheet has dismissed.
+Shorthand for ionActionSheetDidDismiss.
*/
- didDismiss: EventEmitter>;
-
+ didDismiss: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
})
@@ -170,7 +133,8 @@ Shorthand for ionAlertDidDismiss.
selector: 'ion-alert',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
})
export class IonAlert {
protected el: HTMLElement;
@@ -182,15 +146,56 @@ export class IonAlert {
}
-export declare interface IonApp extends Components.IonApp {}
+import type { OverlayEventDetail as IIonAlertOverlayEventDetail } from '@ionic/core';
+
+export declare interface IonAlert extends Components.IonAlert {
+ /**
+ * Emitted after the alert has presented.
+ */
+ ionAlertDidPresent: EventEmitter>;
+ /**
+ * Emitted before the alert has presented.
+ */
+ ionAlertWillPresent: EventEmitter>;
+ /**
+ * Emitted before the alert has dismissed.
+ */
+ ionAlertWillDismiss: EventEmitter>;
+ /**
+ * Emitted after the alert has dismissed.
+ */
+ ionAlertDidDismiss: EventEmitter>;
+ /**
+ * Emitted after the alert has presented.
+Shorthand for ionAlertWillDismiss.
+ */
+ didPresent: EventEmitter>;
+ /**
+ * Emitted before the alert has presented.
+Shorthand for ionAlertWillPresent.
+ */
+ willPresent: EventEmitter>;
+ /**
+ * Emitted before the alert has dismissed.
+Shorthand for ionAlertWillDismiss.
+ */
+ willDismiss: EventEmitter>;
+ /**
+ * Emitted after the alert has dismissed.
+Shorthand for ionAlertDidDismiss.
+ */
+ didDismiss: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-app',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonApp {
protected el: HTMLElement;
@@ -201,15 +206,17 @@ export class IonApp {
}
-export declare interface IonAvatar extends Components.IonAvatar {}
+export declare interface IonApp extends Components.IonApp {}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-avatar',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonAvatar {
protected el: HTMLElement;
@@ -220,17 +227,18 @@ export class IonAvatar {
}
-export declare interface IonBackButton extends Components.IonBackButton {}
+export declare interface IonAvatar extends Components.IonAvatar {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
})
@Component({
selector: 'ion-back-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'],
})
export class IonBackButton {
protected el: HTMLElement;
@@ -241,23 +249,18 @@ export class IonBackButton {
}
-export declare interface IonBackdrop extends Components.IonBackdrop {
- /**
- * Emitted when the backdrop is tapped.
- */
- ionBackdropTap: EventEmitter>;
+export declare interface IonBackButton extends Components.IonBackButton {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['stopPropagation', 'tappable', 'visible']
})
@Component({
selector: 'ion-backdrop',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['stopPropagation', 'tappable', 'visible']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['stopPropagation', 'tappable', 'visible'],
})
export class IonBackdrop {
protected el: HTMLElement;
@@ -269,17 +272,23 @@ export class IonBackdrop {
}
-export declare interface IonBadge extends Components.IonBadge {}
+export declare interface IonBackdrop extends Components.IonBackdrop {
+ /**
+ * Emitted when the backdrop is tapped.
+ */
+ ionBackdropTap: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-badge',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonBadge {
protected el: HTMLElement;
@@ -290,27 +299,18 @@ export class IonBadge {
}
-export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
- /**
- * Emitted when the breadcrumb has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the breadcrumb loses focus.
- */
- ionBlur: EventEmitter>;
+export declare interface IonBadge extends Components.IonBadge {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
})
@Component({
selector: 'ion-breadcrumb',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'],
})
export class IonBreadcrumb {
protected el: HTMLElement;
@@ -321,24 +321,28 @@ export class IonBreadcrumb {
}
}
-import type { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
-export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
- /**
- * Emitted when the collapsed indicator is clicked on.
- */
- ionCollapsedClick: EventEmitter>;
+export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
+ /**
+ * Emitted when the breadcrumb has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the breadcrumb loses focus.
+ */
+ ionBlur: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
})
@Component({
selector: 'ion-breadcrumbs',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
})
export class IonBreadcrumbs {
protected el: HTMLElement;
@@ -350,27 +354,25 @@ export class IonBreadcrumbs {
}
-export declare interface IonButton extends Components.IonButton {
- /**
- * Emitted when the button has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the button loses focus.
- */
- ionBlur: EventEmitter>;
+import type { BreadcrumbCollapsedClickEventDetail as IIonBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
+export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
+ /**
+ * Emitted when the collapsed indicator is clicked on.
+ */
+ ionCollapsedClick: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
})
@Component({
selector: 'ion-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'],
})
export class IonButton {
protected el: HTMLElement;
@@ -382,17 +384,27 @@ export class IonButton {
}
-export declare interface IonButtons extends Components.IonButtons {}
+export declare interface IonButton extends Components.IonButton {
+ /**
+ * Emitted when the button has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the button loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['collapse']
})
@Component({
selector: 'ion-buttons',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['collapse']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse'],
})
export class IonButtons {
protected el: HTMLElement;
@@ -403,17 +415,18 @@ export class IonButtons {
}
-export declare interface IonCard extends Components.IonCard {}
+export declare interface IonButtons extends Components.IonButtons {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
})
@Component({
selector: 'ion-card',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
})
export class IonCard {
protected el: HTMLElement;
@@ -424,17 +437,18 @@ export class IonCard {
}
-export declare interface IonCardContent extends Components.IonCardContent {}
+export declare interface IonCard extends Components.IonCard {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['mode']
})
@Component({
selector: 'ion-card-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['mode'],
})
export class IonCardContent {
protected el: HTMLElement;
@@ -445,17 +459,18 @@ export class IonCardContent {
}
-export declare interface IonCardHeader extends Components.IonCardHeader {}
+export declare interface IonCardContent extends Components.IonCardContent {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode', 'translucent']
})
@Component({
selector: 'ion-card-header',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode', 'translucent']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'translucent'],
})
export class IonCardHeader {
protected el: HTMLElement;
@@ -466,17 +481,18 @@ export class IonCardHeader {
}
-export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
+export declare interface IonCardHeader extends Components.IonCardHeader {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-card-subtitle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonCardSubtitle {
protected el: HTMLElement;
@@ -487,17 +503,18 @@ export class IonCardSubtitle {
}
-export declare interface IonCardTitle extends Components.IonCardTitle {}
+export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-card-title',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonCardTitle {
protected el: HTMLElement;
@@ -507,35 +524,19 @@ export class IonCardTitle {
}
}
-import type { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core';
-export declare interface IonCheckbox extends Components.IonCheckbox {
- /**
- * Emitted when the checked property has changed
-as a result of a user action such as a click.
-This event will not emit when programmatically
-setting the checked property.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the checkbox has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the checkbox loses focus.
- */
- ionBlur: EventEmitter>;
-}
+export declare interface IonCardTitle extends Components.IonCardTitle {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
})
@Component({
selector: 'ion-checkbox',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
})
export class IonCheckbox {
protected el: HTMLElement;
@@ -547,17 +548,36 @@ export class IonCheckbox {
}
-export declare interface IonChip extends Components.IonChip {}
+import type { CheckboxChangeEventDetail as IIonCheckboxCheckboxChangeEventDetail } from '@ionic/core';
+
+export declare interface IonCheckbox extends Components.IonCheckbox {
+ /**
+ * Emitted when the checked property has changed
+as a result of a user action such as a click.
+This event will not emit when programmatically
+setting the checked property.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the checkbox has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the checkbox loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'disabled', 'mode', 'outline']
})
@Component({
selector: 'ion-chip',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'disabled', 'mode', 'outline']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'mode', 'outline'],
})
export class IonChip {
protected el: HTMLElement;
@@ -568,17 +588,18 @@ export class IonChip {
}
-export declare interface IonCol extends Components.IonCol {}
+export declare interface IonChip extends Components.IonChip {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
})
@Component({
selector: 'ion-col',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
})
export class IonCol {
protected el: HTMLElement;
@@ -588,29 +609,11 @@ export class IonCol {
}
}
-import type { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
-import type { ScrollDetail as IContentScrollDetail } from '@ionic/core';
-export declare interface IonContent extends Components.IonContent {
- /**
- * Emitted when the scroll has started. This event is disabled by default.
-Set `scrollEvents` to `true` to enable.
- */
- ionScrollStart: EventEmitter>;
- /**
- * Emitted while scrolling. This event is disabled by default.
-Set `scrollEvents` to `true` to enable.
- */
- ionScroll: EventEmitter>;
- /**
- * Emitted when the scroll has ended. This event is disabled by default.
-Set `scrollEvents` to `true` to enable.
- */
- ionScrollEnd: EventEmitter>;
-}
+export declare interface IonCol extends Components.IonCol {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']
})
@@ -618,7 +621,8 @@ Set `scrollEvents` to `true` to enable.
selector: 'ion-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
})
export class IonContent {
protected el: HTMLElement;
@@ -629,29 +633,30 @@ export class IonContent {
}
}
-import type { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core';
-export declare interface IonDatetime extends Components.IonDatetime {
- /**
- * Emitted when the datetime selection was cancelled.
- */
- ionCancel: EventEmitter>;
- /**
- * Emitted when the value (selected date) has changed.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the datetime has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the datetime loses focus.
- */
- ionBlur: EventEmitter>;
+import type { ScrollBaseDetail as IIonContentScrollBaseDetail } from '@ionic/core';
+import type { ScrollDetail as IIonContentScrollDetail } from '@ionic/core';
+
+export declare interface IonContent extends Components.IonContent {
+ /**
+ * Emitted when the scroll has started. This event is disabled by default.
+Set `scrollEvents` to `true` to enable.
+ */
+ ionScrollStart: EventEmitter>;
+ /**
+ * Emitted while scrolling. This event is disabled by default.
+Set `scrollEvents` to `true` to enable.
+ */
+ ionScroll: EventEmitter>;
+ /**
+ * Emitted when the scroll has ended. This event is disabled by default.
+Set `scrollEvents` to `true` to enable.
+ */
+ ionScrollEnd: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
methods: ['confirm', 'reset', 'cancel']
})
@@ -659,7 +664,8 @@ export declare interface IonDatetime extends Components.IonDatetime {
selector: 'ion-datetime',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
})
export class IonDatetime {
protected el: HTMLElement;
@@ -671,17 +677,37 @@ export class IonDatetime {
}
-export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+import type { DatetimeChangeEventDetail as IIonDatetimeDatetimeChangeEventDetail } from '@ionic/core';
+
+export declare interface IonDatetime extends Components.IonDatetime {
+ /**
+ * Emitted when the datetime selection was cancelled.
+ */
+ ionCancel: EventEmitter>;
+ /**
+ * Emitted when the value (selected date) has changed.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the datetime has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the datetime loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'datetime', 'disabled', 'mode']
})
@Component({
selector: 'ion-datetime-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'datetime', 'disabled', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'datetime', 'disabled', 'mode'],
})
export class IonDatetimeButton {
protected el: HTMLElement;
@@ -692,10 +718,10 @@ export class IonDatetimeButton {
}
-export declare interface IonFab extends Components.IonFab {}
+export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['activated', 'edge', 'horizontal', 'vertical'],
methods: ['close']
})
@@ -703,7 +729,8 @@ export declare interface IonFab extends Components.IonFab {}
selector: 'ion-fab',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['activated', 'edge', 'horizontal', 'vertical']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activated', 'edge', 'horizontal', 'vertical'],
})
export class IonFab {
protected el: HTMLElement;
@@ -714,27 +741,18 @@ export class IonFab {
}
-export declare interface IonFabButton extends Components.IonFabButton {
- /**
- * Emitted when the button has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the button loses focus.
- */
- ionBlur: EventEmitter>;
+export declare interface IonFab extends Components.IonFab {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
})
@Component({
selector: 'ion-fab-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
})
export class IonFabButton {
protected el: HTMLElement;
@@ -746,17 +764,27 @@ export class IonFabButton {
}
-export declare interface IonFabList extends Components.IonFabList {}
+export declare interface IonFabButton extends Components.IonFabButton {
+ /**
+ * Emitted when the button has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the button loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['activated', 'side']
})
@Component({
selector: 'ion-fab-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['activated', 'side']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activated', 'side'],
})
export class IonFabList {
protected el: HTMLElement;
@@ -767,17 +795,18 @@ export class IonFabList {
}
-export declare interface IonFooter extends Components.IonFooter {}
+export declare interface IonFabList extends Components.IonFabList {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['collapse', 'mode', 'translucent']
})
@Component({
selector: 'ion-footer',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['collapse', 'mode', 'translucent']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse', 'mode', 'translucent'],
})
export class IonFooter {
protected el: HTMLElement;
@@ -788,17 +817,18 @@ export class IonFooter {
}
-export declare interface IonGrid extends Components.IonGrid {}
+export declare interface IonFooter extends Components.IonFooter {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['fixed']
})
@Component({
selector: 'ion-grid',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['fixed']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['fixed'],
})
export class IonGrid {
protected el: HTMLElement;
@@ -809,17 +839,18 @@ export class IonGrid {
}
-export declare interface IonHeader extends Components.IonHeader {}
+export declare interface IonGrid extends Components.IonGrid {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['collapse', 'mode', 'translucent']
})
@Component({
selector: 'ion-header',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['collapse', 'mode', 'translucent']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse', 'mode', 'translucent'],
})
export class IonHeader {
protected el: HTMLElement;
@@ -830,17 +861,18 @@ export class IonHeader {
}
-export declare interface IonIcon extends Components.IonIcon {}
+export declare interface IonHeader extends Components.IonHeader {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
})
@Component({
selector: 'ion-icon',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
})
export class IonIcon {
protected el: HTMLElement;
@@ -851,31 +883,18 @@ export class IonIcon {
}
-export declare interface IonImg extends Components.IonImg {
- /**
- * Emitted when the img src has been set
- */
- ionImgWillLoad: EventEmitter>;
- /**
- * Emitted when the image has finished loading
- */
- ionImgDidLoad: EventEmitter>;
- /**
- * Emitted when the img fails to load
- */
- ionError: EventEmitter>;
+export declare interface IonIcon extends Components.IonIcon {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['alt', 'src']
})
@Component({
selector: 'ion-img',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['alt', 'src']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['alt', 'src'],
})
export class IonImg {
protected el: HTMLElement;
@@ -887,19 +906,23 @@ export class IonImg {
}
-export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll {
+export declare interface IonImg extends Components.IonImg {
/**
- * Emitted when the scroll reaches
-the threshold distance. From within your infinite handler,
-you must call the infinite scroll's `complete()` method when
-your async operation has completed.
+ * Emitted when the img src has been set
*/
- ionInfinite: EventEmitter>;
-
+ ionImgWillLoad: EventEmitter>;
+ /**
+ * Emitted when the image has finished loading
+ */
+ ionImgDidLoad: EventEmitter>;
+ /**
+ * Emitted when the img fails to load
+ */
+ ionError: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled', 'position', 'threshold'],
methods: ['complete']
})
@@ -907,7 +930,8 @@ your async operation has completed.
selector: 'ion-infinite-scroll',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled', 'position', 'threshold']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'position', 'threshold'],
})
export class IonInfiniteScroll {
protected el: HTMLElement;
@@ -919,17 +943,26 @@ export class IonInfiniteScroll {
}
-export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
+export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll {
+ /**
+ * Emitted when the scroll reaches
+the threshold distance. From within your infinite handler,
+you must call the infinite scroll's `complete()` method when
+your async operation has completed.
+ */
+ ionInfinite: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['loadingSpinner', 'loadingText']
})
@Component({
selector: 'ion-infinite-scroll-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['loadingSpinner', 'loadingText']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['loadingSpinner', 'loadingText'],
})
export class IonInfiniteScrollContent {
protected el: HTMLElement;
@@ -939,45 +972,11 @@ export class IonInfiniteScrollContent {
}
}
-import type { InputInputEventDetail as IInputInputInputEventDetail } from '@ionic/core';
-import type { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core';
-export declare interface IonInput extends Components.IonInput {
- /**
- * The `ionInput` event fires when the `value` of an `` element
-has been changed.
-For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
-is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
-the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
-the input is cleared on edit, the type is `null`.
- */
- ionInput: EventEmitter>;
- /**
- * The `ionChange` event is fired for `` elements when the user
-modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-event is not necessarily fired for each alteration to an element's value.
+export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
-Depending on the way the users interacts with the element, the `ionChange`
-event fires at a different moment:
-- When the user commits the change explicitly (e.g. by selecting a date
-from a date picker for ``, etc.).
-- When the element loses focus after its value has changed: for elements
-where the user's interaction is typing.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the input loses focus.
- */
- ionBlur: EventEmitter>;
- /**
- * Emitted when the input has focus.
- */
- ionFocus: EventEmitter>;
-
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
methods: ['setFocus', 'getInputElement']
})
@@ -985,7 +984,8 @@ where the user's interaction is typing.
selector: 'ion-input',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
})
export class IonInput {
protected el: HTMLElement;
@@ -997,17 +997,53 @@ export class IonInput {
}
-export declare interface IonItem extends Components.IonItem {}
+import type { InputInputEventDetail as IIonInputInputInputEventDetail } from '@ionic/core';
+import type { InputChangeEventDetail as IIonInputInputChangeEventDetail } from '@ionic/core';
+
+export declare interface IonInput extends Components.IonInput {
+ /**
+ * The `ionInput` event fires when the `value` of an `` element
+has been changed.
+
+For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+the input is cleared on edit, the type is `null`.
+ */
+ ionInput: EventEmitter>;
+ /**
+ * The `ionChange` event is fired for `` elements when the user
+modifies the element's value. Unlike the `ionInput` event, the `ionChange`
+event is not necessarily fired for each alteration to an element's value.
+
+Depending on the way the users interacts with the element, the `ionChange`
+event fires at a different moment:
+- When the user commits the change explicitly (e.g. by selecting a date
+from a date picker for ``, etc.).
+- When the element loses focus after its value has changed: for elements
+where the user's interaction is typing.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the input loses focus.
+ */
+ ionBlur: EventEmitter>;
+ /**
+ * Emitted when the input has focus.
+ */
+ ionFocus: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
})
@Component({
selector: 'ion-item',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'],
})
export class IonItem {
protected el: HTMLElement;
@@ -1018,17 +1054,18 @@ export class IonItem {
}
-export declare interface IonItemDivider extends Components.IonItemDivider {}
+export declare interface IonItem extends Components.IonItem {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode', 'sticky']
})
@Component({
selector: 'ion-item-divider',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode', 'sticky']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'sticky'],
})
export class IonItemDivider {
protected el: HTMLElement;
@@ -1039,15 +1076,17 @@ export class IonItemDivider {
}
-export declare interface IonItemGroup extends Components.IonItemGroup {}
+export declare interface IonItemDivider extends Components.IonItemDivider {}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-item-group',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonItemGroup {
protected el: HTMLElement;
@@ -1058,17 +1097,18 @@ export class IonItemGroup {
}
-export declare interface IonItemOption extends Components.IonItemOption {}
+export declare interface IonItemGroup extends Components.IonItemGroup {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
})
@Component({
selector: 'ion-item-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
})
export class IonItemOption {
protected el: HTMLElement;
@@ -1079,23 +1119,18 @@ export class IonItemOption {
}
-export declare interface IonItemOptions extends Components.IonItemOptions {
- /**
- * Emitted when the item has been fully swiped.
- */
- ionSwipe: EventEmitter>;
+export declare interface IonItemOption extends Components.IonItemOption {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['side']
})
@Component({
selector: 'ion-item-options',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['side']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['side'],
})
export class IonItemOptions {
protected el: HTMLElement;
@@ -1107,16 +1142,15 @@ export class IonItemOptions {
}
-export declare interface IonItemSliding extends Components.IonItemSliding {
+export declare interface IonItemOptions extends Components.IonItemOptions {
/**
- * Emitted when the sliding position changes.
+ * Emitted when the item has been fully swiped.
*/
- ionDrag: EventEmitter>;
-
+ ionSwipe: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled'],
methods: ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']
})
@@ -1124,7 +1158,8 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
selector: 'ion-item-sliding',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled'],
})
export class IonItemSliding {
protected el: HTMLElement;
@@ -1136,17 +1171,23 @@ export class IonItemSliding {
}
-export declare interface IonLabel extends Components.IonLabel {}
+export declare interface IonItemSliding extends Components.IonItemSliding {
+ /**
+ * Emitted when the sliding position changes.
+ */
+ ionDrag: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode', 'position']
})
@Component({
selector: 'ion-label',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode', 'position']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'position'],
})
export class IonLabel {
protected el: HTMLElement;
@@ -1157,10 +1198,10 @@ export class IonLabel {
}
-export declare interface IonList extends Components.IonList {}
+export declare interface IonLabel extends Components.IonLabel {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['inset', 'lines', 'mode'],
methods: ['closeSlidingItems']
})
@@ -1168,7 +1209,8 @@ export declare interface IonList extends Components.IonList {}
selector: 'ion-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['inset', 'lines', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['inset', 'lines', 'mode'],
})
export class IonList {
protected el: HTMLElement;
@@ -1179,17 +1221,18 @@ export class IonList {
}
-export declare interface IonListHeader extends Components.IonListHeader {}
+export declare interface IonList extends Components.IonList {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'lines', 'mode']
})
@Component({
selector: 'ion-list-header',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'lines', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'lines', 'mode'],
})
export class IonListHeader {
protected el: HTMLElement;
@@ -1199,49 +1242,11 @@ export class IonListHeader {
}
}
-import type { OverlayEventDetail as ILoadingOverlayEventDetail } from '@ionic/core';
-export declare interface IonLoading extends Components.IonLoading {
- /**
- * Emitted after the loading has presented.
- */
- ionLoadingDidPresent: EventEmitter>;
- /**
- * Emitted before the loading has presented.
- */
- ionLoadingWillPresent: EventEmitter>;
- /**
- * Emitted before the loading has dismissed.
- */
- ionLoadingWillDismiss: EventEmitter>;
- /**
- * Emitted after the loading has dismissed.
- */
- ionLoadingDidDismiss: EventEmitter>;
- /**
- * Emitted after the loading indicator has presented.
-Shorthand for ionLoadingWillDismiss.
- */
- didPresent: EventEmitter>;
- /**
- * Emitted before the loading indicator has presented.
-Shorthand for ionLoadingWillPresent.
- */
- willPresent: EventEmitter>;
- /**
- * Emitted before the loading indicator has dismissed.
-Shorthand for ionLoadingWillDismiss.
- */
- willDismiss: EventEmitter>;
- /**
- * Emitted after the loading indicator has dismissed.
-Shorthand for ionLoadingDidDismiss.
- */
- didDismiss: EventEmitter>;
-}
+export declare interface IonListHeader extends Components.IonListHeader {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
})
@@ -1249,7 +1254,8 @@ Shorthand for ionLoadingDidDismiss.
selector: 'ion-loading',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
})
export class IonLoading {
protected el: HTMLElement;
@@ -1261,28 +1267,49 @@ export class IonLoading {
}
-export declare interface IonMenu extends Components.IonMenu {
- /**
- * Emitted when the menu is about to be opened.
- */
- ionWillOpen: EventEmitter>;
- /**
- * Emitted when the menu is about to be closed.
- */
- ionWillClose: EventEmitter>;
- /**
- * Emitted when the menu is open.
- */
- ionDidOpen: EventEmitter>;
- /**
- * Emitted when the menu is closed.
- */
- ionDidClose: EventEmitter>;
+import type { OverlayEventDetail as IIonLoadingOverlayEventDetail } from '@ionic/core';
+export declare interface IonLoading extends Components.IonLoading {
+ /**
+ * Emitted after the loading has presented.
+ */
+ ionLoadingDidPresent: EventEmitter>;
+ /**
+ * Emitted before the loading has presented.
+ */
+ ionLoadingWillPresent: EventEmitter>;
+ /**
+ * Emitted before the loading has dismissed.
+ */
+ ionLoadingWillDismiss: EventEmitter>;
+ /**
+ * Emitted after the loading has dismissed.
+ */
+ ionLoadingDidDismiss: EventEmitter>;
+ /**
+ * Emitted after the loading indicator has presented.
+Shorthand for ionLoadingWillDismiss.
+ */
+ didPresent: EventEmitter>;
+ /**
+ * Emitted before the loading indicator has presented.
+Shorthand for ionLoadingWillPresent.
+ */
+ willPresent: EventEmitter>;
+ /**
+ * Emitted before the loading indicator has dismissed.
+Shorthand for ionLoadingWillDismiss.
+ */
+ willDismiss: EventEmitter>;
+ /**
+ * Emitted after the loading indicator has dismissed.
+Shorthand for ionLoadingDidDismiss.
+ */
+ didDismiss: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']
})
@@ -1290,7 +1317,8 @@ export declare interface IonMenu extends Components.IonMenu {
selector: 'ion-menu',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
})
export class IonMenu {
protected el: HTMLElement;
@@ -1302,17 +1330,35 @@ export class IonMenu {
}
-export declare interface IonMenuButton extends Components.IonMenuButton {}
+export declare interface IonMenu extends Components.IonMenu {
+ /**
+ * Emitted when the menu is about to be opened.
+ */
+ ionWillOpen: EventEmitter>;
+ /**
+ * Emitted when the menu is about to be closed.
+ */
+ ionWillClose: EventEmitter>;
+ /**
+ * Emitted when the menu is open.
+ */
+ ionDidOpen: EventEmitter>;
+ /**
+ * Emitted when the menu is closed.
+ */
+ ionDidClose: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
})
@Component({
selector: 'ion-menu-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
})
export class IonMenuButton {
protected el: HTMLElement;
@@ -1323,17 +1369,18 @@ export class IonMenuButton {
}
-export declare interface IonMenuToggle extends Components.IonMenuToggle {}
+export declare interface IonMenuButton extends Components.IonMenuButton {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['autoHide', 'menu']
})
@Component({
selector: 'ion-menu-toggle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['autoHide', 'menu']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['autoHide', 'menu'],
})
export class IonMenuToggle {
protected el: HTMLElement;
@@ -1344,20 +1391,10 @@ export class IonMenuToggle {
}
-export declare interface IonNav extends Components.IonNav {
- /**
- * Event fired when the nav will change components
- */
- ionNavWillChange: EventEmitter>;
- /**
- * Event fired when the nav has changed components
- */
- ionNavDidChange: EventEmitter>;
+export declare interface IonMenuToggle extends Components.IonMenuToggle {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
})
@@ -1365,7 +1402,8 @@ export declare interface IonNav extends Components.IonNav {
selector: 'ion-nav',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
})
export class IonNav {
protected el: HTMLElement;
@@ -1377,17 +1415,27 @@ export class IonNav {
}
-export declare interface IonNavLink extends Components.IonNavLink {}
+export declare interface IonNav extends Components.IonNav {
+ /**
+ * Event fired when the nav will change components
+ */
+ ionNavWillChange: EventEmitter>;
+ /**
+ * Event fired when the nav has changed components
+ */
+ ionNavDidChange: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
})
@Component({
selector: 'ion-nav-link',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
})
export class IonNavLink {
protected el: HTMLElement;
@@ -1398,17 +1446,18 @@ export class IonNavLink {
}
-export declare interface IonNote extends Components.IonNote {}
+export declare interface IonNavLink extends Components.IonNavLink {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-note',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonNote {
protected el: HTMLElement;
@@ -1418,49 +1467,11 @@ export class IonNote {
}
}
-import type { OverlayEventDetail as IPickerOverlayEventDetail } from '@ionic/core';
-export declare interface IonPicker extends Components.IonPicker {
- /**
- * Emitted after the picker has presented.
- */
- ionPickerDidPresent: EventEmitter>;
- /**
- * Emitted before the picker has presented.
- */
- ionPickerWillPresent: EventEmitter>;
- /**
- * Emitted before the picker has dismissed.
- */
- ionPickerWillDismiss: EventEmitter>;
- /**
- * Emitted after the picker has dismissed.
- */
- ionPickerDidDismiss: EventEmitter>;
- /**
- * Emitted after the picker has presented.
-Shorthand for ionPickerWillDismiss.
- */
- didPresent: EventEmitter>;
- /**
- * Emitted before the picker has presented.
-Shorthand for ionPickerWillPresent.
- */
- willPresent: EventEmitter>;
- /**
- * Emitted before the picker has dismissed.
-Shorthand for ionPickerWillDismiss.
- */
- willDismiss: EventEmitter>;
- /**
- * Emitted after the picker has dismissed.
-Shorthand for ionPickerDidDismiss.
- */
- didDismiss: EventEmitter>;
-}
+export declare interface IonNote extends Components.IonNote {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
})
@@ -1468,7 +1479,8 @@ Shorthand for ionPickerDidDismiss.
selector: 'ion-picker',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
})
export class IonPicker {
protected el: HTMLElement;
@@ -1480,17 +1492,57 @@ export class IonPicker {
}
-export declare interface IonProgressBar extends Components.IonProgressBar {}
+import type { OverlayEventDetail as IIonPickerOverlayEventDetail } from '@ionic/core';
+
+export declare interface IonPicker extends Components.IonPicker {
+ /**
+ * Emitted after the picker has presented.
+ */
+ ionPickerDidPresent: EventEmitter>;
+ /**
+ * Emitted before the picker has presented.
+ */
+ ionPickerWillPresent: EventEmitter>;
+ /**
+ * Emitted before the picker has dismissed.
+ */
+ ionPickerWillDismiss: EventEmitter>;
+ /**
+ * Emitted after the picker has dismissed.
+ */
+ ionPickerDidDismiss: EventEmitter>;
+ /**
+ * Emitted after the picker has presented.
+Shorthand for ionPickerWillDismiss.
+ */
+ didPresent: EventEmitter>;
+ /**
+ * Emitted before the picker has presented.
+Shorthand for ionPickerWillPresent.
+ */
+ willPresent: EventEmitter>;
+ /**
+ * Emitted before the picker has dismissed.
+Shorthand for ionPickerWillDismiss.
+ */
+ willDismiss: EventEmitter>;
+ /**
+ * Emitted after the picker has dismissed.
+Shorthand for ionPickerDidDismiss.
+ */
+ didDismiss: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
})
@Component({
selector: 'ion-progress-bar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
})
export class IonProgressBar {
protected el: HTMLElement;
@@ -1501,27 +1553,18 @@ export class IonProgressBar {
}
-export declare interface IonRadio extends Components.IonRadio {
- /**
- * Emitted when the radio button has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the radio button loses focus.
- */
- ionBlur: EventEmitter>;
+export declare interface IonProgressBar extends Components.IonProgressBar {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
})
@Component({
selector: 'ion-radio',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
})
export class IonRadio {
protected el: HTMLElement;
@@ -1532,24 +1575,28 @@ export class IonRadio {
}
}
-import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
-export declare interface IonRadioGroup extends Components.IonRadioGroup {
- /**
- * Emitted when the value has changed.
- */
- ionChange: EventEmitter>;
+export declare interface IonRadio extends Components.IonRadio {
+ /**
+ * Emitted when the radio button has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the radio button loses focus.
+ */
+ ionBlur: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['allowEmptySelection', 'name', 'value']
})
@Component({
selector: 'ion-radio-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['allowEmptySelection', 'name', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['allowEmptySelection', 'name', 'value'],
})
export class IonRadioGroup {
protected el: HTMLElement;
@@ -1560,55 +1607,26 @@ export class IonRadioGroup {
}
}
-import type { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
-import type { RangeKnobMoveStartEventDetail as IRangeRangeKnobMoveStartEventDetail } from '@ionic/core';
-import type { RangeKnobMoveEndEventDetail as IRangeRangeKnobMoveEndEventDetail } from '@ionic/core';
-export declare interface IonRange extends Components.IonRange {
- /**
- * The `ionChange` event is fired for `` elements when the user
-modifies the element's value:
-- When the user releases the knob after dragging;
-- When the user moves the knob with keyboard arrows
-`ionChange` is not fired when the value is changed programmatically.
- */
- ionChange: EventEmitter>;
- /**
- * The `ionInput` event is fired for `` elements when the value
-is modified. Unlike `ionChange`, `ionInput` is fired continuously
-while the user is dragging the knob.
- */
- ionInput: EventEmitter>;
- /**
- * Emitted when the range has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the range loses focus.
- */
- ionBlur: EventEmitter>;
- /**
- * Emitted when the user starts moving the range knob, whether through
-mouse drag, touch gesture, or keyboard interaction.
- */
- ionKnobMoveStart: EventEmitter>;
- /**
- * Emitted when the user finishes moving the range knob, whether through
-mouse drag, touch gesture, or keyboard interaction.
- */
- ionKnobMoveEnd: EventEmitter>;
+import type { RadioGroupChangeEventDetail as IIonRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
+export declare interface IonRadioGroup extends Components.IonRadioGroup {
+ /**
+ * Emitted when the value has changed.
+ */
+ ionChange: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
})
@Component({
selector: 'ion-range',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
})
export class IonRange {
protected el: HTMLElement;
@@ -1619,28 +1637,49 @@ export class IonRange {
}
}
-import type { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core';
-export declare interface IonRefresher extends Components.IonRefresher {
- /**
- * Emitted when the user lets go of the content and has pulled down
-further than the `pullMin` or pulls the content down and exceeds the pullMax.
-Updates the refresher state to `refreshing`. The `complete()` method should be
-called when the async operation has completed.
- */
- ionRefresh: EventEmitter>;
- /**
- * Emitted while the user is pulling down the content and exposing the refresher.
- */
- ionPull: EventEmitter>;
- /**
- * Emitted when the user begins to start pulling down.
- */
- ionStart: EventEmitter>;
+import type { RangeChangeEventDetail as IIonRangeRangeChangeEventDetail } from '@ionic/core';
+import type { RangeKnobMoveStartEventDetail as IIonRangeRangeKnobMoveStartEventDetail } from '@ionic/core';
+import type { RangeKnobMoveEndEventDetail as IIonRangeRangeKnobMoveEndEventDetail } from '@ionic/core';
+
+export declare interface IonRange extends Components.IonRange {
+ /**
+ * The `ionChange` event is fired for `` elements when the user
+modifies the element's value:
+- When the user releases the knob after dragging;
+- When the user moves the knob with keyboard arrows
+
+`ionChange` is not fired when the value is changed programmatically.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * The `ionInput` event is fired for `` elements when the value
+is modified. Unlike `ionChange`, `ionInput` is fired continuously
+while the user is dragging the knob.
+ */
+ ionInput: EventEmitter>;
+ /**
+ * Emitted when the range has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the range loses focus.
+ */
+ ionBlur: EventEmitter>;
+ /**
+ * Emitted when the user starts moving the range knob, whether through
+mouse drag, touch gesture, or keyboard interaction.
+ */
+ ionKnobMoveStart: EventEmitter>;
+ /**
+ * Emitted when the user finishes moving the range knob, whether through
+mouse drag, touch gesture, or keyboard interaction.
+ */
+ ionKnobMoveEnd: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
methods: ['complete', 'cancel', 'getProgress']
})
@@ -1648,7 +1687,8 @@ called when the async operation has completed.
selector: 'ion-refresher',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
})
export class IonRefresher {
protected el: HTMLElement;
@@ -1660,17 +1700,36 @@ export class IonRefresher {
}
-export declare interface IonRefresherContent extends Components.IonRefresherContent {}
+import type { RefresherEventDetail as IIonRefresherRefresherEventDetail } from '@ionic/core';
+
+export declare interface IonRefresher extends Components.IonRefresher {
+ /**
+ * Emitted when the user lets go of the content and has pulled down
+further than the `pullMin` or pulls the content down and exceeds the pullMax.
+Updates the refresher state to `refreshing`. The `complete()` method should be
+called when the async operation has completed.
+ */
+ ionRefresh: EventEmitter>;
+ /**
+ * Emitted while the user is pulling down the content and exposing the refresher.
+ */
+ ionPull: EventEmitter>;
+ /**
+ * Emitted when the user begins to start pulling down.
+ */
+ ionStart: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']
})
@Component({
selector: 'ion-refresher-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
})
export class IonRefresherContent {
protected el: HTMLElement;
@@ -1681,15 +1740,17 @@ export class IonRefresherContent {
}
-export declare interface IonReorder extends Components.IonReorder {}
+export declare interface IonRefresherContent extends Components.IonRefresherContent {}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-reorder',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonReorder {
protected el: HTMLElement;
@@ -1699,19 +1760,11 @@ export class IonReorder {
}
}
-import type { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core';
-export declare interface IonReorderGroup extends Components.IonReorderGroup {
- /**
- * Event that needs to be listened to in order to complete the reorder action.
-Once the event has been emitted, the `complete()` method then needs
-to be called in order to finalize the reorder action.
- */
- ionItemReorder: EventEmitter>;
-}
+export declare interface IonReorder extends Components.IonReorder {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled'],
methods: ['complete']
})
@@ -1719,7 +1772,8 @@ to be called in order to finalize the reorder action.
selector: 'ion-reorder-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled'],
})
export class IonReorderGroup {
protected el: HTMLElement;
@@ -1731,10 +1785,19 @@ export class IonReorderGroup {
}
-export declare interface IonRippleEffect extends Components.IonRippleEffect {}
+import type { ItemReorderEventDetail as IIonReorderGroupItemReorderEventDetail } from '@ionic/core';
+
+export declare interface IonReorderGroup extends Components.IonReorderGroup {
+ /**
+ * Event that needs to be listened to in order to complete the reorder action.
+Once the event has been emitted, the `complete()` method then needs
+to be called in order to finalize the reorder action.
+ */
+ ionItemReorder: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['type'],
methods: ['addRipple']
})
@@ -1742,7 +1805,8 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
selector: 'ion-ripple-effect',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['type']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['type'],
})
export class IonRippleEffect {
protected el: HTMLElement;
@@ -1753,15 +1817,17 @@ export class IonRippleEffect {
}
-export declare interface IonRow extends Components.IonRow {}
+export declare interface IonRippleEffect extends Components.IonRippleEffect {}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-row',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonRow {
protected el: HTMLElement;
@@ -1771,43 +1837,11 @@ export class IonRow {
}
}
-import type { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core';
-export declare interface IonSearchbar extends Components.IonSearchbar {
- /**
- * Emitted when the `value` of the `ion-searchbar` element has changed.
- */
- ionInput: EventEmitter>;
- /**
- * The `ionChange` event is fired for `` elements when the user
-modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-event is not necessarily fired for each alteration to an element's value.
-The `ionChange` event is fired when the element loses focus after its value
-has been modified. This includes modifications made when clicking the clear
-or cancel buttons.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the cancel button is clicked.
- */
- ionCancel: EventEmitter>;
- /**
- * Emitted when the clear input button is clicked.
- */
- ionClear: EventEmitter>;
- /**
- * Emitted when the input loses focus.
- */
- ionBlur: EventEmitter>;
- /**
- * Emitted when the input has focus.
- */
- ionFocus: EventEmitter>;
+export declare interface IonRow extends Components.IonRow {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
methods: ['setFocus', 'getInputElement']
})
@@ -1815,7 +1849,8 @@ or cancel buttons.
selector: 'ion-searchbar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
})
export class IonSearchbar {
protected el: HTMLElement;
@@ -1826,25 +1861,52 @@ export class IonSearchbar {
}
}
-import type { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core';
-export declare interface IonSegment extends Components.IonSegment {
- /**
- * Emitted when the value property has changed and any
-dragging pointer has been released from `ion-segment`.
- */
- ionChange: EventEmitter>;
+import type { SearchbarChangeEventDetail as IIonSearchbarSearchbarChangeEventDetail } from '@ionic/core';
+
+export declare interface IonSearchbar extends Components.IonSearchbar {
+ /**
+ * Emitted when the `value` of the `ion-searchbar` element has changed.
+ */
+ ionInput: EventEmitter>;
+ /**
+ * The `ionChange` event is fired for `` elements when the user
+modifies the element's value. Unlike the `ionInput` event, the `ionChange`
+event is not necessarily fired for each alteration to an element's value.
+
+The `ionChange` event is fired when the element loses focus after its value
+has been modified. This includes modifications made when clicking the clear
+or cancel buttons.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the cancel button is clicked.
+ */
+ ionCancel: EventEmitter>;
+ /**
+ * Emitted when the clear input button is clicked.
+ */
+ ionClear: EventEmitter>;
+ /**
+ * Emitted when the input loses focus.
+ */
+ ionBlur: EventEmitter>;
+ /**
+ * Emitted when the input has focus.
+ */
+ ionFocus: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
})
@Component({
selector: 'ion-segment',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
})
export class IonSegment {
protected el: HTMLElement;
@@ -1856,17 +1918,26 @@ export class IonSegment {
}
-export declare interface IonSegmentButton extends Components.IonSegmentButton {}
+import type { SegmentChangeEventDetail as IIonSegmentSegmentChangeEventDetail } from '@ionic/core';
+
+export declare interface IonSegment extends Components.IonSegment {
+ /**
+ * Emitted when the value property has changed and any
+dragging pointer has been released from `ion-segment`.
+ */
+ ionChange: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled', 'layout', 'mode', 'type', 'value']
})
@Component({
selector: 'ion-segment-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled', 'layout', 'mode', 'type', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'layout', 'mode', 'type', 'value'],
})
export class IonSegmentButton {
protected el: HTMLElement;
@@ -1876,33 +1947,11 @@ export class IonSegmentButton {
}
}
-import type { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core';
-export declare interface IonSelect extends Components.IonSelect {
- /**
- * Emitted when the value has changed.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the selection is cancelled.
- */
- ionCancel: EventEmitter>;
- /**
- * Emitted when the overlay is dismissed.
- */
- ionDismiss: EventEmitter>;
- /**
- * Emitted when the select has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the select loses focus.
- */
- ionBlur: EventEmitter>;
-}
+export declare interface IonSegmentButton extends Components.IonSegmentButton {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
methods: ['open']
})
@@ -1910,7 +1959,8 @@ export declare interface IonSelect extends Components.IonSelect {
selector: 'ion-select',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
})
export class IonSelect {
protected el: HTMLElement;
@@ -1922,17 +1972,41 @@ export class IonSelect {
}
-export declare interface IonSelectOption extends Components.IonSelectOption {}
+import type { SelectChangeEventDetail as IIonSelectSelectChangeEventDetail } from '@ionic/core';
+
+export declare interface IonSelect extends Components.IonSelect {
+ /**
+ * Emitted when the value has changed.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the selection is cancelled.
+ */
+ ionCancel: EventEmitter>;
+ /**
+ * Emitted when the overlay is dismissed.
+ */
+ ionDismiss: EventEmitter>;
+ /**
+ * Emitted when the select has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the select loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled', 'value']
})
@Component({
selector: 'ion-select-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'value'],
})
export class IonSelectOption {
protected el: HTMLElement;
@@ -1943,17 +2017,18 @@ export class IonSelectOption {
}
-export declare interface IonSkeletonText extends Components.IonSkeletonText {}
+export declare interface IonSelectOption extends Components.IonSelectOption {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated']
})
@Component({
selector: 'ion-skeleton-text',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated'],
})
export class IonSkeletonText {
protected el: HTMLElement;
@@ -1964,17 +2039,18 @@ export class IonSkeletonText {
}
-export declare interface IonSpinner extends Components.IonSpinner {}
+export declare interface IonSkeletonText extends Components.IonSkeletonText {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'duration', 'name', 'paused']
})
@Component({
selector: 'ion-spinner',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'duration', 'name', 'paused']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'duration', 'name', 'paused'],
})
export class IonSpinner {
protected el: HTMLElement;
@@ -1985,23 +2061,18 @@ export class IonSpinner {
}
-export declare interface IonSplitPane extends Components.IonSplitPane {
- /**
- * Expression to be called when the split-pane visibility has changed
- */
- ionSplitPaneVisible: EventEmitter>;
+export declare interface IonSpinner extends Components.IonSpinner {}
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['contentId', 'disabled', 'when']
})
@Component({
selector: 'ion-split-pane',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['contentId', 'disabled', 'when']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['contentId', 'disabled', 'when'],
})
export class IonSplitPane {
protected el: HTMLElement;
@@ -2013,17 +2084,23 @@ export class IonSplitPane {
}
-export declare interface IonTabBar extends Components.IonTabBar {}
+export declare interface IonSplitPane extends Components.IonSplitPane {
+ /**
+ * Expression to be called when the split-pane visibility has changed
+ */
+ ionSplitPaneVisible: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode', 'selectedTab', 'translucent']
})
@Component({
selector: 'ion-tab-bar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode', 'selectedTab', 'translucent']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'selectedTab', 'translucent'],
})
export class IonTabBar {
protected el: HTMLElement;
@@ -2034,17 +2111,18 @@ export class IonTabBar {
}
-export declare interface IonTabButton extends Components.IonTabButton {}
+export declare interface IonTabBar extends Components.IonTabBar {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
})
@Component({
selector: 'ion-tab-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
})
export class IonTabButton {
protected el: HTMLElement;
@@ -2055,17 +2133,18 @@ export class IonTabButton {
}
-export declare interface IonText extends Components.IonText {}
+export declare interface IonTabButton extends Components.IonTabButton {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-text',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonText {
protected el: HTMLElement;
@@ -2075,39 +2154,11 @@ export class IonText {
}
}
-import type { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core';
-import type { TextareaInputEventDetail as ITextareaTextareaInputEventDetail } from '@ionic/core';
-export declare interface IonTextarea extends Components.IonTextarea {
- /**
- * The `ionChange` event is fired for `` elements when the user
-modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-event is not necessarily fired for each alteration to an element's value.
-The `ionChange` event is fired when the element loses focus after its value
-has been modified.
- */
- ionChange: EventEmitter>;
- /**
- * The `ionInput` event fires when the `value` of an `` element
-has been changed.
+export declare interface IonText extends Components.IonText {}
-When `clearOnEdit` is enabled, the `ionInput` event will be fired when
-the user clears the textarea by performing a keydown event.
- */
- ionInput: EventEmitter>;
- /**
- * Emitted when the input loses focus.
- */
- ionBlur: EventEmitter>;
- /**
- * Emitted when the input has focus.
- */
- ionFocus: EventEmitter>;
-
-}
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
methods: ['setFocus', 'getInputElement']
})
@@ -2115,7 +2166,8 @@ the user clears the textarea by performing a keydown event.
selector: 'ion-textarea',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
})
export class IonTextarea {
protected el: HTMLElement;
@@ -2127,15 +2179,46 @@ export class IonTextarea {
}
-export declare interface IonThumbnail extends Components.IonThumbnail {}
+import type { TextareaChangeEventDetail as IIonTextareaTextareaChangeEventDetail } from '@ionic/core';
+import type { TextareaInputEventDetail as IIonTextareaTextareaInputEventDetail } from '@ionic/core';
+
+export declare interface IonTextarea extends Components.IonTextarea {
+ /**
+ * The `ionChange` event is fired for `` elements when the user
+modifies the element's value. Unlike the `ionInput` event, the `ionChange`
+event is not necessarily fired for each alteration to an element's value.
+
+The `ionChange` event is fired when the element loses focus after its value
+has been modified.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * The `ionInput` event fires when the `value` of an `` element
+has been changed.
+
+When `clearOnEdit` is enabled, the `ionInput` event will be fired when
+the user clears the textarea by performing a keydown event.
+ */
+ ionInput: EventEmitter>;
+ /**
+ * Emitted when the input loses focus.
+ */
+ ionBlur: EventEmitter>;
+ /**
+ * Emitted when the input has focus.
+ */
+ ionFocus: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined
})
@Component({
selector: 'ion-thumbnail',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: ''
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
})
export class IonThumbnail {
protected el: HTMLElement;
@@ -2146,17 +2229,18 @@ export class IonThumbnail {
}
-export declare interface IonTitle extends Components.IonTitle {}
+export declare interface IonThumbnail extends Components.IonThumbnail {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'size']
})
@Component({
selector: 'ion-title',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'size']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'size'],
})
export class IonTitle {
protected el: HTMLElement;
@@ -2166,49 +2250,11 @@ export class IonTitle {
}
}
-import type { OverlayEventDetail as IToastOverlayEventDetail } from '@ionic/core';
-export declare interface IonToast extends Components.IonToast {
- /**
- * Emitted after the toast has presented.
- */
- ionToastDidPresent: EventEmitter>;
- /**
- * Emitted before the toast has presented.
- */
- ionToastWillPresent: EventEmitter>;
- /**
- * Emitted before the toast has dismissed.
- */
- ionToastWillDismiss: EventEmitter>;
- /**
- * Emitted after the toast has dismissed.
- */
- ionToastDidDismiss: EventEmitter>;
- /**
- * Emitted after the toast has presented.
-Shorthand for ionToastWillDismiss.
- */
- didPresent: EventEmitter>;
- /**
- * Emitted before the toast has presented.
-Shorthand for ionToastWillPresent.
- */
- willPresent: EventEmitter>;
- /**
- * Emitted before the toast has dismissed.
-Shorthand for ionToastWillDismiss.
- */
- willDismiss: EventEmitter>;
- /**
- * Emitted after the toast has dismissed.
-Shorthand for ionToastDidDismiss.
- */
- didDismiss: EventEmitter>;
-}
+export declare interface IonTitle extends Components.IonTitle {}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
})
@@ -2216,7 +2262,8 @@ Shorthand for ionToastDidDismiss.
selector: 'ion-toast',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
})
export class IonToast {
protected el: HTMLElement;
@@ -2227,33 +2274,58 @@ export class IonToast {
}
}
-import type { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
-export declare interface IonToggle extends Components.IonToggle {
- /**
- * Emitted when the user switches the toggle on or off. Does not emit
-when programmatically changing the value of the `checked` property.
- */
- ionChange: EventEmitter>;
- /**
- * Emitted when the toggle has focus.
- */
- ionFocus: EventEmitter>;
- /**
- * Emitted when the toggle loses focus.
- */
- ionBlur: EventEmitter>;
+import type { OverlayEventDetail as IIonToastOverlayEventDetail } from '@ionic/core';
+
+export declare interface IonToast extends Components.IonToast {
+ /**
+ * Emitted after the toast has presented.
+ */
+ ionToastDidPresent: EventEmitter>;
+ /**
+ * Emitted before the toast has presented.
+ */
+ ionToastWillPresent: EventEmitter>;
+ /**
+ * Emitted before the toast has dismissed.
+ */
+ ionToastWillDismiss: EventEmitter>;
+ /**
+ * Emitted after the toast has dismissed.
+ */
+ ionToastDidDismiss: EventEmitter>;
+ /**
+ * Emitted after the toast has presented.
+Shorthand for ionToastWillDismiss.
+ */
+ didPresent: EventEmitter>;
+ /**
+ * Emitted before the toast has presented.
+Shorthand for ionToastWillPresent.
+ */
+ willPresent: EventEmitter>;
+ /**
+ * Emitted before the toast has dismissed.
+Shorthand for ionToastWillDismiss.
+ */
+ willDismiss: EventEmitter>;
+ /**
+ * Emitted after the toast has dismissed.
+Shorthand for ionToastDidDismiss.
+ */
+ didDismiss: EventEmitter>;
}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
})
@Component({
selector: 'ion-toggle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
})
export class IonToggle {
protected el: HTMLElement;
@@ -2265,17 +2337,34 @@ export class IonToggle {
}
-export declare interface IonToolbar extends Components.IonToolbar {}
+import type { ToggleChangeEventDetail as IIonToggleToggleChangeEventDetail } from '@ionic/core';
+
+export declare interface IonToggle extends Components.IonToggle {
+ /**
+ * Emitted when the user switches the toggle on or off. Does not emit
+when programmatically changing the value of the `checked` property.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * Emitted when the toggle has focus.
+ */
+ ionFocus: EventEmitter>;
+ /**
+ * Emitted when the toggle loses focus.
+ */
+ ionBlur: EventEmitter>;
+}
+
@ProxyCmp({
- defineCustomElementFn: undefined,
inputs: ['color', 'mode']
})
@Component({
selector: 'ion-toolbar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['color', 'mode']
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
})
export class IonToolbar {
protected el: HTMLElement;
@@ -2284,3 +2373,8 @@ export class IonToolbar {
this.el = r.nativeElement;
}
}
+
+
+export declare interface IonToolbar extends Components.IonToolbar {}
+
+
diff --git a/core/package-lock.json b/core/package-lock.json
index 3a1f78ddc8..26773453ec 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -9,7 +9,7 @@
"version": "7.0.0-beta.0",
"license": "MIT",
"dependencies": {
- "@stencil/core": "^2.18.0",
+ "@stencil/core": "^3.0.0",
"ionicons": "^6.1.1",
"tslib": "^2.1.0"
},
@@ -21,10 +21,10 @@
"@playwright/test": "^1.29.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
- "@stencil/angular-output-target": "^0.4.0",
- "@stencil/react-output-target": "^0.2.1",
- "@stencil/sass": "^2.0.0",
- "@stencil/vue-output-target": "^0.6.2",
+ "@stencil/angular-output-target": "^0.5.0",
+ "@stencil/react-output-target": "^0.4.0",
+ "@stencil/sass": "^2.0.3",
+ "@stencil/vue-output-target": "^0.7.0",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
"@types/swiper": "5.4.0",
@@ -1593,51 +1593,51 @@
}
},
"node_modules/@stencil/angular-output-target": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
- "integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.5.0.tgz",
+ "integrity": "sha512-U2I6dZdL8hvnogafG9IwtYRaAns5fQMacjee/3WNMRMYagrpz7R6cDdX4O0U8q6jks1ej91GchgZsQOVE9UcKg==",
"dev": true,
"peerDependencies": {
- "@stencil/core": "^2.9.0"
+ "@stencil/core": "^2.9.0 || ^3.0.0-beta.0"
}
},
"node_modules/@stencil/core": {
- "version": "2.18.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.0.tgz",
- "integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.0.0.tgz",
+ "integrity": "sha512-MYhrOlnzAtBUJH0FEggaP2pwm5GUvkB4wYRpZZFtUzGXAPamvrsreUf8QsGe0C4NdFdk8NlUauFxEEGE3z1+Sw==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
- "node": ">=12.10.0",
+ "node": ">=14.10.0",
"npm": ">=6.0.0"
}
},
"node_modules/@stencil/react-output-target": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
- "integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.4.0.tgz",
+ "integrity": "sha512-X7XW6aHSU7ZypkFj4wX/XL7ROj2GXcdTL+Emo1mKNg5laBcuTVtt8zPR4ERG/grq8ec8wav+FxBuSlQ3cH0qcg==",
"dev": true,
"peerDependencies": {
- "@stencil/core": "^2.9.0"
+ "@stencil/core": "^2.9.0 || ^3.0.0-beta.0"
}
},
"node_modules/@stencil/sass": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.0.tgz",
- "integrity": "sha512-Be7Tz7YJnMzloot0aG3m2wTVt9Dg0rjOU+ZVx49ts9+hyeW+NEmvSWPv6bhypblRXbSGik2Cc3AYboTma4Qpgg==",
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz",
+ "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==",
"dev": true,
"peerDependencies": {
- "@stencil/core": ">=2.0.0"
+ "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
}
},
"node_modules/@stencil/vue-output-target": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz",
- "integrity": "sha512-Oh7SLFbOUchCSCbGe/Dqal2xSYPKCFQiVKnvzvS0dsHP/XS7rfHqp3qptW6JCp9lBoo3wmmBurHfldqxhLlnag==",
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.7.0.tgz",
+ "integrity": "sha512-iPEgnT2z6HsfWVRWVZk5C1AaMZnbJjB+c/hvtWoO7B3aErTJB8Up6oFk/t3IRsr12aNuZ4fUra0FEDx9WweH0Q==",
"dev": true,
"peerDependencies": {
- "@stencil/core": "^2.9.0"
+ "@stencil/core": "^2.9.0 || ^3.0.0-beta.0"
}
},
"node_modules/@stylelint/postcss-css-in-js": {
@@ -5323,6 +5323,18 @@
"@stencil/core": "^2.18.0"
}
},
+ "node_modules/ionicons/node_modules/@stencil/core": {
+ "version": "2.22.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+ "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
+ "bin": {
+ "stencil": "bin/stencil"
+ },
+ "engines": {
+ "node": ">=12.10.0",
+ "npm": ">=6.0.0"
+ }
+ },
"node_modules/is-alphabetical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -11612,35 +11624,35 @@
}
},
"@stencil/angular-output-target": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
- "integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.5.0.tgz",
+ "integrity": "sha512-U2I6dZdL8hvnogafG9IwtYRaAns5fQMacjee/3WNMRMYagrpz7R6cDdX4O0U8q6jks1ej91GchgZsQOVE9UcKg==",
"dev": true,
"requires": {}
},
"@stencil/core": {
- "version": "2.18.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.0.tgz",
- "integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg=="
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.0.0.tgz",
+ "integrity": "sha512-MYhrOlnzAtBUJH0FEggaP2pwm5GUvkB4wYRpZZFtUzGXAPamvrsreUf8QsGe0C4NdFdk8NlUauFxEEGE3z1+Sw=="
},
"@stencil/react-output-target": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
- "integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.4.0.tgz",
+ "integrity": "sha512-X7XW6aHSU7ZypkFj4wX/XL7ROj2GXcdTL+Emo1mKNg5laBcuTVtt8zPR4ERG/grq8ec8wav+FxBuSlQ3cH0qcg==",
"dev": true,
"requires": {}
},
"@stencil/sass": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.0.tgz",
- "integrity": "sha512-Be7Tz7YJnMzloot0aG3m2wTVt9Dg0rjOU+ZVx49ts9+hyeW+NEmvSWPv6bhypblRXbSGik2Cc3AYboTma4Qpgg==",
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz",
+ "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==",
"dev": true,
"requires": {}
},
"@stencil/vue-output-target": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz",
- "integrity": "sha512-Oh7SLFbOUchCSCbGe/Dqal2xSYPKCFQiVKnvzvS0dsHP/XS7rfHqp3qptW6JCp9lBoo3wmmBurHfldqxhLlnag==",
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.7.0.tgz",
+ "integrity": "sha512-iPEgnT2z6HsfWVRWVZk5C1AaMZnbJjB+c/hvtWoO7B3aErTJB8Up6oFk/t3IRsr12aNuZ4fUra0FEDx9WweH0Q==",
"dev": true,
"requires": {}
},
@@ -14354,6 +14366,13 @@
"integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
"requires": {
"@stencil/core": "^2.18.0"
+ },
+ "dependencies": {
+ "@stencil/core": {
+ "version": "2.22.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+ "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
+ }
}
},
"is-alphabetical": {
diff --git a/core/package.json b/core/package.json
index 1710963e69..25ba94a4a6 100644
--- a/core/package.json
+++ b/core/package.json
@@ -31,7 +31,7 @@
"loader/"
],
"dependencies": {
- "@stencil/core": "^2.18.0",
+ "@stencil/core": "^3.0.0",
"ionicons": "^6.1.1",
"tslib": "^2.1.0"
},
@@ -43,10 +43,10 @@
"@playwright/test": "^1.29.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
- "@stencil/angular-output-target": "^0.4.0",
- "@stencil/react-output-target": "^0.2.1",
- "@stencil/sass": "^2.0.0",
- "@stencil/vue-output-target": "^0.6.2",
+ "@stencil/angular-output-target": "^0.5.0",
+ "@stencil/react-output-target": "^0.4.0",
+ "@stencil/sass": "^2.0.3",
+ "@stencil/vue-output-target": "^0.7.0",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
"@types/swiper": "5.4.0",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 0808efebd8..f36d92330f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -5,14 +5,78 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, FrameworkDelegate, InputChangeEventDetail, InputInputEventDetail, ItemReorderEventDetail, MenuChangeEventDetail, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextareaInputEventDetail, TextFieldTypes, TitleSelectedDatesFormatter, ToastButton, ToastPosition, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
+import { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
+import { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
+import { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
+import { OverlayEventDetail } from "./utils/overlays-interface";
import { IonicSafeString } from "./utils/sanitization";
+import { AlertButton, AlertInput } from "./components/alert/alert-interface";
+import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
+import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
+import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
+import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+import { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { SpinnerTypes } from "./components/spinner/spinner-configs";
+import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
import { CounterFormatter } from "./components/item/item-interface";
+import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
+import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
+import { ViewController } from "./components/nav/view-controller";
+import { PickerButton, PickerColumn } from "./components/picker/picker-interface";
import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
-import { PinFormatter } from "./components/range/range-interface";
+import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
+import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
+import { RefresherEventDetail } from "./components/refresher/refresher-interface";
+import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
import { NavigationHookCallback } from "./components/route/route-interface";
-import { SelectCompareFn } from "./components/select/select-interface";
+import { SearchbarChangeEventDetail } from "./components/searchbar/searchbar-interface";
+import { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
+import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
+import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
+import { ToastButton, ToastPosition } from "./components/toast/toast-interface";
+import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
+export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
+export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
+export { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
+export { OverlayEventDetail } from "./utils/overlays-interface";
+export { IonicSafeString } from "./utils/sanitization";
+export { AlertButton, AlertInput } from "./components/alert/alert-interface";
+export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
+export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
+export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
+export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+export { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { SpinnerTypes } from "./components/spinner/spinner-configs";
+export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { CounterFormatter } from "./components/item/item-interface";
+export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
+export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
+export { ViewController } from "./components/nav/view-controller";
+export { PickerButton, PickerColumn } from "./components/picker/picker-interface";
+export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
+export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
+export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
+export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
+export { RefresherEventDetail } from "./components/refresher/refresher-interface";
+export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+export { NavigationHookCallback } from "./components/route/route-interface";
+export { SearchbarChangeEventDetail } from "./components/searchbar/searchbar-interface";
+export { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
+export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
+export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
+export { ToastButton, ToastPosition } from "./components/toast/toast-interface";
+export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
export namespace Components {
interface IonAccordion {
/**
diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
index 4cd6935dc1..4844edd8e8 100644
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -2,9 +2,10 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { AccordionGroupChangeEventDetail } from '../../interface';
import { printIonWarning } from '../../utils/logging';
+import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 9c03cf924f..56732bb0cb 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -2,14 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type {
- ActionSheetButton,
- AnimationBuilder,
- CssClassMap,
- FrameworkDelegate,
- OverlayEventDetail,
- OverlayInterface,
-} from '../../interface';
+import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
import type { Gesture } from '../../utils/gesture';
import { createButtonActiveGesture } from '../../utils/gesture/button-active';
import {
@@ -23,8 +16,10 @@ import {
present,
safeCall,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import { getClassMap } from '../../utils/theme';
+import type { ActionSheetButton } from './action-sheet-interface';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 9dfc9046ec..1724de0bd6 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -2,15 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AlertButton,
- AlertInput,
- AnimationBuilder,
- CssClassMap,
- OverlayEventDetail,
- OverlayInterface,
- FrameworkDelegate,
-} from '../../interface';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
import type { Gesture } from '../../utils/gesture';
import { createButtonActiveGesture } from '../../utils/gesture/button-active';
import {
@@ -24,10 +16,12 @@ import {
present,
safeCall,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
+import type { AlertButton, AlertInput } from './alert-interface';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index a0500a721a..264b1919f9 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -3,10 +3,13 @@ import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, BreadcrumbCollapsedClickEventDetail, Color, RouterDirection } from '../../interface';
+import type { AnimationBuilder, Color } from '../../interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAriaAttributes } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
+import type { RouterDirection } from '../router/utils/interface';
+
+import type { BreadcrumbCollapsedClickEventDetail } from './breadcrumb-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 266d3ad7c4..10850fab17 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -2,8 +2,9 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { BreadcrumbCollapsedClickEventDetail, Color } from '../../interface';
+import type { Color } from '../../interface';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { BreadcrumbCollapsedClickEventDetail } from '../breadcrumb/breadcrumb-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 6947efaa74..e9d0203649 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -2,12 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
+import type { AnimationBuilder, Color } from '../../interface';
import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAriaAttributes, hasShadowDom } from '../../utils/helpers';
import { printIonWarning } from '../../utils/logging';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
+import type { RouterDirection } from '../router/utils/interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 96bb8d2d78..641c745559 100644
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -2,11 +2,12 @@ import type { ComponentInterface } from '@stencil/core';
import { Element, Component, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, Mode, RouterDirection } from '../../interface';
+import type { AnimationBuilder, Color, Mode } from '../../interface';
import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAttributes } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
+import type { RouterDirection } from '../router/utils/interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 22b4bc4bcb..68391778a5 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
import { getIonMode } from '../../global/ionic-global';
-import type { CheckboxChangeEventDetail, Color, Mode, StyleEventDetail } from '../../interface';
+import type { Color, Mode, StyleEventDetail } from '../../interface';
import type { LegacyFormController } from '../../utils/forms';
import { createLegacyFormController } from '../../utils/forms';
import type { Attributes } from '../../utils/helpers';
@@ -11,6 +11,8 @@ import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '../../ut
import { printIonWarning } from '../../utils/logging';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { CheckboxChangeEventDetail } from './checkbox-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 99f50d5c89..a22d4760fc 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -2,12 +2,14 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, ScrollBaseDetail, ScrollDetail } from '../../interface';
+import type { Color } from '../../interface';
import { componentOnReady } from '../../utils/helpers';
import { isPlatform } from '../../utils/platform';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
+
/**
* @slot - Content is placed in the scrollable area if provided without a slot.
* @slot fixed - Should be used for fixed content that should not scroll.
diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts
index 7071b28696..09281d57ca 100644
--- a/core/src/components/datetime/datetime-interface.ts
+++ b/core/src/components/datetime/datetime-interface.ts
@@ -1,7 +1,3 @@
-export interface DatetimeOptions {
- tmp?: string;
-}
-
export interface DatetimeChangeEventDetail {
value?: string | string[] | null;
}
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index f52878e528..6d75f87b18 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -3,15 +3,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTa
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
-import type {
- Color,
- DatetimePresentation,
- DatetimeChangeEventDetail,
- DatetimeParts,
- Mode,
- StyleEventDetail,
- TitleSelectedDatesFormatter,
-} from '../../interface';
+import type { Color, Mode, StyleEventDetail } from '../../interface';
import { startFocusVisible } from '../../utils/focus-visible';
import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
import { printIonError, printIonWarning } from '../../utils/logging';
@@ -19,6 +11,12 @@ import { isRTL } from '../../utils/rtl';
import { createColorClasses } from '../../utils/theme';
import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
+import type {
+ TitleSelectedDatesFormatter,
+ DatetimePresentation,
+ DatetimeChangeEventDetail,
+ DatetimeParts,
+} from './datetime-interface';
import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
import {
generateMonths,
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index b39d67c8dc..a98052897c 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -3,11 +3,12 @@ import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
import { close } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
+import type { AnimationBuilder, Color } from '../../interface';
import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { inheritAriaAttributes } from '../../utils/helpers';
import type { Attributes } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
+import type { RouterDirection } from '../router/utils/interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 10c2221575..27dfe0ecf8 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -3,9 +3,9 @@ import { Component, Host, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { SpinnerTypes } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
+import type { SpinnerTypes } from '../spinner/spinner-configs';
@Component({
tag: 'ion-infinite-scroll-content',
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 4c7f1975a6..124d83ea39 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -6,18 +6,12 @@ import { printIonWarning } from '@utils/logging';
import { closeCircle, closeSharp } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AutocompleteTypes,
- Color,
- InputChangeEventDetail,
- InputInputEventDetail,
- StyleEventDetail,
- TextFieldTypes,
-} from '../../interface';
+import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
import { getCounterText } from './input.utils';
/**
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index 2e40faf162..fcd84abcca 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -2,8 +2,8 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Side } from '../../interface';
import { isEndSide } from '../../utils/helpers';
+import type { Side } from '../menu/menu-interface';
@Component({
tag: 'ion-item-options',
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index 1c2a7c7548..abb8132f3e 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -2,9 +2,10 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Gesture, GestureDetail, Side } from '../../interface';
+import type { Gesture, GestureDetail } from '../../interface';
import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
import { isEndSide } from '../../utils/helpers';
+import type { Side } from '../menu/menu-interface';
const SWIPE_MARGIN = 30;
const ELASTIC_FACTOR = 0.55;
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index dffdc87fdb..1efd79c7cc 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -4,12 +4,13 @@ import { printIonError, printIonWarning } from '@utils/logging';
import { chevronForward } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
+import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAttributes, raf } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
import type { InputInputEventDetail } from '../input/input-interface';
+import type { RouterDirection } from '../router/utils/interface';
import type { CounterFormatter } from './item-interface';
diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts
index b96176583d..9dc7a1819a 100644
--- a/core/src/components/loading/loading-interface.ts
+++ b/core/src/components/loading/loading-interface.ts
@@ -1,5 +1,6 @@
-import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
+import type { AnimationBuilder, Mode } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
+import type { SpinnerTypes } from '../spinner/spinner-configs';
export interface LoadingOptions {
spinner?: SpinnerTypes | null;
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index c0db007a52..31ce51d3a1 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -3,13 +3,7 @@ import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stenci
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AnimationBuilder,
- FrameworkDelegate,
- OverlayEventDetail,
- OverlayInterface,
- SpinnerTypes,
-} from '../../interface';
+import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
import { raf } from '../../utils/helpers';
import {
BACKDROP,
@@ -20,9 +14,11 @@ import {
createDelegateController,
createTriggerController,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
+import type { SpinnerTypes } from '../spinner/spinner-configs';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
diff --git a/core/src/components/menu/menu-interface.ts b/core/src/components/menu/menu-interface.ts
index 12d871c473..87813331a3 100644
--- a/core/src/components/menu/menu-interface.ts
+++ b/core/src/components/menu/menu-interface.ts
@@ -1,4 +1,6 @@
-import type { Animation, Side } from '../../interface';
+import type { Animation } from '../../interface';
+
+export type Side = 'start' | 'end';
export interface MenuI {
el: HTMLIonMenuElement;
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 178491bef9..d17a982a41 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -3,7 +3,7 @@ import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Wa
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { Animation, Gesture, GestureDetail, MenuChangeEventDetail, MenuI, Side } from '../../interface';
+import type { Animation, Gesture, GestureDetail } from '../../interface';
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import type { Attributes } from '../../utils/helpers';
@@ -11,6 +11,8 @@ import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '../../
import { menuController } from '../../utils/menu-controller';
import { getOverlay } from '../../utils/overlays';
+import type { MenuChangeEventDetail, MenuI, Side } from './menu-interface';
+
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index 3abf6c34b0..caba8e3e74 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -1,7 +1,8 @@
-import type { Animation, ModalAnimationOptions } from '../../../interface';
+import type { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
import { getElementRoot } from '../../../utils/helpers';
import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
+import type { ModalAnimationOptions } from '../modal-interface';
import { createSheetEnterAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index 7823ec3367..85b4aaccda 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -1,7 +1,8 @@
-import type { Animation, ModalAnimationOptions } from '../../../interface';
+import type { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
import { getElementRoot } from '../../../utils/helpers';
import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
+import type { ModalAnimationOptions } from '../modal-interface';
import { createSheetLeaveAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts
index 3d13a19006..6197df74f4 100644
--- a/core/src/components/modal/animations/md.enter.ts
+++ b/core/src/components/modal/animations/md.enter.ts
@@ -1,6 +1,7 @@
-import type { Animation, ModalAnimationOptions } from '../../../interface';
+import type { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
import { getElementRoot } from '../../../utils/helpers';
+import type { ModalAnimationOptions } from '../modal-interface';
import { createSheetEnterAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/md.leave.ts b/core/src/components/modal/animations/md.leave.ts
index 998d7435ac..cd3bb69379 100644
--- a/core/src/components/modal/animations/md.leave.ts
+++ b/core/src/components/modal/animations/md.leave.ts
@@ -1,6 +1,7 @@
-import type { Animation, ModalAnimationOptions } from '../../../interface';
+import type { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
import { getElementRoot } from '../../../utils/helpers';
+import type { ModalAnimationOptions } from '../modal-interface';
import { createSheetLeaveAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/sheet.ts b/core/src/components/modal/animations/sheet.ts
index b5e40ebf16..ae02b65ea0 100644
--- a/core/src/components/modal/animations/sheet.ts
+++ b/core/src/components/modal/animations/sheet.ts
@@ -1,5 +1,5 @@
-import type { ModalAnimationOptions } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
+import type { ModalAnimationOptions } from '../modal-interface';
import { getBackdropValueForSheet } from '../utils';
export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index d6251e652d..56bc92b8c3 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -10,9 +10,6 @@ import type {
ComponentRef,
FrameworkDelegate,
Gesture,
- ModalBreakpointChangeEventDetail,
- ModalHandleBehavior,
- OverlayEventDetail,
OverlayInterface,
} from '../../interface';
import { findIonContent, printIonContentErrorMsg } from '../../utils/content';
@@ -32,6 +29,7 @@ import {
present,
createTriggerController,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import { getClassMap } from '../../utils/theme';
import { deepReady } from '../../utils/transition';
@@ -42,6 +40,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
import { createSheetGesture } from './gestures/sheet';
import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
+import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './modal-interface';
import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
// TODO(FW-2832): types
diff --git a/core/src/components/nav-link/nav-link-utils.ts b/core/src/components/nav-link/nav-link-utils.ts
index 3e60d017c4..a9c555fac3 100644
--- a/core/src/components/nav-link/nav-link-utils.ts
+++ b/core/src/components/nav-link/nav-link-utils.ts
@@ -1,4 +1,5 @@
-import type { AnimationBuilder, ComponentProps, NavComponent } from '../../interface';
+import type { AnimationBuilder, ComponentProps } from '../../interface';
+import type { NavComponent } from '../nav/nav-interface';
import type { RouterDirection } from '../router/utils/interface';
export const navLink = (
diff --git a/core/src/components/nav-link/nav-link.tsx b/core/src/components/nav-link/nav-link.tsx
index 49828dc289..db5ba4a5b2 100644
--- a/core/src/components/nav-link/nav-link.tsx
+++ b/core/src/components/nav-link/nav-link.tsx
@@ -1,7 +1,9 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h } from '@stencil/core';
-import type { AnimationBuilder, ComponentProps, NavComponent, RouterDirection } from '../../interface';
+import type { AnimationBuilder, ComponentProps } from '../../interface';
+import type { NavComponent } from '../nav/nav-interface';
+import type { RouterDirection } from '../router/utils/interface';
import { navLink } from './nav-link-utils';
diff --git a/core/src/components/nav/nav-interface.ts b/core/src/components/nav/nav-interface.ts
index 625aa453df..caacb39b2e 100644
--- a/core/src/components/nav/nav-interface.ts
+++ b/core/src/components/nav/nav-interface.ts
@@ -1,13 +1,6 @@
-import type {
- Animation,
- AnimationBuilder,
- ComponentProps,
- ComponentRef,
- FrameworkDelegate,
- Mode,
-} from '../../interface';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
-import { ViewController } from './view-controller';
+import type { ViewController } from './view-controller';
// TODO(FW-2832): types
@@ -54,18 +47,6 @@ export interface NavOptions extends RouterOutletOptions {
viewIsReady?: (enteringEl: HTMLElement) => Promise;
}
-export type Page = new (...args: any[]) => any;
-
-export type TransitionResolveFn = (
- hasCompleted: boolean,
- requiresTransition: boolean,
- enteringName?: string,
- leavingName?: string,
- direction?: string
-) => void;
-
-export type TransitionRejectFn = (rejectReason: any, transition?: Animation) => void;
-
export type TransitionDoneFn = (
hasCompleted: boolean,
requiresTransition: boolean,
@@ -94,5 +75,3 @@ export interface TransitionInstruction {
export interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
-
-export { ViewController };
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index 11ab62b1fd..1516c731ce 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -3,30 +3,23 @@ import { Build, Component, Element, Event, Method, Prop, Watch, h } from '@stenc
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type {
- Animation,
- AnimationBuilder,
- ComponentProps,
- FrameworkDelegate,
- Gesture,
- NavComponent,
- NavComponentWithProps,
- NavOptions,
- NavOutlet,
- NavResult,
- RouteID,
- RouteWrite,
- RouterDirection,
- TransitionDoneFn,
- TransitionInstruction,
- ViewController,
-} from '../../interface';
+import type { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture } from '../../interface';
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { assert } from '../../utils/helpers';
import type { TransitionOptions } from '../../utils/transition';
import { lifecycle, setPageHidden, transition } from '../../utils/transition';
+import type { NavOutlet, RouteID, RouteWrite, RouterDirection } from '../router/utils/interface';
import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from './constants';
+import type {
+ NavComponent,
+ NavComponentWithProps,
+ NavOptions,
+ NavResult,
+ TransitionDoneFn,
+ TransitionInstruction,
+} from './nav-interface';
+import type { ViewController } from './view-controller';
import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from './view-controller';
@Component({
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index d61e5b446f..7b8549a3e4 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -2,10 +2,11 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Gesture, GestureDetail, PickerColumn } from '../../interface';
+import type { Gesture, GestureDetail } from '../../interface';
import { clamp } from '../../utils/helpers';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
import { getClassMap } from '../../utils/theme';
+import type { PickerColumn } from '../picker/picker-interface';
/**
* @internal
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index acab41bca8..049dae6a20 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -2,15 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AnimationBuilder,
- CssClassMap,
- OverlayEventDetail,
- OverlayInterface,
- PickerButton,
- PickerColumn,
- FrameworkDelegate,
-} from '../../interface';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
import {
createDelegateController,
createTriggerController,
@@ -22,10 +14,12 @@ import {
present,
safeCall,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import { getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
+import type { PickerButton, PickerColumn } from './picker-interface';
// TODO(FW-2832): types
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index f234dd385e..1f67ad6341 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -3,22 +3,11 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
import { printIonWarning } from '@utils/logging';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AnimationBuilder,
- ComponentProps,
- ComponentRef,
- FrameworkDelegate,
- OverlayEventDetail,
- PopoverInterface,
- PopoverSize,
- PositionAlign,
- PositionReference,
- PositionSide,
- TriggerAction,
-} from '../../interface';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers';
import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present } from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import { isPlatform } from '../../utils/platform';
import { getClassMap } from '../../utils/theme';
import { deepReady } from '../../utils/transition';
@@ -27,6 +16,14 @@ import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
+import type {
+ PopoverInterface,
+ PopoverSize,
+ PositionAlign,
+ PositionReference,
+ PositionSide,
+ TriggerAction,
+} from './popover-interface';
import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from './utils';
// TODO(FW-2832): types
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index 7912fd10cf..f730f64a35 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { RadioGroupChangeEventDetail } from '../../interface';
+
+import type { RadioGroupChangeEventDetail } from './radio-group-interface';
@Component({
tag: 'ion-radio-group',
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index d89f9248b2..4a7927dec9 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -2,17 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type {
- Color,
- Gesture,
- GestureDetail,
- KnobName,
- RangeChangeEventDetail,
- RangeKnobMoveEndEventDetail,
- RangeKnobMoveStartEventDetail,
- RangeValue,
- StyleEventDetail,
-} from '../../interface';
+import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface';
import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
import type { LegacyFormController } from '../../utils/forms';
import { createLegacyFormController } from '../../utils/forms';
@@ -22,7 +12,14 @@ import { printIonWarning } from '../../utils/logging';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
-import type { PinFormatter } from './range-interface';
+import type {
+ KnobName,
+ RangeChangeEventDetail,
+ RangeKnobMoveEndEventDetail,
+ RangeKnobMoveStartEventDetail,
+ RangeValue,
+ PinFormatter,
+} from './range-interface';
// TODO(FW-2832): types
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 71602e0503..b7c73ba51b 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -4,10 +4,10 @@ import { arrowDown, caretBackSharp } from 'ionicons/icons';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { SpinnerTypes } from '../../interface';
import { isPlatform } from '../../utils/platform';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
+import type { SpinnerTypes } from '../spinner/spinner-configs';
import { SPINNERS } from '../spinner/spinner-configs';
@Component({
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 1c18c8d55d..f5b394a572 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
+import type { Animation, Gesture, GestureDetail } from '../../interface';
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import {
getScrollElement,
@@ -13,6 +13,7 @@ import {
import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '../../utils/helpers';
import { hapticImpact } from '../../utils/native/haptic';
+import type { RefresherEventDetail } from './refresher-interface';
import {
createPullingAnimation,
createSnapBackAnimation,
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 5d898cfbfd..db6272f22e 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -2,11 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
+import type { Gesture, GestureDetail } from '../../interface';
import { findClosestIonContent, getScrollElement } from '../../utils/content';
import { raf } from '../../utils/helpers';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
+import type { ItemReorderEventDetail } from './reorder-group-interface';
+
// TODO(FW-2832): types
const enum ReorderGroupState {
diff --git a/core/src/components/router-link/router-link.tsx b/core/src/components/router-link/router-link.tsx
index 6ffc127973..d395561e9e 100644
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -2,8 +2,9 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
+import type { AnimationBuilder, Color } from '../../interface';
import { createColorClasses, openURL } from '../../utils/theme';
+import type { RouterDirection } from '../router/utils/interface';
@Component({
tag: 'ion-router-link',
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 3cd9290e78..358bc267ce 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -10,17 +10,13 @@ import type {
ComponentRef,
FrameworkDelegate,
Gesture,
- NavOutlet,
- RouteID,
- RouteWrite,
- RouterDirection,
- RouterOutletOptions,
- SwipeGestureHandler,
} from '../../interface';
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { shallowEqualStringMap, hasLazyBuild } from '../../utils/helpers';
import { transition } from '../../utils/transition';
+import type { RouterOutletOptions, SwipeGestureHandler } from '../nav/nav-interface';
+import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/utils/interface';
@Component({
tag: 'ion-router-outlet',
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index 97aa84de6b..0daf2eeac8 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -1,19 +1,14 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Listen, Method, Prop } from '@stencil/core';
-import type {
- AnimationBuilder,
- BackButtonEvent,
- RouteChain,
- RouterDirection,
- RouterEventDetail,
-} from '../../interface';
+import type { AnimationBuilder, BackButtonEvent } from '../../interface';
import { debounce } from '../../utils/helpers';
import type { NavigationHookResult } from '../route/route-interface';
import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';
import { printRedirects, printRoutes } from './utils/debug';
import { readNavState, waitUntilNavNode, writeNavState } from './utils/dom';
+import type { RouteChain, RouterDirection, RouterEventDetail } from './utils/interface';
import { findChainForIDs, findChainForSegments, findRouteRedirect } from './utils/matching';
import { readRedirects, readRoutes } from './utils/parser';
import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from './utils/path';
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index 7a4ea0e905..528a873d59 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,7 +1,8 @@
-import type { AnimationBuilder, NavOutletElement, RouteChain, RouteID, RouterDirection } from '../../../interface';
+import type { AnimationBuilder } from '../../../interface';
import { componentOnReady } from '../../../utils/helpers';
import { ROUTER_INTENT_NONE } from './constants';
+import type { NavOutletElement, RouteChain, RouteID, RouterDirection } from './interface';
/**
* Activates the passed route chain.
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index c584ec43ca..ab3ee5a508 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -4,11 +4,13 @@ import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } f
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { AutocompleteTypes, Color, SearchbarChangeEventDetail, StyleEventDetail } from '../../interface';
+import type { AutocompleteTypes, Color, StyleEventDetail } from '../../interface';
import { debounceEvent, raf } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses } from '../../utils/theme';
+import type { SearchbarChangeEventDetail } from './searchbar-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
diff --git a/core/src/components/segment-button/segment-interface.ts b/core/src/components/segment-button/segment-button-interface.ts
similarity index 100%
rename from core/src/components/segment-button/segment-interface.ts
rename to core/src/components/segment-button/segment-button-interface.ts
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 710af58c3f..a1cf1af5d5 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -2,12 +2,13 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, Method, State, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { SegmentButtonLayout } from '../../interface';
import type { ButtonInterface } from '../../utils/element-interface';
import type { Attributes } from '../../utils/helpers';
import { addEventListener, removeEventListener, inheritAttributes } from '../../utils/helpers';
import { hostContext } from '../../utils/theme';
+import type { SegmentButtonLayout } from './segment-button-interface';
+
let ids = 0;
/**
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index daad9ef8fd..a7ea321177 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -3,12 +3,14 @@ import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTa
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
+import type { Color, StyleEventDetail } from '../../interface';
import type { Gesture, GestureDetail } from '../../utils/gesture';
import { pointerCoord } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { SegmentChangeEventDetail } from './segment-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index f9a0ca811a..56da639a70 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -2,10 +2,11 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Host, Listen, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { SelectPopoverOption } from '../../interface';
import { safeCall } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
+import type { SelectPopoverOption } from './select-popover-interface';
+
// TODO(FW-2832): types
/**
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 57fd4cdfc4..dd165aae4f 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -14,20 +14,18 @@ import type {
AlertOptions,
Color,
CssClassMap,
- OverlaySelect,
PopoverOptions,
- SelectChangeEventDetail,
- SelectInterface,
- SelectPopoverOption,
StyleEventDetail,
} from '../../interface';
import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '../../utils/helpers';
import type { Attributes } from '../../utils/helpers';
import { actionSheetController, alertController, popoverController } from '../../utils/overlays';
+import type { OverlaySelect } from '../../utils/overlays-interface';
import { createColorClasses, hostContext } from '../../utils/theme';
import { watchForOptions } from '../../utils/watch-options';
+import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
-import type { SelectCompareFn } from './select-interface';
+import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from './select-interface';
// TODO(FW-2832): types
diff --git a/core/src/components/spinner/spinner-interface.ts b/core/src/components/spinner/spinner-interface.ts
index 3b1aee845e..0037163378 100644
--- a/core/src/components/spinner/spinner-interface.ts
+++ b/core/src/components/spinner/spinner-interface.ts
@@ -1,5 +1,3 @@
-export { SpinnerTypes } from './spinner-configs';
-
export interface SpinnerConfigs {
[spinnerName: string]: SpinnerConfig;
}
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 90548e6b08..7c01664c7b 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -3,10 +3,12 @@ import { Component, Host, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, SpinnerConfig, SpinnerTypes } from '../../interface';
+import type { Color } from '../../interface';
import { createColorClasses } from '../../utils/theme';
+import type { SpinnerTypes } from './spinner-configs';
import { SPINNERS } from './spinner-configs';
+import type { SpinnerConfig } from './spinner-interface';
@Component({
tag: 'ion-spinner',
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 0448d98ecd..327f54f09c 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -2,11 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, TabBarChangedEventDetail } from '../../interface';
+import type { Color } from '../../interface';
import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
import { createColorClasses } from '../../utils/theme';
+import type { TabBarChangedEventDetail } from './tab-bar-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index b86b4f1def..fdfb442362 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -3,10 +3,14 @@ import { Component, Element, Event, Host, Listen, Prop, h } from '@stencil/core'
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import type { AnchorInterface } from '../../utils/element-interface';
import type { Attributes } from '../../utils/helpers';
import { inheritAttributes } from '../../utils/helpers';
+import type {
+ TabBarChangedEventDetail,
+ TabButtonClickEventDetail,
+ TabButtonLayout,
+} from '../tab-bar/tab-bar-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index a12f4e31db..6b34990127 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -1,7 +1,8 @@
import type { EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
-import type { NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
+import type { NavOutlet, RouteID, RouteWrite } from '../router/utils/interface';
+import type { TabButtonClickEventDetail } from '../tab-bar/tab-bar-interface';
/**
* @slot - Content is placed between the named slots if provided without a slot.
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 092bfc2010..56209bee03 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, StyleEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail } from '../../interface';
+import type { Color, StyleEventDetail } from '../../interface';
import type { LegacyFormController } from '../../utils/forms';
import { createLegacyFormController } from '../../utils/forms';
import type { Attributes } from '../../utils/helpers';
@@ -11,6 +11,8 @@ import { printIonWarning } from '../../utils/logging';
import { createColorClasses, hostContext } from '../../utils/theme';
import { getCounterText } from '../input/input.utils';
+import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 5e2b89dd12..4ed49d0571 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -3,16 +3,7 @@ import { Watch, Component, Element, Event, h, Host, Method, Prop } from '@stenci
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type {
- AnimationBuilder,
- Color,
- CssClassMap,
- OverlayEventDetail,
- OverlayInterface,
- ToastButton,
- FrameworkDelegate,
- ToastPosition,
-} from '../../interface';
+import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
import {
createDelegateController,
createTriggerController,
@@ -23,6 +14,7 @@ import {
present,
safeCall,
} from '../../utils/overlays';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
import { createColorClasses, getClassMap } from '../../utils/theme';
@@ -31,6 +23,7 @@ import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
+import type { ToastButton, ToastPosition } from './toast-interface';
// TODO(FW-2832): types
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 03405b53fe..09950d3cd6 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -5,7 +5,7 @@ import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons'
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
+import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail } from '../../interface';
import type { LegacyFormController } from '../../utils/forms';
import { createLegacyFormController } from '../../utils/forms';
import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '../../utils/helpers';
@@ -15,6 +15,8 @@ import { hapticSelection } from '../../utils/native/haptic';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
+import type { ToggleChangeEventDetail } from './toggle-interface';
+
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 43438ca33f..e460d67558 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -3,39 +3,35 @@ import type { Components as IoniconsComponents, JSX as IoniconsJSX } from 'ionic
export * from './components';
export * from './index';
-export * from './components/accordion-group/accordion-group-interface';
-export * from './components/alert/alert-interface';
-export * from './components/action-sheet/action-sheet-interface';
-export * from './components/breadcrumb/breadcrumb-interface';
-export * from './components/content/content-interface';
-export * from './components/checkbox/checkbox-interface';
-export * from './components/datetime/datetime-interface';
-export * from './components/infinite-scroll/infinite-scroll-interface';
-export * from './components/input/input-interface';
-export * from './components/item/item-interface';
-export * from './components/item-sliding/item-sliding-interface';
-export * from './components/loading/loading-interface';
-export * from './components/menu/menu-interface';
-export * from './components/modal/modal-interface';
-export * from './components/nav/nav-interface';
-export * from './components/picker/picker-interface';
-export * from './components/popover/popover-interface';
-export * from './components/radio-group/radio-group-interface';
-export * from './components/range/range-interface';
-export * from './components/route/route-interface';
-export * from './components/router/utils/interface';
-export * from './components/refresher/refresher-interface';
-export * from './components/reorder-group/reorder-group-interface';
-export * from './components/searchbar/searchbar-interface';
-export * from './components/segment/segment-interface';
-export * from './components/select/select-interface';
-export * from './components/select-popover/select-popover-interface';
-export * from './components/spinner/spinner-interface';
-export * from './components/tabs/tabs-interface';
-export * from './components/tab-bar/tab-bar-interface';
-export * from './components/textarea/textarea-interface';
-export * from './components/toast/toast-interface';
-export * from './components/toggle/toggle-interface';
+export { AccordionGroupCustomEvent } from './components/accordion-group/accordion-group-interface';
+export { AlertOptions } from './components/alert/alert-interface';
+export { ActionSheetOptions } from './components/action-sheet/action-sheet-interface';
+export { BreadcrumbCustomEvent } from './components/breadcrumb/breadcrumb-interface';
+export { ScrollBaseCustomEvent, ScrollCallback, ScrollCustomEvent } from './components/content/content-interface';
+export { CheckboxCustomEvent } from './components/checkbox/checkbox-interface';
+export { DatetimeCustomEvent } from './components/datetime/datetime-interface';
+export { InfiniteScrollCustomEvent } from './components/infinite-scroll/infinite-scroll-interface';
+export { InputCustomEvent } from './components/input/input-interface';
+export { CounterFormatter } from './components/item/item-interface';
+export { ItemSlidingCustomEvent } from './components/item-sliding/item-sliding-interface';
+export { LoadingOptions } from './components/loading/loading-interface';
+export { MenuCustomEvent } from './components/menu/menu-interface';
+export { ModalOptions, ModalCustomEvent } from './components/modal/modal-interface';
+export { NavDirection, NavCustomEvent } from './components/nav/nav-interface';
+export { PickerOptions, PickerColumnOption } from './components/picker/picker-interface';
+export { PopoverOptions } from './components/popover/popover-interface';
+export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
+export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
+export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
+export { RefresherCustomEvent } from './components/refresher/refresher-interface';
+export { ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface';
+export { SearchbarCustomEvent } from './components/searchbar/searchbar-interface';
+export { SegmentCustomEvent } from './components/segment/segment-interface';
+export { SelectCustomEvent, SelectCompareFn } from './components/select/select-interface';
+export { TabsCustomEvent } from './components/tabs/tabs-interface';
+export { TextareaCustomEvent } from './components/textarea/textarea-interface';
+export { ToastOptions } from './components/toast/toast-interface';
+export { ToggleCustomEvent } from './components/toggle/toggle-interface';
// Types from utils
export {
@@ -47,8 +43,8 @@ export {
AnimationKeyFrames,
AnimationLifecycle,
} from './utils/animation/animation-interface';
-export * from './utils/overlays-interface';
-export * from './global/config';
+export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface';
+export { Config, config } from './global/config';
export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
@@ -122,7 +118,6 @@ export type TextFieldTypes =
| 'week'
| 'month'
| 'datetime-local';
-export type Side = 'start' | 'end';
export type PredefinedColors =
| 'primary'
| 'secondary'
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 3069923b6b..e604185134 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -1,4 +1,6 @@
-import type { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface';
+import type { SpinnerTypes } from '../components/spinner/spinner-configs';
+import type { TabButtonLayout } from '../components/tab-bar/tab-bar-interface';
+import type { AnimationBuilder, Mode } from '../interface';
import type { PlatformConfig } from './platform';
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index d0897135bf..ee5d8bcd10 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -1,6 +1,6 @@
import type { EventEmitter } from '@stencil/core';
-import type { Side } from '../interface';
+import type { Side } from '../components/menu/menu-interface';
// TODO(FW-2832): types
diff --git a/core/src/utils/menu-controller/animations/base.ts b/core/src/utils/menu-controller/animations/base.ts
index 56066e8504..679adcaf37 100644
--- a/core/src/utils/menu-controller/animations/base.ts
+++ b/core/src/utils/menu-controller/animations/base.ts
@@ -1,5 +1,5 @@
-import type { Animation } from '../../../interface';
import { createAnimation } from '../../animation/animation';
+import type { Animation } from '../../animation/animation-interface';
/**
* baseAnimation
diff --git a/core/src/utils/menu-controller/animations/overlay.ts b/core/src/utils/menu-controller/animations/overlay.ts
index 16dd1c52b2..b7ae84b317 100644
--- a/core/src/utils/menu-controller/animations/overlay.ts
+++ b/core/src/utils/menu-controller/animations/overlay.ts
@@ -1,6 +1,7 @@
+import type { MenuI } from '../../../components/menu/menu-interface';
import { getIonMode } from '../../../global/ionic-global';
-import type { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
+import type { Animation } from '../../animation/animation-interface';
import { baseAnimation } from './base';
diff --git a/core/src/utils/menu-controller/animations/push.ts b/core/src/utils/menu-controller/animations/push.ts
index 8e4a87335a..9cd5ecba40 100644
--- a/core/src/utils/menu-controller/animations/push.ts
+++ b/core/src/utils/menu-controller/animations/push.ts
@@ -1,6 +1,7 @@
+import type { MenuI } from '../../../components/menu/menu-interface';
import { getIonMode } from '../../../global/ionic-global';
-import type { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
+import type { Animation } from '../../animation/animation-interface';
import { baseAnimation } from './base';
diff --git a/core/src/utils/menu-controller/animations/reveal.ts b/core/src/utils/menu-controller/animations/reveal.ts
index e9622f72ff..b7200bd710 100644
--- a/core/src/utils/menu-controller/animations/reveal.ts
+++ b/core/src/utils/menu-controller/animations/reveal.ts
@@ -1,6 +1,7 @@
+import type { MenuI } from '../../../components/menu/menu-interface';
import { getIonMode } from '../../../global/ionic-global';
-import type { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
+import type { Animation } from '../../animation/animation-interface';
import { baseAnimation } from './base';
diff --git a/core/src/utils/menu-controller/index.ts b/core/src/utils/menu-controller/index.ts
index fe9e517150..d331405a08 100644
--- a/core/src/utils/menu-controller/index.ts
+++ b/core/src/utils/menu-controller/index.ts
@@ -1,4 +1,5 @@
-import type { AnimationBuilder, BackButtonEvent, MenuI } from '../../interface';
+import type { MenuI } from '../../components/menu/menu-interface';
+import type { AnimationBuilder, BackButtonEvent } from '../../interface';
import { MENU_BACK_BUTTON_PRIORITY } from '../hardware-back-button';
import { componentOnReady } from '../helpers';
diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts
index af3e3a831e..28b45c65ac 100644
--- a/core/src/utils/transition/index.ts
+++ b/core/src/utils/transition/index.ts
@@ -6,7 +6,8 @@ import {
LIFECYCLE_WILL_ENTER,
LIFECYCLE_WILL_LEAVE,
} from '../../components/nav/constants';
-import type { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
+import type { NavOptions, NavDirection } from '../../components/nav/nav-interface';
+import type { Animation, AnimationBuilder } from '../animation/animation-interface';
import { raf } from '../helpers';
const iosTransitionAnimation = () => import('./ios.transition');
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 30cc57a1e4..09b84d41d2 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -9,6 +9,7 @@ import { apiSpecGenerator } from './scripts/api-spec-generator';
export const config: Config = {
autoprefixCss: true,
+ sourceMap: false,
namespace: 'Ionic',
bundles: [
{ components: ['ion-action-sheet'] },
diff --git a/packages/react/src/components/react-component-lib/createComponent.tsx b/packages/react/src/components/react-component-lib/createComponent.tsx
index a5e3c37092..7c7415a29d 100644
--- a/packages/react/src/components/react-component-lib/createComponent.tsx
+++ b/packages/react/src/components/react-component-lib/createComponent.tsx
@@ -1,12 +1,6 @@
import React, { createElement } from 'react';
-import {
- attachProps,
- createForwardRef,
- dashToPascalCase,
- isCoveredByReact,
- mergeRefs,
-} from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
export interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise;
@@ -27,9 +21,9 @@ export const createReactComponent = <
ReactComponentContext?: React.Context,
manipulatePropsFunction?: (
originalProps: StencilReactInternalProps,
- propsToPass: any,
+ propsToPass: any
) => ExpandedPropsTypes,
- defineCustomElement?: () => void,
+ defineCustomElement?: () => void
) => {
if (defineCustomElement !== undefined) {
defineCustomElement();
@@ -58,17 +52,25 @@ export const createReactComponent = <
render() {
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
- let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+ let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
+ const value = (cProps as any)[name];
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2).toLowerCase();
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
- (acc as any)[name] = (cProps as any)[name];
+ acc[name] = value;
}
} else {
- (acc as any)[name] = (cProps as any)[name];
+ // we should only render strings, booleans, and numbers as attrs in html.
+ // objects, functions, arrays etc get synced via properties on mount.
+ const type = typeof value;
+
+ if (type === 'string' || type === 'boolean' || type === 'number') {
+ acc[camelToDashCase(name)] = value;
+ }
}
return acc;
- }, {});
+ }, {} as ExpandedPropsTypes);
if (manipulatePropsFunction) {
propsToPass = manipulatePropsFunction(this.props, propsToPass);
diff --git a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx
index 3203c0deaf..288c38dd54 100644
--- a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx
+++ b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx
@@ -2,13 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { OverlayEventDetail } from './interfaces';
-import {
- StencilReactForwardedRef,
- attachProps,
- dashToPascalCase,
- defineCustomElement,
- setRef,
-} from './utils';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
interface OverlayElement extends HTMLElement {
present: () => Promise;
@@ -24,10 +18,7 @@ export interface ReactOverlayProps {
onWillPresent?: (event: CustomEvent) => void;
}
-export const createOverlayComponent = <
- OverlayComponent extends object,
- OverlayType extends OverlayElement
->(
+export const createOverlayComponent = (
tagName: string,
controller: { create: (options: any) => Promise },
customElement?: any
@@ -79,7 +70,7 @@ export const createOverlayComponent = <
if (this.props.onDidDismiss) {
this.props.onDidDismiss(event);
}
- setRef(this.props.forwardedRef, null)
+ setRef(this.props.forwardedRef, null);
}
shouldComponentUpdate(nextProps: Props) {
@@ -113,25 +104,14 @@ export const createOverlayComponent = <
}
async present(prevProps?: Props) {
- const {
- children,
- isOpen,
- onDidDismiss,
- onDidPresent,
- onWillDismiss,
- onWillPresent,
- ...cProps
- } = this.props;
+ const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
const elementProps = {
...cProps,
ref: this.props.forwardedRef,
[didDismissEventName]: this.handleDismiss,
- [didPresentEventName]: (e: CustomEvent) =>
- this.props.onDidPresent && this.props.onDidPresent(e),
- [willDismissEventName]: (e: CustomEvent) =>
- this.props.onWillDismiss && this.props.onWillDismiss(e),
- [willPresentEventName]: (e: CustomEvent) =>
- this.props.onWillPresent && this.props.onWillPresent(e),
+ [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+ [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+ [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
};
this.overlay = await controller.create({
diff --git a/packages/react/src/components/react-component-lib/utils/case.ts b/packages/react/src/components/react-component-lib/utils/case.ts
index 047704f13d..786689dc98 100644
--- a/packages/react/src/components/react-component-lib/utils/case.ts
+++ b/packages/react/src/components/react-component-lib/utils/case.ts
@@ -4,5 +4,4 @@ export const dashToPascalCase = (str: string) =>
.split('-')
.map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
.join('');
-export const camelToDashCase = (str: string) =>
- str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
diff --git a/packages/react/src/components/react-component-lib/utils/index.tsx b/packages/react/src/components/react-component-lib/utils/index.tsx
index 821d067433..a66bd02de7 100644
--- a/packages/react/src/components/react-component-lib/utils/index.tsx
+++ b/packages/react/src/components/react-component-lib/utils/index.tsx
@@ -11,10 +11,10 @@ export type StencilReactForwardedRef = ((instance: T | null) => void) | React
export const setRef = (ref: StencilReactForwardedRef | React.Ref | undefined, value: any) => {
if (typeof ref === 'function') {
- ref(value)
+ ref(value);
} else if (ref != null) {
// Cast as a MutableRef so we can assign current
- (ref as React.MutableRefObject).current = value
+ (ref as React.MutableRefObject).current = value;
}
};
@@ -22,19 +22,16 @@ export const mergeRefs = (
...refs: (StencilReactForwardedRef | React.Ref | undefined)[]
): React.RefCallback => {
return (value: any) => {
- refs.forEach(ref => {
- setRef(ref, value)
- })
- }
+ refs.forEach((ref) => {
+ setRef(ref, value);
+ });
+ };
};
-export const createForwardRef = (
- ReactComponent: any,
- displayName: string,
-) => {
+export const createForwardRef = (ReactComponent: any, displayName: string) => {
const forwardRef = (
props: StencilReactExternalProps,
- ref: StencilReactForwardedRef,
+ ref: StencilReactForwardedRef
) => {
return ;
};
@@ -44,14 +41,10 @@ export const createForwardRef = (
};
export const defineCustomElement = (tagName: string, customElement: any) => {
- if (
- customElement !== undefined &&
- typeof customElements !== 'undefined' &&
- !customElements.get(tagName)
- ) {
+ if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
customElements.define(tagName, customElement);
}
-}
+};
export * from './attachProps';
export * from './case';
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index e48debacfa..9381dc917b 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -9,7 +9,7 @@ const MODEL_VALUE = 'modelValue';
const ROUTER_LINK_VALUE = 'routerLink';
const NAV_MANAGER = 'navManager';
const ROUTER_PROP_PREFIX = 'router';
-
+const ARIA_PROP_PREFIX = 'aria';
/**
* Starting in Vue 3.1.0, all properties are
* added as keys to the props object, even if
@@ -30,26 +30,31 @@ const getComponentClasses = (classes: unknown) => {
return (classes as string)?.split(' ') || [];
};
-const getElementClasses = (ref: Ref, componentClasses: Set, defaultClasses: string[] = []) => {
- return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
- .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+const getElementClasses = (
+ ref: Ref