diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0a7057c47f..a3dc53d482 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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). */ diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index f642b69ea9..1c27a4aa94 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -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; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index cdf44312e8..38cfe14eae 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -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; diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 60a3a6a3d4..f1324048b8 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -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. diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 4efd310576..515af1ecad 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -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. diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index bdf925631f..429fe38844 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -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') { diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx index 67c6312399..c8d6b76ed2 100644 --- a/core/src/components/card-content/card-content.tsx +++ b/core/src/components/card-content/card-content.tsx @@ -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. diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index ab07e72a88..98dfb0733b 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -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. diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx index dff7ed095a..e65199a8a9 100644 --- a/core/src/components/card-subtitle/card-subtitle.tsx +++ b/core/src/components/card-subtitle/card-subtitle.tsx @@ -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. diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx index 4229b72b9e..0441e41132 100644 --- a/core/src/components/card-title/card-title.tsx +++ b/core/src/components/card-title/card-title.tsx @@ -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. diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index bc864b74f5..54f5e6ec22 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -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. diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 49987e5af9..9c2555a863 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -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. diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index 0e3ae61d07..e88815b004 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -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 = { diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 30b567e041..d664274ca9 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -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. diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 3d8fe2f72a..b5acd04f0b 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -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; diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index eb709b8c43..9e093c9814 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -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. diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index 92eaed39da..77555f666b 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -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. diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 0c5332a2a4..b9576f5563 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -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. diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 9676459dd6..172e4e5748 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -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; diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index b5d659f827..6a1416952a 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -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. diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index 104c625ec6..777b2ddcdd 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -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. diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 7404836cbd..874cd2ca78 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -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. diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 40db3f0c97..40a488691d 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -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. diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx index 0597483535..8296099270 100644 --- a/core/src/components/list-header/list-header.tsx +++ b/core/src/components/list-header/list-header.tsx @@ -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. diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index bc8fd45d76..cdbc922446 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -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; diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index e567fbab5a..36d795bd43 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -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 diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 9da62d69bb..1a5eeb25a0 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -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. diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index dede02ddba..d465ab973e 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -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. diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 221e8d8774..faf645bf4f 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -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. diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 68e758c547..314cb7b5ae 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -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. diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 7e76bb29d1..5f7c4fac77 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -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. diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index aae0667069..27adfdb47f 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -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. diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 51be72106c..953ce4f8e0 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -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. diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index f8c9fca774..23c0d25a99 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -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. diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index f48a1e9841..ef826cf98c 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -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. diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index da8a68dfa1..aaa40b51a8 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -87,7 +87,7 @@ export class TabButton { onBlur={this.onBlur.bind(this)}> { tab.icon && } { tab.label && {tab.label} } - { tab.badge && {tab.badge} } + { tab.badge && {tab.badge} } { this.mode === 'md' && } ]; diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index f7ff9016c5..4585ca2a8a 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -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 diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index a09f6e8e1e..e1c18644ef 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -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. diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx index f54bcfbc99..7742ce2cfe 100644 --- a/core/src/components/tabbar/tabbar.tsx +++ b/core/src/components/tabbar/tabbar.tsx @@ -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; diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 3f041f2f1b..8f864b5e0b 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -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 diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx index a2984c3cc7..602c5f12c9 100644 --- a/core/src/components/text/text.tsx +++ b/core/src/components/text/text.tsx @@ -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. diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 31cc91d19a..b9a9614544 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -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; diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md index e2142036df..ea1be60fe1 100644 --- a/core/src/components/title/readme.md +++ b/core/src/components/title/readme.md @@ -16,6 +16,30 @@ +## Properties + +#### color + +string + + +#### mode + +string + + +## Attributes + +#### color + +string + + +#### mode + +string + + ---------------------------------------------- diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx index 40289b4fd3..0be27573d3 100644 --- a/core/src/components/title/title.tsx +++ b/core/src/components/title/title.tsx @@ -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'); diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index d81e53799d..59e1e884a4 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -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; diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 2b080cc963..0b9e7ca53b 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -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. diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx index 26ab9a1f65..ba68b489e4 100644 --- a/core/src/components/toolbar/toolbar.tsx +++ b/core/src/components/toolbar/toolbar.tsx @@ -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. diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index de1d932787..1a7ed2dfc0 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -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};