From f204d4e8fbc8bf7838c2fe679cd3022fa22fabad Mon Sep 17 00:00:00 2001 From: Josh Thomas Date: Fri, 24 Aug 2018 11:17:07 -0500 Subject: [PATCH] chore(): revert to using components.d.ts from latest stencil. --- angular/src/directives/proxies.ts | 894 +++-- core/package.json | 2 +- core/src/components.d.ts | 6192 ++++++++++++++++++++++++++++ core/src/generated.d.ts | 6196 ----------------------------- core/src/interface.d.ts | 4 +- 5 files changed, 6717 insertions(+), 6571 deletions(-) create mode 100644 core/src/components.d.ts delete mode 100644 core/src/generated.d.ts diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index f68a32cd16..a380b74c24 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1,23 +1,37 @@ /* auto-generated angular directive proxies */ /* tslint:disable */ -import { Directive, ElementRef, EventEmitter } from '@angular/core'; -import { LocalElementInterfaces } from '@ionic/core'; -type StencilComponents = LocalElementInterfaces[T]; -export function proxyInputs(instance: any, el: ElementRef, props: string[]) { +import { fromEvent } from 'rxjs'; +import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, ViewEncapsulation } from '@angular/core'; + +type StencilComponents = StencilElementInterfaces[T]; + +type PromisifyType = T extends Promise ? T : Promise; +type PromisifyProp = + T extends () => infer R ? () => PromisifyType : + T extends (a: infer A) => infer R ? (a: A) => PromisifyType : + T extends (a: infer A, b: infer B) => infer R ? (a: A, b: B) => PromisifyType : + T extends (a: infer A, b: infer B, c: infer B) => infer R ? (a: A, b: B) => PromisifyType : + T extends (...a: any[]) => infer R ? (...a: any[]) => PromisifyType : + T; + +type Promisify = { + [P in keyof T]: PromisifyProp; +} + +export function proxyInputs(instance: any, el: any, props: string[]) { props.forEach(propName => { Object.defineProperty(instance, propName, { - get: () => el.nativeElement[propName], set: (val: any) => el.nativeElement[propName] = val + get: () => el[propName], set: (val: any) => el[propName] = val }); }); } -export function proxyOutputs(instance: any, events: string[]) { - events.forEach(eventName => instance[eventName] = new EventEmitter()); +export function proxyOutputs(instance: any, el: any, events: string[]) { + events.forEach(eventName => instance[eventName] = fromEvent(el, eventName)); } -export function proxyMethods(instance: any, ref: ElementRef, methods: string[]) { - const el = ref.nativeElement; +export function proxyMethods(instance: any, el: any, methods: string[]) { methods.forEach(methodName => { Object.defineProperty(instance, methodName, { get: function() { @@ -31,732 +45,868 @@ export function proxyMethods(instance: any, ref: ElementRef, methods: string[]) } -export declare interface App extends StencilComponents<'IonApp'> {} -@Directive({ selector: 'ion-app' }) +export declare interface App extends Promisify> {} +@Component({ selector: 'ion-app', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class App { } -export declare interface Avatar extends StencilComponents<'IonAvatar'> {} -@Directive({ selector: 'ion-avatar' }) +export declare interface Avatar extends Promisify> {} +@Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Avatar { } -export declare interface BackButton extends StencilComponents<'IonBackButton'> {} -@Directive({ selector: 'ion-back-button', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] }) +export declare interface BackButton extends Promisify> {} +@Component({ selector: 'ion-back-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] }) export class BackButton { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'defaultHref', 'icon', 'text']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'defaultHref', 'icon', 'text']); } } -export declare interface Backdrop extends StencilComponents<'IonBackdrop'> {} -@Directive({ selector: 'ion-backdrop', inputs: ['visible', 'tappable', 'stopPropagation'], outputs: ['ionBackdropTap'] }) +export declare interface Backdrop extends Promisify> {} +@Component({ selector: 'ion-backdrop', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['visible', 'tappable', 'stopPropagation'] }) export class Backdrop { - ionBackdropTap: EventEmitter; + ionBackdropTap: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['visible', 'tappable', 'stopPropagation']); - proxyOutputs(this, ['ionBackdropTap']); + const el = r.nativeElement; + proxyInputs(this, el, ['visible', 'tappable', 'stopPropagation']); + proxyOutputs(this, el, ['ionBackdropTap']); } } -export declare interface Badge extends StencilComponents<'IonBadge'> {} -@Directive({ selector: 'ion-badge', inputs: ['color', 'mode'] }) +export declare interface Badge extends Promisify> {} +@Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Badge { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface Button extends StencilComponents<'IonButton'> {} -@Directive({ selector: 'ion-button', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type'], outputs: ['ionFocus', 'ionBlur'] }) +export declare interface Button extends Promisify> {} +@Component({ selector: 'ion-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type'] }) export class Button { - ionFocus: EventEmitter; - ionBlur: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type']); - proxyOutputs(this, ['ionFocus', 'ionBlur']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type']); + proxyOutputs(this, el, ['ionFocus', 'ionBlur']); } } -export declare interface Buttons extends StencilComponents<'IonButtons'> {} -@Directive({ selector: 'ion-buttons' }) +export declare interface Buttons extends Promisify> {} +@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Buttons { } -export declare interface Card extends StencilComponents<'IonCard'> {} -@Directive({ selector: 'ion-card', inputs: ['color', 'mode'] }) +export declare interface Card extends Promisify> {} +@Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Card { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface CardContent extends StencilComponents<'IonCardContent'> {} -@Directive({ selector: 'ion-card-content', inputs: ['mode'] }) +export declare interface CardContent extends Promisify> {} +@Component({ selector: 'ion-card-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode'] }) export class CardContent { + constructor(r: ElementRef) { - proxyInputs(this, r, ['mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['mode']); } } -export declare interface CardHeader extends StencilComponents<'IonCardHeader'> {} -@Directive({ selector: 'ion-card-header', inputs: ['color', 'mode', 'translucent'] }) +export declare interface CardHeader extends Promisify> {} +@Component({ selector: 'ion-card-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'translucent'] }) export class CardHeader { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'translucent']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'translucent']); } } -export declare interface CardSubtitle extends StencilComponents<'IonCardSubtitle'> {} -@Directive({ selector: 'ion-card-subtitle', inputs: ['color', 'mode'] }) +export declare interface CardSubtitle extends Promisify> {} +@Component({ selector: 'ion-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class CardSubtitle { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface CardTitle extends StencilComponents<'IonCardTitle'> {} -@Directive({ selector: 'ion-card-title', inputs: ['color', 'mode'] }) +export declare interface CardTitle extends Promisify> {} +@Component({ selector: 'ion-card-title', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class CardTitle { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface Checkbox extends StencilComponents<'IonCheckbox'> {} -@Directive({ selector: 'ion-checkbox', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'], outputs: ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle'] }) +export declare interface Checkbox extends Promisify> {} +@Component({ selector: 'ion-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'] }) export class Checkbox { - ionChange: EventEmitter; - ionFocus: EventEmitter; - ionBlur: EventEmitter; - ionStyle: EventEmitter; + ionChange: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'name', 'checked', 'disabled', 'value']); - proxyOutputs(this, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'name', 'checked', 'disabled', 'value']); + proxyOutputs(this, el, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']); } } -export declare interface Chip extends StencilComponents<'IonChip'> {} -@Directive({ selector: 'ion-chip', inputs: ['color', 'mode'] }) +export declare interface Chip extends Promisify> {} +@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Chip { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface ChipButton extends StencilComponents<'IonChipButton'> {} -@Directive({ selector: 'ion-chip-button', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] }) +export declare interface ChipButton extends Promisify> {} +@Component({ selector: 'ion-chip-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] }) export class ChipButton { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'disabled', 'fill', 'href']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'disabled', 'fill', 'href']); } } -export declare interface ChipIcon extends StencilComponents<'IonChipIcon'> {} -@Directive({ selector: 'ion-chip-icon', inputs: ['color', 'mode', 'fill', 'name', 'src'] }) +export declare interface ChipIcon extends Promisify> {} +@Component({ selector: 'ion-chip-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'fill', 'name', 'src'] }) export class ChipIcon { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'fill', 'name', 'src']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'fill', 'name', 'src']); } } -export declare interface Col extends StencilComponents<'IonCol'> {} -@Directive({ selector: 'ion-col', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl'] }) +export declare interface Col extends Promisify> {} +@Component({ selector: 'ion-col', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl'] }) export class Col { + constructor(r: ElementRef) { - proxyInputs(this, r, ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']); + const el = r.nativeElement; + proxyInputs(this, el, ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']); } } -export declare interface Content extends StencilComponents<'IonContent'> {} -@Directive({ selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents'], outputs: ['ionScrollStart', 'ionScroll', 'ionScrollEnd'] }) +export declare interface Content extends Promisify> {} +@Component({ selector: 'ion-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents'] }) export class Content { - ionScrollStart: EventEmitter; - ionScroll: EventEmitter; - ionScrollEnd: EventEmitter; + ionScrollStart: EventEmitter; + ionScroll: EventEmitter; + ionScrollEnd: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']); - proxyInputs(this, r, ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents']); - proxyOutputs(this, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']); + const el = r.nativeElement; + proxyMethods(this, el, ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']); + proxyInputs(this, el, ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents']); + proxyOutputs(this, el, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']); } } -export declare interface Datetime extends StencilComponents<'IonDatetime'> {} -@Directive({ selector: 'ion-datetime', inputs: ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'], outputs: ['ionCancel', 'ionChange', 'ionStyle'] }) +export declare interface Datetime extends Promisify> {} +@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'] }) export class Datetime { - ionCancel: EventEmitter; - ionChange: EventEmitter; - ionStyle: EventEmitter; + ionCancel: EventEmitter; + ionChange: EventEmitter; + ionStyle: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['open']); - proxyInputs(this, r, ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']); - proxyOutputs(this, ['ionCancel', 'ionChange', 'ionStyle']); + const el = r.nativeElement; + proxyMethods(this, el, ['open']); + proxyInputs(this, el, ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']); + proxyOutputs(this, el, ['ionCancel', 'ionChange', 'ionStyle']); } } -export declare interface Fab extends StencilComponents<'IonFab'> {} -@Directive({ selector: 'ion-fab', inputs: ['horizontal', 'vertical', 'edge', 'activated'] }) +export declare interface Fab extends Promisify> {} +@Component({ selector: 'ion-fab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['horizontal', 'vertical', 'edge', 'activated'] }) export class Fab { + constructor(r: ElementRef) { - proxyMethods(this, r, ['close']); - proxyInputs(this, r, ['horizontal', 'vertical', 'edge', 'activated']); + const el = r.nativeElement; + proxyMethods(this, el, ['close']); + proxyInputs(this, el, ['horizontal', 'vertical', 'edge', 'activated']); } } -export declare interface FabButton extends StencilComponents<'IonFabButton'> {} -@Directive({ selector: 'ion-fab-button', inputs: ['color', 'mode', 'activated', 'disabled', 'href', 'translucent', 'show'] }) +export declare interface FabButton extends Promisify> {} +@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'activated', 'disabled', 'href', 'translucent', 'show'] }) export class FabButton { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'activated', 'disabled', 'href', 'translucent', 'show']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'activated', 'disabled', 'href', 'translucent', 'show']); } } -export declare interface FabList extends StencilComponents<'IonFabList'> {} -@Directive({ selector: 'ion-fab-list', inputs: ['activated', 'side'] }) +export declare interface FabList extends Promisify> {} +@Component({ selector: 'ion-fab-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['activated', 'side'] }) export class FabList { + constructor(r: ElementRef) { - proxyInputs(this, r, ['activated', 'side']); + const el = r.nativeElement; + proxyInputs(this, el, ['activated', 'side']); } } -export declare interface Footer extends StencilComponents<'IonFooter'> {} -@Directive({ selector: 'ion-footer', inputs: ['mode', 'translucent'] }) +export declare interface Footer extends Promisify> {} +@Component({ selector: 'ion-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'translucent'] }) export class Footer { + constructor(r: ElementRef) { - proxyInputs(this, r, ['mode', 'translucent']); + const el = r.nativeElement; + proxyInputs(this, el, ['mode', 'translucent']); } } -export declare interface Grid extends StencilComponents<'IonGrid'> {} -@Directive({ selector: 'ion-grid', inputs: ['fixed'] }) +export declare interface Grid extends Promisify> {} +@Component({ selector: 'ion-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['fixed'] }) export class Grid { + constructor(r: ElementRef) { - proxyInputs(this, r, ['fixed']); + const el = r.nativeElement; + proxyInputs(this, el, ['fixed']); } } -export declare interface Header extends StencilComponents<'IonHeader'> {} -@Directive({ selector: 'ion-header', inputs: ['mode', 'translucent'] }) +export declare interface Header extends Promisify> {} +@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'translucent'] }) export class Header { + constructor(r: ElementRef) { - proxyInputs(this, r, ['mode', 'translucent']); + const el = r.nativeElement; + proxyInputs(this, el, ['mode', 'translucent']); } } -export declare interface HideWhen extends StencilComponents<'IonHideWhen'> {} -@Directive({ selector: 'ion-hide-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] }) +export declare interface HideWhen extends Promisify> {} +@Component({ selector: 'ion-hide-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] }) export class HideWhen { + constructor(r: ElementRef) { - proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); + const el = r.nativeElement; + proxyInputs(this, el, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); } } -export declare interface Icon extends StencilComponents<'IonIcon'> {} -@Directive({ selector: 'ion-icon', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] }) +export declare interface Icon extends Promisify> {} +@Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] }) export class Icon { + constructor(r: ElementRef) { - proxyInputs(this, r, ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']); + const el = r.nativeElement; + proxyInputs(this, el, ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']); } } -export declare interface Img extends StencilComponents<'IonImg'> {} -@Directive({ selector: 'ion-img', inputs: ['alt', 'src'], outputs: ['ionImgDidLoad'] }) +export declare interface Img extends Promisify> {} +@Component({ selector: 'ion-img', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['alt', 'src'] }) export class Img { - ionImgDidLoad: EventEmitter; + ionImgDidLoad: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['alt', 'src']); - proxyOutputs(this, ['ionImgDidLoad']); + const el = r.nativeElement; + proxyInputs(this, el, ['alt', 'src']); + proxyOutputs(this, el, ['ionImgDidLoad']); } } -export declare interface InfiniteScroll extends StencilComponents<'IonInfiniteScroll'> {} -@Directive({ selector: 'ion-infinite-scroll', inputs: ['threshold', 'disabled', 'position'], outputs: ['ionInfinite'] }) +export declare interface InfiniteScroll extends Promisify> {} +@Component({ selector: 'ion-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['threshold', 'disabled', 'position'] }) export class InfiniteScroll { - ionInfinite: EventEmitter; + ionInfinite: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['complete', 'waitFor']); - proxyInputs(this, r, ['threshold', 'disabled', 'position']); - proxyOutputs(this, ['ionInfinite']); + const el = r.nativeElement; + proxyMethods(this, el, ['complete', 'waitFor']); + proxyInputs(this, el, ['threshold', 'disabled', 'position']); + proxyOutputs(this, el, ['ionInfinite']); } } -export declare interface InfiniteScrollContent extends StencilComponents<'IonInfiniteScrollContent'> {} -@Directive({ selector: 'ion-infinite-scroll-content', inputs: ['loadingSpinner', 'loadingText'] }) +export declare interface InfiniteScrollContent extends Promisify> {} +@Component({ selector: 'ion-infinite-scroll-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['loadingSpinner', 'loadingText'] }) export class InfiniteScrollContent { + constructor(r: ElementRef) { - proxyInputs(this, r, ['loadingSpinner', 'loadingText']); + const el = r.nativeElement; + proxyInputs(this, el, ['loadingSpinner', 'loadingText']); } } -export declare interface Input extends StencilComponents<'IonInput'> {} -@Directive({ selector: 'ion-input', inputs: ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload'] }) +export declare interface Input extends Promisify> {} +@Component({ selector: 'ion-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value'] }) export class Input { - ionInput: EventEmitter; - ionChange: EventEmitter; - ionStyle: EventEmitter; - ionBlur: EventEmitter; - ionFocus: EventEmitter; - ionInputDidLoad: EventEmitter; - ionInputDidUnload: EventEmitter; + ionInput: EventEmitter; + ionChange: EventEmitter; + ionStyle: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; + ionInputDidLoad: EventEmitter; + ionInputDidUnload: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['focus']); - proxyInputs(this, r, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']); - proxyOutputs(this, ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload']); + const el = r.nativeElement; + proxyMethods(this, el, ['focus']); + proxyInputs(this, el, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']); + proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload']); } } -export declare interface Item extends StencilComponents<'IonItem'> {} -@Directive({ selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type'] }) +export declare interface Item extends Promisify> {} +@Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type'] }) export class Item { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type']); } } -export declare interface ItemDivider extends StencilComponents<'IonItemDivider'> {} -@Directive({ selector: 'ion-item-divider', inputs: ['color', 'mode'] }) +export declare interface ItemDivider extends Promisify> {} +@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class ItemDivider { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface ItemGroup extends StencilComponents<'IonItemGroup'> {} -@Directive({ selector: 'ion-item-group' }) +export declare interface ItemGroup extends Promisify> {} +@Component({ selector: 'ion-item-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class ItemGroup { } -export declare interface ItemOption extends StencilComponents<'IonItemOption'> {} -@Directive({ selector: 'ion-item-option', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] }) +export declare interface ItemOption extends Promisify> {} +@Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] }) export class ItemOption { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'disabled', 'expandable', 'href']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'disabled', 'expandable', 'href']); } } -export declare interface ItemOptions extends StencilComponents<'IonItemOptions'> {} -@Directive({ selector: 'ion-item-options', inputs: ['side'], outputs: ['ionSwipe'] }) +export declare interface ItemOptions extends Promisify> {} +@Component({ selector: 'ion-item-options', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['side'] }) export class ItemOptions { - ionSwipe: EventEmitter; + ionSwipe: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['isEndSide', 'width', 'fireSwipeEvent']); - proxyInputs(this, r, ['side']); - proxyOutputs(this, ['ionSwipe']); + const el = r.nativeElement; + proxyMethods(this, el, ['isEndSide', 'width', 'fireSwipeEvent']); + proxyInputs(this, el, ['side']); + proxyOutputs(this, el, ['ionSwipe']); } } -export declare interface ItemSliding extends StencilComponents<'IonItemSliding'> {} -@Directive({ selector: 'ion-item-sliding', inputs: ['disabled'], outputs: ['ionDrag'] }) +export declare interface ItemSliding extends Promisify> {} +@Component({ selector: 'ion-item-sliding', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['disabled'] }) export class ItemSliding { - ionDrag: EventEmitter; + ionDrag: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']); - proxyInputs(this, r, ['disabled']); - proxyOutputs(this, ['ionDrag']); + const el = r.nativeElement; + proxyMethods(this, el, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']); + proxyInputs(this, el, ['disabled']); + proxyOutputs(this, el, ['ionDrag']); } } -export declare interface Label extends StencilComponents<'IonLabel'> {} -@Directive({ selector: 'ion-label', inputs: ['color', 'mode', 'position'], outputs: ['ionStyle'] }) +export declare interface Label extends Promisify> {} +@Component({ selector: 'ion-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'position'] }) export class Label { - ionStyle: EventEmitter; + ionStyle: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['getText']); - proxyInputs(this, r, ['color', 'mode', 'position']); - proxyOutputs(this, ['ionStyle']); + const el = r.nativeElement; + proxyMethods(this, el, ['getText']); + proxyInputs(this, el, ['color', 'mode', 'position']); + proxyOutputs(this, el, ['ionStyle']); } } -export declare interface List extends StencilComponents<'IonList'> {} -@Directive({ selector: 'ion-list', inputs: ['lines', 'inset'] }) +export declare interface List extends Promisify> {} +@Component({ selector: 'ion-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['lines', 'inset'] }) export class List { + constructor(r: ElementRef) { - proxyMethods(this, r, ['getOpenItem', 'setOpenItem', 'closeSlidingItems']); - proxyInputs(this, r, ['lines', 'inset']); + const el = r.nativeElement; + proxyMethods(this, el, ['getOpenItem', 'setOpenItem', 'closeSlidingItems']); + proxyInputs(this, el, ['lines', 'inset']); } } -export declare interface ListHeader extends StencilComponents<'IonListHeader'> {} -@Directive({ selector: 'ion-list-header', inputs: ['color', 'mode'] }) +export declare interface ListHeader extends Promisify> {} +@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class ListHeader { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface Menu extends StencilComponents<'IonMenu'> {} -@Directive({ selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange'] }) +export declare interface Menu extends Promisify> {} +@Component({ selector: 'ion-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart'] }) export class Menu { - ionOpen: EventEmitter; - ionClose: EventEmitter; - ionMenuChange: EventEmitter; + ionOpen: EventEmitter; + ionClose: EventEmitter; + ionMenuChange: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['isOpen', 'open', 'close', 'toggle', 'setOpen', 'isActive', 'getWidth']); - proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']); - proxyOutputs(this, ['ionOpen', 'ionClose', 'ionMenuChange']); + const el = r.nativeElement; + proxyMethods(this, el, ['isOpen', 'open', 'close', 'toggle', 'setOpen', 'isActive', 'getWidth']); + proxyInputs(this, el, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']); + proxyOutputs(this, el, ['ionOpen', 'ionClose', 'ionMenuChange']); } } -export declare interface MenuButton extends StencilComponents<'IonMenuButton'> {} -@Directive({ selector: 'ion-menu-button', inputs: ['color', 'mode', 'menu', 'autoHide'] }) +export declare interface MenuButton extends Promisify> {} +@Component({ selector: 'ion-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'menu', 'autoHide'] }) export class MenuButton { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'menu', 'autoHide']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'menu', 'autoHide']); } } -export declare interface MenuToggle extends StencilComponents<'IonMenuToggle'> {} -@Directive({ selector: 'ion-menu-toggle', inputs: ['menu', 'autoHide'] }) +export declare interface MenuToggle extends Promisify> {} +@Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['menu', 'autoHide'] }) export class MenuToggle { + constructor(r: ElementRef) { - proxyInputs(this, r, ['menu', 'autoHide']); + const el = r.nativeElement; + proxyInputs(this, el, ['menu', 'autoHide']); } } -export declare interface Nav extends StencilComponents<'IonNav'> {} -@Directive({ selector: 'ion-nav', inputs: ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root'], outputs: ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] }) +export declare interface Nav extends Promisify> {} +@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root'] }) export class Nav { - ionNavWillLoad: EventEmitter; - ionNavWillChange: EventEmitter; - ionNavDidChange: EventEmitter; + ionNavWillLoad: EventEmitter; + ionNavWillChange: EventEmitter; + ionNavDidChange: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'isAnimating', 'getLength']); - proxyInputs(this, r, ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root']); - proxyOutputs(this, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); + const el = r.nativeElement; + proxyMethods(this, el, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'isAnimating', 'getLength']); + proxyInputs(this, el, ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root']); + proxyOutputs(this, el, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); } } -export declare interface NavPop extends StencilComponents<'IonNavPop'> {} -@Directive({ selector: 'ion-nav-pop' }) +export declare interface NavPop extends Promisify> {} +@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class NavPop { } -export declare interface NavPush extends StencilComponents<'IonNavPush'> {} -@Directive({ selector: 'ion-nav-push', inputs: ['component', 'componentProps'] }) +export declare interface NavPush extends Promisify> {} +@Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['component', 'componentProps'] }) export class NavPush { + constructor(r: ElementRef) { - proxyInputs(this, r, ['component', 'componentProps']); + const el = r.nativeElement; + proxyInputs(this, el, ['component', 'componentProps']); } } -export declare interface NavSetRoot extends StencilComponents<'IonNavSetRoot'> {} -@Directive({ selector: 'ion-nav-set-root', inputs: ['component', 'componentProps'] }) +export declare interface NavSetRoot extends Promisify> {} +@Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['component', 'componentProps'] }) export class NavSetRoot { + constructor(r: ElementRef) { - proxyInputs(this, r, ['component', 'componentProps']); + const el = r.nativeElement; + proxyInputs(this, el, ['component', 'componentProps']); } } -export declare interface Note extends StencilComponents<'IonNote'> {} -@Directive({ selector: 'ion-note', inputs: ['color', 'mode'] }) +export declare interface Note extends Promisify> {} +@Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Note { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface Radio extends StencilComponents<'IonRadio'> {} -@Directive({ selector: 'ion-radio', inputs: ['color', 'mode', 'name', 'disabled', 'checked', 'value'], outputs: ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur'] }) +export declare interface Radio extends Promisify> {} +@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'name', 'disabled', 'checked', 'value'] }) export class Radio { - ionRadioDidLoad: EventEmitter; - ionRadioDidUnload: EventEmitter; - ionStyle: EventEmitter; - ionSelect: EventEmitter; - ionFocus: EventEmitter; - ionBlur: EventEmitter; + ionRadioDidLoad: EventEmitter; + ionRadioDidUnload: EventEmitter; + ionStyle: EventEmitter; + ionSelect: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'name', 'disabled', 'checked', 'value']); - proxyOutputs(this, ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'name', 'disabled', 'checked', 'value']); + proxyOutputs(this, el, ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur']); } } -export declare interface RadioGroup extends StencilComponents<'IonRadioGroup'> {} -@Directive({ selector: 'ion-radio-group', inputs: ['allowEmptySelection', 'name', 'disabled', 'value'], outputs: ['ionChange'] }) +export declare interface RadioGroup extends Promisify> {} +@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['allowEmptySelection', 'name', 'disabled', 'value'] }) export class RadioGroup { - ionChange: EventEmitter; + ionChange: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['allowEmptySelection', 'name', 'disabled', 'value']); - proxyOutputs(this, ['ionChange']); + const el = r.nativeElement; + proxyInputs(this, el, ['allowEmptySelection', 'name', 'disabled', 'value']); + proxyOutputs(this, el, ['ionChange']); } } -export declare interface Range extends StencilComponents<'IonRange'> {} -@Directive({ selector: 'ion-range', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'], outputs: ['ionChange', 'ionStyle', 'ionFocus', 'ionBlur'] }) +export declare interface Range extends Promisify> {} +@Component({ selector: 'ion-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] }) export class Range { - ionChange: EventEmitter; - ionStyle: EventEmitter; - ionFocus: EventEmitter; - ionBlur: EventEmitter; + ionChange: EventEmitter; + ionStyle: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); - proxyOutputs(this, ['ionChange', 'ionStyle', 'ionFocus', 'ionBlur']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); + proxyOutputs(this, el, ['ionChange', 'ionStyle', 'ionFocus', 'ionBlur']); } } -export declare interface Refresher extends StencilComponents<'IonRefresher'> {} -@Directive({ selector: 'ion-refresher', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'], outputs: ['ionRefresh', 'ionPull', 'ionStart'] }) +export declare interface Refresher extends Promisify> {} +@Component({ selector: 'ion-refresher', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] }) export class Refresher { - ionRefresh: EventEmitter; - ionPull: EventEmitter; - ionStart: EventEmitter; + ionRefresh: EventEmitter; + ionPull: EventEmitter; + ionStart: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['complete', 'cancel', 'getProgress']); - proxyInputs(this, r, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']); - proxyOutputs(this, ['ionRefresh', 'ionPull', 'ionStart']); + const el = r.nativeElement; + proxyMethods(this, el, ['complete', 'cancel', 'getProgress']); + proxyInputs(this, el, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']); + proxyOutputs(this, el, ['ionRefresh', 'ionPull', 'ionStart']); } } -export declare interface RefresherContent extends StencilComponents<'IonRefresherContent'> {} -@Directive({ selector: 'ion-refresher-content', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] }) +export declare interface RefresherContent extends Promisify> {} +@Component({ selector: 'ion-refresher-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] }) export class RefresherContent { + constructor(r: ElementRef) { - proxyInputs(this, r, ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']); + const el = r.nativeElement; + proxyInputs(this, el, ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']); } } -export declare interface Reorder extends StencilComponents<'IonReorder'> {} -@Directive({ selector: 'ion-reorder' }) +export declare interface Reorder extends Promisify> {} +@Component({ selector: 'ion-reorder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Reorder { } -export declare interface ReorderGroup extends StencilComponents<'IonReorderGroup'> {} -@Directive({ selector: 'ion-reorder-group', inputs: ['disabled'] }) +export declare interface ReorderGroup extends Promisify> {} +@Component({ selector: 'ion-reorder-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['disabled'] }) export class ReorderGroup { + constructor(r: ElementRef) { - proxyInputs(this, r, ['disabled']); + const el = r.nativeElement; + proxyInputs(this, el, ['disabled']); } } -export declare interface RippleEffect extends StencilComponents<'IonRippleEffect'> {} -@Directive({ selector: 'ion-ripple-effect', inputs: ['parent', 'tapClick'] }) +export declare interface RippleEffect extends Promisify> {} +@Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['parent', 'tapClick'] }) export class RippleEffect { + constructor(r: ElementRef) { - proxyMethods(this, r, ['addRipple']); - proxyInputs(this, r, ['parent', 'tapClick']); + const el = r.nativeElement; + proxyMethods(this, el, ['addRipple']); + proxyInputs(this, el, ['parent', 'tapClick']); } } -export declare interface Row extends StencilComponents<'IonRow'> {} -@Directive({ selector: 'ion-row' }) +export declare interface Row extends Promisify> {} +@Component({ selector: 'ion-row', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Row { } -export declare interface Searchbar extends StencilComponents<'IonSearchbar'> {} -@Directive({ selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus'] }) +export declare interface Searchbar extends Promisify> {} +@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] }) export class Searchbar { - ionInput: EventEmitter; - ionChange: EventEmitter; - ionCancel: EventEmitter; - ionClear: EventEmitter; - ionBlur: EventEmitter; - ionFocus: EventEmitter; + ionInput: EventEmitter; + ionChange: EventEmitter; + ionCancel: EventEmitter; + ionClear: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['focus']); - proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']); - proxyOutputs(this, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']); + const el = r.nativeElement; + proxyMethods(this, el, ['focus']); + proxyInputs(this, el, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']); + proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']); } } -export declare interface Segment extends StencilComponents<'IonSegment'> {} -@Directive({ selector: 'ion-segment', inputs: ['color', 'mode', 'disabled', 'value'], outputs: ['ionChange'] }) +export declare interface Segment extends Promisify> {} +@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'disabled', 'value'] }) export class Segment { - ionChange: EventEmitter; + ionChange: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'disabled', 'value']); - proxyOutputs(this, ['ionChange']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'disabled', 'value']); + proxyOutputs(this, el, ['ionChange']); } } -export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {} -@Directive({ selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'value'], outputs: ['ionSelect'] }) +export declare interface SegmentButton extends Promisify> {} +@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'checked', 'disabled', 'value'] }) export class SegmentButton { - ionSelect: EventEmitter; + ionSelect: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'checked', 'disabled', 'value']); - proxyOutputs(this, ['ionSelect']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'value']); + proxyOutputs(this, el, ['ionSelect']); } } -export declare interface Select extends StencilComponents<'IonSelect'> {} -@Directive({ selector: 'ion-select', inputs: ['disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value'], outputs: ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur', 'ionStyle'] }) +export declare interface Select extends Promisify> {} +@Component({ selector: 'ion-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value'] }) export class Select { - ionChange: EventEmitter; - ionCancel: EventEmitter; - ionFocus: EventEmitter; - ionBlur: EventEmitter; - ionStyle: EventEmitter; + ionChange: EventEmitter; + ionCancel: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['open']); - proxyInputs(this, r, ['disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value']); - proxyOutputs(this, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur', 'ionStyle']); + const el = r.nativeElement; + proxyMethods(this, el, ['open']); + proxyInputs(this, el, ['mode', 'disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value']); + proxyOutputs(this, el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur', 'ionStyle']); } } -export declare interface SelectOption extends StencilComponents<'IonSelectOption'> {} -@Directive({ selector: 'ion-select-option', inputs: ['disabled', 'selected', 'value'], outputs: ['ionSelectOptionDidLoad', 'ionSelectOptionDidUnload'] }) +export declare interface SelectOption extends Promisify> {} +@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['disabled', 'selected', 'value'] }) export class SelectOption { - ionSelectOptionDidLoad: EventEmitter; - ionSelectOptionDidUnload: EventEmitter; + ionSelectOptionDidLoad: EventEmitter; + ionSelectOptionDidUnload: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['disabled', 'selected', 'value']); - proxyOutputs(this, ['ionSelectOptionDidLoad', 'ionSelectOptionDidUnload']); + const el = r.nativeElement; + proxyInputs(this, el, ['disabled', 'selected', 'value']); + proxyOutputs(this, el, ['ionSelectOptionDidLoad', 'ionSelectOptionDidUnload']); } } -export declare interface SelectPopover extends StencilComponents<'IonSelectPopover'> {} -@Directive({ selector: 'ion-select-popover', inputs: ['header', 'subHeader', 'message', 'options'] }) +export declare interface SelectPopover extends Promisify> {} +@Component({ selector: 'ion-select-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['header', 'subHeader', 'message', 'options'] }) export class SelectPopover { + constructor(r: ElementRef) { - proxyInputs(this, r, ['header', 'subHeader', 'message', 'options']); + const el = r.nativeElement; + proxyInputs(this, el, ['header', 'subHeader', 'message', 'options']); } } -export declare interface ShowWhen extends StencilComponents<'IonShowWhen'> {} -@Directive({ selector: 'ion-show-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] }) +export declare interface ShowWhen extends Promisify> {} +@Component({ selector: 'ion-show-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] }) export class ShowWhen { + constructor(r: ElementRef) { - proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); + const el = r.nativeElement; + proxyInputs(this, el, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); } } -export declare interface SkeletonText extends StencilComponents<'IonSkeletonText'> {} -@Directive({ selector: 'ion-skeleton-text', inputs: ['width'] }) +export declare interface SkeletonText extends Promisify> {} +@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['width'] }) export class SkeletonText { + constructor(r: ElementRef) { - proxyInputs(this, r, ['width']); + const el = r.nativeElement; + proxyInputs(this, el, ['width']); } } -export declare interface Slide extends StencilComponents<'IonSlide'> {} -@Directive({ selector: 'ion-slide' }) +export declare interface Slide extends Promisify> {} +@Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Slide { } -export declare interface Slides extends StencilComponents<'IonSlides'> {} -@Directive({ selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd'] }) +export declare interface Slides extends Promisify> {} +@Component({ selector: 'ion-slides', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['options', 'pager', 'scrollbar'] }) export class Slides { - ionSlidesDidLoad: EventEmitter; - ionSlideTap: EventEmitter; - ionSlideDoubleTap: EventEmitter; - ionSlideWillChange: EventEmitter; - ionSlideDidChange: EventEmitter; - ionSlideNextStart: EventEmitter; - ionSlidePrevStart: EventEmitter; - ionSlideNextEnd: EventEmitter; - ionSlidePrevEnd: EventEmitter; - ionSlideTransitionStart: EventEmitter; - ionSlideTransitionEnd: EventEmitter; - ionSlideDrag: EventEmitter; - ionSlideReachStart: EventEmitter; - ionSlideReachEnd: EventEmitter; - ionSlideTouchStart: EventEmitter; - ionSlideTouchEnd: EventEmitter; + ionSlidesDidLoad: EventEmitter; + ionSlideTap: EventEmitter; + ionSlideDoubleTap: EventEmitter; + ionSlideWillChange: EventEmitter; + ionSlideDidChange: EventEmitter; + ionSlideNextStart: EventEmitter; + ionSlidePrevStart: EventEmitter; + ionSlideNextEnd: EventEmitter; + ionSlidePrevEnd: EventEmitter; + ionSlideTransitionStart: EventEmitter; + ionSlideTransitionEnd: EventEmitter; + ionSlideDrag: EventEmitter; + ionSlideReachStart: EventEmitter; + ionSlideReachEnd: EventEmitter; + ionSlideTouchStart: EventEmitter; + ionSlideTouchEnd: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']); - proxyInputs(this, r, ['options', 'pager', 'scrollbar']); - proxyOutputs(this, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); + const el = r.nativeElement; + proxyMethods(this, el, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']); + proxyInputs(this, el, ['options', 'pager', 'scrollbar']); + proxyOutputs(this, el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); } } -export declare interface Spinner extends StencilComponents<'IonSpinner'> {} -@Directive({ selector: 'ion-spinner', inputs: ['color', 'mode', 'duration', 'name', 'paused'] }) +export declare interface Spinner extends Promisify> {} +@Component({ selector: 'ion-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'duration', 'name', 'paused'] }) export class Spinner { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'duration', 'name', 'paused']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'duration', 'name', 'paused']); } } -export declare interface SplitPane extends StencilComponents<'IonSplitPane'> {} -@Directive({ selector: 'ion-split-pane', inputs: ['disabled', 'when'], outputs: ['ionChange', 'ionSplitPaneVisible'] }) +export declare interface SplitPane extends Promisify> {} +@Component({ selector: 'ion-split-pane', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['disabled', 'when'] }) export class SplitPane { - ionChange: EventEmitter; - ionSplitPaneVisible: EventEmitter; + ionChange: EventEmitter; + ionSplitPaneVisible: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['isVisible', 'isPane']); - proxyInputs(this, r, ['disabled', 'when']); - proxyOutputs(this, ['ionChange', 'ionSplitPaneVisible']); + const el = r.nativeElement; + proxyMethods(this, el, ['isVisible', 'isPane']); + proxyInputs(this, el, ['disabled', 'when']); + proxyOutputs(this, el, ['ionChange', 'ionSplitPaneVisible']); } } -export declare interface Tab extends StencilComponents<'IonTab'> {} -@Directive({ selector: 'ion-tab', inputs: ['active', 'btnId', 'delegate', 'label', 'href', 'icon', 'badge', 'badgeColor', 'component', 'name', 'disabled', 'selected', 'show', 'tabsHideOnSubPages'], outputs: ['ionSelect', 'ionTabMutated'] }) +export declare interface Tab extends Promisify> {} +@Component({ selector: 'ion-tab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['active', 'btnId', 'delegate', 'label', 'href', 'icon', 'badge', 'badgeColor', 'component', 'name', 'disabled', 'selected', 'show', 'tabsHideOnSubPages'] }) export class Tab { - ionSelect: EventEmitter; - ionTabMutated: EventEmitter; + ionSelect: EventEmitter; + ionTabMutated: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['getTabId', 'setActive']); - proxyInputs(this, r, ['active', 'btnId', 'delegate', 'label', 'href', 'icon', 'badge', 'badgeColor', 'component', 'name', 'disabled', 'selected', 'show', 'tabsHideOnSubPages']); - proxyOutputs(this, ['ionSelect', 'ionTabMutated']); + const el = r.nativeElement; + proxyMethods(this, el, ['getTabId', 'setActive']); + proxyInputs(this, el, ['active', 'btnId', 'delegate', 'label', 'href', 'icon', 'badge', 'badgeColor', 'component', 'name', 'disabled', 'selected', 'show', 'tabsHideOnSubPages']); + proxyOutputs(this, el, ['ionSelect', 'ionTabMutated']); } } -export declare interface Tabs extends StencilComponents<'IonTabs'> {} -@Directive({ selector: 'ion-tabs', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'], outputs: ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] }) +export declare interface Tabs extends Promisify> {} +@Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'] }) export class Tabs { - ionChange: EventEmitter; - ionNavWillLoad: EventEmitter; - ionNavWillChange: EventEmitter; - ionNavDidChange: EventEmitter; + ionChange: EventEmitter; + ionNavWillLoad: EventEmitter; + ionNavWillChange: EventEmitter; + ionNavDidChange: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']); - proxyInputs(this, r, ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter']); - proxyOutputs(this, ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); + const el = r.nativeElement; + proxyMethods(this, el, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']); + proxyInputs(this, el, ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter']); + proxyOutputs(this, el, ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); } } -export declare interface Text extends StencilComponents<'IonText'> {} -@Directive({ selector: 'ion-text', inputs: ['color', 'mode'] }) +export declare interface Text extends Promisify> {} +@Component({ selector: 'ion-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Text { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface Textarea extends StencilComponents<'IonTextarea'> {} -@Directive({ selector: 'ion-textarea', inputs: ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'], outputs: ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus'] }) +export declare interface Textarea extends Promisify> {} +@Component({ selector: 'ion-textarea', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'] }) export class Textarea { - ionChange: EventEmitter; - ionInput: EventEmitter; - ionStyle: EventEmitter; - ionBlur: EventEmitter; - ionFocus: EventEmitter; + ionChange: EventEmitter; + ionInput: EventEmitter; + ionStyle: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; + constructor(r: ElementRef) { - proxyMethods(this, r, ['focus']); - proxyInputs(this, r, ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']); - proxyOutputs(this, ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus']); + const el = r.nativeElement; + proxyMethods(this, el, ['focus']); + proxyInputs(this, el, ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']); + proxyOutputs(this, el, ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus']); } } -export declare interface Thumbnail extends StencilComponents<'IonThumbnail'> {} -@Directive({ selector: 'ion-thumbnail' }) +export declare interface Thumbnail extends Promisify> {} +@Component({ selector: 'ion-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class Thumbnail { } -export declare interface Toggle extends StencilComponents<'IonToggle'> {} -@Directive({ selector: 'ion-toggle', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'], outputs: ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle'] }) +export declare interface Toggle extends Promisify> {} +@Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'] }) export class Toggle { - ionChange: EventEmitter; - ionFocus: EventEmitter; - ionBlur: EventEmitter; - ionStyle: EventEmitter; + ionChange: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'name', 'checked', 'disabled', 'value']); - proxyOutputs(this, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode', 'name', 'checked', 'disabled', 'value']); + proxyOutputs(this, el, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']); } } -export declare interface Toolbar extends StencilComponents<'IonToolbar'> {} -@Directive({ selector: 'ion-toolbar', inputs: ['color', 'mode'] }) +export declare interface Toolbar extends Promisify> {} +@Component({ selector: 'ion-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode'] }) export class Toolbar { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + const el = r.nativeElement; + proxyInputs(this, el, ['color', 'mode']); } } -export declare interface ToolbarTitle extends StencilComponents<'IonTitle'> {} -@Directive({ selector: 'ion-title', inputs: ['color'] }) +export declare interface ToolbarTitle extends Promisify> {} +@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color'] }) export class ToolbarTitle { + constructor(r: ElementRef) { - proxyInputs(this, r, ['color']); + const el = r.nativeElement; + proxyInputs(this, el, ['color']); } } diff --git a/core/package.json b/core/package.json index 91a62f55a1..216ab07745 100644 --- a/core/package.json +++ b/core/package.json @@ -27,7 +27,7 @@ "ionicons": "4.4.1" }, "devDependencies": { - "@stencil/core": "^0.12.0-7", + "@stencil/core": "^0.12.0-8", "@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 new file mode 100644 index 0000000000..83a0281b9e --- /dev/null +++ b/core/src/components.d.ts @@ -0,0 +1,6192 @@ +/** +* 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'; + +import 'ionicons' +import { + ActionSheetButton, + ActionSheetOptions, + AlertButton, + AlertInput, + AlertOptions, + Animation, + AnimationBuilder, + CheckedInputChangeEvent, + Color, + ComponentProps, + ComponentRef, + DomRenderFn, + FrameworkDelegate, + HeaderFn, + InputChangeEvent, + ItemHeightFn, + ItemRenderFn, + LoadingOptions, + MenuChangeEventDetail, + MenuI, + ModalOptions, + Mode, + NavComponent, + NavOptions, + OverlayEventDetail, + PickerButton, + PickerColumn, + PickerOptions, + PopoverOptions, + RangeValue, + RouteID, + RouterDirection, + RouterEventDetail, + RouterOutletOptions, + RouteWrite, + ScrollBaseDetail, + ScrollDetail, + SelectInputChangeEvent, + SelectInterface, + SelectPopoverOption, + Side, + StyleEvent, + TabbarLayout, + TabbarPlacement, + TextFieldTypes, + TextInputChangeEvent, + ToastOptions, + TransitionDoneFn, + TransitionInstruction, + ViewController, +} from './interface'; +import { + EventEmitter, +} from '@stencil/core'; + + +export namespace Components { + + interface IonActionSheetController { + /** + * Create an action sheet overlay with action sheet options. + */ + 'create': (opts?: ActionSheetOptions | undefined) => Promise; + /** + * Dismiss the open action sheet overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise; + /** + * Get the most recently opened action sheet overlay. + */ + 'getTop': () => HTMLIonActionSheetElement; + } + interface IonActionSheetControllerAttributes extends StencilHTMLAttributes {} + + interface IonActionSheet { + /** + * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss': boolean; + /** + * 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[]; + /** + * Dismiss the action sheet overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * 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; + /** + * Returns a promise that resolves when the action-sheet 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 action-sheet will dismiss. It also accepts a callback that is called in the same circustances. + */ + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + /** + * Unique ID to be used with the overlay. Internal only + */ + 'overlayId': number; + /** + * Present the action sheet overlay after it has been created. + */ + 'present': () => Promise; + /** + * 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; + } + interface IonActionSheetAttributes extends StencilHTMLAttributes { + /** + * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss'?: boolean; + /** + * 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[]; + /** + * 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; + } + + interface IonAlertController { + /** + * Create an alert overlay with alert options + */ + 'create': (opts?: AlertOptions | undefined) => Promise; + /** + * Dismiss the open alert overlay. + */ + 'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise; + /** + * Get the most recently opened alert overlay. + */ + 'getTop': () => HTMLIonAlertElement; + } + interface IonAlertControllerAttributes extends StencilHTMLAttributes {} + + interface IonAlert { + /** + * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss': boolean; + /** + * 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[]; + /** + * Dismiss the alert overlay after it has been presented. + */ + 'dismiss': (data?: any, role?: string | undefined) => Promise; + /** + * 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; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * Returns a promise that resolves when the alert 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 alert 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 alert overlay after it has been created. + */ + 'present': () => Promise; + /** + * 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; + } + interface IonAlertAttributes extends StencilHTMLAttributes { + /** + * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss'?: boolean; + /** + * 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[]; + /** + * 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; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + '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; + } + + 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). + */ + '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; + } + interface IonAnchorAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonAnimationController { + /** + * Creates an animation instance + */ + 'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise; + } + interface IonAnimationControllerAttributes extends StencilHTMLAttributes {} + + interface IonApp {} + interface IonAppAttributes extends StencilHTMLAttributes {} + + interface IonAvatar {} + interface IonAvatarAttributes extends StencilHTMLAttributes {} + + 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). + */ + '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; + } + interface IonBackButtonAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonBackdrop { + /** + * 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; + } + interface IonBackdropAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonBadgeAttributes extends StencilHTMLAttributes { + /** + * 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 IonButton { + /** + * 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; + /** + * 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'; + } + interface IonButtonAttributes extends StencilHTMLAttributes { + /** + * 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'; + } + + interface IonButtons {} + interface IonButtonsAttributes extends StencilHTMLAttributes {} + + interface IonCardContent { + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonCardContentAttributes extends StencilHTMLAttributes { + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + } + + 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). + */ + '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; + } + interface IonCardHeaderAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonCardSubtitleAttributes extends StencilHTMLAttributes { + /** + * 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 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). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonCardTitleAttributes extends StencilHTMLAttributes { + /** + * 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 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). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonCardAttributes extends StencilHTMLAttributes { + /** + * 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 IonCheckbox { + /** + * 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; + /** + * The value of the checkbox. + */ + 'value': string; + } + interface IonCheckboxAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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). + */ + 'color': Color; + /** + * If true, the user cannot interact with the chip button. Defaults to `false`. + */ + 'disabled': boolean; + /** + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. + */ + 'fill': 'clear' | 'solid'; + /** + * 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 IonChipButtonAttributes extends StencilHTMLAttributes { + /** + * 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 or to `"solid"` for a filled background. Defaults to `"clear"`. + */ + 'fill'?: 'clear' | 'solid'; + /** + * 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 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). + */ + 'color': Color; + /** + * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. + */ + 'fill': 'clear' | 'solid'; + /** + * 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; + /** + * The icon src to use. Possible values are the same as `"ion-icon"`. + */ + 'src': string; + } + interface IonChipIconAttributes extends StencilHTMLAttributes { + /** + * 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 to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. + */ + 'fill'?: 'clear' | 'solid'; + /** + * 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; + /** + * The icon src to use. Possible values are the same as `"ion-icon"`. + */ + 'src'?: string; + } + + 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). + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + } + interface IonChipAttributes extends StencilHTMLAttributes { + /** + * 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 IonCol { + /** + * 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; + } + interface IonColAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonContent { + '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; + 'getScrollElement': () => HTMLElement; + /** + * Scroll by a specified X/Y distance in the component + */ + 'scrollByPoint': (x: number, y: number, duration: number) => Promise; + /** + * 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; + /** + * Scroll to the bottom of the component + */ + 'scrollToBottom': (duration?: number) => Promise; + /** + * Scroll to a specified X/Y location in the component + */ + 'scrollToPoint': (x: number | undefined, y: number | undefined, duration?: number) => Promise; + /** + * Scroll to the top of the component + */ + 'scrollToTop': (duration?: number) => Promise; + /** + * If you want to enable the content scrolling in the X axis, set this property to `true`. + */ + 'scrollX': boolean; + /** + * If you want to disable the content scrolling in the Y axis, set this property to `false`. + */ + 'scrollY': boolean; + } + interface IonContentAttributes extends StencilHTMLAttributes { + '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; + /** + * Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` + */ + 'onIonScroll'?: (event: CustomEvent) => void; + /** + * Emitted when the scroll has ended. + */ + 'onIonScrollEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the scroll has started. + */ + 'onIonScrollStart'?: (event: CustomEvent) => void; + /** + * 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; + /** + * If you want to enable the content scrolling in the X axis, set this property to `true`. + */ + 'scrollX'?: boolean; + /** + * If you want to disable the content scrolling in the Y axis, set this property to `false`. + */ + 'scrollY'?: boolean; + } + + interface IonDatetime { + /** + * 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; + /** + * 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; + /** + * 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; + 'open': () => Promise; + /** + * 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': any; + /** + * 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; + } + interface IonDatetimeAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * 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; + /** + * 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 value (selected date) 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'?: any; + /** + * 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; + } + + interface IonFabButton { + /** + * 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; + } + interface IonFabButtonAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonFabList { + /** + * 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'; + } + interface IonFabListAttributes extends StencilHTMLAttributes { + /** + * 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'; + } + + interface IonFab { + 'activated': boolean; + /** + * Close an active FAB list container + */ + 'close': () => void; + /** + * 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'; + } + interface IonFabAttributes extends StencilHTMLAttributes { + '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'; + } + + interface IonFooter { + /** + * 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; + } + interface IonFooterAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonGrid { + /** + * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. + */ + 'fixed': boolean; + } + interface IonGridAttributes extends StencilHTMLAttributes { + /** + * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. + */ + 'fixed'?: boolean; + } + + interface IonHeader { + /** + * 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; + } + interface IonHeaderAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonHideWhen { + /** + * 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; + } + interface IonHideWhenAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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. + */ + 'alt': string; + /** + * The image URL. This attribute is mandatory for the element. + */ + 'src': string; + } + interface IonImgAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + interface IonInfiniteScrollContent { + /** + * An animated SVG spinner that shows while loading. + */ + 'loadingSpinner': string; + /** + * Optional text to display while loading. + */ + 'loadingText': string; + } + interface IonInfiniteScrollContentAttributes extends StencilHTMLAttributes { + /** + * An animated SVG spinner that shows while loading. + */ + 'loadingSpinner'?: string; + /** + * Optional text to display while loading. + */ + 'loadingText'?: string; + } + + 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`. + */ + 'complete': () => void; + /** + * 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; + /** + * 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; + /** + * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to change state of infiniteScroll to "complete" + */ + 'waitFor': (action: Promise) => void; + } + interface IonInfiniteScrollAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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. + */ + 'accept': string; + /** + * 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; + /** + * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + */ + 'autocorrect': 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, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + */ + 'clearInput': 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; + /** + * 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 input. Defaults to `false`. + */ + 'disabled': boolean; + 'focus': () => void; + /** + * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. + */ + 'inputmode': string; + /** + * The maximum value, which must not be less than its minimum (min attribute) value. + */ + 'max': string; + /** + * 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; + /** + * The minimum value, which must not be greater than its maximum (max attribute) value. + */ + 'min': string; + /** + * 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; + /** + * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. + */ + 'multiple': boolean; + /** + * The name of the control, which is submitted with the form data. + */ + 'name': string; + /** + * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. + */ + 'pattern': 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; + /** + * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. + */ + 'results': number; + /** + * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. + */ + 'size': number; + /** + * If true, the element will have its spelling and grammar checked. Defaults to `false`. + */ + 'spellcheck': boolean; + /** + * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. + */ + 'step': string; + /** + * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + */ + 'type': TextFieldTypes; + /** + * The value of the input. + */ + 'value': string; + } + interface IonInputAttributes extends StencilHTMLAttributes { + /** + * 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. + */ + 'accept'?: string; + /** + * 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; + /** + * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + */ + 'autocorrect'?: 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, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + */ + 'clearInput'?: 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; + /** + * 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 input. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. + */ + 'inputmode'?: string; + /** + * The maximum value, which must not be less than its minimum (min attribute) value. + */ + 'max'?: string; + /** + * 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; + /** + * The minimum value, which must not be greater than its maximum (max attribute) value. + */ + 'min'?: string; + /** + * 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; + /** + * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. + */ + 'multiple'?: boolean; + /** + * The name of the control, which is submitted with the form data. + */ + 'name'?: string; + /** + * Emitted when the input loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the value has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the input has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when a keyboard input ocurred. + */ + 'onIonInput'?: (event: CustomEvent) => void; + /** + * Emitted when the input has been created. + */ + 'onIonInputDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted when the input has been removed. + */ + 'onIonInputDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. + */ + 'pattern'?: 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; + /** + * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. + */ + 'results'?: number; + /** + * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. + */ + 'size'?: number; + /** + * If true, the element will have its spelling and grammar checked. Defaults to `false`. + */ + 'spellcheck'?: boolean; + /** + * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. + */ + 'step'?: string; + /** + * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + */ + 'type'?: TextFieldTypes; + /** + * The value of the input. + */ + 'value'?: string; + } + + 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 IonItemDividerAttributes extends StencilHTMLAttributes { + /** + * 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 IonItemGroup {} + interface IonItemGroupAttributes extends StencilHTMLAttributes {} + + 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 IonItemOptionAttributes extends StencilHTMLAttributes { + /** + * 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 IonItemOptionsAttributes extends StencilHTMLAttributes { + /** + * Emitted when the item has been fully swiped. + */ + 'onIonSwipe'?: (event: CustomEvent) => void; + /** + * 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; + } + + 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; + /** + * If true, the user cannot interact with the sliding-item. Defaults to `false`. + */ + 'disabled': 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 IonItemSlidingAttributes extends StencilHTMLAttributes { + /** + * If true, the user cannot interact with the sliding-item. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Emitted when the sliding position changes. + */ + 'onIonDrag'?: (event: CustomEvent) => void; + } + + 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. Available options: `"full"`, `"inset"`, `"none"`. + */ + '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 IonItemAttributes extends StencilHTMLAttributes { + /** + * 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. Available options: `"full"`, `"inset"`, `"none"`. + */ + '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 IonLabelAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * 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 IonListHeaderAttributes extends StencilHTMLAttributes { + /** + * 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. Available options: `"full"`, `"inset"`, `"none"`. + */ + 'lines': 'full' | 'inset' | 'none'; + /** + * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. + */ + 'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void; + } + interface IonListAttributes extends StencilHTMLAttributes { + /** + * 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. Available options: `"full"`, `"inset"`, `"none"`. + */ + 'lines'?: 'full' | 'inset' | 'none'; + } + + 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 IonLoadingControllerAttributes extends StencilHTMLAttributes {} + + interface IonLoading { + /** + * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + */ + 'backdropDismiss': boolean; + /** + * 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; + /** + * Number of milliseconds to wait before dismissing the loading indicator. + */ + 'duration': number; + /** + * 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 IonLoadingAttributes extends StencilHTMLAttributes { + /** + * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + */ + 'backdropDismiss'?: boolean; + /** + * 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[]; + /** + * Number of milliseconds to wait before dismissing the loading indicator. + */ + 'duration'?: number; + /** + * 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; + /** + * Emitted after the loading has dismissed. + */ + 'onIonLoadingDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the loading has loaded. + */ + 'onIonLoadingDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the loading has presented. + */ + 'onIonLoadingDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the loading has unloaded. + */ + 'onIonLoadingDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the loading has dismissed. + */ + 'onIonLoadingWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the loading has presented. + */ + 'onIonLoadingWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * 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 IonMenuButtonAttributes extends StencilHTMLAttributes { + /** + * 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: MenuI) => void; + '_setActiveMenu': (menu: MenuI) => void; + '_setOpen': (menu: MenuI, shouldOpen: boolean, animated: boolean) => Promise; + '_unregister': (menu: MenuI) => 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: MenuI) => 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. + */ + 'swipeGesture': (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 IonMenuControllerAttributes extends StencilHTMLAttributes {} + + interface IonMenuToggle { + /** + * Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. + */ + 'autoHide': boolean; + /** + * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. + */ + 'menu': string; + } + interface IonMenuToggleAttributes extends StencilHTMLAttributes { + /** + * Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. + */ + 'autoHide'?: boolean; + /** + * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. + */ + '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`. + */ + 'swipeGesture': boolean; + 'toggle': (animated?: boolean) => Promise; + /** + * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + */ + 'type': string; + } + interface IonMenuAttributes extends StencilHTMLAttributes { + /** + * The content's id the menu should use. + */ + 'contentId'?: string; + /** + * If true, the menu is disabled. Default `false`. + */ + 'disabled'?: 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; + /** + * Emitted when the menu is closed. + */ + 'onIonClose'?: (event: CustomEvent) => void; + /** + * Emitted when the menu state is changed. + */ + 'onIonMenuChange'?: (event: CustomEvent) => void; + /** + * Emitted when the menu is open. + */ + 'onIonOpen'?: (event: CustomEvent) => void; + /** + * Which side of the view the menu should be placed. Default `"start"`. + */ + 'side'?: Side; + /** + * If true, swiping the menu is enabled. Default `true`. + */ + 'swipeGesture'?: boolean; + /** + * 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 IonModalControllerAttributes extends StencilHTMLAttributes {} + + interface IonModal { + /** + * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss': boolean; + /** + * 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; + /** + * 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 IonModalAttributes extends StencilHTMLAttributes { + /** + * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss'?: boolean; + /** + * 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; + /** + * Animation to use when the modal is presented. + */ + 'enterAnimation'?: AnimationBuilder; + 'keyboardClose'?: boolean; + /** + * Animation to use when the modal is dismissed. + */ + 'leaveAnimation'?: AnimationBuilder; + /** + * Emitted after the modal has dismissed. + */ + 'onIonModalDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the modal has loaded. + */ + 'onIonModalDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the modal has presented. + */ + 'onIonModalDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the modal has unloaded. + */ + 'onIonModalDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the modal has dismissed. + */ + 'onIonModalWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the modal has presented. + */ + 'onIonModalWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * 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 IonNavPopAttributes extends StencilHTMLAttributes {} + + interface IonNavPush { + /** + * Component to navigate to + */ + 'component': NavComponent; + /** + * Data you want to pass to the component as props + */ + 'componentProps': ComponentProps; + } + interface IonNavPushAttributes extends StencilHTMLAttributes { + /** + * 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 IonNavSetRootAttributes extends StencilHTMLAttributes { + /** + * 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; + 'getLength': () => number; + /** + * 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; + /** + * 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 + */ + 'swipeGesture': boolean; + } + interface IonNavAttributes extends StencilHTMLAttributes { + /** + * If the nav should animate the components or not + */ + 'animated'?: boolean; + 'delegate'?: FrameworkDelegate; + /** + * Event fired when the nav has changed components + */ + 'onIonNavDidChange'?: (event: CustomEvent) => void; + /** + * Event fired when the nav will components + */ + 'onIonNavWillChange'?: (event: CustomEvent) => void; + /** + * Event fired when Nav will load a component + */ + 'onIonNavWillLoad'?: (event: CustomEvent) => void; + /** + * Root NavComponent to load + */ + 'root'?: NavComponent; + /** + * Any parameters for the root component + */ + 'rootParams'?: ComponentProps; + /** + * If the nav component should allow for swipe-to-go-back + */ + 'swipeGesture'?: 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 IonNoteAttributes extends StencilHTMLAttributes { + /** + * 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 IonPickerColumnAttributes extends StencilHTMLAttributes { + 'col'?: PickerColumn; + } + + interface IonPickerController { + 'create': (opts?: PickerOptions | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise; + 'getTop': () => HTMLIonPickerElement; + } + interface IonPickerControllerAttributes extends StencilHTMLAttributes {} + + interface IonPicker { + /** + * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss': boolean; + /** + * 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; + /** + * 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 IonPickerAttributes extends StencilHTMLAttributes { + /** + * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss'?: boolean; + /** + * 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[]; + /** + * Number of milliseconds to wait before dismissing the picker. + */ + 'duration'?: number; + /** + * Animation to use when the picker is presented. + */ + 'enterAnimation'?: AnimationBuilder; + /** + * 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; + /** + * Emitted after the picker has dismissed. + */ + 'onIonPickerDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the picker has loaded. + */ + 'onIonPickerDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the picker has presented. + */ + 'onIonPickerDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the picker has unloaded. + */ + 'onIonPickerDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the picker has dismissed. + */ + 'onIonPickerWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the picker has presented. + */ + 'onIonPickerWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * 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 IonPopoverControllerAttributes extends StencilHTMLAttributes {} + + interface IonPopover { + /** + * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss': 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 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; + /** + * Animation to use when the popover is presented. + */ + 'enterAnimation': AnimationBuilder; + /** + * The event to pass to the popover animation. + */ + 'event': 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 IonPopoverAttributes extends StencilHTMLAttributes { + /** + * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + 'backdropDismiss'?: 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 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; + /** + * Animation to use when the popover is presented. + */ + 'enterAnimation'?: AnimationBuilder; + /** + * The event to pass to the popover animation. + */ + 'event'?: 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; + /** + * Emitted after the popover has dismissed. + */ + 'onIonPopoverDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the popover has loaded. + */ + 'onIonPopoverDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the popover has presented. + */ + 'onIonPopoverDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the popover has unloaded. + */ + 'onIonPopoverDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the popover has dismissed. + */ + 'onIonPopoverWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the popover has presented. + */ + 'onIonPopoverWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * 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; + '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 IonRadioGroupAttributes extends StencilHTMLAttributes { + 'allowEmptySelection'?: boolean; + 'disabled'?: boolean; + /** + * The name of the control, which is submitted with the form data. + */ + 'name'?: string; + /** + * Emitted when the value has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * 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; + '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 IonRadioAttributes extends StencilHTMLAttributes { + /** + * 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; + '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 radio button loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the radio button has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when the radio loads. + */ + 'onIonRadioDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted when the radio unloads. + */ + 'onIonRadioDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted when the radio button is selected. + */ + 'onIonSelect'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * the value of the radio. + */ + 'value'?: string; + } + + 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; + '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': RangeValue; + } + interface IonRangeAttributes extends StencilHTMLAttributes { + /** + * 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; + '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; + /** + * Emitted when the range loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the value property has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the range has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * 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'?: RangeValue; + } + + 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 IonRefresherContentAttributes extends StencilHTMLAttributes { + /** + * 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 IonRefresherAttributes extends StencilHTMLAttributes { + /** + * Time it takes to close the refresher. Defaults to `280ms`. + */ + 'closeDuration'?: string; + /** + * If true, the refresher will be hidden. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Emitted while the user is pulling down the content and exposing the refresher. + */ + 'onIonPull'?: (event: CustomEvent) => void; + /** + * Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. + */ + 'onIonRefresh'?: (event: CustomEvent) => void; + /** + * Emitted when the user begins to start pulling down. + */ + 'onIonStart'?: (event: CustomEvent) => void; + /** + * 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 IonReorderGroupAttributes extends StencilHTMLAttributes { + /** + * If true, the reorder will be hidden. Defaults to `true`. + */ + 'disabled'?: boolean; + } + + interface IonReorder {} + interface IonReorderAttributes extends StencilHTMLAttributes {} + + interface IonRippleEffect { + /** + * Adds the ripple effect to the parent element + */ + '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 IonRippleEffectAttributes extends StencilHTMLAttributes { + '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 IonRouteRedirectAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. + */ + 'onIonRouteRedirectChanged'?: (event: CustomEvent) => void; + /** + * 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 IonRouteAttributes extends StencilHTMLAttributes { + /** + * 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}; + /** + * Used internaly by `ion-router` to know when this route did change. + */ + 'onIonRouteDataChanged'?: (event: CustomEvent) => void; + /** + * 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 IonRouterOutletAttributes extends StencilHTMLAttributes { + 'animated'?: boolean; + 'animationBuilder'?: AnimationBuilder; + 'delegate'?: FrameworkDelegate; + 'onIonNavDidChange'?: (event: CustomEvent) => void; + 'onIonNavWillChange'?: (event: CustomEvent) => void; + 'onIonNavWillLoad'?: (event: CustomEvent) => void; + } + + 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 IonRouterAttributes extends StencilHTMLAttributes { + /** + * Emitted when the route had changed + */ + 'onIonRouteDidChange'?: (event: CustomEvent) => void; + /** + * Event emitted when the route is about to change + */ + 'onIonRouteWillChange'?: (event: CustomEvent) => void; + /** + * 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 IonRowAttributes extends StencilHTMLAttributes {} + + 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; + 'focus': () => void; + /** + * 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 IonSearchbarAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * Emitted when the input loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the cancel button is clicked. + */ + 'onIonCancel'?: (event: CustomEvent) => void; + /** + * Emitted when the value has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the clear input button is clicked. + */ + 'onIonClear'?: (event: CustomEvent) => void; + /** + * Emitted when the input has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when a keyboard input ocurred. + */ + 'onIonInput'?: (event: CustomEvent) => void; + /** + * 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 IonSegmentButtonAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * Emitted when the segment button is clicked. + */ + 'onIonSelect'?: (event: CustomEvent) => void; + /** + * 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 IonSegmentAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * Emitted when the value property has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * 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': any; + } + interface IonSelectOptionAttributes extends StencilHTMLAttributes { + /** + * If true, the user cannot interact with the select option. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Emitted when the select option loads. + */ + 'onIonSelectOptionDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted when the select option unloads. + */ + 'onIonSelectOptionDidUnload'?: (event: CustomEvent) => void; + /** + * If true, the element is selected. + */ + 'selected'?: boolean; + /** + * The text value of the option. + */ + 'value'?: any; + } + + 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 IonSelectPopoverAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * 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; + 'open': (ev?: UIEvent | undefined) => Promise; + /** + * 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 IonSelectAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * 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; + /** + * Emitted when the select loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the selection is cancelled. + */ + 'onIonCancel'?: (event: CustomEvent) => void; + /** + * Emitted when the value has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the select has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * 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 IonShowWhenAttributes extends StencilHTMLAttributes { + /** + * 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 IonSkeletonTextAttributes extends StencilHTMLAttributes { + /** + * Width for the element to render at. Default is 100% + */ + 'width'?: string; + } + + interface IonSlide {} + interface IonSlideAttributes extends StencilHTMLAttributes {} + + 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 IonSlidesAttributes extends StencilHTMLAttributes { + /** + * Emitted after the active slide has changed. + */ + 'onIonSlideDidChange'?: (event: CustomEvent) => void; + /** + * Emitted when the user double taps on the slide's container. + */ + 'onIonSlideDoubleTap'?: (event: CustomEvent) => void; + /** + * Emitted when the slider is actively being moved. + */ + 'onIonSlideDrag'?: (event: CustomEvent) => void; + /** + * Emitted when the next slide has ended. + */ + 'onIonSlideNextEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the next slide has started. + */ + 'onIonSlideNextStart'?: (event: CustomEvent) => void; + /** + * Emitted when the previous slide has ended. + */ + 'onIonSlidePrevEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the previous slide has started. + */ + 'onIonSlidePrevStart'?: (event: CustomEvent) => void; + /** + * Emitted when the slider is at the last slide. + */ + 'onIonSlideReachEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the slider is at its initial position. + */ + 'onIonSlideReachStart'?: (event: CustomEvent) => void; + /** + * Emitted when the user taps/clicks on the slide's container. + */ + 'onIonSlideTap'?: (event: CustomEvent) => void; + /** + * Emitted when the user releases the touch. + */ + 'onIonSlideTouchEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the user first touches the slider. + */ + 'onIonSlideTouchStart'?: (event: CustomEvent) => void; + /** + * Emitted when the slide transition has ended. + */ + 'onIonSlideTransitionEnd'?: (event: CustomEvent) => void; + /** + * Emitted when the slide transition has started. + */ + 'onIonSlideTransitionStart'?: (event: CustomEvent) => void; + /** + * Emitted before the active slide has changed. + */ + 'onIonSlideWillChange'?: (event: CustomEvent) => void; + /** + * Emitted after Swiper initialization + */ + 'onIonSlidesDidLoad'?: (event: CustomEvent) => void; + /** + * 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; + } + + 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 IonSpinnerAttributes extends StencilHTMLAttributes { + /** + * 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 IonSplitPaneAttributes extends StencilHTMLAttributes { + /** + * If true, the split pane will be hidden. Defaults to `false`. + */ + 'disabled'?: boolean; + /** + * Emitted when the split pane is visible. + */ + 'onIonChange'?: (event: CustomEvent<{visible: boolean}>) => void; + /** + * Expression to be called when the split-pane visibility has changed + */ + 'onIonSplitPaneVisible'?: (event: CustomEvent) => void; + /** + * 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 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 button 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 IonTabAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * The URL which will be used as the `href` within this tab's button anchor. + */ + 'href'?: string; + /** + * The icon for the tab. + */ + 'icon'?: string; + /** + * The label of the tab. + */ + 'label'?: string; + /** + * The name of the tab. + */ + 'name'?: string; + /** + * Emitted when the current tab is selected. + */ + 'onIonSelect'?: (event: CustomEvent) => void; + /** + * Emitted when the tab props mutates. Used internally. + */ + 'onIonTabMutated'?: (event: CustomEvent) => void; + /** + * If true, the tab will be selected. Defaults to `false`. + */ + 'selected'?: boolean; + /** + * 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; + /** + * 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 IonTabbarAttributes extends StencilHTMLAttributes { + '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; + /** + * Emitted when the tab bar is clicked + */ + 'onIonTabbarClick'?: (event: CustomEvent) => void; + /** + * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. + */ + 'placement'?: TabbarPlacement; + /** + * 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; + /** + * 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 IonTabsAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * A unique name for the tabs. + */ + 'name'?: string; + /** + * Emitted when the tab changes. + */ + 'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void; + /** + * Emitted when the navigation has finished transitioning to a new component. + */ + 'onIonNavDidChange'?: (event: CustomEvent) => void; + /** + * Emitted when the navigation is about to transition to a new component. + */ + 'onIonNavWillChange'?: (event: CustomEvent) => void; + /** + * Emitted when the navigation will load a component. + */ + 'onIonNavWillLoad'?: (event: CustomEvent) => void; + /** + * 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 IonTextAttributes extends StencilHTMLAttributes { + /** + * 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; + /** + * 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; + 'focus': () => void; + /** + * 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 IonTextareaAttributes extends StencilHTMLAttributes { + /** + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + */ + 'autocapitalize'?: 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; + /** + * Emitted when the input loses focus. + */ + 'onIonBlur'?: (event: CustomEvent) => void; + /** + * Emitted when the input value has changed. + */ + 'onIonChange'?: (event: CustomEvent) => void; + /** + * Emitted when the input has focus. + */ + 'onIonFocus'?: (event: CustomEvent) => void; + /** + * Emitted when a keyboard input ocurred. + */ + 'onIonInput'?: (event: CustomEvent) => void; + /** + * Emitted when the styles change. + */ + 'onIonStyle'?: (event: CustomEvent) => void; + /** + * 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 IonThumbnailAttributes extends StencilHTMLAttributes {} + + 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; + } + interface IonTitleAttributes extends StencilHTMLAttributes { + /** + * 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; + } + + 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 IonToastControllerAttributes extends StencilHTMLAttributes {} + + 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 IonToastAttributes extends StencilHTMLAttributes { + /** + * 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[]; + /** + * 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; + /** + * Emitted after the toast has dismissed. + */ + 'onIonToastDidDismiss'?: (event: CustomEvent) => void; + /** + * Emitted after the toast has loaded. + */ + 'onIonToastDidLoad'?: (event: CustomEvent) => void; + /** + * Emitted after the toast has presented. + */ + 'onIonToastDidPresent'?: (event: CustomEvent) => void; + /** + * Emitted after the toast has unloaded. + */ + 'onIonToastDidUnload'?: (event: CustomEvent) => void; + /** + * Emitted before the toast has dismissed. + */ + 'onIonToastWillDismiss'?: (event: CustomEvent) => void; + /** + * Emitted before the toast has presented. + */ + 'onIonToastWillPresent'?: (event: CustomEvent) => void; + 'overlayId'?: number; + /** + * The position of the toast on the screen. Possible values: "top", "middle", "bottom". + */ + 'position'?: string; + /** + * 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; + '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 IonToggleAttributes extends StencilHTMLAttributes { + /** + * 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; + '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 value 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 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 IonToolbarAttributes extends StencilHTMLAttributes { + /** + * 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) => any; + 'renderHeader': (item: any, index: number) => any; + 'renderItem': (item: any, index: number) => any; + } + interface IonVirtualScrollAttributes extends StencilHTMLAttributes { + /** + * 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[]; + 'nodeRender'?: ItemRenderFn; + 'renderFooter'?: (item: any, index: number) => any; + 'renderHeader'?: (item: any, index: number) => any; + 'renderItem'?: (item: any, index: number) => any; + } +} + +declare global { + interface StencilElementInterfaces { + 'IonActionSheetController': Components.IonActionSheetController; + 'IonActionSheet': Components.IonActionSheet; + 'IonAlertController': Components.IonAlertController; + 'IonAlert': Components.IonAlert; + 'IonAnchor': Components.IonAnchor; + 'IonAnimationController': Components.IonAnimationController; + 'IonApp': Components.IonApp; + 'IonAvatar': Components.IonAvatar; + 'IonBackButton': Components.IonBackButton; + 'IonBackdrop': Components.IonBackdrop; + 'IonBadge': Components.IonBadge; + 'IonButton': Components.IonButton; + 'IonButtons': Components.IonButtons; + 'IonCardContent': Components.IonCardContent; + 'IonCardHeader': Components.IonCardHeader; + 'IonCardSubtitle': Components.IonCardSubtitle; + 'IonCardTitle': Components.IonCardTitle; + 'IonCard': Components.IonCard; + 'IonCheckbox': Components.IonCheckbox; + 'IonChipButton': Components.IonChipButton; + 'IonChipIcon': Components.IonChipIcon; + 'IonChip': Components.IonChip; + 'IonCol': Components.IonCol; + 'IonContent': Components.IonContent; + 'IonDatetime': Components.IonDatetime; + 'IonFabButton': Components.IonFabButton; + 'IonFabList': Components.IonFabList; + 'IonFab': Components.IonFab; + 'IonFooter': Components.IonFooter; + 'IonGrid': Components.IonGrid; + 'IonHeader': Components.IonHeader; + 'IonHideWhen': Components.IonHideWhen; + 'IonImg': Components.IonImg; + 'IonInfiniteScrollContent': Components.IonInfiniteScrollContent; + 'IonInfiniteScroll': Components.IonInfiniteScroll; + 'IonInput': Components.IonInput; + 'IonItemDivider': Components.IonItemDivider; + 'IonItemGroup': Components.IonItemGroup; + 'IonItemOption': Components.IonItemOption; + 'IonItemOptions': Components.IonItemOptions; + 'IonItemSliding': Components.IonItemSliding; + 'IonItem': Components.IonItem; + 'IonLabel': Components.IonLabel; + 'IonListHeader': Components.IonListHeader; + 'IonList': Components.IonList; + 'IonLoadingController': Components.IonLoadingController; + 'IonLoading': Components.IonLoading; + 'IonMenuButton': Components.IonMenuButton; + 'IonMenuController': Components.IonMenuController; + 'IonMenuToggle': Components.IonMenuToggle; + 'IonMenu': Components.IonMenu; + 'IonModalController': Components.IonModalController; + 'IonModal': Components.IonModal; + 'IonNavPop': Components.IonNavPop; + 'IonNavPush': Components.IonNavPush; + 'IonNavSetRoot': Components.IonNavSetRoot; + 'IonNav': Components.IonNav; + 'IonNote': Components.IonNote; + 'IonPickerColumn': Components.IonPickerColumn; + 'IonPickerController': Components.IonPickerController; + 'IonPicker': Components.IonPicker; + 'IonPopoverController': Components.IonPopoverController; + 'IonPopover': Components.IonPopover; + 'IonRadioGroup': Components.IonRadioGroup; + 'IonRadio': Components.IonRadio; + 'IonRange': Components.IonRange; + 'IonRefresherContent': Components.IonRefresherContent; + 'IonRefresher': Components.IonRefresher; + 'IonReorderGroup': Components.IonReorderGroup; + 'IonReorder': Components.IonReorder; + 'IonRippleEffect': Components.IonRippleEffect; + 'IonRouteRedirect': Components.IonRouteRedirect; + 'IonRoute': Components.IonRoute; + 'IonRouterOutlet': Components.IonRouterOutlet; + 'IonRouter': Components.IonRouter; + 'IonRow': Components.IonRow; + 'IonSearchbar': Components.IonSearchbar; + 'IonSegmentButton': Components.IonSegmentButton; + 'IonSegment': Components.IonSegment; + 'IonSelectOption': Components.IonSelectOption; + 'IonSelectPopover': Components.IonSelectPopover; + 'IonSelect': Components.IonSelect; + 'IonShowWhen': Components.IonShowWhen; + 'IonSkeletonText': Components.IonSkeletonText; + 'IonSlide': Components.IonSlide; + 'IonSlides': Components.IonSlides; + 'IonSpinner': Components.IonSpinner; + 'IonSplitPane': Components.IonSplitPane; + 'IonTab': Components.IonTab; + 'IonTabbar': Components.IonTabbar; + 'IonTabs': Components.IonTabs; + 'IonText': Components.IonText; + 'IonTextarea': Components.IonTextarea; + 'IonThumbnail': Components.IonThumbnail; + 'IonTitle': Components.IonTitle; + 'IonToastController': Components.IonToastController; + 'IonToast': Components.IonToast; + 'IonToggle': Components.IonToggle; + 'IonToolbar': Components.IonToolbar; + 'IonVirtualScroll': Components.IonVirtualScroll; + } + + interface StencilIntrinsicElements { + 'ion-action-sheet-controller': Components.IonActionSheetControllerAttributes; + 'ion-action-sheet': Components.IonActionSheetAttributes; + 'ion-alert-controller': Components.IonAlertControllerAttributes; + 'ion-alert': Components.IonAlertAttributes; + 'ion-anchor': Components.IonAnchorAttributes; + 'ion-animation-controller': Components.IonAnimationControllerAttributes; + 'ion-app': Components.IonAppAttributes; + 'ion-avatar': Components.IonAvatarAttributes; + 'ion-back-button': Components.IonBackButtonAttributes; + 'ion-backdrop': Components.IonBackdropAttributes; + 'ion-badge': Components.IonBadgeAttributes; + 'ion-button': Components.IonButtonAttributes; + 'ion-buttons': Components.IonButtonsAttributes; + 'ion-card-content': Components.IonCardContentAttributes; + 'ion-card-header': Components.IonCardHeaderAttributes; + 'ion-card-subtitle': Components.IonCardSubtitleAttributes; + 'ion-card-title': Components.IonCardTitleAttributes; + 'ion-card': Components.IonCardAttributes; + 'ion-checkbox': Components.IonCheckboxAttributes; + 'ion-chip-button': Components.IonChipButtonAttributes; + 'ion-chip-icon': Components.IonChipIconAttributes; + 'ion-chip': Components.IonChipAttributes; + 'ion-col': Components.IonColAttributes; + 'ion-content': Components.IonContentAttributes; + 'ion-datetime': Components.IonDatetimeAttributes; + 'ion-fab-button': Components.IonFabButtonAttributes; + 'ion-fab-list': Components.IonFabListAttributes; + 'ion-fab': Components.IonFabAttributes; + 'ion-footer': Components.IonFooterAttributes; + 'ion-grid': Components.IonGridAttributes; + 'ion-header': Components.IonHeaderAttributes; + 'ion-hide-when': Components.IonHideWhenAttributes; + 'ion-img': Components.IonImgAttributes; + 'ion-infinite-scroll-content': Components.IonInfiniteScrollContentAttributes; + 'ion-infinite-scroll': Components.IonInfiniteScrollAttributes; + 'ion-input': Components.IonInputAttributes; + 'ion-item-divider': Components.IonItemDividerAttributes; + 'ion-item-group': Components.IonItemGroupAttributes; + 'ion-item-option': Components.IonItemOptionAttributes; + 'ion-item-options': Components.IonItemOptionsAttributes; + 'ion-item-sliding': Components.IonItemSlidingAttributes; + 'ion-item': Components.IonItemAttributes; + 'ion-label': Components.IonLabelAttributes; + 'ion-list-header': Components.IonListHeaderAttributes; + 'ion-list': Components.IonListAttributes; + 'ion-loading-controller': Components.IonLoadingControllerAttributes; + 'ion-loading': Components.IonLoadingAttributes; + 'ion-menu-button': Components.IonMenuButtonAttributes; + 'ion-menu-controller': Components.IonMenuControllerAttributes; + 'ion-menu-toggle': Components.IonMenuToggleAttributes; + 'ion-menu': Components.IonMenuAttributes; + 'ion-modal-controller': Components.IonModalControllerAttributes; + 'ion-modal': Components.IonModalAttributes; + 'ion-nav-pop': Components.IonNavPopAttributes; + 'ion-nav-push': Components.IonNavPushAttributes; + 'ion-nav-set-root': Components.IonNavSetRootAttributes; + 'ion-nav': Components.IonNavAttributes; + 'ion-note': Components.IonNoteAttributes; + 'ion-picker-column': Components.IonPickerColumnAttributes; + 'ion-picker-controller': Components.IonPickerControllerAttributes; + 'ion-picker': Components.IonPickerAttributes; + 'ion-popover-controller': Components.IonPopoverControllerAttributes; + 'ion-popover': Components.IonPopoverAttributes; + 'ion-radio-group': Components.IonRadioGroupAttributes; + 'ion-radio': Components.IonRadioAttributes; + 'ion-range': Components.IonRangeAttributes; + 'ion-refresher-content': Components.IonRefresherContentAttributes; + 'ion-refresher': Components.IonRefresherAttributes; + 'ion-reorder-group': Components.IonReorderGroupAttributes; + 'ion-reorder': Components.IonReorderAttributes; + 'ion-ripple-effect': Components.IonRippleEffectAttributes; + 'ion-route-redirect': Components.IonRouteRedirectAttributes; + 'ion-route': Components.IonRouteAttributes; + 'ion-router-outlet': Components.IonRouterOutletAttributes; + 'ion-router': Components.IonRouterAttributes; + 'ion-row': Components.IonRowAttributes; + 'ion-searchbar': Components.IonSearchbarAttributes; + 'ion-segment-button': Components.IonSegmentButtonAttributes; + 'ion-segment': Components.IonSegmentAttributes; + 'ion-select-option': Components.IonSelectOptionAttributes; + 'ion-select-popover': Components.IonSelectPopoverAttributes; + 'ion-select': Components.IonSelectAttributes; + 'ion-show-when': Components.IonShowWhenAttributes; + 'ion-skeleton-text': Components.IonSkeletonTextAttributes; + 'ion-slide': Components.IonSlideAttributes; + 'ion-slides': Components.IonSlidesAttributes; + 'ion-spinner': Components.IonSpinnerAttributes; + 'ion-split-pane': Components.IonSplitPaneAttributes; + 'ion-tab': Components.IonTabAttributes; + 'ion-tabbar': Components.IonTabbarAttributes; + 'ion-tabs': Components.IonTabsAttributes; + 'ion-text': Components.IonTextAttributes; + 'ion-textarea': Components.IonTextareaAttributes; + 'ion-thumbnail': Components.IonThumbnailAttributes; + 'ion-title': Components.IonTitleAttributes; + 'ion-toast-controller': Components.IonToastControllerAttributes; + 'ion-toast': Components.IonToastAttributes; + 'ion-toggle': Components.IonToggleAttributes; + 'ion-toolbar': Components.IonToolbarAttributes; + 'ion-virtual-scroll': Components.IonVirtualScrollAttributes; + } + + + interface HTMLIonActionSheetControllerElement extends Components.IonActionSheetController, HTMLStencilElement {} + var HTMLIonActionSheetControllerElement: { + prototype: HTMLIonActionSheetControllerElement; + new (): HTMLIonActionSheetControllerElement; + }; + + interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {} + var HTMLIonActionSheetElement: { + prototype: HTMLIonActionSheetElement; + new (): HTMLIonActionSheetElement; + }; + + interface HTMLIonAlertControllerElement extends Components.IonAlertController, HTMLStencilElement {} + var HTMLIonAlertControllerElement: { + prototype: HTMLIonAlertControllerElement; + new (): HTMLIonAlertControllerElement; + }; + + interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {} + var HTMLIonAlertElement: { + prototype: HTMLIonAlertElement; + new (): HTMLIonAlertElement; + }; + + interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {} + var HTMLIonAnchorElement: { + prototype: HTMLIonAnchorElement; + new (): HTMLIonAnchorElement; + }; + + interface HTMLIonAnimationControllerElement extends Components.IonAnimationController, HTMLStencilElement {} + var HTMLIonAnimationControllerElement: { + prototype: HTMLIonAnimationControllerElement; + new (): HTMLIonAnimationControllerElement; + }; + + interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {} + var HTMLIonAppElement: { + prototype: HTMLIonAppElement; + new (): HTMLIonAppElement; + }; + + interface HTMLIonAvatarElement extends Components.IonAvatar, HTMLStencilElement {} + var HTMLIonAvatarElement: { + prototype: HTMLIonAvatarElement; + new (): HTMLIonAvatarElement; + }; + + interface HTMLIonBackButtonElement extends Components.IonBackButton, HTMLStencilElement {} + var HTMLIonBackButtonElement: { + prototype: HTMLIonBackButtonElement; + new (): HTMLIonBackButtonElement; + }; + + interface HTMLIonBackdropElement extends Components.IonBackdrop, HTMLStencilElement {} + var HTMLIonBackdropElement: { + prototype: HTMLIonBackdropElement; + new (): HTMLIonBackdropElement; + }; + + interface HTMLIonBadgeElement extends Components.IonBadge, HTMLStencilElement {} + var HTMLIonBadgeElement: { + prototype: HTMLIonBadgeElement; + new (): HTMLIonBadgeElement; + }; + + interface HTMLIonButtonElement extends Components.IonButton, HTMLStencilElement {} + var HTMLIonButtonElement: { + prototype: HTMLIonButtonElement; + new (): HTMLIonButtonElement; + }; + + interface HTMLIonButtonsElement extends Components.IonButtons, HTMLStencilElement {} + var HTMLIonButtonsElement: { + prototype: HTMLIonButtonsElement; + new (): HTMLIonButtonsElement; + }; + + interface HTMLIonCardContentElement extends Components.IonCardContent, HTMLStencilElement {} + var HTMLIonCardContentElement: { + prototype: HTMLIonCardContentElement; + new (): HTMLIonCardContentElement; + }; + + interface HTMLIonCardHeaderElement extends Components.IonCardHeader, HTMLStencilElement {} + var HTMLIonCardHeaderElement: { + prototype: HTMLIonCardHeaderElement; + new (): HTMLIonCardHeaderElement; + }; + + interface HTMLIonCardSubtitleElement extends Components.IonCardSubtitle, HTMLStencilElement {} + var HTMLIonCardSubtitleElement: { + prototype: HTMLIonCardSubtitleElement; + new (): HTMLIonCardSubtitleElement; + }; + + interface HTMLIonCardTitleElement extends Components.IonCardTitle, HTMLStencilElement {} + var HTMLIonCardTitleElement: { + prototype: HTMLIonCardTitleElement; + new (): HTMLIonCardTitleElement; + }; + + interface HTMLIonCardElement extends Components.IonCard, HTMLStencilElement {} + var HTMLIonCardElement: { + prototype: HTMLIonCardElement; + new (): HTMLIonCardElement; + }; + + interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {} + var HTMLIonCheckboxElement: { + prototype: HTMLIonCheckboxElement; + new (): HTMLIonCheckboxElement; + }; + + interface HTMLIonChipButtonElement extends Components.IonChipButton, HTMLStencilElement {} + var HTMLIonChipButtonElement: { + prototype: HTMLIonChipButtonElement; + new (): HTMLIonChipButtonElement; + }; + + interface HTMLIonChipIconElement extends Components.IonChipIcon, HTMLStencilElement {} + var HTMLIonChipIconElement: { + prototype: HTMLIonChipIconElement; + new (): HTMLIonChipIconElement; + }; + + interface HTMLIonChipElement extends Components.IonChip, HTMLStencilElement {} + var HTMLIonChipElement: { + prototype: HTMLIonChipElement; + new (): HTMLIonChipElement; + }; + + interface HTMLIonColElement extends Components.IonCol, HTMLStencilElement {} + var HTMLIonColElement: { + prototype: HTMLIonColElement; + new (): HTMLIonColElement; + }; + + interface HTMLIonContentElement extends Components.IonContent, HTMLStencilElement {} + var HTMLIonContentElement: { + prototype: HTMLIonContentElement; + new (): HTMLIonContentElement; + }; + + interface HTMLIonDatetimeElement extends Components.IonDatetime, HTMLStencilElement {} + var HTMLIonDatetimeElement: { + prototype: HTMLIonDatetimeElement; + new (): HTMLIonDatetimeElement; + }; + + interface HTMLIonFabButtonElement extends Components.IonFabButton, HTMLStencilElement {} + var HTMLIonFabButtonElement: { + prototype: HTMLIonFabButtonElement; + new (): HTMLIonFabButtonElement; + }; + + interface HTMLIonFabListElement extends Components.IonFabList, HTMLStencilElement {} + var HTMLIonFabListElement: { + prototype: HTMLIonFabListElement; + new (): HTMLIonFabListElement; + }; + + interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {} + var HTMLIonFabElement: { + prototype: HTMLIonFabElement; + new (): HTMLIonFabElement; + }; + + interface HTMLIonFooterElement extends Components.IonFooter, HTMLStencilElement {} + var HTMLIonFooterElement: { + prototype: HTMLIonFooterElement; + new (): HTMLIonFooterElement; + }; + + interface HTMLIonGridElement extends Components.IonGrid, HTMLStencilElement {} + var HTMLIonGridElement: { + prototype: HTMLIonGridElement; + new (): HTMLIonGridElement; + }; + + interface HTMLIonHeaderElement extends Components.IonHeader, HTMLStencilElement {} + var HTMLIonHeaderElement: { + prototype: HTMLIonHeaderElement; + new (): HTMLIonHeaderElement; + }; + + interface HTMLIonHideWhenElement extends Components.IonHideWhen, HTMLStencilElement {} + var HTMLIonHideWhenElement: { + prototype: HTMLIonHideWhenElement; + new (): HTMLIonHideWhenElement; + }; + + interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {} + var HTMLIonImgElement: { + prototype: HTMLIonImgElement; + new (): HTMLIonImgElement; + }; + + interface HTMLIonInfiniteScrollContentElement extends Components.IonInfiniteScrollContent, HTMLStencilElement {} + var HTMLIonInfiniteScrollContentElement: { + prototype: HTMLIonInfiniteScrollContentElement; + new (): HTMLIonInfiniteScrollContentElement; + }; + + interface HTMLIonInfiniteScrollElement extends Components.IonInfiniteScroll, HTMLStencilElement {} + var HTMLIonInfiniteScrollElement: { + prototype: HTMLIonInfiniteScrollElement; + new (): HTMLIonInfiniteScrollElement; + }; + + interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {} + var HTMLIonInputElement: { + prototype: HTMLIonInputElement; + new (): HTMLIonInputElement; + }; + + interface HTMLIonItemDividerElement extends Components.IonItemDivider, HTMLStencilElement {} + var HTMLIonItemDividerElement: { + prototype: HTMLIonItemDividerElement; + new (): HTMLIonItemDividerElement; + }; + + interface HTMLIonItemGroupElement extends Components.IonItemGroup, HTMLStencilElement {} + var HTMLIonItemGroupElement: { + prototype: HTMLIonItemGroupElement; + new (): HTMLIonItemGroupElement; + }; + + interface HTMLIonItemOptionElement extends Components.IonItemOption, HTMLStencilElement {} + var HTMLIonItemOptionElement: { + prototype: HTMLIonItemOptionElement; + new (): HTMLIonItemOptionElement; + }; + + interface HTMLIonItemOptionsElement extends Components.IonItemOptions, HTMLStencilElement {} + var HTMLIonItemOptionsElement: { + prototype: HTMLIonItemOptionsElement; + new (): HTMLIonItemOptionsElement; + }; + + interface HTMLIonItemSlidingElement extends Components.IonItemSliding, HTMLStencilElement {} + var HTMLIonItemSlidingElement: { + prototype: HTMLIonItemSlidingElement; + new (): HTMLIonItemSlidingElement; + }; + + interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {} + var HTMLIonItemElement: { + prototype: HTMLIonItemElement; + new (): HTMLIonItemElement; + }; + + interface HTMLIonLabelElement extends Components.IonLabel, HTMLStencilElement {} + var HTMLIonLabelElement: { + prototype: HTMLIonLabelElement; + new (): HTMLIonLabelElement; + }; + + interface HTMLIonListHeaderElement extends Components.IonListHeader, HTMLStencilElement {} + var HTMLIonListHeaderElement: { + prototype: HTMLIonListHeaderElement; + new (): HTMLIonListHeaderElement; + }; + + interface HTMLIonListElement extends Components.IonList, HTMLStencilElement {} + var HTMLIonListElement: { + prototype: HTMLIonListElement; + new (): HTMLIonListElement; + }; + + interface HTMLIonLoadingControllerElement extends Components.IonLoadingController, HTMLStencilElement {} + var HTMLIonLoadingControllerElement: { + prototype: HTMLIonLoadingControllerElement; + new (): HTMLIonLoadingControllerElement; + }; + + interface HTMLIonLoadingElement extends Components.IonLoading, HTMLStencilElement {} + var HTMLIonLoadingElement: { + prototype: HTMLIonLoadingElement; + new (): HTMLIonLoadingElement; + }; + + interface HTMLIonMenuButtonElement extends Components.IonMenuButton, HTMLStencilElement {} + var HTMLIonMenuButtonElement: { + prototype: HTMLIonMenuButtonElement; + new (): HTMLIonMenuButtonElement; + }; + + interface HTMLIonMenuControllerElement extends Components.IonMenuController, HTMLStencilElement {} + var HTMLIonMenuControllerElement: { + prototype: HTMLIonMenuControllerElement; + new (): HTMLIonMenuControllerElement; + }; + + interface HTMLIonMenuToggleElement extends Components.IonMenuToggle, HTMLStencilElement {} + var HTMLIonMenuToggleElement: { + prototype: HTMLIonMenuToggleElement; + new (): HTMLIonMenuToggleElement; + }; + + interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {} + var HTMLIonMenuElement: { + prototype: HTMLIonMenuElement; + new (): HTMLIonMenuElement; + }; + + interface HTMLIonModalControllerElement extends Components.IonModalController, HTMLStencilElement {} + var HTMLIonModalControllerElement: { + prototype: HTMLIonModalControllerElement; + new (): HTMLIonModalControllerElement; + }; + + interface HTMLIonModalElement extends Components.IonModal, HTMLStencilElement {} + var HTMLIonModalElement: { + prototype: HTMLIonModalElement; + new (): HTMLIonModalElement; + }; + + interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {} + var HTMLIonNavPopElement: { + prototype: HTMLIonNavPopElement; + new (): HTMLIonNavPopElement; + }; + + interface HTMLIonNavPushElement extends Components.IonNavPush, HTMLStencilElement {} + var HTMLIonNavPushElement: { + prototype: HTMLIonNavPushElement; + new (): HTMLIonNavPushElement; + }; + + interface HTMLIonNavSetRootElement extends Components.IonNavSetRoot, HTMLStencilElement {} + var HTMLIonNavSetRootElement: { + prototype: HTMLIonNavSetRootElement; + new (): HTMLIonNavSetRootElement; + }; + + interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {} + var HTMLIonNavElement: { + prototype: HTMLIonNavElement; + new (): HTMLIonNavElement; + }; + + interface HTMLIonNoteElement extends Components.IonNote, HTMLStencilElement {} + var HTMLIonNoteElement: { + prototype: HTMLIonNoteElement; + new (): HTMLIonNoteElement; + }; + + interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {} + var HTMLIonPickerColumnElement: { + prototype: HTMLIonPickerColumnElement; + new (): HTMLIonPickerColumnElement; + }; + + interface HTMLIonPickerControllerElement extends Components.IonPickerController, HTMLStencilElement {} + var HTMLIonPickerControllerElement: { + prototype: HTMLIonPickerControllerElement; + new (): HTMLIonPickerControllerElement; + }; + + interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement {} + var HTMLIonPickerElement: { + prototype: HTMLIonPickerElement; + new (): HTMLIonPickerElement; + }; + + interface HTMLIonPopoverControllerElement extends Components.IonPopoverController, HTMLStencilElement {} + var HTMLIonPopoverControllerElement: { + prototype: HTMLIonPopoverControllerElement; + new (): HTMLIonPopoverControllerElement; + }; + + interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {} + var HTMLIonPopoverElement: { + prototype: HTMLIonPopoverElement; + new (): HTMLIonPopoverElement; + }; + + interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {} + var HTMLIonRadioGroupElement: { + prototype: HTMLIonRadioGroupElement; + new (): HTMLIonRadioGroupElement; + }; + + interface HTMLIonRadioElement extends Components.IonRadio, HTMLStencilElement {} + var HTMLIonRadioElement: { + prototype: HTMLIonRadioElement; + new (): HTMLIonRadioElement; + }; + + interface HTMLIonRangeElement extends Components.IonRange, HTMLStencilElement {} + var HTMLIonRangeElement: { + prototype: HTMLIonRangeElement; + new (): HTMLIonRangeElement; + }; + + interface HTMLIonRefresherContentElement extends Components.IonRefresherContent, HTMLStencilElement {} + var HTMLIonRefresherContentElement: { + prototype: HTMLIonRefresherContentElement; + new (): HTMLIonRefresherContentElement; + }; + + interface HTMLIonRefresherElement extends Components.IonRefresher, HTMLStencilElement {} + var HTMLIonRefresherElement: { + prototype: HTMLIonRefresherElement; + new (): HTMLIonRefresherElement; + }; + + interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {} + var HTMLIonReorderGroupElement: { + prototype: HTMLIonReorderGroupElement; + new (): HTMLIonReorderGroupElement; + }; + + interface HTMLIonReorderElement extends Components.IonReorder, HTMLStencilElement {} + var HTMLIonReorderElement: { + prototype: HTMLIonReorderElement; + new (): HTMLIonReorderElement; + }; + + interface HTMLIonRippleEffectElement extends Components.IonRippleEffect, HTMLStencilElement {} + var HTMLIonRippleEffectElement: { + prototype: HTMLIonRippleEffectElement; + new (): HTMLIonRippleEffectElement; + }; + + interface HTMLIonRouteRedirectElement extends Components.IonRouteRedirect, HTMLStencilElement {} + var HTMLIonRouteRedirectElement: { + prototype: HTMLIonRouteRedirectElement; + new (): HTMLIonRouteRedirectElement; + }; + + interface HTMLIonRouteElement extends Components.IonRoute, HTMLStencilElement {} + var HTMLIonRouteElement: { + prototype: HTMLIonRouteElement; + new (): HTMLIonRouteElement; + }; + + interface HTMLIonRouterOutletElement extends Components.IonRouterOutlet, HTMLStencilElement {} + var HTMLIonRouterOutletElement: { + prototype: HTMLIonRouterOutletElement; + new (): HTMLIonRouterOutletElement; + }; + + interface HTMLIonRouterElement extends Components.IonRouter, HTMLStencilElement {} + var HTMLIonRouterElement: { + prototype: HTMLIonRouterElement; + new (): HTMLIonRouterElement; + }; + + interface HTMLIonRowElement extends Components.IonRow, HTMLStencilElement {} + var HTMLIonRowElement: { + prototype: HTMLIonRowElement; + new (): HTMLIonRowElement; + }; + + interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {} + var HTMLIonSearchbarElement: { + prototype: HTMLIonSearchbarElement; + new (): HTMLIonSearchbarElement; + }; + + interface HTMLIonSegmentButtonElement extends Components.IonSegmentButton, HTMLStencilElement {} + var HTMLIonSegmentButtonElement: { + prototype: HTMLIonSegmentButtonElement; + new (): HTMLIonSegmentButtonElement; + }; + + interface HTMLIonSegmentElement extends Components.IonSegment, HTMLStencilElement {} + var HTMLIonSegmentElement: { + prototype: HTMLIonSegmentElement; + new (): HTMLIonSegmentElement; + }; + + interface HTMLIonSelectOptionElement extends Components.IonSelectOption, HTMLStencilElement {} + var HTMLIonSelectOptionElement: { + prototype: HTMLIonSelectOptionElement; + new (): HTMLIonSelectOptionElement; + }; + + interface HTMLIonSelectPopoverElement extends Components.IonSelectPopover, HTMLStencilElement {} + var HTMLIonSelectPopoverElement: { + prototype: HTMLIonSelectPopoverElement; + new (): HTMLIonSelectPopoverElement; + }; + + interface HTMLIonSelectElement extends Components.IonSelect, HTMLStencilElement {} + var HTMLIonSelectElement: { + prototype: HTMLIonSelectElement; + new (): HTMLIonSelectElement; + }; + + interface HTMLIonShowWhenElement extends Components.IonShowWhen, HTMLStencilElement {} + var HTMLIonShowWhenElement: { + prototype: HTMLIonShowWhenElement; + new (): HTMLIonShowWhenElement; + }; + + interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement {} + var HTMLIonSkeletonTextElement: { + prototype: HTMLIonSkeletonTextElement; + new (): HTMLIonSkeletonTextElement; + }; + + interface HTMLIonSlideElement extends Components.IonSlide, HTMLStencilElement {} + var HTMLIonSlideElement: { + prototype: HTMLIonSlideElement; + new (): HTMLIonSlideElement; + }; + + interface HTMLIonSlidesElement extends Components.IonSlides, HTMLStencilElement {} + var HTMLIonSlidesElement: { + prototype: HTMLIonSlidesElement; + new (): HTMLIonSlidesElement; + }; + + interface HTMLIonSpinnerElement extends Components.IonSpinner, HTMLStencilElement {} + var HTMLIonSpinnerElement: { + prototype: HTMLIonSpinnerElement; + new (): HTMLIonSpinnerElement; + }; + + interface HTMLIonSplitPaneElement extends Components.IonSplitPane, HTMLStencilElement {} + var HTMLIonSplitPaneElement: { + prototype: HTMLIonSplitPaneElement; + new (): HTMLIonSplitPaneElement; + }; + + interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {} + var HTMLIonTabElement: { + prototype: HTMLIonTabElement; + new (): HTMLIonTabElement; + }; + + interface HTMLIonTabbarElement extends Components.IonTabbar, HTMLStencilElement {} + var HTMLIonTabbarElement: { + prototype: HTMLIonTabbarElement; + new (): HTMLIonTabbarElement; + }; + + interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {} + var HTMLIonTabsElement: { + prototype: HTMLIonTabsElement; + new (): HTMLIonTabsElement; + }; + + interface HTMLIonTextElement extends Components.IonText, HTMLStencilElement {} + var HTMLIonTextElement: { + prototype: HTMLIonTextElement; + new (): HTMLIonTextElement; + }; + + interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {} + var HTMLIonTextareaElement: { + prototype: HTMLIonTextareaElement; + new (): HTMLIonTextareaElement; + }; + + interface HTMLIonThumbnailElement extends Components.IonThumbnail, HTMLStencilElement {} + var HTMLIonThumbnailElement: { + prototype: HTMLIonThumbnailElement; + new (): HTMLIonThumbnailElement; + }; + + interface HTMLIonTitleElement extends Components.IonTitle, HTMLStencilElement {} + var HTMLIonTitleElement: { + prototype: HTMLIonTitleElement; + new (): HTMLIonTitleElement; + }; + + interface HTMLIonToastControllerElement extends Components.IonToastController, HTMLStencilElement {} + var HTMLIonToastControllerElement: { + prototype: HTMLIonToastControllerElement; + new (): HTMLIonToastControllerElement; + }; + + interface HTMLIonToastElement extends Components.IonToast, HTMLStencilElement {} + var HTMLIonToastElement: { + prototype: HTMLIonToastElement; + new (): HTMLIonToastElement; + }; + + interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {} + var HTMLIonToggleElement: { + prototype: HTMLIonToggleElement; + new (): HTMLIonToggleElement; + }; + + interface HTMLIonToolbarElement extends Components.IonToolbar, HTMLStencilElement {} + var HTMLIonToolbarElement: { + prototype: HTMLIonToolbarElement; + new (): HTMLIonToolbarElement; + }; + + interface HTMLIonVirtualScrollElement extends Components.IonVirtualScroll, HTMLStencilElement {} + var HTMLIonVirtualScrollElement: { + prototype: HTMLIonVirtualScrollElement; + new (): HTMLIonVirtualScrollElement; + }; + + 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': 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-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': 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': 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-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': 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; + } + + + export namespace JSX { + export interface Element {} + export interface IntrinsicElements extends StencilIntrinsicElements { + [tagName: string]: any; + } + } + export interface HTMLAttributes extends StencilHTMLAttributes {} + +} diff --git a/core/src/generated.d.ts b/core/src/generated.d.ts deleted file mode 100644 index 24f888462d..0000000000 --- a/core/src/generated.d.ts +++ /dev/null @@ -1,6196 +0,0 @@ -/** -* 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 { JSXElements } from '@stencil/core'; - -import { LocalIntrinsicElements as DependentIntrinsicElements1, LocalElementInterfaces as LocalElementInterfaces1 } from 'ionicons'; - -import { - ActionSheetButton, - ActionSheetOptions, - AlertButton, - AlertInput, - AlertOptions, - Animation, - AnimationBuilder, - CheckedInputChangeEvent, - Color, - ComponentProps, - ComponentRef, - DomRenderFn, - FrameworkDelegate, - HeaderFn, - InputChangeEvent, - ItemHeightFn, - ItemRenderFn, - LoadingOptions, - MenuChangeEventDetail, - MenuI, - ModalOptions, - Mode, - NavComponent, - NavOptions, - OverlayEventDetail, - PickerButton, - PickerColumn, - PickerOptions, - PopoverOptions, - RangeValue, - RouteID, - RouterDirection, - RouterEventDetail, - RouterOutletOptions, - RouteWrite, - ScrollBaseDetail, - ScrollDetail, - SelectInputChangeEvent, - SelectInterface, - SelectPopoverOption, - Side, - StyleEvent, - TabbarLayout, - TabbarPlacement, - TextFieldTypes, - TextInputChangeEvent, - ToastOptions, - TransitionDoneFn, - TransitionInstruction, - ViewController, -} from './interface'; -import { - EventEmitter, -} from '@stencil/core'; - - - -interface IonActionSheetController { - /** - * Create an action sheet overlay with action sheet options. - */ - 'create': (opts?: ActionSheetOptions | undefined) => Promise; - /** - * Dismiss the open action sheet overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise; - /** - * Get the most recently opened action sheet overlay. - */ - 'getTop': () => HTMLIonActionSheetElement; -} -interface IonActionSheetControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonActionSheet { - /** - * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss': boolean; - /** - * 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[]; - /** - * Dismiss the action sheet overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * 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; - /** - * Returns a promise that resolves when the action-sheet 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 action-sheet will dismiss. It also accepts a callback that is called in the same circustances. - */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; - /** - * Unique ID to be used with the overlay. Internal only - */ - 'overlayId': number; - /** - * Present the action sheet overlay after it has been created. - */ - 'present': () => Promise; - /** - * 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; -} -interface IonActionSheetAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss'?: boolean; - /** - * 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[]; - /** - * 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; -} - -interface IonAlertController { - /** - * Create an alert overlay with alert options - */ - 'create': (opts?: AlertOptions | undefined) => Promise; - /** - * Dismiss the open alert overlay. - */ - 'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise; - /** - * Get the most recently opened alert overlay. - */ - 'getTop': () => HTMLIonAlertElement; -} -interface IonAlertControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonAlert { - /** - * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss': boolean; - /** - * 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[]; - /** - * Dismiss the alert overlay after it has been presented. - */ - 'dismiss': (data?: any, role?: string | undefined) => Promise; - /** - * 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; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * Returns a promise that resolves when the alert 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 alert 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 alert overlay after it has been created. - */ - 'present': () => Promise; - /** - * 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; -} -interface IonAlertAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss'?: boolean; - /** - * 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[]; - /** - * 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; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - '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; -} - -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). - */ - '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; -} -interface IonAnchorAttributes extends JSXElements.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; -} - -interface IonAnimationController { - /** - * Creates an animation instance - */ - 'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise; -} -interface IonAnimationControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonApp {} -interface IonAppAttributes extends JSXElements.HTMLAttributes {} - -interface IonAvatar {} -interface IonAvatarAttributes extends JSXElements.HTMLAttributes {} - -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). - */ - '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; -} -interface IonBackButtonAttributes extends JSXElements.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; -} - -interface IonBackdrop { - /** - * 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; -} -interface IonBackdropAttributes extends JSXElements.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; -} - -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). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonBadgeAttributes extends JSXElements.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; -} - -interface IonButton { - /** - * 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; - /** - * 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'; -} -interface IonButtonAttributes extends JSXElements.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'; -} - -interface IonButtons {} -interface IonButtonsAttributes extends JSXElements.HTMLAttributes {} - -interface IonCardContent { - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonCardContentAttributes extends JSXElements.HTMLAttributes { - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; -} - -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). - */ - '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; -} -interface IonCardHeaderAttributes extends JSXElements.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; -} - -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). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonCardSubtitleAttributes extends JSXElements.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; -} - -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). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonCardTitleAttributes extends JSXElements.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; -} - -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). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonCardAttributes extends JSXElements.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; -} - -interface IonCheckbox { - /** - * 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; - /** - * The value of the checkbox. - */ - 'value': string; -} -interface IonCheckboxAttributes extends JSXElements.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; -} - -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). - */ - 'color': Color; - /** - * If true, the user cannot interact with the chip button. Defaults to `false`. - */ - 'disabled': boolean; - /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. - */ - 'fill': 'clear' | 'solid'; - /** - * 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 IonChipButtonAttributes extends JSXElements.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 or to `"solid"` for a filled background. Defaults to `"clear"`. - */ - 'fill'?: 'clear' | 'solid'; - /** - * 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 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). - */ - 'color': Color; - /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. - */ - 'fill': 'clear' | 'solid'; - /** - * 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; - /** - * The icon src to use. Possible values are the same as `"ion-icon"`. - */ - 'src': string; -} -interface IonChipIconAttributes extends JSXElements.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; - /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. - */ - 'fill'?: 'clear' | 'solid'; - /** - * 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; - /** - * The icon src to use. Possible values are the same as `"ion-icon"`. - */ - 'src'?: string; -} - -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). - */ - 'color': Color; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; -} -interface IonChipAttributes extends JSXElements.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; -} - -interface IonCol { - /** - * 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; -} -interface IonColAttributes extends JSXElements.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; -} - -interface IonContent { - '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; - 'getScrollElement': () => HTMLElement; - /** - * Scroll by a specified X/Y distance in the component - */ - 'scrollByPoint': (x: number, y: number, duration: number) => Promise; - /** - * 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; - /** - * Scroll to the bottom of the component - */ - 'scrollToBottom': (duration?: number) => Promise; - /** - * Scroll to a specified X/Y location in the component - */ - 'scrollToPoint': (x: number | undefined, y: number | undefined, duration?: number) => Promise; - /** - * Scroll to the top of the component - */ - 'scrollToTop': (duration?: number) => Promise; - /** - * If you want to enable the content scrolling in the X axis, set this property to `true`. - */ - 'scrollX': boolean; - /** - * If you want to disable the content scrolling in the Y axis, set this property to `false`. - */ - 'scrollY': boolean; -} -interface IonContentAttributes extends JSXElements.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; - /** - * Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` - */ - 'onIonScroll'?: (event: CustomEvent) => void; - /** - * Emitted when the scroll has ended. - */ - 'onIonScrollEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the scroll has started. - */ - 'onIonScrollStart'?: (event: CustomEvent) => void; - /** - * 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; - /** - * If you want to enable the content scrolling in the X axis, set this property to `true`. - */ - 'scrollX'?: boolean; - /** - * If you want to disable the content scrolling in the Y axis, set this property to `false`. - */ - 'scrollY'?: boolean; -} - -interface IonDatetime { - /** - * 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; - /** - * 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; - /** - * 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; - 'open': () => Promise; - /** - * 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': any; - /** - * 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; -} -interface IonDatetimeAttributes extends JSXElements.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; - /** - * 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; - /** - * 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 value (selected date) 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'?: any; - /** - * 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; -} - -interface IonFabButton { - /** - * 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; -} -interface IonFabButtonAttributes extends JSXElements.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; -} - -interface IonFabList { - /** - * 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'; -} -interface IonFabListAttributes extends JSXElements.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'; -} - -interface IonFab { - 'activated': boolean; - /** - * Close an active FAB list container - */ - 'close': () => void; - /** - * 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'; -} -interface IonFabAttributes extends JSXElements.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'; -} - -interface IonFooter { - /** - * 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; -} -interface IonFooterAttributes extends JSXElements.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; -} - -interface IonGrid { - /** - * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. - */ - 'fixed': boolean; -} -interface IonGridAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. - */ - 'fixed'?: boolean; -} - -interface IonHeader { - /** - * 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; -} -interface IonHeaderAttributes extends JSXElements.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; -} - -interface IonHideWhen { - /** - * 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; -} -interface IonHideWhenAttributes extends JSXElements.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; -} - -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. - */ - 'alt': string; - /** - * The image URL. This attribute is mandatory for the element. - */ - 'src': string; -} -interface IonImgAttributes extends JSXElements.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; -} - -interface IonInfiniteScrollContent { - /** - * An animated SVG spinner that shows while loading. - */ - 'loadingSpinner': string; - /** - * Optional text to display while loading. - */ - 'loadingText': string; -} -interface IonInfiniteScrollContentAttributes extends JSXElements.HTMLAttributes { - /** - * An animated SVG spinner that shows while loading. - */ - 'loadingSpinner'?: string; - /** - * Optional text to display while loading. - */ - 'loadingText'?: string; -} - -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`. - */ - 'complete': () => void; - /** - * 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; - /** - * 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; - /** - * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to change state of infiniteScroll to "complete" - */ - 'waitFor': (action: Promise) => void; -} -interface IonInfiniteScrollAttributes extends JSXElements.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; -} - -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. - */ - 'accept': string; - /** - * 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; - /** - * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. - */ - 'autocorrect': 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, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. - */ - 'clearInput': 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; - /** - * 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 input. Defaults to `false`. - */ - 'disabled': boolean; - 'focus': () => void; - /** - * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. - */ - 'inputmode': string; - /** - * The maximum value, which must not be less than its minimum (min attribute) value. - */ - 'max': string; - /** - * 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; - /** - * The minimum value, which must not be greater than its maximum (max attribute) value. - */ - 'min': string; - /** - * 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; - /** - * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. - */ - 'multiple': boolean; - /** - * The name of the control, which is submitted with the form data. - */ - 'name': string; - /** - * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - */ - 'pattern': 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; - /** - * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. - */ - 'results': number; - /** - * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - */ - 'size': number; - /** - * If true, the element will have its spelling and grammar checked. Defaults to `false`. - */ - 'spellcheck': boolean; - /** - * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. - */ - 'step': string; - /** - * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. - */ - 'type': TextFieldTypes; - /** - * The value of the input. - */ - 'value': string; -} -interface IonInputAttributes extends JSXElements.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. - */ - 'accept'?: string; - /** - * 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; - /** - * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. - */ - 'autocorrect'?: 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, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. - */ - 'clearInput'?: 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; - /** - * 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 input. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. - */ - 'inputmode'?: string; - /** - * The maximum value, which must not be less than its minimum (min attribute) value. - */ - 'max'?: string; - /** - * 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; - /** - * The minimum value, which must not be greater than its maximum (max attribute) value. - */ - 'min'?: string; - /** - * 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; - /** - * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. - */ - 'multiple'?: boolean; - /** - * The name of the control, which is submitted with the form data. - */ - 'name'?: string; - /** - * Emitted when the input loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the value has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the input has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when a keyboard input ocurred. - */ - 'onIonInput'?: (event: CustomEvent) => void; - /** - * Emitted when the input has been created. - */ - 'onIonInputDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted when the input has been removed. - */ - 'onIonInputDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - */ - 'pattern'?: 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; - /** - * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. - */ - 'results'?: number; - /** - * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - */ - 'size'?: number; - /** - * If true, the element will have its spelling and grammar checked. Defaults to `false`. - */ - 'spellcheck'?: boolean; - /** - * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. - */ - 'step'?: string; - /** - * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. - */ - 'type'?: TextFieldTypes; - /** - * The value of the input. - */ - 'value'?: string; -} - -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 IonItemDividerAttributes extends JSXElements.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; -} - -interface IonItemGroup {} -interface IonItemGroupAttributes extends JSXElements.HTMLAttributes {} - -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 IonItemOptionAttributes extends JSXElements.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 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 IonItemOptionsAttributes extends JSXElements.HTMLAttributes { - /** - * Emitted when the item has been fully swiped. - */ - 'onIonSwipe'?: (event: CustomEvent) => void; - /** - * 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; -} - -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; - /** - * If true, the user cannot interact with the sliding-item. Defaults to `false`. - */ - 'disabled': 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 IonItemSlidingAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the user cannot interact with the sliding-item. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Emitted when the sliding position changes. - */ - 'onIonDrag'?: (event: CustomEvent) => void; -} - -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. Available options: `"full"`, `"inset"`, `"none"`. - */ - '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 IonItemAttributes extends JSXElements.HTMLAttributes { - /** - * 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. Available options: `"full"`, `"inset"`, `"none"`. - */ - '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 IonLabelAttributes extends JSXElements.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; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * 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 IonListHeaderAttributes extends JSXElements.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; -} - -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. Available options: `"full"`, `"inset"`, `"none"`. - */ - 'lines': 'full' | 'inset' | 'none'; - /** - * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. - */ - 'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void; -} -interface IonListAttributes extends JSXElements.HTMLAttributes { - /** - * 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. Available options: `"full"`, `"inset"`, `"none"`. - */ - 'lines'?: 'full' | 'inset' | 'none'; -} - -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 IonLoadingControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonLoading { - /** - * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. - */ - 'backdropDismiss': boolean; - /** - * 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; - /** - * Number of milliseconds to wait before dismissing the loading indicator. - */ - 'duration': number; - /** - * 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 IonLoadingAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. - */ - 'backdropDismiss'?: boolean; - /** - * 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[]; - /** - * Number of milliseconds to wait before dismissing the loading indicator. - */ - 'duration'?: number; - /** - * 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; - /** - * Emitted after the loading has dismissed. - */ - 'onIonLoadingDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the loading has loaded. - */ - 'onIonLoadingDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the loading has presented. - */ - 'onIonLoadingDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the loading has unloaded. - */ - 'onIonLoadingDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the loading has dismissed. - */ - 'onIonLoadingWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the loading has presented. - */ - 'onIonLoadingWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * 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 IonMenuButtonAttributes extends JSXElements.HTMLAttributes { - /** - * 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: MenuI) => void; - '_setActiveMenu': (menu: MenuI) => void; - '_setOpen': (menu: MenuI, shouldOpen: boolean, animated: boolean) => Promise; - '_unregister': (menu: MenuI) => 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: MenuI) => 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. - */ - 'swipeGesture': (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 IonMenuControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonMenuToggle { - /** - * Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. - */ - 'autoHide': boolean; - /** - * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. - */ - 'menu': string; -} -interface IonMenuToggleAttributes extends JSXElements.HTMLAttributes { - /** - * Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. - */ - 'autoHide'?: boolean; - /** - * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. - */ - '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`. - */ - 'swipeGesture': boolean; - 'toggle': (animated?: boolean) => Promise; - /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. - */ - 'type': string; -} -interface IonMenuAttributes extends JSXElements.HTMLAttributes { - /** - * The content's id the menu should use. - */ - 'contentId'?: string; - /** - * If true, the menu is disabled. Default `false`. - */ - 'disabled'?: 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; - /** - * Emitted when the menu is closed. - */ - 'onIonClose'?: (event: CustomEvent) => void; - /** - * Emitted when the menu state is changed. - */ - 'onIonMenuChange'?: (event: CustomEvent) => void; - /** - * Emitted when the menu is open. - */ - 'onIonOpen'?: (event: CustomEvent) => void; - /** - * Which side of the view the menu should be placed. Default `"start"`. - */ - 'side'?: Side; - /** - * If true, swiping the menu is enabled. Default `true`. - */ - 'swipeGesture'?: boolean; - /** - * 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 IonModalControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonModal { - /** - * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss': boolean; - /** - * 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; - /** - * 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 IonModalAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss'?: boolean; - /** - * 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; - /** - * Animation to use when the modal is presented. - */ - 'enterAnimation'?: AnimationBuilder; - 'keyboardClose'?: boolean; - /** - * Animation to use when the modal is dismissed. - */ - 'leaveAnimation'?: AnimationBuilder; - /** - * Emitted after the modal has dismissed. - */ - 'onIonModalDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the modal has loaded. - */ - 'onIonModalDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the modal has presented. - */ - 'onIonModalDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the modal has unloaded. - */ - 'onIonModalDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the modal has dismissed. - */ - 'onIonModalWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the modal has presented. - */ - 'onIonModalWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * 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 IonNavPopAttributes extends JSXElements.HTMLAttributes {} - -interface IonNavPush { - /** - * Component to navigate to - */ - 'component': NavComponent; - /** - * Data you want to pass to the component as props - */ - 'componentProps': ComponentProps; -} -interface IonNavPushAttributes extends JSXElements.HTMLAttributes { - /** - * 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 IonNavSetRootAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - 'getLength': () => number; - /** - * 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; - /** - * 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 - */ - 'swipeGesture': boolean; -} -interface IonNavAttributes extends JSXElements.HTMLAttributes { - /** - * If the nav should animate the components or not - */ - 'animated'?: boolean; - 'delegate'?: FrameworkDelegate; - /** - * Event fired when the nav has changed components - */ - 'onIonNavDidChange'?: (event: CustomEvent) => void; - /** - * Event fired when the nav will components - */ - 'onIonNavWillChange'?: (event: CustomEvent) => void; - /** - * Event fired when Nav will load a component - */ - 'onIonNavWillLoad'?: (event: CustomEvent) => void; - /** - * Root NavComponent to load - */ - 'root'?: NavComponent; - /** - * Any parameters for the root component - */ - 'rootParams'?: ComponentProps; - /** - * If the nav component should allow for swipe-to-go-back - */ - 'swipeGesture'?: 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 IonNoteAttributes extends JSXElements.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; -} - -interface IonPickerColumn { - 'col': PickerColumn; -} -interface IonPickerColumnAttributes extends JSXElements.HTMLAttributes { - 'col'?: PickerColumn; -} - -interface IonPickerController { - 'create': (opts?: PickerOptions | undefined) => Promise; - 'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise; - 'getTop': () => HTMLIonPickerElement; -} -interface IonPickerControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonPicker { - /** - * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss': boolean; - /** - * 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; - /** - * 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 IonPickerAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss'?: boolean; - /** - * 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[]; - /** - * Number of milliseconds to wait before dismissing the picker. - */ - 'duration'?: number; - /** - * Animation to use when the picker is presented. - */ - 'enterAnimation'?: AnimationBuilder; - /** - * 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; - /** - * Emitted after the picker has dismissed. - */ - 'onIonPickerDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the picker has loaded. - */ - 'onIonPickerDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the picker has presented. - */ - 'onIonPickerDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the picker has unloaded. - */ - 'onIonPickerDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the picker has dismissed. - */ - 'onIonPickerWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the picker has presented. - */ - 'onIonPickerWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * 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 IonPopoverControllerAttributes extends JSXElements.HTMLAttributes {} - -interface IonPopover { - /** - * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss': 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 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; - /** - * Animation to use when the popover is presented. - */ - 'enterAnimation': AnimationBuilder; - /** - * The event to pass to the popover animation. - */ - 'event': 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 IonPopoverAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. - */ - 'backdropDismiss'?: 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 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; - /** - * Animation to use when the popover is presented. - */ - 'enterAnimation'?: AnimationBuilder; - /** - * The event to pass to the popover animation. - */ - 'event'?: 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; - /** - * Emitted after the popover has dismissed. - */ - 'onIonPopoverDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the popover has loaded. - */ - 'onIonPopoverDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the popover has presented. - */ - 'onIonPopoverDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the popover has unloaded. - */ - 'onIonPopoverDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the popover has dismissed. - */ - 'onIonPopoverWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the popover has presented. - */ - 'onIonPopoverWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * 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; - '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 IonRadioGroupAttributes extends JSXElements.HTMLAttributes { - 'allowEmptySelection'?: boolean; - 'disabled'?: boolean; - /** - * The name of the control, which is submitted with the form data. - */ - 'name'?: string; - /** - * Emitted when the value has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * 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; - '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 IonRadioAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - '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 radio button loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the radio button has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when the radio loads. - */ - 'onIonRadioDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted when the radio unloads. - */ - 'onIonRadioDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted when the radio button is selected. - */ - 'onIonSelect'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * the value of the radio. - */ - 'value'?: string; -} - -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; - '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': RangeValue; -} -interface IonRangeAttributes extends JSXElements.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; - /** - * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. - */ - 'debounce'?: number; - '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; - /** - * Emitted when the range loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the value property has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the range has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * 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'?: RangeValue; -} - -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 IonRefresherContentAttributes extends JSXElements.HTMLAttributes { - /** - * 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 IonRefresherAttributes extends JSXElements.HTMLAttributes { - /** - * Time it takes to close the refresher. Defaults to `280ms`. - */ - 'closeDuration'?: string; - /** - * If true, the refresher will be hidden. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Emitted while the user is pulling down the content and exposing the refresher. - */ - 'onIonPull'?: (event: CustomEvent) => void; - /** - * Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. - */ - 'onIonRefresh'?: (event: CustomEvent) => void; - /** - * Emitted when the user begins to start pulling down. - */ - 'onIonStart'?: (event: CustomEvent) => void; - /** - * 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 IonReorderGroupAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the reorder will be hidden. Defaults to `true`. - */ - 'disabled'?: boolean; -} - -interface IonReorder {} -interface IonReorderAttributes extends JSXElements.HTMLAttributes {} - -interface IonRippleEffect { - /** - * Adds the ripple effect to the parent element - */ - '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 IonRippleEffectAttributes extends JSXElements.HTMLAttributes { - '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 IonRouteRedirectAttributes extends JSXElements.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. - */ - 'from'?: string; - /** - * Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. - */ - 'onIonRouteRedirectChanged'?: (event: CustomEvent) => void; - /** - * 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 IonRouteAttributes extends JSXElements.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. - */ - '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}; - /** - * Used internaly by `ion-router` to know when this route did change. - */ - 'onIonRouteDataChanged'?: (event: CustomEvent) => void; - /** - * 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 IonRouterOutletAttributes extends JSXElements.HTMLAttributes { - 'animated'?: boolean; - 'animationBuilder'?: AnimationBuilder; - 'delegate'?: FrameworkDelegate; - 'onIonNavDidChange'?: (event: CustomEvent) => void; - 'onIonNavWillChange'?: (event: CustomEvent) => void; - 'onIonNavWillLoad'?: (event: CustomEvent) => void; -} - -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 IonRouterAttributes extends JSXElements.HTMLAttributes { - /** - * Emitted when the route had changed - */ - 'onIonRouteDidChange'?: (event: CustomEvent) => void; - /** - * Event emitted when the route is about to change - */ - 'onIonRouteWillChange'?: (event: CustomEvent) => void; - /** - * 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 IonRowAttributes extends JSXElements.HTMLAttributes {} - -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; - 'focus': () => void; - /** - * 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 IonSearchbarAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - /** - * Emitted when the input loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the cancel button is clicked. - */ - 'onIonCancel'?: (event: CustomEvent) => void; - /** - * Emitted when the value has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the clear input button is clicked. - */ - 'onIonClear'?: (event: CustomEvent) => void; - /** - * Emitted when the input has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when a keyboard input ocurred. - */ - 'onIonInput'?: (event: CustomEvent) => void; - /** - * 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 IonSegmentButtonAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - /** - * Emitted when the segment button is clicked. - */ - 'onIonSelect'?: (event: CustomEvent) => void; - /** - * 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 IonSegmentAttributes extends JSXElements.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; - 'disabled'?: boolean; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * Emitted when the value property has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * 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': any; -} -interface IonSelectOptionAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the user cannot interact with the select option. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Emitted when the select option loads. - */ - 'onIonSelectOptionDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted when the select option unloads. - */ - 'onIonSelectOptionDidUnload'?: (event: CustomEvent) => void; - /** - * If true, the element is selected. - */ - 'selected'?: boolean; - /** - * The text value of the option. - */ - 'value'?: any; -} - -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 IonSelectPopoverAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode': Mode; - /** - * 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; - 'open': (ev?: UIEvent | undefined) => Promise; - /** - * 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 IonSelectAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. - */ - 'mode'?: Mode; - /** - * 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; - /** - * Emitted when the select loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the selection is cancelled. - */ - 'onIonCancel'?: (event: CustomEvent) => void; - /** - * Emitted when the value has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the select has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * 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 IonShowWhenAttributes extends JSXElements.HTMLAttributes { - /** - * 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 IonSkeletonTextAttributes extends JSXElements.HTMLAttributes { - /** - * Width for the element to render at. Default is 100% - */ - 'width'?: string; -} - -interface IonSlide {} -interface IonSlideAttributes extends JSXElements.HTMLAttributes {} - -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 IonSlidesAttributes extends JSXElements.HTMLAttributes { - /** - * Emitted after the active slide has changed. - */ - 'onIonSlideDidChange'?: (event: CustomEvent) => void; - /** - * Emitted when the user double taps on the slide's container. - */ - 'onIonSlideDoubleTap'?: (event: CustomEvent) => void; - /** - * Emitted when the slider is actively being moved. - */ - 'onIonSlideDrag'?: (event: CustomEvent) => void; - /** - * Emitted when the next slide has ended. - */ - 'onIonSlideNextEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the next slide has started. - */ - 'onIonSlideNextStart'?: (event: CustomEvent) => void; - /** - * Emitted when the previous slide has ended. - */ - 'onIonSlidePrevEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the previous slide has started. - */ - 'onIonSlidePrevStart'?: (event: CustomEvent) => void; - /** - * Emitted when the slider is at the last slide. - */ - 'onIonSlideReachEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the slider is at its initial position. - */ - 'onIonSlideReachStart'?: (event: CustomEvent) => void; - /** - * Emitted when the user taps/clicks on the slide's container. - */ - 'onIonSlideTap'?: (event: CustomEvent) => void; - /** - * Emitted when the user releases the touch. - */ - 'onIonSlideTouchEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the user first touches the slider. - */ - 'onIonSlideTouchStart'?: (event: CustomEvent) => void; - /** - * Emitted when the slide transition has ended. - */ - 'onIonSlideTransitionEnd'?: (event: CustomEvent) => void; - /** - * Emitted when the slide transition has started. - */ - 'onIonSlideTransitionStart'?: (event: CustomEvent) => void; - /** - * Emitted before the active slide has changed. - */ - 'onIonSlideWillChange'?: (event: CustomEvent) => void; - /** - * Emitted after Swiper initialization - */ - 'onIonSlidesDidLoad'?: (event: CustomEvent) => void; - /** - * 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; -} - -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 IonSpinnerAttributes extends JSXElements.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; - /** - * 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 IonSplitPaneAttributes extends JSXElements.HTMLAttributes { - /** - * If true, the split pane will be hidden. Defaults to `false`. - */ - 'disabled'?: boolean; - /** - * Emitted when the split pane is visible. - */ - 'onIonChange'?: (event: CustomEvent<{visible: boolean}>) => void; - /** - * Expression to be called when the split-pane visibility has changed - */ - 'onIonSplitPaneVisible'?: (event: CustomEvent) => void; - /** - * 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 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 button 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 IonTabAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - /** - * The URL which will be used as the `href` within this tab's button anchor. - */ - 'href'?: string; - /** - * The icon for the tab. - */ - 'icon'?: string; - /** - * The label of the tab. - */ - 'label'?: string; - /** - * The name of the tab. - */ - 'name'?: string; - /** - * Emitted when the current tab is selected. - */ - 'onIonSelect'?: (event: CustomEvent) => void; - /** - * Emitted when the tab props mutates. Used internally. - */ - 'onIonTabMutated'?: (event: CustomEvent) => void; - /** - * If true, the tab will be selected. Defaults to `false`. - */ - 'selected'?: boolean; - /** - * 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; - /** - * 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 IonTabbarAttributes extends JSXElements.HTMLAttributes { - '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; - /** - * Emitted when the tab bar is clicked - */ - 'onIonTabbarClick'?: (event: CustomEvent) => void; - /** - * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - */ - 'placement'?: TabbarPlacement; - /** - * 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; - /** - * 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 IonTabsAttributes extends JSXElements.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; - /** - * A unique name for the tabs. - */ - 'name'?: string; - /** - * Emitted when the tab changes. - */ - 'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void; - /** - * Emitted when the navigation has finished transitioning to a new component. - */ - 'onIonNavDidChange'?: (event: CustomEvent) => void; - /** - * Emitted when the navigation is about to transition to a new component. - */ - 'onIonNavWillChange'?: (event: CustomEvent) => void; - /** - * Emitted when the navigation will load a component. - */ - 'onIonNavWillLoad'?: (event: CustomEvent) => void; - /** - * 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 IonTextAttributes extends JSXElements.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; -} - -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; - /** - * 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; - 'focus': () => void; - /** - * 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 IonTextareaAttributes extends JSXElements.HTMLAttributes { - /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - */ - 'autocapitalize'?: 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; - /** - * Emitted when the input loses focus. - */ - 'onIonBlur'?: (event: CustomEvent) => void; - /** - * Emitted when the input value has changed. - */ - 'onIonChange'?: (event: CustomEvent) => void; - /** - * Emitted when the input has focus. - */ - 'onIonFocus'?: (event: CustomEvent) => void; - /** - * Emitted when a keyboard input ocurred. - */ - 'onIonInput'?: (event: CustomEvent) => void; - /** - * Emitted when the styles change. - */ - 'onIonStyle'?: (event: CustomEvent) => void; - /** - * 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 IonThumbnailAttributes extends JSXElements.HTMLAttributes {} - -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; -} -interface IonTitleAttributes extends JSXElements.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; -} - -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 IonToastControllerAttributes extends JSXElements.HTMLAttributes {} - -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 IonToastAttributes extends JSXElements.HTMLAttributes { - /** - * 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[]; - /** - * 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; - /** - * Emitted after the toast has dismissed. - */ - 'onIonToastDidDismiss'?: (event: CustomEvent) => void; - /** - * Emitted after the toast has loaded. - */ - 'onIonToastDidLoad'?: (event: CustomEvent) => void; - /** - * Emitted after the toast has presented. - */ - 'onIonToastDidPresent'?: (event: CustomEvent) => void; - /** - * Emitted after the toast has unloaded. - */ - 'onIonToastDidUnload'?: (event: CustomEvent) => void; - /** - * Emitted before the toast has dismissed. - */ - 'onIonToastWillDismiss'?: (event: CustomEvent) => void; - /** - * Emitted before the toast has presented. - */ - 'onIonToastWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; - /** - * The position of the toast on the screen. Possible values: "top", "middle", "bottom". - */ - 'position'?: string; - /** - * 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; - '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 IonToggleAttributes extends JSXElements.HTMLAttributes { - /** - * 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; - '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 value 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 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 IonToolbarAttributes extends JSXElements.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; -} - -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) => any; - 'renderHeader': (item: any, index: number) => any; - 'renderItem': (item: any, index: number) => any; -} -interface IonVirtualScrollAttributes extends JSXElements.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%`. - */ - '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[]; - 'nodeRender'?: ItemRenderFn; - 'renderFooter'?: (item: any, index: number) => any; - 'renderHeader'?: (item: any, index: number) => any; - 'renderItem'?: (item: any, index: number) => any; -} - -export interface LocalElementInterfaces extends LocalElementInterfaces1 { - 'IonActionSheetController': IonActionSheetController; - 'IonActionSheet': IonActionSheet; - 'IonAlertController': IonAlertController; - 'IonAlert': IonAlert; - 'IonAnchor': IonAnchor; - 'IonAnimationController': IonAnimationController; - 'IonApp': IonApp; - 'IonAvatar': IonAvatar; - 'IonBackButton': IonBackButton; - 'IonBackdrop': IonBackdrop; - 'IonBadge': IonBadge; - 'IonButton': IonButton; - 'IonButtons': IonButtons; - 'IonCardContent': IonCardContent; - 'IonCardHeader': IonCardHeader; - 'IonCardSubtitle': IonCardSubtitle; - 'IonCardTitle': IonCardTitle; - 'IonCard': IonCard; - 'IonCheckbox': IonCheckbox; - 'IonChipButton': IonChipButton; - 'IonChipIcon': IonChipIcon; - 'IonChip': IonChip; - 'IonCol': IonCol; - 'IonContent': IonContent; - 'IonDatetime': IonDatetime; - 'IonFabButton': IonFabButton; - 'IonFabList': IonFabList; - 'IonFab': IonFab; - 'IonFooter': IonFooter; - 'IonGrid': IonGrid; - 'IonHeader': IonHeader; - 'IonHideWhen': IonHideWhen; - 'IonImg': IonImg; - 'IonInfiniteScrollContent': IonInfiniteScrollContent; - 'IonInfiniteScroll': IonInfiniteScroll; - 'IonInput': IonInput; - 'IonItemDivider': IonItemDivider; - 'IonItemGroup': IonItemGroup; - 'IonItemOption': IonItemOption; - 'IonItemOptions': IonItemOptions; - 'IonItemSliding': IonItemSliding; - 'IonItem': IonItem; - 'IonLabel': IonLabel; - 'IonListHeader': IonListHeader; - 'IonList': IonList; - 'IonLoadingController': IonLoadingController; - 'IonLoading': IonLoading; - 'IonMenuButton': IonMenuButton; - 'IonMenuController': IonMenuController; - 'IonMenuToggle': IonMenuToggle; - 'IonMenu': IonMenu; - 'IonModalController': IonModalController; - 'IonModal': IonModal; - 'IonNavPop': IonNavPop; - 'IonNavPush': IonNavPush; - 'IonNavSetRoot': IonNavSetRoot; - 'IonNav': IonNav; - 'IonNote': IonNote; - 'IonPickerColumn': IonPickerColumn; - 'IonPickerController': IonPickerController; - 'IonPicker': IonPicker; - 'IonPopoverController': IonPopoverController; - 'IonPopover': IonPopover; - 'IonRadioGroup': IonRadioGroup; - 'IonRadio': IonRadio; - 'IonRange': IonRange; - 'IonRefresherContent': IonRefresherContent; - 'IonRefresher': IonRefresher; - 'IonReorderGroup': IonReorderGroup; - 'IonReorder': IonReorder; - 'IonRippleEffect': IonRippleEffect; - 'IonRouteRedirect': IonRouteRedirect; - 'IonRoute': IonRoute; - 'IonRouterOutlet': IonRouterOutlet; - 'IonRouter': IonRouter; - 'IonRow': IonRow; - 'IonSearchbar': IonSearchbar; - 'IonSegmentButton': IonSegmentButton; - 'IonSegment': IonSegment; - 'IonSelectOption': IonSelectOption; - 'IonSelectPopover': IonSelectPopover; - 'IonSelect': IonSelect; - 'IonShowWhen': IonShowWhen; - 'IonSkeletonText': IonSkeletonText; - 'IonSlide': IonSlide; - 'IonSlides': IonSlides; - 'IonSpinner': IonSpinner; - 'IonSplitPane': IonSplitPane; - 'IonTab': IonTab; - 'IonTabbar': IonTabbar; - 'IonTabs': IonTabs; - 'IonText': IonText; - 'IonTextarea': IonTextarea; - 'IonThumbnail': IonThumbnail; - 'IonTitle': IonTitle; - 'IonToastController': IonToastController; - 'IonToast': IonToast; - 'IonToggle': IonToggle; - 'IonToolbar': IonToolbar; - 'IonVirtualScroll': IonVirtualScroll; -} - -export interface LocalIntrinsicElements { - 'ion-action-sheet-controller': IonActionSheetControllerAttributes; - 'ion-action-sheet': IonActionSheetAttributes; - 'ion-alert-controller': IonAlertControllerAttributes; - 'ion-alert': IonAlertAttributes; - 'ion-anchor': IonAnchorAttributes; - 'ion-animation-controller': IonAnimationControllerAttributes; - 'ion-app': IonAppAttributes; - 'ion-avatar': IonAvatarAttributes; - 'ion-back-button': IonBackButtonAttributes; - 'ion-backdrop': IonBackdropAttributes; - 'ion-badge': IonBadgeAttributes; - 'ion-button': IonButtonAttributes; - 'ion-buttons': IonButtonsAttributes; - 'ion-card-content': IonCardContentAttributes; - 'ion-card-header': IonCardHeaderAttributes; - 'ion-card-subtitle': IonCardSubtitleAttributes; - 'ion-card-title': IonCardTitleAttributes; - 'ion-card': IonCardAttributes; - 'ion-checkbox': IonCheckboxAttributes; - 'ion-chip-button': IonChipButtonAttributes; - 'ion-chip-icon': IonChipIconAttributes; - 'ion-chip': IonChipAttributes; - 'ion-col': IonColAttributes; - 'ion-content': IonContentAttributes; - 'ion-datetime': IonDatetimeAttributes; - 'ion-fab-button': IonFabButtonAttributes; - 'ion-fab-list': IonFabListAttributes; - 'ion-fab': IonFabAttributes; - 'ion-footer': IonFooterAttributes; - 'ion-grid': IonGridAttributes; - 'ion-header': IonHeaderAttributes; - 'ion-hide-when': IonHideWhenAttributes; - 'ion-img': IonImgAttributes; - 'ion-infinite-scroll-content': IonInfiniteScrollContentAttributes; - 'ion-infinite-scroll': IonInfiniteScrollAttributes; - 'ion-input': IonInputAttributes; - 'ion-item-divider': IonItemDividerAttributes; - 'ion-item-group': IonItemGroupAttributes; - 'ion-item-option': IonItemOptionAttributes; - 'ion-item-options': IonItemOptionsAttributes; - 'ion-item-sliding': IonItemSlidingAttributes; - 'ion-item': IonItemAttributes; - 'ion-label': IonLabelAttributes; - 'ion-list-header': IonListHeaderAttributes; - 'ion-list': IonListAttributes; - 'ion-loading-controller': IonLoadingControllerAttributes; - 'ion-loading': IonLoadingAttributes; - 'ion-menu-button': IonMenuButtonAttributes; - 'ion-menu-controller': IonMenuControllerAttributes; - 'ion-menu-toggle': IonMenuToggleAttributes; - 'ion-menu': IonMenuAttributes; - 'ion-modal-controller': IonModalControllerAttributes; - 'ion-modal': IonModalAttributes; - 'ion-nav-pop': IonNavPopAttributes; - 'ion-nav-push': IonNavPushAttributes; - 'ion-nav-set-root': IonNavSetRootAttributes; - 'ion-nav': IonNavAttributes; - 'ion-note': IonNoteAttributes; - 'ion-picker-column': IonPickerColumnAttributes; - 'ion-picker-controller': IonPickerControllerAttributes; - 'ion-picker': IonPickerAttributes; - 'ion-popover-controller': IonPopoverControllerAttributes; - 'ion-popover': IonPopoverAttributes; - 'ion-radio-group': IonRadioGroupAttributes; - 'ion-radio': IonRadioAttributes; - 'ion-range': IonRangeAttributes; - 'ion-refresher-content': IonRefresherContentAttributes; - 'ion-refresher': IonRefresherAttributes; - 'ion-reorder-group': IonReorderGroupAttributes; - 'ion-reorder': IonReorderAttributes; - 'ion-ripple-effect': IonRippleEffectAttributes; - 'ion-route-redirect': IonRouteRedirectAttributes; - 'ion-route': IonRouteAttributes; - 'ion-router-outlet': IonRouterOutletAttributes; - 'ion-router': IonRouterAttributes; - 'ion-row': IonRowAttributes; - 'ion-searchbar': IonSearchbarAttributes; - 'ion-segment-button': IonSegmentButtonAttributes; - 'ion-segment': IonSegmentAttributes; - 'ion-select-option': IonSelectOptionAttributes; - 'ion-select-popover': IonSelectPopoverAttributes; - 'ion-select': IonSelectAttributes; - 'ion-show-when': IonShowWhenAttributes; - 'ion-skeleton-text': IonSkeletonTextAttributes; - 'ion-slide': IonSlideAttributes; - 'ion-slides': IonSlidesAttributes; - 'ion-spinner': IonSpinnerAttributes; - 'ion-split-pane': IonSplitPaneAttributes; - 'ion-tab': IonTabAttributes; - 'ion-tabbar': IonTabbarAttributes; - 'ion-tabs': IonTabsAttributes; - 'ion-text': IonTextAttributes; - 'ion-textarea': IonTextareaAttributes; - 'ion-thumbnail': IonThumbnailAttributes; - 'ion-title': IonTitleAttributes; - 'ion-toast-controller': IonToastControllerAttributes; - 'ion-toast': IonToastAttributes; - 'ion-toggle': IonToggleAttributes; - 'ion-toolbar': IonToolbarAttributes; - 'ion-virtual-scroll': IonVirtualScrollAttributes; -} - -declare global { - - interface HTMLIonActionSheetControllerElement extends IonActionSheetController, HTMLStencilElement {} - var HTMLIonActionSheetControllerElement: { - prototype: HTMLIonActionSheetControllerElement; - new (): HTMLIonActionSheetControllerElement; - }; - - interface HTMLIonActionSheetElement extends IonActionSheet, HTMLStencilElement {} - var HTMLIonActionSheetElement: { - prototype: HTMLIonActionSheetElement; - new (): HTMLIonActionSheetElement; - }; - - interface HTMLIonAlertControllerElement extends IonAlertController, HTMLStencilElement {} - var HTMLIonAlertControllerElement: { - prototype: HTMLIonAlertControllerElement; - new (): HTMLIonAlertControllerElement; - }; - - interface HTMLIonAlertElement extends IonAlert, HTMLStencilElement {} - var HTMLIonAlertElement: { - prototype: HTMLIonAlertElement; - new (): HTMLIonAlertElement; - }; - - interface HTMLIonAnchorElement extends IonAnchor, HTMLStencilElement {} - var HTMLIonAnchorElement: { - prototype: HTMLIonAnchorElement; - new (): HTMLIonAnchorElement; - }; - - interface HTMLIonAnimationControllerElement extends IonAnimationController, HTMLStencilElement {} - var HTMLIonAnimationControllerElement: { - prototype: HTMLIonAnimationControllerElement; - new (): HTMLIonAnimationControllerElement; - }; - - interface HTMLIonAppElement extends IonApp, HTMLStencilElement {} - var HTMLIonAppElement: { - prototype: HTMLIonAppElement; - new (): HTMLIonAppElement; - }; - - interface HTMLIonAvatarElement extends IonAvatar, HTMLStencilElement {} - var HTMLIonAvatarElement: { - prototype: HTMLIonAvatarElement; - new (): HTMLIonAvatarElement; - }; - - interface HTMLIonBackButtonElement extends IonBackButton, HTMLStencilElement {} - var HTMLIonBackButtonElement: { - prototype: HTMLIonBackButtonElement; - new (): HTMLIonBackButtonElement; - }; - - interface HTMLIonBackdropElement extends IonBackdrop, HTMLStencilElement {} - var HTMLIonBackdropElement: { - prototype: HTMLIonBackdropElement; - new (): HTMLIonBackdropElement; - }; - - interface HTMLIonBadgeElement extends IonBadge, HTMLStencilElement {} - var HTMLIonBadgeElement: { - prototype: HTMLIonBadgeElement; - new (): HTMLIonBadgeElement; - }; - - interface HTMLIonButtonElement extends IonButton, HTMLStencilElement {} - var HTMLIonButtonElement: { - prototype: HTMLIonButtonElement; - new (): HTMLIonButtonElement; - }; - - interface HTMLIonButtonsElement extends IonButtons, HTMLStencilElement {} - var HTMLIonButtonsElement: { - prototype: HTMLIonButtonsElement; - new (): HTMLIonButtonsElement; - }; - - interface HTMLIonCardContentElement extends IonCardContent, HTMLStencilElement {} - var HTMLIonCardContentElement: { - prototype: HTMLIonCardContentElement; - new (): HTMLIonCardContentElement; - }; - - interface HTMLIonCardHeaderElement extends IonCardHeader, HTMLStencilElement {} - var HTMLIonCardHeaderElement: { - prototype: HTMLIonCardHeaderElement; - new (): HTMLIonCardHeaderElement; - }; - - interface HTMLIonCardSubtitleElement extends IonCardSubtitle, HTMLStencilElement {} - var HTMLIonCardSubtitleElement: { - prototype: HTMLIonCardSubtitleElement; - new (): HTMLIonCardSubtitleElement; - }; - - interface HTMLIonCardTitleElement extends IonCardTitle, HTMLStencilElement {} - var HTMLIonCardTitleElement: { - prototype: HTMLIonCardTitleElement; - new (): HTMLIonCardTitleElement; - }; - - interface HTMLIonCardElement extends IonCard, HTMLStencilElement {} - var HTMLIonCardElement: { - prototype: HTMLIonCardElement; - new (): HTMLIonCardElement; - }; - - interface HTMLIonCheckboxElement extends IonCheckbox, HTMLStencilElement {} - var HTMLIonCheckboxElement: { - prototype: HTMLIonCheckboxElement; - new (): HTMLIonCheckboxElement; - }; - - interface HTMLIonChipButtonElement extends IonChipButton, HTMLStencilElement {} - var HTMLIonChipButtonElement: { - prototype: HTMLIonChipButtonElement; - new (): HTMLIonChipButtonElement; - }; - - interface HTMLIonChipIconElement extends IonChipIcon, HTMLStencilElement {} - var HTMLIonChipIconElement: { - prototype: HTMLIonChipIconElement; - new (): HTMLIonChipIconElement; - }; - - interface HTMLIonChipElement extends IonChip, HTMLStencilElement {} - var HTMLIonChipElement: { - prototype: HTMLIonChipElement; - new (): HTMLIonChipElement; - }; - - interface HTMLIonColElement extends IonCol, HTMLStencilElement {} - var HTMLIonColElement: { - prototype: HTMLIonColElement; - new (): HTMLIonColElement; - }; - - interface HTMLIonContentElement extends IonContent, HTMLStencilElement {} - var HTMLIonContentElement: { - prototype: HTMLIonContentElement; - new (): HTMLIonContentElement; - }; - - interface HTMLIonDatetimeElement extends IonDatetime, HTMLStencilElement {} - var HTMLIonDatetimeElement: { - prototype: HTMLIonDatetimeElement; - new (): HTMLIonDatetimeElement; - }; - - interface HTMLIonFabButtonElement extends IonFabButton, HTMLStencilElement {} - var HTMLIonFabButtonElement: { - prototype: HTMLIonFabButtonElement; - new (): HTMLIonFabButtonElement; - }; - - interface HTMLIonFabListElement extends IonFabList, HTMLStencilElement {} - var HTMLIonFabListElement: { - prototype: HTMLIonFabListElement; - new (): HTMLIonFabListElement; - }; - - interface HTMLIonFabElement extends IonFab, HTMLStencilElement {} - var HTMLIonFabElement: { - prototype: HTMLIonFabElement; - new (): HTMLIonFabElement; - }; - - interface HTMLIonFooterElement extends IonFooter, HTMLStencilElement {} - var HTMLIonFooterElement: { - prototype: HTMLIonFooterElement; - new (): HTMLIonFooterElement; - }; - - interface HTMLIonGridElement extends IonGrid, HTMLStencilElement {} - var HTMLIonGridElement: { - prototype: HTMLIonGridElement; - new (): HTMLIonGridElement; - }; - - interface HTMLIonHeaderElement extends IonHeader, HTMLStencilElement {} - var HTMLIonHeaderElement: { - prototype: HTMLIonHeaderElement; - new (): HTMLIonHeaderElement; - }; - - interface HTMLIonHideWhenElement extends IonHideWhen, HTMLStencilElement {} - var HTMLIonHideWhenElement: { - prototype: HTMLIonHideWhenElement; - new (): HTMLIonHideWhenElement; - }; - - interface HTMLIonImgElement extends IonImg, HTMLStencilElement {} - var HTMLIonImgElement: { - prototype: HTMLIonImgElement; - new (): HTMLIonImgElement; - }; - - interface HTMLIonInfiniteScrollContentElement extends IonInfiniteScrollContent, HTMLStencilElement {} - var HTMLIonInfiniteScrollContentElement: { - prototype: HTMLIonInfiniteScrollContentElement; - new (): HTMLIonInfiniteScrollContentElement; - }; - - interface HTMLIonInfiniteScrollElement extends IonInfiniteScroll, HTMLStencilElement {} - var HTMLIonInfiniteScrollElement: { - prototype: HTMLIonInfiniteScrollElement; - new (): HTMLIonInfiniteScrollElement; - }; - - interface HTMLIonInputElement extends IonInput, HTMLStencilElement {} - var HTMLIonInputElement: { - prototype: HTMLIonInputElement; - new (): HTMLIonInputElement; - }; - - interface HTMLIonItemDividerElement extends IonItemDivider, HTMLStencilElement {} - var HTMLIonItemDividerElement: { - prototype: HTMLIonItemDividerElement; - new (): HTMLIonItemDividerElement; - }; - - interface HTMLIonItemGroupElement extends IonItemGroup, HTMLStencilElement {} - var HTMLIonItemGroupElement: { - prototype: HTMLIonItemGroupElement; - new (): HTMLIonItemGroupElement; - }; - - interface HTMLIonItemOptionElement extends IonItemOption, HTMLStencilElement {} - var HTMLIonItemOptionElement: { - prototype: HTMLIonItemOptionElement; - new (): HTMLIonItemOptionElement; - }; - - interface HTMLIonItemOptionsElement extends IonItemOptions, HTMLStencilElement {} - var HTMLIonItemOptionsElement: { - prototype: HTMLIonItemOptionsElement; - new (): HTMLIonItemOptionsElement; - }; - - interface HTMLIonItemSlidingElement extends IonItemSliding, HTMLStencilElement {} - var HTMLIonItemSlidingElement: { - prototype: HTMLIonItemSlidingElement; - new (): HTMLIonItemSlidingElement; - }; - - interface HTMLIonItemElement extends IonItem, HTMLStencilElement {} - var HTMLIonItemElement: { - prototype: HTMLIonItemElement; - new (): HTMLIonItemElement; - }; - - interface HTMLIonLabelElement extends IonLabel, HTMLStencilElement {} - var HTMLIonLabelElement: { - prototype: HTMLIonLabelElement; - new (): HTMLIonLabelElement; - }; - - interface HTMLIonListHeaderElement extends IonListHeader, HTMLStencilElement {} - var HTMLIonListHeaderElement: { - prototype: HTMLIonListHeaderElement; - new (): HTMLIonListHeaderElement; - }; - - interface HTMLIonListElement extends IonList, HTMLStencilElement {} - var HTMLIonListElement: { - prototype: HTMLIonListElement; - new (): HTMLIonListElement; - }; - - interface HTMLIonLoadingControllerElement extends IonLoadingController, HTMLStencilElement {} - var HTMLIonLoadingControllerElement: { - prototype: HTMLIonLoadingControllerElement; - new (): HTMLIonLoadingControllerElement; - }; - - interface HTMLIonLoadingElement extends IonLoading, HTMLStencilElement {} - var HTMLIonLoadingElement: { - prototype: HTMLIonLoadingElement; - new (): HTMLIonLoadingElement; - }; - - interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLStencilElement {} - var HTMLIonMenuButtonElement: { - prototype: HTMLIonMenuButtonElement; - new (): HTMLIonMenuButtonElement; - }; - - interface HTMLIonMenuControllerElement extends IonMenuController, HTMLStencilElement {} - var HTMLIonMenuControllerElement: { - prototype: HTMLIonMenuControllerElement; - new (): HTMLIonMenuControllerElement; - }; - - interface HTMLIonMenuToggleElement extends IonMenuToggle, HTMLStencilElement {} - var HTMLIonMenuToggleElement: { - prototype: HTMLIonMenuToggleElement; - new (): HTMLIonMenuToggleElement; - }; - - interface HTMLIonMenuElement extends IonMenu, HTMLStencilElement {} - var HTMLIonMenuElement: { - prototype: HTMLIonMenuElement; - new (): HTMLIonMenuElement; - }; - - interface HTMLIonModalControllerElement extends IonModalController, HTMLStencilElement {} - var HTMLIonModalControllerElement: { - prototype: HTMLIonModalControllerElement; - new (): HTMLIonModalControllerElement; - }; - - interface HTMLIonModalElement extends IonModal, HTMLStencilElement {} - var HTMLIonModalElement: { - prototype: HTMLIonModalElement; - new (): HTMLIonModalElement; - }; - - interface HTMLIonNavPopElement extends IonNavPop, HTMLStencilElement {} - var HTMLIonNavPopElement: { - prototype: HTMLIonNavPopElement; - new (): HTMLIonNavPopElement; - }; - - interface HTMLIonNavPushElement extends IonNavPush, HTMLStencilElement {} - var HTMLIonNavPushElement: { - prototype: HTMLIonNavPushElement; - new (): HTMLIonNavPushElement; - }; - - interface HTMLIonNavSetRootElement extends IonNavSetRoot, HTMLStencilElement {} - var HTMLIonNavSetRootElement: { - prototype: HTMLIonNavSetRootElement; - new (): HTMLIonNavSetRootElement; - }; - - interface HTMLIonNavElement extends IonNav, HTMLStencilElement {} - var HTMLIonNavElement: { - prototype: HTMLIonNavElement; - new (): HTMLIonNavElement; - }; - - interface HTMLIonNoteElement extends IonNote, HTMLStencilElement {} - var HTMLIonNoteElement: { - prototype: HTMLIonNoteElement; - new (): HTMLIonNoteElement; - }; - - interface HTMLIonPickerColumnElement extends IonPickerColumn, HTMLStencilElement {} - var HTMLIonPickerColumnElement: { - prototype: HTMLIonPickerColumnElement; - new (): HTMLIonPickerColumnElement; - }; - - interface HTMLIonPickerControllerElement extends IonPickerController, HTMLStencilElement {} - var HTMLIonPickerControllerElement: { - prototype: HTMLIonPickerControllerElement; - new (): HTMLIonPickerControllerElement; - }; - - interface HTMLIonPickerElement extends IonPicker, HTMLStencilElement {} - var HTMLIonPickerElement: { - prototype: HTMLIonPickerElement; - new (): HTMLIonPickerElement; - }; - - interface HTMLIonPopoverControllerElement extends IonPopoverController, HTMLStencilElement {} - var HTMLIonPopoverControllerElement: { - prototype: HTMLIonPopoverControllerElement; - new (): HTMLIonPopoverControllerElement; - }; - - interface HTMLIonPopoverElement extends IonPopover, HTMLStencilElement {} - var HTMLIonPopoverElement: { - prototype: HTMLIonPopoverElement; - new (): HTMLIonPopoverElement; - }; - - interface HTMLIonRadioGroupElement extends IonRadioGroup, HTMLStencilElement {} - var HTMLIonRadioGroupElement: { - prototype: HTMLIonRadioGroupElement; - new (): HTMLIonRadioGroupElement; - }; - - interface HTMLIonRadioElement extends IonRadio, HTMLStencilElement {} - var HTMLIonRadioElement: { - prototype: HTMLIonRadioElement; - new (): HTMLIonRadioElement; - }; - - interface HTMLIonRangeElement extends IonRange, HTMLStencilElement {} - var HTMLIonRangeElement: { - prototype: HTMLIonRangeElement; - new (): HTMLIonRangeElement; - }; - - interface HTMLIonRefresherContentElement extends IonRefresherContent, HTMLStencilElement {} - var HTMLIonRefresherContentElement: { - prototype: HTMLIonRefresherContentElement; - new (): HTMLIonRefresherContentElement; - }; - - interface HTMLIonRefresherElement extends IonRefresher, HTMLStencilElement {} - var HTMLIonRefresherElement: { - prototype: HTMLIonRefresherElement; - new (): HTMLIonRefresherElement; - }; - - interface HTMLIonReorderGroupElement extends IonReorderGroup, HTMLStencilElement {} - var HTMLIonReorderGroupElement: { - prototype: HTMLIonReorderGroupElement; - new (): HTMLIonReorderGroupElement; - }; - - interface HTMLIonReorderElement extends IonReorder, HTMLStencilElement {} - var HTMLIonReorderElement: { - prototype: HTMLIonReorderElement; - new (): HTMLIonReorderElement; - }; - - interface HTMLIonRippleEffectElement extends IonRippleEffect, HTMLStencilElement {} - var HTMLIonRippleEffectElement: { - prototype: HTMLIonRippleEffectElement; - new (): HTMLIonRippleEffectElement; - }; - - interface HTMLIonRouteRedirectElement extends IonRouteRedirect, HTMLStencilElement {} - var HTMLIonRouteRedirectElement: { - prototype: HTMLIonRouteRedirectElement; - new (): HTMLIonRouteRedirectElement; - }; - - interface HTMLIonRouteElement extends IonRoute, HTMLStencilElement {} - var HTMLIonRouteElement: { - prototype: HTMLIonRouteElement; - new (): HTMLIonRouteElement; - }; - - interface HTMLIonRouterOutletElement extends IonRouterOutlet, HTMLStencilElement {} - var HTMLIonRouterOutletElement: { - prototype: HTMLIonRouterOutletElement; - new (): HTMLIonRouterOutletElement; - }; - - interface HTMLIonRouterElement extends IonRouter, HTMLStencilElement {} - var HTMLIonRouterElement: { - prototype: HTMLIonRouterElement; - new (): HTMLIonRouterElement; - }; - - interface HTMLIonRowElement extends IonRow, HTMLStencilElement {} - var HTMLIonRowElement: { - prototype: HTMLIonRowElement; - new (): HTMLIonRowElement; - }; - - interface HTMLIonSearchbarElement extends IonSearchbar, HTMLStencilElement {} - var HTMLIonSearchbarElement: { - prototype: HTMLIonSearchbarElement; - new (): HTMLIonSearchbarElement; - }; - - interface HTMLIonSegmentButtonElement extends IonSegmentButton, HTMLStencilElement {} - var HTMLIonSegmentButtonElement: { - prototype: HTMLIonSegmentButtonElement; - new (): HTMLIonSegmentButtonElement; - }; - - interface HTMLIonSegmentElement extends IonSegment, HTMLStencilElement {} - var HTMLIonSegmentElement: { - prototype: HTMLIonSegmentElement; - new (): HTMLIonSegmentElement; - }; - - interface HTMLIonSelectOptionElement extends IonSelectOption, HTMLStencilElement {} - var HTMLIonSelectOptionElement: { - prototype: HTMLIonSelectOptionElement; - new (): HTMLIonSelectOptionElement; - }; - - interface HTMLIonSelectPopoverElement extends IonSelectPopover, HTMLStencilElement {} - var HTMLIonSelectPopoverElement: { - prototype: HTMLIonSelectPopoverElement; - new (): HTMLIonSelectPopoverElement; - }; - - interface HTMLIonSelectElement extends IonSelect, HTMLStencilElement {} - var HTMLIonSelectElement: { - prototype: HTMLIonSelectElement; - new (): HTMLIonSelectElement; - }; - - interface HTMLIonShowWhenElement extends IonShowWhen, HTMLStencilElement {} - var HTMLIonShowWhenElement: { - prototype: HTMLIonShowWhenElement; - new (): HTMLIonShowWhenElement; - }; - - interface HTMLIonSkeletonTextElement extends IonSkeletonText, HTMLStencilElement {} - var HTMLIonSkeletonTextElement: { - prototype: HTMLIonSkeletonTextElement; - new (): HTMLIonSkeletonTextElement; - }; - - interface HTMLIonSlideElement extends IonSlide, HTMLStencilElement {} - var HTMLIonSlideElement: { - prototype: HTMLIonSlideElement; - new (): HTMLIonSlideElement; - }; - - interface HTMLIonSlidesElement extends IonSlides, HTMLStencilElement {} - var HTMLIonSlidesElement: { - prototype: HTMLIonSlidesElement; - new (): HTMLIonSlidesElement; - }; - - interface HTMLIonSpinnerElement extends IonSpinner, HTMLStencilElement {} - var HTMLIonSpinnerElement: { - prototype: HTMLIonSpinnerElement; - new (): HTMLIonSpinnerElement; - }; - - interface HTMLIonSplitPaneElement extends IonSplitPane, HTMLStencilElement {} - var HTMLIonSplitPaneElement: { - prototype: HTMLIonSplitPaneElement; - new (): HTMLIonSplitPaneElement; - }; - - interface HTMLIonTabElement extends IonTab, HTMLStencilElement {} - var HTMLIonTabElement: { - prototype: HTMLIonTabElement; - new (): HTMLIonTabElement; - }; - - interface HTMLIonTabbarElement extends IonTabbar, HTMLStencilElement {} - var HTMLIonTabbarElement: { - prototype: HTMLIonTabbarElement; - new (): HTMLIonTabbarElement; - }; - - interface HTMLIonTabsElement extends IonTabs, HTMLStencilElement {} - var HTMLIonTabsElement: { - prototype: HTMLIonTabsElement; - new (): HTMLIonTabsElement; - }; - - interface HTMLIonTextElement extends IonText, HTMLStencilElement {} - var HTMLIonTextElement: { - prototype: HTMLIonTextElement; - new (): HTMLIonTextElement; - }; - - interface HTMLIonTextareaElement extends IonTextarea, HTMLStencilElement {} - var HTMLIonTextareaElement: { - prototype: HTMLIonTextareaElement; - new (): HTMLIonTextareaElement; - }; - - interface HTMLIonThumbnailElement extends IonThumbnail, HTMLStencilElement {} - var HTMLIonThumbnailElement: { - prototype: HTMLIonThumbnailElement; - new (): HTMLIonThumbnailElement; - }; - - interface HTMLIonTitleElement extends IonTitle, HTMLStencilElement {} - var HTMLIonTitleElement: { - prototype: HTMLIonTitleElement; - new (): HTMLIonTitleElement; - }; - - interface HTMLIonToastControllerElement extends IonToastController, HTMLStencilElement {} - var HTMLIonToastControllerElement: { - prototype: HTMLIonToastControllerElement; - new (): HTMLIonToastControllerElement; - }; - - interface HTMLIonToastElement extends IonToast, HTMLStencilElement {} - var HTMLIonToastElement: { - prototype: HTMLIonToastElement; - new (): HTMLIonToastElement; - }; - - interface HTMLIonToggleElement extends IonToggle, HTMLStencilElement {} - var HTMLIonToggleElement: { - prototype: HTMLIonToggleElement; - new (): HTMLIonToggleElement; - }; - - interface HTMLIonToolbarElement extends IonToolbar, HTMLStencilElement {} - var HTMLIonToolbarElement: { - prototype: HTMLIonToolbarElement; - new (): HTMLIonToolbarElement; - }; - - interface HTMLIonVirtualScrollElement extends IonVirtualScroll, HTMLStencilElement {} - var HTMLIonVirtualScrollElement: { - prototype: HTMLIonVirtualScrollElement; - new (): HTMLIonVirtualScrollElement; - }; - - 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': 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-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': 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': 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-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': 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; - } -} - - -import { DefaultIntrinsicElements } from '@stencil/core'; - -declare global { - export namespace JSX { - export interface Element {} - export interface IntrinsicElements extends LocalIntrinsicElements, DefaultIntrinsicElements, DependentIntrinsicElements1 { - [tagName: string]: any; - } - } - export interface HTMLAttributes extends JSXElements.HTMLAttributes {} -} - -export declare function defineCustomElements(window: any): void; \ No newline at end of file diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index e1289d23f3..3e14667261 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -1,5 +1,5 @@ // Components interfaces -export * from './generated'; +export * from './components'; export * from './index'; export * from './components/animation-controller/animation-interface'; export * from './components/alert/alert-interface'; @@ -47,7 +47,7 @@ export interface FrameworkDelegate { declare global { - interface StencilAttributeEscapeHatch { + interface StencilGlobalHTMLAttributes { // for ion-menu and ion-split-pane main?: boolean; tappable?: boolean;