javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): update to latest stencil

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-22 23:37:32 +02:00
parent 11edc49dfe
commit 3d6caae13f
34 changed files with 248 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
angular/src/directives/proxies.ts
View File

@ -1,6 +1,7 @@
/* auto-generated angular directive proxies */
/* tslint:disable */
import { Directive, ElementRef, EventEmitter } from '@angular/core';
import { StencilComponents } from '@ionic/core';
export function proxyInputs(instance: any, el: ElementRef, props: string[]) {
props.forEach(propName => {

1
angular/stencil.config.js
View File

@ -14,6 +14,7 @@ exports.config.globalScript = '../core/src/global/ionic-global.ts';
exports.config.outputTargets = [
{
type: 'angular',
componentCorePackage: '@ionic/core',
directivesProxyFile: 'src/directives/proxies.ts',
directivesArrayFile: 'src/directives/proxies-list.txt',
empty: false,

4
core/package.json
View File

@ -24,10 +24,10 @@
"css/"
],
"dependencies": {
"ionicons": "4.3.0"
"ionicons": "4.4.0"
},
"devDependencies": {
"@stencil/core": "^0.12.0-3",
"@stencil/core": "^0.12.0-4",
"@stencil/dev-server": "latest",
"@stencil/sass": "0.1.0",
"@stencil/utils": "latest",

2
core/src/components/action-sheet/readme.md
View File

@ -20,7 +20,7 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | An array of buttons for the action sheet. | `ActionSheetButton[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` |
| `header` | `header` | Title for the action sheet. | `string` |
| `keyboardClose` | `keyboard-close` | If the actionSheet should close the keyboard | `boolean` |

2
core/src/components/alert/readme.md
View File

@ -29,7 +29,7 @@ Alerts can also include several different inputs whose data can be passed back t
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(AlertButton | string)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` |
| `header` | `header` | The main title in the heading of the alert. | `string` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` |

12
core/src/components/button/readme.md
View File

@ -38,19 +38,19 @@ This attribute specifies the size of the button. Setting this attribute will cha
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| `buttonType` | `button-type` | The type of button. Possible values are: `"button"`, `"bar-button"`. | `string` |
| `color` | `color` | 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` |
| `disabled` | `disabled` | If true, the user cannot interact with the button. Defaults to `false`. | `boolean` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `'full' | 'block'` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `'clear' | 'outline' | 'solid' | 'default'` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"full"`, `"block"` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear"`, `"outline"`, `"solid"`, `"default"` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` |
| `shape` | `shape` | The button shape. Possible values are: `"round"`. | `'round'` |
| `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `'small' | 'default' | 'large'` |
| `shape` | `shape` | The button shape. Possible values are: `"round"`. | `"round"` |
| `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `"small"`, `"default"`, `"large"` |
| `strong` | `strong` | If true, activates a button with a heavier font weight. | `boolean` |
| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `'submit' | 'reset' | 'button'` |
| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"submit"`, `"reset"`, `"button"` |
## Events

4
core/src/components/chip-button/readme.md
View File

@ -8,10 +8,10 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `color` | `color` | 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` |
| `disabled` | `disabled` | If true, the user cannot interact with the chip button. Defaults to `false`. | `boolean` |
| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. | `'clear' | 'solid'` |
| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear"`, `"solid"` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |

4
core/src/components/chip-icon/readme.md
View File

@ -8,9 +8,9 @@
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `color` | `color` | 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` |
| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. | `'clear' | 'solid'` |
| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear"`, `"solid"` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string` |
| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string` |

20
core/src/components/datetime/readme.md
View File

@ -205,26 +205,26 @@ dates in JavaScript.
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. Default: `Cancel`. | `string` |
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string[] | string` |
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string[] | string` |
| `dayValues` | -- | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number[] | number | string` |
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string[]`, `string` |
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string[]`, `string` |
| `dayValues` | -- | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number[]`, `number`, `string` |
| `disabled` | `disabled` | If true, the user cannot interact with the datetime. Defaults to `false`. | `boolean` |
| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` |
| `doneText` | `done-text` | The text to display on the picker's "Done" button. Default: `Done`. | `string` |
| `hourValues` | -- | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number[] | number | string` |
| `hourValues` | -- | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number[]`, `number`, `string` |
| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string` |
| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string` |
| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number[] | number | string` |
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string[] | string` |
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string[] | string` |
| `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number[] | number | string` |
| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number[]`, `number`, `string` |
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string[]`, `string` |
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string[]`, `string` |
| `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number[]`, `number`, `string` |
| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `string` |
| `value` | -- | the value of the datetime. | `any` |
| `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number[] | number | string` |
| `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number[]`, `number`, `string` |
## Events

4
core/src/components/fab-list/readme.md
View File

@ -8,9 +8,9 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
## Properties
| Property | Attribute | Description | Type |
| ----------- | ----------- | ------------------------------------------------------------------------------------------- | ------------------------------------ |
| ----------- | ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------- |
| `activated` | `activated` | If true, the fab list will be show all fab buttons in the list. Defaults to `false`. | `boolean` |
| `side` | `side` | The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. | `'start' | 'end' | 'top' | 'bottom'` |
| `side` | `side` | The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. | `"start"`, `"end"`, `"top"`, `"bottom"` |
----------------------------------------------

6
core/src/components/fab/readme.md
View File

@ -8,11 +8,11 @@ Fabs are container elements that contain one or more fab buttons. They should be
## Properties
| Property | Attribute | Description | Type |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
| `activated` | `activated` | | `boolean` |
| `edge` | `edge` | 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. | `boolean` |
| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. | `'start' | 'end' | 'center'` |
| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `'top' | 'bottom' | 'center'` |
| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. | `"start"`, `"end"`, `"center"` |
| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `"top"`, `"bottom"`, `"center"` |
## Methods

4
core/src/components/infinite-scroll/readme.md
View File

@ -18,9 +18,9 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component
## Properties
| Property | Attribute | Description | Type |
| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `disabled` | `disabled` | 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. | `boolean` |
| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. | `'top' | 'bottom'` |
| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. | `"top"`, `"bottom"` |
| `threshold` | `threshold` | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. | `string` |

8
core/src/components/item/readme.md
View File

@ -46,18 +46,18 @@ Items left align text and add an ellipsis when the text is wider than the item.
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `button` | `button` | If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. | `boolean` |
| `color` | `color` | 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` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. | `string` |
| `detail` | `detail` | If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean` |
| `disabled` | `disabled` | If true, the user cannot interact with the item. Defaults to `false`. | `boolean` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string` |
| `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `'full' | 'inset' | 'none'` |
| `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `"full"`, `"inset"`, `"none"` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` |
| `state` | `state` | | `'valid' | 'invalid' | 'focus'` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `'submit' | 'reset' | 'button'` |
| `state` | `state` | | `"valid"`, `"invalid"`, `"focus"` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"submit"`, `"reset"`, `"button"` |
----------------------------------------------

4
core/src/components/label/readme.md
View File

@ -9,10 +9,10 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| `color` | `color` | 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` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `position` | `position` | The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' | `'fixed' | 'stacked' | 'floating'` |
| `position` | `position` | The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' | `"fixed"`, `"stacked"`, `"floating"` |
## Events

4
core/src/components/list/readme.md
View File

@ -12,9 +12,9 @@ Lists support several interactions including swiping items to reveal options, dr
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | --------------------------------------------------------------------------------------------------------- | --------------------------- |
| -------- | --------- | --------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `inset` | `inset` | If true, the list will have margin around it and rounded corners. Defaults to `false`. | `boolean` |
| `lines` | `lines` | How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. | `'full' | 'inset' | 'none'` |
| `lines` | `lines` | How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. | `"full"`, `"inset"`, `"none"` |
## Methods

4
core/src/components/loading/readme.md
View File

@ -19,10 +19,10 @@ The loading indicator can be dismissed automatically after a specific amount of
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `content` | `content` | Optional text content to display in the loading indicator. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` |

4
core/src/components/menu-controller/animations/overlay.ts
View File

@ -1,4 +1,4 @@
import { Animation, Menu } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { baseAnimation } from './base';
@ -9,7 +9,7 @@ const BOX_SHADOW_WIDTH = 8;
* The menu slides over the content. The content
* itself, which is under the menu, does not move.
*/
export function menuOverlayAnimation(AnimationC: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuOverlayAnimation(AnimationC: Animation, _: HTMLElement, menu: MenuI): Promise<Animation> {
let closedX: string;
let openedX: string;
const width = menu.width + BOX_SHADOW_WIDTH;

4
core/src/components/menu-controller/animations/push.ts
View File

@ -1,4 +1,4 @@
import { Animation, Menu } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { baseAnimation } from './base';
@ -8,7 +8,7 @@ import { baseAnimation } from './base';
* The content slides over to reveal the menu underneath.
* The menu itself also slides over to reveal its bad self.
*/
export function menuPushAnimation(AnimationC: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuPushAnimation(AnimationC: Animation, _: HTMLElement, menu: MenuI): Promise<Animation> {
let contentOpenedX: string;
let menuClosedX: string;

4
core/src/components/menu-controller/animations/reveal.ts
View File

@ -1,4 +1,4 @@
import { Animation, Menu } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { baseAnimation } from './base';
@ -8,7 +8,7 @@ import { baseAnimation } from './base';
* The content slides over to reveal the menu underneath.
* The menu itself, which is under the content, does not move.
*/
export function menuRevealAnimation(AnimationC: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuRevealAnimation(AnimationC: Animation, _: HTMLElement, menu: MenuI): Promise<Animation> {
const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
const contentOpen = new AnimationC()

16
core/src/components/menu-controller/menu-controller.ts
View File

@ -1,6 +1,6 @@
import { Build, Component, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Menu } from '../../interface';
import { Animation, AnimationBuilder, MenuI } from '../../interface';
import { menuOverlayAnimation } from './animations/overlay';
import { menuPushAnimation } from './animations/push';
@ -11,7 +11,7 @@ import { menuRevealAnimation } from './animations/reveal';
styleUrl: 'menu-controller.scss'
})
export class MenuController {
private menus: Menu[] = [];
private menus: MenuI[] = [];
private menuAnimations = new Map<string, AnimationBuilder>();
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@ -183,14 +183,14 @@ export class MenuController {
}
@Method()
_register(menu: Menu) {
_register(menu: MenuI) {
if (this.menus.indexOf(menu) < 0) {
this.menus.push(menu);
}
}
@Method()
_unregister(menu: Menu) {
_unregister(menu: MenuI) {
const index = this.menus.indexOf(menu);
if (index > -1) {
this.menus.splice(index, 1);
@ -198,7 +198,7 @@ export class MenuController {
}
@Method()
_setActiveMenu(menu: Menu) {
_setActiveMenu(menu: MenuI) {
// if this menu should be enabled
// then find all the other menus on this same side
// and automatically disable other same side menus
@ -209,7 +209,7 @@ export class MenuController {
}
@Method()
_setOpen(menu: Menu, shouldOpen: boolean, animated: boolean): Promise<boolean> {
_setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> {
if (this.isAnimating()) {
return Promise.resolve(false);
}
@ -223,7 +223,7 @@ export class MenuController {
}
@Method()
createAnimation(type: string, menuCmp: Menu): Promise<Animation> {
createAnimation(type: string, menuCmp: MenuI): Promise<Animation> {
const animationBuilder = this.menuAnimations.get(type);
if (!animationBuilder) {
return Promise.reject('animation not registered');
@ -236,7 +236,7 @@ export class MenuController {
this.menuAnimations.set(name, animation);
}
private find(predicate: (menu: Menu) => boolean): HTMLIonMenuElement | null {
private find(predicate: (menu: MenuI) => boolean): HTMLIonMenuElement | null {
const instance = this.menus.find(predicate);
if (instance) {
return instance.el;

27
core/src/components/menu/menu-interface.ts
View File

@ -1,4 +1,29 @@
export { Menu } from './menu';
import { Side } from '../../interface';
export interface MenuI {
el: HTMLIonMenuElement;
side: Side;
menuId?: string;
disabled: boolean;
isAnimating: boolean;
width: number;
isEndSide: boolean;
backdropEl?: HTMLElement;
menuInnerEl?: HTMLElement;
contentEl?: HTMLElement;
menuCtrl?: HTMLIonMenuControllerElement;
isOpen(): boolean;
open(animated?: boolean): Promise<boolean>;
close(animated?: boolean): Promise<boolean>;
toggle(animated?: boolean): Promise<boolean>;
setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>;
_setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>;
isActive(): boolean;
getWidth(): number;
}
export interface MenuChangeEvent {
target: HTMLIonMenuElement;

4
core/src/components/menu/menu.tsx
View File

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, Mode, Side } from '../../interface';
import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuI, Mode, Side } from '../../interface';
import { assert, isEndSide as isEnd } from '../../utils/helpers';
@Component({
@ -11,7 +11,7 @@ import { assert, isEndSide as isEnd } from '../../utils/helpers';
},
shadow: true
})
export class Menu {
export class Menu implements MenuI {
private animation?: Animation;
private _isOpen = false;

4
core/src/components/modal/readme.md
View File

@ -15,11 +15,11 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `componentProps` | -- | The data to pass to the modal component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the modal. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | | `boolean` |

2
core/src/components/nav/nav-interface.ts
View File

@ -1,7 +1,5 @@
import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode, ViewController } from '../../interface';
export { Nav } from './nav';
export type NavDirection = 'back' | 'forward';
export type NavComponent = ComponentRef | ViewController;

4
core/src/components/nav/view-controller.ts
View File

@ -1,4 +1,4 @@
import { ComponentProps, FrameworkDelegate, Nav } from '../../interface';
import { ComponentProps, FrameworkDelegate } from '../../interface';
import { attachComponent } from '../../utils/framework-delegate';
import { assert } from '../../utils/helpers';
@ -11,7 +11,7 @@ export const enum ViewState {
export class ViewController {
state: ViewState = ViewState.New;
nav?: Nav;
nav?: any;
element?: HTMLElement;
delegate?: FrameworkDelegate;

4
core/src/components/picker/readme.md
View File

@ -10,11 +10,11 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If the keyboard should be able to close the picker. Defaults to true. | `boolean` |

4
core/src/components/popover/readme.md
View File

@ -17,12 +17,12 @@ To present a popover, call the `present` method on a popover instance. In order
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `color` | `color` | 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` |
| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the popover. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` |
| `event` | -- | The event to pass to the popover animation. | `any` |

4
core/src/components/ripple-effect/readme.md
View File

@ -9,8 +9,8 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
## Properties
| Property | Attribute | Description | Type |
| ---------- | ----------- | ---------------------------------------------------------------------- | ---------------------- |
| `parent` | `parent` | | `HTMLElement | string` |
| ---------- | ----------- | ---------------------------------------------------------------------- | ----------------------- |
| `parent` | `parent` | | `HTMLElement`, `string` |
| `tapClick` | `tap-click` | If true, the ripple effect will listen to any click events and animate | `boolean` |

4
core/src/components/split-pane/readme.md
View File

@ -43,9 +43,9 @@ SplitPane also provides some predefined media queries that can be used.
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `disabled` | `disabled` | If true, the split pane will be hidden. Defaults to `false`. | `boolean` |
| `when` | -- | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `string | boolean` |
| `when` | -- | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `string`, `boolean` |
## Events

4
core/src/components/toast/readme.md
View File

@ -21,9 +21,9 @@ The toast can be dismissed automatically after a specific amount of time by pass
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | | `boolean` |

2
core/src/components/toast/toast-interface.ts
View File

@ -1,7 +1,5 @@
import { AnimationBuilder } from '../../interface';
export { Toast } from './toast';
export interface ToastOptions {
message?: string;
cssClass?: string | string[];

8
core/src/components/virtual-scroll/readme.md
View File

@ -184,7 +184,7 @@ dataset, so please make sure they're performant.
## Properties
| Property | Attribute | Description | Type |
| -------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| -------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| `approxFooterHeight` | `approx-footer-height` | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. | `number` |
| `approxHeaderHeight` | `approx-header-height` | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. | `number` |
| `approxItemHeight` | `approx-item-height` | It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. | `number` |
@ -194,9 +194,9 @@ dataset, so please make sure they're performant.
| `itemHeight` | -- | | `ItemHeightFn` |
| `items` | -- | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. | `any[]` |
| `nodeRender` | -- | | `ItemRenderFn` |
| `renderFooter` | -- | | `(item: any, index: number) => JSX.Element` |
| `renderHeader` | -- | | `(item: any, index: number) => JSX.Element` |
| `renderItem` | -- | | `(item: any, index: number) => JSX.Element` |
| `renderFooter` | -- | | `(item: any, index: number) => any` |
| `renderHeader` | -- | | `(item: any, index: number) => any` |
| `renderItem` | -- | | `(item: any, index: number) => any` |
## Methods

8
core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -100,9 +100,9 @@ export class VirtualScroll {
@Prop() itemHeight?: ItemHeightFn;
// JSX API
@Prop() renderItem?: (item: any, index: number) => JSX.Element;
@Prop() renderHeader?: (item: any, index: number) => JSX.Element;
@Prop() renderFooter?: (item: any, index: number) => JSX.Element;
@Prop() renderItem?: (item: any, index: number) => any;
@Prop() renderHeader?: (item: any, index: number) => any;
@Prop() renderFooter?: (item: any, index: number) => any;
// Low level API
@Prop() nodeRender?: ItemRenderFn;
@ -271,7 +271,7 @@ export class VirtualScroll {
}
}
private updateCellHeight(cell: Cell, node: HTMLElement) {
private updateCellHeight(cell: Cell, node: HTMLStencilElement) {
const update = () => {
if ((node as any)['$ionCell'] === cell) {
const style = this.win.getComputedStyle(node);

30
core/src/generated.d.ts vendored
View File

@ -6,7 +6,7 @@
import { JSXElements } from '@stencil/core';
import 'ionicons'
import { LocalIntrinsicElements as DependentIntrinsicElements1 } from 'ionicons';
import {
ActionSheetButton,
ActionSheetOptions,
@ -26,8 +26,8 @@ import {
ItemHeightFn,
ItemRenderFn,
LoadingOptions,
Menu,
MenuChangeEventDetail,
MenuI,
ModalOptions,
Mode,
NavComponent,
@ -64,7 +64,7 @@ import {
} from '@stencil/core';
declare namespace StencilComponents {
export namespace StencilComponents {
interface IonActionSheetController {
/**
@ -2407,15 +2407,15 @@ declare namespace StencilComponents {
}
interface IonMenuController {
'_register': (menu: Menu) => void;
'_setActiveMenu': (menu: Menu) => void;
'_setOpen': (menu: Menu, shouldOpen: boolean, animated: boolean) => Promise<boolean>;
'_unregister': (menu: Menu) => void;
'_register': (menu: MenuI) => void;
'_setActiveMenu': (menu: MenuI) => void;
'_setOpen': (menu: MenuI, shouldOpen: boolean, animated: boolean) => Promise<boolean>;
'_unregister': (menu: MenuI) => void;
/**
* Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu.
*/
'close': (menuId?: string | undefined) => Promise<boolean>;
'createAnimation': (type: string, menuCmp: Menu) => Promise<Animation>;
'createAnimation': (type: string, menuCmp: MenuI) => Promise<Animation>;
/**
* Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side.
*/
@ -5111,9 +5111,9 @@ declare namespace StencilComponents {
'markDirtyTail': () => void;
'nodeRender': ItemRenderFn;
'positionForItem': (index: number) => number;
'renderFooter': (item: any, index: number) => JSX.Element;
'renderHeader': (item: any, index: number) => JSX.Element;
'renderItem': (item: any, index: number) => JSX.Element;
'renderFooter': (item: any, index: number) => any;
'renderHeader': (item: any, index: number) => any;
'renderItem': (item: any, index: number) => any;
}
interface IonVirtualScrollAttributes extends JSXElements.HTMLAttributes {
/**
@ -5143,9 +5143,9 @@ declare namespace StencilComponents {
*/
'items'?: any[];
'nodeRender'?: ItemRenderFn;
'renderFooter'?: (item: any, index: number) => JSX.Element;
'renderHeader'?: (item: any, index: number) => JSX.Element;
'renderItem'?: (item: any, index: number) => JSX.Element;
'renderFooter'?: (item: any, index: number) => any;
'renderHeader'?: (item: any, index: number) => any;
'renderItem'?: (item: any, index: number) => any;
}
}
@ -6067,7 +6067,7 @@ import { DefaultIntrinsicElements } from '@stencil/core';
declare global {
export namespace JSX {
export interface Element {}
export interface IntrinsicElements extends LocalIntrinsicElements, DefaultIntrinsicElements {
export interface IntrinsicElements extends LocalIntrinsicElements, DefaultIntrinsicElements, DependentIntrinsicElements1 {
[tagName: string]: any;
}
}