diff --git a/core/package-lock.json b/core/package-lock.json
index 068866c9e9..6c352a9581 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -25,7 +25,7 @@
"@playwright/test": "^1.36.1",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
- "@stencil/angular-output-target": "^0.7.1",
+ "@stencil/angular-output-target": "^0.8.1",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.4",
"@stencil/vue-output-target": "^0.8.6",
@@ -1625,9 +1625,9 @@
}
},
"node_modules/@stencil/angular-output-target": {
- "version": "0.7.1",
- "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
- "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.1.tgz",
+ "integrity": "sha512-nO04lC7JxUT0bi2sTvBslz6aut1dVOvYRckf29a0l08XnRsDzIfT5e6f+c5HL9vCl4UFRq8fTQ+Og/G7Hlwtng==",
"dev": true,
"peerDependencies": {
"@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -11513,9 +11513,9 @@
}
},
"@stencil/angular-output-target": {
- "version": "0.7.1",
- "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
- "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.1.tgz",
+ "integrity": "sha512-nO04lC7JxUT0bi2sTvBslz6aut1dVOvYRckf29a0l08XnRsDzIfT5e6f+c5HL9vCl4UFRq8fTQ+Og/G7Hlwtng==",
"dev": true,
"requires": {}
},
diff --git a/core/package.json b/core/package.json
index 735a09849b..57f3f1f09a 100644
--- a/core/package.json
+++ b/core/package.json
@@ -47,7 +47,7 @@
"@playwright/test": "^1.36.1",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
- "@stencil/angular-output-target": "^0.7.1",
+ "@stencil/angular-output-target": "^0.8.1",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.4",
"@stencil/vue-output-target": "^0.8.6",
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 44157e62d9..300a8fd634 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -7,6 +7,56 @@ import { vueOutputTarget } from '@stencil/vue-output-target';
// @ts-ignore
import { apiSpecGenerator } from './scripts/api-spec-generator';
+const componentCorePackage = '@ionic/core';
+
+const getAngularOutputTargets = () => {
+ const excludeComponents = [
+ // overlays that accept user components
+ 'ion-modal',
+ 'ion-popover',
+
+ // navigation
+ 'ion-router',
+ 'ion-route',
+ 'ion-route-redirect',
+ 'ion-router-link',
+ 'ion-router-outlet',
+ 'ion-nav',
+ 'ion-back-button',
+
+ // tabs
+ 'ion-tabs',
+ 'ion-tab',
+
+ // auxiliar
+ 'ion-picker-column',
+ ]
+ return [
+ angularOutputTarget({
+ componentCorePackage,
+ directivesProxyFile: '../packages/angular/src/directives/proxies.ts',
+ directivesArrayFile: '../packages/angular/src/directives/proxies-list.ts',
+ excludeComponents,
+ outputType: 'component',
+ }),
+ angularOutputTarget({
+ componentCorePackage,
+ directivesProxyFile: '../packages/angular/standalone/src/directives/proxies.ts',
+ excludeComponents: [
+ ...excludeComponents,
+ /**
+ * IonIcon is a special case because it does not come
+ * from the `@ionic/core` package, so generating proxies that
+ * are reliant on the CE build will reference the wrong
+ * import location.
+ */
+ 'ion-icon'
+ ],
+ outputType: 'standalone',
+ })
+ ];
+}
+
export const config: Config = {
autoprefixCss: true,
sourceMap: false,
@@ -61,7 +111,7 @@ export const config: Config = {
],
outputTargets: [
reactOutputTarget({
- componentCorePackage: '@ionic/core',
+ componentCorePackage,
includeImportCustomElements: true,
includePolyfills: false,
includeDefineCustomElements: false,
@@ -98,7 +148,7 @@ export const config: Config = {
]
}),
vueOutputTarget({
- componentCorePackage: '@ionic/core',
+ componentCorePackage,
includeImportCustomElements: true,
includePolyfills: false,
includeDefineCustomElements: false,
@@ -182,30 +232,7 @@ export const config: Config = {
// type: 'stats',
// file: 'stats.json'
// },
- angularOutputTarget({
- componentCorePackage: '@ionic/core',
- directivesProxyFile: '../packages/angular/src/directives/proxies.ts',
- directivesArrayFile: '../packages/angular/src/directives/proxies-list.ts',
- excludeComponents: [
- // overlays that accept user components
- 'ion-modal',
- 'ion-popover',
-
- // navigation
- 'ion-router',
- 'ion-route',
- 'ion-route-redirect',
- 'ion-router-link',
- 'ion-router-outlet',
-
- // tabs
- 'ion-tabs',
- 'ion-tab',
-
- // auxiliar
- 'ion-picker-column',
- ],
- }),
+ ...getAngularOutputTargets(),
],
buildEs5: 'prod',
testing: {
diff --git a/packages/angular/common/src/directives/navigation/back-button.ts b/packages/angular/common/src/directives/navigation/back-button.ts
index 7ec7136a8c..cdad44d165 100644
--- a/packages/angular/common/src/directives/navigation/back-button.ts
+++ b/packages/angular/common/src/directives/navigation/back-button.ts
@@ -1,4 +1,5 @@
-import { Directive, HostListener, Input, Optional, ElementRef, NgZone } from '@angular/core';
+import { HostListener, Input, Optional, ElementRef, NgZone, ChangeDetectorRef, Directive } from '@angular/core';
+import type { Components } from '@ionic/core';
import type { AnimationBuilder } from '@ionic/core/components';
import { Config } from '../../providers/config';
@@ -9,21 +10,23 @@ import { IonRouterOutlet } from './router-outlet';
const BACK_BUTTON_INPUTS = ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'];
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export declare interface IonBackButton extends Components.IonBackButton {}
+
@ProxyCmp({
inputs: BACK_BUTTON_INPUTS,
})
@Directive({
- selector: 'ion-back-button',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: BACK_BUTTON_INPUTS,
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonBackButtonDelegate {
+export class IonBackButton {
@Input()
- defaultHref: string | undefined | null;
+ defaultHref: string | undefined;
@Input()
- routerAnimation?: AnimationBuilder;
+ routerAnimation: AnimationBuilder | undefined;
protected el: HTMLElement;
@@ -32,8 +35,10 @@ export class IonBackButtonDelegate {
private navCtrl: NavController,
private config: Config,
private r: ElementRef,
- protected z: NgZone
+ protected z: NgZone,
+ c: ChangeDetectorRef
) {
+ c.detach();
this.el = this.r.nativeElement;
}
diff --git a/packages/angular/common/src/directives/navigation/nav-delegate.ts b/packages/angular/common/src/directives/navigation/nav.ts
similarity index 73%
rename from packages/angular/common/src/directives/navigation/nav-delegate.ts
rename to packages/angular/common/src/directives/navigation/nav.ts
index 58429961db..585bffc040 100644
--- a/packages/angular/common/src/directives/navigation/nav-delegate.ts
+++ b/packages/angular/common/src/directives/navigation/nav.ts
@@ -1,4 +1,5 @@
-import { ElementRef, Injector, Directive, EnvironmentInjector, NgZone } from '@angular/core';
+import { ElementRef, Injector, EnvironmentInjector, NgZone, ChangeDetectorRef, Directive } from '@angular/core';
+import type { Components } from '@ionic/core';
import { AngularDelegate } from '../../providers/angular-delegate';
import { ProxyCmp, proxyOutputs } from '../../utils/proxy';
@@ -21,25 +22,29 @@ const NAV_METHODS = [
'getPrevious',
];
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export declare interface IonNav extends Components.IonNav {}
+
@ProxyCmp({
inputs: NAV_INPUTS,
methods: NAV_METHODS,
})
@Directive({
- selector: 'ion-nav',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: NAV_INPUTS,
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class NavDelegate {
+export class IonNav {
protected el: HTMLElement;
constructor(
ref: ElementRef,
environmentInjector: EnvironmentInjector,
injector: Injector,
angularDelegate: AngularDelegate,
- protected z: NgZone
+ protected z: NgZone,
+ c: ChangeDetectorRef
) {
+ c.detach();
this.el = ref.nativeElement;
ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
diff --git a/packages/angular/common/src/index.ts b/packages/angular/common/src/index.ts
index a085304b89..cab9a8ea87 100644
--- a/packages/angular/common/src/index.ts
+++ b/packages/angular/common/src/index.ts
@@ -27,12 +27,12 @@ export { IonModal } from './overlays/modal';
export { IonRouterOutlet, provideComponentInputBinding } from './directives/navigation/router-outlet';
export type { StackEvent } from './directives/navigation/stack-utils';
-export { IonBackButtonDelegate } from './directives/navigation/back-button';
+export { IonBackButton } from './directives/navigation/back-button';
export {
RouterLinkDelegateDirective,
RouterLinkWithHrefDelegateDirective,
} from './directives/navigation/router-link-delegate';
-export { NavDelegate } from './directives/navigation/nav-delegate';
+export { IonNav } from './directives/navigation/nav';
export { IonTabs } from './directives/navigation/tabs';
export { ProxyCmp } from './utils/proxy';
diff --git a/packages/angular/src/directives/navigation/ion-back-button.ts b/packages/angular/src/directives/navigation/ion-back-button.ts
index 309a5cf53c..abfbebfeb3 100644
--- a/packages/angular/src/directives/navigation/ion-back-button.ts
+++ b/packages/angular/src/directives/navigation/ion-back-button.ts
@@ -1,20 +1,23 @@
-import { Directive, Optional, ElementRef, NgZone } from '@angular/core';
-import { IonBackButtonDelegate as IonBackButtonDelegateBase, NavController, Config } from '@ionic/angular/common';
+import { Optional, ElementRef, NgZone, ChangeDetectorRef, Component, ChangeDetectionStrategy } from '@angular/core';
+import { IonBackButton as IonBackButtonBase, NavController, Config } from '@ionic/angular/common';
import { IonRouterOutlet } from './ion-router-outlet';
-@Directive({
+@Component({
selector: 'ion-back-button',
+ template: '',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonBackButtonDelegateDirective extends IonBackButtonDelegateBase {
+export class IonBackButton extends IonBackButtonBase {
constructor(
@Optional() routerOutlet: IonRouterOutlet,
navCtrl: NavController,
config: Config,
r: ElementRef,
- z: NgZone
+ z: NgZone,
+ c: ChangeDetectorRef
) {
- super(routerOutlet, navCtrl, config, r, z);
+ super(routerOutlet, navCtrl, config, r, z, c);
}
}
diff --git a/packages/angular/src/directives/navigation/ion-nav.ts b/packages/angular/src/directives/navigation/ion-nav.ts
new file mode 100644
index 0000000000..c3dabc41d0
--- /dev/null
+++ b/packages/angular/src/directives/navigation/ion-nav.ts
@@ -0,0 +1,29 @@
+import {
+ ElementRef,
+ Injector,
+ EnvironmentInjector,
+ NgZone,
+ ChangeDetectorRef,
+ Component,
+ ChangeDetectionStrategy,
+} from '@angular/core';
+import { IonNav as IonNavBase, AngularDelegate } from '@ionic/angular/common';
+
+@Component({
+ selector: 'ion-nav',
+ template: '',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class IonNav extends IonNavBase {
+ constructor(
+ ref: ElementRef,
+ environmentInjector: EnvironmentInjector,
+ injector: Injector,
+ angularDelegate: AngularDelegate,
+ z: NgZone,
+ c: ChangeDetectorRef
+ ) {
+ super(ref, environmentInjector, injector, angularDelegate, z, c);
+ }
+}
diff --git a/packages/angular/src/directives/navigation/nav-delegate.ts b/packages/angular/src/directives/navigation/nav-delegate.ts
deleted file mode 100644
index 9d61cd5d65..0000000000
--- a/packages/angular/src/directives/navigation/nav-delegate.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Directive, ElementRef, Injector, EnvironmentInjector, NgZone } from '@angular/core';
-import { NavDelegate as NavDelegateBase, AngularDelegate } from '@ionic/angular/common';
-
-@Directive({
- selector: 'ion-nav',
-})
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class NavDelegate extends NavDelegateBase {
- constructor(
- ref: ElementRef,
- environmentInjector: EnvironmentInjector,
- injector: Injector,
- angularDelegate: AngularDelegate,
- z: NgZone
- ) {
- super(ref, environmentInjector, injector, angularDelegate, z);
- }
-}
diff --git a/packages/angular/src/directives/proxies-list.ts b/packages/angular/src/directives/proxies-list.ts
index 3eee90cbe8..a1d93f8d58 100644
--- a/packages/angular/src/directives/proxies-list.ts
+++ b/packages/angular/src/directives/proxies-list.ts
@@ -8,7 +8,6 @@ export const DIRECTIVES = [
d.IonAlert,
d.IonApp,
d.IonAvatar,
- d.IonBackButton,
d.IonBackdrop,
d.IonBadge,
d.IonBreadcrumb,
@@ -50,7 +49,6 @@ export const DIRECTIVES = [
d.IonMenu,
d.IonMenuButton,
d.IonMenuToggle,
- d.IonNav,
d.IonNavLink,
d.IonNote,
d.IonPicker,
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 7429a4cc60..1ac643ce19 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -230,28 +230,6 @@ export class IonAvatar {
export declare interface IonAvatar extends Components.IonAvatar {}
-@ProxyCmp({
- inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
-})
-@Component({
- selector: 'ion-back-button',
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: '',
- // 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;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- }
-}
-
-
-export declare interface IonBackButton extends Components.IonBackButton {}
-
-
@ProxyCmp({
inputs: ['stopPropagation', 'tappable', 'visible']
})
@@ -1395,39 +1373,6 @@ export class IonMenuToggle {
export declare interface IonMenuToggle extends Components.IonMenuToggle {}
-@ProxyCmp({
- inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
- methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
-})
-@Component({
- selector: 'ion-nav',
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: '',
- // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
-})
-export class IonNav {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']);
- }
-}
-
-
-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({
inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
})
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index b90483fa62..e4ce311aad 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -5,8 +5,8 @@ export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/
export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
export { IonTabs } from './directives/navigation/ion-tabs';
-export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
-export { NavDelegate } from './directives/navigation/nav-delegate';
+export { IonBackButton } from './directives/navigation/ion-back-button';
+export { IonNav } from './directives/navigation/ion-nav';
export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
export {
RouterLinkDelegateDirective as RouterLinkDelegate,
diff --git a/packages/angular/src/ionic-module.ts b/packages/angular/src/ionic-module.ts
index 251d78f591..285e14fe21 100644
--- a/packages/angular/src/ionic-module.ts
+++ b/packages/angular/src/ionic-module.ts
@@ -17,10 +17,10 @@ import {
SelectValueAccessorDirective,
TextValueAccessorDirective,
} from './directives/control-value-accessors';
-import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back-button';
+import { IonBackButton } from './directives/navigation/ion-back-button';
+import { IonNav } from './directives/navigation/ion-nav';
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
import { IonTabs } from './directives/navigation/ion-tabs';
-import { NavDelegate } from './directives/navigation/nav-delegate';
import {
RouterLinkDelegateDirective,
RouterLinkWithHrefDelegateDirective,
@@ -47,8 +47,8 @@ const DECLARATIONS = [
// navigation
IonTabs,
IonRouterOutlet,
- IonBackButtonDelegateDirective,
- NavDelegate,
+ IonBackButton,
+ IonNav,
RouterLinkDelegateDirective,
RouterLinkWithHrefDelegateDirective,
];
diff --git a/packages/angular/standalone/src/directives/angular-component-lib/utils.ts b/packages/angular/standalone/src/directives/angular-component-lib/utils.ts
new file mode 100644
index 0000000000..58ed93b7d3
--- /dev/null
+++ b/packages/angular/standalone/src/directives/angular-component-lib/utils.ts
@@ -0,0 +1,57 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+ const Prototype = Cmp.prototype;
+ 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) => {
+ Prototype[methodName] = function () {
+ const args = arguments;
+ 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)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+ 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 }) {
+ const decorator = function (cls: any) {
+ const { defineCustomElementFn, inputs, methods } = opts;
+
+ if (defineCustomElementFn !== undefined) {
+ defineCustomElementFn();
+ }
+
+ if (inputs) {
+ proxyInputs(cls, inputs);
+ }
+ if (methods) {
+ proxyMethods(cls, methods);
+ }
+ return cls;
+ };
+ return decorator;
+}
diff --git a/packages/angular/standalone/src/directives/icon.ts b/packages/angular/standalone/src/directives/icon.ts
new file mode 100644
index 0000000000..132a3a30b2
--- /dev/null
+++ b/packages/angular/standalone/src/directives/icon.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
+import { defineCustomElement as defineIonIcon } from 'ionicons/components/ion-icon.js';
+
+import { ProxyCmp } from './angular-component-lib/utils';
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonIcon,
+ inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
+})
+@Component({
+ selector: 'ion-icon',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
+ standalone: true,
+})
+export class IonIcon {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
new file mode 100644
index 0000000000..dde743002d
--- /dev/null
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -0,0 +1,3159 @@
+/* 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 type { Components } from '@ionic/core/components';
+
+import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
+import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
+import { defineCustomElement as defineIonActionSheet } from '@ionic/core/components/ion-action-sheet.js';
+import { defineCustomElement as defineIonAlert } from '@ionic/core/components/ion-alert.js';
+import { defineCustomElement as defineIonApp } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineIonAvatar } from '@ionic/core/components/ion-avatar.js';
+import { defineCustomElement as defineIonBackdrop } from '@ionic/core/components/ion-backdrop.js';
+import { defineCustomElement as defineIonBadge } from '@ionic/core/components/ion-badge.js';
+import { defineCustomElement as defineIonBreadcrumb } from '@ionic/core/components/ion-breadcrumb.js';
+import { defineCustomElement as defineIonBreadcrumbs } from '@ionic/core/components/ion-breadcrumbs.js';
+import { defineCustomElement as defineIonButton } from '@ionic/core/components/ion-button.js';
+import { defineCustomElement as defineIonButtons } from '@ionic/core/components/ion-buttons.js';
+import { defineCustomElement as defineIonCard } from '@ionic/core/components/ion-card.js';
+import { defineCustomElement as defineIonCardContent } from '@ionic/core/components/ion-card-content.js';
+import { defineCustomElement as defineIonCardHeader } from '@ionic/core/components/ion-card-header.js';
+import { defineCustomElement as defineIonCardSubtitle } from '@ionic/core/components/ion-card-subtitle.js';
+import { defineCustomElement as defineIonCardTitle } from '@ionic/core/components/ion-card-title.js';
+import { defineCustomElement as defineIonCheckbox } from '@ionic/core/components/ion-checkbox.js';
+import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js';
+import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
+import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
+import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js';
+import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
+import { defineCustomElement as defineIonFabButton } from '@ionic/core/components/ion-fab-button.js';
+import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineIonHeader } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
+import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineIonItemOption } from '@ionic/core/components/ion-item-option.js';
+import { defineCustomElement as defineIonItemOptions } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineIonItemSliding } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineIonLabel } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineIonListHeader } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineIonLoading } from '@ionic/core/components/ion-loading.js';
+import { defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineIonMenuButton } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineIonMenuToggle } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineIonNavLink } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineIonPicker } from '@ionic/core/components/ion-picker.js';
+import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineIonRadioGroup } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineIonRange } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineIonRefresherContent } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineIonReorder } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineIonReorderGroup } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineIonRippleEffect } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineIonSearchbar } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineIonSegment } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineIonTabBar } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement as defineIonTabButton } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineIonTextarea } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineIonThumbnail } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineIonToast } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+@ProxyCmp({
+ defineCustomElementFn: defineIonAccordion,
+ inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
+})
+@Component({
+ selector: 'ion-accordion',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
+ standalone: true,
+})
+export class IonAccordion {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonAccordion extends Components.IonAccordion {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonAccordionGroup,
+ inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
+})
+@Component({
+ selector: 'ion-accordion-group',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
+ standalone: true,
+})
+export class IonAccordionGroup {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange']);
+ }
+}
+
+import type { AccordionGroupChangeEventDetail as IIonAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonActionSheet,
+ inputs: [
+ 'animated',
+ 'backdropDismiss',
+ 'buttons',
+ 'cssClass',
+ 'enterAnimation',
+ 'header',
+ 'htmlAttributes',
+ 'isOpen',
+ 'keyboardClose',
+ 'leaveAnimation',
+ 'mode',
+ 'subHeader',
+ 'translucent',
+ 'trigger',
+ ],
+ methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+ selector: 'ion-action-sheet',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonActionSheet {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, [
+ 'ionActionSheetDidPresent',
+ 'ionActionSheetWillPresent',
+ 'ionActionSheetWillDismiss',
+ 'ionActionSheetDidDismiss',
+ 'didPresent',
+ 'willPresent',
+ 'willDismiss',
+ 'didDismiss',
+ ]);
+ }
+}
+
+import type { OverlayEventDetail as IIonActionSheetOverlayEventDetail } from '@ionic/core/components';
+
+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>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonAlert,
+ inputs: [
+ 'animated',
+ 'backdropDismiss',
+ 'buttons',
+ 'cssClass',
+ 'enterAnimation',
+ 'header',
+ 'htmlAttributes',
+ 'inputs',
+ 'isOpen',
+ 'keyboardClose',
+ 'leaveAnimation',
+ 'message',
+ 'mode',
+ 'subHeader',
+ 'translucent',
+ 'trigger',
+ ],
+ methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+ selector: 'ion-alert',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonAlert {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, [
+ 'ionAlertDidPresent',
+ 'ionAlertWillPresent',
+ 'ionAlertWillDismiss',
+ 'ionAlertDidDismiss',
+ 'didPresent',
+ 'willPresent',
+ 'willDismiss',
+ 'didDismiss',
+ ]);
+ }
+}
+
+import type { OverlayEventDetail as IIonAlertOverlayEventDetail } from '@ionic/core/components';
+
+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: defineIonApp,
+})
+@Component({
+ selector: 'ion-app',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonApp {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonApp extends Components.IonApp {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonAvatar,
+})
+@Component({
+ selector: 'ion-avatar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonAvatar {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonAvatar extends Components.IonAvatar {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonBackdrop,
+ inputs: ['stopPropagation', 'tappable', 'visible'],
+})
+@Component({
+ selector: 'ion-backdrop',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['stopPropagation', 'tappable', 'visible'],
+ standalone: true,
+})
+export class IonBackdrop {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionBackdropTap']);
+ }
+}
+
+export declare interface IonBackdrop extends Components.IonBackdrop {
+ /**
+ * Emitted when the backdrop is tapped.
+ */
+ ionBackdropTap: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonBadge,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-badge',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonBadge {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonBadge extends Components.IonBadge {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonBreadcrumb,
+ inputs: [
+ 'active',
+ 'color',
+ 'disabled',
+ 'download',
+ 'href',
+ 'mode',
+ 'rel',
+ 'routerAnimation',
+ 'routerDirection',
+ 'separator',
+ 'target',
+ ],
+})
+@Component({
+ selector: 'ion-breadcrumb',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'active',
+ 'color',
+ 'disabled',
+ 'download',
+ 'href',
+ 'mode',
+ 'rel',
+ 'routerAnimation',
+ 'routerDirection',
+ 'separator',
+ 'target',
+ ],
+ standalone: true,
+})
+export class IonBreadcrumb {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
+ }
+}
+
+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: defineIonBreadcrumbs,
+ inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
+})
+@Component({
+ selector: 'ion-breadcrumbs',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
+ standalone: true,
+})
+export class IonBreadcrumbs {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionCollapsedClick']);
+ }
+}
+
+import type { BreadcrumbCollapsedClickEventDetail as IIonBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core/components';
+
+export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
+ /**
+ * Emitted when the collapsed indicator is clicked on.
+ */
+ ionCollapsedClick: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonButton,
+ 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: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
+ }
+}
+
+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: defineIonButtons,
+ inputs: ['collapse'],
+})
+@Component({
+ selector: 'ion-buttons',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse'],
+ standalone: true,
+})
+export class IonButtons {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonButtons extends Components.IonButtons {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCard,
+ inputs: [
+ 'button',
+ 'color',
+ 'disabled',
+ 'download',
+ 'href',
+ 'mode',
+ 'rel',
+ 'routerAnimation',
+ 'routerDirection',
+ 'target',
+ 'type',
+ ],
+})
+@Component({
+ selector: 'ion-card',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'button',
+ 'color',
+ 'disabled',
+ 'download',
+ 'href',
+ 'mode',
+ 'rel',
+ 'routerAnimation',
+ 'routerDirection',
+ 'target',
+ 'type',
+ ],
+ standalone: true,
+})
+export class IonCard {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCard extends Components.IonCard {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCardContent,
+ inputs: ['mode'],
+})
+@Component({
+ selector: 'ion-card-content',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['mode'],
+ standalone: true,
+})
+export class IonCardContent {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCardContent extends Components.IonCardContent {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCardHeader,
+ inputs: ['color', 'mode', 'translucent'],
+})
+@Component({
+ selector: 'ion-card-header',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'translucent'],
+ standalone: true,
+})
+export class IonCardHeader {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCardHeader extends Components.IonCardHeader {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCardSubtitle,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-card-subtitle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonCardSubtitle {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCardTitle,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-card-title',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonCardTitle {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCardTitle extends Components.IonCardTitle {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCheckbox,
+ inputs: [
+ 'checked',
+ 'color',
+ 'disabled',
+ 'indeterminate',
+ 'justify',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'name',
+ 'value',
+ ],
+})
+@Component({
+ selector: 'ion-checkbox',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'checked',
+ 'color',
+ 'disabled',
+ 'indeterminate',
+ 'justify',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'name',
+ 'value',
+ ],
+ standalone: true,
+})
+export class IonCheckbox {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
+ }
+}
+
+import type { CheckboxChangeEventDetail as IIonCheckboxCheckboxChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonChip,
+ inputs: ['color', 'disabled', 'mode', 'outline'],
+})
+@Component({
+ selector: 'ion-chip',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'mode', 'outline'],
+ standalone: true,
+})
+export class IonChip {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonChip extends Components.IonChip {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonCol,
+ 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: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonCol {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonCol extends Components.IonCol {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonContent,
+ inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
+ methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'],
+})
+@Component({
+ selector: 'ion-content',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
+ standalone: true,
+})
+export class IonContent {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']);
+ }
+}
+
+import type { ScrollBaseDetail as IIonContentScrollBaseDetail } from '@ionic/core/components';
+import type { ScrollDetail as IIonContentScrollDetail } from '@ionic/core/components';
+
+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: defineIonDatetime,
+ inputs: [
+ 'cancelText',
+ 'clearText',
+ 'color',
+ 'dayValues',
+ 'disabled',
+ 'doneText',
+ 'firstDayOfWeek',
+ 'highlightedDates',
+ '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'],
+})
+@Component({
+ selector: 'ion-datetime',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'cancelText',
+ 'clearText',
+ 'color',
+ 'dayValues',
+ 'disabled',
+ 'doneText',
+ 'firstDayOfWeek',
+ 'highlightedDates',
+ 'hourCycle',
+ 'hourValues',
+ 'isDateEnabled',
+ 'locale',
+ 'max',
+ 'min',
+ 'minuteValues',
+ 'mode',
+ 'monthValues',
+ 'multiple',
+ 'name',
+ 'preferWheel',
+ 'presentation',
+ 'readonly',
+ 'showClearButton',
+ 'showDefaultButtons',
+ 'showDefaultTimeLabel',
+ 'showDefaultTitle',
+ 'size',
+ 'titleSelectedDatesFormatter',
+ 'value',
+ 'yearValues',
+ ],
+ standalone: true,
+})
+export class IonDatetime {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']);
+ }
+}
+
+import type { DatetimeChangeEventDetail as IIonDatetimeDatetimeChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonDatetimeButton,
+ inputs: ['color', 'datetime', 'disabled', 'mode'],
+})
+@Component({
+ selector: 'ion-datetime-button',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'datetime', 'disabled', 'mode'],
+ standalone: true,
+})
+export class IonDatetimeButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonFab,
+ inputs: ['activated', 'edge', 'horizontal', 'vertical'],
+ methods: ['close'],
+})
+@Component({
+ selector: 'ion-fab',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activated', 'edge', 'horizontal', 'vertical'],
+ standalone: true,
+})
+export class IonFab {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonFab extends Components.IonFab {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonFabButton,
+ 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: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonFabButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
+ }
+}
+
+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: defineIonFabList,
+ inputs: ['activated', 'side'],
+})
+@Component({
+ selector: 'ion-fab-list',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['activated', 'side'],
+ standalone: true,
+})
+export class IonFabList {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonFabList extends Components.IonFabList {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonFooter,
+ inputs: ['collapse', 'mode', 'translucent'],
+})
+@Component({
+ selector: 'ion-footer',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse', 'mode', 'translucent'],
+ standalone: true,
+})
+export class IonFooter {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonFooter extends Components.IonFooter {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonGrid,
+ inputs: ['fixed'],
+})
+@Component({
+ selector: 'ion-grid',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['fixed'],
+ standalone: true,
+})
+export class IonGrid {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonGrid extends Components.IonGrid {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonHeader,
+ inputs: ['collapse', 'mode', 'translucent'],
+})
+@Component({
+ selector: 'ion-header',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['collapse', 'mode', 'translucent'],
+ standalone: true,
+})
+export class IonHeader {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonHeader extends Components.IonHeader {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonImg,
+ inputs: ['alt', 'src'],
+})
+@Component({
+ selector: 'ion-img',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['alt', 'src'],
+ standalone: true,
+})
+export class IonImg {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
+ }
+}
+
+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>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonInfiniteScroll,
+ inputs: ['disabled', 'position', 'threshold'],
+ methods: ['complete'],
+})
+@Component({
+ selector: 'ion-infinite-scroll',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'position', 'threshold'],
+ standalone: true,
+})
+export class IonInfiniteScroll {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionInfinite']);
+ }
+}
+
+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: defineIonInfiniteScrollContent,
+ inputs: ['loadingSpinner', 'loadingText'],
+})
+@Component({
+ selector: 'ion-infinite-scroll-content',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['loadingSpinner', 'loadingText'],
+ standalone: true,
+})
+export class IonInfiniteScrollContent {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonInput,
+ 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'],
+})
+@Component({
+ selector: 'ion-input',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonInput {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
+ }
+}
+
+import type { InputInputEventDetail as IIonInputInputInputEventDetail } from '@ionic/core/components';
+import type { InputChangeEventDetail as IIonInputInputChangeEventDetail } from '@ionic/core/components';
+
+export declare interface IonInput extends Components.IonInput {
+ /**
+ * The `ionInput` event is fired each time the user modifies the input's value.
+Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+to the input's value. This typically happens for each keystroke as the user types.
+
+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 when the user modifies the input's value.
+Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+are committed, not as the user types.
+
+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 ``, pressing the "Enter" key, 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: defineIonItem,
+ 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: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonItem {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonItem extends Components.IonItem {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonItemDivider,
+ inputs: ['color', 'mode', 'sticky'],
+})
+@Component({
+ selector: 'ion-item-divider',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'sticky'],
+ standalone: true,
+})
+export class IonItemDivider {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonItemDivider extends Components.IonItemDivider {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonItemGroup,
+})
+@Component({
+ selector: 'ion-item-group',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonItemGroup {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonItemGroup extends Components.IonItemGroup {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonItemOption,
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
+})
+@Component({
+ selector: 'ion-item-option',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
+ standalone: true,
+})
+export class IonItemOption {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonItemOption extends Components.IonItemOption {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonItemOptions,
+ inputs: ['side'],
+})
+@Component({
+ selector: 'ion-item-options',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['side'],
+ standalone: true,
+})
+export class IonItemOptions {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionSwipe']);
+ }
+}
+
+export declare interface IonItemOptions extends Components.IonItemOptions {
+ /**
+ * Emitted when the item has been fully swiped.
+ */
+ ionSwipe: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonItemSliding,
+ inputs: ['disabled'],
+ methods: ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened'],
+})
+@Component({
+ selector: 'ion-item-sliding',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled'],
+ standalone: true,
+})
+export class IonItemSliding {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionDrag']);
+ }
+}
+
+export declare interface IonItemSliding extends Components.IonItemSliding {
+ /**
+ * Emitted when the sliding position changes.
+ */
+ ionDrag: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonLabel,
+ inputs: ['color', 'mode', 'position'],
+})
+@Component({
+ selector: 'ion-label',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'position'],
+ standalone: true,
+})
+export class IonLabel {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonLabel extends Components.IonLabel {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonList,
+ inputs: ['inset', 'lines', 'mode'],
+ methods: ['closeSlidingItems'],
+})
+@Component({
+ selector: 'ion-list',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['inset', 'lines', 'mode'],
+ standalone: true,
+})
+export class IonList {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonList extends Components.IonList {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonListHeader,
+ inputs: ['color', 'lines', 'mode'],
+})
+@Component({
+ selector: 'ion-list-header',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'lines', 'mode'],
+ standalone: true,
+})
+export class IonListHeader {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonListHeader extends Components.IonListHeader {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonLoading,
+ inputs: [
+ 'animated',
+ 'backdropDismiss',
+ 'cssClass',
+ 'duration',
+ 'enterAnimation',
+ 'htmlAttributes',
+ 'isOpen',
+ 'keyboardClose',
+ 'leaveAnimation',
+ 'message',
+ 'mode',
+ 'showBackdrop',
+ 'spinner',
+ 'translucent',
+ 'trigger',
+ ],
+ methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+ selector: 'ion-loading',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonLoading {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, [
+ 'ionLoadingDidPresent',
+ 'ionLoadingWillPresent',
+ 'ionLoadingWillDismiss',
+ 'ionLoadingDidDismiss',
+ 'didPresent',
+ 'willPresent',
+ 'willDismiss',
+ 'didDismiss',
+ ]);
+ }
+}
+
+import type { OverlayEventDetail as IIonLoadingOverlayEventDetail } from '@ionic/core/components';
+
+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: defineIonMenu,
+ inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
+ methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen'],
+})
+@Component({
+ selector: 'ion-menu',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
+ standalone: true,
+})
+export class IonMenu {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose']);
+ }
+}
+
+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: defineIonMenuButton,
+ inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
+})
+@Component({
+ selector: 'ion-menu-button',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
+ standalone: true,
+})
+export class IonMenuButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonMenuButton extends Components.IonMenuButton {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonMenuToggle,
+ inputs: ['autoHide', 'menu'],
+})
+@Component({
+ selector: 'ion-menu-toggle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['autoHide', 'menu'],
+ standalone: true,
+})
+export class IonMenuToggle {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonMenuToggle extends Components.IonMenuToggle {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonNavLink,
+ inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
+})
+@Component({
+ selector: 'ion-nav-link',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
+ standalone: true,
+})
+export class IonNavLink {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonNavLink extends Components.IonNavLink {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonNote,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-note',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonNote {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonNote extends Components.IonNote {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonPicker,
+ inputs: [
+ 'animated',
+ 'backdropDismiss',
+ 'buttons',
+ 'columns',
+ 'cssClass',
+ 'duration',
+ 'enterAnimation',
+ 'htmlAttributes',
+ 'isOpen',
+ 'keyboardClose',
+ 'leaveAnimation',
+ 'mode',
+ 'showBackdrop',
+ 'trigger',
+ ],
+ methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn'],
+})
+@Component({
+ selector: 'ion-picker',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ ],
+ standalone: true,
+})
+export class IonPicker {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, [
+ 'ionPickerDidPresent',
+ 'ionPickerWillPresent',
+ 'ionPickerWillDismiss',
+ 'ionPickerDidDismiss',
+ 'didPresent',
+ 'willPresent',
+ 'willDismiss',
+ 'didDismiss',
+ ]);
+ }
+}
+
+import type { OverlayEventDetail as IIonPickerOverlayEventDetail } from '@ionic/core/components';
+
+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: defineIonProgressBar,
+ inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
+})
+@Component({
+ selector: 'ion-progress-bar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
+ standalone: true,
+})
+export class IonProgressBar {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonProgressBar extends Components.IonProgressBar {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonRadio,
+ inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+})
+@Component({
+ selector: 'ion-radio',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+ standalone: true,
+})
+export class IonRadio {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
+ }
+}
+
+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: defineIonRadioGroup,
+ inputs: ['allowEmptySelection', 'name', 'value'],
+})
+@Component({
+ selector: 'ion-radio-group',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['allowEmptySelection', 'name', 'value'],
+ standalone: true,
+})
+export class IonRadioGroup {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange']);
+ }
+}
+
+import type { RadioGroupChangeEventDetail as IIonRadioGroupRadioGroupChangeEventDetail } from '@ionic/core/components';
+
+export declare interface IonRadioGroup extends Components.IonRadioGroup {
+ /**
+ * Emitted when the value has changed.
+ */
+ ionChange: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonRange,
+ inputs: [
+ 'activeBarStart',
+ 'color',
+ 'debounce',
+ 'disabled',
+ 'dualKnobs',
+ 'label',
+ 'labelPlacement',
+ 'legacy',
+ 'max',
+ 'min',
+ 'mode',
+ 'name',
+ 'pin',
+ 'pinFormatter',
+ 'snaps',
+ 'step',
+ 'ticks',
+ 'value',
+ ],
+})
+@Component({
+ selector: 'ion-range',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'activeBarStart',
+ 'color',
+ 'debounce',
+ 'disabled',
+ 'dualKnobs',
+ 'label',
+ 'labelPlacement',
+ 'legacy',
+ 'max',
+ 'min',
+ 'mode',
+ 'name',
+ 'pin',
+ 'pinFormatter',
+ 'snaps',
+ 'step',
+ 'ticks',
+ 'value',
+ ],
+ standalone: true,
+})
+export class IonRange {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionFocus', 'ionBlur', 'ionKnobMoveStart', 'ionKnobMoveEnd']);
+ }
+}
+
+import type { RangeChangeEventDetail as IIonRangeRangeChangeEventDetail } from '@ionic/core/components';
+import type { RangeKnobMoveStartEventDetail as IIonRangeRangeKnobMoveStartEventDetail } from '@ionic/core/components';
+import type { RangeKnobMoveEndEventDetail as IIonRangeRangeKnobMoveEndEventDetail } from '@ionic/core/components';
+
+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: defineIonRefresher,
+ inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+ methods: ['complete', 'cancel', 'getProgress'],
+})
+@Component({
+ selector: 'ion-refresher',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+ standalone: true,
+})
+export class IonRefresher {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']);
+ }
+}
+
+import type { RefresherEventDetail as IIonRefresherRefresherEventDetail } from '@ionic/core/components';
+
+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: defineIonRefresherContent,
+ inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
+})
+@Component({
+ selector: 'ion-refresher-content',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
+ standalone: true,
+})
+export class IonRefresherContent {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonRefresherContent extends Components.IonRefresherContent {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonReorder,
+})
+@Component({
+ selector: 'ion-reorder',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonReorder {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonReorder extends Components.IonReorder {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonReorderGroup,
+ inputs: ['disabled'],
+ methods: ['complete'],
+})
+@Component({
+ selector: 'ion-reorder-group',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled'],
+ standalone: true,
+})
+export class IonReorderGroup {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionItemReorder']);
+ }
+}
+
+import type { ItemReorderEventDetail as IIonReorderGroupItemReorderEventDetail } from '@ionic/core/components';
+
+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: defineIonRippleEffect,
+ inputs: ['type'],
+ methods: ['addRipple'],
+})
+@Component({
+ selector: 'ion-ripple-effect',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['type'],
+ standalone: true,
+})
+export class IonRippleEffect {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonRippleEffect extends Components.IonRippleEffect {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonRow,
+})
+@Component({
+ selector: 'ion-row',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonRow {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonRow extends Components.IonRow {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonSearchbar,
+ inputs: [
+ 'animated',
+ 'autocomplete',
+ 'autocorrect',
+ 'cancelButtonIcon',
+ 'cancelButtonText',
+ 'clearIcon',
+ 'color',
+ 'debounce',
+ 'disabled',
+ 'enterkeyhint',
+ 'inputmode',
+ 'mode',
+ 'name',
+ 'placeholder',
+ 'searchIcon',
+ 'showCancelButton',
+ 'showClearButton',
+ 'spellcheck',
+ 'type',
+ 'value',
+ ],
+ methods: ['setFocus', 'getInputElement'],
+})
+@Component({
+ selector: 'ion-searchbar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'animated',
+ 'autocomplete',
+ 'autocorrect',
+ 'cancelButtonIcon',
+ 'cancelButtonText',
+ 'clearIcon',
+ 'color',
+ 'debounce',
+ 'disabled',
+ 'enterkeyhint',
+ 'inputmode',
+ 'mode',
+ 'name',
+ 'placeholder',
+ 'searchIcon',
+ 'showCancelButton',
+ 'showClearButton',
+ 'spellcheck',
+ 'type',
+ 'value',
+ ],
+ standalone: true,
+})
+export class IonSearchbar {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
+ }
+}
+
+import type { SearchbarInputEventDetail as IIonSearchbarSearchbarInputEventDetail } from '@ionic/core/components';
+import type { SearchbarChangeEventDetail as IIonSearchbarSearchbarChangeEventDetail } from '@ionic/core/components';
+
+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 value has been committed
+by the user. This can happen when the element loses focus or
+when the "Enter" key is pressed. `ionChange` can also fire
+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: defineIonSegment,
+ inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
+})
+@Component({
+ selector: 'ion-segment',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
+ standalone: true,
+})
+export class IonSegment {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange']);
+ }
+}
+
+import type { SegmentChangeEventDetail as IIonSegmentSegmentChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonSegmentButton,
+ inputs: ['disabled', 'layout', 'mode', 'type', 'value'],
+})
+@Component({
+ selector: 'ion-segment-button',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'layout', 'mode', 'type', 'value'],
+ standalone: true,
+})
+export class IonSegmentButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonSegmentButton extends Components.IonSegmentButton {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonSelect,
+ inputs: [
+ 'cancelText',
+ 'color',
+ 'compareWith',
+ 'disabled',
+ 'expandedIcon',
+ 'fill',
+ 'interface',
+ 'interfaceOptions',
+ 'justify',
+ 'label',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'multiple',
+ 'name',
+ 'okText',
+ 'placeholder',
+ 'selectedText',
+ 'shape',
+ 'toggleIcon',
+ 'value',
+ ],
+ methods: ['open'],
+})
+@Component({
+ selector: 'ion-select',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'cancelText',
+ 'color',
+ 'compareWith',
+ 'disabled',
+ 'expandedIcon',
+ 'fill',
+ 'interface',
+ 'interfaceOptions',
+ 'justify',
+ 'label',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'multiple',
+ 'name',
+ 'okText',
+ 'placeholder',
+ 'selectedText',
+ 'shape',
+ 'toggleIcon',
+ 'value',
+ ],
+ standalone: true,
+})
+export class IonSelect {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionDismiss', 'ionFocus', 'ionBlur']);
+ }
+}
+
+import type { SelectChangeEventDetail as IIonSelectSelectChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonSelectOption,
+ inputs: ['disabled', 'value'],
+})
+@Component({
+ selector: 'ion-select-option',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'value'],
+ standalone: true,
+})
+export class IonSelectOption {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonSelectOption extends Components.IonSelectOption {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonSkeletonText,
+ inputs: ['animated'],
+})
+@Component({
+ selector: 'ion-skeleton-text',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['animated'],
+ standalone: true,
+})
+export class IonSkeletonText {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonSkeletonText extends Components.IonSkeletonText {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonSpinner,
+ inputs: ['color', 'duration', 'name', 'paused'],
+})
+@Component({
+ selector: 'ion-spinner',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'duration', 'name', 'paused'],
+ standalone: true,
+})
+export class IonSpinner {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonSpinner extends Components.IonSpinner {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonSplitPane,
+ inputs: ['contentId', 'disabled', 'when'],
+})
+@Component({
+ selector: 'ion-split-pane',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['contentId', 'disabled', 'when'],
+ standalone: true,
+})
+export class IonSplitPane {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionSplitPaneVisible']);
+ }
+}
+
+export declare interface IonSplitPane extends Components.IonSplitPane {
+ /**
+ * Expression to be called when the split-pane visibility has changed
+ */
+ ionSplitPaneVisible: EventEmitter>;
+}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonTabBar,
+ inputs: ['color', 'mode', 'selectedTab', 'translucent'],
+})
+@Component({
+ selector: 'ion-tab-bar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode', 'selectedTab', 'translucent'],
+ standalone: true,
+})
+export class IonTabBar {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonTabBar extends Components.IonTabBar {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonTabButton,
+ inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
+})
+@Component({
+ selector: 'ion-tab-button',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
+ standalone: true,
+})
+export class IonTabButton {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonTabButton extends Components.IonTabButton {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonText,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-text',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonText {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonText extends Components.IonText {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonTextarea,
+ inputs: [
+ 'autoGrow',
+ 'autocapitalize',
+ 'autofocus',
+ 'clearOnEdit',
+ 'color',
+ 'cols',
+ 'counter',
+ 'counterFormatter',
+ 'debounce',
+ 'disabled',
+ 'enterkeyhint',
+ 'errorText',
+ 'fill',
+ 'helperText',
+ 'inputmode',
+ 'label',
+ 'labelPlacement',
+ 'legacy',
+ 'maxlength',
+ 'minlength',
+ 'mode',
+ 'name',
+ 'placeholder',
+ 'readonly',
+ 'required',
+ 'rows',
+ 'shape',
+ 'spellcheck',
+ 'value',
+ 'wrap',
+ ],
+ methods: ['setFocus', 'getInputElement'],
+})
+@Component({
+ selector: 'ion-textarea',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // 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',
+ 'legacy',
+ 'maxlength',
+ 'minlength',
+ 'mode',
+ 'name',
+ 'placeholder',
+ 'readonly',
+ 'required',
+ 'rows',
+ 'shape',
+ 'spellcheck',
+ 'value',
+ 'wrap',
+ ],
+ standalone: true,
+})
+export class IonTextarea {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']);
+ }
+}
+
+import type { TextareaChangeEventDetail as IIonTextareaTextareaChangeEventDetail } from '@ionic/core/components';
+import type { TextareaInputEventDetail as IIonTextareaTextareaInputEventDetail } from '@ionic/core/components';
+
+export declare interface IonTextarea extends Components.IonTextarea {
+ /**
+ * The `ionChange` event is fired when the user modifies the textarea's value.
+Unlike the `ionInput` event, the `ionChange` event is fired when
+the element loses focus after its value has been modified.
+ */
+ ionChange: EventEmitter>;
+ /**
+ * The `ionInput` event is fired each time the user modifies the textarea's value.
+Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+to the textarea's value. This typically happens for each keystroke as the user types.
+
+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: defineIonThumbnail,
+})
+@Component({
+ selector: 'ion-thumbnail',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [],
+ standalone: true,
+})
+export class IonThumbnail {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonThumbnail extends Components.IonThumbnail {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonTitle,
+ inputs: ['color', 'size'],
+})
+@Component({
+ selector: 'ion-title',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'size'],
+ standalone: true,
+})
+export class IonTitle {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonTitle extends Components.IonTitle {}
+
+@ProxyCmp({
+ defineCustomElementFn: defineIonToast,
+ inputs: [
+ 'animated',
+ 'buttons',
+ 'color',
+ 'cssClass',
+ 'duration',
+ 'enterAnimation',
+ 'header',
+ 'htmlAttributes',
+ 'icon',
+ 'isOpen',
+ 'keyboardClose',
+ 'layout',
+ 'leaveAnimation',
+ 'message',
+ 'mode',
+ 'position',
+ 'translucent',
+ 'trigger',
+ ],
+ methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+ selector: 'ion-toast',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'animated',
+ 'buttons',
+ 'color',
+ 'cssClass',
+ 'duration',
+ 'enterAnimation',
+ 'header',
+ 'htmlAttributes',
+ 'icon',
+ 'isOpen',
+ 'keyboardClose',
+ 'layout',
+ 'leaveAnimation',
+ 'message',
+ 'mode',
+ 'position',
+ 'translucent',
+ 'trigger',
+ ],
+ standalone: true,
+})
+export class IonToast {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, [
+ 'ionToastDidPresent',
+ 'ionToastWillPresent',
+ 'ionToastWillDismiss',
+ 'ionToastDidDismiss',
+ 'didPresent',
+ 'willPresent',
+ 'willDismiss',
+ 'didDismiss',
+ ]);
+ }
+}
+
+import type { OverlayEventDetail as IIonToastOverlayEventDetail } from '@ionic/core/components';
+
+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: defineIonToggle,
+ inputs: [
+ 'checked',
+ 'color',
+ 'disabled',
+ 'enableOnOffLabels',
+ 'justify',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'name',
+ 'value',
+ ],
+})
+@Component({
+ selector: 'ion-toggle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'checked',
+ 'color',
+ 'disabled',
+ 'enableOnOffLabels',
+ 'justify',
+ 'labelPlacement',
+ 'legacy',
+ 'mode',
+ 'name',
+ 'value',
+ ],
+ standalone: true,
+})
+export class IonToggle {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
+ }
+}
+
+import type { ToggleChangeEventDetail as IIonToggleToggleChangeEventDetail } from '@ionic/core/components';
+
+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: defineIonToolbar,
+ inputs: ['color', 'mode'],
+})
+@Component({
+ selector: 'ion-toolbar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: ['color', 'mode'],
+ standalone: true,
+})
+export class IonToolbar {
+ protected el: HTMLElement;
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+ c.detach();
+ this.el = r.nativeElement;
+ }
+}
+
+export declare interface IonToolbar extends Components.IonToolbar {}
diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts
index 4f012c4cd3..b2e8af14fd 100644
--- a/packages/angular/standalone/src/index.ts
+++ b/packages/angular/standalone/src/index.ts
@@ -3,7 +3,6 @@ export { IonModal } from './overlays/modal';
export { IonPopover } from './overlays/popover';
export { IonRouterOutlet } from './navigation/router-outlet';
export { IonRouterLink, IonRouterLinkWithHref } from './navigation/router-link-delegate';
-export { IonNav } from './navigation/nav-delegate';
export { provideIonicAngular } from './providers/ionic-angular';
export {
ActionSheetController,
@@ -23,3 +22,6 @@ export {
NavParams,
IonicRouteStrategy,
} from '@ionic/angular/common';
+export { IonNav } from './navigation/nav';
+export { IonIcon } from './directives/icon';
+export * from './directives/proxies';
diff --git a/packages/angular/standalone/src/navigation/back-button.ts b/packages/angular/standalone/src/navigation/back-button.ts
index d9e9871162..84462ebb01 100644
--- a/packages/angular/standalone/src/navigation/back-button.ts
+++ b/packages/angular/standalone/src/navigation/back-button.ts
@@ -1,10 +1,5 @@
-import { Component, Optional, ChangeDetectionStrategy, ElementRef, NgZone } from '@angular/core';
-import {
- IonBackButtonDelegate as IonBackButtonDelegateBase,
- NavController,
- Config,
- ProxyCmp,
-} from '@ionic/angular/common';
+import { Component, Optional, ChangeDetectionStrategy, ElementRef, NgZone, ChangeDetectorRef } from '@angular/core';
+import { IonBackButton as IonBackButtonBase, NavController, Config, ProxyCmp } from '@ionic/angular/common';
import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
import { IonRouterOutlet } from './router-outlet';
@@ -19,14 +14,15 @@ import { IonRouterOutlet } from './router-outlet';
standalone: true,
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonBackButton extends IonBackButtonDelegateBase {
+export class IonBackButton extends IonBackButtonBase {
constructor(
@Optional() routerOutlet: IonRouterOutlet,
navCtrl: NavController,
config: Config,
r: ElementRef,
- z: NgZone
+ z: NgZone,
+ c: ChangeDetectorRef
) {
- super(routerOutlet, navCtrl, config, r, z);
+ super(routerOutlet, navCtrl, config, r, z, c);
}
}
diff --git a/packages/angular/standalone/src/navigation/nav-delegate.ts b/packages/angular/standalone/src/navigation/nav.ts
similarity index 69%
rename from packages/angular/standalone/src/navigation/nav-delegate.ts
rename to packages/angular/standalone/src/navigation/nav.ts
index 410f45e635..a8c3bb1b00 100644
--- a/packages/angular/standalone/src/navigation/nav-delegate.ts
+++ b/packages/angular/standalone/src/navigation/nav.ts
@@ -1,5 +1,5 @@
-import { Component, ElementRef, Injector, EnvironmentInjector, NgZone } from '@angular/core';
-import { NavDelegate as NavDelegateBase, ProxyCmp, AngularDelegate } from '@ionic/angular/common';
+import { Component, ElementRef, Injector, EnvironmentInjector, NgZone, ChangeDetectorRef } from '@angular/core';
+import { IonNav as IonNavBase, ProxyCmp, AngularDelegate } from '@ionic/angular/common';
import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
@ProxyCmp({
@@ -10,14 +10,15 @@ import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
template: '',
standalone: true,
})
-export class IonNav extends NavDelegateBase {
+export class IonNav extends IonNavBase {
constructor(
ref: ElementRef,
environmentInjector: EnvironmentInjector,
injector: Injector,
angularDelegate: AngularDelegate,
- z: NgZone
+ z: NgZone,
+ c: ChangeDetectorRef
) {
- super(ref, environmentInjector, injector, angularDelegate, z);
+ super(ref, environmentInjector, injector, angularDelegate, z, c);
}
}
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.component.html b/packages/angular/test/base/src/app/standalone/app-standalone/app.component.html
index 15a92a2244..13b96776ee 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.component.html
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.component.html
@@ -1 +1,3 @@
-
+
+
+
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.component.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.component.ts
index e105848648..d51d38c860 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.component.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.component.ts
@@ -1,12 +1,12 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { IonRouterOutlet } from '@ionic/angular/standalone';
+import { IonRouterOutlet, IonApp } from '@ionic/angular/standalone';
@Component({
selector: 'app-root-standalone',
templateUrl: './app.component.html',
standalone: true,
- imports: [RouterModule, IonRouterOutlet]
+ imports: [RouterModule, IonRouterOutlet, IonApp]
})
export class AppComponent {
}
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
index fb027e34f9..1026d18b62 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
@@ -6,14 +6,15 @@ export const routes: Routes = [
path: '',
component: AppComponent,
children: [
- { path: 'popover', loadComponent: () => import('../popover/popover.component').then(m => m.PopoverComponent) },
- { path: 'modal', loadComponent: () => import('../modal/modal.component').then(m => m.ModalComponent) },
- { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(m => m.RouterOutletComponent) },
- { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(m => m.BackButtonComponent) },
- { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(m => m.RouterLinkComponent) },
- { path: 'nav', loadComponent: () => import('../nav/nav.component').then(m => m.NavComponent) },
- { path: 'providers', loadComponent: () => import('../providers/providers.component').then(m => m.ProvidersComponent) },
- { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(m => m.OverlayControllersComponent) },
+ { path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
+ { path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
+ { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
+ { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
+ { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(c => c.RouterLinkComponent) },
+ { path: 'nav', loadComponent: () => import('../nav/nav.component').then(c => c.NavComponent) },
+ { path: 'providers', loadComponent: () => import('../providers/providers.component').then(c => c.ProvidersComponent) },
+ { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
+ { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) }
]
},
];
diff --git a/packages/angular/test/base/src/app/standalone/button/button.component.ts b/packages/angular/test/base/src/app/standalone/button/button.component.ts
new file mode 100644
index 0000000000..ec3869ebe7
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/button/button.component.ts
@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-button',
+ template: `Test`,
+ standalone: true,
+ imports: [IonButton]
+})
+export class ButtonComponent {
+
+}