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

fix(all): strong typing for color

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-05-14 13:51:30 +02:00
parent 87fe5ce3a8
commit 618f708bc4
48 changed files with 186 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
core/src/components.d.ts vendored
View File

@ -35,6 +35,7 @@ import {
AnimationBuilder,
BlockerConfig,
CheckedInputChangeEvent,
Color,
ComponentProps,
ComponentRef,
FrameworkDelegate,
@ -635,7 +636,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The url to navigate back to by default when there is no history.
*/
@ -677,7 +678,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The url to navigate back to by default when there is no history.
*/
@ -765,7 +766,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -795,7 +796,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -816,7 +817,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@ -886,7 +887,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@ -980,7 +981,7 @@ declare global {
/**
* The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1010,7 +1011,7 @@ declare global {
/**
* The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1027,7 +1028,7 @@ declare global {
/**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1061,7 +1062,7 @@ declare global {
/**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1082,7 +1083,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1112,7 +1113,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1129,7 +1130,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1159,7 +1160,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1176,7 +1177,7 @@ declare global {
/**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1206,7 +1207,7 @@ declare global {
/**
* The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1227,7 +1228,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* If true, the user cannot interact with the checkbox. Defaults to `false`.
*/
@ -1273,7 +1274,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* If true, the user cannot interact with the checkbox. Defaults to `false`.
*/
@ -1318,7 +1319,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* If true, the user cannot interact with the chip button. Defaults to `false`.
*/
@ -1360,7 +1361,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* If true, the user cannot interact with the chip button. Defaults to `false`.
*/
@ -1389,7 +1390,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1419,7 +1420,7 @@ declare global {
/**
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
@ -1725,7 +1726,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* If true, the user cannot interact with the fab button. Defaults to `false`.
*/
@ -1772,7 +1773,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* If true, the user cannot interact with the fab button. Defaults to `false`.
*/
@ -2588,7 +2589,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -2618,7 +2619,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -2668,7 +2669,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* If true, the user cannot interact with the item option. Defaults to `false`.
*/
@ -2710,7 +2711,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* If true, the user cannot interact with the item option. Defaults to `false`.
*/
@ -2840,7 +2841,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
@ -2894,7 +2895,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
@ -2931,7 +2932,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
'getText': () => string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
@ -2966,7 +2967,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -2991,7 +2992,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -3021,7 +3022,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -3587,7 +3588,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The component to display inside of the modal.
*/
@ -3668,7 +3669,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The component to display inside of the modal.
*/
@ -3907,7 +3908,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -3937,7 +3938,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -4208,7 +4209,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The component to display inside of the popover.
*/
@ -4297,7 +4298,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The component to display inside of the popover.
*/
@ -4446,7 +4447,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* Indicates that the user cannot interact with the control.
*/
@ -4492,7 +4493,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* Indicates that the user cannot interact with the control.
*/
@ -4596,7 +4597,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`.
*/
@ -4666,7 +4667,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`.
*/
@ -5317,7 +5318,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
*/
@ -5387,7 +5388,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
*/
@ -5456,7 +5457,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
'disabled': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
@ -5499,7 +5500,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
'disabled'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
@ -5529,7 +5530,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color': string;
'color': Color;
'disabled': boolean;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
@ -5564,7 +5565,7 @@ declare global {
/**
* The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
'color'?: string;
'color'?: Color;
'disabled'?: boolean;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
@ -6085,7 +6086,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* Duration of the spinner animation in milliseconds. The default varies based on the spinner.
*/
@ -6127,7 +6128,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* Duration of the spinner animation in milliseconds. The default varies based on the spinner.
*/
@ -6289,7 +6290,7 @@ declare global {
/**
* The badge color for the tab button.
*/
'badgeStyle': string;
'badgeColor': Color;
'btnId': string;
/**
* The component to display inside of the tab.
@ -6360,7 +6361,7 @@ declare global {
/**
* The badge color for the tab button.
*/
'badgeStyle'?: string;
'badgeColor'?: Color;
'btnId'?: string;
/**
* The component to display inside of the tab.
@ -6466,7 +6467,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
'getRouteId': () => RouteID | undefined;
'getSelected': () => HTMLIonTabElement | undefined;
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined;
@ -6523,7 +6524,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* A unique name for the tabs
*/
@ -6602,7 +6603,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -6632,7 +6633,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -6866,7 +6867,8 @@ declare global {
namespace StencilComponents {
interface IonTitle {
'color': Color;
'mode': Mode;
}
}
@ -6889,7 +6891,8 @@ declare global {
}
namespace JSXElements {
export interface IonTitleAttributes extends HTMLAttributes {
'color'?: Color;
'mode'?: Mode;
}
}
}
@ -7096,7 +7099,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* Indicates that the user cannot interact with the control.
*/
@ -7142,7 +7145,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* Indicates that the user cannot interact with the control.
*/
@ -7187,7 +7190,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
'color': Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@ -7221,7 +7224,7 @@ declare global {
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
'color'?: Color;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

4
core/src/components/action-sheet/action-sheet.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
import { ActionSheetButton, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
@ -21,7 +21,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
export class ActionSheet implements OverlayInterface {
mode!: Mode;
color!: string;
color?: Color;
presented = false;
animation?: Animation;

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
import { AlertButton, AlertInput, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
@ -27,7 +27,7 @@ export class Alert implements OverlayInterface {
presented = false;
animation?: Animation;
color!: string;
color!: Color;
@Prop() mode!: Mode;
@Element() el!: HTMLStencilElement;

4
core/src/components/back-button/back-button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Prop } from '@stencil/core';
import { Config, Mode } from '../../interface';
import { Color, Config, Mode } from '../../interface';
import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
@Component({
@ -24,7 +24,7 @@ export class BackButton {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -19,7 +19,7 @@ export class Badge {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

6
core/src/components/button/button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { CssClassMap, Mode, RouterDirection } from '../../interface';
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme';
@ -22,7 +22,7 @@ export class Button {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
@ -176,7 +176,7 @@ function getButtonTypeClassMap(buttonType: string, type: string|undefined, mode:
};
}
function getColorClassMap(buttonType: string, color: string, fill: string, mode: Mode): CssClassMap {
function getColorClassMap(buttonType: string, color: string | undefined, fill: string, mode: Mode): CssClassMap {
let className = buttonType;
if (buttonType !== 'bar-button' && fill === 'solid') {

4
core/src/components/card-content/card-content.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
tag: 'ion-card-content',
@ -16,7 +16,7 @@ export class CardContent {
* The color to use for the text.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/card-header/card-header.tsx
View File

@ -1,6 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@Component({
@ -18,7 +18,7 @@ export class CardHeader {
* The color to use for the background.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/card-subtitle/card-subtitle.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop} from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -17,7 +17,7 @@ export class CardSubtitle {
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/card-title/card-title.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop} from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -18,7 +18,7 @@ export class CardTitle {
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
tag: 'ion-card',
@ -17,7 +17,7 @@ export class Card {
* The color to use for the background.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { CheckboxInput, CheckedInputChangeEvent, CssClassMap, Mode, StyleEvent } from '../../interface';
import { CheckboxInput, CheckedInputChangeEvent, Color, CssClassMap, Mode, StyleEvent } from '../../interface';
import { deferEvent } from '../../utils/helpers';
@ -26,7 +26,7 @@ export class Checkbox implements CheckboxInput {
* The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

6
core/src/components/chip-button/chip-button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Prop } from '@stencil/core';
import { CssClassMap, Mode } from '../../interface';
import { Color, CssClassMap, Mode } from '../../interface';
import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
@Component({
@ -16,7 +16,7 @@ export class ChipButton {
* The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
@ -77,7 +77,7 @@ export class ChipButton {
/**
* Get the classes for the color
*/
function getColorClassMap(color: string, buttonType: string, style: string, mode: Mode): CssClassMap {
function getColorClassMap(color: string | undefined, buttonType: string, style: string, mode: Mode): CssClassMap {
const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
const map: CssClassMap = {

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -17,7 +17,7 @@ export class Chip {
* The color to use.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Listen, Method, Prop } from '@stencil/core';
import { Config, Mode, QueueController } from '../../interface';
import { Color, Config, Mode, QueueController } from '../../interface';
@Component({
@ -14,7 +14,7 @@ export class Content {
private scrollEl?: HTMLIonScrollElement;
mode!: Mode;
color!: string;
color?: Color;
@Element() el!: HTMLElement;

4
core/src/components/fab-button/fab-button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Prop } from '@stencil/core';
import { CssClassMap, Mode } from '../../interface';
import { Color, CssClassMap, Mode } from '../../interface';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
@ -21,7 +21,7 @@ export class FabButton {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,6 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@Component({
@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
})
export class Footer {
mode!: Mode;
color!: string;
color?: Color;
/**
* If true, the footer will be translucent.

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

@ -1,6 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@Component({
@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
})
export class Header {
mode!: Mode;
color!: string;
color?: Color;
/**
* If true, the header will be translucent.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { InputChangeEvent, Mode, StyleEvent } from '../../interface';
import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
import { debounceEvent, deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
import { InputComponent } from './input-base';
@ -21,7 +21,7 @@ export class Input implements InputComponent {
didBlurAfterEdit = false;
mode!: Mode;
color!: string;
color?: Color;
@Element() el!: HTMLElement;

4
core/src/components/item-divider/item-divider.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -20,7 +20,7 @@ export class ItemDivider {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/item-option/item-option.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -18,7 +18,7 @@ export class ItemOption {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Listen, Prop } from '@stencil/core';
import { CssClassMap, Mode, RouterDirection } from '../../interface';
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
@ -23,7 +23,7 @@ export class Item {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { Mode, StyleEvent } from '../../interface';
import { Color, Mode, StyleEvent } from '../../interface';
@Component({
@ -21,7 +21,7 @@ export class Label {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/list-header/list-header.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -19,7 +19,7 @@ export class ListHeader {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
@ -25,7 +25,7 @@ export class Loading implements OverlayInterface {
presented = false;
animation?: Animation;
color!: string;
color?: Color;
mode!: Mode;
@Element() el!: HTMLElement;

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { Animation, Config, GestureDetail, MenuChangeEventDetail, Mode } from '../../interface';
import { Animation, Color, Config, GestureDetail, MenuChangeEventDetail, Mode } from '../../interface';
import { Side, assert, isEndSide } from '../../utils/helpers';
@Component({
@ -20,7 +20,7 @@ export class Menu {
private lastOnEnd = 0;
mode!: Mode;
color!: string;
color?: Color;
isAnimating = false;
width!: number; // TOOD

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
@ -42,7 +42,7 @@ export class Modal implements OverlayInterface {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -19,7 +19,7 @@ export class Note {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
@ -41,7 +41,7 @@ export class Popover implements OverlayInterface {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { CheckedInputChangeEvent, Mode, RadioButtonInput, StyleEvent } from '../../interface';
import { CheckedInputChangeEvent, Color, Mode, RadioButtonInput, StyleEvent } from '../../interface';
import { deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
@ -26,7 +26,7 @@ export class Radio implements RadioButtonInput {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';
import { BaseInput, GestureDetail, Mode, RangeInputChangeEvent, StyleEvent } from '../../interface';
import { BaseInput, Color, GestureDetail, Mode, RangeInputChangeEvent, StyleEvent } from '../../interface';
import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
import { Knob, RangeEventDetail, RangeValue } from './range-interface';
@ -30,7 +30,7 @@ export class Range implements BaseInput {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { InputChangeEvent, Mode } from '../../interface';
import { Color, InputChangeEvent, Mode } from '../../interface';
import { debounceEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
@ -35,7 +35,7 @@ export class Searchbar {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

4
core/src/components/segment-button/segment-button.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
let ids = 0;
@ -19,7 +19,7 @@ export class SegmentButton {
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { InputChangeEvent, Mode } from '../../interface';
import { Color, InputChangeEvent, Mode } from '../../interface';
@Component({
@ -20,7 +20,7 @@ export class Segment {
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Config, Mode } from '../../interface';
import { Color, Config, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
import { SPINNERS, SpinnerConfig } from './spinner-configs';
@ -22,7 +22,7 @@ export class Spinner {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

2
core/src/components/tab-button/tab-button.tsx
View File

@ -87,7 +87,7 @@ export class TabButton {
onBlur={this.onBlur.bind(this)}>
{ tab.icon && <ion-icon class="tab-button-icon" name={tab.icon}></ion-icon> }
{ tab.label && <span class="tab-button-text">{tab.label}</span> }
{ tab.badge && <ion-badge class="tab-badge" color={tab.badgeStyle}>{tab.badge}</ion-badge> }
{ tab.badge && <ion-badge class="tab-badge" color={tab.badgeColor}>{tab.badge}</ion-badge> }
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</a>
];

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

@ -62,7 +62,7 @@ string
The badge for the tab.
#### badgeStyle
#### badgeColor
string
@ -156,7 +156,7 @@ string
The badge for the tab.
#### badge-style
#### badge-color
string

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

@ -1,5 +1,5 @@
import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { ComponentRef, FrameworkDelegate } from '../../interface';
import { Color, ComponentRef, FrameworkDelegate } from '../../interface';
import { attachComponent } from '../../utils/framework-delegate';
@Component({
@ -38,7 +38,7 @@ export class Tab {
/**
* The badge color for the tab button.
*/
@Prop() badgeStyle = 'default';
@Prop() badgeColor: Color = 'default';
/**
* The component to display inside of the tab.

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

@ -1,5 +1,5 @@
import { Component, Element, Listen, Prop, State, Watch } from '@stencil/core';
import { Mode, QueueController } from '../../interface';
import { Color, Mode, QueueController } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
@ -20,7 +20,7 @@ export class Tabbar {
private scrollEl?: HTMLIonScrollElement;
mode!: Mode;
color!: string;
color?: Color;
@Element() el!: HTMLElement;

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

@ -1,5 +1,5 @@
import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Config, NavOutlet, RouteID, RouteWrite } from '../../interface';
import { Color, Config, NavOutlet, RouteID, RouteWrite } from '../../interface';
import { TabbarLayout, TabbarPlacement } from '../tabbar/tabbar';
@ -27,7 +27,7 @@ export class Tabs implements NavOutlet {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* A unique name for the tabs

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { Color, Mode } from '../../interface';
@Component({
@ -19,7 +19,7 @@ export class Text {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { InputChangeEvent, Mode, StyleEvent } from '../../interface';
import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
import { debounceEvent, deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
import { TextareaComponent } from '../input/input-base';
@ -19,7 +19,7 @@ import { TextareaComponent } from '../input/input-base';
export class Textarea implements TextareaComponent {
mode!: Mode;
color!: string;
color?: Color;
didBlurAfterEdit = false;

24
core/src/components/title/readme.md
View File

@ -16,6 +16,30 @@
<!-- Auto Generated Below -->
## Properties
#### color
string
#### mode
string
## Attributes
#### color
string
#### mode
string
----------------------------------------------

9
core/src/components/title/title.tsx
View File

@ -1,5 +1,5 @@
import { Component } from '@stencil/core';
import { Mode } from '../../interface';
import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@ -14,8 +14,9 @@ import { createThemedClasses } from '../../utils/theme';
}
})
export class ToolbarTitle {
mode!: Mode;
color!: string;
@Prop() mode!: Mode;
@Prop() color?: Color;
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'toolbar-title');

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
@ -29,7 +29,7 @@ export class Toast implements OverlayInterface {
@Element() el!: HTMLElement;
mode!: Mode;
color!: string;
color?: Color;
animation: Animation | undefined;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;

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

@ -1,5 +1,5 @@
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { CheckboxInput, CheckedInputChangeEvent, GestureDetail, Mode, StyleEvent } from '../../interface';
import { CheckboxInput, CheckedInputChangeEvent, Color, GestureDetail, Mode, StyleEvent } from '../../interface';
import { hapticSelection } from '../../utils/haptic';
import { deferEvent } from '../../utils/helpers';
@ -29,7 +29,7 @@ export class Toggle implements CheckboxInput {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

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

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core';
import { Config, Mode } from '../../interface';
import { Color, Config, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@ -22,7 +22,7 @@ export class Toolbar {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color!: string;
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.

1
core/src/interface.d.ts vendored
View File

@ -24,6 +24,7 @@ export * from './global/config';
// export index
export * from './index';
export type Color = 'default'| 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
export type Mode = 'ios' | 'md';
export type ComponentRef = Function | HTMLElement | string;
export type ComponentProps = {[key: string]: any};