diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1938e4cc9e..886f7b069c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -79,6 +79,7 @@ import { StyleEvent, TabbarLayout, TabbarPlacement, + TextFieldTypes, ToastOptions, TransitionDoneFn, TransitionInstruction, @@ -2862,7 +2863,7 @@ declare global { /** * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. */ - 'type': string; + 'type': TextFieldTypes; /** * The value of the input. */ @@ -3024,7 +3025,7 @@ declare global { /** * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. */ - 'type'?: string; + 'type'?: TextFieldTypes; /** * The value of the input. */ diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index 46b65f1c5e..7408b9c50e 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -1,3 +1,4 @@ +import { TextFieldTypes } from '../../interface'; export interface AlertOptions { header?: string; @@ -12,7 +13,7 @@ export interface AlertOptions { } export interface AlertInput { - type: string; + type: TextFieldTypes | 'checkbox' | 'radio'; name: string; placeholder?: string; value?: string; @@ -21,8 +22,8 @@ export interface AlertInput { disabled?: boolean; id?: string; handler?: (input: AlertInput) => void; - min?: string | number; - max?: string | number; + min?: number; + max?: number; } export interface AlertButton { diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 992f41263c..d27869b3d4 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -144,17 +144,17 @@ export class Alert implements OverlayInterface { } this.inputType = inputTypes.values().next().value; this.processedInputs = inputs.map((i, index) => ({ - type: i.type || 'text', - name: i.name ? i.name : index + '', - placeholder: i.placeholder ? i.placeholder : '', - value: i.value ? i.value : '', - label: i.label, - checked: !!i.checked, - disabled: !!i.disabled, - id: i.id ? i.id : `alert-input-${this.overlayId}-${index}`, - handler: i.handler ? i.handler : null, - min: i.min ? i.min : null, - max: i.max ? i.max : null + type: i.type || 'text', + name: i.name ? i.name : index + '', + placeholder: i.placeholder ? i.placeholder : '', + value: i.value ? i.value : '', + label: i.label, + checked: !!i.checked, + disabled: !!i.disabled, + id: i.id ? i.id : `alert-input-${this.overlayId}-${index}`, + handler: i.handler, + min: i.min, + max: i.max }) as AlertInput); } diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html index 1c40df15d9..a49b3a90eb 100644 --- a/core/src/components/alert/test/basic/index.html +++ b/core/src/components/alert/test/basic/index.html @@ -124,16 +124,19 @@ header: 'Prompt!', inputs: [ { + type: 'text', placeholder: 'Placeholder 1' }, { name: 'name2', + type: 'text', id: 'name2-id', value: 'hello', placeholder: 'Placeholder 2' }, { name: 'name3', + type: 'text', value: 'http://ionicframework.com', type: 'url', placeholder: 'Favorite site ever' diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 5c9f362eed..3d568ca093 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, State, Watch } from '@stencil/core'; -import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface'; +import { Color, InputChangeEvent, Mode, StyleEvent, TextFieldTypes } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; import { InputComponent } from './input-base'; @@ -205,7 +205,7 @@ export class Input implements InputComponent { /** * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. */ - @Prop() type = 'text'; + @Prop() type: TextFieldTypes = 'text'; /** * The value of the input. diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 25422fb3e4..1cfaafde8d 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -30,6 +30,7 @@ export { OverlayEventDetail, OverlayInterface } from './utils/overlays'; // Global types +export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; export type Side = 'start' | 'end'; export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'; export type Color = PredefinedColors | string;