From 8afc220e339f789a6747d00be8a953470587c8f2 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 30 Jun 2026 16:24:57 -0400 Subject: [PATCH 1/4] feat(img): deprecate ion-img --- core/src/components.d.ts | 12 + core/src/components/img/img.tsx | 8 + packages/react/src/components/components.ts | 1433 +++++++------------ 3 files changed, 535 insertions(+), 918 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f17aacb39e2..9e3df2a63fb 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1239,6 +1239,9 @@ export namespace Components { */ "translucent": boolean; } + /** + * @deprecated + */ interface IonImg { /** * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. @@ -4203,6 +4206,9 @@ declare global { "ionImgDidLoad": void; "ionError": void; } + /** + * @deprecated + */ interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; @@ -6386,6 +6392,9 @@ declare namespace LocalJSX { */ "translucent"?: boolean; } + /** + * @deprecated + */ interface IonImg { /** * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. @@ -9812,6 +9821,9 @@ declare module "@stencil/core" { "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes; "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes; "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes; + /** + * @deprecated + */ "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes; "ion-infinite-scroll": LocalJSX.IntrinsicElements["ion-infinite-scroll"] & JSXBase.HTMLAttributes; "ion-infinite-scroll-content": LocalJSX.IntrinsicElements["ion-infinite-scroll-content"] & JSXBase.HTMLAttributes; diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx index 0afce19d1d2..2b8a7e48318 100644 --- a/core/src/components/img/img.tsx +++ b/core/src/components/img/img.tsx @@ -2,10 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; import type { Attributes } from '@utils/helpers'; import { inheritAttributes } from '@utils/helpers'; +import { printIonWarning } from '@utils/logging'; import { getIonMode } from '../../global/ionic-global'; /** + * @deprecated + * * @part image - The inner `img` element. */ @Component({ @@ -54,6 +57,11 @@ export class Img implements ComponentInterface { } componentDidLoad() { + printIonWarning( + '[ion-img] - This component is deprecated and will be removed in Ionic v10. ' + + 'Use a native with the loading="lazy" attribute instead.', + this.el + ); this.addIO(); } diff --git a/packages/react/src/components/components.ts b/packages/react/src/components/components.ts index 7080edec552..785a7bfab0e 100644 --- a/packages/react/src/components/components.ts +++ b/packages/react/src/components/components.ts @@ -11,1430 +11,1027 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar import { createComponent } from '@stencil/react-output-target/runtime'; import React from 'react'; -import { - type AccordionGroupChangeEventDetail, - type BreadcrumbCollapsedClickEventDetail, - type CheckboxChangeEventDetail, - type DatetimeChangeEventDetail, - type InputChangeEventDetail, - type InputInputEventDetail, - type InputOtpChangeEventDetail, - type InputOtpCompleteEventDetail, - type InputOtpInputEventDetail, - type IonAccordionGroupCustomEvent, - type IonBackdropCustomEvent, - type IonBreadcrumbsCustomEvent, - type IonCheckboxCustomEvent, - type IonContentCustomEvent, - type IonDatetimeCustomEvent, - type IonImgCustomEvent, - type IonInfiniteScrollCustomEvent, - type IonInputCustomEvent, - type IonInputOtpCustomEvent, - type IonItemOptionsCustomEvent, - type IonItemSlidingCustomEvent, - type IonMenuCustomEvent, - type IonNavCustomEvent, - type IonPickerColumnCustomEvent, - type IonRadioCustomEvent, - type IonRadioGroupCustomEvent, - type IonRangeCustomEvent, - type IonRefresherCustomEvent, - type IonReorderGroupCustomEvent, - type IonSearchbarCustomEvent, - type IonSegmentCustomEvent, - type IonSegmentViewCustomEvent, - type IonSelectCustomEvent, - type IonSplitPaneCustomEvent, - type IonTextareaCustomEvent, - type IonToggleCustomEvent, - type ItemReorderEventDetail, - type MenuCloseEventDetail, - type PickerColumnChangeEventDetail, - type RadioGroupChangeEventDetail, - type RangeChangeEventDetail, - type RangeKnobMoveEndEventDetail, - type RangeKnobMoveStartEventDetail, - type RefresherEventDetail, - type RefresherPullEndEventDetail, - type ReorderEndEventDetail, - type ReorderMoveEventDetail, - type ScrollBaseDetail, - type ScrollDetail, - type SearchbarChangeEventDetail, - type SearchbarInputEventDetail, - type SegmentChangeEventDetail, - type SegmentViewScrollEvent, - type SelectChangeEventDetail, - type TextareaChangeEventDetail, - type TextareaInputEventDetail, - type ToggleChangeEventDetail, -} from '@ionic/core'; -import type { Components } from '@ionic/core/components'; -import { - IonAccordionGroup as IonAccordionGroupElement, - defineCustomElement as defineIonAccordionGroup, -} from '@ionic/core/components/ion-accordion-group.js'; -import { - IonAccordion as IonAccordionElement, - defineCustomElement as defineIonAccordion, -} from '@ionic/core/components/ion-accordion.js'; -import { - IonAvatar as IonAvatarElement, - defineCustomElement as defineIonAvatar, -} from '@ionic/core/components/ion-avatar.js'; -import { - IonBackdrop as IonBackdropElement, - defineCustomElement as defineIonBackdrop, -} from '@ionic/core/components/ion-backdrop.js'; -import { - IonBadge as IonBadgeElement, - defineCustomElement as defineIonBadge, -} from '@ionic/core/components/ion-badge.js'; -import { - IonBreadcrumbs as IonBreadcrumbsElement, - defineCustomElement as defineIonBreadcrumbs, -} from '@ionic/core/components/ion-breadcrumbs.js'; -import { - IonButtons as IonButtonsElement, - defineCustomElement as defineIonButtons, -} from '@ionic/core/components/ion-buttons.js'; -import { - IonCardContent as IonCardContentElement, - defineCustomElement as defineIonCardContent, -} from '@ionic/core/components/ion-card-content.js'; -import { - IonCardHeader as IonCardHeaderElement, - defineCustomElement as defineIonCardHeader, -} from '@ionic/core/components/ion-card-header.js'; -import { - IonCardSubtitle as IonCardSubtitleElement, - defineCustomElement as defineIonCardSubtitle, -} from '@ionic/core/components/ion-card-subtitle.js'; -import { - IonCardTitle as IonCardTitleElement, - defineCustomElement as defineIonCardTitle, -} from '@ionic/core/components/ion-card-title.js'; -import { - IonCheckbox as IonCheckboxElement, - defineCustomElement as defineIonCheckbox, -} from '@ionic/core/components/ion-checkbox.js'; -import { IonChip as IonChipElement, defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js'; -import { IonCol as IonColElement, defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js'; -import { - IonContent as IonContentElement, - defineCustomElement as defineIonContent, -} from '@ionic/core/components/ion-content.js'; -import { - IonDatetimeButton as IonDatetimeButtonElement, - defineCustomElement as defineIonDatetimeButton, -} from '@ionic/core/components/ion-datetime-button.js'; -import { - IonDatetime as IonDatetimeElement, - defineCustomElement as defineIonDatetime, -} from '@ionic/core/components/ion-datetime.js'; -import { - IonFabList as IonFabListElement, - defineCustomElement as defineIonFabList, -} from '@ionic/core/components/ion-fab-list.js'; -import { IonFab as IonFabElement, defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js'; -import { - IonFooter as IonFooterElement, - defineCustomElement as defineIonFooter, -} from '@ionic/core/components/ion-footer.js'; -import { IonGrid as IonGridElement, defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js'; -import { - IonHeader as IonHeaderElement, - defineCustomElement as defineIonHeader, -} from '@ionic/core/components/ion-header.js'; -import { IonImg as IonImgElement, defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js'; -import { - IonInfiniteScrollContent as IonInfiniteScrollContentElement, - defineCustomElement as defineIonInfiniteScrollContent, -} from '@ionic/core/components/ion-infinite-scroll-content.js'; -import { - IonInfiniteScroll as IonInfiniteScrollElement, - defineCustomElement as defineIonInfiniteScroll, -} from '@ionic/core/components/ion-infinite-scroll.js'; -import { - IonInputOtp as IonInputOtpElement, - defineCustomElement as defineIonInputOtp, -} from '@ionic/core/components/ion-input-otp.js'; -import { - IonInputPasswordToggle as IonInputPasswordToggleElement, - defineCustomElement as defineIonInputPasswordToggle, -} from '@ionic/core/components/ion-input-password-toggle.js'; -import { - IonInput as IonInputElement, - defineCustomElement as defineIonInput, -} from '@ionic/core/components/ion-input.js'; -import { - IonItemDivider as IonItemDividerElement, - defineCustomElement as defineIonItemDivider, -} from '@ionic/core/components/ion-item-divider.js'; -import { - IonItemGroup as IonItemGroupElement, - defineCustomElement as defineIonItemGroup, -} from '@ionic/core/components/ion-item-group.js'; -import { - IonItemOptions as IonItemOptionsElement, - defineCustomElement as defineIonItemOptions, -} from '@ionic/core/components/ion-item-options.js'; -import { - IonItemSliding as IonItemSlidingElement, - defineCustomElement as defineIonItemSliding, -} from '@ionic/core/components/ion-item-sliding.js'; -import { - IonLabel as IonLabelElement, - defineCustomElement as defineIonLabel, -} from '@ionic/core/components/ion-label.js'; -import { - IonListHeader as IonListHeaderElement, - defineCustomElement as defineIonListHeader, -} from '@ionic/core/components/ion-list-header.js'; -import { IonList as IonListElement, defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js'; -import { - IonMenuButton as IonMenuButtonElement, - defineCustomElement as defineIonMenuButton, -} from '@ionic/core/components/ion-menu-button.js'; -import { - IonMenuToggle as IonMenuToggleElement, - defineCustomElement as defineIonMenuToggle, -} from '@ionic/core/components/ion-menu-toggle.js'; -import { IonMenu as IonMenuElement, defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js'; -import { - IonNavLink as IonNavLinkElement, - defineCustomElement as defineIonNavLink, -} from '@ionic/core/components/ion-nav-link.js'; -import { IonNav as IonNavElement, defineCustomElement as defineIonNav } from '@ionic/core/components/ion-nav.js'; -import { IonNote as IonNoteElement, defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js'; -import { - IonPickerColumnOption as IonPickerColumnOptionElement, - defineCustomElement as defineIonPickerColumnOption, -} from '@ionic/core/components/ion-picker-column-option.js'; -import { - IonPickerColumn as IonPickerColumnElement, - defineCustomElement as defineIonPickerColumn, -} from '@ionic/core/components/ion-picker-column.js'; -import { - IonPicker as IonPickerElement, - defineCustomElement as defineIonPicker, -} from '@ionic/core/components/ion-picker.js'; -import { - IonProgressBar as IonProgressBarElement, - defineCustomElement as defineIonProgressBar, -} from '@ionic/core/components/ion-progress-bar.js'; -import { - IonRadioGroup as IonRadioGroupElement, - defineCustomElement as defineIonRadioGroup, -} from '@ionic/core/components/ion-radio-group.js'; -import { - IonRadio as IonRadioElement, - defineCustomElement as defineIonRadio, -} from '@ionic/core/components/ion-radio.js'; -import { - IonRange as IonRangeElement, - defineCustomElement as defineIonRange, -} from '@ionic/core/components/ion-range.js'; -import { - IonRefresherContent as IonRefresherContentElement, - defineCustomElement as defineIonRefresherContent, -} from '@ionic/core/components/ion-refresher-content.js'; -import { - IonRefresher as IonRefresherElement, - defineCustomElement as defineIonRefresher, -} from '@ionic/core/components/ion-refresher.js'; -import { - IonReorderGroup as IonReorderGroupElement, - defineCustomElement as defineIonReorderGroup, -} from '@ionic/core/components/ion-reorder-group.js'; -import { - IonReorder as IonReorderElement, - defineCustomElement as defineIonReorder, -} from '@ionic/core/components/ion-reorder.js'; -import { - IonRippleEffect as IonRippleEffectElement, - defineCustomElement as defineIonRippleEffect, -} from '@ionic/core/components/ion-ripple-effect.js'; -import { IonRow as IonRowElement, defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js'; -import { - IonSearchbar as IonSearchbarElement, - defineCustomElement as defineIonSearchbar, -} from '@ionic/core/components/ion-searchbar.js'; -import { - IonSegmentButton as IonSegmentButtonElement, - defineCustomElement as defineIonSegmentButton, -} from '@ionic/core/components/ion-segment-button.js'; -import { - IonSegmentContent as IonSegmentContentElement, - defineCustomElement as defineIonSegmentContent, -} from '@ionic/core/components/ion-segment-content.js'; -import { - IonSegmentView as IonSegmentViewElement, - defineCustomElement as defineIonSegmentView, -} from '@ionic/core/components/ion-segment-view.js'; -import { - IonSegment as IonSegmentElement, - defineCustomElement as defineIonSegment, -} from '@ionic/core/components/ion-segment.js'; -import { - IonSelectModal as IonSelectModalElement, - defineCustomElement as defineIonSelectModal, -} from '@ionic/core/components/ion-select-modal.js'; -import { - IonSelectOption as IonSelectOptionElement, - defineCustomElement as defineIonSelectOption, -} from '@ionic/core/components/ion-select-option.js'; -import { - IonSelect as IonSelectElement, - defineCustomElement as defineIonSelect, -} from '@ionic/core/components/ion-select.js'; -import { - IonSkeletonText as IonSkeletonTextElement, - defineCustomElement as defineIonSkeletonText, -} from '@ionic/core/components/ion-skeleton-text.js'; -import { - IonSpinner as IonSpinnerElement, - defineCustomElement as defineIonSpinner, -} from '@ionic/core/components/ion-spinner.js'; -import { - IonSplitPane as IonSplitPaneElement, - defineCustomElement as defineIonSplitPane, -} from '@ionic/core/components/ion-split-pane.js'; -import { IonTab as IonTabElement, defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js'; -import { IonText as IonTextElement, defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js'; -import { - IonTextarea as IonTextareaElement, - defineCustomElement as defineIonTextarea, -} from '@ionic/core/components/ion-textarea.js'; -import { - IonThumbnail as IonThumbnailElement, - defineCustomElement as defineIonThumbnail, -} from '@ionic/core/components/ion-thumbnail.js'; -import { - IonTitle as IonTitleElement, - defineCustomElement as defineIonTitle, -} from '@ionic/core/components/ion-title.js'; -import { - IonToggle as IonToggleElement, - defineCustomElement as defineIonToggle, -} from '@ionic/core/components/ion-toggle.js'; -import { - IonToolbar as IonToolbarElement, - defineCustomElement as defineIonToolbar, -} from '@ionic/core/components/ion-toolbar.js'; +import { type AccordionGroupChangeEventDetail, type BreadcrumbCollapsedClickEventDetail, type CheckboxChangeEventDetail, type DatetimeChangeEventDetail, type InputChangeEventDetail, type InputInputEventDetail, type InputOtpChangeEventDetail, type InputOtpCompleteEventDetail, type InputOtpInputEventDetail, type IonAccordionGroupCustomEvent, type IonBackdropCustomEvent, type IonBreadcrumbsCustomEvent, type IonCheckboxCustomEvent, type IonContentCustomEvent, type IonDatetimeCustomEvent, type IonImgCustomEvent, type IonInfiniteScrollCustomEvent, type IonInputCustomEvent, type IonInputOtpCustomEvent, type IonItemOptionsCustomEvent, type IonItemSlidingCustomEvent, type IonMenuCustomEvent, type IonNavCustomEvent, type IonPickerColumnCustomEvent, type IonRadioCustomEvent, type IonRadioGroupCustomEvent, type IonRangeCustomEvent, type IonRefresherCustomEvent, type IonReorderGroupCustomEvent, type IonSearchbarCustomEvent, type IonSegmentCustomEvent, type IonSegmentViewCustomEvent, type IonSelectCustomEvent, type IonSplitPaneCustomEvent, type IonTextareaCustomEvent, type IonToggleCustomEvent, type ItemReorderEventDetail, type MenuCloseEventDetail, type PickerColumnChangeEventDetail, type RadioGroupChangeEventDetail, type RangeChangeEventDetail, type RangeKnobMoveEndEventDetail, type RangeKnobMoveStartEventDetail, type RefresherEventDetail, type RefresherPullEndEventDetail, type ReorderEndEventDetail, type ReorderMoveEventDetail, type ScrollBaseDetail, type ScrollDetail, type SearchbarChangeEventDetail, type SearchbarInputEventDetail, type SegmentChangeEventDetail, type SegmentViewScrollEvent, type SelectChangeEventDetail, type TextareaChangeEventDetail, type TextareaInputEventDetail, type ToggleChangeEventDetail } from "@ionic/core"; +import type { Components } from "@ionic/core/components"; +import { IonAccordionGroup as IonAccordionGroupElement, defineCustomElement as defineIonAccordionGroup } from "@ionic/core/components/ion-accordion-group.js"; +import { IonAccordion as IonAccordionElement, defineCustomElement as defineIonAccordion } from "@ionic/core/components/ion-accordion.js"; +import { IonAvatar as IonAvatarElement, defineCustomElement as defineIonAvatar } from "@ionic/core/components/ion-avatar.js"; +import { IonBackdrop as IonBackdropElement, defineCustomElement as defineIonBackdrop } from "@ionic/core/components/ion-backdrop.js"; +import { IonBadge as IonBadgeElement, defineCustomElement as defineIonBadge } from "@ionic/core/components/ion-badge.js"; +import { IonBreadcrumbs as IonBreadcrumbsElement, defineCustomElement as defineIonBreadcrumbs } from "@ionic/core/components/ion-breadcrumbs.js"; +import { IonButtons as IonButtonsElement, defineCustomElement as defineIonButtons } from "@ionic/core/components/ion-buttons.js"; +import { IonCardContent as IonCardContentElement, defineCustomElement as defineIonCardContent } from "@ionic/core/components/ion-card-content.js"; +import { IonCardHeader as IonCardHeaderElement, defineCustomElement as defineIonCardHeader } from "@ionic/core/components/ion-card-header.js"; +import { IonCardSubtitle as IonCardSubtitleElement, defineCustomElement as defineIonCardSubtitle } from "@ionic/core/components/ion-card-subtitle.js"; +import { IonCardTitle as IonCardTitleElement, defineCustomElement as defineIonCardTitle } from "@ionic/core/components/ion-card-title.js"; +import { IonCheckbox as IonCheckboxElement, defineCustomElement as defineIonCheckbox } from "@ionic/core/components/ion-checkbox.js"; +import { IonChip as IonChipElement, defineCustomElement as defineIonChip } from "@ionic/core/components/ion-chip.js"; +import { IonCol as IonColElement, defineCustomElement as defineIonCol } from "@ionic/core/components/ion-col.js"; +import { IonContent as IonContentElement, defineCustomElement as defineIonContent } from "@ionic/core/components/ion-content.js"; +import { IonDatetimeButton as IonDatetimeButtonElement, defineCustomElement as defineIonDatetimeButton } from "@ionic/core/components/ion-datetime-button.js"; +import { IonDatetime as IonDatetimeElement, defineCustomElement as defineIonDatetime } from "@ionic/core/components/ion-datetime.js"; +import { IonFabList as IonFabListElement, defineCustomElement as defineIonFabList } from "@ionic/core/components/ion-fab-list.js"; +import { IonFab as IonFabElement, defineCustomElement as defineIonFab } from "@ionic/core/components/ion-fab.js"; +import { IonFooter as IonFooterElement, defineCustomElement as defineIonFooter } from "@ionic/core/components/ion-footer.js"; +import { IonGrid as IonGridElement, defineCustomElement as defineIonGrid } from "@ionic/core/components/ion-grid.js"; +import { IonHeader as IonHeaderElement, defineCustomElement as defineIonHeader } from "@ionic/core/components/ion-header.js"; +import { IonImg as IonImgElement, defineCustomElement as defineIonImg } from "@ionic/core/components/ion-img.js"; +import { IonInfiniteScrollContent as IonInfiniteScrollContentElement, defineCustomElement as defineIonInfiniteScrollContent } from "@ionic/core/components/ion-infinite-scroll-content.js"; +import { IonInfiniteScroll as IonInfiniteScrollElement, defineCustomElement as defineIonInfiniteScroll } from "@ionic/core/components/ion-infinite-scroll.js"; +import { IonInputOtp as IonInputOtpElement, defineCustomElement as defineIonInputOtp } from "@ionic/core/components/ion-input-otp.js"; +import { IonInputPasswordToggle as IonInputPasswordToggleElement, defineCustomElement as defineIonInputPasswordToggle } from "@ionic/core/components/ion-input-password-toggle.js"; +import { IonInput as IonInputElement, defineCustomElement as defineIonInput } from "@ionic/core/components/ion-input.js"; +import { IonItemDivider as IonItemDividerElement, defineCustomElement as defineIonItemDivider } from "@ionic/core/components/ion-item-divider.js"; +import { IonItemGroup as IonItemGroupElement, defineCustomElement as defineIonItemGroup } from "@ionic/core/components/ion-item-group.js"; +import { IonItemOptions as IonItemOptionsElement, defineCustomElement as defineIonItemOptions } from "@ionic/core/components/ion-item-options.js"; +import { IonItemSliding as IonItemSlidingElement, defineCustomElement as defineIonItemSliding } from "@ionic/core/components/ion-item-sliding.js"; +import { IonLabel as IonLabelElement, defineCustomElement as defineIonLabel } from "@ionic/core/components/ion-label.js"; +import { IonListHeader as IonListHeaderElement, defineCustomElement as defineIonListHeader } from "@ionic/core/components/ion-list-header.js"; +import { IonList as IonListElement, defineCustomElement as defineIonList } from "@ionic/core/components/ion-list.js"; +import { IonMenuButton as IonMenuButtonElement, defineCustomElement as defineIonMenuButton } from "@ionic/core/components/ion-menu-button.js"; +import { IonMenuToggle as IonMenuToggleElement, defineCustomElement as defineIonMenuToggle } from "@ionic/core/components/ion-menu-toggle.js"; +import { IonMenu as IonMenuElement, defineCustomElement as defineIonMenu } from "@ionic/core/components/ion-menu.js"; +import { IonNavLink as IonNavLinkElement, defineCustomElement as defineIonNavLink } from "@ionic/core/components/ion-nav-link.js"; +import { IonNav as IonNavElement, defineCustomElement as defineIonNav } from "@ionic/core/components/ion-nav.js"; +import { IonNote as IonNoteElement, defineCustomElement as defineIonNote } from "@ionic/core/components/ion-note.js"; +import { IonPickerColumnOption as IonPickerColumnOptionElement, defineCustomElement as defineIonPickerColumnOption } from "@ionic/core/components/ion-picker-column-option.js"; +import { IonPickerColumn as IonPickerColumnElement, defineCustomElement as defineIonPickerColumn } from "@ionic/core/components/ion-picker-column.js"; +import { IonPicker as IonPickerElement, defineCustomElement as defineIonPicker } from "@ionic/core/components/ion-picker.js"; +import { IonProgressBar as IonProgressBarElement, defineCustomElement as defineIonProgressBar } from "@ionic/core/components/ion-progress-bar.js"; +import { IonRadioGroup as IonRadioGroupElement, defineCustomElement as defineIonRadioGroup } from "@ionic/core/components/ion-radio-group.js"; +import { IonRadio as IonRadioElement, defineCustomElement as defineIonRadio } from "@ionic/core/components/ion-radio.js"; +import { IonRange as IonRangeElement, defineCustomElement as defineIonRange } from "@ionic/core/components/ion-range.js"; +import { IonRefresherContent as IonRefresherContentElement, defineCustomElement as defineIonRefresherContent } from "@ionic/core/components/ion-refresher-content.js"; +import { IonRefresher as IonRefresherElement, defineCustomElement as defineIonRefresher } from "@ionic/core/components/ion-refresher.js"; +import { IonReorderGroup as IonReorderGroupElement, defineCustomElement as defineIonReorderGroup } from "@ionic/core/components/ion-reorder-group.js"; +import { IonReorder as IonReorderElement, defineCustomElement as defineIonReorder } from "@ionic/core/components/ion-reorder.js"; +import { IonRippleEffect as IonRippleEffectElement, defineCustomElement as defineIonRippleEffect } from "@ionic/core/components/ion-ripple-effect.js"; +import { IonRow as IonRowElement, defineCustomElement as defineIonRow } from "@ionic/core/components/ion-row.js"; +import { IonSearchbar as IonSearchbarElement, defineCustomElement as defineIonSearchbar } from "@ionic/core/components/ion-searchbar.js"; +import { IonSegmentButton as IonSegmentButtonElement, defineCustomElement as defineIonSegmentButton } from "@ionic/core/components/ion-segment-button.js"; +import { IonSegmentContent as IonSegmentContentElement, defineCustomElement as defineIonSegmentContent } from "@ionic/core/components/ion-segment-content.js"; +import { IonSegmentView as IonSegmentViewElement, defineCustomElement as defineIonSegmentView } from "@ionic/core/components/ion-segment-view.js"; +import { IonSegment as IonSegmentElement, defineCustomElement as defineIonSegment } from "@ionic/core/components/ion-segment.js"; +import { IonSelectModal as IonSelectModalElement, defineCustomElement as defineIonSelectModal } from "@ionic/core/components/ion-select-modal.js"; +import { IonSelectOption as IonSelectOptionElement, defineCustomElement as defineIonSelectOption } from "@ionic/core/components/ion-select-option.js"; +import { IonSelect as IonSelectElement, defineCustomElement as defineIonSelect } from "@ionic/core/components/ion-select.js"; +import { IonSkeletonText as IonSkeletonTextElement, defineCustomElement as defineIonSkeletonText } from "@ionic/core/components/ion-skeleton-text.js"; +import { IonSpinner as IonSpinnerElement, defineCustomElement as defineIonSpinner } from "@ionic/core/components/ion-spinner.js"; +import { IonSplitPane as IonSplitPaneElement, defineCustomElement as defineIonSplitPane } from "@ionic/core/components/ion-split-pane.js"; +import { IonTab as IonTabElement, defineCustomElement as defineIonTab } from "@ionic/core/components/ion-tab.js"; +import { IonText as IonTextElement, defineCustomElement as defineIonText } from "@ionic/core/components/ion-text.js"; +import { IonTextarea as IonTextareaElement, defineCustomElement as defineIonTextarea } from "@ionic/core/components/ion-textarea.js"; +import { IonThumbnail as IonThumbnailElement, defineCustomElement as defineIonThumbnail } from "@ionic/core/components/ion-thumbnail.js"; +import { IonTitle as IonTitleElement, defineCustomElement as defineIonTitle } from "@ionic/core/components/ion-title.js"; +import { IonToggle as IonToggleElement, defineCustomElement as defineIonToggle } from "@ionic/core/components/ion-toggle.js"; +import { IonToolbar as IonToolbarElement, defineCustomElement as defineIonToolbar } from "@ionic/core/components/ion-toolbar.js"; export type IonAccordionEvents = NonNullable; -export const IonAccordion: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonAccordion: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-accordion', elementClass: IonAccordionElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonAccordionEvents, - defineCustomElement: defineIonAccordion, - }); + defineCustomElement: defineIonAccordion +}); -export type IonAccordionGroupEvents = { - onIonChange: EventName>; -}; +export type IonAccordionGroupEvents = { onIonChange: EventName> }; -export const IonAccordionGroup: StencilReactComponent< - IonAccordionGroupElement, - IonAccordionGroupEvents, - Components.IonAccordionGroup -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-accordion-group', - elementClass: IonAccordionGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents, - defineCustomElement: defineIonAccordionGroup, +export const IonAccordionGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-accordion-group', + elementClass: IonAccordionGroupElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents, + defineCustomElement: defineIonAccordionGroup }); export type IonAvatarEvents = NonNullable; -export const IonAvatar: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonAvatar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-avatar', elementClass: IonAvatarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonAvatarEvents, - defineCustomElement: defineIonAvatar, - }); + defineCustomElement: defineIonAvatar +}); export type IonBackdropEvents = { onIonBackdropTap: EventName> }; -export const IonBackdrop: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonBackdrop: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-backdrop', elementClass: IonBackdropElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonBackdropTap: 'ionBackdropTap' } as IonBackdropEvents, - defineCustomElement: defineIonBackdrop, - }); + defineCustomElement: defineIonBackdrop +}); export type IonBadgeEvents = NonNullable; -export const IonBadge: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonBadge: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-badge', elementClass: IonBadgeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonBadgeEvents, - defineCustomElement: defineIonBadge, - }); + defineCustomElement: defineIonBadge +}); -export type IonBreadcrumbsEvents = { - onIonCollapsedClick: EventName>; -}; +export type IonBreadcrumbsEvents = { onIonCollapsedClick: EventName> }; -export const IonBreadcrumbs: StencilReactComponent< - IonBreadcrumbsElement, - IonBreadcrumbsEvents, - Components.IonBreadcrumbs -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-breadcrumbs', - elementClass: IonBreadcrumbsElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents, - defineCustomElement: defineIonBreadcrumbs, +export const IonBreadcrumbs: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-breadcrumbs', + elementClass: IonBreadcrumbsElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents, + defineCustomElement: defineIonBreadcrumbs }); export type IonButtonsEvents = NonNullable; -export const IonButtons: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonButtons: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-buttons', elementClass: IonButtonsElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonButtonsEvents, - defineCustomElement: defineIonButtons, - }); + defineCustomElement: defineIonButtons +}); export type IonCardContentEvents = NonNullable; -export const IonCardContent: StencilReactComponent< - IonCardContentElement, - IonCardContentEvents, - Components.IonCardContent -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-card-content', - elementClass: IonCardContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonCardContentEvents, - defineCustomElement: defineIonCardContent, +export const IonCardContent: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-card-content', + elementClass: IonCardContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonCardContentEvents, + defineCustomElement: defineIonCardContent }); export type IonCardHeaderEvents = NonNullable; -export const IonCardHeader: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonCardHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-card-header', elementClass: IonCardHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonCardHeaderEvents, - defineCustomElement: defineIonCardHeader, - }); + defineCustomElement: defineIonCardHeader +}); export type IonCardSubtitleEvents = NonNullable; -export const IonCardSubtitle: StencilReactComponent< - IonCardSubtitleElement, - IonCardSubtitleEvents, - Components.IonCardSubtitle -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-card-subtitle', - elementClass: IonCardSubtitleElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonCardSubtitleEvents, - defineCustomElement: defineIonCardSubtitle, +export const IonCardSubtitle: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-card-subtitle', + elementClass: IonCardSubtitleElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonCardSubtitleEvents, + defineCustomElement: defineIonCardSubtitle }); export type IonCardTitleEvents = NonNullable; -export const IonCardTitle: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonCardTitle: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-card-title', elementClass: IonCardTitleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonCardTitleEvents, - defineCustomElement: defineIonCardTitle, - }); + defineCustomElement: defineIonCardTitle +}); export type IonCheckboxEvents = { - onIonChange: EventName>; - onIonFocus: EventName>; - onIonBlur: EventName>; + onIonChange: EventName>, + onIonFocus: EventName>, + onIonBlur: EventName> }; -export const IonCheckbox: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonCheckbox: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-checkbox', elementClass: IonCheckboxElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur' } as IonCheckboxEvents, - defineCustomElement: defineIonCheckbox, - }); + defineCustomElement: defineIonCheckbox +}); export type IonChipEvents = NonNullable; -export const IonChip: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonChip: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-chip', elementClass: IonChipElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonChipEvents, - defineCustomElement: defineIonChip, - }); + defineCustomElement: defineIonChip +}); export type IonColEvents = NonNullable; -export const IonCol: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonCol: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-col', elementClass: IonColElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonColEvents, - defineCustomElement: defineIonCol, - }); + defineCustomElement: defineIonCol +}); export type IonContentEvents = { - onIonScrollStart: EventName>; - onIonScroll: EventName>; - onIonScrollEnd: EventName>; + onIonScrollStart: EventName>, + onIonScroll: EventName>, + onIonScrollEnd: EventName> }; -export const IonContent: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonContent: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-content', elementClass: IonContentElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonScrollStart: 'ionScrollStart', - onIonScroll: 'ionScroll', - onIonScrollEnd: 'ionScrollEnd', + onIonScrollStart: 'ionScrollStart', + onIonScroll: 'ionScroll', + onIonScrollEnd: 'ionScrollEnd' } as IonContentEvents, - defineCustomElement: defineIonContent, - }); + defineCustomElement: defineIonContent +}); export type IonDatetimeEvents = { - onIonCancel: EventName>; - onIonChange: EventName>; - onIonFocus: EventName>; - onIonBlur: EventName>; + onIonCancel: EventName>, + onIonChange: EventName>, + onIonFocus: EventName>, + onIonBlur: EventName> }; -export const IonDatetime: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonDatetime: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-datetime', elementClass: IonDatetimeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonCancel: 'ionCancel', - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', + onIonCancel: 'ionCancel', + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur' } as IonDatetimeEvents, - defineCustomElement: defineIonDatetime, - }); + defineCustomElement: defineIonDatetime +}); export type IonDatetimeButtonEvents = NonNullable; -export const IonDatetimeButton: StencilReactComponent< - IonDatetimeButtonElement, - IonDatetimeButtonEvents, - Components.IonDatetimeButton -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-datetime-button', - elementClass: IonDatetimeButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonDatetimeButtonEvents, - defineCustomElement: defineIonDatetimeButton, +export const IonDatetimeButton: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-datetime-button', + elementClass: IonDatetimeButtonElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonDatetimeButtonEvents, + defineCustomElement: defineIonDatetimeButton }); export type IonFabEvents = NonNullable; -export const IonFab: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonFab: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-fab', elementClass: IonFabElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFabEvents, - defineCustomElement: defineIonFab, - }); + defineCustomElement: defineIonFab +}); export type IonFabListEvents = NonNullable; -export const IonFabList: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonFabList: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-fab-list', elementClass: IonFabListElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFabListEvents, - defineCustomElement: defineIonFabList, - }); + defineCustomElement: defineIonFabList +}); export type IonFooterEvents = NonNullable; -export const IonFooter: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonFooter: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-footer', elementClass: IonFooterElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFooterEvents, - defineCustomElement: defineIonFooter, - }); + defineCustomElement: defineIonFooter +}); export type IonGridEvents = NonNullable; -export const IonGrid: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonGrid: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-grid', elementClass: IonGridElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonGridEvents, - defineCustomElement: defineIonGrid, - }); + defineCustomElement: defineIonGrid +}); export type IonHeaderEvents = NonNullable; -export const IonHeader: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-header', elementClass: IonHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonHeaderEvents, - defineCustomElement: defineIonHeader, - }); + defineCustomElement: defineIonHeader +}); export type IonImgEvents = { - onIonImgWillLoad: EventName>; - onIonImgDidLoad: EventName>; - onIonError: EventName>; + onIonImgWillLoad: EventName>, + onIonImgDidLoad: EventName>, + onIonError: EventName> }; -export const IonImg: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonImg: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-img', elementClass: IonImgElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonImgWillLoad: 'ionImgWillLoad', - onIonImgDidLoad: 'ionImgDidLoad', - onIonError: 'ionError', + onIonImgWillLoad: 'ionImgWillLoad', + onIonImgDidLoad: 'ionImgDidLoad', + onIonError: 'ionError' } as IonImgEvents, - defineCustomElement: defineIonImg, - }); + defineCustomElement: defineIonImg +}); export type IonInfiniteScrollEvents = { onIonInfinite: EventName> }; -export const IonInfiniteScroll: StencilReactComponent< - IonInfiniteScrollElement, - IonInfiniteScrollEvents, - Components.IonInfiniteScroll -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-infinite-scroll', - elementClass: IonInfiniteScrollElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents, - defineCustomElement: defineIonInfiniteScroll, +export const IonInfiniteScroll: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-infinite-scroll', + elementClass: IonInfiniteScrollElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents, + defineCustomElement: defineIonInfiniteScroll }); export type IonInfiniteScrollContentEvents = NonNullable; -export const IonInfiniteScrollContent: StencilReactComponent< - IonInfiniteScrollContentElement, - IonInfiniteScrollContentEvents, - Components.IonInfiniteScrollContent -> = /*@__PURE__*/ createComponent< - IonInfiniteScrollContentElement, - IonInfiniteScrollContentEvents, - Components.IonInfiniteScrollContent ->({ - tagName: 'ion-infinite-scroll-content', - elementClass: IonInfiniteScrollContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonInfiniteScrollContentEvents, - defineCustomElement: defineIonInfiniteScrollContent, +export const IonInfiniteScrollContent: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-infinite-scroll-content', + elementClass: IonInfiniteScrollContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonInfiniteScrollContentEvents, + defineCustomElement: defineIonInfiniteScrollContent }); export type IonInputEvents = { - onIonInput: EventName>; - onIonChange: EventName>; - onIonBlur: EventName>; - onIonFocus: EventName>; + onIonInput: EventName>, + onIonChange: EventName>, + onIonBlur: EventName>, + onIonFocus: EventName> }; -export const IonInput: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonInput: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-input', elementClass: IonInputElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus', + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus' } as IonInputEvents, - defineCustomElement: defineIonInput, - }); + defineCustomElement: defineIonInput +}); export type IonInputOtpEvents = { - onIonInput: EventName>; - onIonChange: EventName>; - onIonComplete: EventName>; - onIonBlur: EventName>; - onIonFocus: EventName>; + onIonInput: EventName>, + onIonChange: EventName>, + onIonComplete: EventName>, + onIonBlur: EventName>, + onIonFocus: EventName> }; -export const IonInputOtp: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonInputOtp: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-input-otp', elementClass: IonInputOtpElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonComplete: 'ionComplete', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus', + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonComplete: 'ionComplete', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus' } as IonInputOtpEvents, - defineCustomElement: defineIonInputOtp, - }); + defineCustomElement: defineIonInputOtp +}); export type IonInputPasswordToggleEvents = NonNullable; -export const IonInputPasswordToggle: StencilReactComponent< - IonInputPasswordToggleElement, - IonInputPasswordToggleEvents, - Components.IonInputPasswordToggle -> = /*@__PURE__*/ createComponent< - IonInputPasswordToggleElement, - IonInputPasswordToggleEvents, - Components.IonInputPasswordToggle ->({ - tagName: 'ion-input-password-toggle', - elementClass: IonInputPasswordToggleElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonInputPasswordToggleEvents, - defineCustomElement: defineIonInputPasswordToggle, +export const IonInputPasswordToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-input-password-toggle', + elementClass: IonInputPasswordToggleElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonInputPasswordToggleEvents, + defineCustomElement: defineIonInputPasswordToggle }); export type IonItemDividerEvents = NonNullable; -export const IonItemDivider: StencilReactComponent< - IonItemDividerElement, - IonItemDividerEvents, - Components.IonItemDivider -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-divider', - elementClass: IonItemDividerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonItemDividerEvents, - defineCustomElement: defineIonItemDivider, +export const IonItemDivider: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-divider', + elementClass: IonItemDividerElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonItemDividerEvents, + defineCustomElement: defineIonItemDivider }); export type IonItemGroupEvents = NonNullable; -export const IonItemGroup: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonItemGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-item-group', elementClass: IonItemGroupElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonItemGroupEvents, - defineCustomElement: defineIonItemGroup, - }); + defineCustomElement: defineIonItemGroup +}); export type IonItemOptionsEvents = { onIonSwipe: EventName> }; -export const IonItemOptions: StencilReactComponent< - IonItemOptionsElement, - IonItemOptionsEvents, - Components.IonItemOptions -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-options', - elementClass: IonItemOptionsElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents, - defineCustomElement: defineIonItemOptions, +export const IonItemOptions: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-options', + elementClass: IonItemOptionsElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents, + defineCustomElement: defineIonItemOptions }); export type IonItemSlidingEvents = { onIonDrag: EventName> }; -export const IonItemSliding: StencilReactComponent< - IonItemSlidingElement, - IonItemSlidingEvents, - Components.IonItemSliding -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-sliding', - elementClass: IonItemSlidingElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents, - defineCustomElement: defineIonItemSliding, +export const IonItemSliding: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-sliding', + elementClass: IonItemSlidingElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents, + defineCustomElement: defineIonItemSliding }); export type IonLabelEvents = NonNullable; -export const IonLabel: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonLabel: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-label', elementClass: IonLabelElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonLabelEvents, - defineCustomElement: defineIonLabel, - }); + defineCustomElement: defineIonLabel +}); export type IonListEvents = NonNullable; -export const IonList: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonList: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-list', elementClass: IonListElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonListEvents, - defineCustomElement: defineIonList, - }); + defineCustomElement: defineIonList +}); export type IonListHeaderEvents = NonNullable; -export const IonListHeader: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonListHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-list-header', elementClass: IonListHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonListHeaderEvents, - defineCustomElement: defineIonListHeader, - }); + defineCustomElement: defineIonListHeader +}); export type IonMenuEvents = { - onIonWillOpen: EventName>; - onIonWillClose: EventName>; - onIonDidOpen: EventName>; - onIonDidClose: EventName>; + onIonWillOpen: EventName>, + onIonWillClose: EventName>, + onIonDidOpen: EventName>, + onIonDidClose: EventName> }; -export const IonMenu: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonMenu: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-menu', elementClass: IonMenuElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonWillOpen: 'ionWillOpen', - onIonWillClose: 'ionWillClose', - onIonDidOpen: 'ionDidOpen', - onIonDidClose: 'ionDidClose', + onIonWillOpen: 'ionWillOpen', + onIonWillClose: 'ionWillClose', + onIonDidOpen: 'ionDidOpen', + onIonDidClose: 'ionDidClose' } as IonMenuEvents, - defineCustomElement: defineIonMenu, - }); + defineCustomElement: defineIonMenu +}); export type IonMenuButtonEvents = NonNullable; -export const IonMenuButton: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonMenuButton: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-menu-button', elementClass: IonMenuButtonElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonMenuButtonEvents, - defineCustomElement: defineIonMenuButton, - }); + defineCustomElement: defineIonMenuButton +}); export type IonMenuToggleEvents = NonNullable; -export const IonMenuToggle: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonMenuToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-menu-toggle', elementClass: IonMenuToggleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonMenuToggleEvents, - defineCustomElement: defineIonMenuToggle, - }); + defineCustomElement: defineIonMenuToggle +}); export type IonNavEvents = { - onIonNavWillChange: EventName>; - onIonNavDidChange: EventName>; + onIonNavWillChange: EventName>, + onIonNavDidChange: EventName> }; -export const IonNav: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonNav: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-nav', elementClass: IonNavElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonNavWillChange: 'ionNavWillChange', - onIonNavDidChange: 'ionNavDidChange', + onIonNavWillChange: 'ionNavWillChange', + onIonNavDidChange: 'ionNavDidChange' } as IonNavEvents, - defineCustomElement: defineIonNav, - }); + defineCustomElement: defineIonNav +}); export type IonNavLinkEvents = NonNullable; -export const IonNavLink: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonNavLink: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-nav-link', elementClass: IonNavLinkElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonNavLinkEvents, - defineCustomElement: defineIonNavLink, - }); + defineCustomElement: defineIonNavLink +}); export type IonNoteEvents = NonNullable; -export const IonNote: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonNote: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-note', elementClass: IonNoteElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonNoteEvents, - defineCustomElement: defineIonNote, - }); + defineCustomElement: defineIonNote +}); export type IonPickerEvents = NonNullable; -export const IonPicker: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonPicker: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-picker', elementClass: IonPickerElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonPickerEvents, - defineCustomElement: defineIonPicker, - }); + defineCustomElement: defineIonPicker +}); -export type IonPickerColumnEvents = { - onIonChange: EventName>; -}; +export type IonPickerColumnEvents = { onIonChange: EventName> }; -export const IonPickerColumn: StencilReactComponent< - IonPickerColumnElement, - IonPickerColumnEvents, - Components.IonPickerColumn -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-picker-column', - elementClass: IonPickerColumnElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonChange: 'ionChange' } as IonPickerColumnEvents, - defineCustomElement: defineIonPickerColumn, +export const IonPickerColumn: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-picker-column', + elementClass: IonPickerColumnElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonChange: 'ionChange' } as IonPickerColumnEvents, + defineCustomElement: defineIonPickerColumn }); export type IonPickerColumnOptionEvents = NonNullable; -export const IonPickerColumnOption: StencilReactComponent< - IonPickerColumnOptionElement, - IonPickerColumnOptionEvents, - Components.IonPickerColumnOption -> = /*@__PURE__*/ createComponent< - IonPickerColumnOptionElement, - IonPickerColumnOptionEvents, - Components.IonPickerColumnOption ->({ - tagName: 'ion-picker-column-option', - elementClass: IonPickerColumnOptionElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonPickerColumnOptionEvents, - defineCustomElement: defineIonPickerColumnOption, +export const IonPickerColumnOption: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-picker-column-option', + elementClass: IonPickerColumnOptionElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonPickerColumnOptionEvents, + defineCustomElement: defineIonPickerColumnOption }); export type IonProgressBarEvents = NonNullable; -export const IonProgressBar: StencilReactComponent< - IonProgressBarElement, - IonProgressBarEvents, - Components.IonProgressBar -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-progress-bar', - elementClass: IonProgressBarElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonProgressBarEvents, - defineCustomElement: defineIonProgressBar, +export const IonProgressBar: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-progress-bar', + elementClass: IonProgressBarElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonProgressBarEvents, + defineCustomElement: defineIonProgressBar }); export type IonRadioEvents = { - onIonFocus: EventName>; - onIonBlur: EventName>; + onIonFocus: EventName>, + onIonBlur: EventName> }; -export const IonRadio: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonRadio: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-radio', elementClass: IonRadioElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur' } as IonRadioEvents, - defineCustomElement: defineIonRadio, - }); + defineCustomElement: defineIonRadio +}); export type IonRadioGroupEvents = { onIonChange: EventName> }; -export const IonRadioGroup: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonRadioGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-radio-group', elementClass: IonRadioGroupElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonChange: 'ionChange' } as IonRadioGroupEvents, - defineCustomElement: defineIonRadioGroup, - }); + defineCustomElement: defineIonRadioGroup +}); export type IonRangeEvents = { - onIonChange: EventName>; - onIonInput: EventName>; - onIonFocus: EventName>; - onIonBlur: EventName>; - onIonKnobMoveStart: EventName>; - onIonKnobMoveEnd: EventName>; + onIonChange: EventName>, + onIonInput: EventName>, + onIonFocus: EventName>, + onIonBlur: EventName>, + onIonKnobMoveStart: EventName>, + onIonKnobMoveEnd: EventName> }; -export const IonRange: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonRange: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-range', elementClass: IonRangeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonInput: 'ionInput', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', - onIonKnobMoveStart: 'ionKnobMoveStart', - onIonKnobMoveEnd: 'ionKnobMoveEnd', + onIonChange: 'ionChange', + onIonInput: 'ionInput', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', + onIonKnobMoveStart: 'ionKnobMoveStart', + onIonKnobMoveEnd: 'ionKnobMoveEnd' } as IonRangeEvents, - defineCustomElement: defineIonRange, - }); + defineCustomElement: defineIonRange +}); export type IonRefresherEvents = { - onIonRefresh: EventName>; - onIonPull: EventName>; - onIonStart: EventName>; - onIonPullStart: EventName>; - onIonPullEnd: EventName>; + onIonRefresh: EventName>, + onIonPull: EventName>, + onIonStart: EventName>, + onIonPullStart: EventName>, + onIonPullEnd: EventName> }; -export const IonRefresher: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonRefresher: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-refresher', elementClass: IonRefresherElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonRefresh: 'ionRefresh', - onIonPull: 'ionPull', - onIonStart: 'ionStart', - onIonPullStart: 'ionPullStart', - onIonPullEnd: 'ionPullEnd', + onIonRefresh: 'ionRefresh', + onIonPull: 'ionPull', + onIonStart: 'ionStart', + onIonPullStart: 'ionPullStart', + onIonPullEnd: 'ionPullEnd' } as IonRefresherEvents, - defineCustomElement: defineIonRefresher, - }); + defineCustomElement: defineIonRefresher +}); export type IonRefresherContentEvents = NonNullable; -export const IonRefresherContent: StencilReactComponent< - IonRefresherContentElement, - IonRefresherContentEvents, - Components.IonRefresherContent -> = /*@__PURE__*/ createComponent< - IonRefresherContentElement, - IonRefresherContentEvents, - Components.IonRefresherContent ->({ - tagName: 'ion-refresher-content', - elementClass: IonRefresherContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonRefresherContentEvents, - defineCustomElement: defineIonRefresherContent, +export const IonRefresherContent: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-refresher-content', + elementClass: IonRefresherContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonRefresherContentEvents, + defineCustomElement: defineIonRefresherContent }); export type IonReorderEvents = NonNullable; -export const IonReorder: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonReorder: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-reorder', elementClass: IonReorderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonReorderEvents, - defineCustomElement: defineIonReorder, - }); + defineCustomElement: defineIonReorder +}); export type IonReorderGroupEvents = { - onIonItemReorder: EventName>; - onIonReorderStart: EventName>; - onIonReorderMove: EventName>; - onIonReorderEnd: EventName>; + onIonItemReorder: EventName>, + onIonReorderStart: EventName>, + onIonReorderMove: EventName>, + onIonReorderEnd: EventName> }; -export const IonReorderGroup: StencilReactComponent< - IonReorderGroupElement, - IonReorderGroupEvents, - Components.IonReorderGroup -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-reorder-group', - elementClass: IonReorderGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { - onIonItemReorder: 'ionItemReorder', - onIonReorderStart: 'ionReorderStart', - onIonReorderMove: 'ionReorderMove', - onIonReorderEnd: 'ionReorderEnd', - } as IonReorderGroupEvents, - defineCustomElement: defineIonReorderGroup, +export const IonReorderGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-reorder-group', + elementClass: IonReorderGroupElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { + onIonItemReorder: 'ionItemReorder', + onIonReorderStart: 'ionReorderStart', + onIonReorderMove: 'ionReorderMove', + onIonReorderEnd: 'ionReorderEnd' + } as IonReorderGroupEvents, + defineCustomElement: defineIonReorderGroup }); export type IonRippleEffectEvents = NonNullable; -export const IonRippleEffect: StencilReactComponent< - IonRippleEffectElement, - IonRippleEffectEvents, - Components.IonRippleEffect -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-ripple-effect', - elementClass: IonRippleEffectElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonRippleEffectEvents, - defineCustomElement: defineIonRippleEffect, +export const IonRippleEffect: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-ripple-effect', + elementClass: IonRippleEffectElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonRippleEffectEvents, + defineCustomElement: defineIonRippleEffect }); export type IonRowEvents = NonNullable; -export const IonRow: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonRow: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-row', elementClass: IonRowElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonRowEvents, - defineCustomElement: defineIonRow, - }); + defineCustomElement: defineIonRow +}); export type IonSearchbarEvents = { - onIonInput: EventName>; - onIonChange: EventName>; - onIonCancel: EventName>; - onIonClear: EventName>; - onIonBlur: EventName>; - onIonFocus: EventName>; + onIonInput: EventName>, + onIonChange: EventName>, + onIonCancel: EventName>, + onIonClear: EventName>, + onIonBlur: EventName>, + onIonFocus: EventName> }; -export const IonSearchbar: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonSearchbar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-searchbar', elementClass: IonSearchbarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonCancel: 'ionCancel', - onIonClear: 'ionClear', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus', + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonCancel: 'ionCancel', + onIonClear: 'ionClear', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus' } as IonSearchbarEvents, - defineCustomElement: defineIonSearchbar, - }); + defineCustomElement: defineIonSearchbar +}); export type IonSegmentEvents = { onIonChange: EventName> }; -export const IonSegment: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonSegment: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-segment', elementClass: IonSegmentElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonChange: 'ionChange' } as IonSegmentEvents, - defineCustomElement: defineIonSegment, - }); + defineCustomElement: defineIonSegment +}); export type IonSegmentButtonEvents = NonNullable; -export const IonSegmentButton: StencilReactComponent< - IonSegmentButtonElement, - IonSegmentButtonEvents, - Components.IonSegmentButton -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-button', - elementClass: IonSegmentButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSegmentButtonEvents, - defineCustomElement: defineIonSegmentButton, +export const IonSegmentButton: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-button', + elementClass: IonSegmentButtonElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSegmentButtonEvents, + defineCustomElement: defineIonSegmentButton }); export type IonSegmentContentEvents = NonNullable; -export const IonSegmentContent: StencilReactComponent< - IonSegmentContentElement, - IonSegmentContentEvents, - Components.IonSegmentContent -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-content', - elementClass: IonSegmentContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSegmentContentEvents, - defineCustomElement: defineIonSegmentContent, -}); - -export type IonSegmentViewEvents = { - onIonSegmentViewScroll: EventName>; -}; +export const IonSegmentContent: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-content', + elementClass: IonSegmentContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSegmentContentEvents, + defineCustomElement: defineIonSegmentContent +}); + +export type IonSegmentViewEvents = { onIonSegmentViewScroll: EventName> }; -export const IonSegmentView: StencilReactComponent< - IonSegmentViewElement, - IonSegmentViewEvents, - Components.IonSegmentView -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-view', - elementClass: IonSegmentViewElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' } as IonSegmentViewEvents, - defineCustomElement: defineIonSegmentView, +export const IonSegmentView: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-view', + elementClass: IonSegmentViewElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' } as IonSegmentViewEvents, + defineCustomElement: defineIonSegmentView }); export type IonSelectEvents = { - onIonChange: EventName>; - onIonCancel: EventName>; - onIonDismiss: EventName>; - onIonFocus: EventName>; - onIonBlur: EventName>; + onIonChange: EventName>, + onIonCancel: EventName>, + onIonDismiss: EventName>, + onIonFocus: EventName>, + onIonBlur: EventName> }; -export const IonSelect: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonSelect: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-select', elementClass: IonSelectElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonCancel: 'ionCancel', - onIonDismiss: 'ionDismiss', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', + onIonChange: 'ionChange', + onIonCancel: 'ionCancel', + onIonDismiss: 'ionDismiss', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur' } as IonSelectEvents, - defineCustomElement: defineIonSelect, - }); + defineCustomElement: defineIonSelect +}); export type IonSelectModalEvents = NonNullable; -export const IonSelectModal: StencilReactComponent< - IonSelectModalElement, - IonSelectModalEvents, - Components.IonSelectModal -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-select-modal', - elementClass: IonSelectModalElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSelectModalEvents, - defineCustomElement: defineIonSelectModal, +export const IonSelectModal: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-select-modal', + elementClass: IonSelectModalElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSelectModalEvents, + defineCustomElement: defineIonSelectModal }); export type IonSelectOptionEvents = NonNullable; -export const IonSelectOption: StencilReactComponent< - IonSelectOptionElement, - IonSelectOptionEvents, - Components.IonSelectOption -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-select-option', - elementClass: IonSelectOptionElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSelectOptionEvents, - defineCustomElement: defineIonSelectOption, +export const IonSelectOption: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-select-option', + elementClass: IonSelectOptionElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSelectOptionEvents, + defineCustomElement: defineIonSelectOption }); export type IonSkeletonTextEvents = NonNullable; -export const IonSkeletonText: StencilReactComponent< - IonSkeletonTextElement, - IonSkeletonTextEvents, - Components.IonSkeletonText -> = /*@__PURE__*/ createComponent({ - tagName: 'ion-skeleton-text', - elementClass: IonSkeletonTextElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSkeletonTextEvents, - defineCustomElement: defineIonSkeletonText, +export const IonSkeletonText: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'ion-skeleton-text', + elementClass: IonSkeletonTextElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSkeletonTextEvents, + defineCustomElement: defineIonSkeletonText }); export type IonSpinnerEvents = NonNullable; -export const IonSpinner: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonSpinner: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-spinner', elementClass: IonSpinnerElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonSpinnerEvents, - defineCustomElement: defineIonSpinner, - }); + defineCustomElement: defineIonSpinner +}); export type IonSplitPaneEvents = { onIonSplitPaneVisible: EventName> }; -export const IonSplitPane: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonSplitPane: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-split-pane', elementClass: IonSplitPaneElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' } as IonSplitPaneEvents, - defineCustomElement: defineIonSplitPane, - }); + defineCustomElement: defineIonSplitPane +}); export type IonTabEvents = NonNullable; -export const IonTab: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonTab: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-tab', elementClass: IonTabElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTabEvents, - defineCustomElement: defineIonTab, - }); + defineCustomElement: defineIonTab +}); export type IonTextEvents = NonNullable; -export const IonText: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonText: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-text', elementClass: IonTextElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTextEvents, - defineCustomElement: defineIonText, - }); + defineCustomElement: defineIonText +}); export type IonTextareaEvents = { - onIonChange: EventName>; - onIonInput: EventName>; - onIonBlur: EventName>; - onIonFocus: EventName>; + onIonChange: EventName>, + onIonInput: EventName>, + onIonBlur: EventName>, + onIonFocus: EventName> }; -export const IonTextarea: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonTextarea: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-textarea', elementClass: IonTextareaElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonInput: 'ionInput', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus', + onIonChange: 'ionChange', + onIonInput: 'ionInput', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus' } as IonTextareaEvents, - defineCustomElement: defineIonTextarea, - }); + defineCustomElement: defineIonTextarea +}); export type IonThumbnailEvents = NonNullable; -export const IonThumbnail: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonThumbnail: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-thumbnail', elementClass: IonThumbnailElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonThumbnailEvents, - defineCustomElement: defineIonThumbnail, - }); + defineCustomElement: defineIonThumbnail +}); export type IonTitleEvents = NonNullable; -export const IonTitle: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonTitle: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-title', elementClass: IonTitleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTitleEvents, - defineCustomElement: defineIonTitle, - }); + defineCustomElement: defineIonTitle +}); export type IonToggleEvents = { - onIonChange: EventName>; - onIonFocus: EventName>; - onIonBlur: EventName>; + onIonChange: EventName>, + onIonFocus: EventName>, + onIonBlur: EventName> }; -export const IonToggle: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-toggle', elementClass: IonToggleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur' } as IonToggleEvents, - defineCustomElement: defineIonToggle, - }); + defineCustomElement: defineIonToggle +}); export type IonToolbarEvents = NonNullable; -export const IonToolbar: StencilReactComponent = - /*@__PURE__*/ createComponent({ +export const IonToolbar: StencilReactComponent = /*@__PURE__*/ createComponent({ tagName: 'ion-toolbar', elementClass: IonToolbarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonToolbarEvents, - defineCustomElement: defineIonToolbar, - }); + defineCustomElement: defineIonToolbar +}); From ea485d07b0ca864084d4acf38330334227b505d1 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 30 Jun 2026 16:58:18 -0400 Subject: [PATCH 2/4] style: run lint for React --- packages/react/src/components/components.ts | 1433 ++++++++++++------- 1 file changed, 918 insertions(+), 515 deletions(-) diff --git a/packages/react/src/components/components.ts b/packages/react/src/components/components.ts index 785a7bfab0e..7080edec552 100644 --- a/packages/react/src/components/components.ts +++ b/packages/react/src/components/components.ts @@ -11,1027 +11,1430 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar import { createComponent } from '@stencil/react-output-target/runtime'; import React from 'react'; -import { type AccordionGroupChangeEventDetail, type BreadcrumbCollapsedClickEventDetail, type CheckboxChangeEventDetail, type DatetimeChangeEventDetail, type InputChangeEventDetail, type InputInputEventDetail, type InputOtpChangeEventDetail, type InputOtpCompleteEventDetail, type InputOtpInputEventDetail, type IonAccordionGroupCustomEvent, type IonBackdropCustomEvent, type IonBreadcrumbsCustomEvent, type IonCheckboxCustomEvent, type IonContentCustomEvent, type IonDatetimeCustomEvent, type IonImgCustomEvent, type IonInfiniteScrollCustomEvent, type IonInputCustomEvent, type IonInputOtpCustomEvent, type IonItemOptionsCustomEvent, type IonItemSlidingCustomEvent, type IonMenuCustomEvent, type IonNavCustomEvent, type IonPickerColumnCustomEvent, type IonRadioCustomEvent, type IonRadioGroupCustomEvent, type IonRangeCustomEvent, type IonRefresherCustomEvent, type IonReorderGroupCustomEvent, type IonSearchbarCustomEvent, type IonSegmentCustomEvent, type IonSegmentViewCustomEvent, type IonSelectCustomEvent, type IonSplitPaneCustomEvent, type IonTextareaCustomEvent, type IonToggleCustomEvent, type ItemReorderEventDetail, type MenuCloseEventDetail, type PickerColumnChangeEventDetail, type RadioGroupChangeEventDetail, type RangeChangeEventDetail, type RangeKnobMoveEndEventDetail, type RangeKnobMoveStartEventDetail, type RefresherEventDetail, type RefresherPullEndEventDetail, type ReorderEndEventDetail, type ReorderMoveEventDetail, type ScrollBaseDetail, type ScrollDetail, type SearchbarChangeEventDetail, type SearchbarInputEventDetail, type SegmentChangeEventDetail, type SegmentViewScrollEvent, type SelectChangeEventDetail, type TextareaChangeEventDetail, type TextareaInputEventDetail, type ToggleChangeEventDetail } from "@ionic/core"; -import type { Components } from "@ionic/core/components"; -import { IonAccordionGroup as IonAccordionGroupElement, defineCustomElement as defineIonAccordionGroup } from "@ionic/core/components/ion-accordion-group.js"; -import { IonAccordion as IonAccordionElement, defineCustomElement as defineIonAccordion } from "@ionic/core/components/ion-accordion.js"; -import { IonAvatar as IonAvatarElement, defineCustomElement as defineIonAvatar } from "@ionic/core/components/ion-avatar.js"; -import { IonBackdrop as IonBackdropElement, defineCustomElement as defineIonBackdrop } from "@ionic/core/components/ion-backdrop.js"; -import { IonBadge as IonBadgeElement, defineCustomElement as defineIonBadge } from "@ionic/core/components/ion-badge.js"; -import { IonBreadcrumbs as IonBreadcrumbsElement, defineCustomElement as defineIonBreadcrumbs } from "@ionic/core/components/ion-breadcrumbs.js"; -import { IonButtons as IonButtonsElement, defineCustomElement as defineIonButtons } from "@ionic/core/components/ion-buttons.js"; -import { IonCardContent as IonCardContentElement, defineCustomElement as defineIonCardContent } from "@ionic/core/components/ion-card-content.js"; -import { IonCardHeader as IonCardHeaderElement, defineCustomElement as defineIonCardHeader } from "@ionic/core/components/ion-card-header.js"; -import { IonCardSubtitle as IonCardSubtitleElement, defineCustomElement as defineIonCardSubtitle } from "@ionic/core/components/ion-card-subtitle.js"; -import { IonCardTitle as IonCardTitleElement, defineCustomElement as defineIonCardTitle } from "@ionic/core/components/ion-card-title.js"; -import { IonCheckbox as IonCheckboxElement, defineCustomElement as defineIonCheckbox } from "@ionic/core/components/ion-checkbox.js"; -import { IonChip as IonChipElement, defineCustomElement as defineIonChip } from "@ionic/core/components/ion-chip.js"; -import { IonCol as IonColElement, defineCustomElement as defineIonCol } from "@ionic/core/components/ion-col.js"; -import { IonContent as IonContentElement, defineCustomElement as defineIonContent } from "@ionic/core/components/ion-content.js"; -import { IonDatetimeButton as IonDatetimeButtonElement, defineCustomElement as defineIonDatetimeButton } from "@ionic/core/components/ion-datetime-button.js"; -import { IonDatetime as IonDatetimeElement, defineCustomElement as defineIonDatetime } from "@ionic/core/components/ion-datetime.js"; -import { IonFabList as IonFabListElement, defineCustomElement as defineIonFabList } from "@ionic/core/components/ion-fab-list.js"; -import { IonFab as IonFabElement, defineCustomElement as defineIonFab } from "@ionic/core/components/ion-fab.js"; -import { IonFooter as IonFooterElement, defineCustomElement as defineIonFooter } from "@ionic/core/components/ion-footer.js"; -import { IonGrid as IonGridElement, defineCustomElement as defineIonGrid } from "@ionic/core/components/ion-grid.js"; -import { IonHeader as IonHeaderElement, defineCustomElement as defineIonHeader } from "@ionic/core/components/ion-header.js"; -import { IonImg as IonImgElement, defineCustomElement as defineIonImg } from "@ionic/core/components/ion-img.js"; -import { IonInfiniteScrollContent as IonInfiniteScrollContentElement, defineCustomElement as defineIonInfiniteScrollContent } from "@ionic/core/components/ion-infinite-scroll-content.js"; -import { IonInfiniteScroll as IonInfiniteScrollElement, defineCustomElement as defineIonInfiniteScroll } from "@ionic/core/components/ion-infinite-scroll.js"; -import { IonInputOtp as IonInputOtpElement, defineCustomElement as defineIonInputOtp } from "@ionic/core/components/ion-input-otp.js"; -import { IonInputPasswordToggle as IonInputPasswordToggleElement, defineCustomElement as defineIonInputPasswordToggle } from "@ionic/core/components/ion-input-password-toggle.js"; -import { IonInput as IonInputElement, defineCustomElement as defineIonInput } from "@ionic/core/components/ion-input.js"; -import { IonItemDivider as IonItemDividerElement, defineCustomElement as defineIonItemDivider } from "@ionic/core/components/ion-item-divider.js"; -import { IonItemGroup as IonItemGroupElement, defineCustomElement as defineIonItemGroup } from "@ionic/core/components/ion-item-group.js"; -import { IonItemOptions as IonItemOptionsElement, defineCustomElement as defineIonItemOptions } from "@ionic/core/components/ion-item-options.js"; -import { IonItemSliding as IonItemSlidingElement, defineCustomElement as defineIonItemSliding } from "@ionic/core/components/ion-item-sliding.js"; -import { IonLabel as IonLabelElement, defineCustomElement as defineIonLabel } from "@ionic/core/components/ion-label.js"; -import { IonListHeader as IonListHeaderElement, defineCustomElement as defineIonListHeader } from "@ionic/core/components/ion-list-header.js"; -import { IonList as IonListElement, defineCustomElement as defineIonList } from "@ionic/core/components/ion-list.js"; -import { IonMenuButton as IonMenuButtonElement, defineCustomElement as defineIonMenuButton } from "@ionic/core/components/ion-menu-button.js"; -import { IonMenuToggle as IonMenuToggleElement, defineCustomElement as defineIonMenuToggle } from "@ionic/core/components/ion-menu-toggle.js"; -import { IonMenu as IonMenuElement, defineCustomElement as defineIonMenu } from "@ionic/core/components/ion-menu.js"; -import { IonNavLink as IonNavLinkElement, defineCustomElement as defineIonNavLink } from "@ionic/core/components/ion-nav-link.js"; -import { IonNav as IonNavElement, defineCustomElement as defineIonNav } from "@ionic/core/components/ion-nav.js"; -import { IonNote as IonNoteElement, defineCustomElement as defineIonNote } from "@ionic/core/components/ion-note.js"; -import { IonPickerColumnOption as IonPickerColumnOptionElement, defineCustomElement as defineIonPickerColumnOption } from "@ionic/core/components/ion-picker-column-option.js"; -import { IonPickerColumn as IonPickerColumnElement, defineCustomElement as defineIonPickerColumn } from "@ionic/core/components/ion-picker-column.js"; -import { IonPicker as IonPickerElement, defineCustomElement as defineIonPicker } from "@ionic/core/components/ion-picker.js"; -import { IonProgressBar as IonProgressBarElement, defineCustomElement as defineIonProgressBar } from "@ionic/core/components/ion-progress-bar.js"; -import { IonRadioGroup as IonRadioGroupElement, defineCustomElement as defineIonRadioGroup } from "@ionic/core/components/ion-radio-group.js"; -import { IonRadio as IonRadioElement, defineCustomElement as defineIonRadio } from "@ionic/core/components/ion-radio.js"; -import { IonRange as IonRangeElement, defineCustomElement as defineIonRange } from "@ionic/core/components/ion-range.js"; -import { IonRefresherContent as IonRefresherContentElement, defineCustomElement as defineIonRefresherContent } from "@ionic/core/components/ion-refresher-content.js"; -import { IonRefresher as IonRefresherElement, defineCustomElement as defineIonRefresher } from "@ionic/core/components/ion-refresher.js"; -import { IonReorderGroup as IonReorderGroupElement, defineCustomElement as defineIonReorderGroup } from "@ionic/core/components/ion-reorder-group.js"; -import { IonReorder as IonReorderElement, defineCustomElement as defineIonReorder } from "@ionic/core/components/ion-reorder.js"; -import { IonRippleEffect as IonRippleEffectElement, defineCustomElement as defineIonRippleEffect } from "@ionic/core/components/ion-ripple-effect.js"; -import { IonRow as IonRowElement, defineCustomElement as defineIonRow } from "@ionic/core/components/ion-row.js"; -import { IonSearchbar as IonSearchbarElement, defineCustomElement as defineIonSearchbar } from "@ionic/core/components/ion-searchbar.js"; -import { IonSegmentButton as IonSegmentButtonElement, defineCustomElement as defineIonSegmentButton } from "@ionic/core/components/ion-segment-button.js"; -import { IonSegmentContent as IonSegmentContentElement, defineCustomElement as defineIonSegmentContent } from "@ionic/core/components/ion-segment-content.js"; -import { IonSegmentView as IonSegmentViewElement, defineCustomElement as defineIonSegmentView } from "@ionic/core/components/ion-segment-view.js"; -import { IonSegment as IonSegmentElement, defineCustomElement as defineIonSegment } from "@ionic/core/components/ion-segment.js"; -import { IonSelectModal as IonSelectModalElement, defineCustomElement as defineIonSelectModal } from "@ionic/core/components/ion-select-modal.js"; -import { IonSelectOption as IonSelectOptionElement, defineCustomElement as defineIonSelectOption } from "@ionic/core/components/ion-select-option.js"; -import { IonSelect as IonSelectElement, defineCustomElement as defineIonSelect } from "@ionic/core/components/ion-select.js"; -import { IonSkeletonText as IonSkeletonTextElement, defineCustomElement as defineIonSkeletonText } from "@ionic/core/components/ion-skeleton-text.js"; -import { IonSpinner as IonSpinnerElement, defineCustomElement as defineIonSpinner } from "@ionic/core/components/ion-spinner.js"; -import { IonSplitPane as IonSplitPaneElement, defineCustomElement as defineIonSplitPane } from "@ionic/core/components/ion-split-pane.js"; -import { IonTab as IonTabElement, defineCustomElement as defineIonTab } from "@ionic/core/components/ion-tab.js"; -import { IonText as IonTextElement, defineCustomElement as defineIonText } from "@ionic/core/components/ion-text.js"; -import { IonTextarea as IonTextareaElement, defineCustomElement as defineIonTextarea } from "@ionic/core/components/ion-textarea.js"; -import { IonThumbnail as IonThumbnailElement, defineCustomElement as defineIonThumbnail } from "@ionic/core/components/ion-thumbnail.js"; -import { IonTitle as IonTitleElement, defineCustomElement as defineIonTitle } from "@ionic/core/components/ion-title.js"; -import { IonToggle as IonToggleElement, defineCustomElement as defineIonToggle } from "@ionic/core/components/ion-toggle.js"; -import { IonToolbar as IonToolbarElement, defineCustomElement as defineIonToolbar } from "@ionic/core/components/ion-toolbar.js"; +import { + type AccordionGroupChangeEventDetail, + type BreadcrumbCollapsedClickEventDetail, + type CheckboxChangeEventDetail, + type DatetimeChangeEventDetail, + type InputChangeEventDetail, + type InputInputEventDetail, + type InputOtpChangeEventDetail, + type InputOtpCompleteEventDetail, + type InputOtpInputEventDetail, + type IonAccordionGroupCustomEvent, + type IonBackdropCustomEvent, + type IonBreadcrumbsCustomEvent, + type IonCheckboxCustomEvent, + type IonContentCustomEvent, + type IonDatetimeCustomEvent, + type IonImgCustomEvent, + type IonInfiniteScrollCustomEvent, + type IonInputCustomEvent, + type IonInputOtpCustomEvent, + type IonItemOptionsCustomEvent, + type IonItemSlidingCustomEvent, + type IonMenuCustomEvent, + type IonNavCustomEvent, + type IonPickerColumnCustomEvent, + type IonRadioCustomEvent, + type IonRadioGroupCustomEvent, + type IonRangeCustomEvent, + type IonRefresherCustomEvent, + type IonReorderGroupCustomEvent, + type IonSearchbarCustomEvent, + type IonSegmentCustomEvent, + type IonSegmentViewCustomEvent, + type IonSelectCustomEvent, + type IonSplitPaneCustomEvent, + type IonTextareaCustomEvent, + type IonToggleCustomEvent, + type ItemReorderEventDetail, + type MenuCloseEventDetail, + type PickerColumnChangeEventDetail, + type RadioGroupChangeEventDetail, + type RangeChangeEventDetail, + type RangeKnobMoveEndEventDetail, + type RangeKnobMoveStartEventDetail, + type RefresherEventDetail, + type RefresherPullEndEventDetail, + type ReorderEndEventDetail, + type ReorderMoveEventDetail, + type ScrollBaseDetail, + type ScrollDetail, + type SearchbarChangeEventDetail, + type SearchbarInputEventDetail, + type SegmentChangeEventDetail, + type SegmentViewScrollEvent, + type SelectChangeEventDetail, + type TextareaChangeEventDetail, + type TextareaInputEventDetail, + type ToggleChangeEventDetail, +} from '@ionic/core'; +import type { Components } from '@ionic/core/components'; +import { + IonAccordionGroup as IonAccordionGroupElement, + defineCustomElement as defineIonAccordionGroup, +} from '@ionic/core/components/ion-accordion-group.js'; +import { + IonAccordion as IonAccordionElement, + defineCustomElement as defineIonAccordion, +} from '@ionic/core/components/ion-accordion.js'; +import { + IonAvatar as IonAvatarElement, + defineCustomElement as defineIonAvatar, +} from '@ionic/core/components/ion-avatar.js'; +import { + IonBackdrop as IonBackdropElement, + defineCustomElement as defineIonBackdrop, +} from '@ionic/core/components/ion-backdrop.js'; +import { + IonBadge as IonBadgeElement, + defineCustomElement as defineIonBadge, +} from '@ionic/core/components/ion-badge.js'; +import { + IonBreadcrumbs as IonBreadcrumbsElement, + defineCustomElement as defineIonBreadcrumbs, +} from '@ionic/core/components/ion-breadcrumbs.js'; +import { + IonButtons as IonButtonsElement, + defineCustomElement as defineIonButtons, +} from '@ionic/core/components/ion-buttons.js'; +import { + IonCardContent as IonCardContentElement, + defineCustomElement as defineIonCardContent, +} from '@ionic/core/components/ion-card-content.js'; +import { + IonCardHeader as IonCardHeaderElement, + defineCustomElement as defineIonCardHeader, +} from '@ionic/core/components/ion-card-header.js'; +import { + IonCardSubtitle as IonCardSubtitleElement, + defineCustomElement as defineIonCardSubtitle, +} from '@ionic/core/components/ion-card-subtitle.js'; +import { + IonCardTitle as IonCardTitleElement, + defineCustomElement as defineIonCardTitle, +} from '@ionic/core/components/ion-card-title.js'; +import { + IonCheckbox as IonCheckboxElement, + defineCustomElement as defineIonCheckbox, +} from '@ionic/core/components/ion-checkbox.js'; +import { IonChip as IonChipElement, defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js'; +import { IonCol as IonColElement, defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js'; +import { + IonContent as IonContentElement, + defineCustomElement as defineIonContent, +} from '@ionic/core/components/ion-content.js'; +import { + IonDatetimeButton as IonDatetimeButtonElement, + defineCustomElement as defineIonDatetimeButton, +} from '@ionic/core/components/ion-datetime-button.js'; +import { + IonDatetime as IonDatetimeElement, + defineCustomElement as defineIonDatetime, +} from '@ionic/core/components/ion-datetime.js'; +import { + IonFabList as IonFabListElement, + defineCustomElement as defineIonFabList, +} from '@ionic/core/components/ion-fab-list.js'; +import { IonFab as IonFabElement, defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js'; +import { + IonFooter as IonFooterElement, + defineCustomElement as defineIonFooter, +} from '@ionic/core/components/ion-footer.js'; +import { IonGrid as IonGridElement, defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js'; +import { + IonHeader as IonHeaderElement, + defineCustomElement as defineIonHeader, +} from '@ionic/core/components/ion-header.js'; +import { IonImg as IonImgElement, defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js'; +import { + IonInfiniteScrollContent as IonInfiniteScrollContentElement, + defineCustomElement as defineIonInfiniteScrollContent, +} from '@ionic/core/components/ion-infinite-scroll-content.js'; +import { + IonInfiniteScroll as IonInfiniteScrollElement, + defineCustomElement as defineIonInfiniteScroll, +} from '@ionic/core/components/ion-infinite-scroll.js'; +import { + IonInputOtp as IonInputOtpElement, + defineCustomElement as defineIonInputOtp, +} from '@ionic/core/components/ion-input-otp.js'; +import { + IonInputPasswordToggle as IonInputPasswordToggleElement, + defineCustomElement as defineIonInputPasswordToggle, +} from '@ionic/core/components/ion-input-password-toggle.js'; +import { + IonInput as IonInputElement, + defineCustomElement as defineIonInput, +} from '@ionic/core/components/ion-input.js'; +import { + IonItemDivider as IonItemDividerElement, + defineCustomElement as defineIonItemDivider, +} from '@ionic/core/components/ion-item-divider.js'; +import { + IonItemGroup as IonItemGroupElement, + defineCustomElement as defineIonItemGroup, +} from '@ionic/core/components/ion-item-group.js'; +import { + IonItemOptions as IonItemOptionsElement, + defineCustomElement as defineIonItemOptions, +} from '@ionic/core/components/ion-item-options.js'; +import { + IonItemSliding as IonItemSlidingElement, + defineCustomElement as defineIonItemSliding, +} from '@ionic/core/components/ion-item-sliding.js'; +import { + IonLabel as IonLabelElement, + defineCustomElement as defineIonLabel, +} from '@ionic/core/components/ion-label.js'; +import { + IonListHeader as IonListHeaderElement, + defineCustomElement as defineIonListHeader, +} from '@ionic/core/components/ion-list-header.js'; +import { IonList as IonListElement, defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js'; +import { + IonMenuButton as IonMenuButtonElement, + defineCustomElement as defineIonMenuButton, +} from '@ionic/core/components/ion-menu-button.js'; +import { + IonMenuToggle as IonMenuToggleElement, + defineCustomElement as defineIonMenuToggle, +} from '@ionic/core/components/ion-menu-toggle.js'; +import { IonMenu as IonMenuElement, defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js'; +import { + IonNavLink as IonNavLinkElement, + defineCustomElement as defineIonNavLink, +} from '@ionic/core/components/ion-nav-link.js'; +import { IonNav as IonNavElement, defineCustomElement as defineIonNav } from '@ionic/core/components/ion-nav.js'; +import { IonNote as IonNoteElement, defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js'; +import { + IonPickerColumnOption as IonPickerColumnOptionElement, + defineCustomElement as defineIonPickerColumnOption, +} from '@ionic/core/components/ion-picker-column-option.js'; +import { + IonPickerColumn as IonPickerColumnElement, + defineCustomElement as defineIonPickerColumn, +} from '@ionic/core/components/ion-picker-column.js'; +import { + IonPicker as IonPickerElement, + defineCustomElement as defineIonPicker, +} from '@ionic/core/components/ion-picker.js'; +import { + IonProgressBar as IonProgressBarElement, + defineCustomElement as defineIonProgressBar, +} from '@ionic/core/components/ion-progress-bar.js'; +import { + IonRadioGroup as IonRadioGroupElement, + defineCustomElement as defineIonRadioGroup, +} from '@ionic/core/components/ion-radio-group.js'; +import { + IonRadio as IonRadioElement, + defineCustomElement as defineIonRadio, +} from '@ionic/core/components/ion-radio.js'; +import { + IonRange as IonRangeElement, + defineCustomElement as defineIonRange, +} from '@ionic/core/components/ion-range.js'; +import { + IonRefresherContent as IonRefresherContentElement, + defineCustomElement as defineIonRefresherContent, +} from '@ionic/core/components/ion-refresher-content.js'; +import { + IonRefresher as IonRefresherElement, + defineCustomElement as defineIonRefresher, +} from '@ionic/core/components/ion-refresher.js'; +import { + IonReorderGroup as IonReorderGroupElement, + defineCustomElement as defineIonReorderGroup, +} from '@ionic/core/components/ion-reorder-group.js'; +import { + IonReorder as IonReorderElement, + defineCustomElement as defineIonReorder, +} from '@ionic/core/components/ion-reorder.js'; +import { + IonRippleEffect as IonRippleEffectElement, + defineCustomElement as defineIonRippleEffect, +} from '@ionic/core/components/ion-ripple-effect.js'; +import { IonRow as IonRowElement, defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js'; +import { + IonSearchbar as IonSearchbarElement, + defineCustomElement as defineIonSearchbar, +} from '@ionic/core/components/ion-searchbar.js'; +import { + IonSegmentButton as IonSegmentButtonElement, + defineCustomElement as defineIonSegmentButton, +} from '@ionic/core/components/ion-segment-button.js'; +import { + IonSegmentContent as IonSegmentContentElement, + defineCustomElement as defineIonSegmentContent, +} from '@ionic/core/components/ion-segment-content.js'; +import { + IonSegmentView as IonSegmentViewElement, + defineCustomElement as defineIonSegmentView, +} from '@ionic/core/components/ion-segment-view.js'; +import { + IonSegment as IonSegmentElement, + defineCustomElement as defineIonSegment, +} from '@ionic/core/components/ion-segment.js'; +import { + IonSelectModal as IonSelectModalElement, + defineCustomElement as defineIonSelectModal, +} from '@ionic/core/components/ion-select-modal.js'; +import { + IonSelectOption as IonSelectOptionElement, + defineCustomElement as defineIonSelectOption, +} from '@ionic/core/components/ion-select-option.js'; +import { + IonSelect as IonSelectElement, + defineCustomElement as defineIonSelect, +} from '@ionic/core/components/ion-select.js'; +import { + IonSkeletonText as IonSkeletonTextElement, + defineCustomElement as defineIonSkeletonText, +} from '@ionic/core/components/ion-skeleton-text.js'; +import { + IonSpinner as IonSpinnerElement, + defineCustomElement as defineIonSpinner, +} from '@ionic/core/components/ion-spinner.js'; +import { + IonSplitPane as IonSplitPaneElement, + defineCustomElement as defineIonSplitPane, +} from '@ionic/core/components/ion-split-pane.js'; +import { IonTab as IonTabElement, defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js'; +import { IonText as IonTextElement, defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js'; +import { + IonTextarea as IonTextareaElement, + defineCustomElement as defineIonTextarea, +} from '@ionic/core/components/ion-textarea.js'; +import { + IonThumbnail as IonThumbnailElement, + defineCustomElement as defineIonThumbnail, +} from '@ionic/core/components/ion-thumbnail.js'; +import { + IonTitle as IonTitleElement, + defineCustomElement as defineIonTitle, +} from '@ionic/core/components/ion-title.js'; +import { + IonToggle as IonToggleElement, + defineCustomElement as defineIonToggle, +} from '@ionic/core/components/ion-toggle.js'; +import { + IonToolbar as IonToolbarElement, + defineCustomElement as defineIonToolbar, +} from '@ionic/core/components/ion-toolbar.js'; export type IonAccordionEvents = NonNullable; -export const IonAccordion: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonAccordion: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-accordion', elementClass: IonAccordionElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonAccordionEvents, - defineCustomElement: defineIonAccordion -}); + defineCustomElement: defineIonAccordion, + }); -export type IonAccordionGroupEvents = { onIonChange: EventName> }; +export type IonAccordionGroupEvents = { + onIonChange: EventName>; +}; -export const IonAccordionGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-accordion-group', - elementClass: IonAccordionGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents, - defineCustomElement: defineIonAccordionGroup +export const IonAccordionGroup: StencilReactComponent< + IonAccordionGroupElement, + IonAccordionGroupEvents, + Components.IonAccordionGroup +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-accordion-group', + elementClass: IonAccordionGroupElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonChange: 'ionChange' } as IonAccordionGroupEvents, + defineCustomElement: defineIonAccordionGroup, }); export type IonAvatarEvents = NonNullable; -export const IonAvatar: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonAvatar: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-avatar', elementClass: IonAvatarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonAvatarEvents, - defineCustomElement: defineIonAvatar -}); + defineCustomElement: defineIonAvatar, + }); export type IonBackdropEvents = { onIonBackdropTap: EventName> }; -export const IonBackdrop: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonBackdrop: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-backdrop', elementClass: IonBackdropElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonBackdropTap: 'ionBackdropTap' } as IonBackdropEvents, - defineCustomElement: defineIonBackdrop -}); + defineCustomElement: defineIonBackdrop, + }); export type IonBadgeEvents = NonNullable; -export const IonBadge: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonBadge: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-badge', elementClass: IonBadgeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonBadgeEvents, - defineCustomElement: defineIonBadge -}); + defineCustomElement: defineIonBadge, + }); -export type IonBreadcrumbsEvents = { onIonCollapsedClick: EventName> }; +export type IonBreadcrumbsEvents = { + onIonCollapsedClick: EventName>; +}; -export const IonBreadcrumbs: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-breadcrumbs', - elementClass: IonBreadcrumbsElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents, - defineCustomElement: defineIonBreadcrumbs +export const IonBreadcrumbs: StencilReactComponent< + IonBreadcrumbsElement, + IonBreadcrumbsEvents, + Components.IonBreadcrumbs +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-breadcrumbs', + elementClass: IonBreadcrumbsElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonCollapsedClick: 'ionCollapsedClick' } as IonBreadcrumbsEvents, + defineCustomElement: defineIonBreadcrumbs, }); export type IonButtonsEvents = NonNullable; -export const IonButtons: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonButtons: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-buttons', elementClass: IonButtonsElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonButtonsEvents, - defineCustomElement: defineIonButtons -}); + defineCustomElement: defineIonButtons, + }); export type IonCardContentEvents = NonNullable; -export const IonCardContent: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-card-content', - elementClass: IonCardContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonCardContentEvents, - defineCustomElement: defineIonCardContent +export const IonCardContent: StencilReactComponent< + IonCardContentElement, + IonCardContentEvents, + Components.IonCardContent +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-card-content', + elementClass: IonCardContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonCardContentEvents, + defineCustomElement: defineIonCardContent, }); export type IonCardHeaderEvents = NonNullable; -export const IonCardHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonCardHeader: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-card-header', elementClass: IonCardHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonCardHeaderEvents, - defineCustomElement: defineIonCardHeader -}); + defineCustomElement: defineIonCardHeader, + }); export type IonCardSubtitleEvents = NonNullable; -export const IonCardSubtitle: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-card-subtitle', - elementClass: IonCardSubtitleElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonCardSubtitleEvents, - defineCustomElement: defineIonCardSubtitle +export const IonCardSubtitle: StencilReactComponent< + IonCardSubtitleElement, + IonCardSubtitleEvents, + Components.IonCardSubtitle +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-card-subtitle', + elementClass: IonCardSubtitleElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonCardSubtitleEvents, + defineCustomElement: defineIonCardSubtitle, }); export type IonCardTitleEvents = NonNullable; -export const IonCardTitle: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonCardTitle: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-card-title', elementClass: IonCardTitleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonCardTitleEvents, - defineCustomElement: defineIonCardTitle -}); + defineCustomElement: defineIonCardTitle, + }); export type IonCheckboxEvents = { - onIonChange: EventName>, - onIonFocus: EventName>, - onIonBlur: EventName> + onIonChange: EventName>; + onIonFocus: EventName>; + onIonBlur: EventName>; }; -export const IonCheckbox: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonCheckbox: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-checkbox', elementClass: IonCheckboxElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur' + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', } as IonCheckboxEvents, - defineCustomElement: defineIonCheckbox -}); + defineCustomElement: defineIonCheckbox, + }); export type IonChipEvents = NonNullable; -export const IonChip: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonChip: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-chip', elementClass: IonChipElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonChipEvents, - defineCustomElement: defineIonChip -}); + defineCustomElement: defineIonChip, + }); export type IonColEvents = NonNullable; -export const IonCol: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonCol: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-col', elementClass: IonColElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonColEvents, - defineCustomElement: defineIonCol -}); + defineCustomElement: defineIonCol, + }); export type IonContentEvents = { - onIonScrollStart: EventName>, - onIonScroll: EventName>, - onIonScrollEnd: EventName> + onIonScrollStart: EventName>; + onIonScroll: EventName>; + onIonScrollEnd: EventName>; }; -export const IonContent: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonContent: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-content', elementClass: IonContentElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonScrollStart: 'ionScrollStart', - onIonScroll: 'ionScroll', - onIonScrollEnd: 'ionScrollEnd' + onIonScrollStart: 'ionScrollStart', + onIonScroll: 'ionScroll', + onIonScrollEnd: 'ionScrollEnd', } as IonContentEvents, - defineCustomElement: defineIonContent -}); + defineCustomElement: defineIonContent, + }); export type IonDatetimeEvents = { - onIonCancel: EventName>, - onIonChange: EventName>, - onIonFocus: EventName>, - onIonBlur: EventName> + onIonCancel: EventName>; + onIonChange: EventName>; + onIonFocus: EventName>; + onIonBlur: EventName>; }; -export const IonDatetime: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonDatetime: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-datetime', elementClass: IonDatetimeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonCancel: 'ionCancel', - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur' + onIonCancel: 'ionCancel', + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', } as IonDatetimeEvents, - defineCustomElement: defineIonDatetime -}); + defineCustomElement: defineIonDatetime, + }); export type IonDatetimeButtonEvents = NonNullable; -export const IonDatetimeButton: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-datetime-button', - elementClass: IonDatetimeButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonDatetimeButtonEvents, - defineCustomElement: defineIonDatetimeButton +export const IonDatetimeButton: StencilReactComponent< + IonDatetimeButtonElement, + IonDatetimeButtonEvents, + Components.IonDatetimeButton +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-datetime-button', + elementClass: IonDatetimeButtonElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonDatetimeButtonEvents, + defineCustomElement: defineIonDatetimeButton, }); export type IonFabEvents = NonNullable; -export const IonFab: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonFab: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-fab', elementClass: IonFabElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFabEvents, - defineCustomElement: defineIonFab -}); + defineCustomElement: defineIonFab, + }); export type IonFabListEvents = NonNullable; -export const IonFabList: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonFabList: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-fab-list', elementClass: IonFabListElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFabListEvents, - defineCustomElement: defineIonFabList -}); + defineCustomElement: defineIonFabList, + }); export type IonFooterEvents = NonNullable; -export const IonFooter: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonFooter: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-footer', elementClass: IonFooterElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonFooterEvents, - defineCustomElement: defineIonFooter -}); + defineCustomElement: defineIonFooter, + }); export type IonGridEvents = NonNullable; -export const IonGrid: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonGrid: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-grid', elementClass: IonGridElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonGridEvents, - defineCustomElement: defineIonGrid -}); + defineCustomElement: defineIonGrid, + }); export type IonHeaderEvents = NonNullable; -export const IonHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonHeader: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-header', elementClass: IonHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonHeaderEvents, - defineCustomElement: defineIonHeader -}); + defineCustomElement: defineIonHeader, + }); export type IonImgEvents = { - onIonImgWillLoad: EventName>, - onIonImgDidLoad: EventName>, - onIonError: EventName> + onIonImgWillLoad: EventName>; + onIonImgDidLoad: EventName>; + onIonError: EventName>; }; -export const IonImg: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonImg: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-img', elementClass: IonImgElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonImgWillLoad: 'ionImgWillLoad', - onIonImgDidLoad: 'ionImgDidLoad', - onIonError: 'ionError' + onIonImgWillLoad: 'ionImgWillLoad', + onIonImgDidLoad: 'ionImgDidLoad', + onIonError: 'ionError', } as IonImgEvents, - defineCustomElement: defineIonImg -}); + defineCustomElement: defineIonImg, + }); export type IonInfiniteScrollEvents = { onIonInfinite: EventName> }; -export const IonInfiniteScroll: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-infinite-scroll', - elementClass: IonInfiniteScrollElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents, - defineCustomElement: defineIonInfiniteScroll +export const IonInfiniteScroll: StencilReactComponent< + IonInfiniteScrollElement, + IonInfiniteScrollEvents, + Components.IonInfiniteScroll +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-infinite-scroll', + elementClass: IonInfiniteScrollElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonInfinite: 'ionInfinite' } as IonInfiniteScrollEvents, + defineCustomElement: defineIonInfiniteScroll, }); export type IonInfiniteScrollContentEvents = NonNullable; -export const IonInfiniteScrollContent: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-infinite-scroll-content', - elementClass: IonInfiniteScrollContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonInfiniteScrollContentEvents, - defineCustomElement: defineIonInfiniteScrollContent +export const IonInfiniteScrollContent: StencilReactComponent< + IonInfiniteScrollContentElement, + IonInfiniteScrollContentEvents, + Components.IonInfiniteScrollContent +> = /*@__PURE__*/ createComponent< + IonInfiniteScrollContentElement, + IonInfiniteScrollContentEvents, + Components.IonInfiniteScrollContent +>({ + tagName: 'ion-infinite-scroll-content', + elementClass: IonInfiniteScrollContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonInfiniteScrollContentEvents, + defineCustomElement: defineIonInfiniteScrollContent, }); export type IonInputEvents = { - onIonInput: EventName>, - onIonChange: EventName>, - onIonBlur: EventName>, - onIonFocus: EventName> + onIonInput: EventName>; + onIonChange: EventName>; + onIonBlur: EventName>; + onIonFocus: EventName>; }; -export const IonInput: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonInput: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-input', elementClass: IonInputElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus' + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus', } as IonInputEvents, - defineCustomElement: defineIonInput -}); + defineCustomElement: defineIonInput, + }); export type IonInputOtpEvents = { - onIonInput: EventName>, - onIonChange: EventName>, - onIonComplete: EventName>, - onIonBlur: EventName>, - onIonFocus: EventName> + onIonInput: EventName>; + onIonChange: EventName>; + onIonComplete: EventName>; + onIonBlur: EventName>; + onIonFocus: EventName>; }; -export const IonInputOtp: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonInputOtp: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-input-otp', elementClass: IonInputOtpElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonComplete: 'ionComplete', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus' + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonComplete: 'ionComplete', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus', } as IonInputOtpEvents, - defineCustomElement: defineIonInputOtp -}); + defineCustomElement: defineIonInputOtp, + }); export type IonInputPasswordToggleEvents = NonNullable; -export const IonInputPasswordToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-input-password-toggle', - elementClass: IonInputPasswordToggleElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonInputPasswordToggleEvents, - defineCustomElement: defineIonInputPasswordToggle +export const IonInputPasswordToggle: StencilReactComponent< + IonInputPasswordToggleElement, + IonInputPasswordToggleEvents, + Components.IonInputPasswordToggle +> = /*@__PURE__*/ createComponent< + IonInputPasswordToggleElement, + IonInputPasswordToggleEvents, + Components.IonInputPasswordToggle +>({ + tagName: 'ion-input-password-toggle', + elementClass: IonInputPasswordToggleElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonInputPasswordToggleEvents, + defineCustomElement: defineIonInputPasswordToggle, }); export type IonItemDividerEvents = NonNullable; -export const IonItemDivider: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-divider', - elementClass: IonItemDividerElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonItemDividerEvents, - defineCustomElement: defineIonItemDivider +export const IonItemDivider: StencilReactComponent< + IonItemDividerElement, + IonItemDividerEvents, + Components.IonItemDivider +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-divider', + elementClass: IonItemDividerElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonItemDividerEvents, + defineCustomElement: defineIonItemDivider, }); export type IonItemGroupEvents = NonNullable; -export const IonItemGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonItemGroup: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-item-group', elementClass: IonItemGroupElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonItemGroupEvents, - defineCustomElement: defineIonItemGroup -}); + defineCustomElement: defineIonItemGroup, + }); export type IonItemOptionsEvents = { onIonSwipe: EventName> }; -export const IonItemOptions: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-options', - elementClass: IonItemOptionsElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents, - defineCustomElement: defineIonItemOptions +export const IonItemOptions: StencilReactComponent< + IonItemOptionsElement, + IonItemOptionsEvents, + Components.IonItemOptions +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-options', + elementClass: IonItemOptionsElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonSwipe: 'ionSwipe' } as IonItemOptionsEvents, + defineCustomElement: defineIonItemOptions, }); export type IonItemSlidingEvents = { onIonDrag: EventName> }; -export const IonItemSliding: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-item-sliding', - elementClass: IonItemSlidingElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents, - defineCustomElement: defineIonItemSliding +export const IonItemSliding: StencilReactComponent< + IonItemSlidingElement, + IonItemSlidingEvents, + Components.IonItemSliding +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-item-sliding', + elementClass: IonItemSlidingElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonDrag: 'ionDrag' } as IonItemSlidingEvents, + defineCustomElement: defineIonItemSliding, }); export type IonLabelEvents = NonNullable; -export const IonLabel: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonLabel: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-label', elementClass: IonLabelElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonLabelEvents, - defineCustomElement: defineIonLabel -}); + defineCustomElement: defineIonLabel, + }); export type IonListEvents = NonNullable; -export const IonList: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonList: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-list', elementClass: IonListElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonListEvents, - defineCustomElement: defineIonList -}); + defineCustomElement: defineIonList, + }); export type IonListHeaderEvents = NonNullable; -export const IonListHeader: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonListHeader: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-list-header', elementClass: IonListHeaderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonListHeaderEvents, - defineCustomElement: defineIonListHeader -}); + defineCustomElement: defineIonListHeader, + }); export type IonMenuEvents = { - onIonWillOpen: EventName>, - onIonWillClose: EventName>, - onIonDidOpen: EventName>, - onIonDidClose: EventName> + onIonWillOpen: EventName>; + onIonWillClose: EventName>; + onIonDidOpen: EventName>; + onIonDidClose: EventName>; }; -export const IonMenu: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonMenu: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-menu', elementClass: IonMenuElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonWillOpen: 'ionWillOpen', - onIonWillClose: 'ionWillClose', - onIonDidOpen: 'ionDidOpen', - onIonDidClose: 'ionDidClose' + onIonWillOpen: 'ionWillOpen', + onIonWillClose: 'ionWillClose', + onIonDidOpen: 'ionDidOpen', + onIonDidClose: 'ionDidClose', } as IonMenuEvents, - defineCustomElement: defineIonMenu -}); + defineCustomElement: defineIonMenu, + }); export type IonMenuButtonEvents = NonNullable; -export const IonMenuButton: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonMenuButton: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-menu-button', elementClass: IonMenuButtonElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonMenuButtonEvents, - defineCustomElement: defineIonMenuButton -}); + defineCustomElement: defineIonMenuButton, + }); export type IonMenuToggleEvents = NonNullable; -export const IonMenuToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonMenuToggle: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-menu-toggle', elementClass: IonMenuToggleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonMenuToggleEvents, - defineCustomElement: defineIonMenuToggle -}); + defineCustomElement: defineIonMenuToggle, + }); export type IonNavEvents = { - onIonNavWillChange: EventName>, - onIonNavDidChange: EventName> + onIonNavWillChange: EventName>; + onIonNavDidChange: EventName>; }; -export const IonNav: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonNav: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-nav', elementClass: IonNavElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonNavWillChange: 'ionNavWillChange', - onIonNavDidChange: 'ionNavDidChange' + onIonNavWillChange: 'ionNavWillChange', + onIonNavDidChange: 'ionNavDidChange', } as IonNavEvents, - defineCustomElement: defineIonNav -}); + defineCustomElement: defineIonNav, + }); export type IonNavLinkEvents = NonNullable; -export const IonNavLink: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonNavLink: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-nav-link', elementClass: IonNavLinkElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonNavLinkEvents, - defineCustomElement: defineIonNavLink -}); + defineCustomElement: defineIonNavLink, + }); export type IonNoteEvents = NonNullable; -export const IonNote: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonNote: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-note', elementClass: IonNoteElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonNoteEvents, - defineCustomElement: defineIonNote -}); + defineCustomElement: defineIonNote, + }); export type IonPickerEvents = NonNullable; -export const IonPicker: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonPicker: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-picker', elementClass: IonPickerElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonPickerEvents, - defineCustomElement: defineIonPicker -}); + defineCustomElement: defineIonPicker, + }); -export type IonPickerColumnEvents = { onIonChange: EventName> }; +export type IonPickerColumnEvents = { + onIonChange: EventName>; +}; -export const IonPickerColumn: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-picker-column', - elementClass: IonPickerColumnElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonChange: 'ionChange' } as IonPickerColumnEvents, - defineCustomElement: defineIonPickerColumn +export const IonPickerColumn: StencilReactComponent< + IonPickerColumnElement, + IonPickerColumnEvents, + Components.IonPickerColumn +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-picker-column', + elementClass: IonPickerColumnElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonChange: 'ionChange' } as IonPickerColumnEvents, + defineCustomElement: defineIonPickerColumn, }); export type IonPickerColumnOptionEvents = NonNullable; -export const IonPickerColumnOption: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-picker-column-option', - elementClass: IonPickerColumnOptionElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonPickerColumnOptionEvents, - defineCustomElement: defineIonPickerColumnOption +export const IonPickerColumnOption: StencilReactComponent< + IonPickerColumnOptionElement, + IonPickerColumnOptionEvents, + Components.IonPickerColumnOption +> = /*@__PURE__*/ createComponent< + IonPickerColumnOptionElement, + IonPickerColumnOptionEvents, + Components.IonPickerColumnOption +>({ + tagName: 'ion-picker-column-option', + elementClass: IonPickerColumnOptionElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonPickerColumnOptionEvents, + defineCustomElement: defineIonPickerColumnOption, }); export type IonProgressBarEvents = NonNullable; -export const IonProgressBar: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-progress-bar', - elementClass: IonProgressBarElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonProgressBarEvents, - defineCustomElement: defineIonProgressBar +export const IonProgressBar: StencilReactComponent< + IonProgressBarElement, + IonProgressBarEvents, + Components.IonProgressBar +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-progress-bar', + elementClass: IonProgressBarElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonProgressBarEvents, + defineCustomElement: defineIonProgressBar, }); export type IonRadioEvents = { - onIonFocus: EventName>, - onIonBlur: EventName> + onIonFocus: EventName>; + onIonBlur: EventName>; }; -export const IonRadio: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonRadio: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-radio', elementClass: IonRadioElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur' + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', } as IonRadioEvents, - defineCustomElement: defineIonRadio -}); + defineCustomElement: defineIonRadio, + }); export type IonRadioGroupEvents = { onIonChange: EventName> }; -export const IonRadioGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonRadioGroup: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-radio-group', elementClass: IonRadioGroupElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonChange: 'ionChange' } as IonRadioGroupEvents, - defineCustomElement: defineIonRadioGroup -}); + defineCustomElement: defineIonRadioGroup, + }); export type IonRangeEvents = { - onIonChange: EventName>, - onIonInput: EventName>, - onIonFocus: EventName>, - onIonBlur: EventName>, - onIonKnobMoveStart: EventName>, - onIonKnobMoveEnd: EventName> + onIonChange: EventName>; + onIonInput: EventName>; + onIonFocus: EventName>; + onIonBlur: EventName>; + onIonKnobMoveStart: EventName>; + onIonKnobMoveEnd: EventName>; }; -export const IonRange: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonRange: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-range', elementClass: IonRangeElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonInput: 'ionInput', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur', - onIonKnobMoveStart: 'ionKnobMoveStart', - onIonKnobMoveEnd: 'ionKnobMoveEnd' + onIonChange: 'ionChange', + onIonInput: 'ionInput', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', + onIonKnobMoveStart: 'ionKnobMoveStart', + onIonKnobMoveEnd: 'ionKnobMoveEnd', } as IonRangeEvents, - defineCustomElement: defineIonRange -}); + defineCustomElement: defineIonRange, + }); export type IonRefresherEvents = { - onIonRefresh: EventName>, - onIonPull: EventName>, - onIonStart: EventName>, - onIonPullStart: EventName>, - onIonPullEnd: EventName> + onIonRefresh: EventName>; + onIonPull: EventName>; + onIonStart: EventName>; + onIonPullStart: EventName>; + onIonPullEnd: EventName>; }; -export const IonRefresher: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonRefresher: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-refresher', elementClass: IonRefresherElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonRefresh: 'ionRefresh', - onIonPull: 'ionPull', - onIonStart: 'ionStart', - onIonPullStart: 'ionPullStart', - onIonPullEnd: 'ionPullEnd' + onIonRefresh: 'ionRefresh', + onIonPull: 'ionPull', + onIonStart: 'ionStart', + onIonPullStart: 'ionPullStart', + onIonPullEnd: 'ionPullEnd', } as IonRefresherEvents, - defineCustomElement: defineIonRefresher -}); + defineCustomElement: defineIonRefresher, + }); export type IonRefresherContentEvents = NonNullable; -export const IonRefresherContent: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-refresher-content', - elementClass: IonRefresherContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonRefresherContentEvents, - defineCustomElement: defineIonRefresherContent +export const IonRefresherContent: StencilReactComponent< + IonRefresherContentElement, + IonRefresherContentEvents, + Components.IonRefresherContent +> = /*@__PURE__*/ createComponent< + IonRefresherContentElement, + IonRefresherContentEvents, + Components.IonRefresherContent +>({ + tagName: 'ion-refresher-content', + elementClass: IonRefresherContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonRefresherContentEvents, + defineCustomElement: defineIonRefresherContent, }); export type IonReorderEvents = NonNullable; -export const IonReorder: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonReorder: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-reorder', elementClass: IonReorderElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonReorderEvents, - defineCustomElement: defineIonReorder -}); + defineCustomElement: defineIonReorder, + }); export type IonReorderGroupEvents = { - onIonItemReorder: EventName>, - onIonReorderStart: EventName>, - onIonReorderMove: EventName>, - onIonReorderEnd: EventName> + onIonItemReorder: EventName>; + onIonReorderStart: EventName>; + onIonReorderMove: EventName>; + onIonReorderEnd: EventName>; }; -export const IonReorderGroup: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-reorder-group', - elementClass: IonReorderGroupElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { - onIonItemReorder: 'ionItemReorder', - onIonReorderStart: 'ionReorderStart', - onIonReorderMove: 'ionReorderMove', - onIonReorderEnd: 'ionReorderEnd' - } as IonReorderGroupEvents, - defineCustomElement: defineIonReorderGroup +export const IonReorderGroup: StencilReactComponent< + IonReorderGroupElement, + IonReorderGroupEvents, + Components.IonReorderGroup +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-reorder-group', + elementClass: IonReorderGroupElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { + onIonItemReorder: 'ionItemReorder', + onIonReorderStart: 'ionReorderStart', + onIonReorderMove: 'ionReorderMove', + onIonReorderEnd: 'ionReorderEnd', + } as IonReorderGroupEvents, + defineCustomElement: defineIonReorderGroup, }); export type IonRippleEffectEvents = NonNullable; -export const IonRippleEffect: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-ripple-effect', - elementClass: IonRippleEffectElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonRippleEffectEvents, - defineCustomElement: defineIonRippleEffect +export const IonRippleEffect: StencilReactComponent< + IonRippleEffectElement, + IonRippleEffectEvents, + Components.IonRippleEffect +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-ripple-effect', + elementClass: IonRippleEffectElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonRippleEffectEvents, + defineCustomElement: defineIonRippleEffect, }); export type IonRowEvents = NonNullable; -export const IonRow: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonRow: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-row', elementClass: IonRowElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonRowEvents, - defineCustomElement: defineIonRow -}); + defineCustomElement: defineIonRow, + }); export type IonSearchbarEvents = { - onIonInput: EventName>, - onIonChange: EventName>, - onIonCancel: EventName>, - onIonClear: EventName>, - onIonBlur: EventName>, - onIonFocus: EventName> + onIonInput: EventName>; + onIonChange: EventName>; + onIonCancel: EventName>; + onIonClear: EventName>; + onIonBlur: EventName>; + onIonFocus: EventName>; }; -export const IonSearchbar: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonSearchbar: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-searchbar', elementClass: IonSearchbarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonInput: 'ionInput', - onIonChange: 'ionChange', - onIonCancel: 'ionCancel', - onIonClear: 'ionClear', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus' + onIonInput: 'ionInput', + onIonChange: 'ionChange', + onIonCancel: 'ionCancel', + onIonClear: 'ionClear', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus', } as IonSearchbarEvents, - defineCustomElement: defineIonSearchbar -}); + defineCustomElement: defineIonSearchbar, + }); export type IonSegmentEvents = { onIonChange: EventName> }; -export const IonSegment: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonSegment: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-segment', elementClass: IonSegmentElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonChange: 'ionChange' } as IonSegmentEvents, - defineCustomElement: defineIonSegment -}); + defineCustomElement: defineIonSegment, + }); export type IonSegmentButtonEvents = NonNullable; -export const IonSegmentButton: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-button', - elementClass: IonSegmentButtonElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSegmentButtonEvents, - defineCustomElement: defineIonSegmentButton +export const IonSegmentButton: StencilReactComponent< + IonSegmentButtonElement, + IonSegmentButtonEvents, + Components.IonSegmentButton +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-button', + elementClass: IonSegmentButtonElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSegmentButtonEvents, + defineCustomElement: defineIonSegmentButton, }); export type IonSegmentContentEvents = NonNullable; -export const IonSegmentContent: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-content', - elementClass: IonSegmentContentElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSegmentContentEvents, - defineCustomElement: defineIonSegmentContent -}); - -export type IonSegmentViewEvents = { onIonSegmentViewScroll: EventName> }; +export const IonSegmentContent: StencilReactComponent< + IonSegmentContentElement, + IonSegmentContentEvents, + Components.IonSegmentContent +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-content', + elementClass: IonSegmentContentElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSegmentContentEvents, + defineCustomElement: defineIonSegmentContent, +}); + +export type IonSegmentViewEvents = { + onIonSegmentViewScroll: EventName>; +}; -export const IonSegmentView: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-segment-view', - elementClass: IonSegmentViewElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' } as IonSegmentViewEvents, - defineCustomElement: defineIonSegmentView +export const IonSegmentView: StencilReactComponent< + IonSegmentViewElement, + IonSegmentViewEvents, + Components.IonSegmentView +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-segment-view', + elementClass: IonSegmentViewElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' } as IonSegmentViewEvents, + defineCustomElement: defineIonSegmentView, }); export type IonSelectEvents = { - onIonChange: EventName>, - onIonCancel: EventName>, - onIonDismiss: EventName>, - onIonFocus: EventName>, - onIonBlur: EventName> + onIonChange: EventName>; + onIonCancel: EventName>; + onIonDismiss: EventName>; + onIonFocus: EventName>; + onIonBlur: EventName>; }; -export const IonSelect: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonSelect: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-select', elementClass: IonSelectElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonCancel: 'ionCancel', - onIonDismiss: 'ionDismiss', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur' + onIonChange: 'ionChange', + onIonCancel: 'ionCancel', + onIonDismiss: 'ionDismiss', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', } as IonSelectEvents, - defineCustomElement: defineIonSelect -}); + defineCustomElement: defineIonSelect, + }); export type IonSelectModalEvents = NonNullable; -export const IonSelectModal: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-select-modal', - elementClass: IonSelectModalElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSelectModalEvents, - defineCustomElement: defineIonSelectModal +export const IonSelectModal: StencilReactComponent< + IonSelectModalElement, + IonSelectModalEvents, + Components.IonSelectModal +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-select-modal', + elementClass: IonSelectModalElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSelectModalEvents, + defineCustomElement: defineIonSelectModal, }); export type IonSelectOptionEvents = NonNullable; -export const IonSelectOption: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-select-option', - elementClass: IonSelectOptionElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSelectOptionEvents, - defineCustomElement: defineIonSelectOption +export const IonSelectOption: StencilReactComponent< + IonSelectOptionElement, + IonSelectOptionEvents, + Components.IonSelectOption +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-select-option', + elementClass: IonSelectOptionElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSelectOptionEvents, + defineCustomElement: defineIonSelectOption, }); export type IonSkeletonTextEvents = NonNullable; -export const IonSkeletonText: StencilReactComponent = /*@__PURE__*/ createComponent({ - tagName: 'ion-skeleton-text', - elementClass: IonSkeletonTextElement, - // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. - react: React, - events: {} as IonSkeletonTextEvents, - defineCustomElement: defineIonSkeletonText +export const IonSkeletonText: StencilReactComponent< + IonSkeletonTextElement, + IonSkeletonTextEvents, + Components.IonSkeletonText +> = /*@__PURE__*/ createComponent({ + tagName: 'ion-skeleton-text', + elementClass: IonSkeletonTextElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: {} as IonSkeletonTextEvents, + defineCustomElement: defineIonSkeletonText, }); export type IonSpinnerEvents = NonNullable; -export const IonSpinner: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonSpinner: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-spinner', elementClass: IonSpinnerElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonSpinnerEvents, - defineCustomElement: defineIonSpinner -}); + defineCustomElement: defineIonSpinner, + }); export type IonSplitPaneEvents = { onIonSplitPaneVisible: EventName> }; -export const IonSplitPane: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonSplitPane: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-split-pane', elementClass: IonSplitPaneElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' } as IonSplitPaneEvents, - defineCustomElement: defineIonSplitPane -}); + defineCustomElement: defineIonSplitPane, + }); export type IonTabEvents = NonNullable; -export const IonTab: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonTab: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-tab', elementClass: IonTabElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTabEvents, - defineCustomElement: defineIonTab -}); + defineCustomElement: defineIonTab, + }); export type IonTextEvents = NonNullable; -export const IonText: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonText: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-text', elementClass: IonTextElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTextEvents, - defineCustomElement: defineIonText -}); + defineCustomElement: defineIonText, + }); export type IonTextareaEvents = { - onIonChange: EventName>, - onIonInput: EventName>, - onIonBlur: EventName>, - onIonFocus: EventName> + onIonChange: EventName>; + onIonInput: EventName>; + onIonBlur: EventName>; + onIonFocus: EventName>; }; -export const IonTextarea: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonTextarea: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-textarea', elementClass: IonTextareaElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonInput: 'ionInput', - onIonBlur: 'ionBlur', - onIonFocus: 'ionFocus' + onIonChange: 'ionChange', + onIonInput: 'ionInput', + onIonBlur: 'ionBlur', + onIonFocus: 'ionFocus', } as IonTextareaEvents, - defineCustomElement: defineIonTextarea -}); + defineCustomElement: defineIonTextarea, + }); export type IonThumbnailEvents = NonNullable; -export const IonThumbnail: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonThumbnail: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-thumbnail', elementClass: IonThumbnailElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonThumbnailEvents, - defineCustomElement: defineIonThumbnail -}); + defineCustomElement: defineIonThumbnail, + }); export type IonTitleEvents = NonNullable; -export const IonTitle: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonTitle: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-title', elementClass: IonTitleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonTitleEvents, - defineCustomElement: defineIonTitle -}); + defineCustomElement: defineIonTitle, + }); export type IonToggleEvents = { - onIonChange: EventName>, - onIonFocus: EventName>, - onIonBlur: EventName> + onIonChange: EventName>; + onIonFocus: EventName>; + onIonBlur: EventName>; }; -export const IonToggle: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonToggle: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-toggle', elementClass: IonToggleElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: { - onIonChange: 'ionChange', - onIonFocus: 'ionFocus', - onIonBlur: 'ionBlur' + onIonChange: 'ionChange', + onIonFocus: 'ionFocus', + onIonBlur: 'ionBlur', } as IonToggleEvents, - defineCustomElement: defineIonToggle -}); + defineCustomElement: defineIonToggle, + }); export type IonToolbarEvents = NonNullable; -export const IonToolbar: StencilReactComponent = /*@__PURE__*/ createComponent({ +export const IonToolbar: StencilReactComponent = + /*@__PURE__*/ createComponent({ tagName: 'ion-toolbar', elementClass: IonToolbarElement, // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. react: React, events: {} as IonToolbarEvents, - defineCustomElement: defineIonToolbar -}); + defineCustomElement: defineIonToolbar, + }); From 952982f3b30d57a72021879beda10f298865a8e3 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 30 Jun 2026 18:04:52 -0400 Subject: [PATCH 3/4] docs(breaking): document new minimum browser versions --- BREAKING.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/BREAKING.md b/BREAKING.md index 2260e43c78c..b56377106b8 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -32,6 +32,14 @@ This is a comprehensive list of the breaking changes introduced in the major ver This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 9. +**Minimum Browser Versions** +| Desktop Browser | Supported Versions | +| --------------- | ----------------- | +| Chrome | 89+ | +| Safari | 16+ | +| Edge | 89+ | +| Firefox | 75+ | + **Minimum JavaScript Framework Versions** | Framework | Supported Version | | --------- | --------------------- | @@ -39,6 +47,12 @@ This section details the desktop browser, JavaScript framework, and mobile platf | React | 18+ | | Vue | 3.5+ | +**Minimum Mobile Platform Versions** +| Platform | Supported Version | +| -------- | ---------------------- | +| iOS | 16+ | +| Android | 5.1+ with Chromium 89+ | +

Package Exports

`@ionic/core`'s `package.json` now declares an `exports` field. Subpaths like `@ionic/core/components` and `@ionic/core/loader` previously failed under Node ESM (Angular 21's default Vitest builder, raw Node, etc.) with `ERR_UNSUPPORTED_DIR_IMPORT`, because the strict ESM resolver doesn't read the nested `package.json` files this package relied on. The new `exports` map declares the documented subpaths explicitly. From bce4466c702ca5e33149f2e74e359947ab7e70f6 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 30 Jun 2026 18:19:33 -0400 Subject: [PATCH 4/4] style --- BREAKING.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index b56377106b8..b1d05da01bd 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -34,11 +34,11 @@ This section details the desktop browser, JavaScript framework, and mobile platf **Minimum Browser Versions** | Desktop Browser | Supported Versions | -| --------------- | ----------------- | -| Chrome | 89+ | -| Safari | 16+ | -| Edge | 89+ | -| Firefox | 75+ | +| --------------- | ------------------ | +| Chrome | 89+ | +| Safari | 16+ | +| Edge | 89+ | +| Firefox | 75+ | **Minimum JavaScript Framework Versions** | Framework | Supported Version |