UI for Zipcoin Blue

input.js 31KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
  12. import { NgControl } from '@angular/forms';
  13. import { Subject } from 'rxjs/Subject';
  14. import 'rxjs/add/operator/takeUntil';
  15. import { App } from '../app/app';
  16. import { Config } from '../../config/config';
  17. import { Content } from '../content/content';
  18. import { copyInputAttributes, hasPointerMoved, pointerCoord } from '../../util/dom';
  19. import { DomController } from '../../platform/dom-controller';
  20. import { Form } from '../../util/form';
  21. import { BaseInput } from '../../util/base-input';
  22. import { isTrueProperty } from '../../util/util';
  23. import { Item } from '../item/item';
  24. import { Platform } from '../../platform/platform';
  25. /**
  26. * @name Input
  27. * @description
  28. *
  29. * `ion-input` is meant for text type inputs only, such as `text`,
  30. * `password`, `email`, `number`, `search`, `tel`, and `url`. Ionic
  31. * still uses an actual `<input type="text">` HTML element within the
  32. * component, however, with Ionic wrapping the native HTML input
  33. * element it's better able to handle the user experience and
  34. * interactivity.
  35. *
  36. * Similarly, `<ion-textarea>` should be used in place of `<textarea>`.
  37. *
  38. * An `ion-input` is **not** used for non-text type inputs, such as a
  39. * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
  40. *
  41. * Along with the blur/focus events, `input` support all standard text input
  42. * events like `keyup`, `keydown`, `keypress`, `input`,etc. Any standard event
  43. * can be attached and will function as expected.
  44. *
  45. * @usage
  46. * ```html
  47. * <ion-list>
  48. * <ion-item>
  49. * <ion-label color="primary">Inline Label</ion-label>
  50. * <ion-input placeholder="Text Input"></ion-input>
  51. * </ion-item>
  52. *
  53. * <ion-item>
  54. * <ion-label color="primary" fixed>Fixed Label</ion-label>
  55. * <ion-input type="tel" placeholder="Tel Input"></ion-input>
  56. * </ion-item>
  57. *
  58. * <ion-item>
  59. * <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  60. * </ion-item>
  61. *
  62. * <ion-item>
  63. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  64. * <ion-input type="email" placeholder="Email Input"></ion-input>
  65. * </ion-item>
  66. *
  67. * <ion-item>
  68. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  69. * <ion-input type="password" placeholder="Password Input"></ion-input>
  70. * </ion-item>
  71. *
  72. * <ion-item>
  73. * <ion-label color="primary" floating>Floating Label</ion-label>
  74. * <ion-input></ion-input>
  75. * </ion-item>
  76. *
  77. * <ion-item>
  78. * <ion-input placeholder="Clear Input" clearInput></ion-input>
  79. * </ion-item>
  80. *
  81. * <ion-item>
  82. * <ion-textarea placeholder="Enter a description"></ion-textarea>
  83. * </ion-item>
  84. * </ion-list>
  85. * ```
  86. *
  87. * @demo /docs/demos/src/input/
  88. */
  89. var TextInput = (function (_super) {
  90. __extends(TextInput, _super);
  91. function TextInput(config, _plt, _form, _app, elementRef, renderer, _content, _item, ngControl, _dom) {
  92. var _this = _super.call(this, config, elementRef, renderer, 'input', '', _form, _item, ngControl) || this;
  93. _this._plt = _plt;
  94. _this._app = _app;
  95. _this._content = _content;
  96. _this.ngControl = ngControl;
  97. _this._dom = _dom;
  98. _this._clearInput = false;
  99. _this._readonly = false;
  100. _this._type = 'text';
  101. _this._isTextarea = false;
  102. _this._onDestroy = new Subject();
  103. _this._useAssist = false;
  104. _this._relocated = false;
  105. /**
  106. * @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
  107. */
  108. _this.autocomplete = '';
  109. /**
  110. * @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
  111. */
  112. _this.autocorrect = '';
  113. /**
  114. * @input {string} Instructional text that shows before the input has a value.
  115. */
  116. _this.placeholder = '';
  117. /**
  118. * @input {any} The minimum value, which must not be greater than its maximum (max attribute) value.
  119. */
  120. _this.min = null;
  121. /**
  122. * @input {any} The maximum value, which must not be less than its minimum (min attribute) value.
  123. */
  124. _this.max = null;
  125. /**
  126. * @input {any} Works with the min and max attributes to limit the increments at which a value can be set.
  127. */
  128. _this.step = null;
  129. /**
  130. * @hidden
  131. */
  132. _this.input = new EventEmitter();
  133. /**
  134. * @hidden
  135. */
  136. _this.blur = new EventEmitter();
  137. /**
  138. * @hidden
  139. */
  140. _this.focus = new EventEmitter();
  141. _this.autocomplete = config.get('autocomplete', 'off');
  142. _this.autocorrect = config.get('autocorrect', 'off');
  143. _this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
  144. _this._keyboardHeight = config.getNumber('keyboardHeight');
  145. _this._isTextarea = !!(elementRef.nativeElement.tagName === 'ION-TEXTAREA');
  146. if (_this._isTextarea && _item) {
  147. _item.setElementClass('item-textarea', true);
  148. }
  149. // If not inside content, let's disable all the hacks
  150. if (!_content) {
  151. return _this;
  152. }
  153. var hideCaretOnScroll = config.getBoolean('hideCaretOnScroll', false);
  154. if (hideCaretOnScroll) {
  155. _this._enableHideCaretOnScroll();
  156. }
  157. var win = _plt.win();
  158. var keyboardPlugin = win.Ionic && win.Ionic.keyboardPlugin;
  159. if (keyboardPlugin) {
  160. var keyboardResizes = config.getBoolean('keyboardResizes', false);
  161. if (keyboardResizes) {
  162. _this._keyboardHeight = config.getNumber('keyboardSafeArea', 60);
  163. _this._enableScrollMove();
  164. }
  165. else {
  166. _this._enableScrollPadding();
  167. _this._enableScrollMove();
  168. }
  169. }
  170. else {
  171. _this._useAssist = config.getBoolean('scrollAssist', false);
  172. var usePadding = config.getBoolean('scrollPadding', _this._useAssist);
  173. if (usePadding) {
  174. _this._enableScrollPadding();
  175. }
  176. }
  177. return _this;
  178. }
  179. Object.defineProperty(TextInput.prototype, "clearInput", {
  180. /**
  181. * @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
  182. */
  183. get: function () {
  184. return this._clearInput;
  185. },
  186. set: function (val) {
  187. this._clearInput = (!this._isTextarea && isTrueProperty(val));
  188. },
  189. enumerable: true,
  190. configurable: true
  191. });
  192. Object.defineProperty(TextInput.prototype, "type", {
  193. /**
  194. * @input {string} The type of control to display. The default type is text.
  195. * Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
  196. */
  197. get: function () {
  198. return (this._isTextarea)
  199. ? 'text'
  200. : this._type;
  201. },
  202. set: function (val) {
  203. this._type = val;
  204. },
  205. enumerable: true,
  206. configurable: true
  207. });
  208. Object.defineProperty(TextInput.prototype, "readonly", {
  209. /**
  210. * @input {boolean} If true, the user cannot modify the value.
  211. */
  212. get: function () {
  213. return this._readonly;
  214. },
  215. set: function (val) {
  216. this._readonly = isTrueProperty(val);
  217. },
  218. enumerable: true,
  219. configurable: true
  220. });
  221. Object.defineProperty(TextInput.prototype, "clearOnEdit", {
  222. /**
  223. * @input {boolean} If true, the value will be cleared after focus upon edit.
  224. * Defaults to `true` when `type` is `"password"`, `false` for all other types.
  225. */
  226. get: function () {
  227. return this._clearOnEdit;
  228. },
  229. set: function (val) {
  230. this._clearOnEdit = isTrueProperty(val);
  231. },
  232. enumerable: true,
  233. configurable: true
  234. });
  235. TextInput.prototype.ngAfterContentInit = function () { };
  236. /**
  237. * @hidden
  238. */
  239. TextInput.prototype.ngAfterViewInit = function () {
  240. (void 0) /* assert */;
  241. // By default, password inputs clear after focus when they have content
  242. if (this.clearOnEdit !== false && this.type === 'password') {
  243. this.clearOnEdit = true;
  244. }
  245. var ionInputEle = this._elementRef.nativeElement;
  246. var nativeInputEle = this._native.nativeElement;
  247. // Copy remaining attributes, not handled by ionic/angular
  248. copyInputAttributes(ionInputEle, nativeInputEle);
  249. // prevent having tabIndex duplicated
  250. if (ionInputEle.hasAttribute('tabIndex')) {
  251. ionInputEle.removeAttribute('tabIndex');
  252. }
  253. // handle the autofocus attribute
  254. if (ionInputEle.hasAttribute('autofocus')) {
  255. ionInputEle.removeAttribute('autofocus');
  256. switch (this._autoFocusAssist) {
  257. case 'immediate':
  258. // config says to immediate focus on the input
  259. // works best on android devices
  260. nativeInputEle.focus();
  261. break;
  262. case 'delay':
  263. // config says to chill out a bit and focus on the input after transitions
  264. // works best on desktop
  265. this._plt.timeout(function () { return nativeInputEle.focus(); }, 800);
  266. break;
  267. }
  268. // traditionally iOS has big issues with autofocus on actual devices
  269. // autoFocus is disabled by default with the iOS mode config
  270. }
  271. // Initialize the input (can start emitting events)
  272. this._initialize();
  273. if (this.focus.observers.length > 0) {
  274. console.warn('(focus) is deprecated in ion-input, use (ionFocus) instead');
  275. }
  276. if (this.blur.observers.length > 0) {
  277. console.warn('(blur) is deprecated in ion-input, use (ionBlur) instead');
  278. }
  279. };
  280. /**
  281. * @hidden
  282. */
  283. TextInput.prototype.ngOnDestroy = function () {
  284. _super.prototype.ngOnDestroy.call(this);
  285. this._onDestroy.next();
  286. this._onDestroy = null;
  287. };
  288. /**
  289. * @hidden
  290. */
  291. TextInput.prototype.initFocus = function () {
  292. this.setFocus();
  293. };
  294. /**
  295. * @hidden
  296. */
  297. TextInput.prototype.setFocus = function () {
  298. // let's set focus to the element
  299. // but only if it does not already have focus
  300. if (!this.isFocus()) {
  301. this._native.nativeElement.focus();
  302. }
  303. };
  304. /**
  305. * @hidden
  306. */
  307. TextInput.prototype.setBlur = function () {
  308. if (this.isFocus()) {
  309. this._native.nativeElement.blur();
  310. }
  311. };
  312. /**
  313. * @hidden
  314. */
  315. TextInput.prototype.onInput = function (ev) {
  316. this.value = ev.target.value;
  317. // TODO: deprecate this
  318. this.input.emit(ev);
  319. };
  320. /**
  321. * @hidden
  322. */
  323. TextInput.prototype.onBlur = function (ev) {
  324. this._fireBlur();
  325. // TODO: deprecate this (06/07/2017)
  326. this.blur.emit(ev);
  327. this._scrollData = null;
  328. if (this._clearOnEdit && this.hasValue()) {
  329. this._didBlurAfterEdit = true;
  330. }
  331. };
  332. /**
  333. * @hidden
  334. */
  335. TextInput.prototype.onFocus = function (ev) {
  336. this._fireFocus();
  337. // TODO: deprecate this (06/07/2017)
  338. this.focus.emit(ev);
  339. };
  340. /**
  341. * @hidden
  342. */
  343. TextInput.prototype.onKeydown = function (ev) {
  344. if (ev && this._clearOnEdit) {
  345. this.checkClearOnEdit(ev.target.value);
  346. }
  347. };
  348. /**
  349. * @hidden
  350. */
  351. TextInput.prototype._inputUpdated = function () {
  352. _super.prototype._inputUpdated.call(this);
  353. var inputEle = this._native.nativeElement;
  354. var value = this._value;
  355. if (inputEle.value !== value) {
  356. inputEle.value = value;
  357. }
  358. };
  359. /**
  360. * @hidden
  361. */
  362. TextInput.prototype.clearTextInput = function () {
  363. this.value = '';
  364. };
  365. /**
  366. * Check if we need to clear the text input if clearOnEdit is enabled
  367. * @hidden
  368. */
  369. TextInput.prototype.checkClearOnEdit = function (_) {
  370. if (!this._clearOnEdit) {
  371. return;
  372. }
  373. // Did the input value change after it was blurred and edited?
  374. if (this._didBlurAfterEdit && this.hasValue()) {
  375. // Clear the input
  376. this.clearTextInput();
  377. }
  378. // Reset the flag
  379. this._didBlurAfterEdit = false;
  380. };
  381. TextInput.prototype._getScrollData = function () {
  382. if (!this._content) {
  383. return newScrollData();
  384. }
  385. // get container of this input, probably an ion-item a few nodes up
  386. if (this._scrollData) {
  387. return this._scrollData;
  388. }
  389. var ele = this._elementRef.nativeElement;
  390. ele = ele.closest('ion-item,[ion-item]') || ele;
  391. return this._scrollData = getScrollData(ele.offsetTop, ele.offsetHeight, this._content.getContentDimensions(), this._keyboardHeight, this._plt.height());
  392. };
  393. TextInput.prototype._relocateInput = function (shouldRelocate) {
  394. if (this._relocated === shouldRelocate) {
  395. return;
  396. }
  397. var platform = this._plt;
  398. var componentEle = this.getNativeElement();
  399. var focusedInputEle = this._native.nativeElement;
  400. (void 0) /* console.debug */;
  401. if (shouldRelocate) {
  402. // this allows for the actual input to receive the focus from
  403. // the user's touch event, but before it receives focus, it
  404. // moves the actual input to a location that will not screw
  405. // up the app's layout, and does not allow the native browser
  406. // to attempt to scroll the input into place (messing up headers/footers)
  407. // the cloned input fills the area of where native input should be
  408. // while the native input fakes out the browser by relocating itself
  409. // before it receives the actual focus event
  410. // We hide the focused input (with the visible caret) invisiable by making it scale(0),
  411. cloneInputComponent(platform, componentEle, focusedInputEle);
  412. var inputRelativeY = this._getScrollData().inputSafeY;
  413. // fix for #11817
  414. var tx = this._plt.isRTL ? 9999 : -9999;
  415. focusedInputEle.style[platform.Css.transform] = "translate3d(" + tx + "px," + inputRelativeY + "px,0)";
  416. focusedInputEle.style.opacity = '0';
  417. }
  418. else {
  419. removeClone(platform, componentEle, focusedInputEle);
  420. }
  421. this._relocated = shouldRelocate;
  422. };
  423. TextInput.prototype._enableScrollPadding = function () {
  424. var _this = this;
  425. (void 0) /* assert */;
  426. (void 0) /* console.debug */;
  427. this.ionFocus.subscribe(function () {
  428. var content = _this._content;
  429. var scrollPadding = _this._getScrollData().scrollPadding;
  430. content.addScrollPadding(scrollPadding);
  431. content.clearScrollPaddingFocusOut();
  432. });
  433. };
  434. TextInput.prototype._enableHideCaretOnScroll = function () {
  435. var _this = this;
  436. (void 0) /* assert */;
  437. var content = this._content;
  438. (void 0) /* console.debug */;
  439. content.ionScrollStart
  440. .takeUntil(this._onDestroy)
  441. .subscribe(function () { return scrollHideCaret(true); });
  442. content.ionScrollEnd
  443. .takeUntil(this._onDestroy)
  444. .subscribe(function () { return scrollHideCaret(false); });
  445. this.ionBlur.subscribe(function () { return _this._relocateInput(false); });
  446. var self = this;
  447. function scrollHideCaret(shouldHideCaret) {
  448. // if it does have focus, then do the dom write
  449. if (self.isFocus()) {
  450. self._dom.write(function () { return self._relocateInput(shouldHideCaret); });
  451. }
  452. }
  453. };
  454. TextInput.prototype._enableScrollMove = function () {
  455. var _this = this;
  456. (void 0) /* assert */;
  457. (void 0) /* console.debug */;
  458. this.ionFocus.subscribe(function () {
  459. var scrollData = _this._getScrollData();
  460. if (Math.abs(scrollData.scrollAmount) > 4) {
  461. _this._content.scrollTo(0, scrollData.scrollTo, scrollData.scrollDuration);
  462. }
  463. });
  464. };
  465. TextInput.prototype._pointerStart = function (ev) {
  466. (void 0) /* assert */;
  467. // input cover touchstart
  468. if (ev.type === 'touchstart') {
  469. this._isTouch = true;
  470. }
  471. if ((this._isTouch || (!this._isTouch && ev.type === 'mousedown')) && this._app.isEnabled()) {
  472. // remember where the touchstart/mousedown started
  473. this._coord = pointerCoord(ev);
  474. }
  475. (void 0) /* console.debug */;
  476. };
  477. TextInput.prototype._pointerEnd = function (ev) {
  478. (void 0) /* assert */;
  479. // input cover touchend/mouseup
  480. (void 0) /* console.debug */;
  481. if ((this._isTouch && ev.type === 'mouseup') || !this._app.isEnabled()) {
  482. // the app is actively doing something right now
  483. // don't try to scroll in the input
  484. ev.preventDefault();
  485. ev.stopPropagation();
  486. }
  487. else if (this._coord) {
  488. // get where the touchend/mouseup ended
  489. var endCoord = pointerCoord(ev);
  490. // focus this input if the pointer hasn't moved XX pixels
  491. // and the input doesn't already have focus
  492. if (!hasPointerMoved(8, this._coord, endCoord) && !this.isFocus()) {
  493. ev.preventDefault();
  494. ev.stopPropagation();
  495. // begin the input focus process
  496. this._jsSetFocus();
  497. }
  498. }
  499. this._coord = null;
  500. };
  501. TextInput.prototype._jsSetFocus = function () {
  502. var _this = this;
  503. (void 0) /* assert */;
  504. // begin the process of setting focus to the inner input element
  505. var content = this._content;
  506. (void 0) /* console.debug */;
  507. if (!content) {
  508. // not inside of a scroll view, just focus it
  509. this.setFocus();
  510. }
  511. var scrollData = this._getScrollData();
  512. if (Math.abs(scrollData.scrollAmount) < 4) {
  513. // the text input is in a safe position that doesn't
  514. // require it to be scrolled into view, just set focus now
  515. this.setFocus();
  516. return;
  517. }
  518. // temporarily move the focus to the focus holder so the browser
  519. // doesn't freak out while it's trying to get the input in place
  520. // at this point the native text input still does not have focus
  521. this._relocateInput(true);
  522. this.setFocus();
  523. // scroll the input into place
  524. content.scrollTo(0, scrollData.scrollTo, scrollData.scrollDuration, function () {
  525. // the scroll view is in the correct position now
  526. // give the native text input focus
  527. _this._relocateInput(false);
  528. // ensure this is the focused input
  529. _this.setFocus();
  530. });
  531. };
  532. TextInput.decorators = [
  533. { type: Component, args: [{
  534. selector: 'ion-input,ion-textarea',
  535. template: '<input #textInput *ngIf="!_isTextarea" class="text-input" ' +
  536. '[ngClass]="\'text-input-\' + _mode"' +
  537. '(input)="onInput($event)" ' +
  538. '(blur)="onBlur($event)" ' +
  539. '(focus)="onFocus($event)" ' +
  540. '(keydown)="onKeydown($event)" ' +
  541. '[type]="_type" ' +
  542. 'dir="auto" ' +
  543. '[attr.aria-labelledby]="_labelId" ' +
  544. '[attr.min]="min" ' +
  545. '[attr.max]="max" ' +
  546. '[attr.step]="step" ' +
  547. '[attr.autocomplete]="autocomplete" ' +
  548. '[attr.autocorrect]="autocorrect" ' +
  549. '[placeholder]="placeholder" ' +
  550. '[disabled]="_disabled" ' +
  551. '[readonly]="_readonly">' +
  552. '<textarea #textInput *ngIf="_isTextarea" class="text-input" ' +
  553. '[ngClass]="\'text-input-\' + _mode"' +
  554. '(input)="onInput($event)" ' +
  555. '(blur)="onBlur($event)" ' +
  556. '(focus)="onFocus($event)" ' +
  557. '(keydown)="onKeydown($event)" ' +
  558. '[attr.aria-labelledby]="_labelId" ' +
  559. '[attr.autocomplete]="autocomplete" ' +
  560. '[attr.autocorrect]="autocorrect" ' +
  561. '[placeholder]="placeholder" ' +
  562. '[disabled]="_disabled" ' +
  563. '[readonly]="_readonly"></textarea>' +
  564. '<button ion-button *ngIf="_clearInput" clear class="text-input-clear-icon" ' +
  565. 'type="button" ' +
  566. '(click)="clearTextInput($event)" ' +
  567. '(mousedown)="clearTextInput($event)" ' +
  568. 'tabindex="-1"></button>' +
  569. '<div class="input-cover" *ngIf="_useAssist" ' +
  570. '(touchstart)="_pointerStart($event)" ' +
  571. '(touchend)="_pointerEnd($event)" ' +
  572. '(mousedown)="_pointerStart($event)" ' +
  573. '(mouseup)="_pointerEnd($event)"></div>',
  574. encapsulation: ViewEncapsulation.None,
  575. changeDetection: ChangeDetectionStrategy.OnPush,
  576. inputs: ['value']
  577. },] },
  578. ];
  579. /** @nocollapse */
  580. TextInput.ctorParameters = function () { return [
  581. { type: Config, },
  582. { type: Platform, },
  583. { type: Form, },
  584. { type: App, },
  585. { type: ElementRef, },
  586. { type: Renderer, },
  587. { type: Content, decorators: [{ type: Optional },] },
  588. { type: Item, decorators: [{ type: Optional },] },
  589. { type: NgControl, decorators: [{ type: Optional },] },
  590. { type: DomController, },
  591. ]; };
  592. TextInput.propDecorators = {
  593. 'clearInput': [{ type: Input },],
  594. 'type': [{ type: Input },],
  595. 'readonly': [{ type: Input },],
  596. 'clearOnEdit': [{ type: Input },],
  597. '_native': [{ type: ViewChild, args: ['textInput', { read: ElementRef },] },],
  598. 'autocomplete': [{ type: Input },],
  599. 'autocorrect': [{ type: Input },],
  600. 'placeholder': [{ type: Input },],
  601. 'min': [{ type: Input },],
  602. 'max': [{ type: Input },],
  603. 'step': [{ type: Input },],
  604. 'input': [{ type: Output },],
  605. 'blur': [{ type: Output },],
  606. 'focus': [{ type: Output },],
  607. };
  608. return TextInput;
  609. }(BaseInput));
  610. export { TextInput };
  611. /**
  612. * @name TextArea
  613. * @description
  614. *
  615. * `ion-textarea` is used for multi-line text inputs. Ionic still
  616. * uses an actual `<textarea>` HTML element within the component;
  617. * however, with Ionic wrapping the native HTML text area element, Ionic
  618. * is able to better handle the user experience and interactivity.
  619. *
  620. * Note that `<ion-textarea>` must load its value from the `value` or
  621. * `[(ngModel)]` attribute. Unlike the native `<textarea>` element,
  622. * `<ion-textarea>` does not support loading its value from the
  623. * textarea's inner content.
  624. *
  625. * When requiring only a single-line text input, we recommend using
  626. * `<ion-input>` instead.
  627. *
  628. * @usage
  629. * ```html
  630. * <ion-item>
  631. * <ion-label>Comments</ion-label>
  632. * <ion-textarea></ion-textarea>
  633. * </ion-item>
  634. *
  635. * <ion-item>
  636. * <ion-label stacked>Message</ion-label>
  637. * <ion-textarea [(ngModel)]="msg"></ion-textarea>
  638. * </ion-item>
  639. *
  640. * <ion-item>
  641. * <ion-label floating>Description</ion-label>
  642. * <ion-textarea></ion-textarea>
  643. * </ion-item>
  644. *
  645. * <ion-item>
  646. * <ion-label>Long Description</ion-label>
  647. * <ion-textarea rows="6" placeholder="enter long description here..."></ion-textarea>
  648. * </ion-item>
  649. * ```
  650. *
  651. * @demo /docs/demos/src/textarea/
  652. */
  653. var SCROLL_ASSIST_SPEED = 0.3;
  654. function newScrollData() {
  655. return {
  656. scrollAmount: 0,
  657. scrollTo: 0,
  658. scrollPadding: 0,
  659. scrollDuration: 0,
  660. inputSafeY: 0
  661. };
  662. }
  663. /**
  664. * @hidden
  665. */
  666. export function getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, plaformHeight) {
  667. // compute input's Y values relative to the body
  668. var inputTop = (inputOffsetTop + scrollViewDimensions.contentTop - scrollViewDimensions.scrollTop);
  669. var inputBottom = (inputTop + inputOffsetHeight);
  670. // compute the safe area which is the viewable content area when the soft keyboard is up
  671. var safeAreaTop = scrollViewDimensions.contentTop;
  672. var safeAreaHeight = (plaformHeight - keyboardHeight - safeAreaTop) / 2;
  673. var safeAreaBottom = safeAreaTop + safeAreaHeight;
  674. // figure out if each edge of teh input is within the safe area
  675. var inputTopWithinSafeArea = (inputTop >= safeAreaTop && inputTop <= safeAreaBottom);
  676. var inputTopAboveSafeArea = (inputTop < safeAreaTop);
  677. var inputTopBelowSafeArea = (inputTop > safeAreaBottom);
  678. var inputBottomWithinSafeArea = (inputBottom >= safeAreaTop && inputBottom <= safeAreaBottom);
  679. var inputBottomBelowSafeArea = (inputBottom > safeAreaBottom);
  680. /*
  681. Text Input Scroll To Scenarios
  682. ---------------------------------------
  683. 1) Input top within safe area, bottom within safe area
  684. 2) Input top within safe area, bottom below safe area, room to scroll
  685. 3) Input top above safe area, bottom within safe area, room to scroll
  686. 4) Input top below safe area, no room to scroll, input smaller than safe area
  687. 5) Input top within safe area, bottom below safe area, no room to scroll, input smaller than safe area
  688. 6) Input top within safe area, bottom below safe area, no room to scroll, input larger than safe area
  689. 7) Input top below safe area, no room to scroll, input larger than safe area
  690. */
  691. var scrollData = newScrollData();
  692. // when auto-scrolling, there also needs to be enough
  693. // content padding at the bottom of the scroll view
  694. // always add scroll padding when a text input has focus
  695. // this allows for the content to scroll above of the keyboard
  696. // content behind the keyboard would be blank
  697. // some cases may not need it, but when jumping around it's best
  698. // to have the padding already rendered so there's no jank
  699. scrollData.scrollPadding = keyboardHeight;
  700. if (inputTopWithinSafeArea && inputBottomWithinSafeArea) {
  701. // Input top within safe area, bottom within safe area
  702. // no need to scroll to a position, it's good as-is
  703. return scrollData;
  704. }
  705. // looks like we'll have to do some auto-scrolling
  706. if (inputTopBelowSafeArea || inputBottomBelowSafeArea || inputTopAboveSafeArea) {
  707. // Input top or bottom below safe area
  708. // auto scroll the input up so at least the top of it shows
  709. if (safeAreaHeight > inputOffsetHeight) {
  710. // safe area height is taller than the input height, so we
  711. // can bring up the input just enough to show the input bottom
  712. scrollData.scrollAmount = Math.round(safeAreaBottom - inputBottom);
  713. }
  714. else {
  715. // safe area height is smaller than the input height, so we can
  716. // only scroll it up so the input top is at the top of the safe area
  717. // however the input bottom will be below the safe area
  718. scrollData.scrollAmount = Math.round(safeAreaTop - inputTop);
  719. }
  720. scrollData.inputSafeY = -(inputTop - safeAreaTop) + 4;
  721. if (inputTopAboveSafeArea && scrollData.scrollAmount > inputOffsetHeight) {
  722. // the input top is above the safe area and we're already scrolling it into place
  723. // don't let it scroll more than the height of the input
  724. scrollData.scrollAmount = inputOffsetHeight;
  725. }
  726. }
  727. // figure out where it should scroll to for the best position to the input
  728. scrollData.scrollTo = (scrollViewDimensions.scrollTop - scrollData.scrollAmount);
  729. // calculate animation duration
  730. var distance = Math.abs(scrollData.scrollAmount);
  731. var duration = distance / SCROLL_ASSIST_SPEED;
  732. scrollData.scrollDuration = Math.min(400, Math.max(150, duration));
  733. return scrollData;
  734. }
  735. function cloneInputComponent(plt, srcComponentEle, srcNativeInputEle) {
  736. // Make sure we kill all the clones before creating new ones
  737. // It is a defensive, removeClone() should do nothing
  738. // removeClone(plt, srcComponentEle, srcNativeInputEle);
  739. (void 0) /* assert */;
  740. // given a native <input> or <textarea> element
  741. // find its parent wrapping component like <ion-input> or <ion-textarea>
  742. // then clone the entire component
  743. if (srcComponentEle) {
  744. // DOM READ
  745. var srcTop = srcComponentEle.offsetTop;
  746. var srcLeft = srcComponentEle.offsetLeft;
  747. var srcWidth = srcComponentEle.offsetWidth;
  748. var srcHeight = srcComponentEle.offsetHeight;
  749. // DOM WRITE
  750. // not using deep clone so we don't pull in unnecessary nodes
  751. var clonedComponentEle = srcComponentEle.cloneNode(false);
  752. var clonedStyle = clonedComponentEle.style;
  753. clonedComponentEle.classList.add('cloned-input');
  754. clonedComponentEle.setAttribute('aria-hidden', 'true');
  755. clonedStyle.pointerEvents = 'none';
  756. clonedStyle.position = 'absolute';
  757. clonedStyle.top = srcTop + 'px';
  758. clonedStyle.left = srcLeft + 'px';
  759. clonedStyle.width = srcWidth + 'px';
  760. clonedStyle.height = srcHeight + 'px';
  761. var clonedNativeInputEle = srcNativeInputEle.cloneNode(false);
  762. clonedNativeInputEle.value = srcNativeInputEle.value;
  763. clonedNativeInputEle.tabIndex = -1;
  764. clonedComponentEle.appendChild(clonedNativeInputEle);
  765. srcComponentEle.parentNode.appendChild(clonedComponentEle);
  766. srcComponentEle.style.pointerEvents = 'none';
  767. }
  768. srcNativeInputEle.style[plt.Css.transform] = 'scale(0)';
  769. }
  770. function removeClone(plt, srcComponentEle, srcNativeInputEle) {
  771. if (srcComponentEle && srcComponentEle.parentElement) {
  772. var clonedInputEles = srcComponentEle.parentElement.querySelectorAll('.cloned-input');
  773. for (var i = 0; i < clonedInputEles.length; i++) {
  774. clonedInputEles[i].parentNode.removeChild(clonedInputEles[i]);
  775. }
  776. srcComponentEle.style.pointerEvents = '';
  777. }
  778. srcNativeInputEle.style[plt.Css.transform] = '';
  779. srcNativeInputEle.style.opacity = '';
  780. }
  781. //# sourceMappingURL=input.js.map