diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d9cb56dc5f..844887bb26 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -5,10 +5,17 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, Color, InputChangeEventDetail, RouterDirection, SearchbarChangeEventDetail, SpinnerTypes, StyleEventDetail, TextFieldTypes, ToggleChangeEventDetail } from "./interface"; +import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface"; +import { IonicSafeString } from "./utils/sanitization"; +import { AlertAttributes } from "./components/alert/alert-interface"; import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; import { CounterFormatter } from "./components/item/item-interface"; -import { IonicSafeString } from "./utils/sanitization"; +import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; +import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; +import { PinFormatter } from "./components/range/range-interface"; +import { NavigationHookCallback } from "./components/route/route-interface"; +import { SelectCompareFn } from "./components/select/select-interface"; +import { ToastAttributes, ToastLayout, ToastPosition } from "./components/toast/toast-interface"; export namespace Components { interface IonAccordion { /** @@ -36,6 +43,189 @@ export namespace Components { */ "value": string; } + interface IonAccordionGroup { + /** + * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing. + */ + "animated": boolean; + /** + * If `true`, the accordion group cannot be interacted with. + */ + "disabled": boolean; + /** + * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`. + */ + "expand": 'compact' | 'inset'; + "getAccordions": () => Promise; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, the accordion group can have multiple accordion components expanded at the same time. + */ + "multiple"?: boolean; + /** + * If `true`, the accordion group cannot be interacted with, but does not alter the opacity. + */ + "readonly": boolean; + "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise; + /** + * The value of the accordion group. + */ + "value"?: string | string[] | null; + } + interface IonActionSheet { + /** + * If `true`, the action sheet will animate. + */ + "animated": boolean; + /** + * If `true`, the action sheet will be dismissed when the backdrop is clicked. + */ + "backdropDismiss": boolean; + /** + * An array of buttons for the action sheet. + */ + "buttons": (ActionSheetButton | string)[]; + /** + * 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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + */ + "dismiss": (data?: any, role?: string) => Promise; + /** + * Animation to use when the action sheet is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * Title for the action sheet. + */ + "header"?: string; + /** + * Additional attributes to pass to the action sheet. + */ + "htmlAttributes"?: ActionSheetAttributes; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + /** + * Animation to use when the action sheet is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the action sheet did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the action sheet will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": 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. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "translucent": boolean; + } + interface IonAlert { + /** + * If `true`, the alert will animate. + */ + "animated": boolean; + /** + * If `true`, the alert will be dismissed when the backdrop is clicked. + */ + "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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + */ + "dismiss": (data?: any, role?: string) => Promise; + /** + * Animation to use when the alert is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * The main title in the heading of the alert. + */ + "header"?: string; + /** + * Additional attributes to pass to the alert. + */ + "htmlAttributes"?: AlertAttributes; + /** + * Array of input to show in the alert. + */ + "inputs": AlertInput[]; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + /** + * Animation to use when the alert is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) + */ + "message"?: string | IonicSafeString; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the alert did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the alert will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": 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. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "translucent": boolean; + } + interface IonApp { + "setFocus": (elements: HTMLElement[]) => Promise; + } + interface IonAvatar { + } 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). @@ -70,6 +260,30 @@ export namespace Components { */ "type": 'submit' | 'reset' | 'button'; } + interface IonBackdrop { + /** + * If `true`, the backdrop will stop propagation on tap. + */ + "stopPropagation": boolean; + /** + * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. + */ + "tappable": boolean; + /** + * If `true`, the backdrop will be visible. + */ + "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. + */ + "mode"?: "ios" | "md"; + } interface IonBreadcrumb { /** * If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any. @@ -119,6 +333,394 @@ export namespace Components { */ "target": string | undefined; } + interface IonBreadcrumbs { + /** + * 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 number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed. + */ + "itemsAfterCollapse": number; + /** + * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed. + */ + "itemsBeforeCollapse": number; + /** + * The maximum number of breadcrumbs to show before collapsing. + */ + "maxItems"?: number; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + interface IonButton { + /** + * The type of 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. + */ + "disabled": boolean; + /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + "download": string | undefined; + /** + * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders. + */ + "expand"?: 'full' | 'block'; + /** + * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`. + */ + "fill"?: 'clear' | 'outline' | 'solid' | 'default'; + /** + * The HTML form element or form element id. Used to submit a form when the button is not a child of the form. + */ + "form"?: string | HTMLFormElement; + /** + * 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 | undefined; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + "rel": string | undefined; + /** + * When using a router, it specifies the transition animation when navigating to another page using `href`. + */ + "routerAnimation": AnimationBuilder | undefined; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + "routerDirection": RouterDirection; + /** + * Set to `"round"` for a button with more rounded corners. + */ + "shape"?: 'round'; + /** + * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button. + */ + "size"?: 'small' | 'default' | 'large'; + /** + * If `true`, activates a button with a heavier font weight. + */ + "strong": boolean; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + "target": string | undefined; + /** + * The type of the button. + */ + "type": 'submit' | 'reset' | 'button'; + } + interface IonButtons { + /** + * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in `ios` mode with `collapse` set to `true` on `ion-header`. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) + */ + "collapse": boolean; + } + interface IonCard { + /** + * If `true`, a button tag will be rendered and the card will be tappable. + */ + "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`, the user cannot interact with the card. + */ + "disabled": boolean; + /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + "download": string | undefined; + /** + * 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 | undefined; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + "rel": string | undefined; + /** + * When using a router, it specifies the transition animation when navigating to another page using `href`. + */ + "routerAnimation": AnimationBuilder | undefined; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + "routerDirection": RouterDirection; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + "target": string | undefined; + /** + * The type of the button. Only used when an `onclick` or `button` property is present. + */ + "type": 'submit' | 'reset' | 'button'; + } + interface IonCardContent { + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + 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. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "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. + */ + "mode"?: "ios" | "md"; + } + 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. + */ + "mode"?: "ios" | "md"; + } + interface IonCheckbox { + /** + * If `true`, the checkbox is selected. + */ + "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. + */ + "disabled": boolean; + /** + * If `true`, the checkbox will visually appear as indeterminate. + */ + "indeterminate": boolean; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * The name of the control, which is submitted with the form data. + */ + "name": string; + /** + * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an ``, it's only used when the checkbox participates in a native `
`. + */ + "value": any | null; + } + 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; + /** + * If `true`, the user cannot interact with the chip. + */ + "disabled": boolean; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Display an outline style button. + */ + "outline": boolean; + } + interface IonCol { + /** + * The amount to offset the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end of the total available. + */ + "offsetXs"?: string; + /** + * The amount to pull the column, in terms of how many columns it should shift to the start 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 start 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 start 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 start 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 start 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 start of the total available. + */ + "pullXs"?: string; + /** + * The amount to push the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end 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 { + /** + * 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` 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; + /** + * Returns the background content element. + */ + "getBackgroundElement": () => Promise; + /** + * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`: i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point. + */ + "getScrollElement": () => Promise; + /** + * Scroll by a specified X/Y distance in the component. + * @param x The amount to scroll by on the horizontal axis. + * @param y The amount to scroll by on the vertical axis. + * @param duration The amount of time to take scrolling by that amount. + */ + "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. + * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`. + */ + "scrollToBottom": (duration?: number) => Promise; + /** + * Scroll to a specified X/Y location in the component. + * @param x The point to scroll to on the horizontal axis. + * @param y The point to scroll to on the vertical axis. + * @param duration The amount of time to take scrolling to that point. Defaults to `0`. + */ + "scrollToPoint": (x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise; + /** + * Scroll to the top of the component. + * @param duration The amount of time to take scrolling to the top. Defaults to `0`. + */ + "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 IonDatetime { /** * Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in. @@ -253,6 +855,50 @@ export namespace Components { */ "yearValues"?: number[] | number | string; } + interface IonDatetimeButton { + /** + * 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 ID of the `ion-datetime` instance associated with the datetime button. + */ + "datetime"?: string; + /** + * If `true`, the user cannot interact with the button. + */ + "disabled": boolean; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + interface IonFab { + /** + * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. + */ + "activated": boolean; + /** + * Close an active FAB list container. + */ + "close": () => Promise; + /** + * 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. + */ + "horizontal"?: 'start' | 'end' | 'center'; + /** + * Opens/Closes the FAB list container. + */ + "toggle": () => Promise; + /** + * Where to align the fab vertically in the viewport. + */ + "vertical"?: 'top' | 'bottom' | 'center'; + } interface IonFabButton { /** * If `true`, the fab button will be show a close icon. @@ -315,6 +961,88 @@ export namespace Components { */ "type": 'submit' | 'reset' | 'button'; } + interface IonFabList { + /** + * If `true`, the fab list will show all fab buttons in the list. + */ + "activated": boolean; + /** + * The side the fab list will show on relative to the main fab button. + */ + "side": 'start' | 'end' | 'top' | 'bottom'; + } + interface IonFooter { + /** + * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode. + */ + "collapse"?: 'fade'; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. + */ + "translucent": boolean; + } + interface IonGrid { + /** + * If `true`, the grid will have a fixed width based on the screen size. + */ + "fixed": boolean; + } + interface IonHeader { + /** + * Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) + */ + "collapse"?: 'condense' | 'fade'; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. + */ + "translucent": boolean; + } + 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 IonInfiniteScroll { + /** + * Call `complete()` within the `ionInfinite` 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": () => Promise; + /** + * 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`. + */ + "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. + */ + "threshold": string; + } + interface IonInfiniteScrollContent { + /** + * An animated SVG spinner that shows while loading. + */ + "loadingSpinner"?: SpinnerTypes | null; + /** + * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) + */ + "loadingText"?: string | IonicSafeString; + } interface IonInput { /** * This attribute is ignored. @@ -520,6 +1248,267 @@ export namespace Components { */ "type": 'submit' | 'reset' | 'button'; } + 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. + */ + "mode"?: "ios" | "md"; + /** + * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky + */ + "sticky": boolean; + } + interface IonItemGroup { + } + interface IonItemOption { + /** + * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). + */ + "color"?: Color; + /** + * If `true`, the user cannot interact with the item option. + */ + "disabled": boolean; + /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + "download": string | undefined; + /** + * If `true`, the option will expand to take up the available width and cover any other options. + */ + "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 | undefined; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + "rel": string | undefined; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + "target": string | undefined; + /** + * The type of the button. + */ + "type": 'submit' | 'reset' | 'button'; + } + interface IonItemOptions { + "fireSwipeEvent": () => Promise; + /** + * The side the option button should be on. Possible values: `"start"` and `"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). + */ + "close": () => Promise; + /** + * Close all of the sliding items in the list. Items can also be closed from the [List](./list). + */ + "closeOpened": () => Promise; + /** + * If `true`, the user cannot interact with the sliding item. + */ + "disabled": boolean; + /** + * Get the amount the item is open in pixels. + */ + "getOpenAmount": () => Promise; + /** + * 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": () => Promise; + /** + * Open the sliding item. + * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item. + */ + "open": (side: Side | undefined) => Promise; + } + 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; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * The position determines where and how the label behaves inside an item. + */ + "position"?: 'fixed' | 'stacked' | 'floating'; + } + interface IonList { + /** + * If `ion-item-sliding` are used inside the list, this method closes any open sliding item. Returns `true` if an actual `ion-item-sliding` is closed. + */ + "closeSlidingItems": () => Promise; + /** + * If `true`, the list will have margin around it and rounded corners. + */ + "inset": boolean; + /** + * How the bottom border should be displayed on all items. + */ + "lines"?: 'full' | 'inset' | 'none'; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + 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; + /** + * How the bottom border should be displayed on the list header. + */ + "lines"?: 'full' | 'inset' | 'none'; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + interface IonLoading { + /** + * If `true`, the loading indicator will animate. + */ + "animated": boolean; + /** + * If `true`, the loading indicator will be dismissed when the backdrop is clicked. + */ + "backdropDismiss": boolean; + /** + * 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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + */ + "dismiss": (data?: any, role?: string) => Promise; + /** + * Number of milliseconds to wait before dismissing the loading indicator. + */ + "duration": number; + /** + * Animation to use when the loading indicator is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * Additional attributes to pass to the loader. + */ + "htmlAttributes"?: LoadingAttributes; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + /** + * Animation to use when the loading indicator is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * Optional text content to display in the loading indicator. + */ + "message"?: string | IonicSafeString; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the loading did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the loading will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": number; + /** + * Present the loading overlay after it has been created. + */ + "present": () => Promise; + /** + * If `true`, a backdrop will be displayed behind the loading indicator. + */ + "showBackdrop": boolean; + /** + * The name of the spinner to display. + */ + "spinner"?: SpinnerTypes | null; + /** + * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "translucent": boolean; + } + interface IonMenu { + /** + * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`. + */ + "close": (animated?: boolean) => Promise; + /** + * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`. + */ + "contentId"?: string; + /** + * If `true`, the menu is disabled. + */ + "disabled": boolean; + /** + * Returns `true` is the menu is active. A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`. + */ + "isActive": () => Promise; + /** + * Returns `true` is the menu is open. + */ + "isOpen": () => Promise; + /** + * 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; + /** + * Opens the menu. If the menu is already open or it can't be opened, it returns `false`. + */ + "open": (animated?: boolean) => Promise; + /** + * Opens or closes the button. If the operation can't be completed successfully, it returns `false`. + */ + "setOpen": (shouldOpen: boolean, animated?: boolean) => Promise; + /** + * Which side of the view the menu should be placed. + */ + "side": Side; + /** + * If `true`, swiping the menu is enabled. + */ + "swipeGesture": boolean; + /** + * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`. + */ + "toggle": (animated?: boolean) => Promise; + /** + * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + */ + "type"?: string; + } interface IonMenuButton { /** * Automatically hides the menu button when the corresponding menu is not active @@ -546,6 +1535,686 @@ export namespace Components { */ "type": 'submit' | 'reset' | 'button'; } + 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 IonModal { + /** + * If `true`, the modal will animate. + */ + "animated": boolean; + /** + * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. + */ + "backdropBreakpoint": number; + /** + * If `true`, the modal will be dismissed when the backdrop is clicked. + */ + "backdropDismiss": boolean; + /** + * The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] + */ + "breakpoints"?: number[]; + /** + * Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss. + */ + "canDismiss"?: undefined | boolean | ((data?: any, role?: string) => Promise); + /** + * 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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. + */ + "dismiss": (data?: any, role?: string) => Promise; + /** + * Animation to use when the modal is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * Returns the current breakpoint of a sheet style modal + */ + "getCurrentBreakpoint": () => Promise; + /** + * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. + */ + "handle"?: boolean; + /** + * The interaction behavior for the sheet modal when the handle is pressed. Defaults to `"none"`, which means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed. Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal). + */ + "handleBehavior"?: ModalHandleBehavior; + "hasController": boolean; + /** + * Additional attributes to pass to the modal. + */ + "htmlAttributes"?: ModalAttributes; + /** + * A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. + */ + "initialBreakpoint"?: number; + /** + * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. + */ + "isOpen": boolean; + /** + * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal. Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue. + */ + "keepContentsMounted": boolean; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + /** + * Animation to use when the modal is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the modal did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the modal will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": number; + /** + * Present the modal overlay after it has been created. + */ + "present": () => Promise; + /** + * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode. + */ + "presentingElement"?: HTMLElement; + /** + * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array. + */ + "setCurrentBreakpoint": (breakpoint: number) => Promise; + /** + * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM. + */ + "showBackdrop": boolean; + /** + * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode. + * @deprecated - To prevent modals from dismissing, use canDismiss instead. + */ + "swipeToClose": boolean; + /** + * An ID corresponding to the trigger element that causes the modal to open when clicked. + */ + "trigger": string | undefined; + } + interface IonNav { + /** + * If `true`, the nav should animate the transition of components. + */ + "animated": boolean; + /** + * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions. + */ + "animation"?: AnimationBuilder; + /** + * Returns `true` if the current view can go back. + * @param view The view to check. + */ + "canGoBack": (view?: ViewController) => Promise; + "delegate"?: FrameworkDelegate; + /** + * Get the active view. + */ + "getActive": () => Promise; + /** + * Get the view at the specified index. + * @param index The index of the view. + */ + "getByIndex": (index: number) => Promise; + /** + * Get the previous view. + * @param view The view to get. + */ + "getPrevious": (view?: ViewController) => Promise; + /** + * Called by to retrieve the current component. + */ + "getRouteId": () => Promise; + /** + * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. + * @param insertIndex The index to insert the component at in the stack. + * @param component The component to insert into the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "insert": (insertIndex: number, component: T, componentProps?: ComponentProps | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Inserts an array of components into the navigation 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. + * @param insertIndex The index to insert the components at in the stack. + * @param insertComponents The components to insert into the navigation stack. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Pop a component off of the navigation stack. Navigates back from the current component. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "pop": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Pop to a specific index in the navigation stack. + * @param indexOrViewCtrl The index or view controller to pop to. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "popTo": (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Navigate back to the root of the stack, no matter how far back that is. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "popToRoot": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. + * @param component The component to push onto the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "push": (component: T, componentProps?: ComponentProps | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Removes a component from the navigation stack at the specified index. + * @param startIndex The number to begin removal at. + * @param removeCount The number of components to remove. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "removeIndex": (startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => 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. Navigation parameters can also be passed to the individual pages in the array. + * @param views The list of views to set as the navigation stack. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "setPages": (views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Set the root for the current navigation stack to a component. + * @param component The component to set as the root of the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. + */ + "setRoot": (component: T, componentProps?: ComponentProps | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise; + /** + * Called by the router to update the view. + * @param id The component tag. + * @param params The component params. + * @param direction A direction hint. + * @param animation an AnimationBuilder. + * @return the status. + */ + "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise; + /** + * If the nav component should allow for swipe-to-go-back. + */ + "swipeGesture"?: boolean; + } + interface IonNavLink { + /** + * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. + */ + "component"?: NavComponent; + /** + * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. + */ + "componentProps"?: ComponentProps; + /** + * The transition animation when navigating to another page. + */ + "routerAnimation"?: AnimationBuilder; + /** + * The transition direction when navigating to another page. + */ + "routerDirection": RouterDirection; + } + 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. + */ + "mode"?: "ios" | "md"; + } + interface IonPicker { + /** + * If `true`, the picker will animate. + */ + "animated": boolean; + /** + * If `true`, the picker will be dismissed when the backdrop is clicked. + */ + "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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + */ + "dismiss": (data?: any, role?: string) => Promise; + /** + * Number of milliseconds to wait before dismissing the picker. + */ + "duration": number; + /** + * Animation to use when the picker is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * Get the column that matches the specified name. + * @param name The name of the column. + */ + "getColumn": (name: string) => Promise; + /** + * Additional attributes to pass to the picker. + */ + "htmlAttributes"?: PickerAttributes; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + /** + * Animation to use when the picker is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the picker did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the picker will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": number; + /** + * Present the picker overlay after it has been created. + */ + "present": () => Promise; + /** + * If `true`, a backdrop will be displayed behind the picker. + */ + "showBackdrop": boolean; + } + interface IonPickerColumn { + /** + * Picker column data + */ + "col": PickerColumn; + } + interface IonPickerColumnInternal { + /** + * 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 list of options to be displayed in the picker + */ + "items": PickerColumnItem[]; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers. + */ + "numericInput": boolean; + "scrollActiveItemIntoView": () => Promise; + /** + * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners. + */ + "setValue": (value?: string | number) => Promise; + /** + * The selected option in the picker. + */ + "value"?: string | number; + } + interface IonPickerInternal { + "exitInputMode": () => Promise; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + interface IonPopover { + /** + * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode. + */ + "alignment"?: PositionAlign; + /** + * If `true`, the popover will animate. + */ + "animated": boolean; + /** + * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode. + */ + "arrow": boolean; + /** + * If `true`, the popover will be dismissed when the backdrop is clicked. + */ + "backdropDismiss": boolean; + /** + * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`. + */ + "component"?: ComponentRef; + /** + * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your 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. + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'. + * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`. + */ + "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise; + /** + * If `true`, the popover will be automatically dismissed when the content has been clicked. + */ + "dismissOnSelect": boolean; + /** + * Animation to use when the popover is presented. + */ + "enterAnimation"?: AnimationBuilder; + /** + * The event to pass to the popover animation. + */ + "event": any; + "getParentPopover": () => Promise; + "hasController": boolean; + /** + * Additional attributes to pass to the popover. + */ + "htmlAttributes"?: PopoverAttributes; + /** + * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. + */ + "isOpen": boolean; + /** + * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover. Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue. + */ + "keepContentsMounted": boolean; + /** + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. + */ + "keyboardClose": boolean; + "keyboardEvents": boolean; + /** + * Animation to use when the popover is dismissed. + */ + "leaveAnimation"?: AnimationBuilder; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Returns a promise that resolves when the popover did dismiss. + */ + "onDidDismiss": () => Promise>; + /** + * Returns a promise that resolves when the popover will dismiss. + */ + "onWillDismiss": () => Promise>; + "overlayIndex": number; + /** + * Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched. + */ + "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise; + /** + * When opening a popover from a trigger, we should not be modifying the `event` prop from inside the component. Additionally, when pressing the "Right" arrow key, we need to shift focus to the first descendant in the newly presented popover. + */ + "presentFromTrigger": (event?: any, focusDescendant?: boolean) => Promise; + /** + * Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY. + */ + "reference": PositionReference; + /** + * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM. + */ + "showBackdrop": boolean; + /** + * Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not. + */ + "side": PositionSide; + /** + * Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover. + */ + "size": PopoverSize; + /** + * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "translucent": boolean; + /** + * An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening. + */ + "trigger": string | undefined; + /** + * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. + */ + "triggerAction": TriggerAction; + } + interface IonProgressBar { + /** + * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. + */ + "buffer": number; + /** + * 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. + */ + "mode"?: "ios" | "md"; + /** + * If true, reverse the progress bar direction. + */ + "reversed": boolean; + /** + * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). + */ + "type": 'determinate' | 'indeterminate'; + /** + * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1]. + */ + "value": number; + } + interface IonRadio { + /** + * 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 radio. + */ + "disabled": boolean; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * The name of the control, which is submitted with the form data. + */ + "name": string; + "setButtonTabindex": (value: number) => Promise; + "setFocus": (ev: any) => Promise; + /** + * the value of the radio. + */ + "value"?: any | null; + } + interface IonRadioGroup { + /** + * If `true`, the radios can be deselected. + */ + "allowEmptySelection": boolean; + /** + * The name of the control, which is submitted with the form data. + */ + "name": string; + /** + * the value of the radio group. + */ + "value"?: any | null; + } + interface IonRange { + /** + * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value. + */ + "activeBarStart"?: number; + /** + * 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. This also impacts form bindings such as `ngModel` or `v-model`. + */ + "debounce": number; + /** + * If `true`, the user cannot interact with the range. + */ + "disabled": boolean; + /** + * Show two knobs. + */ + "dualKnobs": boolean; + /** + * Maximum integer value of the range. + */ + "max": number; + /** + * Minimum integer value of the range. + */ + "min": number; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * 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. + */ + "pin": boolean; + /** + * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. + */ + "pinFormatter": PinFormatter; + /** + * If `true`, the knob snaps to tick marks evenly spaced based on the step property value. + */ + "snaps": boolean; + /** + * Specifies the value granularity. + */ + "step": number; + /** + * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`. + */ + "ticks": boolean; + /** + * the value of the range. + */ + "value": RangeValue; + } + interface IonRefresher { + /** + * Changes the refresher's state from `refreshing` to `cancelling`. + */ + "cancel": () => Promise; + /** + * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher. + */ + "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": () => Promise; + /** + * If `true`, the refresher will be hidden. + */ + "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": () => Promise; + /** + * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher. + */ + "pullFactor": number; + /** + * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when the refresher content uses a spinner, enabling the native refresher. + */ + "pullMax": number; + /** + * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. + */ + "pullMin": number; + /** + * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. + */ + "snapbackDuration": string; + } interface IonRefresherContent { /** * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. @@ -566,6 +2235,131 @@ export namespace Components { } interface IonReorder { } + interface IonReorderGroup { + /** + * Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position. + * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item. + */ + "complete": (listOrReorder?: boolean | any[]) => Promise; + /** + * If `true`, the reorder will be hidden. + */ + "disabled": boolean; + } + interface IonRippleEffect { + /** + * Adds the ripple effect to the parent element. + * @param x The horizontal coordinate of where the ripple should start. + * @param y The vertical coordinate of where the ripple should start. + */ + "addRipple": (x: number, y: number) => Promise<() => void>; + /** + * Sets the type of ripple-effect: - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. + */ + "type": 'bounded' | 'unbounded'; + } + interface IonRoute { + /** + * A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified. + */ + "beforeEnter"?: NavigationHookCallback; + /** + * A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified. + */ + "beforeLeave"?: NavigationHookCallback; + /** + * 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 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 perform 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 | undefined | null; + } + interface IonRouter { + /** + * Go back to previous page in the window.history. + */ + "back": () => Promise; + "canTransition": () => Promise; + "navChanged": (direction: RouterDirection) => Promise; + "printDebug": () => Promise; + /** + * Navigate to the specified path. + * @param path The path to navigate to. + * @param direction The direction of the animation. Defaults to `"forward"`. + */ + "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise; + /** + * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. + */ + "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 additional server-side configuration in order to properly work. On the other side 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 IonRouterLink { + /** + * 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 | undefined; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + "rel": string | undefined; + /** + * When using a router, it specifies the transition animation when navigating to another page using `href`. + */ + "routerAnimation": AnimationBuilder | undefined; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + "routerDirection": RouterDirection; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + "target": string | undefined; + } + interface IonRouterOutlet { + /** + * If `true`, the router-outlet should animate the transition of components. + */ + "animated": boolean; + /** + * This property allows to create custom transition using AnimationBuilder functions. + */ + "animation"?: AnimationBuilder; + "commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions) => Promise; + "delegate"?: FrameworkDelegate; + "getRouteId": () => Promise; + /** + * The mode determines which platform styles to use. + */ + "mode": "ios" | "md"; + "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise; + "swipeHandler"?: SwipeGestureHandler; + } + interface IonRow { + } interface IonSearchbar { /** * If `true`, enable searchbar animation. @@ -652,6 +2446,579 @@ export namespace Components { */ "value"?: string | null; } + 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; + /** + * If `true`, the user cannot interact with the segment. + */ + "disabled": boolean; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. + */ + "scrollable": boolean; + /** + * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element. + */ + "selectOnFocus": boolean; + /** + * If `true`, users will be able to swipe between segment buttons to activate them. + */ + "swipeGesture": boolean; + /** + * the value of the segment. + */ + "value"?: string | null; + } + interface IonSegmentButton { + /** + * If `true`, the user cannot interact with the segment button. + */ + "disabled": boolean; + /** + * Set the layout of the text and icon in the segment. + */ + "layout"?: SegmentButtonLayout; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + "setFocus": () => Promise; + /** + * The type of the button. + */ + "type": 'submit' | 'reset' | 'button'; + /** + * The value of the segment button. + */ + "value": string; + } + interface IonSelect { + /** + * The text to display on the cancel button. + */ + "cancelText": string; + /** + * A property name or function used to compare object values + */ + "compareWith"?: string | SelectCompareFn | null; + /** + * If `true`, the user cannot interact with the select. + */ + "disabled": boolean; + /** + * The interface the select should use: `action-sheet`, `popover` or `alert`. + */ + "interface": SelectInterface; + /** + * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. + */ + "interfaceOptions": any; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * 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. + */ + "okText": string; + /** + * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`. + * @param event The user interface event that called the open. + */ + "open": (event?: UIEvent) => 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 | null; + /** + * the value of the select. + */ + "value"?: any | null; + } + interface IonSelectOption { + /** + * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons. + */ + "disabled": boolean; + /** + * The text value of the option. + */ + "value"?: any | null; + } + interface IonSelectPopover { + /** + * The header text of the popover + */ + "header"?: string; + /** + * The text content of the popover body + */ + "message"?: string; + /** + * If true, the select accepts multiple values + */ + "multiple"?: boolean; + /** + * An array of options for the popover + */ + "options": SelectPopoverOption[]; + /** + * The subheader text of the popover + */ + "subHeader"?: string; + } + interface IonSkeletonText { + /** + * If `true`, the skeleton text will animate. + */ + "animated": boolean; + } + interface IonSlide { + } + interface IonSlides { + /** + * Get the index of the active slide. + */ + "getActiveIndex": () => Promise; + /** + * Get the index of the previous slide. + */ + "getPreviousIndex": () => Promise; + /** + * Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options. + */ + "getSwiper": () => Promise; + /** + * Get whether or not the current slide is the first slide. + */ + "isBeginning": () => Promise; + /** + * Get whether or not the current slide is the last slide. + */ + "isEnd": () => Promise; + /** + * Get the total number of slides. + */ + "length": () => Promise; + /** + * Lock or unlock the ability to slide to the next slide. + * @param lock If `true`, disable swiping to the next slide. + */ + "lockSwipeToNext": (lock: boolean) => Promise; + /** + * Lock or unlock the ability to slide to the previous slide. + * @param lock If `true`, disable swiping to the previous slide. + */ + "lockSwipeToPrev": (lock: boolean) => Promise; + /** + * Lock or unlock the ability to slide to the next or previous slide. + * @param lock If `true`, disable swiping to the next and previous slide. + */ + "lockSwipes": (lock: boolean) => Promise; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options + */ + "options": any; + /** + * If `true`, show the pagination. + */ + "pager": boolean; + /** + * If `true`, show the scrollbar. + */ + "scrollbar": boolean; + /** + * Transition to the next slide. + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. + */ + "slideNext": (speed?: number, runCallbacks?: boolean) => Promise; + /** + * Transition to the previous slide. + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. + */ + "slidePrev": (speed?: number, runCallbacks?: boolean) => Promise; + /** + * Transition to the specified slide. + * @param index The index of the slide to transition to. + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. + */ + "slideTo": (index: number, speed?: number, runCallbacks?: boolean) => Promise; + /** + * Start auto play. + */ + "startAutoplay": () => Promise; + /** + * Stop auto play. + */ + "stopAutoplay": () => Promise; + /** + * Update the underlying slider implementation. Call this if you've added or removed child slides. + */ + "update": () => Promise; + /** + * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. + * @param speed The transition duration (in ms). + */ + "updateAutoHeight": (speed?: number) => Promise; + } + 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 name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. + */ + "name"?: SpinnerTypes; + /** + * If `true`, the spinner's animation will be paused. + */ + "paused": boolean; + } + interface IonSplitPane { + /** + * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`. + */ + "contentId"?: string; + /** + * If `true`, the split pane will be hidden. + */ + "disabled": 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 IonTab { + "active": boolean; + /** + * The component to display inside of the tab. + */ + "component"?: ComponentRef; + "delegate"?: FrameworkDelegate; + /** + * Set the active component for the tab + */ + "setActive": () => Promise; + /** + * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. + */ + "tab": string; + } + interface IonTabBar { + /** + * 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. + */ + "mode"?: "ios" | "md"; + /** + * The selected tab component + */ + "selectedTab"?: string; + /** + * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + */ + "translucent": boolean; + } + interface IonTabButton { + /** + * If `true`, the user cannot interact with the tab button. + */ + "disabled": boolean; + /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + "download": string | undefined; + /** + * 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 | undefined; + /** + * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. + */ + "layout"?: TabButtonLayout; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + "rel": string | undefined; + /** + * The selected tab component + */ + "selected": boolean; + /** + * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. + */ + "tab"?: string; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + "target": string | undefined; + } + interface IonTabs { + "getRouteId": () => Promise; + /** + * Get the currently selected tab. + */ + "getSelected": () => Promise; + /** + * Get a specific tab by the value of its `tab` property or an element reference. + * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. + */ + "getTab": (tab: string | HTMLIonTabElement) => Promise; + /** + * Select a tab by the value of its `tab` property or an element reference. + * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. + */ + "select": (tab: string | HTMLIonTabElement) => Promise; + "setRouteId": (id: string) => Promise; + "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. + */ + "mode"?: "ios" | "md"; + } + interface IonTextarea { + /** + * If `true`, the textarea container will grow and shrink based on the contents of the textarea. + */ + "autoGrow": boolean; + /** + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. + */ + "autocapitalize": string; + /** + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. + */ + "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. This also impacts form bindings such as `ngModel` or `v-model`. + */ + "debounce": number; + /** + * If `true`, the user cannot interact with the textarea. + */ + "disabled": boolean; + /** + * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. + */ + "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** + * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14. + */ + "fireFocusEvents": boolean; + /** + * Returns the native `