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