diff --git a/core/package.json b/core/package.json index 3ca70a991d..89cf9a7fc5 100644 --- a/core/package.json +++ b/core/package.json @@ -27,7 +27,7 @@ "ionicons": "4.3.0" }, "devDependencies": { - "@stencil/core": "0.11.0", + "@stencil/core": "0.11.1", "@stencil/dev-server": "latest", "@stencil/sass": "0.1.0", "@stencil/utils": "latest", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 26564d61a7..9fe86618d5 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2,31 +2,13 @@ * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ +/* tslint:disable */ import '@stencil/core'; -declare global { - namespace JSX { - interface Element {} - export interface IntrinsicElements {} - } - namespace JSXElements {} - - interface HTMLElement { - componentOnReady?: () => Promise; - } - - interface HTMLStencilElement extends HTMLElement { - componentOnReady(): Promise; - - forceUpdate(): void; - } - - interface HTMLAttributes {} -} - import 'ionicons'; + import { ActionSheetButton, ActionSheetOptions, @@ -83,9 +65,22 @@ import { EventEmitter, } from '@stencil/core'; + declare global { + interface HTMLElement { + componentOnReady?: () => Promise; + } + + interface HTMLStencilElement extends HTMLElement { + componentOnReady(): Promise; + + forceUpdate(): void; + } + + interface HTMLAttributes {} namespace StencilComponents { + interface IonActionSheetController { /** * Create an action sheet overlay with action sheet options. @@ -100,36 +95,7 @@ declare global { */ 'getTop': () => HTMLIonActionSheetElement; } - } - interface HTMLIonActionSheetControllerElement extends StencilComponents.IonActionSheetController, HTMLStencilElement {} - - var HTMLIonActionSheetControllerElement: { - prototype: HTMLIonActionSheetControllerElement; - new (): HTMLIonActionSheetControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-action-sheet-controller': HTMLIonActionSheetControllerElement; - } - interface ElementTagNameMap { - 'ion-action-sheet-controller': HTMLIonActionSheetControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-action-sheet-controller': JSXElements.IonActionSheetControllerAttributes; - } - } - namespace JSXElements { - export interface IonActionSheetControllerAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonActionSheet { /** * An array of buttons for the action sheet. @@ -192,103 +158,7 @@ declare global { */ 'willAnimate': boolean; } - } - interface HTMLIonActionSheetElement extends StencilComponents.IonActionSheet, HTMLStencilElement {} - - var HTMLIonActionSheetElement: { - prototype: HTMLIonActionSheetElement; - new (): HTMLIonActionSheetElement; - }; - interface HTMLElementTagNameMap { - 'ion-action-sheet': HTMLIonActionSheetElement; - } - interface ElementTagNameMap { - 'ion-action-sheet': HTMLIonActionSheetElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-action-sheet': JSXElements.IonActionSheetAttributes; - } - } - namespace JSXElements { - export interface IonActionSheetAttributes extends HTMLAttributes { - /** - * An array of buttons for the action sheet. - */ - 'buttons'?: ActionSheetButton[]; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass'?: string | string[]; - /** - * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'enableBackdropDismiss'?: boolean; - /** - * Animation to use when the action sheet is presented. - */ - 'enterAnimation'?: AnimationBuilder; - /** - * Title for the action sheet. - */ - 'header'?: string; - /** - * If the actionSheet should close the keyboard - */ - 'keyboardClose'?: boolean; - /** - * Animation to use when the action sheet is dismissed. - */ - 'leaveAnimation'?: AnimationBuilder; - /** - * Emitted after the alert has dismissed. - */ - 'onIonActionSheetDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the alert has loaded. - */ - 'onIonActionSheetDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the alert has presented. - */ - 'onIonActionSheetDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the alert has unloaded. - */ - 'onIonActionSheetDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the alert has dismissed. - */ - 'onIonActionSheetWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the alert has presented. - */ - 'onIonActionSheetWillPresent'?: (event: CustomEvent) => void; - /** - * Unique ID to be used with the overlay. Internal only - */ - 'overlayId'?: number; - /** - * Subtitle for the action sheet. - */ - 'subHeader'?: string; - /** - * If true, the action sheet will be translucent. Defaults to `false`. - */ - 'translucent'?: boolean; - /** - * If true, the action sheet will animate. Defaults to `true`. - */ - 'willAnimate'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonAlertController { /** * Create an alert overlay with alert options @@ -303,36 +173,7 @@ declare global { */ 'getTop': () => HTMLIonAlertElement; } - } - interface HTMLIonAlertControllerElement extends StencilComponents.IonAlertController, HTMLStencilElement {} - - var HTMLIonAlertControllerElement: { - prototype: HTMLIonAlertControllerElement; - new (): HTMLIonAlertControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-alert-controller': HTMLIonAlertControllerElement; - } - interface ElementTagNameMap { - 'ion-alert-controller': HTMLIonAlertControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-alert-controller': JSXElements.IonAlertControllerAttributes; - } - } - namespace JSXElements { - export interface IonAlertControllerAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonAlert { /** * Array of buttons to be added to the alert. @@ -398,106 +239,7 @@ declare global { */ 'willAnimate': boolean; } - } - interface HTMLIonAlertElement extends StencilComponents.IonAlert, HTMLStencilElement {} - - var HTMLIonAlertElement: { - prototype: HTMLIonAlertElement; - new (): HTMLIonAlertElement; - }; - interface HTMLElementTagNameMap { - 'ion-alert': HTMLIonAlertElement; - } - interface ElementTagNameMap { - 'ion-alert': HTMLIonAlertElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-alert': JSXElements.IonAlertAttributes; - } - } - namespace JSXElements { - export interface IonAlertAttributes extends HTMLAttributes { - /** - * Array of buttons to be added to the alert. - */ - 'buttons'?: (AlertButton | string)[]; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass'?: string | string[]; - /** - * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'enableBackdropDismiss'?: boolean; - /** - * Animation to use when the alert is presented. - */ - 'enterAnimation'?: AnimationBuilder; - /** - * The main title in the heading of the alert. - */ - 'header'?: string; - /** - * Array of input to show in the alert. - */ - 'inputs'?: AlertInput[]; - 'keyboardClose'?: boolean; - /** - * Animation to use when the alert is dismissed. - */ - 'leaveAnimation'?: AnimationBuilder; - /** - * The main message to be displayed in the alert. - */ - 'message'?: string; - 'mode'?: Mode; - /** - * Emitted after the alert has dismissed. - */ - 'onIonAlertDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the alert has presented. - */ - 'onIonAlertDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the alert has presented. - */ - 'onIonAlertDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted before the alert has presented. - */ - 'onIonAlertDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the alert has dismissed. - */ - 'onIonAlertWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the alert has presented. - */ - 'onIonAlertWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * The subtitle in the heading of the alert. Displayed under the title. - */ - 'subHeader'?: string; - /** - * If true, the alert will be translucent. Defaults to `false`. - */ - 'translucent'?: boolean; - /** - * If true, the alert will animate. Defaults to `true`. - */ - 'willAnimate'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonAnchor { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -512,149 +254,22 @@ declare global { */ 'routerDirection': RouterDirection; } - } - interface HTMLIonAnchorElement extends StencilComponents.IonAnchor, HTMLStencilElement {} - - var HTMLIonAnchorElement: { - prototype: HTMLIonAnchorElement; - new (): HTMLIonAnchorElement; - }; - interface HTMLElementTagNameMap { - 'ion-anchor': HTMLIonAnchorElement; - } - interface ElementTagNameMap { - 'ion-anchor': HTMLIonAnchorElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-anchor': JSXElements.IonAnchorAttributes; - } - } - namespace JSXElements { - export interface IonAnchorAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * When using a router, it specifies the transition direction when navigating to another page using `href`. - */ - 'routerDirection'?: RouterDirection; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonAnimationController { /** * Creates an animation instance */ 'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise; } - } - interface HTMLIonAnimationControllerElement extends StencilComponents.IonAnimationController, HTMLStencilElement {} - - var HTMLIonAnimationControllerElement: { - prototype: HTMLIonAnimationControllerElement; - new (): HTMLIonAnimationControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-animation-controller': HTMLIonAnimationControllerElement; - } - interface ElementTagNameMap { - 'ion-animation-controller': HTMLIonAnimationControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-animation-controller': JSXElements.IonAnimationControllerAttributes; - } - } - namespace JSXElements { - export interface IonAnimationControllerAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonApp { } - } - interface HTMLIonAppElement extends StencilComponents.IonApp, HTMLStencilElement {} - - var HTMLIonAppElement: { - prototype: HTMLIonAppElement; - new (): HTMLIonAppElement; - }; - interface HTMLElementTagNameMap { - 'ion-app': HTMLIonAppElement; - } - interface ElementTagNameMap { - 'ion-app': HTMLIonAppElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-app': JSXElements.IonAppAttributes; - } - } - namespace JSXElements { - export interface IonAppAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonAvatar { } - } - interface HTMLIonAvatarElement extends StencilComponents.IonAvatar, HTMLStencilElement {} - - var HTMLIonAvatarElement: { - prototype: HTMLIonAvatarElement; - new (): HTMLIonAvatarElement; - }; - interface HTMLElementTagNameMap { - 'ion-avatar': HTMLIonAvatarElement; - } - interface ElementTagNameMap { - 'ion-avatar': HTMLIonAvatarElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-avatar': JSXElements.IonAvatarAttributes; - } - } - namespace JSXElements { - export interface IonAvatarAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonBackButton { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -677,55 +292,7 @@ declare global { */ 'text': string; } - } - interface HTMLIonBackButtonElement extends StencilComponents.IonBackButton, HTMLStencilElement {} - - var HTMLIonBackButtonElement: { - prototype: HTMLIonBackButtonElement; - new (): HTMLIonBackButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-back-button': HTMLIonBackButtonElement; - } - interface ElementTagNameMap { - 'ion-back-button': HTMLIonBackButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-back-button': JSXElements.IonBackButtonAttributes; - } - } - namespace JSXElements { - export interface IonBackButtonAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The url to navigate back to by default when there is no history. - */ - 'defaultHref'?: string; - /** - * The icon name to use for the back button. - */ - 'icon'?: string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * The text to display in the back button. - */ - 'text'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonBackdrop { /** * If true, the backdrop will stop propagation on tap. Defaults to `true`. @@ -740,51 +307,7 @@ declare global { */ 'visible': boolean; } - } - interface HTMLIonBackdropElement extends StencilComponents.IonBackdrop, HTMLStencilElement {} - - var HTMLIonBackdropElement: { - prototype: HTMLIonBackdropElement; - new (): HTMLIonBackdropElement; - }; - interface HTMLElementTagNameMap { - 'ion-backdrop': HTMLIonBackdropElement; - } - interface ElementTagNameMap { - 'ion-backdrop': HTMLIonBackdropElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-backdrop': JSXElements.IonBackdropAttributes; - } - } - namespace JSXElements { - export interface IonBackdropAttributes extends HTMLAttributes { - /** - * Emitted when the backdrop is tapped. - */ - 'onIonBackdropTap'?: (event: CustomEvent) => void; - /** - * If true, the backdrop will stop propagation on tap. Defaults to `true`. - */ - 'stopPropagation'?: boolean; - /** - * If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. - */ - 'tappable'?: boolean; - /** - * If true, the backdrop will be visible. Defaults to `true`. - */ - 'visible'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonBadge { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -795,43 +318,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonBadgeElement extends StencilComponents.IonBadge, HTMLStencilElement {} - - var HTMLIonBadgeElement: { - prototype: HTMLIonBadgeElement; - new (): HTMLIonBadgeElement; - }; - interface HTMLElementTagNameMap { - 'ion-badge': HTMLIonBadgeElement; - } - interface ElementTagNameMap { - 'ion-badge': HTMLIonBadgeElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-badge': JSXElements.IonBadgeAttributes; - } - } - namespace JSXElements { - export interface IonBadgeAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonButton { /** * The type of button. Possible values are: `"button"`, `"bar-button"`. @@ -882,163 +369,18 @@ declare global { */ 'type': 'submit' | 'reset' | 'button'; } - } - interface HTMLIonButtonElement extends StencilComponents.IonButton, HTMLStencilElement {} - - var HTMLIonButtonElement: { - prototype: HTMLIonButtonElement; - new (): HTMLIonButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-button': HTMLIonButtonElement; - } - interface ElementTagNameMap { - 'ion-button': HTMLIonButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-button': JSXElements.IonButtonAttributes; - } - } - namespace JSXElements { - export interface IonButtonAttributes extends HTMLAttributes { - /** - * The type of button. Possible values are: `"button"`, `"bar-button"`. - */ - 'buttonType'?: string; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * If true, the user cannot interact with the button. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. - */ - 'expand'?: 'full' | 'block'; - /** - * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. - */ - 'fill'?: 'clear' | 'outline' | 'solid' | 'default'; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * Emitted when the button loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the button has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * When using a router, it specifies the transition direction when navigating to another page using `href`. - */ - 'routerDirection'?: RouterDirection; - /** - * The button shape. Possible values are: `"round"`. - */ - 'shape'?: 'round'; - /** - * The button size. Possible values are: `"small"`, `"default"`, `"large"`. - */ - 'size'?: 'small' | 'default' | 'large'; - /** - * If true, activates a button with a heavier font weight. - */ - 'strong'?: boolean; - /** - * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` - */ - 'type'?: 'submit' | 'reset' | 'button'; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonButtons { } - } - interface HTMLIonButtonsElement extends StencilComponents.IonButtons, HTMLStencilElement {} - - var HTMLIonButtonsElement: { - prototype: HTMLIonButtonsElement; - new (): HTMLIonButtonsElement; - }; - interface HTMLElementTagNameMap { - 'ion-buttons': HTMLIonButtonsElement; - } - interface ElementTagNameMap { - 'ion-buttons': HTMLIonButtonsElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-buttons': JSXElements.IonButtonsAttributes; - } - } - namespace JSXElements { - export interface IonButtonsAttributes extends HTMLAttributes { - - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCardContent { /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ 'mode': Mode; } - } - interface HTMLIonCardContentElement extends StencilComponents.IonCardContent, HTMLStencilElement {} - - var HTMLIonCardContentElement: { - prototype: HTMLIonCardContentElement; - new (): HTMLIonCardContentElement; - }; - interface HTMLElementTagNameMap { - 'ion-card-content': HTMLIonCardContentElement; - } - interface ElementTagNameMap { - 'ion-card-content': HTMLIonCardContentElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-card-content': JSXElements.IonCardContentAttributes; - } - } - namespace JSXElements { - export interface IonCardContentAttributes extends HTMLAttributes { - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCardHeader { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1053,47 +395,7 @@ declare global { */ 'translucent': boolean; } - } - interface HTMLIonCardHeaderElement extends StencilComponents.IonCardHeader, HTMLStencilElement {} - - var HTMLIonCardHeaderElement: { - prototype: HTMLIonCardHeaderElement; - new (): HTMLIonCardHeaderElement; - }; - interface HTMLElementTagNameMap { - 'ion-card-header': HTMLIonCardHeaderElement; - } - interface ElementTagNameMap { - 'ion-card-header': HTMLIonCardHeaderElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-card-header': JSXElements.IonCardHeaderAttributes; - } - } - namespace JSXElements { - export interface IonCardHeaderAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * If true, the card header will be translucent. Defaults to `false`. - */ - 'translucent'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCardSubtitle { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1104,43 +406,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonCardSubtitleElement extends StencilComponents.IonCardSubtitle, HTMLStencilElement {} - - var HTMLIonCardSubtitleElement: { - prototype: HTMLIonCardSubtitleElement; - new (): HTMLIonCardSubtitleElement; - }; - interface HTMLElementTagNameMap { - 'ion-card-subtitle': HTMLIonCardSubtitleElement; - } - interface ElementTagNameMap { - 'ion-card-subtitle': HTMLIonCardSubtitleElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-card-subtitle': JSXElements.IonCardSubtitleAttributes; - } - } - namespace JSXElements { - export interface IonCardSubtitleAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCardTitle { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1151,43 +417,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonCardTitleElement extends StencilComponents.IonCardTitle, HTMLStencilElement {} - - var HTMLIonCardTitleElement: { - prototype: HTMLIonCardTitleElement; - new (): HTMLIonCardTitleElement; - }; - interface HTMLElementTagNameMap { - 'ion-card-title': HTMLIonCardTitleElement; - } - interface ElementTagNameMap { - 'ion-card-title': HTMLIonCardTitleElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-card-title': JSXElements.IonCardTitleAttributes; - } - } - namespace JSXElements { - export interface IonCardTitleAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCard { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1198,43 +428,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonCardElement extends StencilComponents.IonCard, HTMLStencilElement {} - - var HTMLIonCardElement: { - prototype: HTMLIonCardElement; - new (): HTMLIonCardElement; - }; - interface HTMLElementTagNameMap { - 'ion-card': HTMLIonCardElement; - } - interface ElementTagNameMap { - 'ion-card': HTMLIonCardElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-card': JSXElements.IonCardAttributes; - } - } - namespace JSXElements { - export interface IonCardAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCheckbox { /** * If true, the checkbox is selected. Defaults to `false`. @@ -1261,75 +455,7 @@ declare global { */ 'value': string; } - } - interface HTMLIonCheckboxElement extends StencilComponents.IonCheckbox, HTMLStencilElement {} - - var HTMLIonCheckboxElement: { - prototype: HTMLIonCheckboxElement; - new (): HTMLIonCheckboxElement; - }; - interface HTMLElementTagNameMap { - 'ion-checkbox': HTMLIonCheckboxElement; - } - interface ElementTagNameMap { - 'ion-checkbox': HTMLIonCheckboxElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-checkbox': JSXElements.IonCheckboxAttributes; - } - } - namespace JSXElements { - export interface IonCheckboxAttributes extends HTMLAttributes { - /** - * If true, the checkbox is selected. Defaults to `false`. - */ - 'checked'?: boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * If true, the user cannot interact with the checkbox. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * The name of the control, which is submitted with the form data. - */ - 'name'?: string; - /** - * Emitted when the toggle loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the checked property has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the toggle has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * The value of the checkbox. - */ - 'value'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonChipButton { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1352,55 +478,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonChipButtonElement extends StencilComponents.IonChipButton, HTMLStencilElement {} - - var HTMLIonChipButtonElement: { - prototype: HTMLIonChipButtonElement; - new (): HTMLIonChipButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-chip-button': HTMLIonChipButtonElement; - } - interface ElementTagNameMap { - 'ion-chip-button': HTMLIonChipButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-chip-button': JSXElements.IonChipButtonAttributes; - } - } - namespace JSXElements { - export interface IonChipButtonAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * If true, the user cannot interact with the chip button. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Set to `"clear"` for a transparent button style. - */ - 'fill'?: string; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonChipIcon { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1415,47 +493,7 @@ declare global { */ 'name': string; } - } - interface HTMLIonChipIconElement extends StencilComponents.IonChipIcon, HTMLStencilElement {} - - var HTMLIonChipIconElement: { - prototype: HTMLIonChipIconElement; - new (): HTMLIonChipIconElement; - }; - interface HTMLElementTagNameMap { - 'ion-chip-icon': HTMLIonChipIconElement; - } - interface ElementTagNameMap { - 'ion-chip-icon': HTMLIonChipIconElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-chip-icon': JSXElements.IonChipIconAttributes; - } - } - namespace JSXElements { - export interface IonChipIconAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * The icon to use. Possible values are the same as `"ion-icon"`. - */ - 'name'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonChip { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -1466,43 +504,7 @@ declare global { */ 'mode': Mode; } - } - interface HTMLIonChipElement extends StencilComponents.IonChip, HTMLStencilElement {} - - var HTMLIonChipElement: { - prototype: HTMLIonChipElement; - new (): HTMLIonChipElement; - }; - interface HTMLElementTagNameMap { - 'ion-chip': HTMLIonChipElement; - } - interface ElementTagNameMap { - 'ion-chip': HTMLIonChipElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-chip': JSXElements.IonChipAttributes; - } - } - namespace JSXElements { - export interface IonChipAttributes extends HTMLAttributes { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonCol { /** * The amount to offset the column, in terms of how many columns it should shift to the right of the total available. @@ -1601,131 +603,7 @@ declare global { */ 'sizeXs': string; } - } - interface HTMLIonColElement extends StencilComponents.IonCol, HTMLStencilElement {} - - var HTMLIonColElement: { - prototype: HTMLIonColElement; - new (): HTMLIonColElement; - }; - interface HTMLElementTagNameMap { - 'ion-col': HTMLIonColElement; - } - interface ElementTagNameMap { - 'ion-col': HTMLIonColElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-col': JSXElements.IonColAttributes; - } - } - namespace JSXElements { - export interface IonColAttributes extends HTMLAttributes { - /** - * The amount to offset the column, in terms of how many columns it should shift to the right of the total available. - */ - 'offset'?: string; - /** - * The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. - */ - 'offsetLg'?: string; - /** - * The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. - */ - 'offsetMd'?: string; - /** - * The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. - */ - 'offsetSm'?: string; - /** - * The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. - */ - 'offsetXl'?: string; - /** - * The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. - */ - 'offsetXs'?: string; - /** - * The amount to pull the column, in terms of how many columns it should shift to the left of the total available. - */ - 'pull'?: string; - /** - * The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. - */ - 'pullLg'?: string; - /** - * The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. - */ - 'pullMd'?: string; - /** - * The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. - */ - 'pullSm'?: string; - /** - * The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. - */ - 'pullXl'?: string; - /** - * The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. - */ - 'pullXs'?: string; - /** - * The amount to push the column, in terms of how many columns it should shift to the right of the total available. - */ - 'push'?: string; - /** - * The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. - */ - 'pushLg'?: string; - /** - * The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. - */ - 'pushMd'?: string; - /** - * The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. - */ - 'pushSm'?: string; - /** - * The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. - */ - 'pushXl'?: string; - /** - * The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. - */ - 'pushXs'?: string; - /** - * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'size'?: string; - /** - * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'sizeLg'?: string; - /** - * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'sizeMd'?: string; - /** - * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'sizeSm'?: string; - /** - * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'sizeXl'?: string; - /** - * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. - */ - 'sizeXs'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonContent { 'color': Color; /** @@ -1746,52 +624,7 @@ declare global { */ 'scrollEvents': boolean; } - } - interface HTMLIonContentElement extends StencilComponents.IonContent, HTMLStencilElement {} - - var HTMLIonContentElement: { - prototype: HTMLIonContentElement; - new (): HTMLIonContentElement; - }; - interface HTMLElementTagNameMap { - 'ion-content': HTMLIonContentElement; - } - interface ElementTagNameMap { - 'ion-content': HTMLIonContentElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-content': JSXElements.IonContentAttributes; - } - } - namespace JSXElements { - export interface IonContentAttributes extends HTMLAttributes { - 'color'?: Color; - /** - * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. - */ - 'forceOverscroll'?: boolean; - /** - * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. - */ - 'fullscreen'?: boolean; - /** - * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`. - */ - 'scrollEnabled'?: boolean; - /** - * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. - */ - 'scrollEvents'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonDatetime { /** * The text to display on the picker's cancel button. Default: `Cancel`. @@ -1870,119 +703,7 @@ declare global { */ 'yearValues': number[] | number | string; } - } - interface HTMLIonDatetimeElement extends StencilComponents.IonDatetime, HTMLStencilElement {} - - var HTMLIonDatetimeElement: { - prototype: HTMLIonDatetimeElement; - new (): HTMLIonDatetimeElement; - }; - interface HTMLElementTagNameMap { - 'ion-datetime': HTMLIonDatetimeElement; - } - interface ElementTagNameMap { - 'ion-datetime': HTMLIonDatetimeElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-datetime': JSXElements.IonDatetimeAttributes; - } - } - namespace JSXElements { - export interface IonDatetimeAttributes extends HTMLAttributes { - /** - * The text to display on the picker's cancel button. Default: `Cancel`. - */ - 'cancelText'?: string; - /** - * Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. - */ - 'dayNames'?: string[] | string; - /** - * Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. - */ - 'dayShortNames'?: string[] | string; - /** - * Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. - */ - 'dayValues'?: number[] | number | string; - /** - * If true, the user cannot interact with the datetime. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. - */ - 'displayFormat'?: string; - /** - * The text to display on the picker's "Done" button. Default: `Done`. - */ - 'doneText'?: string; - /** - * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. - */ - 'hourValues'?: number[] | number | string; - /** - * The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. - */ - 'max'?: string | undefined; - /** - * The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. - */ - 'min'?: string | undefined; - /** - * Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. - */ - 'minuteValues'?: number[] | number | string; - /** - * Full names for each month name. This can be used to provide locale month names. Defaults to English. - */ - 'monthNames'?: string[] | string; - /** - * Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. - */ - 'monthShortNames'?: string[] | string; - /** - * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. - */ - 'monthValues'?: number[] | number | string; - /** - * Emitted when the datetime selection was cancelled. - */ - 'onIonCancel'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. - */ - 'pickerFormat'?: string; - /** - * Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. - */ - 'pickerOptions'?: PickerOptions; - /** - * The text to display when there's no date selected yet. Using lowercase to match the input attribute - */ - 'placeholder'?: string; - /** - * the value of the datetime. - */ - 'value'?: string; - /** - * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. - */ - 'yearValues'?: number[] | number | string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonFabButton { /** * If true, the fab button will be show a close icon. Defaults to `false`. @@ -2013,63 +734,7 @@ declare global { */ 'translucent': boolean; } - } - interface HTMLIonFabButtonElement extends StencilComponents.IonFabButton, HTMLStencilElement {} - - var HTMLIonFabButtonElement: { - prototype: HTMLIonFabButtonElement; - new (): HTMLIonFabButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-fab-button': HTMLIonFabButtonElement; - } - interface ElementTagNameMap { - 'ion-fab-button': HTMLIonFabButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-fab-button': JSXElements.IonFabButtonAttributes; - } - } - namespace JSXElements { - export interface IonFabButtonAttributes extends HTMLAttributes { - /** - * If true, the fab button will be show a close icon. Defaults to `false`. - */ - 'activated'?: boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** - * If true, the user cannot interact with the fab button. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * If true, the fab button will show when in a fab-list. - */ - 'show'?: boolean; - /** - * If true, the fab button will be translucent. Defaults to `false`. - */ - 'translucent'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonFabList { /** * If true, the fab list will be show all fab buttons in the list. Defaults to `false`. @@ -2080,43 +745,7 @@ declare global { */ 'side': 'start' | 'end' | 'top' | 'bottom'; } - } - interface HTMLIonFabListElement extends StencilComponents.IonFabList, HTMLStencilElement {} - - var HTMLIonFabListElement: { - prototype: HTMLIonFabListElement; - new (): HTMLIonFabListElement; - }; - interface HTMLElementTagNameMap { - 'ion-fab-list': HTMLIonFabListElement; - } - interface ElementTagNameMap { - 'ion-fab-list': HTMLIonFabListElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-fab-list': JSXElements.IonFabListAttributes; - } - } - namespace JSXElements { - export interface IonFabListAttributes extends HTMLAttributes { - /** - * If true, the fab list will be show all fab buttons in the list. Defaults to `false`. - */ - 'activated'?: boolean; - /** - * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. - */ - 'side'?: 'start' | 'end' | 'top' | 'bottom'; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonFab { 'activated': boolean; /** @@ -2136,48 +765,7 @@ declare global { */ 'vertical': 'top' | 'bottom' | 'center'; } - } - interface HTMLIonFabElement extends StencilComponents.IonFab, HTMLStencilElement {} - - var HTMLIonFabElement: { - prototype: HTMLIonFabElement; - new (): HTMLIonFabElement; - }; - interface HTMLElementTagNameMap { - 'ion-fab': HTMLIonFabElement; - } - interface ElementTagNameMap { - 'ion-fab': HTMLIonFabElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-fab': JSXElements.IonFabAttributes; - } - } - namespace JSXElements { - export interface IonFabAttributes extends HTMLAttributes { - 'activated'?: boolean; - /** - * If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. - */ - 'edge'?: boolean; - /** - * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. - */ - 'horizontal'?: 'start' | 'end' | 'center'; - /** - * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. - */ - 'vertical'?: 'top' | 'bottom' | 'center'; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonFooter { /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -2188,82 +776,14 @@ declare global { */ 'translucent': boolean; } - } - interface HTMLIonFooterElement extends StencilComponents.IonFooter, HTMLStencilElement {} - - var HTMLIonFooterElement: { - prototype: HTMLIonFooterElement; - new (): HTMLIonFooterElement; - }; - interface HTMLElementTagNameMap { - 'ion-footer': HTMLIonFooterElement; - } - interface ElementTagNameMap { - 'ion-footer': HTMLIonFooterElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-footer': JSXElements.IonFooterAttributes; - } - } - namespace JSXElements { - export interface IonFooterAttributes extends HTMLAttributes { - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. - */ - 'translucent'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonGrid { /** * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. */ 'fixed': boolean; } - } - interface HTMLIonGridElement extends StencilComponents.IonGrid, HTMLStencilElement {} - - var HTMLIonGridElement: { - prototype: HTMLIonGridElement; - new (): HTMLIonGridElement; - }; - interface HTMLElementTagNameMap { - 'ion-grid': HTMLIonGridElement; - } - interface ElementTagNameMap { - 'ion-grid': HTMLIonGridElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-grid': JSXElements.IonGridAttributes; - } - } - namespace JSXElements { - export interface IonGridAttributes extends HTMLAttributes { - /** - * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. - */ - 'fixed'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonHeader { /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -2274,43 +794,7 @@ declare global { */ 'translucent': boolean; } - } - interface HTMLIonHeaderElement extends StencilComponents.IonHeader, HTMLStencilElement {} - - var HTMLIonHeaderElement: { - prototype: HTMLIonHeaderElement; - new (): HTMLIonHeaderElement; - }; - interface HTMLElementTagNameMap { - 'ion-header': HTMLIonHeaderElement; - } - interface ElementTagNameMap { - 'ion-header': HTMLIonHeaderElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-header': JSXElements.IonHeaderAttributes; - } - } - namespace JSXElements { - export interface IonHeaderAttributes extends HTMLAttributes { - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. - */ - 'translucent'?: boolean; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonHideWhen { /** * If the current media query matches this value, the element will hide. @@ -2337,59 +821,7 @@ declare global { */ 'size': string; } - } - interface HTMLIonHideWhenElement extends StencilComponents.IonHideWhen, HTMLStencilElement {} - - var HTMLIonHideWhenElement: { - prototype: HTMLIonHideWhenElement; - new (): HTMLIonHideWhenElement; - }; - interface HTMLElementTagNameMap { - 'ion-hide-when': HTMLIonHideWhenElement; - } - interface ElementTagNameMap { - 'ion-hide-when': HTMLIonHideWhenElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-hide-when': JSXElements.IonHideWhenAttributes; - } - } - namespace JSXElements { - export interface IonHideWhenAttributes extends HTMLAttributes { - /** - * If the current media query matches this value, the element will hide. - */ - 'mediaQuery'?: string; - /** - * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. - */ - 'mode'?: Mode; - /** - * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. - */ - 'or'?: boolean; - /** - * If the current orientation matches this value, the element will hide. - */ - 'orientation'?: string; - /** - * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against. - */ - 'platform'?: string; - /** - * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. - */ - 'size'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { 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. @@ -2400,47 +832,7 @@ declare global { */ 'src': string; } - } - interface HTMLIonImgElement extends StencilComponents.IonImg, HTMLStencilElement {} - - var HTMLIonImgElement: { - prototype: HTMLIonImgElement; - new (): HTMLIonImgElement; - }; - interface HTMLElementTagNameMap { - 'ion-img': HTMLIonImgElement; - } - interface ElementTagNameMap { - 'ion-img': HTMLIonImgElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-img': JSXElements.IonImgAttributes; - } - } - namespace JSXElements { - export interface IonImgAttributes extends HTMLAttributes { - /** - * 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. - */ - 'alt'?: string; - /** - * Emitted when the img src is loaded - */ - 'onIonImgDidLoad'?: (event: CustomEvent) => void; - /** - * The image URL. This attribute is mandatory for the element. - */ - 'src'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonInfiniteScrollContent { /** * An animated SVG spinner that shows while loading. @@ -2451,43 +843,7 @@ declare global { */ 'loadingText': string; } - } - interface HTMLIonInfiniteScrollContentElement extends StencilComponents.IonInfiniteScrollContent, HTMLStencilElement {} - - var HTMLIonInfiniteScrollContentElement: { - prototype: HTMLIonInfiniteScrollContentElement; - new (): HTMLIonInfiniteScrollContentElement; - }; - interface HTMLElementTagNameMap { - 'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement; - } - interface ElementTagNameMap { - 'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-infinite-scroll-content': JSXElements.IonInfiniteScrollContentAttributes; - } - } - namespace JSXElements { - export interface IonInfiniteScrollContentAttributes extends HTMLAttributes { - /** - * An animated SVG spinner that shows while loading. - */ - 'loadingSpinner'?: string; - /** - * Optional text to display while loading. - */ - 'loadingText'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonInfiniteScroll { /** * Call `complete()` within the `infinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`. @@ -2510,51 +866,7 @@ declare global { */ 'waitFor': (action: Promise) => void; } - } - interface HTMLIonInfiniteScrollElement extends StencilComponents.IonInfiniteScroll, HTMLStencilElement {} - - var HTMLIonInfiniteScrollElement: { - prototype: HTMLIonInfiniteScrollElement; - new (): HTMLIonInfiniteScrollElement; - }; - interface HTMLElementTagNameMap { - 'ion-infinite-scroll': HTMLIonInfiniteScrollElement; - } - interface ElementTagNameMap { - 'ion-infinite-scroll': HTMLIonInfiniteScrollElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-infinite-scroll': JSXElements.IonInfiniteScrollAttributes; - } - } - namespace JSXElements { - export interface IonInfiniteScrollAttributes extends HTMLAttributes { - /** - * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. - */ - 'disabled'?: boolean; - /** - * Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. - */ - 'onIonInfinite'?: (event: CustomEvent) => void; - /** - * The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. - */ - 'position'?: 'top' | 'bottom'; - /** - * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. - */ - 'threshold'?: string; - } - } -} - - -declare global { - - namespace StencilComponents { interface IonInput { /** * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. @@ -2669,26 +981,3489 @@ declare global { */ 'value': string; } - } - interface HTMLIonInputElement extends StencilComponents.IonInput, HTMLStencilElement {} + interface IonItemDivider { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } - var HTMLIonInputElement: { - prototype: HTMLIonInputElement; - new (): HTMLIonInputElement; - }; - interface HTMLElementTagNameMap { - 'ion-input': HTMLIonInputElement; - } - interface ElementTagNameMap { - 'ion-input': HTMLIonInputElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-input': JSXElements.IonInputAttributes; + interface IonItemGroup { + + } + + interface IonItemOption { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * If true, the user cannot interact with the item option. Defaults to `false`. + */ + 'disabled': boolean; + /** + * If true, the option will expand to take up the available width and cover any other options. Defaults to `false`. + */ + 'expandable': boolean; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href': string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonItemOptions { + 'fireSwipeEvent': () => void; + 'isEndSide': () => boolean; + /** + * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. + */ + 'side': Side; + 'width': () => number; + } + + interface IonItemSliding { + /** + * Close the sliding item. Items can also be closed from the [List](../../list/List). + */ + 'close': () => void; + /** + * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). + */ + 'closeOpened': () => boolean; + /** + * Get the amount the item is open in pixels. + */ + 'getOpenAmount': () => number; + /** + * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. + */ + 'getSlidingRatio': () => number; + } + + interface IonItem { + /** + * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. + */ + 'button': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. + */ + 'detail': boolean; + /** + * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + */ + 'detailIcon': string; + /** + * If true, the user cannot interact with the item. Defaults to `false`. + */ + 'disabled': boolean; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href': string; + /** + * How the bottom border should be displayed on the item. + */ + 'lines': 'full' | 'inset' | 'none'; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + 'routerDirection': RouterDirection; + 'state': 'valid' | 'invalid' | 'focus'; + /** + * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + */ + 'type': 'submit' | 'reset' | 'button'; + } + + interface IonLabel { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + 'getText': () => string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' + */ + 'position': 'fixed' | 'stacked' | 'floating'; + } + + interface IonListHeader { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonList { + /** + * Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). Returns a boolean value of whether it closed an item or not. + */ + 'closeSlidingItems': () => boolean; + /** + * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. + */ + 'getOpenItem': () => HTMLIonItemSlidingElement | undefined; + /** + * If true, the list will have margin around it and rounded corners. Defaults to `false`. + */ + 'inset': boolean; + /** + * How the bottom border should be displayed on all items. + */ + 'lines': 'full' | 'inset' | 'none'; + /** + * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. + */ + 'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void; + } + + interface IonLoadingController { + /** + * Create a loading overlay with loading options. + */ + 'create': (opts?: LoadingOptions | undefined) => Promise; + /** + * Dismiss the open loading overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, loadingId?: number) => Promise; + /** + * Get the most recently opened loading overlay. + */ + 'getTop': () => HTMLIonLoadingElement; + } + + interface IonLoading { + /** + * Optional text content to display in the loading indicator. + */ + 'content': string; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass': string | string[]; + /** + * Dismiss the loading overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * If true, the loading indicator will dismiss when the page changes. Defaults to `false`. + */ + 'dismissOnPageChange': boolean; + /** + * Number of milliseconds to wait before dismissing the loading indicator. + */ + 'duration': number; + /** + * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + */ + 'enableBackdropDismiss': boolean; + /** + * Animation to use when the loading indicator is presented. + */ + 'enterAnimation': AnimationBuilder; + /** + * If true, the loading will blur any inputs and hide the keyboard + */ + 'keyboardClose': boolean; + /** + * Animation to use when the loading indicator is dismissed. + */ + 'leaveAnimation': AnimationBuilder; + /** + * Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. + */ + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'overlayId': number; + /** + * Present the loading overlay after it has been created. + */ + 'present': () => Promise; + /** + * If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. + */ + 'showBackdrop': boolean; + /** + * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + */ + 'spinner': string; + /** + * If true, the loading indicator will be translucent. Defaults to `false`. + */ + 'translucent': boolean; + /** + * If true, the loading indicator will animate. Defaults to `true`. + */ + 'willAnimate': boolean; + } + + interface IonMenuButton { + /** + * Automatically hides the menu button when the corresponding menu is not active + */ + 'autoHide': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle + */ + 'menu': string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonMenuController { + '_register': (menu: Menu) => void; + '_setActiveMenu': (menu: Menu) => void; + '_setOpen': (menu: Menu, shouldOpen: boolean, animated: boolean) => Promise; + '_unregister': (menu: Menu) => void; + /** + * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu. + */ + 'close': (menuId?: string | undefined) => Promise; + 'createAnimation': (type: string, menuCmp: Menu) => Promise; + /** + * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. + */ + 'enable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; + /** + * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `left` or `right`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. + */ + 'get': (menuId?: string | undefined) => HTMLIonMenuElement | null; + /** + * Returns an array of all menu instances. + */ + 'getMenus': () => HTMLIonMenuElement[]; + /** + * Returns the instance of the menu already opened, otherwise `null`. + */ + 'getOpen': () => HTMLIonMenuElement | null; + /** + * Returns true if any menu is currently animating. + */ + 'isAnimating': () => boolean; + /** + * Returns true if the specified menu is enabled. + */ + 'isEnabled': (menuId?: string | undefined) => boolean; + /** + * Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. + */ + 'isOpen': (menuId?: string | undefined) => boolean; + /** + * Open the menu. + */ + 'open': (menuId?: string | undefined) => Promise; + 'registerAnimation': (name: string, animation: AnimationBuilder) => void; + /** + * Used to enable or disable the ability to swipe open the menu. + */ + 'swipeEnable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; + /** + * Toggle the menu. If it's closed, it will open, and if opened, it will close. + */ + 'toggle': (menuId?: string | undefined) => Promise; + } + + interface IonMenuToggle { + /** + * Automatically hides the content when the corresponding menu is not active + */ + 'autoHide': boolean; + /** + * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle + */ + 'menu': string; + } + + interface IonMenu { + 'close': (animated?: boolean) => Promise; + /** + * The content's id the menu should use. + */ + 'contentId': string; + /** + * If true, the menu is disabled. Default `false`. + */ + 'disabled': boolean; + 'getWidth': () => number; + 'isActive': () => boolean; + 'isOpen': () => boolean; + /** + * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. + */ + 'maxEdgeStart': number; + /** + * An id for the menu. + */ + 'menuId': string; + 'open': (animated?: boolean) => Promise; + 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; + /** + * Which side of the view the menu should be placed. Default `"start"`. + */ + 'side': Side; + /** + * If true, swiping the menu is enabled. Default `true`. + */ + 'swipeEnabled': boolean; + 'toggle': (animated?: boolean) => Promise; + /** + * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + */ + 'type': string; + } + + interface IonModalController { + /** + * Create a modal overlay with modal options. + */ + 'create': (opts?: ModalOptions | undefined) => Promise; + /** + * Dismiss the open modal overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, modalId?: number) => Promise; + /** + * Get the most recently opened modal overlay. + */ + 'getTop': () => HTMLIonModalElement; + } + + interface IonModal { + /** + * The component to display inside of the modal. + */ + 'component': ComponentRef; + /** + * The data to pass to the modal component. + */ + 'componentProps': ComponentProps; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass': string | string[]; + 'delegate': FrameworkDelegate; + /** + * Dismiss the modal overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'enableBackdropDismiss': boolean; + /** + * Animation to use when the modal is presented. + */ + 'enterAnimation': AnimationBuilder; + 'keyboardClose': boolean; + /** + * Animation to use when the modal is dismissed. + */ + 'leaveAnimation': AnimationBuilder; + /** + * Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'overlayId': number; + /** + * Present the modal overlay after it has been created. + */ + 'present': () => Promise; + /** + * If true, a backdrop will be displayed behind the modal. Defaults to `true`. + */ + 'showBackdrop': boolean; + /** + * If true, the modal will animate. Defaults to `true`. + */ + 'willAnimate': boolean; + } + + interface IonNavPop { + + } + + interface IonNavPush { + /** + * Component to navigate to + */ + 'component': NavComponent; + /** + * Data you want to pass to the component as props + */ + 'componentProps': ComponentProps; + } + + interface IonNavSetRoot { + /** + * Component you want to make root for the navigation stack + */ + 'component': NavComponent; + /** + * Data you want to pass to the component as props + */ + 'componentProps': ComponentProps; + } + + interface IonNav { + /** + * If the nav should animate the components or not + */ + 'animated': boolean; + /** + * Returns true or false if the current view can go back + */ + 'canGoBack': (view?: ViewController | undefined) => boolean; + 'delegate': FrameworkDelegate; + /** + * Gets the active view + */ + 'getActive': () => ViewController | undefined; + /** + * Returns the view at the index + */ + 'getByIndex': (index: number) => ViewController | undefined; + /** + * Gets the previous view + */ + 'getPrevious': (view?: ViewController | undefined) => ViewController | undefined; + 'getRouteId': () => RouteID | undefined; + /** + * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. + */ + 'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. + */ + 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Returns the length of navigation stack + */ + 'isAnimating': () => boolean; + 'length': () => number; + /** + * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. + */ + 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Pop to a specific index in the navigation stack + */ + 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Navigate back to the root of the stack, no matter how far back that is. + */ + 'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams + */ + 'push': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Removes a page from the nav stack at the specified index. + */ + 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Root NavComponent to load + */ + 'root': NavComponent; + /** + * Any parameters for the root component + */ + 'rootParams': ComponentProps; + /** + * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. + */ + 'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + /** + * Set the root for the current navigation stack. + */ + 'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; + 'setRouteId': (id: string, params: any, direction: number) => Promise; + /** + * If the nav component should allow for swipe-to-go-back + */ + 'swipeBackEnabled': boolean; + } + + interface IonNote { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonPickerColumn { + 'col': PickerColumn; + } + + interface IonPickerController { + 'create': (opts?: PickerOptions | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise; + 'getTop': () => HTMLIonPickerElement; + } + + interface IonPicker { + /** + * Array of buttons to be displayed at the top of the picker. + */ + 'buttons': PickerButton[]; + /** + * Array of columns to be displayed in the picker. + */ + 'columns': PickerColumn[]; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass': string | string[]; + /** + * Dismiss the picker overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * Number of milliseconds to wait before dismissing the picker. + */ + 'duration': number; + /** + * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'enableBackdropDismiss': boolean; + /** + * Animation to use when the picker is presented. + */ + 'enterAnimation': AnimationBuilder; + /** + * Returns the column the matches the specified name + */ + 'getColumn': (name: string) => PickerColumn | undefined; + /** + * If the keyboard should be able to close the picker. Defaults to true. + */ + 'keyboardClose': boolean; + /** + * Animation to use when the picker is dismissed. + */ + 'leaveAnimation': AnimationBuilder; + /** + * Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'overlayId': number; + /** + * Present the picker overlay after it has been created. + */ + 'present': () => Promise; + /** + * If true, a backdrop will be displayed behind the picker. Defaults to `true`. + */ + 'showBackdrop': boolean; + /** + * If true, the picker will animate. Defaults to `true`. + */ + 'willAnimate': boolean; + } + + interface IonPopoverController { + /** + * Create a popover overlay with popover options. + */ + 'create': (opts?: PopoverOptions | undefined) => Promise; + /** + * Dismiss the open popover overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, popoverId?: number) => Promise; + /** + * Get the most recently opened popover overlay. + */ + 'getTop': () => HTMLIonPopoverElement; + } + + interface IonPopover { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The component to display inside of the popover. + */ + 'component': ComponentRef; + /** + * The data to pass to the popover component. + */ + 'componentProps': ComponentProps; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass': string | string[]; + 'delegate': FrameworkDelegate; + /** + * Dismiss the popover overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'enableBackdropDismiss': boolean; + /** + * Animation to use when the popover is presented. + */ + 'enterAnimation': AnimationBuilder; + /** + * The event to pass to the popover animation. + */ + 'ev': any; + 'keyboardClose': boolean; + /** + * Animation to use when the popover is dismissed. + */ + 'leaveAnimation': AnimationBuilder; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'overlayId': number; + /** + * Present the popover overlay after it has been created. + */ + 'present': () => Promise; + /** + * If true, a backdrop will be displayed behind the popover. Defaults to `true`. + */ + 'showBackdrop': boolean; + /** + * If true, the popover will be translucent. Defaults to `false`. + */ + 'translucent': boolean; + /** + * If true, the popover will animate. Defaults to `true`. + */ + 'willAnimate': boolean; + } + + interface IonRadioGroup { + 'allowEmptySelection': boolean; + /** + * Indicates that the user cannot interact with the control. + */ + 'disabled': boolean; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * the value of the radio group. + */ + 'value': string; + } + + interface IonRadio { + /** + * If true, the radio is selected. Defaults to `false`. + */ + 'checked': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * Indicates that the user cannot interact with the control. + */ + 'disabled': boolean; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * the value of the radio. + */ + 'value': string; + } + + interface IonRangeKnob { + 'disabled': boolean; + 'knob': Knob; + 'labelId': string; + 'max': number; + 'min': number; + 'pin': boolean; + 'pressed': boolean; + 'ratio': number; + 'value': number; + } + + interface IonRange { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. + */ + 'debounce': number; + /** + * Indicates that the user cannot interact with the control. + */ + 'disabled': boolean; + /** + * Show two knobs. Defaults to `false`. + */ + 'dualKnobs': boolean; + /** + * Maximum integer value of the range. Defaults to `100`. + */ + 'max': number; + /** + * Minimum integer value of the range. Defaults to `0`. + */ + 'min': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`. + */ + 'pin': boolean; + /** + * If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. + */ + 'snaps': boolean; + /** + * Specifies the value granularity. Defaults to `1`. + */ + 'step': number; + /** + * the value of the range. + */ + 'value': any; + } + + interface IonRefresherContent { + /** + * A static icon to display when you begin to pull down + */ + 'pullingIcon': string; + /** + * The text you want to display when you begin to pull down + */ + 'pullingText': string; + /** + * An animated SVG spinner that shows when refreshing begins + */ + 'refreshingSpinner': string; + /** + * The text you want to display when performing a refresh + */ + 'refreshingText': string; + } + + interface IonRefresher { + /** + * Changes the refresher's state from `refreshing` to `cancelling`. + */ + 'cancel': () => void; + /** + * Time it takes to close the refresher. Defaults to `280ms`. + */ + 'closeDuration': string; + /** + * Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`. + */ + 'complete': () => void; + /** + * If true, the refresher will be hidden. Defaults to `false`. + */ + 'disabled': boolean; + /** + * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position. + */ + 'getProgress': () => number; + /** + * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. + */ + 'pullMax': number; + /** + * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. + */ + 'pullMin': number; + /** + * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. + */ + 'snapbackDuration': string; + } + + interface IonReorderGroup { + /** + * If true, the reorder will be hidden. Defaults to `true`. + */ + 'disabled': boolean; + } + + interface IonReorder { + + } + + interface IonRippleEffect { + /** + * Adds the ripple effect to the parent elment + */ + 'addRipple': (pageX: number, pageY: number) => void; + 'parent': HTMLElement | string; + /** + * If true, the ripple effect will listen to any click events and animate + */ + 'tapClick': boolean; + } + + interface IonRouteRedirect { + /** + * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. + */ + 'from': string; + /** + * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perfom a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. + */ + 'to': string; + } + + interface IonRoute { + /** + * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select. + */ + 'component': string; + /** + * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. + */ + 'componentProps': {[key: string]: any}; + /** + * Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. + */ + 'url': string; + } + + interface IonRouterOutlet { + 'animated': boolean; + 'animationBuilder': AnimationBuilder; + 'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise; + 'delegate': FrameworkDelegate; + /** + * Returns the ID for the current route + */ + 'getRouteId': () => RouteID | undefined; + /** + * Set the root component for the given navigation stack + */ + 'setRoot': (component: ComponentRef, params?: ComponentProps | undefined, opts?: RouterOutletOptions | undefined) => Promise; + 'setRouteId': (id: string, params: any, direction: number) => Promise; + } + + interface IonRouter { + 'navChanged': (intent: number) => Promise; + 'printDebug': () => void; + /** + * Navigate to the specified URL + */ + 'push': (url: string, direction?: RouterDirection) => Promise; + /** + * By default `ion-router` will match the routes at the root path ("/"). That can be changed when + */ + 'root': string; + /** + * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires aditional server-side configuration in order to properly work. On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. + */ + 'useHash': boolean; + } + + interface IonRow { + + } + + interface IonScroll { + /** + * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. + */ + 'forceOverscroll': boolean; + /** + * The mode for component. + */ + 'mode': Mode; + /** + * Scroll by a specified X/Y distance in the component + */ + 'scrollByPoint': (x: number, y: number, duration: number) => Promise; + /** + * If true, the component will emit scroll events. + */ + 'scrollEvents': boolean; + /** + * Scroll to the bottom of the component + */ + 'scrollToBottom': (duration: number) => Promise; + /** + * Scroll to a specified X/Y location in the component + */ + 'scrollToPoint': (x: number, y: number, duration: number) => Promise; + /** + * Scroll to the top of the component + */ + 'scrollToTop': (duration: number) => Promise; + } + + interface IonSearchbar { + /** + * If true, enable searchbar animation. Default `false`. + */ + 'animated': boolean; + /** + * Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + */ + 'autocomplete': string; + /** + * Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + */ + 'autocorrect': string; + /** + * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + */ + 'cancelButtonIcon': string; + /** + * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. + */ + 'cancelButtonText': string; + /** + * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. + */ + 'clearIcon': string; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. + */ + 'debounce': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * Set the input's placeholder. Default `"Search"`. + */ + 'placeholder': string; + /** + * The icon to use as the search icon. Defaults to `"search"`. + */ + 'searchIcon': string; + /** + * If true, show the cancel button. Default `false`. + */ + 'showCancelButton': boolean; + /** + * If true, enable spellcheck on the input. Default `false`. + */ + 'spellcheck': boolean; + /** + * Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + */ + 'type': string; + /** + * the value of the searchbar. + */ + 'value': string; + } + + interface IonSegmentButton { + /** + * If true, the segment button is selected. Defaults to `false`. + */ + 'checked': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + 'disabled': boolean; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The value of the segment button. + */ + 'value': string; + } + + interface IonSegment { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + 'disabled': boolean; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * the value of the segment. + */ + 'value': string; + } + + interface IonSelectOption { + /** + * If true, the user cannot interact with the select option. Defaults to `false`. + */ + 'disabled': boolean; + /** + * If true, the element is selected. + */ + 'selected': boolean; + /** + * The text value of the option. + */ + 'value': string; + } + + interface IonSelectPopover { + /** + * Header text for the popover + */ + 'header': string; + /** + * Text for popover body + */ + 'message': string; + /** + * Array of options for the popover + */ + 'options': SelectPopoverOption[]; + /** + * Subheader text for the popover + */ + 'subHeader': string; + } + + interface IonSelect { + /** + * The text to display on the cancel button. Default: `Cancel`. + */ + 'cancelText': string; + /** + * If true, the user cannot interact with the select. Defaults to `false`. + */ + 'disabled': boolean; + /** + * The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. + */ + 'interface': SelectInterface; + /** + * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. + */ + 'interfaceOptions': any; + /** + * If true, the select can accept multiple values. + */ + 'multiple': boolean; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * The text to display on the ok button. Default: `OK`. + */ + 'okText': string; + /** + * The text to display when the select is empty. + */ + 'placeholder': string; + /** + * The text to display instead of the selected option's value. + */ + 'selectedText': string; + /** + * the value of the select. + */ + 'value': any; + } + + interface IonShowWhen { + /** + * If the current media query matches this value, the element will show. + */ + 'mediaQuery': string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. + */ + 'mode': Mode; + /** + * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. + */ + 'or': boolean; + /** + * If the current orientation matches this value, the element will show. + */ + 'orientation': string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. + */ + 'platform': string; + /** + * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. + */ + 'size': string; + } + + interface IonSkeletonText { + /** + * Width for the element to render at. Default is 100% + */ + 'width': string; + } + + interface IonSlide { + + } + + interface IonSlides { + /** + * Get the index of the active slide. + */ + 'getActiveIndex': () => number; + /** + * Get the index of the previous slide. + */ + 'getPreviousIndex': () => number; + /** + * Get whether or not the current slide is the first slide. + */ + 'isBeginning': () => boolean; + /** + * Get whether or not the current slide is the last slide. + */ + 'isEnd': () => boolean; + /** + * Get the total number of slides. + */ + 'length': () => number; + /** + * Lock or unlock the ability to slide to the next slides. + */ + 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => any; + /** + * Lock or unlock the ability to slide to the previous slides. + */ + 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => any; + /** + * Lock or unlock the ability to slide to change slides. + */ + 'lockSwipes': (shouldLockSwipes: boolean) => any; + /** + * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options + */ + 'options': any; + /** + * If true, show the pagination. Defaults to `false`. + */ + 'pager': boolean; + /** + * If true, show the scrollbar. Defaults to `false`. + */ + 'scrollbar': boolean; + /** + * Transition to the next slide. + */ + 'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void; + /** + * Transition to the previous slide. + */ + 'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void; + /** + * Transition to the specified slide. + */ + 'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => void; + /** + * Start auto play. + */ + 'startAutoplay': () => void; + /** + * Stop auto play. + */ + 'stopAutoplay': () => void; + /** + * Update the underlying slider implementation. Call this if you've added or removed child slides. + */ + 'update': () => void; + } + + interface IonSpinner { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * Duration of the spinner animation in milliseconds. The default varies based on the spinner. + */ + 'duration': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + */ + 'name': string; + /** + * If true, the spinner's animation will be paused. Defaults to `false`. + */ + 'paused': boolean; + } + + interface IonSplitPane { + /** + * If true, the split pane will be hidden. Defaults to `false`. + */ + 'disabled': boolean; + 'isPane': (element: HTMLElement) => boolean; + /** + * Returns if the split pane is toggled or not + */ + 'isVisible': () => boolean; + /** + * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. + */ + 'when': string | boolean; + } + + interface IonTabButton { + 'badge': string; + 'badgeColor': string; + 'color': Color; + 'disabled': boolean; + 'href': string; + 'icon': string; + 'label': string; + 'mode': Mode; + /** + * If true, the tab button will be selected. Defaults to `false`. + */ + 'selected': boolean; + } + + interface IonTab { + /** + * If true, sets the tab as the active tab. + */ + 'active': boolean; + /** + * The badge for the tab. + */ + 'badge': string; + /** + * The badge color for the tab button. + */ + 'badgeColor': Color; + /** + * hidden + */ + 'btnId': string; + /** + * The component to display inside of the tab. + */ + 'component': ComponentRef; + /** + * hidden + */ + 'delegate': FrameworkDelegate; + /** + * If true, the user cannot interact with the tab. Defaults to `false`. + */ + 'disabled': boolean; + /** + * Get the Id for the tab + */ + 'getTabId': () => string | null; + /** + * The URL which will be used as the `href` within this tab's `` anchor. + */ + 'href': string; + /** + * The icon for the tab. + */ + 'icon': string; + /** + * The label of the tab. + */ + 'label': string; + /** + * The name of the tab. + */ + 'name': string; + /** + * If true, the tab will be selected. Defaults to `false`. + */ + 'selected': boolean; + /** + * Set the active component for the tab + */ + 'setActive': () => Promise; + /** + * If true, the tab button is visible within the tabbar. Defaults to `true`. + */ + 'show': boolean; + /** + * If true, hide the tabs on child pages. + */ + 'tabsHideOnSubPages': boolean; + } + + interface IonTabbar { + 'color': Color; + /** + * If true, show the tab highlight bar under the selected tab. + */ + 'highlight': boolean; + /** + * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. + */ + 'layout': TabbarLayout; + 'mode': Mode; + /** + * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. + */ + 'placement': TabbarPlacement; + /** + * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen. + */ + 'scrollable': boolean; + /** + * The selected tab component + */ + 'selectedTab': HTMLIonTabElement; + /** + * The tabs to render + */ + 'tabs': HTMLIonTabElement[]; + /** + * If true, the tabbar will be translucent. Defaults to `false`. + */ + 'translucent': boolean; + } + + interface IonTabs { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + 'getRouteId': () => RouteID | undefined; + /** + * Get the currently selected tab + */ + 'getSelected': () => HTMLIonTabElement | undefined; + /** + * Get the tab at the given index + */ + 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; + /** + * A unique name for the tabs. + */ + 'name': string; + /** + * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen. + */ + 'scrollable': boolean; + /** + * Index or the Tab instance, of the tab to select. + */ + 'select': (tabOrIndex: number | HTMLIonTabElement) => Promise; + 'setRouteId': (id: string) => Promise; + /** + * If true, the tabbar will be hidden. Defaults to `false`. + */ + 'tabbarHidden': boolean; + /** + * If true, show the tab highlight bar under the selected tab. + */ + 'tabbarHighlight': boolean; + /** + * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. + */ + 'tabbarLayout': TabbarLayout; + /** + * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. + */ + 'tabbarPlacement': TabbarPlacement; + /** + * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + */ + 'translucent': boolean; + /** + * If true, the tabs will use the router and `selectedTab` will not do anything. + */ + 'useRouter': boolean; + } + + interface IonText { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonTextarea { + /** + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + */ + 'autocapitalize': string; + /** + * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + */ + 'autocomplete': string; + /** + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + */ + 'autofocus': boolean; + /** + * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + */ + 'clearOnEdit': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. + */ + 'cols': number; + /** + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + */ + 'debounce': number; + /** + * If true, the user cannot interact with the textarea. Defaults to `false`. + */ + 'disabled': boolean; + /** + * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. + */ + 'maxlength': number; + /** + * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. + */ + 'minlength': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * Instructional text that shows before the input has a value. + */ + 'placeholder': string; + /** + * If true, the user cannot modify the value. Defaults to `false`. + */ + 'readonly': boolean; + /** + * If true, the user must fill in a value before submitting a form. + */ + 'required': boolean; + /** + * The number of visible text lines for the control. + */ + 'rows': number; + /** + * If true, the element will have its spelling and grammar checked. Defaults to `false`. + */ + 'spellcheck': boolean; + /** + * The value of the textarea. + */ + 'value': string; + /** + * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. + */ + 'wrap': string; + } + + interface IonThumbnail { + + } + + interface IonTitle { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonToastController { + /** + * Create a toast overlay with toast options. + */ + 'create': (opts?: ToastOptions | undefined) => Promise; + /** + * Dismiss the open toast overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, toastId?: number) => Promise; + /** + * Get the most recently opened toast overlay. + */ + 'getTop': () => HTMLIonToastElement; + } + + interface IonToast { + /** + * Text to display in the close button. + */ + 'closeButtonText': string; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass': string | string[]; + /** + * Dismiss the toast overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. + */ + 'duration': number; + /** + * Animation to use when the toast is presented. + */ + 'enterAnimation': AnimationBuilder; + 'keyboardClose': boolean; + /** + * Animation to use when the toast is dismissed. + */ + 'leaveAnimation': AnimationBuilder; + /** + * Message to be shown in the toast. + */ + 'message': string; + /** + * Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'overlayId': number; + /** + * The position of the toast on the screen. Possible values: "top", "middle", "bottom". + */ + 'position': string; + /** + * Present the toast overlay after it has been created. + */ + 'present': () => Promise; + /** + * If true, the close button will be displayed. Defaults to `false`. + */ + 'showCloseButton': boolean; + /** + * If true, the toast will be translucent. Defaults to `false`. + */ + 'translucent': boolean; + /** + * If true, the toast will animate. Defaults to `true`. + */ + 'willAnimate': boolean; + } + + interface IonToggle { + /** + * If true, the toggle is selected. Defaults to `false`. + */ + 'checked': boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * Indicates that the user cannot interact with the control. + */ + 'disabled': boolean; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * the value of the toggle. + */ + 'value': string; + } + + interface IonToolbar { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + + interface IonVirtualScroll { + /** + * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. + */ + 'approxFooterHeight': number; + /** + * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. + */ + 'approxHeaderHeight': number; + /** + * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. + */ + 'approxItemHeight': number; + 'domRender': DomRenderFn; + /** + * Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. + */ + 'footerFn': HeaderFn; + /** + * Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. + */ + 'headerFn': HeaderFn; + 'itemHeight': ItemHeightFn; + /** + * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. + */ + 'items': any[]; + 'markDirty': (offset: number, len?: number) => void; + 'markDirtyTail': () => void; + 'nodeRender': ItemRenderFn; + 'positionForItem': (index: number) => number; + 'renderFooter': (item: any, index: number) => JSX.Element; + 'renderHeader': (item: any, index: number) => JSX.Element; + 'renderItem': (item: any, index: number) => JSX.Element; } } + + + interface HTMLIonActionSheetControllerElement extends StencilComponents.IonActionSheetController, HTMLStencilElement {} + + var HTMLIonActionSheetControllerElement: { + prototype: HTMLIonActionSheetControllerElement; + new (): HTMLIonActionSheetControllerElement; + }; + + + interface HTMLIonActionSheetElement extends StencilComponents.IonActionSheet, HTMLStencilElement {} + + var HTMLIonActionSheetElement: { + prototype: HTMLIonActionSheetElement; + new (): HTMLIonActionSheetElement; + }; + + + interface HTMLIonAlertControllerElement extends StencilComponents.IonAlertController, HTMLStencilElement {} + + var HTMLIonAlertControllerElement: { + prototype: HTMLIonAlertControllerElement; + new (): HTMLIonAlertControllerElement; + }; + + + interface HTMLIonAlertElement extends StencilComponents.IonAlert, HTMLStencilElement {} + + var HTMLIonAlertElement: { + prototype: HTMLIonAlertElement; + new (): HTMLIonAlertElement; + }; + + + interface HTMLIonAnchorElement extends StencilComponents.IonAnchor, HTMLStencilElement {} + + var HTMLIonAnchorElement: { + prototype: HTMLIonAnchorElement; + new (): HTMLIonAnchorElement; + }; + + + interface HTMLIonAnimationControllerElement extends StencilComponents.IonAnimationController, HTMLStencilElement {} + + var HTMLIonAnimationControllerElement: { + prototype: HTMLIonAnimationControllerElement; + new (): HTMLIonAnimationControllerElement; + }; + + + interface HTMLIonAppElement extends StencilComponents.IonApp, HTMLStencilElement {} + + var HTMLIonAppElement: { + prototype: HTMLIonAppElement; + new (): HTMLIonAppElement; + }; + + + interface HTMLIonAvatarElement extends StencilComponents.IonAvatar, HTMLStencilElement {} + + var HTMLIonAvatarElement: { + prototype: HTMLIonAvatarElement; + new (): HTMLIonAvatarElement; + }; + + + interface HTMLIonBackButtonElement extends StencilComponents.IonBackButton, HTMLStencilElement {} + + var HTMLIonBackButtonElement: { + prototype: HTMLIonBackButtonElement; + new (): HTMLIonBackButtonElement; + }; + + + interface HTMLIonBackdropElement extends StencilComponents.IonBackdrop, HTMLStencilElement {} + + var HTMLIonBackdropElement: { + prototype: HTMLIonBackdropElement; + new (): HTMLIonBackdropElement; + }; + + + interface HTMLIonBadgeElement extends StencilComponents.IonBadge, HTMLStencilElement {} + + var HTMLIonBadgeElement: { + prototype: HTMLIonBadgeElement; + new (): HTMLIonBadgeElement; + }; + + + interface HTMLIonButtonElement extends StencilComponents.IonButton, HTMLStencilElement {} + + var HTMLIonButtonElement: { + prototype: HTMLIonButtonElement; + new (): HTMLIonButtonElement; + }; + + + interface HTMLIonButtonsElement extends StencilComponents.IonButtons, HTMLStencilElement {} + + var HTMLIonButtonsElement: { + prototype: HTMLIonButtonsElement; + new (): HTMLIonButtonsElement; + }; + + + interface HTMLIonCardContentElement extends StencilComponents.IonCardContent, HTMLStencilElement {} + + var HTMLIonCardContentElement: { + prototype: HTMLIonCardContentElement; + new (): HTMLIonCardContentElement; + }; + + + interface HTMLIonCardHeaderElement extends StencilComponents.IonCardHeader, HTMLStencilElement {} + + var HTMLIonCardHeaderElement: { + prototype: HTMLIonCardHeaderElement; + new (): HTMLIonCardHeaderElement; + }; + + + interface HTMLIonCardSubtitleElement extends StencilComponents.IonCardSubtitle, HTMLStencilElement {} + + var HTMLIonCardSubtitleElement: { + prototype: HTMLIonCardSubtitleElement; + new (): HTMLIonCardSubtitleElement; + }; + + + interface HTMLIonCardTitleElement extends StencilComponents.IonCardTitle, HTMLStencilElement {} + + var HTMLIonCardTitleElement: { + prototype: HTMLIonCardTitleElement; + new (): HTMLIonCardTitleElement; + }; + + + interface HTMLIonCardElement extends StencilComponents.IonCard, HTMLStencilElement {} + + var HTMLIonCardElement: { + prototype: HTMLIonCardElement; + new (): HTMLIonCardElement; + }; + + + interface HTMLIonCheckboxElement extends StencilComponents.IonCheckbox, HTMLStencilElement {} + + var HTMLIonCheckboxElement: { + prototype: HTMLIonCheckboxElement; + new (): HTMLIonCheckboxElement; + }; + + + interface HTMLIonChipButtonElement extends StencilComponents.IonChipButton, HTMLStencilElement {} + + var HTMLIonChipButtonElement: { + prototype: HTMLIonChipButtonElement; + new (): HTMLIonChipButtonElement; + }; + + + interface HTMLIonChipIconElement extends StencilComponents.IonChipIcon, HTMLStencilElement {} + + var HTMLIonChipIconElement: { + prototype: HTMLIonChipIconElement; + new (): HTMLIonChipIconElement; + }; + + + interface HTMLIonChipElement extends StencilComponents.IonChip, HTMLStencilElement {} + + var HTMLIonChipElement: { + prototype: HTMLIonChipElement; + new (): HTMLIonChipElement; + }; + + + interface HTMLIonColElement extends StencilComponents.IonCol, HTMLStencilElement {} + + var HTMLIonColElement: { + prototype: HTMLIonColElement; + new (): HTMLIonColElement; + }; + + + interface HTMLIonContentElement extends StencilComponents.IonContent, HTMLStencilElement {} + + var HTMLIonContentElement: { + prototype: HTMLIonContentElement; + new (): HTMLIonContentElement; + }; + + + interface HTMLIonDatetimeElement extends StencilComponents.IonDatetime, HTMLStencilElement {} + + var HTMLIonDatetimeElement: { + prototype: HTMLIonDatetimeElement; + new (): HTMLIonDatetimeElement; + }; + + + interface HTMLIonFabButtonElement extends StencilComponents.IonFabButton, HTMLStencilElement {} + + var HTMLIonFabButtonElement: { + prototype: HTMLIonFabButtonElement; + new (): HTMLIonFabButtonElement; + }; + + + interface HTMLIonFabListElement extends StencilComponents.IonFabList, HTMLStencilElement {} + + var HTMLIonFabListElement: { + prototype: HTMLIonFabListElement; + new (): HTMLIonFabListElement; + }; + + + interface HTMLIonFabElement extends StencilComponents.IonFab, HTMLStencilElement {} + + var HTMLIonFabElement: { + prototype: HTMLIonFabElement; + new (): HTMLIonFabElement; + }; + + + interface HTMLIonFooterElement extends StencilComponents.IonFooter, HTMLStencilElement {} + + var HTMLIonFooterElement: { + prototype: HTMLIonFooterElement; + new (): HTMLIonFooterElement; + }; + + + interface HTMLIonGridElement extends StencilComponents.IonGrid, HTMLStencilElement {} + + var HTMLIonGridElement: { + prototype: HTMLIonGridElement; + new (): HTMLIonGridElement; + }; + + + interface HTMLIonHeaderElement extends StencilComponents.IonHeader, HTMLStencilElement {} + + var HTMLIonHeaderElement: { + prototype: HTMLIonHeaderElement; + new (): HTMLIonHeaderElement; + }; + + + interface HTMLIonHideWhenElement extends StencilComponents.IonHideWhen, HTMLStencilElement {} + + var HTMLIonHideWhenElement: { + prototype: HTMLIonHideWhenElement; + new (): HTMLIonHideWhenElement; + }; + + + interface HTMLIonImgElement extends StencilComponents.IonImg, HTMLStencilElement {} + + var HTMLIonImgElement: { + prototype: HTMLIonImgElement; + new (): HTMLIonImgElement; + }; + + + interface HTMLIonInfiniteScrollContentElement extends StencilComponents.IonInfiniteScrollContent, HTMLStencilElement {} + + var HTMLIonInfiniteScrollContentElement: { + prototype: HTMLIonInfiniteScrollContentElement; + new (): HTMLIonInfiniteScrollContentElement; + }; + + + interface HTMLIonInfiniteScrollElement extends StencilComponents.IonInfiniteScroll, HTMLStencilElement {} + + var HTMLIonInfiniteScrollElement: { + prototype: HTMLIonInfiniteScrollElement; + new (): HTMLIonInfiniteScrollElement; + }; + + + interface HTMLIonInputElement extends StencilComponents.IonInput, HTMLStencilElement {} + + var HTMLIonInputElement: { + prototype: HTMLIonInputElement; + new (): HTMLIonInputElement; + }; + + + interface HTMLIonItemDividerElement extends StencilComponents.IonItemDivider, HTMLStencilElement {} + + var HTMLIonItemDividerElement: { + prototype: HTMLIonItemDividerElement; + new (): HTMLIonItemDividerElement; + }; + + + interface HTMLIonItemGroupElement extends StencilComponents.IonItemGroup, HTMLStencilElement {} + + var HTMLIonItemGroupElement: { + prototype: HTMLIonItemGroupElement; + new (): HTMLIonItemGroupElement; + }; + + + interface HTMLIonItemOptionElement extends StencilComponents.IonItemOption, HTMLStencilElement {} + + var HTMLIonItemOptionElement: { + prototype: HTMLIonItemOptionElement; + new (): HTMLIonItemOptionElement; + }; + + + interface HTMLIonItemOptionsElement extends StencilComponents.IonItemOptions, HTMLStencilElement {} + + var HTMLIonItemOptionsElement: { + prototype: HTMLIonItemOptionsElement; + new (): HTMLIonItemOptionsElement; + }; + + + interface HTMLIonItemSlidingElement extends StencilComponents.IonItemSliding, HTMLStencilElement {} + + var HTMLIonItemSlidingElement: { + prototype: HTMLIonItemSlidingElement; + new (): HTMLIonItemSlidingElement; + }; + + + interface HTMLIonItemElement extends StencilComponents.IonItem, HTMLStencilElement {} + + var HTMLIonItemElement: { + prototype: HTMLIonItemElement; + new (): HTMLIonItemElement; + }; + + + interface HTMLIonLabelElement extends StencilComponents.IonLabel, HTMLStencilElement {} + + var HTMLIonLabelElement: { + prototype: HTMLIonLabelElement; + new (): HTMLIonLabelElement; + }; + + + interface HTMLIonListHeaderElement extends StencilComponents.IonListHeader, HTMLStencilElement {} + + var HTMLIonListHeaderElement: { + prototype: HTMLIonListHeaderElement; + new (): HTMLIonListHeaderElement; + }; + + + interface HTMLIonListElement extends StencilComponents.IonList, HTMLStencilElement {} + + var HTMLIonListElement: { + prototype: HTMLIonListElement; + new (): HTMLIonListElement; + }; + + + interface HTMLIonLoadingControllerElement extends StencilComponents.IonLoadingController, HTMLStencilElement {} + + var HTMLIonLoadingControllerElement: { + prototype: HTMLIonLoadingControllerElement; + new (): HTMLIonLoadingControllerElement; + }; + + + interface HTMLIonLoadingElement extends StencilComponents.IonLoading, HTMLStencilElement {} + + var HTMLIonLoadingElement: { + prototype: HTMLIonLoadingElement; + new (): HTMLIonLoadingElement; + }; + + + interface HTMLIonMenuButtonElement extends StencilComponents.IonMenuButton, HTMLStencilElement {} + + var HTMLIonMenuButtonElement: { + prototype: HTMLIonMenuButtonElement; + new (): HTMLIonMenuButtonElement; + }; + + + interface HTMLIonMenuControllerElement extends StencilComponents.IonMenuController, HTMLStencilElement {} + + var HTMLIonMenuControllerElement: { + prototype: HTMLIonMenuControllerElement; + new (): HTMLIonMenuControllerElement; + }; + + + interface HTMLIonMenuToggleElement extends StencilComponents.IonMenuToggle, HTMLStencilElement {} + + var HTMLIonMenuToggleElement: { + prototype: HTMLIonMenuToggleElement; + new (): HTMLIonMenuToggleElement; + }; + + + interface HTMLIonMenuElement extends StencilComponents.IonMenu, HTMLStencilElement {} + + var HTMLIonMenuElement: { + prototype: HTMLIonMenuElement; + new (): HTMLIonMenuElement; + }; + + + interface HTMLIonModalControllerElement extends StencilComponents.IonModalController, HTMLStencilElement {} + + var HTMLIonModalControllerElement: { + prototype: HTMLIonModalControllerElement; + new (): HTMLIonModalControllerElement; + }; + + + interface HTMLIonModalElement extends StencilComponents.IonModal, HTMLStencilElement {} + + var HTMLIonModalElement: { + prototype: HTMLIonModalElement; + new (): HTMLIonModalElement; + }; + + + interface HTMLIonNavPopElement extends StencilComponents.IonNavPop, HTMLStencilElement {} + + var HTMLIonNavPopElement: { + prototype: HTMLIonNavPopElement; + new (): HTMLIonNavPopElement; + }; + + + interface HTMLIonNavPushElement extends StencilComponents.IonNavPush, HTMLStencilElement {} + + var HTMLIonNavPushElement: { + prototype: HTMLIonNavPushElement; + new (): HTMLIonNavPushElement; + }; + + + interface HTMLIonNavSetRootElement extends StencilComponents.IonNavSetRoot, HTMLStencilElement {} + + var HTMLIonNavSetRootElement: { + prototype: HTMLIonNavSetRootElement; + new (): HTMLIonNavSetRootElement; + }; + + + interface HTMLIonNavElement extends StencilComponents.IonNav, HTMLStencilElement {} + + var HTMLIonNavElement: { + prototype: HTMLIonNavElement; + new (): HTMLIonNavElement; + }; + + + interface HTMLIonNoteElement extends StencilComponents.IonNote, HTMLStencilElement {} + + var HTMLIonNoteElement: { + prototype: HTMLIonNoteElement; + new (): HTMLIonNoteElement; + }; + + + interface HTMLIonPickerColumnElement extends StencilComponents.IonPickerColumn, HTMLStencilElement {} + + var HTMLIonPickerColumnElement: { + prototype: HTMLIonPickerColumnElement; + new (): HTMLIonPickerColumnElement; + }; + + + interface HTMLIonPickerControllerElement extends StencilComponents.IonPickerController, HTMLStencilElement {} + + var HTMLIonPickerControllerElement: { + prototype: HTMLIonPickerControllerElement; + new (): HTMLIonPickerControllerElement; + }; + + + interface HTMLIonPickerElement extends StencilComponents.IonPicker, HTMLStencilElement {} + + var HTMLIonPickerElement: { + prototype: HTMLIonPickerElement; + new (): HTMLIonPickerElement; + }; + + + interface HTMLIonPopoverControllerElement extends StencilComponents.IonPopoverController, HTMLStencilElement {} + + var HTMLIonPopoverControllerElement: { + prototype: HTMLIonPopoverControllerElement; + new (): HTMLIonPopoverControllerElement; + }; + + + interface HTMLIonPopoverElement extends StencilComponents.IonPopover, HTMLStencilElement {} + + var HTMLIonPopoverElement: { + prototype: HTMLIonPopoverElement; + new (): HTMLIonPopoverElement; + }; + + + interface HTMLIonRadioGroupElement extends StencilComponents.IonRadioGroup, HTMLStencilElement {} + + var HTMLIonRadioGroupElement: { + prototype: HTMLIonRadioGroupElement; + new (): HTMLIonRadioGroupElement; + }; + + + interface HTMLIonRadioElement extends StencilComponents.IonRadio, HTMLStencilElement {} + + var HTMLIonRadioElement: { + prototype: HTMLIonRadioElement; + new (): HTMLIonRadioElement; + }; + + + interface HTMLIonRangeKnobElement extends StencilComponents.IonRangeKnob, HTMLStencilElement {} + + var HTMLIonRangeKnobElement: { + prototype: HTMLIonRangeKnobElement; + new (): HTMLIonRangeKnobElement; + }; + + + interface HTMLIonRangeElement extends StencilComponents.IonRange, HTMLStencilElement {} + + var HTMLIonRangeElement: { + prototype: HTMLIonRangeElement; + new (): HTMLIonRangeElement; + }; + + + interface HTMLIonRefresherContentElement extends StencilComponents.IonRefresherContent, HTMLStencilElement {} + + var HTMLIonRefresherContentElement: { + prototype: HTMLIonRefresherContentElement; + new (): HTMLIonRefresherContentElement; + }; + + + interface HTMLIonRefresherElement extends StencilComponents.IonRefresher, HTMLStencilElement {} + + var HTMLIonRefresherElement: { + prototype: HTMLIonRefresherElement; + new (): HTMLIonRefresherElement; + }; + + + interface HTMLIonReorderGroupElement extends StencilComponents.IonReorderGroup, HTMLStencilElement {} + + var HTMLIonReorderGroupElement: { + prototype: HTMLIonReorderGroupElement; + new (): HTMLIonReorderGroupElement; + }; + + + interface HTMLIonReorderElement extends StencilComponents.IonReorder, HTMLStencilElement {} + + var HTMLIonReorderElement: { + prototype: HTMLIonReorderElement; + new (): HTMLIonReorderElement; + }; + + + interface HTMLIonRippleEffectElement extends StencilComponents.IonRippleEffect, HTMLStencilElement {} + + var HTMLIonRippleEffectElement: { + prototype: HTMLIonRippleEffectElement; + new (): HTMLIonRippleEffectElement; + }; + + + interface HTMLIonRouteRedirectElement extends StencilComponents.IonRouteRedirect, HTMLStencilElement {} + + var HTMLIonRouteRedirectElement: { + prototype: HTMLIonRouteRedirectElement; + new (): HTMLIonRouteRedirectElement; + }; + + + interface HTMLIonRouteElement extends StencilComponents.IonRoute, HTMLStencilElement {} + + var HTMLIonRouteElement: { + prototype: HTMLIonRouteElement; + new (): HTMLIonRouteElement; + }; + + + interface HTMLIonRouterOutletElement extends StencilComponents.IonRouterOutlet, HTMLStencilElement {} + + var HTMLIonRouterOutletElement: { + prototype: HTMLIonRouterOutletElement; + new (): HTMLIonRouterOutletElement; + }; + + + interface HTMLIonRouterElement extends StencilComponents.IonRouter, HTMLStencilElement {} + + var HTMLIonRouterElement: { + prototype: HTMLIonRouterElement; + new (): HTMLIonRouterElement; + }; + + + interface HTMLIonRowElement extends StencilComponents.IonRow, HTMLStencilElement {} + + var HTMLIonRowElement: { + prototype: HTMLIonRowElement; + new (): HTMLIonRowElement; + }; + + + interface HTMLIonScrollElement extends StencilComponents.IonScroll, HTMLStencilElement {} + + var HTMLIonScrollElement: { + prototype: HTMLIonScrollElement; + new (): HTMLIonScrollElement; + }; + + + interface HTMLIonSearchbarElement extends StencilComponents.IonSearchbar, HTMLStencilElement {} + + var HTMLIonSearchbarElement: { + prototype: HTMLIonSearchbarElement; + new (): HTMLIonSearchbarElement; + }; + + + interface HTMLIonSegmentButtonElement extends StencilComponents.IonSegmentButton, HTMLStencilElement {} + + var HTMLIonSegmentButtonElement: { + prototype: HTMLIonSegmentButtonElement; + new (): HTMLIonSegmentButtonElement; + }; + + + interface HTMLIonSegmentElement extends StencilComponents.IonSegment, HTMLStencilElement {} + + var HTMLIonSegmentElement: { + prototype: HTMLIonSegmentElement; + new (): HTMLIonSegmentElement; + }; + + + interface HTMLIonSelectOptionElement extends StencilComponents.IonSelectOption, HTMLStencilElement {} + + var HTMLIonSelectOptionElement: { + prototype: HTMLIonSelectOptionElement; + new (): HTMLIonSelectOptionElement; + }; + + + interface HTMLIonSelectPopoverElement extends StencilComponents.IonSelectPopover, HTMLStencilElement {} + + var HTMLIonSelectPopoverElement: { + prototype: HTMLIonSelectPopoverElement; + new (): HTMLIonSelectPopoverElement; + }; + + + interface HTMLIonSelectElement extends StencilComponents.IonSelect, HTMLStencilElement {} + + var HTMLIonSelectElement: { + prototype: HTMLIonSelectElement; + new (): HTMLIonSelectElement; + }; + + + interface HTMLIonShowWhenElement extends StencilComponents.IonShowWhen, HTMLStencilElement {} + + var HTMLIonShowWhenElement: { + prototype: HTMLIonShowWhenElement; + new (): HTMLIonShowWhenElement; + }; + + + interface HTMLIonSkeletonTextElement extends StencilComponents.IonSkeletonText, HTMLStencilElement {} + + var HTMLIonSkeletonTextElement: { + prototype: HTMLIonSkeletonTextElement; + new (): HTMLIonSkeletonTextElement; + }; + + + interface HTMLIonSlideElement extends StencilComponents.IonSlide, HTMLStencilElement {} + + var HTMLIonSlideElement: { + prototype: HTMLIonSlideElement; + new (): HTMLIonSlideElement; + }; + + + interface HTMLIonSlidesElement extends StencilComponents.IonSlides, HTMLStencilElement {} + + var HTMLIonSlidesElement: { + prototype: HTMLIonSlidesElement; + new (): HTMLIonSlidesElement; + }; + + + interface HTMLIonSpinnerElement extends StencilComponents.IonSpinner, HTMLStencilElement {} + + var HTMLIonSpinnerElement: { + prototype: HTMLIonSpinnerElement; + new (): HTMLIonSpinnerElement; + }; + + + interface HTMLIonSplitPaneElement extends StencilComponents.IonSplitPane, HTMLStencilElement {} + + var HTMLIonSplitPaneElement: { + prototype: HTMLIonSplitPaneElement; + new (): HTMLIonSplitPaneElement; + }; + + + interface HTMLIonTabButtonElement extends StencilComponents.IonTabButton, HTMLStencilElement {} + + var HTMLIonTabButtonElement: { + prototype: HTMLIonTabButtonElement; + new (): HTMLIonTabButtonElement; + }; + + + interface HTMLIonTabElement extends StencilComponents.IonTab, HTMLStencilElement {} + + var HTMLIonTabElement: { + prototype: HTMLIonTabElement; + new (): HTMLIonTabElement; + }; + + + interface HTMLIonTabbarElement extends StencilComponents.IonTabbar, HTMLStencilElement {} + + var HTMLIonTabbarElement: { + prototype: HTMLIonTabbarElement; + new (): HTMLIonTabbarElement; + }; + + + interface HTMLIonTabsElement extends StencilComponents.IonTabs, HTMLStencilElement {} + + var HTMLIonTabsElement: { + prototype: HTMLIonTabsElement; + new (): HTMLIonTabsElement; + }; + + + interface HTMLIonTextElement extends StencilComponents.IonText, HTMLStencilElement {} + + var HTMLIonTextElement: { + prototype: HTMLIonTextElement; + new (): HTMLIonTextElement; + }; + + + interface HTMLIonTextareaElement extends StencilComponents.IonTextarea, HTMLStencilElement {} + + var HTMLIonTextareaElement: { + prototype: HTMLIonTextareaElement; + new (): HTMLIonTextareaElement; + }; + + + interface HTMLIonThumbnailElement extends StencilComponents.IonThumbnail, HTMLStencilElement {} + + var HTMLIonThumbnailElement: { + prototype: HTMLIonThumbnailElement; + new (): HTMLIonThumbnailElement; + }; + + + interface HTMLIonTitleElement extends StencilComponents.IonTitle, HTMLStencilElement {} + + var HTMLIonTitleElement: { + prototype: HTMLIonTitleElement; + new (): HTMLIonTitleElement; + }; + + + interface HTMLIonToastControllerElement extends StencilComponents.IonToastController, HTMLStencilElement {} + + var HTMLIonToastControllerElement: { + prototype: HTMLIonToastControllerElement; + new (): HTMLIonToastControllerElement; + }; + + + interface HTMLIonToastElement extends StencilComponents.IonToast, HTMLStencilElement {} + + var HTMLIonToastElement: { + prototype: HTMLIonToastElement; + new (): HTMLIonToastElement; + }; + + + interface HTMLIonToggleElement extends StencilComponents.IonToggle, HTMLStencilElement {} + + var HTMLIonToggleElement: { + prototype: HTMLIonToggleElement; + new (): HTMLIonToggleElement; + }; + + + interface HTMLIonToolbarElement extends StencilComponents.IonToolbar, HTMLStencilElement {} + + var HTMLIonToolbarElement: { + prototype: HTMLIonToolbarElement; + new (): HTMLIonToolbarElement; + }; + + + interface HTMLIonVirtualScrollElement extends StencilComponents.IonVirtualScroll, HTMLStencilElement {} + + var HTMLIonVirtualScrollElement: { + prototype: HTMLIonVirtualScrollElement; + new (): HTMLIonVirtualScrollElement; + }; + + + namespace JSX { + interface Element {} + export interface IntrinsicElements { + 'ion-action-sheet-controller': JSXElements.IonActionSheetControllerAttributes; + 'ion-action-sheet': JSXElements.IonActionSheetAttributes; + 'ion-alert-controller': JSXElements.IonAlertControllerAttributes; + 'ion-alert': JSXElements.IonAlertAttributes; + 'ion-anchor': JSXElements.IonAnchorAttributes; + 'ion-animation-controller': JSXElements.IonAnimationControllerAttributes; + 'ion-app': JSXElements.IonAppAttributes; + 'ion-avatar': JSXElements.IonAvatarAttributes; + 'ion-back-button': JSXElements.IonBackButtonAttributes; + 'ion-backdrop': JSXElements.IonBackdropAttributes; + 'ion-badge': JSXElements.IonBadgeAttributes; + 'ion-button': JSXElements.IonButtonAttributes; + 'ion-buttons': JSXElements.IonButtonsAttributes; + 'ion-card-content': JSXElements.IonCardContentAttributes; + 'ion-card-header': JSXElements.IonCardHeaderAttributes; + 'ion-card-subtitle': JSXElements.IonCardSubtitleAttributes; + 'ion-card-title': JSXElements.IonCardTitleAttributes; + 'ion-card': JSXElements.IonCardAttributes; + 'ion-checkbox': JSXElements.IonCheckboxAttributes; + 'ion-chip-button': JSXElements.IonChipButtonAttributes; + 'ion-chip-icon': JSXElements.IonChipIconAttributes; + 'ion-chip': JSXElements.IonChipAttributes; + 'ion-col': JSXElements.IonColAttributes; + 'ion-content': JSXElements.IonContentAttributes; + 'ion-datetime': JSXElements.IonDatetimeAttributes; + 'ion-fab-button': JSXElements.IonFabButtonAttributes; + 'ion-fab-list': JSXElements.IonFabListAttributes; + 'ion-fab': JSXElements.IonFabAttributes; + 'ion-footer': JSXElements.IonFooterAttributes; + 'ion-grid': JSXElements.IonGridAttributes; + 'ion-header': JSXElements.IonHeaderAttributes; + 'ion-hide-when': JSXElements.IonHideWhenAttributes; + 'ion-img': JSXElements.IonImgAttributes; + 'ion-infinite-scroll-content': JSXElements.IonInfiniteScrollContentAttributes; + 'ion-infinite-scroll': JSXElements.IonInfiniteScrollAttributes; + 'ion-input': JSXElements.IonInputAttributes; + 'ion-item-divider': JSXElements.IonItemDividerAttributes; + 'ion-item-group': JSXElements.IonItemGroupAttributes; + 'ion-item-option': JSXElements.IonItemOptionAttributes; + 'ion-item-options': JSXElements.IonItemOptionsAttributes; + 'ion-item-sliding': JSXElements.IonItemSlidingAttributes; + 'ion-item': JSXElements.IonItemAttributes; + 'ion-label': JSXElements.IonLabelAttributes; + 'ion-list-header': JSXElements.IonListHeaderAttributes; + 'ion-list': JSXElements.IonListAttributes; + 'ion-loading-controller': JSXElements.IonLoadingControllerAttributes; + 'ion-loading': JSXElements.IonLoadingAttributes; + 'ion-menu-button': JSXElements.IonMenuButtonAttributes; + 'ion-menu-controller': JSXElements.IonMenuControllerAttributes; + 'ion-menu-toggle': JSXElements.IonMenuToggleAttributes; + 'ion-menu': JSXElements.IonMenuAttributes; + 'ion-modal-controller': JSXElements.IonModalControllerAttributes; + 'ion-modal': JSXElements.IonModalAttributes; + 'ion-nav-pop': JSXElements.IonNavPopAttributes; + 'ion-nav-push': JSXElements.IonNavPushAttributes; + 'ion-nav-set-root': JSXElements.IonNavSetRootAttributes; + 'ion-nav': JSXElements.IonNavAttributes; + 'ion-note': JSXElements.IonNoteAttributes; + 'ion-picker-column': JSXElements.IonPickerColumnAttributes; + 'ion-picker-controller': JSXElements.IonPickerControllerAttributes; + 'ion-picker': JSXElements.IonPickerAttributes; + 'ion-popover-controller': JSXElements.IonPopoverControllerAttributes; + 'ion-popover': JSXElements.IonPopoverAttributes; + 'ion-radio-group': JSXElements.IonRadioGroupAttributes; + 'ion-radio': JSXElements.IonRadioAttributes; + 'ion-range-knob': JSXElements.IonRangeKnobAttributes; + 'ion-range': JSXElements.IonRangeAttributes; + 'ion-refresher-content': JSXElements.IonRefresherContentAttributes; + 'ion-refresher': JSXElements.IonRefresherAttributes; + 'ion-reorder-group': JSXElements.IonReorderGroupAttributes; + 'ion-reorder': JSXElements.IonReorderAttributes; + 'ion-ripple-effect': JSXElements.IonRippleEffectAttributes; + 'ion-route-redirect': JSXElements.IonRouteRedirectAttributes; + 'ion-route': JSXElements.IonRouteAttributes; + 'ion-router-outlet': JSXElements.IonRouterOutletAttributes; + 'ion-router': JSXElements.IonRouterAttributes; + 'ion-row': JSXElements.IonRowAttributes; + 'ion-scroll': JSXElements.IonScrollAttributes; + 'ion-searchbar': JSXElements.IonSearchbarAttributes; + 'ion-segment-button': JSXElements.IonSegmentButtonAttributes; + 'ion-segment': JSXElements.IonSegmentAttributes; + 'ion-select-option': JSXElements.IonSelectOptionAttributes; + 'ion-select-popover': JSXElements.IonSelectPopoverAttributes; + 'ion-select': JSXElements.IonSelectAttributes; + 'ion-show-when': JSXElements.IonShowWhenAttributes; + 'ion-skeleton-text': JSXElements.IonSkeletonTextAttributes; + 'ion-slide': JSXElements.IonSlideAttributes; + 'ion-slides': JSXElements.IonSlidesAttributes; + 'ion-spinner': JSXElements.IonSpinnerAttributes; + 'ion-split-pane': JSXElements.IonSplitPaneAttributes; + 'ion-tab-button': JSXElements.IonTabButtonAttributes; + 'ion-tab': JSXElements.IonTabAttributes; + 'ion-tabbar': JSXElements.IonTabbarAttributes; + 'ion-tabs': JSXElements.IonTabsAttributes; + 'ion-text': JSXElements.IonTextAttributes; + 'ion-textarea': JSXElements.IonTextareaAttributes; + 'ion-thumbnail': JSXElements.IonThumbnailAttributes; + 'ion-title': JSXElements.IonTitleAttributes; + 'ion-toast-controller': JSXElements.IonToastControllerAttributes; + 'ion-toast': JSXElements.IonToastAttributes; + 'ion-toggle': JSXElements.IonToggleAttributes; + 'ion-toolbar': JSXElements.IonToolbarAttributes; + 'ion-virtual-scroll': JSXElements.IonVirtualScrollAttributes; + } + } + namespace JSXElements { + + export interface IonActionSheetControllerAttributes extends HTMLAttributes { + + } + + export interface IonActionSheetAttributes extends HTMLAttributes { + /** + * An array of buttons for the action sheet. + */ + 'buttons'?: ActionSheetButton[]; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass'?: string | string[]; + /** + * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'enableBackdropDismiss'?: boolean; + /** + * Animation to use when the action sheet is presented. + */ + 'enterAnimation'?: AnimationBuilder; + /** + * Title for the action sheet. + */ + 'header'?: string; + /** + * If the actionSheet should close the keyboard + */ + 'keyboardClose'?: boolean; + /** + * Animation to use when the action sheet is dismissed. + */ + 'leaveAnimation'?: AnimationBuilder; + /** + * Emitted after the alert has dismissed. + */ + 'onIonActionSheetDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the alert has loaded. + */ + 'onIonActionSheetDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the alert has presented. + */ + 'onIonActionSheetDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the alert has unloaded. + */ + 'onIonActionSheetDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the alert has dismissed. + */ + 'onIonActionSheetWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the alert has presented. + */ + 'onIonActionSheetWillPresent'?: (event: CustomEvent) => void; + /** + * Unique ID to be used with the overlay. Internal only + */ + 'overlayId'?: number; + /** + * Subtitle for the action sheet. + */ + 'subHeader'?: string; + /** + * If true, the action sheet will be translucent. Defaults to `false`. + */ + 'translucent'?: boolean; + /** + * If true, the action sheet will animate. Defaults to `true`. + */ + 'willAnimate'?: boolean; + } + + export interface IonAlertControllerAttributes extends HTMLAttributes { + + } + + export interface IonAlertAttributes extends HTMLAttributes { + /** + * Array of buttons to be added to the alert. + */ + 'buttons'?: (AlertButton | string)[]; + /** + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + */ + 'cssClass'?: string | string[]; + /** + * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'enableBackdropDismiss'?: boolean; + /** + * Animation to use when the alert is presented. + */ + 'enterAnimation'?: AnimationBuilder; + /** + * The main title in the heading of the alert. + */ + 'header'?: string; + /** + * Array of input to show in the alert. + */ + 'inputs'?: AlertInput[]; + 'keyboardClose'?: boolean; + /** + * Animation to use when the alert is dismissed. + */ + 'leaveAnimation'?: AnimationBuilder; + /** + * The main message to be displayed in the alert. + */ + 'message'?: string; + 'mode'?: Mode; + /** + * Emitted after the alert has dismissed. + */ + 'onIonAlertDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the alert has presented. + */ + 'onIonAlertDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the alert has presented. + */ + 'onIonAlertDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted before the alert has presented. + */ + 'onIonAlertDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the alert has dismissed. + */ + 'onIonAlertWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the alert has presented. + */ + 'onIonAlertWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * The subtitle in the heading of the alert. Displayed under the title. + */ + 'subHeader'?: string; + /** + * If true, the alert will be translucent. Defaults to `false`. + */ + 'translucent'?: boolean; + /** + * If true, the alert will animate. Defaults to `true`. + */ + 'willAnimate'?: boolean; + } + + export interface IonAnchorAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + 'routerDirection'?: RouterDirection; + } + + export interface IonAnimationControllerAttributes extends HTMLAttributes { + + } + + export interface IonAppAttributes extends HTMLAttributes { + + } + + export interface IonAvatarAttributes extends HTMLAttributes { + + } + + export interface IonBackButtonAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The url to navigate back to by default when there is no history. + */ + 'defaultHref'?: string; + /** + * The icon name to use for the back button. + */ + 'icon'?: string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * The text to display in the back button. + */ + 'text'?: string; + } + + export interface IonBackdropAttributes extends HTMLAttributes { + /** + * Emitted when the backdrop is tapped. + */ + 'onIonBackdropTap'?: (event: CustomEvent) => void; + /** + * If true, the backdrop will stop propagation on tap. Defaults to `true`. + */ + 'stopPropagation'?: boolean; + /** + * If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + */ + 'tappable'?: boolean; + /** + * If true, the backdrop will be visible. Defaults to `true`. + */ + 'visible'?: boolean; + } + + export interface IonBadgeAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonButtonAttributes extends HTMLAttributes { + /** + * The type of button. Possible values are: `"button"`, `"bar-button"`. + */ + 'buttonType'?: string; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * If true, the user cannot interact with the button. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. + */ + 'expand'?: 'full' | 'block'; + /** + * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. + */ + 'fill'?: 'clear' | 'outline' | 'solid' | 'default'; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * Emitted when the button loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the button has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + 'routerDirection'?: RouterDirection; + /** + * The button shape. Possible values are: `"round"`. + */ + 'shape'?: 'round'; + /** + * The button size. Possible values are: `"small"`, `"default"`, `"large"`. + */ + 'size'?: 'small' | 'default' | 'large'; + /** + * If true, activates a button with a heavier font weight. + */ + 'strong'?: boolean; + /** + * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + */ + 'type'?: 'submit' | 'reset' | 'button'; + } + + export interface IonButtonsAttributes extends HTMLAttributes { + + } + + export interface IonCardContentAttributes extends HTMLAttributes { + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonCardHeaderAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * If true, the card header will be translucent. Defaults to `false`. + */ + 'translucent'?: boolean; + } + + export interface IonCardSubtitleAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonCardTitleAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonCardAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonCheckboxAttributes extends HTMLAttributes { + /** + * If true, the checkbox is selected. Defaults to `false`. + */ + 'checked'?: boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * If true, the user cannot interact with the checkbox. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * The name of the control, which is submitted with the form data. + */ + 'name'?: string; + /** + * Emitted when the toggle loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the checked property has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the toggle has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * The value of the checkbox. + */ + 'value'?: string; + } + + export interface IonChipButtonAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * If true, the user cannot interact with the chip button. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Set to `"clear"` for a transparent button style. + */ + 'fill'?: string; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonChipIconAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * The icon to use. Possible values are the same as `"ion-icon"`. + */ + 'name'?: string; + } + + export interface IonChipAttributes extends HTMLAttributes { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + export interface IonColAttributes extends HTMLAttributes { + /** + * The amount to offset the column, in terms of how many columns it should shift to the right of the total available. + */ + 'offset'?: string; + /** + * The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. + */ + 'offsetLg'?: string; + /** + * The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. + */ + 'offsetMd'?: string; + /** + * The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. + */ + 'offsetSm'?: string; + /** + * The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. + */ + 'offsetXl'?: string; + /** + * The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. + */ + 'offsetXs'?: string; + /** + * The amount to pull the column, in terms of how many columns it should shift to the left of the total available. + */ + 'pull'?: string; + /** + * The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. + */ + 'pullLg'?: string; + /** + * The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. + */ + 'pullMd'?: string; + /** + * The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. + */ + 'pullSm'?: string; + /** + * The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. + */ + 'pullXl'?: string; + /** + * The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. + */ + 'pullXs'?: string; + /** + * The amount to push the column, in terms of how many columns it should shift to the right of the total available. + */ + 'push'?: string; + /** + * The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. + */ + 'pushLg'?: string; + /** + * The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. + */ + 'pushMd'?: string; + /** + * The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. + */ + 'pushSm'?: string; + /** + * The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. + */ + 'pushXl'?: string; + /** + * The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. + */ + 'pushXs'?: string; + /** + * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'size'?: string; + /** + * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'sizeLg'?: string; + /** + * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'sizeMd'?: string; + /** + * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'sizeSm'?: string; + /** + * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'sizeXl'?: string; + /** + * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. + */ + 'sizeXs'?: string; + } + + export interface IonContentAttributes extends HTMLAttributes { + 'color'?: Color; + /** + * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. + */ + 'forceOverscroll'?: boolean; + /** + * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. + */ + 'fullscreen'?: boolean; + /** + * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`. + */ + 'scrollEnabled'?: boolean; + /** + * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. + */ + 'scrollEvents'?: boolean; + } + + export interface IonDatetimeAttributes extends HTMLAttributes { + /** + * The text to display on the picker's cancel button. Default: `Cancel`. + */ + 'cancelText'?: string; + /** + * Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. + */ + 'dayNames'?: string[] | string; + /** + * Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. + */ + 'dayShortNames'?: string[] | string; + /** + * Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. + */ + 'dayValues'?: number[] | number | string; + /** + * If true, the user cannot interact with the datetime. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. + */ + 'displayFormat'?: string; + /** + * The text to display on the picker's "Done" button. Default: `Done`. + */ + 'doneText'?: string; + /** + * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. + */ + 'hourValues'?: number[] | number | string; + /** + * The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. + */ + 'max'?: string | undefined; + /** + * The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. + */ + 'min'?: string | undefined; + /** + * Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. + */ + 'minuteValues'?: number[] | number | string; + /** + * Full names for each month name. This can be used to provide locale month names. Defaults to English. + */ + 'monthNames'?: string[] | string; + /** + * Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. + */ + 'monthShortNames'?: string[] | string; + /** + * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. + */ + 'monthValues'?: number[] | number | string; + /** + * Emitted when the datetime selection was cancelled. + */ + 'onIonCancel'?: (event: CustomEvent) => void; + /** + * Emitted when the checked property has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. + */ + 'pickerFormat'?: string; + /** + * Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. + */ + 'pickerOptions'?: PickerOptions; + /** + * The text to display when there's no date selected yet. Using lowercase to match the input attribute + */ + 'placeholder'?: string; + /** + * the value of the datetime. + */ + 'value'?: string; + /** + * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. + */ + 'yearValues'?: number[] | number | string; + } + + export interface IonFabButtonAttributes extends HTMLAttributes { + /** + * If true, the fab button will be show a close icon. Defaults to `false`. + */ + 'activated'?: boolean; + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + 'color'?: Color; + /** + * If true, the user cannot interact with the fab button. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * If true, the fab button will show when in a fab-list. + */ + 'show'?: boolean; + /** + * If true, the fab button will be translucent. Defaults to `false`. + */ + 'translucent'?: boolean; + } + + export interface IonFabListAttributes extends HTMLAttributes { + /** + * If true, the fab list will be show all fab buttons in the list. Defaults to `false`. + */ + 'activated'?: boolean; + /** + * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. + */ + 'side'?: 'start' | 'end' | 'top' | 'bottom'; + } + + export interface IonFabAttributes extends HTMLAttributes { + 'activated'?: boolean; + /** + * If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. + */ + 'edge'?: boolean; + /** + * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. + */ + 'horizontal'?: 'start' | 'end' | 'center'; + /** + * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. + */ + 'vertical'?: 'top' | 'bottom' | 'center'; + } + + export interface IonFooterAttributes extends HTMLAttributes { + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + */ + 'translucent'?: boolean; + } + + export interface IonGridAttributes extends HTMLAttributes { + /** + * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. + */ + 'fixed'?: boolean; + } + + export interface IonHeaderAttributes extends HTMLAttributes { + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + */ + 'translucent'?: boolean; + } + + export interface IonHideWhenAttributes extends HTMLAttributes { + /** + * If the current media query matches this value, the element will hide. + */ + 'mediaQuery'?: string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. + */ + 'mode'?: Mode; + /** + * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. + */ + 'or'?: boolean; + /** + * If the current orientation matches this value, the element will hide. + */ + 'orientation'?: string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against. + */ + 'platform'?: string; + /** + * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. + */ + 'size'?: string; + } + + export interface IonImgAttributes extends HTMLAttributes { + /** + * 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. + */ + 'alt'?: string; + /** + * Emitted when the img src is loaded + */ + 'onIonImgDidLoad'?: (event: CustomEvent) => void; + /** + * The image URL. This attribute is mandatory for the element. + */ + 'src'?: string; + } + + export interface IonInfiniteScrollContentAttributes extends HTMLAttributes { + /** + * An animated SVG spinner that shows while loading. + */ + 'loadingSpinner'?: string; + /** + * Optional text to display while loading. + */ + 'loadingText'?: string; + } + + export interface IonInfiniteScrollAttributes extends HTMLAttributes { + /** + * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. + */ + 'disabled'?: boolean; + /** + * Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. + */ + 'onIonInfinite'?: (event: CustomEvent) => void; + /** + * The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. + */ + 'position'?: 'top' | 'bottom'; + /** + * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. + */ + 'threshold'?: string; + } + export interface IonInputAttributes extends HTMLAttributes { /** * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. @@ -2831,43 +4606,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonItemDivider { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonItemDividerElement extends StencilComponents.IonItemDivider, HTMLStencilElement {} - - var HTMLIonItemDividerElement: { - prototype: HTMLIonItemDividerElement; - new (): HTMLIonItemDividerElement; - }; - interface HTMLElementTagNameMap { - 'ion-item-divider': HTMLIonItemDividerElement; - } - interface ElementTagNameMap { - 'ion-item-divider': HTMLIonItemDividerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item-divider': JSXElements.IonItemDividerAttributes; - } - } - namespace JSXElements { export interface IonItemDividerAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -2878,88 +4617,11 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonItemGroup { - - } - } - - interface HTMLIonItemGroupElement extends StencilComponents.IonItemGroup, HTMLStencilElement {} - - var HTMLIonItemGroupElement: { - prototype: HTMLIonItemGroupElement; - new (): HTMLIonItemGroupElement; - }; - interface HTMLElementTagNameMap { - 'ion-item-group': HTMLIonItemGroupElement; - } - interface ElementTagNameMap { - 'ion-item-group': HTMLIonItemGroupElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item-group': JSXElements.IonItemGroupAttributes; - } - } - namespace JSXElements { export interface IonItemGroupAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonItemOption { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * If true, the user cannot interact with the item option. Defaults to `false`. - */ - 'disabled': boolean; - /** - * If true, the option will expand to take up the available width and cover any other options. Defaults to `false`. - */ - 'expandable': boolean; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href': string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonItemOptionElement extends StencilComponents.IonItemOption, HTMLStencilElement {} - - var HTMLIonItemOptionElement: { - prototype: HTMLIonItemOptionElement; - new (): HTMLIonItemOptionElement; - }; - interface HTMLElementTagNameMap { - 'ion-item-option': HTMLIonItemOptionElement; - } - interface ElementTagNameMap { - 'ion-item-option': HTMLIonItemOptionElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item-option': JSXElements.IonItemOptionAttributes; - } - } - namespace JSXElements { export interface IonItemOptionAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -2982,42 +4644,7 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonItemOptions { - 'fireSwipeEvent': () => void; - 'isEndSide': () => boolean; - /** - * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. - */ - 'side': Side; - 'width': () => number; - } - } - - interface HTMLIonItemOptionsElement extends StencilComponents.IonItemOptions, HTMLStencilElement {} - - var HTMLIonItemOptionsElement: { - prototype: HTMLIonItemOptionsElement; - new (): HTMLIonItemOptionsElement; - }; - interface HTMLElementTagNameMap { - 'ion-item-options': HTMLIonItemOptionsElement; - } - interface ElementTagNameMap { - 'ion-item-options': HTMLIonItemOptionsElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item-options': JSXElements.IonItemOptionsAttributes; - } - } - namespace JSXElements { export interface IonItemOptionsAttributes extends HTMLAttributes { /** * Emitted when the item has been fully swiped. @@ -3028,127 +4655,14 @@ declare global { */ 'side'?: Side; } - } -} - -declare global { - - namespace StencilComponents { - interface IonItemSliding { - /** - * Close the sliding item. Items can also be closed from the [List](../../list/List). - */ - 'close': () => void; - /** - * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). - */ - 'closeOpened': () => boolean; - /** - * Get the amount the item is open in pixels. - */ - 'getOpenAmount': () => number; - /** - * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. - */ - 'getSlidingRatio': () => number; - } - } - - interface HTMLIonItemSlidingElement extends StencilComponents.IonItemSliding, HTMLStencilElement {} - - var HTMLIonItemSlidingElement: { - prototype: HTMLIonItemSlidingElement; - new (): HTMLIonItemSlidingElement; - }; - interface HTMLElementTagNameMap { - 'ion-item-sliding': HTMLIonItemSlidingElement; - } - interface ElementTagNameMap { - 'ion-item-sliding': HTMLIonItemSlidingElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item-sliding': JSXElements.IonItemSlidingAttributes; - } - } - namespace JSXElements { export interface IonItemSlidingAttributes extends HTMLAttributes { /** * Emitted when the sliding position changes. */ 'onIonDrag'?: (event: CustomEvent) => void; } - } -} - -declare global { - - namespace StencilComponents { - interface IonItem { - /** - * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. - */ - 'button': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. - */ - 'detail': boolean; - /** - * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. - */ - 'detailIcon': string; - /** - * If true, the user cannot interact with the item. Defaults to `false`. - */ - 'disabled': boolean; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href': string; - /** - * How the bottom border should be displayed on the item. - */ - 'lines': 'full' | 'inset' | 'none'; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * When using a router, it specifies the transition direction when navigating to another page using `href`. - */ - 'routerDirection': RouterDirection; - 'state': 'valid' | 'invalid' | 'focus'; - /** - * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` - */ - 'type': 'submit' | 'reset' | 'button'; - } - } - - interface HTMLIonItemElement extends StencilComponents.IonItem, HTMLStencilElement {} - - var HTMLIonItemElement: { - prototype: HTMLIonItemElement; - new (): HTMLIonItemElement; - }; - interface HTMLElementTagNameMap { - 'ion-item': HTMLIonItemElement; - } - interface ElementTagNameMap { - 'ion-item': HTMLIonItemElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-item': JSXElements.IonItemAttributes; - } - } - namespace JSXElements { export interface IonItemAttributes extends HTMLAttributes { /** * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. @@ -3192,48 +4706,7 @@ declare global { */ 'type'?: 'submit' | 'reset' | 'button'; } - } -} - -declare global { - - namespace StencilComponents { - interface IonLabel { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - 'getText': () => string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' - */ - 'position': 'fixed' | 'stacked' | 'floating'; - } - } - - interface HTMLIonLabelElement extends StencilComponents.IonLabel, HTMLStencilElement {} - - var HTMLIonLabelElement: { - prototype: HTMLIonLabelElement; - new (): HTMLIonLabelElement; - }; - interface HTMLElementTagNameMap { - 'ion-label': HTMLIonLabelElement; - } - interface ElementTagNameMap { - 'ion-label': HTMLIonLabelElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-label': JSXElements.IonLabelAttributes; - } - } - namespace JSXElements { export interface IonLabelAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -3252,43 +4725,7 @@ declare global { */ 'position'?: 'fixed' | 'stacked' | 'floating'; } - } -} - -declare global { - - namespace StencilComponents { - interface IonListHeader { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonListHeaderElement extends StencilComponents.IonListHeader, HTMLStencilElement {} - - var HTMLIonListHeaderElement: { - prototype: HTMLIonListHeaderElement; - new (): HTMLIonListHeaderElement; - }; - interface HTMLElementTagNameMap { - 'ion-list-header': HTMLIonListHeaderElement; - } - interface ElementTagNameMap { - 'ion-list-header': HTMLIonListHeaderElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-list-header': JSXElements.IonListHeaderAttributes; - } - } - namespace JSXElements { export interface IonListHeaderAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -3299,55 +4736,7 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonList { - /** - * Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). Returns a boolean value of whether it closed an item or not. - */ - 'closeSlidingItems': () => boolean; - /** - * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. - */ - 'getOpenItem': () => HTMLIonItemSlidingElement | undefined; - /** - * If true, the list will have margin around it and rounded corners. Defaults to `false`. - */ - 'inset': boolean; - /** - * How the bottom border should be displayed on all items. - */ - 'lines': 'full' | 'inset' | 'none'; - /** - * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. - */ - 'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void; - } - } - - interface HTMLIonListElement extends StencilComponents.IonList, HTMLStencilElement {} - - var HTMLIonListElement: { - prototype: HTMLIonListElement; - new (): HTMLIonListElement; - }; - interface HTMLElementTagNameMap { - 'ion-list': HTMLIonListElement; - } - interface ElementTagNameMap { - 'ion-list': HTMLIonListElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-list': JSXElements.IonListAttributes; - } - } - namespace JSXElements { export interface IonListAttributes extends HTMLAttributes { /** * If true, the list will have margin around it and rounded corners. Defaults to `false`. @@ -3358,144 +4747,11 @@ declare global { */ 'lines'?: 'full' | 'inset' | 'none'; } - } -} - -declare global { - - namespace StencilComponents { - interface IonLoadingController { - /** - * Create a loading overlay with loading options. - */ - 'create': (opts?: LoadingOptions | undefined) => Promise; - /** - * Dismiss the open loading overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, loadingId?: number) => Promise; - /** - * Get the most recently opened loading overlay. - */ - 'getTop': () => HTMLIonLoadingElement; - } - } - - interface HTMLIonLoadingControllerElement extends StencilComponents.IonLoadingController, HTMLStencilElement {} - - var HTMLIonLoadingControllerElement: { - prototype: HTMLIonLoadingControllerElement; - new (): HTMLIonLoadingControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-loading-controller': HTMLIonLoadingControllerElement; - } - interface ElementTagNameMap { - 'ion-loading-controller': HTMLIonLoadingControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-loading-controller': JSXElements.IonLoadingControllerAttributes; - } - } - namespace JSXElements { export interface IonLoadingControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonLoading { - /** - * Optional text content to display in the loading indicator. - */ - 'content': string; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass': string | string[]; - /** - * Dismiss the loading overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * If true, the loading indicator will dismiss when the page changes. Defaults to `false`. - */ - 'dismissOnPageChange': boolean; - /** - * Number of milliseconds to wait before dismissing the loading indicator. - */ - 'duration': number; - /** - * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. - */ - 'enableBackdropDismiss': boolean; - /** - * Animation to use when the loading indicator is presented. - */ - 'enterAnimation': AnimationBuilder; - /** - * If true, the loading will blur any inputs and hide the keyboard - */ - 'keyboardClose': boolean; - /** - * Animation to use when the loading indicator is dismissed. - */ - 'leaveAnimation': AnimationBuilder; - /** - * Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. - */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - 'overlayId': number; - /** - * Present the loading overlay after it has been created. - */ - 'present': () => Promise; - /** - * If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. - */ - 'showBackdrop': boolean; - /** - * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. - */ - 'spinner': string; - /** - * If true, the loading indicator will be translucent. Defaults to `false`. - */ - 'translucent': boolean; - /** - * If true, the loading indicator will animate. Defaults to `true`. - */ - 'willAnimate': boolean; - } - } - - interface HTMLIonLoadingElement extends StencilComponents.IonLoading, HTMLStencilElement {} - - var HTMLIonLoadingElement: { - prototype: HTMLIonLoadingElement; - new (): HTMLIonLoadingElement; - }; - interface HTMLElementTagNameMap { - 'ion-loading': HTMLIonLoadingElement; - } - interface ElementTagNameMap { - 'ion-loading': HTMLIonLoadingElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-loading': JSXElements.IonLoadingAttributes; - } - } - namespace JSXElements { export interface IonLoadingAttributes extends HTMLAttributes { /** * Optional text content to display in the loading indicator. @@ -3571,51 +4827,7 @@ declare global { */ 'willAnimate'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonMenuButton { - /** - * Automatically hides the menu button when the corresponding menu is not active - */ - 'autoHide': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle - */ - 'menu': string; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonMenuButtonElement extends StencilComponents.IonMenuButton, HTMLStencilElement {} - - var HTMLIonMenuButtonElement: { - prototype: HTMLIonMenuButtonElement; - new (): HTMLIonMenuButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-menu-button': HTMLIonMenuButtonElement; - } - interface ElementTagNameMap { - 'ion-menu-button': HTMLIonMenuButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-menu-button': JSXElements.IonMenuButtonAttributes; - } - } - namespace JSXElements { export interface IonMenuButtonAttributes extends HTMLAttributes { /** * Automatically hides the menu button when the corresponding menu is not active @@ -3634,125 +4846,11 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonMenuController { - '_register': (menu: Menu) => void; - '_setActiveMenu': (menu: Menu) => void; - '_setOpen': (menu: Menu, shouldOpen: boolean, animated: boolean) => Promise; - '_unregister': (menu: Menu) => void; - /** - * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu. - */ - 'close': (menuId?: string | undefined) => Promise; - 'createAnimation': (type: string, menuCmp: Menu) => Promise; - /** - * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. - */ - 'enable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; - /** - * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `left` or `right`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. - */ - 'get': (menuId?: string | undefined) => HTMLIonMenuElement | null; - /** - * Returns an array of all menu instances. - */ - 'getMenus': () => HTMLIonMenuElement[]; - /** - * Returns the instance of the menu already opened, otherwise `null`. - */ - 'getOpen': () => HTMLIonMenuElement | null; - /** - * Returns true if any menu is currently animating. - */ - 'isAnimating': () => boolean; - /** - * Returns true if the specified menu is enabled. - */ - 'isEnabled': (menuId?: string | undefined) => boolean; - /** - * Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. - */ - 'isOpen': (menuId?: string | undefined) => boolean; - /** - * Open the menu. - */ - 'open': (menuId?: string | undefined) => Promise; - 'registerAnimation': (name: string, animation: AnimationBuilder) => void; - /** - * Used to enable or disable the ability to swipe open the menu. - */ - 'swipeEnable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; - /** - * Toggle the menu. If it's closed, it will open, and if opened, it will close. - */ - 'toggle': (menuId?: string | undefined) => Promise; - } - } - - interface HTMLIonMenuControllerElement extends StencilComponents.IonMenuController, HTMLStencilElement {} - - var HTMLIonMenuControllerElement: { - prototype: HTMLIonMenuControllerElement; - new (): HTMLIonMenuControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-menu-controller': HTMLIonMenuControllerElement; - } - interface ElementTagNameMap { - 'ion-menu-controller': HTMLIonMenuControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-menu-controller': JSXElements.IonMenuControllerAttributes; - } - } - namespace JSXElements { export interface IonMenuControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonMenuToggle { - /** - * Automatically hides the content when the corresponding menu is not active - */ - 'autoHide': boolean; - /** - * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle - */ - 'menu': string; - } - } - - interface HTMLIonMenuToggleElement extends StencilComponents.IonMenuToggle, HTMLStencilElement {} - - var HTMLIonMenuToggleElement: { - prototype: HTMLIonMenuToggleElement; - new (): HTMLIonMenuToggleElement; - }; - interface HTMLElementTagNameMap { - 'ion-menu-toggle': HTMLIonMenuToggleElement; - } - interface ElementTagNameMap { - 'ion-menu-toggle': HTMLIonMenuToggleElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-menu-toggle': JSXElements.IonMenuToggleAttributes; - } - } - namespace JSXElements { export interface IonMenuToggleAttributes extends HTMLAttributes { /** * Automatically hides the content when the corresponding menu is not active @@ -3763,70 +4861,7 @@ declare global { */ 'menu'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonMenu { - 'close': (animated?: boolean) => Promise; - /** - * The content's id the menu should use. - */ - 'contentId': string; - /** - * If true, the menu is disabled. Default `false`. - */ - 'disabled': boolean; - 'getWidth': () => number; - 'isActive': () => boolean; - 'isOpen': () => boolean; - /** - * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. - */ - 'maxEdgeStart': number; - /** - * An id for the menu. - */ - 'menuId': string; - 'open': (animated?: boolean) => Promise; - 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; - /** - * Which side of the view the menu should be placed. Default `"start"`. - */ - 'side': Side; - /** - * If true, swiping the menu is enabled. Default `true`. - */ - 'swipeEnabled': boolean; - 'toggle': (animated?: boolean) => Promise; - /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. - */ - 'type': string; - } - } - - interface HTMLIonMenuElement extends StencilComponents.IonMenu, HTMLStencilElement {} - - var HTMLIonMenuElement: { - prototype: HTMLIonMenuElement; - new (): HTMLIonMenuElement; - }; - interface HTMLElementTagNameMap { - 'ion-menu': HTMLIonMenuElement; - } - interface ElementTagNameMap { - 'ion-menu': HTMLIonMenuElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-menu': JSXElements.IonMenuAttributes; - } - } - namespace JSXElements { export interface IonMenuAttributes extends HTMLAttributes { /** * The content's id the menu should use. @@ -3869,130 +4904,11 @@ declare global { */ 'type'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonModalController { - /** - * Create a modal overlay with modal options. - */ - 'create': (opts?: ModalOptions | undefined) => Promise; - /** - * Dismiss the open modal overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, modalId?: number) => Promise; - /** - * Get the most recently opened modal overlay. - */ - 'getTop': () => HTMLIonModalElement; - } - } - - interface HTMLIonModalControllerElement extends StencilComponents.IonModalController, HTMLStencilElement {} - - var HTMLIonModalControllerElement: { - prototype: HTMLIonModalControllerElement; - new (): HTMLIonModalControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-modal-controller': HTMLIonModalControllerElement; - } - interface ElementTagNameMap { - 'ion-modal-controller': HTMLIonModalControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-modal-controller': JSXElements.IonModalControllerAttributes; - } - } - namespace JSXElements { export interface IonModalControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonModal { - /** - * The component to display inside of the modal. - */ - 'component': ComponentRef; - /** - * The data to pass to the modal component. - */ - 'componentProps': ComponentProps; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass': string | string[]; - 'delegate': FrameworkDelegate; - /** - * Dismiss the modal overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'enableBackdropDismiss': boolean; - /** - * Animation to use when the modal is presented. - */ - 'enterAnimation': AnimationBuilder; - 'keyboardClose': boolean; - /** - * Animation to use when the modal is dismissed. - */ - 'leaveAnimation': AnimationBuilder; - /** - * Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - 'overlayId': number; - /** - * Present the modal overlay after it has been created. - */ - 'present': () => Promise; - /** - * If true, a backdrop will be displayed behind the modal. Defaults to `true`. - */ - 'showBackdrop': boolean; - /** - * If true, the modal will animate. Defaults to `true`. - */ - 'willAnimate': boolean; - } - } - - interface HTMLIonModalElement extends StencilComponents.IonModal, HTMLStencilElement {} - - var HTMLIonModalElement: { - prototype: HTMLIonModalElement; - new (): HTMLIonModalElement; - }; - interface HTMLElementTagNameMap { - 'ion-modal': HTMLIonModalElement; - } - interface ElementTagNameMap { - 'ion-modal': HTMLIonModalElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-modal': JSXElements.IonModalAttributes; - } - } - namespace JSXElements { export interface IonModalAttributes extends HTMLAttributes { /** * The component to display inside of the modal. @@ -4054,76 +4970,11 @@ declare global { */ 'willAnimate'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonNavPop { - - } - } - - interface HTMLIonNavPopElement extends StencilComponents.IonNavPop, HTMLStencilElement {} - - var HTMLIonNavPopElement: { - prototype: HTMLIonNavPopElement; - new (): HTMLIonNavPopElement; - }; - interface HTMLElementTagNameMap { - 'ion-nav-pop': HTMLIonNavPopElement; - } - interface ElementTagNameMap { - 'ion-nav-pop': HTMLIonNavPopElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-nav-pop': JSXElements.IonNavPopAttributes; - } - } - namespace JSXElements { export interface IonNavPopAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonNavPush { - /** - * Component to navigate to - */ - 'component': NavComponent; - /** - * Data you want to pass to the component as props - */ - 'componentProps': ComponentProps; - } - } - - interface HTMLIonNavPushElement extends StencilComponents.IonNavPush, HTMLStencilElement {} - - var HTMLIonNavPushElement: { - prototype: HTMLIonNavPushElement; - new (): HTMLIonNavPushElement; - }; - interface HTMLElementTagNameMap { - 'ion-nav-push': HTMLIonNavPushElement; - } - interface ElementTagNameMap { - 'ion-nav-push': HTMLIonNavPushElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-nav-push': JSXElements.IonNavPushAttributes; - } - } - namespace JSXElements { export interface IonNavPushAttributes extends HTMLAttributes { /** * Component to navigate to @@ -4134,43 +4985,7 @@ declare global { */ 'componentProps'?: ComponentProps; } - } -} - -declare global { - - namespace StencilComponents { - interface IonNavSetRoot { - /** - * Component you want to make root for the navigation stack - */ - 'component': NavComponent; - /** - * Data you want to pass to the component as props - */ - 'componentProps': ComponentProps; - } - } - - interface HTMLIonNavSetRootElement extends StencilComponents.IonNavSetRoot, HTMLStencilElement {} - - var HTMLIonNavSetRootElement: { - prototype: HTMLIonNavSetRootElement; - new (): HTMLIonNavSetRootElement; - }; - interface HTMLElementTagNameMap { - 'ion-nav-set-root': HTMLIonNavSetRootElement; - } - interface ElementTagNameMap { - 'ion-nav-set-root': HTMLIonNavSetRootElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-nav-set-root': JSXElements.IonNavSetRootAttributes; - } - } - namespace JSXElements { export interface IonNavSetRootAttributes extends HTMLAttributes { /** * Component you want to make root for the navigation stack @@ -4181,111 +4996,7 @@ declare global { */ 'componentProps'?: ComponentProps; } - } -} - -declare global { - - namespace StencilComponents { - interface IonNav { - /** - * If the nav should animate the components or not - */ - 'animated': boolean; - /** - * Returns true or false if the current view can go back - */ - 'canGoBack': (view?: ViewController | undefined) => boolean; - 'delegate': FrameworkDelegate; - /** - * Gets the active view - */ - 'getActive': () => ViewController | undefined; - /** - * Returns the view at the index - */ - 'getByIndex': (index: number) => ViewController | undefined; - /** - * Gets the previous view - */ - 'getPrevious': (view?: ViewController | undefined) => ViewController | undefined; - 'getRouteId': () => RouteID | undefined; - /** - * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. - */ - 'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. - */ - 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Returns the length of navigation stack - */ - 'isAnimating': () => boolean; - 'length': () => number; - /** - * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. - */ - 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Pop to a specific index in the navigation stack - */ - 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Navigate back to the root of the stack, no matter how far back that is. - */ - 'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams - */ - 'push': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Removes a page from the nav stack at the specified index. - */ - 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Root NavComponent to load - */ - 'root': NavComponent; - /** - * Any parameters for the root component - */ - 'rootParams': ComponentProps; - /** - * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. - */ - 'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - /** - * Set the root for the current navigation stack. - */ - 'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - 'setRouteId': (id: string, params: any, direction: number) => Promise; - /** - * If the nav component should allow for swipe-to-go-back - */ - 'swipeBackEnabled': boolean; - } - } - - interface HTMLIonNavElement extends StencilComponents.IonNav, HTMLStencilElement {} - - var HTMLIonNavElement: { - prototype: HTMLIonNavElement; - new (): HTMLIonNavElement; - }; - interface HTMLElementTagNameMap { - 'ion-nav': HTMLIonNavElement; - } - interface ElementTagNameMap { - 'ion-nav': HTMLIonNavElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-nav': JSXElements.IonNavAttributes; - } - } - namespace JSXElements { export interface IonNavAttributes extends HTMLAttributes { /** * If the nav should animate the components or not @@ -4317,43 +5028,7 @@ declare global { */ 'swipeBackEnabled'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonNote { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonNoteElement extends StencilComponents.IonNote, HTMLStencilElement {} - - var HTMLIonNoteElement: { - prototype: HTMLIonNoteElement; - new (): HTMLIonNoteElement; - }; - interface HTMLElementTagNameMap { - 'ion-note': HTMLIonNoteElement; - } - interface ElementTagNameMap { - 'ion-note': HTMLIonNoteElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-note': JSXElements.IonNoteAttributes; - } - } - namespace JSXElements { export interface IonNoteAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -4364,176 +5039,16 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonPickerColumn { - 'col': PickerColumn; - } - } - - interface HTMLIonPickerColumnElement extends StencilComponents.IonPickerColumn, HTMLStencilElement {} - - var HTMLIonPickerColumnElement: { - prototype: HTMLIonPickerColumnElement; - new (): HTMLIonPickerColumnElement; - }; - interface HTMLElementTagNameMap { - 'ion-picker-column': HTMLIonPickerColumnElement; - } - interface ElementTagNameMap { - 'ion-picker-column': HTMLIonPickerColumnElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-picker-column': JSXElements.IonPickerColumnAttributes; - } - } - namespace JSXElements { export interface IonPickerColumnAttributes extends HTMLAttributes { 'col'?: PickerColumn; + 'onIonChange'?: (event: CustomEvent) => void; } - } -} - -declare global { - - namespace StencilComponents { - interface IonPickerController { - 'create': (opts?: PickerOptions | undefined) => Promise; - 'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise; - 'getTop': () => HTMLIonPickerElement; - } - } - - interface HTMLIonPickerControllerElement extends StencilComponents.IonPickerController, HTMLStencilElement {} - - var HTMLIonPickerControllerElement: { - prototype: HTMLIonPickerControllerElement; - new (): HTMLIonPickerControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-picker-controller': HTMLIonPickerControllerElement; - } - interface ElementTagNameMap { - 'ion-picker-controller': HTMLIonPickerControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-picker-controller': JSXElements.IonPickerControllerAttributes; - } - } - namespace JSXElements { export interface IonPickerControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonPicker { - /** - * Add a new PickerButton to the picker - */ - 'addButton': (button: PickerButton) => void; - /** - * Add a new PickerColumn to the picker - */ - 'addColumn': (column: PickerColumn) => void; - /** - * Array of buttons to be displayed at the top of the picker. - */ - 'buttons': PickerButton[]; - /** - * Array of columns to be displayed in the picker. - */ - 'columns': PickerColumn[]; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass': string | string[]; - /** - * Dismiss the picker overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * Number of milliseconds to wait before dismissing the picker. - */ - 'duration': number; - /** - * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'enableBackdropDismiss': boolean; - /** - * Animation to use when the picker is presented. - */ - 'enterAnimation': AnimationBuilder; - /** - * Returns the column the matches the specified name - */ - 'getColumn': (name: string) => PickerColumn | undefined; - /** - * Returns all the PickerColumns - */ - 'getColumns': () => PickerColumn[]; - /** - * If the keyboard should be able to close the picker. Defaults to true. - */ - 'keyboardClose': boolean; - /** - * Animation to use when the picker is dismissed. - */ - 'leaveAnimation': AnimationBuilder; - /** - * Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - 'overlayId': number; - /** - * Present the picker overlay after it has been created. - */ - 'present': () => Promise; - /** - * If true, a backdrop will be displayed behind the picker. Defaults to `true`. - */ - 'showBackdrop': boolean; - /** - * If true, the picker will animate. Defaults to `true`. - */ - 'willAnimate': boolean; - } - } - - interface HTMLIonPickerElement extends StencilComponents.IonPicker, HTMLStencilElement {} - - var HTMLIonPickerElement: { - prototype: HTMLIonPickerElement; - new (): HTMLIonPickerElement; - }; - interface HTMLElementTagNameMap { - 'ion-picker': HTMLIonPickerElement; - } - interface ElementTagNameMap { - 'ion-picker': HTMLIonPickerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-picker': JSXElements.IonPickerAttributes; - } - } - namespace JSXElements { export interface IonPickerAttributes extends HTMLAttributes { /** * Array of buttons to be displayed at the top of the picker. @@ -4601,146 +5116,11 @@ declare global { */ 'willAnimate'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonPopoverController { - /** - * Create a popover overlay with popover options. - */ - 'create': (opts?: PopoverOptions | undefined) => Promise; - /** - * Dismiss the open popover overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, popoverId?: number) => Promise; - /** - * Get the most recently opened popover overlay. - */ - 'getTop': () => HTMLIonPopoverElement; - } - } - - interface HTMLIonPopoverControllerElement extends StencilComponents.IonPopoverController, HTMLStencilElement {} - - var HTMLIonPopoverControllerElement: { - prototype: HTMLIonPopoverControllerElement; - new (): HTMLIonPopoverControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-popover-controller': HTMLIonPopoverControllerElement; - } - interface ElementTagNameMap { - 'ion-popover-controller': HTMLIonPopoverControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-popover-controller': JSXElements.IonPopoverControllerAttributes; - } - } - namespace JSXElements { export interface IonPopoverControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonPopover { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The component to display inside of the popover. - */ - 'component': ComponentRef; - /** - * The data to pass to the popover component. - */ - 'componentProps': ComponentProps; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass': string | string[]; - 'delegate': FrameworkDelegate; - /** - * Dismiss the popover overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'enableBackdropDismiss': boolean; - /** - * Animation to use when the popover is presented. - */ - 'enterAnimation': AnimationBuilder; - /** - * The event to pass to the popover animation. - */ - 'ev': any; - 'keyboardClose': boolean; - /** - * Animation to use when the popover is dismissed. - */ - 'leaveAnimation': AnimationBuilder; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - 'overlayId': number; - /** - * Present the popover overlay after it has been created. - */ - 'present': () => Promise; - /** - * If true, a backdrop will be displayed behind the popover. Defaults to `true`. - */ - 'showBackdrop': boolean; - /** - * If true, the popover will be translucent. Defaults to `false`. - */ - 'translucent': boolean; - /** - * If true, the popover will animate. Defaults to `true`. - */ - 'willAnimate': boolean; - } - } - - interface HTMLIonPopoverElement extends StencilComponents.IonPopover, HTMLStencilElement {} - - var HTMLIonPopoverElement: { - prototype: HTMLIonPopoverElement; - new (): HTMLIonPopoverElement; - }; - interface HTMLElementTagNameMap { - 'ion-popover': HTMLIonPopoverElement; - } - interface ElementTagNameMap { - 'ion-popover': HTMLIonPopoverElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-popover': JSXElements.IonPopoverAttributes; - } - } - namespace JSXElements { export interface IonPopoverAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -4818,48 +5198,7 @@ declare global { */ 'willAnimate'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRadioGroup { - 'allowEmptySelection': boolean; - /** - * Indicates that the user cannot interact with the control. - */ - 'disabled': boolean; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * the value of the radio group. - */ - 'value': string; - } - } - - interface HTMLIonRadioGroupElement extends StencilComponents.IonRadioGroup, HTMLStencilElement {} - - var HTMLIonRadioGroupElement: { - prototype: HTMLIonRadioGroupElement; - new (): HTMLIonRadioGroupElement; - }; - interface HTMLElementTagNameMap { - 'ion-radio-group': HTMLIonRadioGroupElement; - } - interface ElementTagNameMap { - 'ion-radio-group': HTMLIonRadioGroupElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-radio-group': JSXElements.IonRadioGroupAttributes; - } - } - namespace JSXElements { export interface IonRadioGroupAttributes extends HTMLAttributes { 'allowEmptySelection'?: boolean; /** @@ -4879,59 +5218,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRadio { - /** - * If true, the radio is selected. Defaults to `false`. - */ - 'checked': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * Indicates that the user cannot interact with the control. - */ - 'disabled': boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * the value of the radio. - */ - 'value': string; - } - } - - interface HTMLIonRadioElement extends StencilComponents.IonRadio, HTMLStencilElement {} - - var HTMLIonRadioElement: { - prototype: HTMLIonRadioElement; - new (): HTMLIonRadioElement; - }; - interface HTMLElementTagNameMap { - 'ion-radio': HTMLIonRadioElement; - } - interface ElementTagNameMap { - 'ion-radio': HTMLIonRadioElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-radio': JSXElements.IonRadioAttributes; - } - } - namespace JSXElements { export interface IonRadioAttributes extends HTMLAttributes { /** * If true, the radio is selected. Defaults to `false`. @@ -4982,44 +5269,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRangeKnob { - 'disabled': boolean; - 'knob': Knob; - 'labelId': string; - 'max': number; - 'min': number; - 'pin': boolean; - 'pressed': boolean; - 'ratio': number; - 'value': number; - } - } - - interface HTMLIonRangeKnobElement extends StencilComponents.IonRangeKnob, HTMLStencilElement {} - - var HTMLIonRangeKnobElement: { - prototype: HTMLIonRangeKnobElement; - new (): HTMLIonRangeKnobElement; - }; - interface HTMLElementTagNameMap { - 'ion-range-knob': HTMLIonRangeKnobElement; - } - interface ElementTagNameMap { - 'ion-range-knob': HTMLIonRangeKnobElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-range-knob': JSXElements.IonRangeKnobAttributes; - } - } - namespace JSXElements { export interface IonRangeKnobAttributes extends HTMLAttributes { 'disabled'?: boolean; 'knob'?: Knob; @@ -5033,83 +5283,7 @@ declare global { 'ratio'?: number; 'value'?: number; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRange { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. - */ - 'debounce': number; - /** - * Indicates that the user cannot interact with the control. - */ - 'disabled': boolean; - /** - * Show two knobs. Defaults to `false`. - */ - 'dualKnobs': boolean; - /** - * Maximum integer value of the range. Defaults to `100`. - */ - 'max': number; - /** - * Minimum integer value of the range. Defaults to `0`. - */ - 'min': number; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`. - */ - 'pin': boolean; - /** - * If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. - */ - 'snaps': boolean; - /** - * Specifies the value granularity. Defaults to `1`. - */ - 'step': number; - /** - * the value of the range. - */ - 'value': any; - } - } - - interface HTMLIonRangeElement extends StencilComponents.IonRange, HTMLStencilElement {} - - var HTMLIonRangeElement: { - prototype: HTMLIonRangeElement; - new (): HTMLIonRangeElement; - }; - interface HTMLElementTagNameMap { - 'ion-range': HTMLIonRangeElement; - } - interface ElementTagNameMap { - 'ion-range': HTMLIonRangeElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-range': JSXElements.IonRangeAttributes; - } - } - namespace JSXElements { export interface IonRangeAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -5176,51 +5350,7 @@ declare global { */ 'value'?: any; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRefresherContent { - /** - * A static icon to display when you begin to pull down - */ - 'pullingIcon': string; - /** - * The text you want to display when you begin to pull down - */ - 'pullingText': string; - /** - * An animated SVG spinner that shows when refreshing begins - */ - 'refreshingSpinner': string; - /** - * The text you want to display when performing a refresh - */ - 'refreshingText': string; - } - } - - interface HTMLIonRefresherContentElement extends StencilComponents.IonRefresherContent, HTMLStencilElement {} - - var HTMLIonRefresherContentElement: { - prototype: HTMLIonRefresherContentElement; - new (): HTMLIonRefresherContentElement; - }; - interface HTMLElementTagNameMap { - 'ion-refresher-content': HTMLIonRefresherContentElement; - } - interface ElementTagNameMap { - 'ion-refresher-content': HTMLIonRefresherContentElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-refresher-content': JSXElements.IonRefresherContentAttributes; - } - } - namespace JSXElements { export interface IonRefresherContentAttributes extends HTMLAttributes { /** * A static icon to display when you begin to pull down @@ -5239,67 +5369,7 @@ declare global { */ 'refreshingText'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRefresher { - /** - * Changes the refresher's state from `refreshing` to `cancelling`. - */ - 'cancel': () => void; - /** - * Time it takes to close the refresher. Defaults to `280ms`. - */ - 'closeDuration': string; - /** - * Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`. - */ - 'complete': () => void; - /** - * If true, the refresher will be hidden. Defaults to `false`. - */ - 'disabled': boolean; - /** - * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position. - */ - 'getProgress': () => number; - /** - * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. - */ - 'pullMax': number; - /** - * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. - */ - 'pullMin': number; - /** - * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. - */ - 'snapbackDuration': string; - } - } - - interface HTMLIonRefresherElement extends StencilComponents.IonRefresher, HTMLStencilElement {} - - var HTMLIonRefresherElement: { - prototype: HTMLIonRefresherElement; - new (): HTMLIonRefresherElement; - }; - interface HTMLElementTagNameMap { - 'ion-refresher': HTMLIonRefresherElement; - } - interface ElementTagNameMap { - 'ion-refresher': HTMLIonRefresherElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-refresher': JSXElements.IonRefresherAttributes; - } - } - namespace JSXElements { export interface IonRefresherAttributes extends HTMLAttributes { /** * Time it takes to close the refresher. Defaults to `280ms`. @@ -5334,116 +5404,18 @@ declare global { */ 'snapbackDuration'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonReorderGroup { - /** - * If true, the reorder will be hidden. Defaults to `true`. - */ - 'disabled': boolean; - } - } - - interface HTMLIonReorderGroupElement extends StencilComponents.IonReorderGroup, HTMLStencilElement {} - - var HTMLIonReorderGroupElement: { - prototype: HTMLIonReorderGroupElement; - new (): HTMLIonReorderGroupElement; - }; - interface HTMLElementTagNameMap { - 'ion-reorder-group': HTMLIonReorderGroupElement; - } - interface ElementTagNameMap { - 'ion-reorder-group': HTMLIonReorderGroupElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-reorder-group': JSXElements.IonReorderGroupAttributes; - } - } - namespace JSXElements { export interface IonReorderGroupAttributes extends HTMLAttributes { /** * If true, the reorder will be hidden. Defaults to `true`. */ 'disabled'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonReorder { - - } - } - - interface HTMLIonReorderElement extends StencilComponents.IonReorder, HTMLStencilElement {} - - var HTMLIonReorderElement: { - prototype: HTMLIonReorderElement; - new (): HTMLIonReorderElement; - }; - interface HTMLElementTagNameMap { - 'ion-reorder': HTMLIonReorderElement; - } - interface ElementTagNameMap { - 'ion-reorder': HTMLIonReorderElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-reorder': JSXElements.IonReorderAttributes; - } - } - namespace JSXElements { export interface IonReorderAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonRippleEffect { - /** - * Adds the ripple effect to the parent elment - */ - 'addRipple': (pageX: number, pageY: number) => void; - 'parent': HTMLElement | string; - /** - * If true, the ripple effect will listen to any click events and animate - */ - 'tapClick': boolean; - } - } - - interface HTMLIonRippleEffectElement extends StencilComponents.IonRippleEffect, HTMLStencilElement {} - - var HTMLIonRippleEffectElement: { - prototype: HTMLIonRippleEffectElement; - new (): HTMLIonRippleEffectElement; - }; - interface HTMLElementTagNameMap { - 'ion-ripple-effect': HTMLIonRippleEffectElement; - } - interface ElementTagNameMap { - 'ion-ripple-effect': HTMLIonRippleEffectElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-ripple-effect': JSXElements.IonRippleEffectAttributes; - } - } - namespace JSXElements { export interface IonRippleEffectAttributes extends HTMLAttributes { 'parent'?: HTMLElement | string; /** @@ -5451,43 +5423,7 @@ declare global { */ 'tapClick'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRouteRedirect { - /** - * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. - */ - 'from': string; - /** - * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perfom a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. - */ - 'to': string; - } - } - - interface HTMLIonRouteRedirectElement extends StencilComponents.IonRouteRedirect, HTMLStencilElement {} - - var HTMLIonRouteRedirectElement: { - prototype: HTMLIonRouteRedirectElement; - new (): HTMLIonRouteRedirectElement; - }; - interface HTMLElementTagNameMap { - 'ion-route-redirect': HTMLIonRouteRedirectElement; - } - interface ElementTagNameMap { - 'ion-route-redirect': HTMLIonRouteRedirectElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-route-redirect': JSXElements.IonRouteRedirectAttributes; - } - } - namespace JSXElements { export interface IonRouteRedirectAttributes extends HTMLAttributes { /** * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. @@ -5502,47 +5438,7 @@ declare global { */ 'to'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRoute { - /** - * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select. - */ - 'component': string; - /** - * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. - */ - 'componentProps': {[key: string]: any}; - /** - * Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. - */ - 'url': string; - } - } - - interface HTMLIonRouteElement extends StencilComponents.IonRoute, HTMLStencilElement {} - - var HTMLIonRouteElement: { - prototype: HTMLIonRouteElement; - new (): HTMLIonRouteElement; - }; - interface HTMLElementTagNameMap { - 'ion-route': HTMLIonRouteElement; - } - interface ElementTagNameMap { - 'ion-route': HTMLIonRouteElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-route': JSXElements.IonRouteAttributes; - } - } - namespace JSXElements { export interface IonRouteAttributes extends HTMLAttributes { /** * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select. @@ -5561,48 +5457,7 @@ declare global { */ 'url'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRouterOutlet { - 'animated': boolean; - 'animationBuilder': AnimationBuilder; - 'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise; - 'delegate': FrameworkDelegate; - /** - * Returns the ID for the current route - */ - 'getRouteId': () => RouteID | undefined; - /** - * Set the root component for the given navigation stack - */ - 'setRoot': (component: ComponentRef, params?: ComponentProps | undefined, opts?: RouterOutletOptions | undefined) => Promise; - 'setRouteId': (id: string, params: any, direction: number) => Promise; - } - } - - interface HTMLIonRouterOutletElement extends StencilComponents.IonRouterOutlet, HTMLStencilElement {} - - var HTMLIonRouterOutletElement: { - prototype: HTMLIonRouterOutletElement; - new (): HTMLIonRouterOutletElement; - }; - interface HTMLElementTagNameMap { - 'ion-router-outlet': HTMLIonRouterOutletElement; - } - interface ElementTagNameMap { - 'ion-router-outlet': HTMLIonRouterOutletElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-router-outlet': JSXElements.IonRouterOutletAttributes; - } - } - namespace JSXElements { export interface IonRouterOutletAttributes extends HTMLAttributes { 'animated'?: boolean; 'animationBuilder'?: AnimationBuilder; @@ -5611,49 +5466,7 @@ declare global { 'onIonNavWillChange'?: (event: CustomEvent) => void; 'onIonNavWillLoad'?: (event: CustomEvent) => void; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRouter { - 'navChanged': (intent: number) => Promise; - 'printDebug': () => void; - /** - * Navigate to the specified URL - */ - 'push': (url: string, direction?: RouterDirection) => Promise; - /** - * By default `ion-router` will match the routes at the root path ("/"). That can be changed when - */ - 'root': string; - /** - * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires aditional server-side configuration in order to properly work. On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. - */ - 'useHash': boolean; - } - } - - interface HTMLIonRouterElement extends StencilComponents.IonRouter, HTMLStencilElement {} - - var HTMLIonRouterElement: { - prototype: HTMLIonRouterElement; - new (): HTMLIonRouterElement; - }; - interface HTMLElementTagNameMap { - 'ion-router': HTMLIonRouterElement; - } - interface ElementTagNameMap { - 'ion-router': HTMLIonRouterElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-router': JSXElements.IonRouterAttributes; - } - } - namespace JSXElements { export interface IonRouterAttributes extends HTMLAttributes { /** * Emitted when the route had changed @@ -5672,96 +5485,11 @@ declare global { */ 'useHash'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonRow { - - } - } - - interface HTMLIonRowElement extends StencilComponents.IonRow, HTMLStencilElement {} - - var HTMLIonRowElement: { - prototype: HTMLIonRowElement; - new (): HTMLIonRowElement; - }; - interface HTMLElementTagNameMap { - 'ion-row': HTMLIonRowElement; - } - interface ElementTagNameMap { - 'ion-row': HTMLIonRowElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-row': JSXElements.IonRowAttributes; - } - } - namespace JSXElements { export interface IonRowAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonScroll { - /** - * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. - */ - 'forceOverscroll': boolean; - /** - * The mode for component. - */ - 'mode': Mode; - /** - * Scroll by a specified X/Y distance in the component - */ - 'scrollByPoint': (x: number, y: number, duration: number) => Promise; - /** - * If true, the component will emit scroll events. - */ - 'scrollEvents': boolean; - /** - * Scroll to the bottom of the component - */ - 'scrollToBottom': (duration: number) => Promise; - /** - * Scroll to a specified X/Y location in the component - */ - 'scrollToPoint': (x: number, y: number, duration: number) => Promise; - /** - * Scroll to the top of the component - */ - 'scrollToTop': (duration: number) => Promise; - } - } - - interface HTMLIonScrollElement extends StencilComponents.IonScroll, HTMLStencilElement {} - - var HTMLIonScrollElement: { - prototype: HTMLIonScrollElement; - new (): HTMLIonScrollElement; - }; - interface HTMLElementTagNameMap { - 'ion-scroll': HTMLIonScrollElement; - } - interface ElementTagNameMap { - 'ion-scroll': HTMLIonScrollElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-scroll': JSXElements.IonScrollAttributes; - } - } - namespace JSXElements { export interface IonScrollAttributes extends HTMLAttributes { /** * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. @@ -5788,95 +5516,7 @@ declare global { */ 'scrollEvents'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSearchbar { - /** - * If true, enable searchbar animation. Default `false`. - */ - 'animated': boolean; - /** - * Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. - */ - 'autocomplete': string; - /** - * Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. - */ - 'autocorrect': string; - /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. - */ - 'cancelButtonIcon': string; - /** - * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. - */ - 'cancelButtonText': string; - /** - * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. - */ - 'clearIcon': string; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. - */ - 'debounce': number; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * Set the input's placeholder. Default `"Search"`. - */ - 'placeholder': string; - /** - * The icon to use as the search icon. Defaults to `"search"`. - */ - 'searchIcon': string; - /** - * If true, show the cancel button. Default `false`. - */ - 'showCancelButton': boolean; - /** - * If true, enable spellcheck on the input. Default `false`. - */ - 'spellcheck': boolean; - /** - * Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. - */ - 'type': string; - /** - * the value of the searchbar. - */ - 'value': string; - } - } - - interface HTMLIonSearchbarElement extends StencilComponents.IonSearchbar, HTMLStencilElement {} - - var HTMLIonSearchbarElement: { - prototype: HTMLIonSearchbarElement; - new (): HTMLIonSearchbarElement; - }; - interface HTMLElementTagNameMap { - 'ion-searchbar': HTMLIonSearchbarElement; - } - interface ElementTagNameMap { - 'ion-searchbar': HTMLIonSearchbarElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-searchbar': JSXElements.IonSearchbarAttributes; - } - } - namespace JSXElements { export interface IonSearchbarAttributes extends HTMLAttributes { /** * If true, enable searchbar animation. Default `false`. @@ -5963,52 +5603,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSegmentButton { - /** - * If true, the segment button is selected. Defaults to `false`. - */ - 'checked': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - 'disabled': boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The value of the segment button. - */ - 'value': string; - } - } - - interface HTMLIonSegmentButtonElement extends StencilComponents.IonSegmentButton, HTMLStencilElement {} - - var HTMLIonSegmentButtonElement: { - prototype: HTMLIonSegmentButtonElement; - new (): HTMLIonSegmentButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-segment-button': HTMLIonSegmentButtonElement; - } - interface ElementTagNameMap { - 'ion-segment-button': HTMLIonSegmentButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-segment-button': JSXElements.IonSegmentButtonAttributes; - } - } - namespace JSXElements { export interface IonSegmentButtonAttributes extends HTMLAttributes { /** * If true, the segment button is selected. Defaults to `false`. @@ -6032,48 +5627,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSegment { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - 'disabled': boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * the value of the segment. - */ - 'value': string; - } - } - - interface HTMLIonSegmentElement extends StencilComponents.IonSegment, HTMLStencilElement {} - - var HTMLIonSegmentElement: { - prototype: HTMLIonSegmentElement; - new (): HTMLIonSegmentElement; - }; - interface HTMLElementTagNameMap { - 'ion-segment': HTMLIonSegmentElement; - } - interface ElementTagNameMap { - 'ion-segment': HTMLIonSegmentElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-segment': JSXElements.IonSegmentAttributes; - } - } - namespace JSXElements { export interface IonSegmentAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -6093,47 +5647,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSelectOption { - /** - * If true, the user cannot interact with the select option. Defaults to `false`. - */ - 'disabled': boolean; - /** - * If true, the element is selected. - */ - 'selected': boolean; - /** - * The text value of the option. - */ - 'value': string; - } - } - - interface HTMLIonSelectOptionElement extends StencilComponents.IonSelectOption, HTMLStencilElement {} - - var HTMLIonSelectOptionElement: { - prototype: HTMLIonSelectOptionElement; - new (): HTMLIonSelectOptionElement; - }; - interface HTMLElementTagNameMap { - 'ion-select-option': HTMLIonSelectOptionElement; - } - interface ElementTagNameMap { - 'ion-select-option': HTMLIonSelectOptionElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-select-option': JSXElements.IonSelectOptionAttributes; - } - } - namespace JSXElements { export interface IonSelectOptionAttributes extends HTMLAttributes { /** * If true, the user cannot interact with the select option. Defaults to `false`. @@ -6156,51 +5670,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSelectPopover { - /** - * Header text for the popover - */ - 'header': string; - /** - * Text for popover body - */ - 'message': string; - /** - * Array of options for the popover - */ - 'options': SelectPopoverOption[]; - /** - * Subheader text for the popover - */ - 'subHeader': string; - } - } - - interface HTMLIonSelectPopoverElement extends StencilComponents.IonSelectPopover, HTMLStencilElement {} - - var HTMLIonSelectPopoverElement: { - prototype: HTMLIonSelectPopoverElement; - new (): HTMLIonSelectPopoverElement; - }; - interface HTMLElementTagNameMap { - 'ion-select-popover': HTMLIonSelectPopoverElement; - } - interface ElementTagNameMap { - 'ion-select-popover': HTMLIonSelectPopoverElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-select-popover': JSXElements.IonSelectPopoverAttributes; - } - } - namespace JSXElements { export interface IonSelectPopoverAttributes extends HTMLAttributes { /** * Header text for the popover @@ -6219,75 +5689,7 @@ declare global { */ 'subHeader'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSelect { - /** - * The text to display on the cancel button. Default: `Cancel`. - */ - 'cancelText': string; - /** - * If true, the user cannot interact with the select. Defaults to `false`. - */ - 'disabled': boolean; - /** - * The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. - */ - 'interface': SelectInterface; - /** - * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. - */ - 'interfaceOptions': any; - /** - * If true, the select can accept multiple values. - */ - 'multiple': boolean; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * The text to display on the ok button. Default: `OK`. - */ - 'okText': string; - /** - * The text to display when the select is empty. - */ - 'placeholder': string; - /** - * The text to display instead of the selected option's value. - */ - 'selectedText': string; - /** - * the value of the select. - */ - 'value': any; - } - } - - interface HTMLIonSelectElement extends StencilComponents.IonSelect, HTMLStencilElement {} - - var HTMLIonSelectElement: { - prototype: HTMLIonSelectElement; - new (): HTMLIonSelectElement; - }; - interface HTMLElementTagNameMap { - 'ion-select': HTMLIonSelectElement; - } - interface ElementTagNameMap { - 'ion-select': HTMLIonSelectElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-select': JSXElements.IonSelectAttributes; - } - } - namespace JSXElements { export interface IonSelectAttributes extends HTMLAttributes { /** * The text to display on the cancel button. Default: `Cancel`. @@ -6350,59 +5752,7 @@ declare global { */ 'value'?: any; } - } -} - -declare global { - - namespace StencilComponents { - interface IonShowWhen { - /** - * If the current media query matches this value, the element will show. - */ - 'mediaQuery': string; - /** - * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. - */ - 'mode': Mode; - /** - * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. - */ - 'or': boolean; - /** - * If the current orientation matches this value, the element will show. - */ - 'orientation': string; - /** - * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. - */ - 'platform': string; - /** - * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. - */ - 'size': string; - } - } - - interface HTMLIonShowWhenElement extends StencilComponents.IonShowWhen, HTMLStencilElement {} - - var HTMLIonShowWhenElement: { - prototype: HTMLIonShowWhenElement; - new (): HTMLIonShowWhenElement; - }; - interface HTMLElementTagNameMap { - 'ion-show-when': HTMLIonShowWhenElement; - } - interface ElementTagNameMap { - 'ion-show-when': HTMLIonShowWhenElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-show-when': JSXElements.IonShowWhenAttributes; - } - } - namespace JSXElements { export interface IonShowWhenAttributes extends HTMLAttributes { /** * If the current media query matches this value, the element will show. @@ -6429,175 +5779,18 @@ declare global { */ 'size'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSkeletonText { - /** - * Width for the element to render at. Default is 100% - */ - 'width': string; - } - } - - interface HTMLIonSkeletonTextElement extends StencilComponents.IonSkeletonText, HTMLStencilElement {} - - var HTMLIonSkeletonTextElement: { - prototype: HTMLIonSkeletonTextElement; - new (): HTMLIonSkeletonTextElement; - }; - interface HTMLElementTagNameMap { - 'ion-skeleton-text': HTMLIonSkeletonTextElement; - } - interface ElementTagNameMap { - 'ion-skeleton-text': HTMLIonSkeletonTextElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-skeleton-text': JSXElements.IonSkeletonTextAttributes; - } - } - namespace JSXElements { export interface IonSkeletonTextAttributes extends HTMLAttributes { /** * Width for the element to render at. Default is 100% */ 'width'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSlide { - - } - } - - interface HTMLIonSlideElement extends StencilComponents.IonSlide, HTMLStencilElement {} - - var HTMLIonSlideElement: { - prototype: HTMLIonSlideElement; - new (): HTMLIonSlideElement; - }; - interface HTMLElementTagNameMap { - 'ion-slide': HTMLIonSlideElement; - } - interface ElementTagNameMap { - 'ion-slide': HTMLIonSlideElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-slide': JSXElements.IonSlideAttributes; - } - } - namespace JSXElements { export interface IonSlideAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonSlides { - /** - * Get the index of the active slide. - */ - 'getActiveIndex': () => number; - /** - * Get the index of the previous slide. - */ - 'getPreviousIndex': () => number; - /** - * Get whether or not the current slide is the first slide. - */ - 'isBeginning': () => boolean; - /** - * Get whether or not the current slide is the last slide. - */ - 'isEnd': () => boolean; - /** - * Get the total number of slides. - */ - 'length': () => number; - /** - * Lock or unlock the ability to slide to the next slides. - */ - 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => any; - /** - * Lock or unlock the ability to slide to the previous slides. - */ - 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => any; - /** - * Lock or unlock the ability to slide to change slides. - */ - 'lockSwipes': (shouldLockSwipes: boolean) => any; - /** - * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options - */ - 'options': any; - /** - * If true, show the pagination. Defaults to `false`. - */ - 'pager': boolean; - /** - * If true, show the scrollbar. Defaults to `false`. - */ - 'scrollbar': boolean; - /** - * Transition to the next slide. - */ - 'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void; - /** - * Transition to the previous slide. - */ - 'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void; - /** - * Transition to the specified slide. - */ - 'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => void; - /** - * Start auto play. - */ - 'startAutoplay': () => void; - /** - * Stop auto play. - */ - 'stopAutoplay': () => void; - /** - * Update the underlying slider implementation. Call this if you've added or removed child slides. - */ - 'update': () => void; - } - } - - interface HTMLIonSlidesElement extends StencilComponents.IonSlides, HTMLStencilElement {} - - var HTMLIonSlidesElement: { - prototype: HTMLIonSlidesElement; - new (): HTMLIonSlidesElement; - }; - interface HTMLElementTagNameMap { - 'ion-slides': HTMLIonSlidesElement; - } - interface ElementTagNameMap { - 'ion-slides': HTMLIonSlidesElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-slides': JSXElements.IonSlidesAttributes; - } - } - namespace JSXElements { export interface IonSlidesAttributes extends HTMLAttributes { /** * Emitted after the active slide has changed. @@ -6676,55 +5869,7 @@ declare global { */ 'scrollbar'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSpinner { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * Duration of the spinner animation in milliseconds. The default varies based on the spinner. - */ - 'duration': number; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. - */ - 'name': string; - /** - * If true, the spinner's animation will be paused. Defaults to `false`. - */ - 'paused': boolean; - } - } - - interface HTMLIonSpinnerElement extends StencilComponents.IonSpinner, HTMLStencilElement {} - - var HTMLIonSpinnerElement: { - prototype: HTMLIonSpinnerElement; - new (): HTMLIonSpinnerElement; - }; - interface HTMLElementTagNameMap { - 'ion-spinner': HTMLIonSpinnerElement; - } - interface ElementTagNameMap { - 'ion-spinner': HTMLIonSpinnerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-spinner': JSXElements.IonSpinnerAttributes; - } - } - namespace JSXElements { export interface IonSpinnerAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -6747,48 +5892,7 @@ declare global { */ 'paused'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonSplitPane { - /** - * If true, the split pane will be hidden. Defaults to `false`. - */ - 'disabled': boolean; - 'isPane': (element: HTMLElement) => boolean; - /** - * Returns if the split pane is toggled or not - */ - 'isVisible': () => boolean; - /** - * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. - */ - 'when': string | boolean; - } - } - - interface HTMLIonSplitPaneElement extends StencilComponents.IonSplitPane, HTMLStencilElement {} - - var HTMLIonSplitPaneElement: { - prototype: HTMLIonSplitPaneElement; - new (): HTMLIonSplitPaneElement; - }; - interface HTMLElementTagNameMap { - 'ion-split-pane': HTMLIonSplitPaneElement; - } - interface ElementTagNameMap { - 'ion-split-pane': HTMLIonSplitPaneElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-split-pane': JSXElements.IonSplitPaneAttributes; - } - } - namespace JSXElements { export interface IonSplitPaneAttributes extends HTMLAttributes { /** * If true, the split pane will be hidden. Defaults to `false`. @@ -6807,47 +5911,7 @@ declare global { */ 'when'?: string | boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonTabButton { - 'badge': string; - 'badgeColor': string; - 'color': Color; - 'disabled': boolean; - 'href': string; - 'icon': string; - 'label': string; - 'mode': Mode; - /** - * If true, the tab button will be selected. Defaults to `false`. - */ - 'selected': boolean; - } - } - - interface HTMLIonTabButtonElement extends StencilComponents.IonTabButton, HTMLStencilElement {} - - var HTMLIonTabButtonElement: { - prototype: HTMLIonTabButtonElement; - new (): HTMLIonTabButtonElement; - }; - interface HTMLElementTagNameMap { - 'ion-tab-button': HTMLIonTabButtonElement; - } - interface ElementTagNameMap { - 'ion-tab-button': HTMLIonTabButtonElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-tab-button': JSXElements.IonTabButtonAttributes; - } - } - namespace JSXElements { export interface IonTabButtonAttributes extends HTMLAttributes { 'badge'?: string; 'badgeColor'?: string; @@ -6862,99 +5926,7 @@ declare global { */ 'selected'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonTab { - /** - * If true, sets the tab as the active tab. - */ - 'active': boolean; - /** - * The badge for the tab. - */ - 'badge': string; - /** - * The badge color for the tab button. - */ - 'badgeColor': Color; - /** - * hidden - */ - 'btnId': string; - /** - * The component to display inside of the tab. - */ - 'component': ComponentRef; - /** - * hidden - */ - 'delegate': FrameworkDelegate; - /** - * If true, the user cannot interact with the tab. Defaults to `false`. - */ - 'disabled': boolean; - /** - * Get the Id for the tab - */ - 'getTabId': () => string | null; - /** - * The URL which will be used as the `href` within this tab's `` anchor. - */ - 'href': string; - /** - * The icon for the tab. - */ - 'icon': string; - /** - * The label of the tab. - */ - 'label': string; - /** - * The name of the tab. - */ - 'name': string; - /** - * If true, the tab will be selected. Defaults to `false`. - */ - 'selected': boolean; - /** - * Set the active component for the tab - */ - 'setActive': () => Promise; - /** - * If true, the tab button is visible within the tabbar. Defaults to `true`. - */ - 'show': boolean; - /** - * If true, hide the tabs on child pages. - */ - 'tabsHideOnSubPages': boolean; - } - } - - interface HTMLIonTabElement extends StencilComponents.IonTab, HTMLStencilElement {} - - var HTMLIonTabElement: { - prototype: HTMLIonTabElement; - new (): HTMLIonTabElement; - }; - interface HTMLElementTagNameMap { - 'ion-tab': HTMLIonTabElement; - } - interface ElementTagNameMap { - 'ion-tab': HTMLIonTabElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-tab': JSXElements.IonTabAttributes; - } - } - namespace JSXElements { export interface IonTabAttributes extends HTMLAttributes { /** * If true, sets the tab as the active tab. @@ -7021,65 +5993,7 @@ declare global { */ 'tabsHideOnSubPages'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonTabbar { - 'color': Color; - /** - * If true, show the tab highlight bar under the selected tab. - */ - 'highlight': boolean; - /** - * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - */ - 'layout': TabbarLayout; - 'mode': Mode; - /** - * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - */ - 'placement': TabbarPlacement; - /** - * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen. - */ - 'scrollable': boolean; - /** - * The selected tab component - */ - 'selectedTab': HTMLIonTabElement; - /** - * The tabs to render - */ - 'tabs': HTMLIonTabElement[]; - /** - * If true, the tabbar will be translucent. Defaults to `false`. - */ - 'translucent': boolean; - } - } - - interface HTMLIonTabbarElement extends StencilComponents.IonTabbar, HTMLStencilElement {} - - var HTMLIonTabbarElement: { - prototype: HTMLIonTabbarElement; - new (): HTMLIonTabbarElement; - }; - interface HTMLElementTagNameMap { - 'ion-tabbar': HTMLIonTabbarElement; - } - interface ElementTagNameMap { - 'ion-tabbar': HTMLIonTabbarElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-tabbar': JSXElements.IonTabbarAttributes; - } - } - namespace JSXElements { export interface IonTabbarAttributes extends HTMLAttributes { 'color'?: Color; /** @@ -7116,85 +6030,7 @@ declare global { */ 'translucent'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonTabs { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - 'getRouteId': () => RouteID | undefined; - /** - * Get the currently selected tab - */ - 'getSelected': () => HTMLIonTabElement | undefined; - /** - * Get the tab at the given index - */ - 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; - /** - * A unique name for the tabs. - */ - 'name': string; - /** - * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen. - */ - 'scrollable': boolean; - /** - * Index or the Tab instance, of the tab to select. - */ - 'select': (tabOrIndex: number | HTMLIonTabElement) => Promise; - 'setRouteId': (id: string) => Promise; - /** - * If true, the tabbar will be hidden. Defaults to `false`. - */ - 'tabbarHidden': boolean; - /** - * If true, show the tab highlight bar under the selected tab. - */ - 'tabbarHighlight': boolean; - /** - * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - */ - 'tabbarLayout': TabbarLayout; - /** - * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - */ - 'tabbarPlacement': TabbarPlacement; - /** - * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. - */ - 'translucent': boolean; - /** - * If true, the tabs will use the router and `selectedTab` will not do anything. - */ - 'useRouter': boolean; - } - } - - interface HTMLIonTabsElement extends StencilComponents.IonTabs, HTMLStencilElement {} - - var HTMLIonTabsElement: { - prototype: HTMLIonTabsElement; - new (): HTMLIonTabsElement; - }; - interface HTMLElementTagNameMap { - 'ion-tabs': HTMLIonTabsElement; - } - interface ElementTagNameMap { - 'ion-tabs': HTMLIonTabsElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-tabs': JSXElements.IonTabsAttributes; - } - } - namespace JSXElements { export interface IonTabsAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7249,43 +6085,7 @@ declare global { */ 'useRouter'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonText { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonTextElement extends StencilComponents.IonText, HTMLStencilElement {} - - var HTMLIonTextElement: { - prototype: HTMLIonTextElement; - new (): HTMLIonTextElement; - }; - interface HTMLElementTagNameMap { - 'ion-text': HTMLIonTextElement; - } - interface ElementTagNameMap { - 'ion-text': HTMLIonTextElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-text': JSXElements.IonTextAttributes; - } - } - namespace JSXElements { export interface IonTextAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7296,111 +6096,7 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonTextarea { - /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - */ - 'autocapitalize': string; - /** - * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. - */ - 'autocomplete': string; - /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. - */ - 'autofocus': boolean; - /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. - */ - 'clearOnEdit': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. - */ - 'cols': number; - /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. - */ - 'debounce': number; - /** - * If true, the user cannot interact with the textarea. Defaults to `false`. - */ - 'disabled': boolean; - /** - * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. - */ - 'maxlength': number; - /** - * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. - */ - 'minlength': number; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * Instructional text that shows before the input has a value. - */ - 'placeholder': string; - /** - * If true, the user cannot modify the value. Defaults to `false`. - */ - 'readonly': boolean; - /** - * If true, the user must fill in a value before submitting a form. - */ - 'required': boolean; - /** - * The number of visible text lines for the control. - */ - 'rows': number; - /** - * If true, the element will have its spelling and grammar checked. Defaults to `false`. - */ - 'spellcheck': boolean; - /** - * The value of the textarea. - */ - 'value': string; - /** - * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. - */ - 'wrap': string; - } - } - - interface HTMLIonTextareaElement extends StencilComponents.IonTextarea, HTMLStencilElement {} - - var HTMLIonTextareaElement: { - prototype: HTMLIonTextareaElement; - new (): HTMLIonTextareaElement; - }; - interface HTMLElementTagNameMap { - 'ion-textarea': HTMLIonTextareaElement; - } - interface ElementTagNameMap { - 'ion-textarea': HTMLIonTextareaElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-textarea': JSXElements.IonTextareaAttributes; - } - } - namespace JSXElements { export interface IonTextareaAttributes extends HTMLAttributes { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. @@ -7499,76 +6195,11 @@ declare global { */ 'wrap'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonThumbnail { - - } - } - - interface HTMLIonThumbnailElement extends StencilComponents.IonThumbnail, HTMLStencilElement {} - - var HTMLIonThumbnailElement: { - prototype: HTMLIonThumbnailElement; - new (): HTMLIonThumbnailElement; - }; - interface HTMLElementTagNameMap { - 'ion-thumbnail': HTMLIonThumbnailElement; - } - interface ElementTagNameMap { - 'ion-thumbnail': HTMLIonThumbnailElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-thumbnail': JSXElements.IonThumbnailAttributes; - } - } - namespace JSXElements { export interface IonThumbnailAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonTitle { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonTitleElement extends StencilComponents.IonTitle, HTMLStencilElement {} - - var HTMLIonTitleElement: { - prototype: HTMLIonTitleElement; - new (): HTMLIonTitleElement; - }; - interface HTMLElementTagNameMap { - 'ion-title': HTMLIonTitleElement; - } - interface ElementTagNameMap { - 'ion-title': HTMLIonTitleElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-title': JSXElements.IonTitleAttributes; - } - } - namespace JSXElements { export interface IonTitleAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7579,137 +6210,11 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonToastController { - /** - * Create a toast overlay with toast options. - */ - 'create': (opts?: ToastOptions | undefined) => Promise; - /** - * Dismiss the open toast overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, toastId?: number) => Promise; - /** - * Get the most recently opened toast overlay. - */ - 'getTop': () => HTMLIonToastElement; - } - } - - interface HTMLIonToastControllerElement extends StencilComponents.IonToastController, HTMLStencilElement {} - - var HTMLIonToastControllerElement: { - prototype: HTMLIonToastControllerElement; - new (): HTMLIonToastControllerElement; - }; - interface HTMLElementTagNameMap { - 'ion-toast-controller': HTMLIonToastControllerElement; - } - interface ElementTagNameMap { - 'ion-toast-controller': HTMLIonToastControllerElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-toast-controller': JSXElements.IonToastControllerAttributes; - } - } - namespace JSXElements { export interface IonToastControllerAttributes extends HTMLAttributes { } - } -} - -declare global { - - namespace StencilComponents { - interface IonToast { - /** - * Text to display in the close button. - */ - 'closeButtonText': string; - /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. - */ - 'cssClass': string | string[]; - /** - * Dismiss the toast overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. - */ - 'duration': number; - /** - * Animation to use when the toast is presented. - */ - 'enterAnimation': AnimationBuilder; - 'keyboardClose': boolean; - /** - * Animation to use when the toast is dismissed. - */ - 'leaveAnimation': AnimationBuilder; - /** - * Message to be shown in the toast. - */ - 'message': string; - /** - * Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - 'overlayId': number; - /** - * The position of the toast on the screen. Possible values: "top", "middle", "bottom". - */ - 'position': string; - /** - * Present the toast overlay after it has been created. - */ - 'present': () => Promise; - /** - * If true, the close button will be displayed. Defaults to `false`. - */ - 'showCloseButton': boolean; - /** - * If true, the toast will be translucent. Defaults to `false`. - */ - 'translucent': boolean; - /** - * If true, the toast will animate. Defaults to `true`. - */ - 'willAnimate': boolean; - } - } - - interface HTMLIonToastElement extends StencilComponents.IonToast, HTMLStencilElement {} - - var HTMLIonToastElement: { - prototype: HTMLIonToastElement; - new (): HTMLIonToastElement; - }; - interface HTMLElementTagNameMap { - 'ion-toast': HTMLIonToastElement; - } - interface ElementTagNameMap { - 'ion-toast': HTMLIonToastElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-toast': JSXElements.IonToastAttributes; - } - } - namespace JSXElements { export interface IonToastAttributes extends HTMLAttributes { /** * Text to display in the close button. @@ -7778,59 +6283,7 @@ declare global { */ 'willAnimate'?: boolean; } - } -} - -declare global { - - namespace StencilComponents { - interface IonToggle { - /** - * If true, the toggle is selected. Defaults to `false`. - */ - 'checked': boolean; - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * Indicates that the user cannot interact with the control. - */ - 'disabled': boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * the value of the toggle. - */ - 'value': string; - } - } - - interface HTMLIonToggleElement extends StencilComponents.IonToggle, HTMLStencilElement {} - - var HTMLIonToggleElement: { - prototype: HTMLIonToggleElement; - new (): HTMLIonToggleElement; - }; - interface HTMLElementTagNameMap { - 'ion-toggle': HTMLIonToggleElement; - } - interface ElementTagNameMap { - 'ion-toggle': HTMLIonToggleElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-toggle': JSXElements.IonToggleAttributes; - } - } - namespace JSXElements { export interface IonToggleAttributes extends HTMLAttributes { /** * If true, the toggle is selected. Defaults to `false`. @@ -7873,43 +6326,7 @@ declare global { */ 'value'?: string; } - } -} - -declare global { - - namespace StencilComponents { - interface IonToolbar { - /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - } - } - - interface HTMLIonToolbarElement extends StencilComponents.IonToolbar, HTMLStencilElement {} - - var HTMLIonToolbarElement: { - prototype: HTMLIonToolbarElement; - new (): HTMLIonToolbarElement; - }; - interface HTMLElementTagNameMap { - 'ion-toolbar': HTMLIonToolbarElement; - } - interface ElementTagNameMap { - 'ion-toolbar': HTMLIonToolbarElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-toolbar': JSXElements.IonToolbarAttributes; - } - } - namespace JSXElements { export interface IonToolbarAttributes extends HTMLAttributes { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7920,68 +6337,7 @@ declare global { */ 'mode'?: Mode; } - } -} - -declare global { - - namespace StencilComponents { - interface IonVirtualScroll { - /** - * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. - */ - 'approxFooterHeight': number; - /** - * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. - */ - 'approxHeaderHeight': number; - /** - * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. - */ - 'approxItemHeight': number; - 'domRender': DomRenderFn; - /** - * Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. - */ - 'footerFn': HeaderFn; - /** - * Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. - */ - 'headerFn': HeaderFn; - 'itemHeight': ItemHeightFn; - /** - * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. - */ - 'items': any[]; - 'markDirty': (offset: number, len?: number) => void; - 'markDirtyTail': () => void; - 'nodeRender': ItemRenderFn; - 'positionForItem': (index: number) => number; - 'renderFooter': (item: any, index: number) => JSX.Element; - 'renderHeader': (item: any, index: number) => JSX.Element; - 'renderItem': (item: any, index: number) => JSX.Element; - } - } - - interface HTMLIonVirtualScrollElement extends StencilComponents.IonVirtualScroll, HTMLStencilElement {} - - var HTMLIonVirtualScrollElement: { - prototype: HTMLIonVirtualScrollElement; - new (): HTMLIonVirtualScrollElement; - }; - interface HTMLElementTagNameMap { - 'ion-virtual-scroll': HTMLIonVirtualScrollElement; - } - interface ElementTagNameMap { - 'ion-virtual-scroll': HTMLIonVirtualScrollElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-virtual-scroll': JSXElements.IonVirtualScrollAttributes; - } - } - namespace JSXElements { export interface IonVirtualScrollAttributes extends HTMLAttributes { /** * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. @@ -8015,8 +6371,219 @@ declare global { 'renderItem'?: (item: any, index: number) => JSX.Element; } } -} + interface HTMLElementTagNameMap { + 'ion-action-sheet-controller': HTMLIonActionSheetControllerElement + 'ion-action-sheet': HTMLIonActionSheetElement + 'ion-alert-controller': HTMLIonAlertControllerElement + 'ion-alert': HTMLIonAlertElement + 'ion-anchor': HTMLIonAnchorElement + 'ion-animation-controller': HTMLIonAnimationControllerElement + 'ion-app': HTMLIonAppElement + 'ion-avatar': HTMLIonAvatarElement + 'ion-back-button': HTMLIonBackButtonElement + 'ion-backdrop': HTMLIonBackdropElement + 'ion-badge': HTMLIonBadgeElement + 'ion-button': HTMLIonButtonElement + 'ion-buttons': HTMLIonButtonsElement + 'ion-card-content': HTMLIonCardContentElement + 'ion-card-header': HTMLIonCardHeaderElement + 'ion-card-subtitle': HTMLIonCardSubtitleElement + 'ion-card-title': HTMLIonCardTitleElement + 'ion-card': HTMLIonCardElement + 'ion-checkbox': HTMLIonCheckboxElement + 'ion-chip-button': HTMLIonChipButtonElement + 'ion-chip-icon': HTMLIonChipIconElement + 'ion-chip': HTMLIonChipElement + 'ion-col': HTMLIonColElement + 'ion-content': HTMLIonContentElement + 'ion-datetime': HTMLIonDatetimeElement + 'ion-fab-button': HTMLIonFabButtonElement + 'ion-fab-list': HTMLIonFabListElement + 'ion-fab': HTMLIonFabElement + 'ion-footer': HTMLIonFooterElement + 'ion-grid': HTMLIonGridElement + 'ion-header': HTMLIonHeaderElement + 'ion-hide-when': HTMLIonHideWhenElement + 'ion-img': HTMLIonImgElement + 'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement + 'ion-infinite-scroll': HTMLIonInfiniteScrollElement + 'ion-input': HTMLIonInputElement + 'ion-item-divider': HTMLIonItemDividerElement + 'ion-item-group': HTMLIonItemGroupElement + 'ion-item-option': HTMLIonItemOptionElement + 'ion-item-options': HTMLIonItemOptionsElement + 'ion-item-sliding': HTMLIonItemSlidingElement + 'ion-item': HTMLIonItemElement + 'ion-label': HTMLIonLabelElement + 'ion-list-header': HTMLIonListHeaderElement + 'ion-list': HTMLIonListElement + 'ion-loading-controller': HTMLIonLoadingControllerElement + 'ion-loading': HTMLIonLoadingElement + 'ion-menu-button': HTMLIonMenuButtonElement + 'ion-menu-controller': HTMLIonMenuControllerElement + 'ion-menu-toggle': HTMLIonMenuToggleElement + 'ion-menu': HTMLIonMenuElement + 'ion-modal-controller': HTMLIonModalControllerElement + 'ion-modal': HTMLIonModalElement + 'ion-nav-pop': HTMLIonNavPopElement + 'ion-nav-push': HTMLIonNavPushElement + 'ion-nav-set-root': HTMLIonNavSetRootElement + 'ion-nav': HTMLIonNavElement + 'ion-note': HTMLIonNoteElement + 'ion-picker-column': HTMLIonPickerColumnElement + 'ion-picker-controller': HTMLIonPickerControllerElement + 'ion-picker': HTMLIonPickerElement + 'ion-popover-controller': HTMLIonPopoverControllerElement + 'ion-popover': HTMLIonPopoverElement + 'ion-radio-group': HTMLIonRadioGroupElement + 'ion-radio': HTMLIonRadioElement + 'ion-range-knob': HTMLIonRangeKnobElement + 'ion-range': HTMLIonRangeElement + 'ion-refresher-content': HTMLIonRefresherContentElement + 'ion-refresher': HTMLIonRefresherElement + 'ion-reorder-group': HTMLIonReorderGroupElement + 'ion-reorder': HTMLIonReorderElement + 'ion-ripple-effect': HTMLIonRippleEffectElement + 'ion-route-redirect': HTMLIonRouteRedirectElement + 'ion-route': HTMLIonRouteElement + 'ion-router-outlet': HTMLIonRouterOutletElement + 'ion-router': HTMLIonRouterElement + 'ion-row': HTMLIonRowElement + 'ion-scroll': HTMLIonScrollElement + 'ion-searchbar': HTMLIonSearchbarElement + 'ion-segment-button': HTMLIonSegmentButtonElement + 'ion-segment': HTMLIonSegmentElement + 'ion-select-option': HTMLIonSelectOptionElement + 'ion-select-popover': HTMLIonSelectPopoverElement + 'ion-select': HTMLIonSelectElement + 'ion-show-when': HTMLIonShowWhenElement + 'ion-skeleton-text': HTMLIonSkeletonTextElement + 'ion-slide': HTMLIonSlideElement + 'ion-slides': HTMLIonSlidesElement + 'ion-spinner': HTMLIonSpinnerElement + 'ion-split-pane': HTMLIonSplitPaneElement + 'ion-tab-button': HTMLIonTabButtonElement + 'ion-tab': HTMLIonTabElement + 'ion-tabbar': HTMLIonTabbarElement + 'ion-tabs': HTMLIonTabsElement + 'ion-text': HTMLIonTextElement + 'ion-textarea': HTMLIonTextareaElement + 'ion-thumbnail': HTMLIonThumbnailElement + 'ion-title': HTMLIonTitleElement + 'ion-toast-controller': HTMLIonToastControllerElement + 'ion-toast': HTMLIonToastElement + 'ion-toggle': HTMLIonToggleElement + 'ion-toolbar': HTMLIonToolbarElement + 'ion-virtual-scroll': HTMLIonVirtualScrollElement + } + + interface ElementTagNameMap { + 'ion-action-sheet-controller': HTMLIonActionSheetControllerElement; + 'ion-action-sheet': HTMLIonActionSheetElement; + 'ion-alert-controller': HTMLIonAlertControllerElement; + 'ion-alert': HTMLIonAlertElement; + 'ion-anchor': HTMLIonAnchorElement; + 'ion-animation-controller': HTMLIonAnimationControllerElement; + 'ion-app': HTMLIonAppElement; + 'ion-avatar': HTMLIonAvatarElement; + 'ion-back-button': HTMLIonBackButtonElement; + 'ion-backdrop': HTMLIonBackdropElement; + 'ion-badge': HTMLIonBadgeElement; + 'ion-button': HTMLIonButtonElement; + 'ion-buttons': HTMLIonButtonsElement; + 'ion-card-content': HTMLIonCardContentElement; + 'ion-card-header': HTMLIonCardHeaderElement; + 'ion-card-subtitle': HTMLIonCardSubtitleElement; + 'ion-card-title': HTMLIonCardTitleElement; + 'ion-card': HTMLIonCardElement; + 'ion-checkbox': HTMLIonCheckboxElement; + 'ion-chip-button': HTMLIonChipButtonElement; + 'ion-chip-icon': HTMLIonChipIconElement; + 'ion-chip': HTMLIonChipElement; + 'ion-col': HTMLIonColElement; + 'ion-content': HTMLIonContentElement; + 'ion-datetime': HTMLIonDatetimeElement; + 'ion-fab-button': HTMLIonFabButtonElement; + 'ion-fab-list': HTMLIonFabListElement; + 'ion-fab': HTMLIonFabElement; + 'ion-footer': HTMLIonFooterElement; + 'ion-grid': HTMLIonGridElement; + 'ion-header': HTMLIonHeaderElement; + 'ion-hide-when': HTMLIonHideWhenElement; + 'ion-img': HTMLIonImgElement; + 'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement; + 'ion-infinite-scroll': HTMLIonInfiniteScrollElement; + 'ion-input': HTMLIonInputElement; + 'ion-item-divider': HTMLIonItemDividerElement; + 'ion-item-group': HTMLIonItemGroupElement; + 'ion-item-option': HTMLIonItemOptionElement; + 'ion-item-options': HTMLIonItemOptionsElement; + 'ion-item-sliding': HTMLIonItemSlidingElement; + 'ion-item': HTMLIonItemElement; + 'ion-label': HTMLIonLabelElement; + 'ion-list-header': HTMLIonListHeaderElement; + 'ion-list': HTMLIonListElement; + 'ion-loading-controller': HTMLIonLoadingControllerElement; + 'ion-loading': HTMLIonLoadingElement; + 'ion-menu-button': HTMLIonMenuButtonElement; + 'ion-menu-controller': HTMLIonMenuControllerElement; + 'ion-menu-toggle': HTMLIonMenuToggleElement; + 'ion-menu': HTMLIonMenuElement; + 'ion-modal-controller': HTMLIonModalControllerElement; + 'ion-modal': HTMLIonModalElement; + 'ion-nav-pop': HTMLIonNavPopElement; + 'ion-nav-push': HTMLIonNavPushElement; + 'ion-nav-set-root': HTMLIonNavSetRootElement; + 'ion-nav': HTMLIonNavElement; + 'ion-note': HTMLIonNoteElement; + 'ion-picker-column': HTMLIonPickerColumnElement; + 'ion-picker-controller': HTMLIonPickerControllerElement; + 'ion-picker': HTMLIonPickerElement; + 'ion-popover-controller': HTMLIonPopoverControllerElement; + 'ion-popover': HTMLIonPopoverElement; + 'ion-radio-group': HTMLIonRadioGroupElement; + 'ion-radio': HTMLIonRadioElement; + 'ion-range-knob': HTMLIonRangeKnobElement; + 'ion-range': HTMLIonRangeElement; + 'ion-refresher-content': HTMLIonRefresherContentElement; + 'ion-refresher': HTMLIonRefresherElement; + 'ion-reorder-group': HTMLIonReorderGroupElement; + 'ion-reorder': HTMLIonReorderElement; + 'ion-ripple-effect': HTMLIonRippleEffectElement; + 'ion-route-redirect': HTMLIonRouteRedirectElement; + 'ion-route': HTMLIonRouteElement; + 'ion-router-outlet': HTMLIonRouterOutletElement; + 'ion-router': HTMLIonRouterElement; + 'ion-row': HTMLIonRowElement; + 'ion-scroll': HTMLIonScrollElement; + 'ion-searchbar': HTMLIonSearchbarElement; + 'ion-segment-button': HTMLIonSegmentButtonElement; + 'ion-segment': HTMLIonSegmentElement; + 'ion-select-option': HTMLIonSelectOptionElement; + 'ion-select-popover': HTMLIonSelectPopoverElement; + 'ion-select': HTMLIonSelectElement; + 'ion-show-when': HTMLIonShowWhenElement; + 'ion-skeleton-text': HTMLIonSkeletonTextElement; + 'ion-slide': HTMLIonSlideElement; + 'ion-slides': HTMLIonSlidesElement; + 'ion-spinner': HTMLIonSpinnerElement; + 'ion-split-pane': HTMLIonSplitPaneElement; + 'ion-tab-button': HTMLIonTabButtonElement; + 'ion-tab': HTMLIonTabElement; + 'ion-tabbar': HTMLIonTabbarElement; + 'ion-tabs': HTMLIonTabsElement; + 'ion-text': HTMLIonTextElement; + 'ion-textarea': HTMLIonTextareaElement; + 'ion-thumbnail': HTMLIonThumbnailElement; + 'ion-title': HTMLIonTitleElement; + 'ion-toast-controller': HTMLIonToastControllerElement; + 'ion-toast': HTMLIonToastElement; + 'ion-toggle': HTMLIonToggleElement; + 'ion-toolbar': HTMLIonToolbarElement; + 'ion-virtual-scroll': HTMLIonVirtualScrollElement; + } +} declare global { namespace JSX { interface StencilJSX {} } } export declare function defineCustomElements(window: any): void; \ No newline at end of file diff --git a/core/src/components/datetime/datetime-util.ts b/core/src/components/datetime/datetime-util.ts index b73e60c9b0..fb3310c958 100644 --- a/core/src/components/datetime/datetime-util.ts +++ b/core/src/components/datetime/datetime-util.ts @@ -173,7 +173,7 @@ export function isLeapYear(year: number): boolean { const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; -export function parseDate(val: any): DatetimeData | null { +export function parseDate(val: string | undefined): DatetimeData | null { // manually parse IS0 cuz Date.parse cannot be trusted // ISO 8601 format: 1994-12-15T13:47:20Z let parse: any[] | null = null; @@ -254,8 +254,9 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean { // merge new values from the picker's selection // to the existing DatetimeData values - Object.assign(existingData, newData); - + for (const key of Object.keys(newData)) { + existingData[key] = newData[key].value; + } return true; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index cbd6cc11fa..cb7f64cd71 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -163,10 +163,7 @@ export class Datetime { * Any additional options that the picker interface can accept. * See the [Picker API docs](../../picker/Picker) for the picker options. */ - @Prop() pickerOptions: PickerOptions = { - buttons: [], - columns: [] - }; + @Prop() pickerOptions?: PickerOptions; /** * The text to display when there's no date selected yet. @@ -186,6 +183,7 @@ export class Datetime { protected valueChanged() { this.updateValue(); this.emitStyle(); + this.ionChange.emit(); } /** @@ -193,6 +191,11 @@ export class Datetime { */ @Event() ionCancel!: EventEmitter; + /** + * Emitted when the checked property has changed. + */ + @Event() ionChange!: EventEmitter; + /** * Emitted when the styles change. */ @@ -232,7 +235,23 @@ export class Datetime { this.updateText(); } - private buildPicker(pickerOptions: PickerOptions) { + private async open() { + if (this.disabled) { + return; + } + + const pickerOptions = this.generatePicketOptions(); + this.picker = await this.pickerCtrl.create(pickerOptions); + this.validate(); + await this.picker!.present(); + } + + private generatePicketOptions(): PickerOptions { + const pickerOptions: PickerOptions = { + ...this.pickerOptions, + columns: this.generateColumns() + }; + // If the user has not passed in picker buttons, // add a cancel and ok button to the picker const buttons = pickerOptions.buttons; @@ -245,101 +264,77 @@ export class Datetime { }, { text: this.doneText, - handler: (data: any) => this.value = data, - }]; + handler: (data: any) => this.value = data + } + ]; } - - pickerOptions.columns = this.generateColumns(); - - const picker = this.pickerCtrl.create(pickerOptions); - - return picker; - } - - private async open() { - // TODO check this.isFocus() || this.disabled - if (this.disabled) { - return; - } - const pickerOptions = { ...this.pickerOptions }; - this.picker = await this.buildPicker(pickerOptions); - this.validate(); - await this.picker!.present(); + return pickerOptions; } private generateColumns(): PickerColumn[] { - let columns: PickerColumn[] = []; - // if a picker format wasn't provided, then fallback // to use the display format let template = this.pickerFormat || this.displayFormat || DEFAULT_FORMAT; + if (!template) { + return []; + } + // make sure we've got up to date sizing information + this.calcMinMax(); - if (template) { - // make sure we've got up to date sizing information - this.calcMinMax(); + // does not support selecting by day name + // automaticallly remove any day name formats + template = template.replace('DDDD', '{~}').replace('DDD', '{~}'); + if (template.indexOf('D') === -1) { + // there is not a day in the template + // replace the day name with a numeric one if it exists + template = template.replace('{~}', 'D'); + } + // make sure no day name replacer is left in the string + template = template.replace(/{~}/g, ''); - // does not support selecting by day name - // automaticallly remove any day name formats - template = template.replace('DDDD', '{~}').replace('DDD', '{~}'); - if (template.indexOf('D') === -1) { - // there is not a day in the template - // replace the day name with a numeric one if it exists - template = template.replace('{~}', 'D'); - } - // make sure no day name replacer is left in the string - template = template.replace(/{~}/g, ''); + // parse apart the given template into an array of "formats" + const columns = parseTemplate(template).map((format: any) => { + // loop through each format in the template + // create a new picker column to build up with data + const key = convertFormatToKey(format)!; + let values: any[]; - // parse apart the given template into an array of "formats" - parseTemplate(template).forEach((format: any) => { - // loop through each format in the template - // create a new picker column to build up with data - const key = convertFormatToKey(format)!; - let values: any[]; + // check if they have exact values to use for this date part + // otherwise use the default date part values + values = this[key + 'Values'] + ? convertToArrayOfNumbers(this[key + 'Values'], key) + : dateValueRange(format, this.datetimeMin, this.datetimeMax); - // check if they have exact values to use for this date part - // otherwise use the default date part values - values = this[key + 'Values'] - ? convertToArrayOfNumbers(this[key + 'Values'], key) - : dateValueRange(format, this.datetimeMin, this.datetimeMax); - - const column: PickerColumn = { - name: key, - selectedIndex: 0, - options: values.map(val => { - return { - value: val, - text: renderTextFormat(format, val, null, this.locale), - }; - }) + const colOptions = values.map(val => { + return { + value: val, + text: renderTextFormat(format, val, null, this.locale), }; - - // cool, we've loaded up the columns with options - // preselect the option for this column - const optValue = getValueFromFormat(this.datetimeValue, format); - const selectedIndex = column.options.findIndex(opt => opt.value === optValue); - if (selectedIndex >= 0) { - // set the select index for this column's options - column.selectedIndex = selectedIndex; - } - - // add our newly created column to the picker - columns.push(column); }); - // Normalize min/max - const min = this.datetimeMin; - const max = this.datetimeMax; - ['month', 'day', 'hour', 'minute'] - .filter(name => !columns.find(column => column.name === name)) - .forEach(name => { - min[name] = 0; - max[name] = 0; - }); + // cool, we've loaded up the columns with options + // preselect the option for this column + const optValue = getValueFromFormat(this.datetimeValue, format); + const selectedIndex = colOptions.findIndex(opt => opt.value === optValue); - columns = this.divyColumns(columns); - } + return { + name: key, + selectedIndex: selectedIndex >= 0 ? selectedIndex : 0, + options: colOptions + }; + }); - return columns; + // Normalize min/max + const min = this.datetimeMin; + const max = this.datetimeMax; + ['month', 'day', 'hour', 'minute'] + .filter(name => !columns.find(column => column.name === name)) + .forEach(name => { + min[name] = 0; + max[name] = 0; + }); + + return divyColumns(columns); } private validate() { @@ -484,42 +479,6 @@ export class Datetime { return 0; } - private divyColumns(columns: PickerColumn[]): PickerColumn[] { - const pickerColumns = columns; - const columnsWidth: number[] = []; - let col: PickerColumn; - let width: number; - for (let i = 0; i < pickerColumns.length; i++) { - col = pickerColumns[i]; - columnsWidth.push(0); - - for (const option of col.options) { - width = option.text!.length; - if (width > columnsWidth[i]) { - columnsWidth[i] = width; - } - } - } - - if (columnsWidth.length === 2) { - width = Math.max(columnsWidth[0], columnsWidth[1]); - pickerColumns[0].align = 'right'; - pickerColumns[1].align = 'left'; - pickerColumns[0].optionsWidth = pickerColumns[1].optionsWidth = `${width * 17}px`; - - } else if (columnsWidth.length === 3) { - width = Math.max(columnsWidth[0], columnsWidth[2]); - pickerColumns[0].align = 'right'; - pickerColumns[1].columnWidth = `${columnsWidth[1] * 17}px`; - pickerColumns[0].optionsWidth = pickerColumns[2].optionsWidth = `${width * 17}px`; - pickerColumns[2].align = 'left'; - } - - return columns; - } - - /** - */ private updateText() { // create the text of the formatted data const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT; @@ -527,8 +486,6 @@ export class Datetime { this.text = renderDatetime(template, this.datetimeValue, this.locale); } - /** - */ hasValue(): boolean { const val = this.datetimeValue; return val @@ -580,6 +537,38 @@ export class Datetime { } } +function divyColumns(columns: PickerColumn[]): PickerColumn[] { + const columnsWidth: number[] = []; + let col: PickerColumn; + let width: number; + for (let i = 0; i < columns.length; i++) { + col = columns[i]; + columnsWidth.push(0); + + for (const option of col.options) { + width = option.text!.length; + if (width > columnsWidth[i]) { + columnsWidth[i] = width; + } + } + } + + if (columnsWidth.length === 2) { + width = Math.max(columnsWidth[0], columnsWidth[1]); + columns[0].align = 'right'; + columns[1].align = 'left'; + columns[0].optionsWidth = columns[1].optionsWidth = `${width * 17}px`; + + } else if (columnsWidth.length === 3) { + width = Math.max(columnsWidth[0], columnsWidth[2]); + columns[0].align = 'right'; + columns[1].columnWidth = `${columnsWidth[1] * 17}px`; + columns[0].optionsWidth = columns[2].optionsWidth = `${width * 17}px`; + columns[2].align = 'left'; + } + return columns; +} + let datetimeIds = 0; const DEFAULT_FORMAT = 'MMM D, YYYY'; diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index ecc0086aa1..e42fe6e189 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -1,9 +1,8 @@ -import { Component, Element, Prop, QueueApi } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Prop, QueueApi } from '@stencil/core'; import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface'; import { hapticSelectionChanged } from '../../utils'; import { clamp } from '../../utils/helpers'; -import { createThemedClasses } from '../../utils/theme'; /** @hidden */ @Component({ @@ -14,7 +13,6 @@ export class PickerColumnCmp { private bounceFrom!: number; private lastIndex?: number; - private lastTempIndex?: number; private minY!: number; private maxY!: number; private optHeight = 0; @@ -22,6 +20,7 @@ export class PickerColumnCmp { private scaleFactor = 1; private velocity = 0; private y = 0; + private optsEl?: HTMLElement; private gesture?: Gesture; private rafId: any; @@ -31,6 +30,8 @@ export class PickerColumnCmp { @Prop() col!: PickerColumn; + @Event() ionChange!: EventEmitter; + componentWillLoad() { let pickerRotateFactor = 0; let pickerScaleFactor = 0.81; @@ -46,7 +47,7 @@ export class PickerColumnCmp { async componentDidLoad() { // get the scrollable element within the column - const colEl = this.el.querySelector('.picker-opts')!; + const colEl = this.optsEl!; // get the height of one option this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0); @@ -69,39 +70,35 @@ export class PickerColumnCmp { private setSelected(selectedIndex: number, duration: number) { // if there is a selected index, then figure out it's y position // if there isn't a selected index, then just use the top y position - const y = (selectedIndex > -1) ? ((selectedIndex * this.optHeight) * -1) : 0; + const y = (selectedIndex > -1) ? -(selectedIndex * this.optHeight) : 0; this.velocity = 0; // set what y position we're at cancelAnimationFrame(this.rafId); - this.update(y, duration, true, true); + this.update(y, duration, true); + this.ionChange.emit(); } - private update(y: number, duration: number, saveY: boolean, emitChange: boolean) { + private update(y: number, duration: number, saveY: boolean) { // ensure we've got a good round number :) - y = Math.round(y); - let translateY = 0; let translateZ = 0; - - const parent = this.el.querySelector('.picker-opts')!; - const children = parent.children; - const length = children.length; - const selectedIndex = this.col.selectedIndex = Math.min(Math.max(Math.round(-y / this.optHeight), 0), length - 1); - + const { col, rotateFactor } = this; + const selectedIndex = col.selectedIndex = this.indexForY(-y); const durationStr = (duration === 0) ? null : duration + 'ms'; const scaleStr = `scale(${this.scaleFactor})`; - for (let i = 0; i < length; i++) { + const children = this.optsEl!.children; + for (let i = 0; i < children.length; i++) { const button = children[i] as HTMLElement; - const opt = this.col.options[i]; + const opt = col.options[i]; const optOffset = (i * this.optHeight) + y; let visible = true; let transform = ''; - if (this.rotateFactor !== 0) { - const rotateX = optOffset * this.rotateFactor; + if (rotateFactor !== 0) { + const rotateX = optOffset * rotateFactor; if (Math.abs(rotateX) > 90) { visible = false; } else { @@ -152,32 +149,15 @@ export class PickerColumnCmp { this.y = y; } - if (emitChange) { - if (this.lastIndex === undefined) { - // have not set a last index yet - this.lastIndex = this.col.selectedIndex; - - } else if (this.lastIndex !== this.col.selectedIndex) { - // new selected index has changed from the last index - // update the lastIndex and emit that it has changed - this.lastIndex = this.col.selectedIndex; - // TODO ionChange event - // var ionChange = this.ionChange; - // if (ionChange.observers.length > 0) { - // this._zone.run(ionChange.emit.bind(ionChange, this.col.options[this.col.selectedIndex])); - // } - } + if (this.lastIndex !== selectedIndex) { + // have not set a last index yet + hapticSelectionChanged(); + this.lastIndex = selectedIndex; } } private decelerate() { - let y = 0; - - if (isNaN(this.y) || !this.optHeight) { - // fallback in case numbers get outta wack - this.update(y, 0, true, true); - - } else if (Math.abs(this.velocity) > 0) { + if (this.velocity !== 0) { // still decelerating this.velocity *= DECELERATION_FRICTION; @@ -186,7 +166,7 @@ export class PickerColumnCmp { ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1); - y = Math.round(this.y + this.velocity); + let y = this.y + this.velocity; if (y > this.minY) { // whoops, it's trying to scroll up farther than the options we have! @@ -199,13 +179,13 @@ export class PickerColumnCmp { this.velocity = 0; } - const notLockedIn = (y % this.optHeight !== 0 || Math.abs(this.velocity) > 1); - - this.update(y, 0, true, !notLockedIn); - + this.update(y, 0, true); + const notLockedIn = (Math.round(y) % this.optHeight !== 0) || (Math.abs(this.velocity) > 1); if (notLockedIn) { // isn't locked in yet, keep decelerating until it is this.rafId = requestAnimationFrame(() => this.decelerate()); + } else { + this.ionChange.emit(); } } else if (this.y % this.optHeight !== 0) { @@ -217,14 +197,10 @@ export class PickerColumnCmp { this.decelerate(); } + } - const currentIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0); - - if (currentIndex !== this.lastTempIndex) { - // Trigger a haptic event for physical feedback that the index has changed - hapticSelectionChanged(); - } - this.lastTempIndex = currentIndex; + private indexForY(y: number) { + return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1); } // TODO should this check disabled? @@ -250,8 +226,8 @@ export class PickerColumnCmp { } } - this.minY = (minY * this.optHeight * -1); - this.maxY = (maxY * this.optHeight * -1); + this.minY = -(minY * this.optHeight); + this.maxY = -(maxY * this.optHeight); } private onDragMove(detail: GestureDetail) { @@ -277,22 +253,17 @@ export class PickerColumnCmp { this.bounceFrom = 0; } - this.update(y, 0, false, false); - - const currentIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0); - if (currentIndex !== this.lastTempIndex) { - this.lastTempIndex = currentIndex; - } + this.update(y, 0, false); } private onDragEnd(detail: GestureDetail) { if (this.bounceFrom > 0) { // bounce back up - this.update(this.minY, 100, true, true); + this.update(this.minY, 100, true); return; } else if (this.bounceFrom < 0) { // bounce back down - this.update(this.maxY, 100, true, true); + this.update(this.maxY, 100, true); return; } @@ -304,10 +275,7 @@ export class PickerColumnCmp { } } else { - if (Math.abs(detail.deltaY) > 3) { - const y = this.y + detail.deltaY; - this.update(y, 0, true, true); - } + this.y += detail.deltaY; this.decelerate(); } } @@ -327,15 +295,14 @@ export class PickerColumnCmp { if (this.col.prevSelected !== selectedIndex) { const y = (selectedIndex * this.optHeight) * -1; this.velocity = 0; - this.update(y, 150, true, false); + this.update(y, 150, true); } } hostData() { return { class: { - ...createThemedClasses(this.mode, 'picker-col'), - + 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, @@ -347,14 +314,6 @@ export class PickerColumnCmp { render() { const col = this.col; - - const options = col.options.map(o => { - return (typeof o === 'string') - ? { text: o } - : o; - }) - .filter(o => o !== null); - const Button = 'button' as any; return [ col.prefix && ( @@ -362,8 +321,11 @@ export class PickerColumnCmp { {col.prefix} ), -
- {options.map((o, index) => +
this.optsEl = el }> + { col.options.map((o, index) =>