material-input.umd.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/text-field'), require('@angular/core'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material/form-field'), require('rxjs'), require('@angular/common')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/input', ['exports', '@angular/cdk/text-field', '@angular/core', '@angular/cdk/coercion', '@angular/cdk/platform', '@angular/forms', '@angular/material/core', '@angular/material/form-field', 'rxjs', '@angular/common'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.input = {}),global.ng.cdk.textField,global.ng.core,global.ng.cdk.coercion,global.ng.cdk.platform,global.ng.forms,global.ng.material.core,global.ng.material.formField,global.rxjs,global.ng.common));
  12. }(this, (function (exports,textField,core,coercion,platform,forms,core$1,formField,rxjs,common) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. /**
  42. * Directive to automatically resize a textarea to fit its content.
  43. * @deprecated Use `cdkTextareaAutosize` from `\@angular/cdk/text-field` instead.
  44. * \@breaking-change 8.0.0
  45. */
  46. var MatTextareaAutosize = /** @class */ (function (_super) {
  47. __extends(MatTextareaAutosize, _super);
  48. function MatTextareaAutosize() {
  49. return _super !== null && _super.apply(this, arguments) || this;
  50. }
  51. Object.defineProperty(MatTextareaAutosize.prototype, "matAutosizeMinRows", {
  52. get: /**
  53. * @return {?}
  54. */
  55. function () { return this.minRows; },
  56. set: /**
  57. * @param {?} value
  58. * @return {?}
  59. */
  60. function (value) { this.minRows = value; },
  61. enumerable: true,
  62. configurable: true
  63. });
  64. Object.defineProperty(MatTextareaAutosize.prototype, "matAutosizeMaxRows", {
  65. get: /**
  66. * @return {?}
  67. */
  68. function () { return this.maxRows; },
  69. set: /**
  70. * @param {?} value
  71. * @return {?}
  72. */
  73. function (value) { this.maxRows = value; },
  74. enumerable: true,
  75. configurable: true
  76. });
  77. Object.defineProperty(MatTextareaAutosize.prototype, "matAutosize", {
  78. get: /**
  79. * @return {?}
  80. */
  81. function () { return this.enabled; },
  82. set: /**
  83. * @param {?} value
  84. * @return {?}
  85. */
  86. function (value) { this.enabled = value; },
  87. enumerable: true,
  88. configurable: true
  89. });
  90. Object.defineProperty(MatTextareaAutosize.prototype, "matTextareaAutosize", {
  91. get: /**
  92. * @return {?}
  93. */
  94. function () { return this.enabled; },
  95. set: /**
  96. * @param {?} value
  97. * @return {?}
  98. */
  99. function (value) { this.enabled = value; },
  100. enumerable: true,
  101. configurable: true
  102. });
  103. MatTextareaAutosize.decorators = [
  104. { type: core.Directive, args: [{
  105. selector: 'textarea[mat-autosize], textarea[matTextareaAutosize]',
  106. exportAs: 'matTextareaAutosize',
  107. inputs: ['cdkAutosizeMinRows', 'cdkAutosizeMaxRows'],
  108. host: {
  109. 'class': 'cdk-textarea-autosize mat-autosize',
  110. // Textarea elements that have the directive applied should have a single row by default.
  111. // Browsers normally show two rows by default and therefore this limits the minRows binding.
  112. 'rows': '1',
  113. '(input)': '_noopInputHandler()',
  114. },
  115. },] },
  116. ];
  117. MatTextareaAutosize.propDecorators = {
  118. matAutosizeMinRows: [{ type: core.Input }],
  119. matAutosizeMaxRows: [{ type: core.Input }],
  120. matAutosize: [{ type: core.Input, args: ['mat-autosize',] }],
  121. matTextareaAutosize: [{ type: core.Input }]
  122. };
  123. return MatTextareaAutosize;
  124. }(textField.CdkTextareaAutosize));
  125. /**
  126. * @fileoverview added by tsickle
  127. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  128. */
  129. /**
  130. * \@docs-private
  131. * @param {?} type
  132. * @return {?}
  133. */
  134. function getMatInputUnsupportedTypeError(type) {
  135. return Error("Input type \"" + type + "\" isn't supported by matInput.");
  136. }
  137. /**
  138. * @fileoverview added by tsickle
  139. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  140. */
  141. /**
  142. * This token is used to inject the object whose value should be set into `MatInput`. If none is
  143. * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide
  144. * themselves for this token, in order to make `MatInput` delegate the getting and setting of the
  145. * value to them.
  146. * @type {?}
  147. */
  148. var MAT_INPUT_VALUE_ACCESSOR = new core.InjectionToken('MAT_INPUT_VALUE_ACCESSOR');
  149. /**
  150. * @fileoverview added by tsickle
  151. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  152. */
  153. // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
  154. /** @type {?} */
  155. var MAT_INPUT_INVALID_TYPES = [
  156. 'button',
  157. 'checkbox',
  158. 'file',
  159. 'hidden',
  160. 'image',
  161. 'radio',
  162. 'range',
  163. 'reset',
  164. 'submit'
  165. ];
  166. /** @type {?} */
  167. var nextUniqueId = 0;
  168. // Boilerplate for applying mixins to MatInput.
  169. /**
  170. * \@docs-private
  171. */
  172. var
  173. // Boilerplate for applying mixins to MatInput.
  174. /**
  175. * \@docs-private
  176. */
  177. MatInputBase = /** @class */ (function () {
  178. function MatInputBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
  179. this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
  180. this._parentForm = _parentForm;
  181. this._parentFormGroup = _parentFormGroup;
  182. this.ngControl = ngControl;
  183. }
  184. return MatInputBase;
  185. }());
  186. /** @type {?} */
  187. var _MatInputMixinBase = core$1.mixinErrorState(MatInputBase);
  188. /**
  189. * Directive that allows a native input to work inside a `MatFormField`.
  190. */
  191. var MatInput = /** @class */ (function (_super) {
  192. __extends(MatInput, _super);
  193. function MatInput(_elementRef, _platform, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, inputValueAccessor, _autofillMonitor, ngZone) {
  194. var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
  195. _this._elementRef = _elementRef;
  196. _this._platform = _platform;
  197. _this.ngControl = ngControl;
  198. _this._autofillMonitor = _autofillMonitor;
  199. _this._uid = "mat-input-" + nextUniqueId++;
  200. /**
  201. * Whether the component is being rendered on the server.
  202. */
  203. _this._isServer = false;
  204. /**
  205. * Whether the component is a native html select.
  206. */
  207. _this._isNativeSelect = false;
  208. /**
  209. * Implemented as part of MatFormFieldControl.
  210. * \@docs-private
  211. */
  212. _this.focused = false;
  213. /**
  214. * Implemented as part of MatFormFieldControl.
  215. * \@docs-private
  216. */
  217. _this.stateChanges = new rxjs.Subject();
  218. /**
  219. * Implemented as part of MatFormFieldControl.
  220. * \@docs-private
  221. */
  222. _this.controlType = 'mat-input';
  223. /**
  224. * Implemented as part of MatFormFieldControl.
  225. * \@docs-private
  226. */
  227. _this.autofilled = false;
  228. _this._disabled = false;
  229. _this._required = false;
  230. _this._type = 'text';
  231. _this._readonly = false;
  232. _this._neverEmptyInputTypes = [
  233. 'date',
  234. 'datetime',
  235. 'datetime-local',
  236. 'month',
  237. 'time',
  238. 'week'
  239. ].filter((/**
  240. * @param {?} t
  241. * @return {?}
  242. */
  243. function (t) { return platform.getSupportedInputTypes().has(t); }));
  244. /** @type {?} */
  245. var element = _this._elementRef.nativeElement;
  246. // If no input value accessor was explicitly specified, use the element as the input value
  247. // accessor.
  248. _this._inputValueAccessor = inputValueAccessor || element;
  249. _this._previousNativeValue = _this.value;
  250. // Force setter to be called in case id was not specified.
  251. _this.id = _this.id;
  252. // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
  253. // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
  254. // exists on iOS, we only bother to install the listener on iOS.
  255. if (_platform.IOS) {
  256. ngZone.runOutsideAngular((/**
  257. * @return {?}
  258. */
  259. function () {
  260. _elementRef.nativeElement.addEventListener('keyup', (/**
  261. * @param {?} event
  262. * @return {?}
  263. */
  264. function (event) {
  265. /** @type {?} */
  266. var el = (/** @type {?} */ (event.target));
  267. if (!el.value && !el.selectionStart && !el.selectionEnd) {
  268. // Note: Just setting `0, 0` doesn't fix the issue. Setting
  269. // `1, 1` fixes it for the first time that you type text and
  270. // then hold delete. Toggling to `1, 1` and then back to
  271. // `0, 0` seems to completely fix it.
  272. el.setSelectionRange(1, 1);
  273. el.setSelectionRange(0, 0);
  274. }
  275. }));
  276. }));
  277. }
  278. _this._isServer = !_this._platform.isBrowser;
  279. _this._isNativeSelect = element.nodeName.toLowerCase() === 'select';
  280. if (_this._isNativeSelect) {
  281. _this.controlType = ((/** @type {?} */ (element))).multiple ? 'mat-native-select-multiple' :
  282. 'mat-native-select';
  283. }
  284. return _this;
  285. }
  286. Object.defineProperty(MatInput.prototype, "disabled", {
  287. /**
  288. * Implemented as part of MatFormFieldControl.
  289. * @docs-private
  290. */
  291. get: /**
  292. * Implemented as part of MatFormFieldControl.
  293. * \@docs-private
  294. * @return {?}
  295. */
  296. function () {
  297. if (this.ngControl && this.ngControl.disabled !== null) {
  298. return this.ngControl.disabled;
  299. }
  300. return this._disabled;
  301. },
  302. set: /**
  303. * @param {?} value
  304. * @return {?}
  305. */
  306. function (value) {
  307. this._disabled = coercion.coerceBooleanProperty(value);
  308. // Browsers may not fire the blur event if the input is disabled too quickly.
  309. // Reset from here to ensure that the element doesn't become stuck.
  310. if (this.focused) {
  311. this.focused = false;
  312. this.stateChanges.next();
  313. }
  314. },
  315. enumerable: true,
  316. configurable: true
  317. });
  318. Object.defineProperty(MatInput.prototype, "id", {
  319. /**
  320. * Implemented as part of MatFormFieldControl.
  321. * @docs-private
  322. */
  323. get: /**
  324. * Implemented as part of MatFormFieldControl.
  325. * \@docs-private
  326. * @return {?}
  327. */
  328. function () { return this._id; },
  329. set: /**
  330. * @param {?} value
  331. * @return {?}
  332. */
  333. function (value) { this._id = value || this._uid; },
  334. enumerable: true,
  335. configurable: true
  336. });
  337. Object.defineProperty(MatInput.prototype, "required", {
  338. /**
  339. * Implemented as part of MatFormFieldControl.
  340. * @docs-private
  341. */
  342. get: /**
  343. * Implemented as part of MatFormFieldControl.
  344. * \@docs-private
  345. * @return {?}
  346. */
  347. function () { return this._required; },
  348. set: /**
  349. * @param {?} value
  350. * @return {?}
  351. */
  352. function (value) { this._required = coercion.coerceBooleanProperty(value); },
  353. enumerable: true,
  354. configurable: true
  355. });
  356. Object.defineProperty(MatInput.prototype, "type", {
  357. /** Input type of the element. */
  358. get: /**
  359. * Input type of the element.
  360. * @return {?}
  361. */
  362. function () { return this._type; },
  363. set: /**
  364. * @param {?} value
  365. * @return {?}
  366. */
  367. function (value) {
  368. this._type = value || 'text';
  369. this._validateType();
  370. // When using Angular inputs, developers are no longer able to set the properties on the native
  371. // input element. To ensure that bindings for `type` work, we need to sync the setter
  372. // with the native property. Textarea elements don't support the type property or attribute.
  373. if (!this._isTextarea() && platform.getSupportedInputTypes().has(this._type)) {
  374. ((/** @type {?} */ (this._elementRef.nativeElement))).type = this._type;
  375. }
  376. },
  377. enumerable: true,
  378. configurable: true
  379. });
  380. Object.defineProperty(MatInput.prototype, "value", {
  381. /**
  382. * Implemented as part of MatFormFieldControl.
  383. * @docs-private
  384. */
  385. get: /**
  386. * Implemented as part of MatFormFieldControl.
  387. * \@docs-private
  388. * @return {?}
  389. */
  390. function () { return this._inputValueAccessor.value; },
  391. set: /**
  392. * @param {?} value
  393. * @return {?}
  394. */
  395. function (value) {
  396. if (value !== this.value) {
  397. this._inputValueAccessor.value = value;
  398. this.stateChanges.next();
  399. }
  400. },
  401. enumerable: true,
  402. configurable: true
  403. });
  404. Object.defineProperty(MatInput.prototype, "readonly", {
  405. /** Whether the element is readonly. */
  406. get: /**
  407. * Whether the element is readonly.
  408. * @return {?}
  409. */
  410. function () { return this._readonly; },
  411. set: /**
  412. * @param {?} value
  413. * @return {?}
  414. */
  415. function (value) { this._readonly = coercion.coerceBooleanProperty(value); },
  416. enumerable: true,
  417. configurable: true
  418. });
  419. /**
  420. * @return {?}
  421. */
  422. MatInput.prototype.ngOnInit = /**
  423. * @return {?}
  424. */
  425. function () {
  426. var _this = this;
  427. if (this._platform.isBrowser) {
  428. this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((/**
  429. * @param {?} event
  430. * @return {?}
  431. */
  432. function (event) {
  433. _this.autofilled = event.isAutofilled;
  434. _this.stateChanges.next();
  435. }));
  436. }
  437. };
  438. /**
  439. * @return {?}
  440. */
  441. MatInput.prototype.ngOnChanges = /**
  442. * @return {?}
  443. */
  444. function () {
  445. this.stateChanges.next();
  446. };
  447. /**
  448. * @return {?}
  449. */
  450. MatInput.prototype.ngOnDestroy = /**
  451. * @return {?}
  452. */
  453. function () {
  454. this.stateChanges.complete();
  455. if (this._platform.isBrowser) {
  456. this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
  457. }
  458. };
  459. /**
  460. * @return {?}
  461. */
  462. MatInput.prototype.ngDoCheck = /**
  463. * @return {?}
  464. */
  465. function () {
  466. if (this.ngControl) {
  467. // We need to re-evaluate this on every change detection cycle, because there are some
  468. // error triggers that we can't subscribe to (e.g. parent form submissions). This means
  469. // that whatever logic is in here has to be super lean or we risk destroying the performance.
  470. this.updateErrorState();
  471. }
  472. // We need to dirty-check the native element's value, because there are some cases where
  473. // we won't be notified when it changes (e.g. the consumer isn't using forms or they're
  474. // updating the value using `emitEvent: false`).
  475. this._dirtyCheckNativeValue();
  476. };
  477. /** Focuses the input. */
  478. /**
  479. * Focuses the input.
  480. * @param {?=} options
  481. * @return {?}
  482. */
  483. MatInput.prototype.focus = /**
  484. * Focuses the input.
  485. * @param {?=} options
  486. * @return {?}
  487. */
  488. function (options) {
  489. this._elementRef.nativeElement.focus(options);
  490. };
  491. /** Callback for the cases where the focused state of the input changes. */
  492. /**
  493. * Callback for the cases where the focused state of the input changes.
  494. * @param {?} isFocused
  495. * @return {?}
  496. */
  497. MatInput.prototype._focusChanged = /**
  498. * Callback for the cases where the focused state of the input changes.
  499. * @param {?} isFocused
  500. * @return {?}
  501. */
  502. function (isFocused) {
  503. if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
  504. this.focused = isFocused;
  505. this.stateChanges.next();
  506. }
  507. };
  508. /**
  509. * @return {?}
  510. */
  511. MatInput.prototype._onInput = /**
  512. * @return {?}
  513. */
  514. function () {
  515. // This is a noop function and is used to let Angular know whenever the value changes.
  516. // Angular will run a new change detection each time the `input` event has been dispatched.
  517. // It's necessary that Angular recognizes the value change, because when floatingLabel
  518. // is set to false and Angular forms aren't used, the placeholder won't recognize the
  519. // value changes and will not disappear.
  520. // Listening to the input event wouldn't be necessary when the input is using the
  521. // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
  522. };
  523. /** Does some manual dirty checking on the native input `value` property. */
  524. /**
  525. * Does some manual dirty checking on the native input `value` property.
  526. * @protected
  527. * @return {?}
  528. */
  529. MatInput.prototype._dirtyCheckNativeValue = /**
  530. * Does some manual dirty checking on the native input `value` property.
  531. * @protected
  532. * @return {?}
  533. */
  534. function () {
  535. /** @type {?} */
  536. var newValue = this._elementRef.nativeElement.value;
  537. if (this._previousNativeValue !== newValue) {
  538. this._previousNativeValue = newValue;
  539. this.stateChanges.next();
  540. }
  541. };
  542. /** Make sure the input is a supported type. */
  543. /**
  544. * Make sure the input is a supported type.
  545. * @protected
  546. * @return {?}
  547. */
  548. MatInput.prototype._validateType = /**
  549. * Make sure the input is a supported type.
  550. * @protected
  551. * @return {?}
  552. */
  553. function () {
  554. if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
  555. throw getMatInputUnsupportedTypeError(this._type);
  556. }
  557. };
  558. /** Checks whether the input type is one of the types that are never empty. */
  559. /**
  560. * Checks whether the input type is one of the types that are never empty.
  561. * @protected
  562. * @return {?}
  563. */
  564. MatInput.prototype._isNeverEmpty = /**
  565. * Checks whether the input type is one of the types that are never empty.
  566. * @protected
  567. * @return {?}
  568. */
  569. function () {
  570. return this._neverEmptyInputTypes.indexOf(this._type) > -1;
  571. };
  572. /** Checks whether the input is invalid based on the native validation. */
  573. /**
  574. * Checks whether the input is invalid based on the native validation.
  575. * @protected
  576. * @return {?}
  577. */
  578. MatInput.prototype._isBadInput = /**
  579. * Checks whether the input is invalid based on the native validation.
  580. * @protected
  581. * @return {?}
  582. */
  583. function () {
  584. // The `validity` property won't be present on platform-server.
  585. /** @type {?} */
  586. var validity = ((/** @type {?} */ (this._elementRef.nativeElement))).validity;
  587. return validity && validity.badInput;
  588. };
  589. /** Determines if the component host is a textarea. */
  590. /**
  591. * Determines if the component host is a textarea.
  592. * @protected
  593. * @return {?}
  594. */
  595. MatInput.prototype._isTextarea = /**
  596. * Determines if the component host is a textarea.
  597. * @protected
  598. * @return {?}
  599. */
  600. function () {
  601. return this._elementRef.nativeElement.nodeName.toLowerCase() === 'textarea';
  602. };
  603. Object.defineProperty(MatInput.prototype, "empty", {
  604. /**
  605. * Implemented as part of MatFormFieldControl.
  606. * @docs-private
  607. */
  608. get: /**
  609. * Implemented as part of MatFormFieldControl.
  610. * \@docs-private
  611. * @return {?}
  612. */
  613. function () {
  614. return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
  615. !this.autofilled;
  616. },
  617. enumerable: true,
  618. configurable: true
  619. });
  620. Object.defineProperty(MatInput.prototype, "shouldLabelFloat", {
  621. /**
  622. * Implemented as part of MatFormFieldControl.
  623. * @docs-private
  624. */
  625. get: /**
  626. * Implemented as part of MatFormFieldControl.
  627. * \@docs-private
  628. * @return {?}
  629. */
  630. function () {
  631. if (this._isNativeSelect) {
  632. // For a single-selection `<select>`, the label should float when the selected option has
  633. // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
  634. // overlapping the label with the options.
  635. /** @type {?} */
  636. var selectElement = (/** @type {?} */ (this._elementRef.nativeElement));
  637. /** @type {?} */
  638. var firstOption = selectElement.options[0];
  639. // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
  640. // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
  641. return this.focused || selectElement.multiple || !this.empty ||
  642. !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
  643. }
  644. else {
  645. return this.focused || !this.empty;
  646. }
  647. },
  648. enumerable: true,
  649. configurable: true
  650. });
  651. /**
  652. * Implemented as part of MatFormFieldControl.
  653. * @docs-private
  654. */
  655. /**
  656. * Implemented as part of MatFormFieldControl.
  657. * \@docs-private
  658. * @param {?} ids
  659. * @return {?}
  660. */
  661. MatInput.prototype.setDescribedByIds = /**
  662. * Implemented as part of MatFormFieldControl.
  663. * \@docs-private
  664. * @param {?} ids
  665. * @return {?}
  666. */
  667. function (ids) {
  668. this._ariaDescribedby = ids.join(' ');
  669. };
  670. /**
  671. * Implemented as part of MatFormFieldControl.
  672. * @docs-private
  673. */
  674. /**
  675. * Implemented as part of MatFormFieldControl.
  676. * \@docs-private
  677. * @return {?}
  678. */
  679. MatInput.prototype.onContainerClick = /**
  680. * Implemented as part of MatFormFieldControl.
  681. * \@docs-private
  682. * @return {?}
  683. */
  684. function () {
  685. // Do not re-focus the input element if the element is already focused. Otherwise it can happen
  686. // that someone clicks on a time input and the cursor resets to the "hours" field while the
  687. // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
  688. if (!this.focused) {
  689. this.focus();
  690. }
  691. };
  692. MatInput.decorators = [
  693. { type: core.Directive, args: [{
  694. selector: "input[matInput], textarea[matInput], select[matNativeControl],\n input[matNativeControl], textarea[matNativeControl]",
  695. exportAs: 'matInput',
  696. host: {
  697. /**
  698. * \@breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
  699. */
  700. 'class': 'mat-input-element mat-form-field-autofill-control',
  701. '[class.mat-input-server]': '_isServer',
  702. // Native input properties that are overwritten by Angular inputs need to be synced with
  703. // the native input element. Otherwise property bindings for those don't work.
  704. '[attr.id]': 'id',
  705. '[attr.placeholder]': 'placeholder',
  706. '[disabled]': 'disabled',
  707. '[required]': 'required',
  708. '[attr.readonly]': 'readonly && !_isNativeSelect || null',
  709. '[attr.aria-describedby]': '_ariaDescribedby || null',
  710. '[attr.aria-invalid]': 'errorState',
  711. '[attr.aria-required]': 'required.toString()',
  712. '(blur)': '_focusChanged(false)',
  713. '(focus)': '_focusChanged(true)',
  714. '(input)': '_onInput()',
  715. },
  716. providers: [{ provide: formField.MatFormFieldControl, useExisting: MatInput }],
  717. },] },
  718. ];
  719. /** @nocollapse */
  720. MatInput.ctorParameters = function () { return [
  721. { type: core.ElementRef },
  722. { type: platform.Platform },
  723. { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] },
  724. { type: forms.NgForm, decorators: [{ type: core.Optional }] },
  725. { type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
  726. { type: core$1.ErrorStateMatcher },
  727. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [MAT_INPUT_VALUE_ACCESSOR,] }] },
  728. { type: textField.AutofillMonitor },
  729. { type: core.NgZone }
  730. ]; };
  731. MatInput.propDecorators = {
  732. disabled: [{ type: core.Input }],
  733. id: [{ type: core.Input }],
  734. placeholder: [{ type: core.Input }],
  735. required: [{ type: core.Input }],
  736. type: [{ type: core.Input }],
  737. errorStateMatcher: [{ type: core.Input }],
  738. value: [{ type: core.Input }],
  739. readonly: [{ type: core.Input }]
  740. };
  741. return MatInput;
  742. }(_MatInputMixinBase));
  743. /**
  744. * @fileoverview added by tsickle
  745. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  746. */
  747. var MatInputModule = /** @class */ (function () {
  748. function MatInputModule() {
  749. }
  750. MatInputModule.decorators = [
  751. { type: core.NgModule, args: [{
  752. declarations: [MatInput, MatTextareaAutosize],
  753. imports: [
  754. common.CommonModule,
  755. textField.TextFieldModule,
  756. formField.MatFormFieldModule,
  757. ],
  758. exports: [
  759. textField.TextFieldModule,
  760. // We re-export the `MatFormFieldModule` since `MatInput` will almost always
  761. // be used together with `MatFormField`.
  762. formField.MatFormFieldModule,
  763. MatInput,
  764. MatTextareaAutosize,
  765. ],
  766. providers: [core$1.ErrorStateMatcher],
  767. },] },
  768. ];
  769. return MatInputModule;
  770. }());
  771. exports.MatTextareaAutosize = MatTextareaAutosize;
  772. exports.MatInput = MatInput;
  773. exports.getMatInputUnsupportedTypeError = getMatInputUnsupportedTypeError;
  774. exports.MatInputModule = MatInputModule;
  775. exports.MAT_INPUT_VALUE_ACCESSOR = MAT_INPUT_VALUE_ACCESSOR;
  776. Object.defineProperty(exports, '__esModule', { value: true });
  777. })));
  778. //# sourceMappingURL=material-input.umd.js.map