123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import { ElementRef, EventEmitter, Renderer } from '@angular/core';
  2. import { NgControl } from '@angular/forms';
  3. import { Subject } from 'rxjs/Subject';
  4. import 'rxjs/add/operator/takeUntil';
  5. import { App } from '../app/app';
  6. import { Config } from '../../config/config';
  7. import { Content, ContentDimensions } from '../content/content';
  8. import { DomController } from '../../platform/dom-controller';
  9. import { Form, IonicFormInput } from '../../util/form';
  10. import { BaseInput } from '../../util/base-input';
  11. import { Item } from '../item/item';
  12. import { Platform } from '../../platform/platform';
  13. /**
  14. * @name Input
  15. * @description
  16. *
  17. * `ion-input` is meant for text type inputs only, such as `text`,
  18. * `password`, `email`, `number`, `search`, `tel`, and `url`. Ionic
  19. * still uses an actual `<input type="text">` HTML element within the
  20. * component, however, with Ionic wrapping the native HTML input
  21. * element it's better able to handle the user experience and
  22. * interactivity.
  23. *
  24. * Similarly, `<ion-textarea>` should be used in place of `<textarea>`.
  25. *
  26. * An `ion-input` is **not** used for non-text type inputs, such as a
  27. * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
  28. *
  29. * Along with the blur/focus events, `input` support all standard text input
  30. * events like `keyup`, `keydown`, `keypress`, `input`,etc. Any standard event
  31. * can be attached and will function as expected.
  32. *
  33. * @usage
  34. * ```html
  35. * <ion-list>
  36. * <ion-item>
  37. * <ion-label color="primary">Inline Label</ion-label>
  38. * <ion-input placeholder="Text Input"></ion-input>
  39. * </ion-item>
  40. *
  41. * <ion-item>
  42. * <ion-label color="primary" fixed>Fixed Label</ion-label>
  43. * <ion-input type="tel" placeholder="Tel Input"></ion-input>
  44. * </ion-item>
  45. *
  46. * <ion-item>
  47. * <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  48. * </ion-item>
  49. *
  50. * <ion-item>
  51. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  52. * <ion-input type="email" placeholder="Email Input"></ion-input>
  53. * </ion-item>
  54. *
  55. * <ion-item>
  56. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  57. * <ion-input type="password" placeholder="Password Input"></ion-input>
  58. * </ion-item>
  59. *
  60. * <ion-item>
  61. * <ion-label color="primary" floating>Floating Label</ion-label>
  62. * <ion-input></ion-input>
  63. * </ion-item>
  64. *
  65. * <ion-item>
  66. * <ion-input placeholder="Clear Input" clearInput></ion-input>
  67. * </ion-item>
  68. *
  69. * <ion-item>
  70. * <ion-textarea placeholder="Enter a description"></ion-textarea>
  71. * </ion-item>
  72. * </ion-list>
  73. * ```
  74. *
  75. * @demo /docs/demos/src/input/
  76. */
  77. export declare class TextInput extends BaseInput<string> implements IonicFormInput {
  78. private _plt;
  79. private _app;
  80. private _content;
  81. ngControl: NgControl;
  82. private _dom;
  83. _autoFocusAssist: string;
  84. _clearInput: boolean;
  85. _clearOnEdit: boolean;
  86. _didBlurAfterEdit: boolean;
  87. _readonly: boolean;
  88. _keyboardHeight: number;
  89. _type: string;
  90. _scrollData: ScrollData;
  91. _isTextarea: boolean;
  92. _onDestroy: Subject<void>;
  93. _coord: any;
  94. _isTouch: boolean;
  95. _useAssist: boolean;
  96. _relocated: boolean;
  97. /**
  98. * @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
  99. */
  100. clearInput: any;
  101. /**
  102. * @input {string} The type of control to display. The default type is text.
  103. * Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
  104. */
  105. type: any;
  106. /**
  107. * @input {boolean} If true, the user cannot modify the value.
  108. */
  109. readonly: boolean;
  110. /**
  111. * @input {boolean} If true, the value will be cleared after focus upon edit.
  112. * Defaults to `true` when `type` is `"password"`, `false` for all other types.
  113. */
  114. clearOnEdit: any;
  115. /**
  116. * @hidden
  117. */
  118. _native: ElementRef;
  119. /**
  120. * @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
  121. */
  122. autocomplete: string;
  123. /**
  124. * @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
  125. */
  126. autocorrect: string;
  127. /**
  128. * @input {string} Instructional text that shows before the input has a value.
  129. */
  130. placeholder: string;
  131. /**
  132. * @input {any} The minimum value, which must not be greater than its maximum (max attribute) value.
  133. */
  134. min: number | string;
  135. /**
  136. * @input {any} The maximum value, which must not be less than its minimum (min attribute) value.
  137. */
  138. max: number | string;
  139. /**
  140. * @input {any} Works with the min and max attributes to limit the increments at which a value can be set.
  141. */
  142. step: number | string;
  143. /**
  144. * @hidden
  145. */
  146. input: EventEmitter<UIEvent>;
  147. /**
  148. * @hidden
  149. */
  150. blur: EventEmitter<UIEvent>;
  151. /**
  152. * @hidden
  153. */
  154. focus: EventEmitter<UIEvent>;
  155. constructor(config: Config, _plt: Platform, _form: Form, _app: App, elementRef: ElementRef, renderer: Renderer, _content: Content, _item: Item, ngControl: NgControl, _dom: DomController);
  156. ngAfterContentInit(): void;
  157. /**
  158. * @hidden
  159. */
  160. ngAfterViewInit(): void;
  161. /**
  162. * @hidden
  163. */
  164. ngOnDestroy(): void;
  165. /**
  166. * @hidden
  167. */
  168. initFocus(): void;
  169. /**
  170. * @hidden
  171. */
  172. setFocus(): void;
  173. /**
  174. * @hidden
  175. */
  176. setBlur(): void;
  177. /**
  178. * @hidden
  179. */
  180. onInput(ev: any): void;
  181. /**
  182. * @hidden
  183. */
  184. onBlur(ev: UIEvent): void;
  185. /**
  186. * @hidden
  187. */
  188. onFocus(ev: UIEvent): void;
  189. /**
  190. * @hidden
  191. */
  192. onKeydown(ev: any): void;
  193. /**
  194. * @hidden
  195. */
  196. _inputUpdated(): void;
  197. /**
  198. * @hidden
  199. */
  200. clearTextInput(): void;
  201. /**
  202. * Check if we need to clear the text input if clearOnEdit is enabled
  203. * @hidden
  204. */
  205. checkClearOnEdit(_: string): void;
  206. _getScrollData(): ScrollData;
  207. _relocateInput(shouldRelocate: boolean): void;
  208. _enableScrollPadding(): void;
  209. _enableHideCaretOnScroll(): void;
  210. _enableScrollMove(): void;
  211. _pointerStart(ev: UIEvent): void;
  212. _pointerEnd(ev: UIEvent): void;
  213. _jsSetFocus(): void;
  214. }
  215. /**
  216. * @hidden
  217. */
  218. export declare function getScrollData(inputOffsetTop: number, inputOffsetHeight: number, scrollViewDimensions: ContentDimensions, keyboardHeight: number, plaformHeight: number): ScrollData;
  219. export interface ScrollData {
  220. scrollAmount: number;
  221. scrollTo: number;
  222. scrollPadding: number;
  223. scrollDuration: number;
  224. inputSafeY: number;
  225. }