input.mjs 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
  1. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  2. import { Platform, getSupportedInputTypes } from '@angular/cdk/platform';
  3. import { AutofillMonitor, TextFieldModule } from '@angular/cdk/text-field';
  4. import * as i0 from '@angular/core';
  5. import { InjectionToken, inject, ElementRef, NgZone, Renderer2, isSignal, effect, booleanAttribute, Directive, Input, NgModule } from '@angular/core';
  6. import { _IdGenerator } from '@angular/cdk/a11y';
  7. import { NgControl, Validators, NgForm, FormGroupDirective } from '@angular/forms';
  8. import { Subject } from 'rxjs';
  9. import { M as MAT_INPUT_VALUE_ACCESSOR } from './input-value-accessor-D1GvPuqO.mjs';
  10. import { h as MAT_FORM_FIELD, k as MatFormFieldControl } from './form-field-DqPi4knt.mjs';
  11. export { b as MatError, j as MatFormField, c as MatHint, M as MatLabel, e as MatPrefix, g as MatSuffix } from './form-field-DqPi4knt.mjs';
  12. import { E as ErrorStateMatcher } from './error-options-Dm2JJUbF.mjs';
  13. import { _ as _ErrorStateTracker } from './error-state-Dtb1IHM-.mjs';
  14. import { M as MatFormFieldModule } from './module-BXZhw7pQ.mjs';
  15. import { M as MatCommonModule } from './common-module-WayjW0Pb.mjs';
  16. import '@angular/cdk/bidi';
  17. import '@angular/common';
  18. import 'rxjs/operators';
  19. import '@angular/cdk/observers/private';
  20. import '@angular/cdk/observers';
  21. /** @docs-private */
  22. function getMatInputUnsupportedTypeError(type) {
  23. return Error(`Input type "${type}" isn't supported by matInput.`);
  24. }
  25. // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
  26. const MAT_INPUT_INVALID_TYPES = [
  27. 'button',
  28. 'checkbox',
  29. 'file',
  30. 'hidden',
  31. 'image',
  32. 'radio',
  33. 'range',
  34. 'reset',
  35. 'submit',
  36. ];
  37. /** Injection token that can be used to provide the default options for the input. */
  38. const MAT_INPUT_CONFIG = new InjectionToken('MAT_INPUT_CONFIG');
  39. class MatInput {
  40. _elementRef = inject(ElementRef);
  41. _platform = inject(Platform);
  42. ngControl = inject(NgControl, { optional: true, self: true });
  43. _autofillMonitor = inject(AutofillMonitor);
  44. _ngZone = inject(NgZone);
  45. _formField = inject(MAT_FORM_FIELD, { optional: true });
  46. _renderer = inject(Renderer2);
  47. _uid = inject(_IdGenerator).getId('mat-input-');
  48. _previousNativeValue;
  49. _inputValueAccessor;
  50. _signalBasedValueAccessor;
  51. _previousPlaceholder;
  52. _errorStateTracker;
  53. _config = inject(MAT_INPUT_CONFIG, { optional: true });
  54. _cleanupIosKeyup;
  55. _cleanupWebkitWheel;
  56. /** `aria-describedby` IDs assigned by the form field. */
  57. _formFieldDescribedBy;
  58. /** Whether the component is being rendered on the server. */
  59. _isServer;
  60. /** Whether the component is a native html select. */
  61. _isNativeSelect;
  62. /** Whether the component is a textarea. */
  63. _isTextarea;
  64. /** Whether the input is inside of a form field. */
  65. _isInFormField;
  66. /**
  67. * Implemented as part of MatFormFieldControl.
  68. * @docs-private
  69. */
  70. focused = false;
  71. /**
  72. * Implemented as part of MatFormFieldControl.
  73. * @docs-private
  74. */
  75. stateChanges = new Subject();
  76. /**
  77. * Implemented as part of MatFormFieldControl.
  78. * @docs-private
  79. */
  80. controlType = 'mat-input';
  81. /**
  82. * Implemented as part of MatFormFieldControl.
  83. * @docs-private
  84. */
  85. autofilled = false;
  86. /**
  87. * Implemented as part of MatFormFieldControl.
  88. * @docs-private
  89. */
  90. get disabled() {
  91. return this._disabled;
  92. }
  93. set disabled(value) {
  94. this._disabled = coerceBooleanProperty(value);
  95. // Browsers may not fire the blur event if the input is disabled too quickly.
  96. // Reset from here to ensure that the element doesn't become stuck.
  97. if (this.focused) {
  98. this.focused = false;
  99. this.stateChanges.next();
  100. }
  101. }
  102. _disabled = false;
  103. /**
  104. * Implemented as part of MatFormFieldControl.
  105. * @docs-private
  106. */
  107. get id() {
  108. return this._id;
  109. }
  110. set id(value) {
  111. this._id = value || this._uid;
  112. }
  113. _id;
  114. /**
  115. * Implemented as part of MatFormFieldControl.
  116. * @docs-private
  117. */
  118. placeholder;
  119. /**
  120. * Name of the input.
  121. * @docs-private
  122. */
  123. name;
  124. /**
  125. * Implemented as part of MatFormFieldControl.
  126. * @docs-private
  127. */
  128. get required() {
  129. return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
  130. }
  131. set required(value) {
  132. this._required = coerceBooleanProperty(value);
  133. }
  134. _required;
  135. /** Input type of the element. */
  136. get type() {
  137. return this._type;
  138. }
  139. set type(value) {
  140. const prevType = this._type;
  141. this._type = value || 'text';
  142. this._validateType();
  143. // When using Angular inputs, developers are no longer able to set the properties on the native
  144. // input element. To ensure that bindings for `type` work, we need to sync the setter
  145. // with the native property. Textarea elements don't support the type property or attribute.
  146. if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
  147. this._elementRef.nativeElement.type = this._type;
  148. }
  149. if (this._type !== prevType) {
  150. this._ensureWheelDefaultBehavior();
  151. }
  152. }
  153. _type = 'text';
  154. /** An object used to control when error messages are shown. */
  155. get errorStateMatcher() {
  156. return this._errorStateTracker.matcher;
  157. }
  158. set errorStateMatcher(value) {
  159. this._errorStateTracker.matcher = value;
  160. }
  161. /**
  162. * Implemented as part of MatFormFieldControl.
  163. * @docs-private
  164. */
  165. userAriaDescribedBy;
  166. /**
  167. * Implemented as part of MatFormFieldControl.
  168. * @docs-private
  169. */
  170. get value() {
  171. return this._signalBasedValueAccessor
  172. ? this._signalBasedValueAccessor.value()
  173. : this._inputValueAccessor.value;
  174. }
  175. set value(value) {
  176. if (value !== this.value) {
  177. if (this._signalBasedValueAccessor) {
  178. this._signalBasedValueAccessor.value.set(value);
  179. }
  180. else {
  181. this._inputValueAccessor.value = value;
  182. }
  183. this.stateChanges.next();
  184. }
  185. }
  186. /** Whether the element is readonly. */
  187. get readonly() {
  188. return this._readonly;
  189. }
  190. set readonly(value) {
  191. this._readonly = coerceBooleanProperty(value);
  192. }
  193. _readonly = false;
  194. /** Whether the input should remain interactive when it is disabled. */
  195. disabledInteractive;
  196. /** Whether the input is in an error state. */
  197. get errorState() {
  198. return this._errorStateTracker.errorState;
  199. }
  200. set errorState(value) {
  201. this._errorStateTracker.errorState = value;
  202. }
  203. _neverEmptyInputTypes = [
  204. 'date',
  205. 'datetime',
  206. 'datetime-local',
  207. 'month',
  208. 'time',
  209. 'week',
  210. ].filter(t => getSupportedInputTypes().has(t));
  211. constructor() {
  212. const parentForm = inject(NgForm, { optional: true });
  213. const parentFormGroup = inject(FormGroupDirective, { optional: true });
  214. const defaultErrorStateMatcher = inject(ErrorStateMatcher);
  215. const accessor = inject(MAT_INPUT_VALUE_ACCESSOR, { optional: true, self: true });
  216. const element = this._elementRef.nativeElement;
  217. const nodeName = element.nodeName.toLowerCase();
  218. if (accessor) {
  219. if (isSignal(accessor.value)) {
  220. this._signalBasedValueAccessor = accessor;
  221. }
  222. else {
  223. this._inputValueAccessor = accessor;
  224. }
  225. }
  226. else {
  227. // If no input value accessor was explicitly specified, use the element as the input value
  228. // accessor.
  229. this._inputValueAccessor = element;
  230. }
  231. this._previousNativeValue = this.value;
  232. // Force setter to be called in case id was not specified.
  233. this.id = this.id;
  234. // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
  235. // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
  236. // exists on iOS, we only bother to install the listener on iOS.
  237. if (this._platform.IOS) {
  238. this._ngZone.runOutsideAngular(() => {
  239. this._cleanupIosKeyup = this._renderer.listen(element, 'keyup', this._iOSKeyupListener);
  240. });
  241. }
  242. this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
  243. this._isServer = !this._platform.isBrowser;
  244. this._isNativeSelect = nodeName === 'select';
  245. this._isTextarea = nodeName === 'textarea';
  246. this._isInFormField = !!this._formField;
  247. this.disabledInteractive = this._config?.disabledInteractive || false;
  248. if (this._isNativeSelect) {
  249. this.controlType = element.multiple
  250. ? 'mat-native-select-multiple'
  251. : 'mat-native-select';
  252. }
  253. if (this._signalBasedValueAccessor) {
  254. effect(() => {
  255. // Read the value so the effect can register the dependency.
  256. this._signalBasedValueAccessor.value();
  257. this.stateChanges.next();
  258. });
  259. }
  260. }
  261. ngAfterViewInit() {
  262. if (this._platform.isBrowser) {
  263. this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
  264. this.autofilled = event.isAutofilled;
  265. this.stateChanges.next();
  266. });
  267. }
  268. }
  269. ngOnChanges() {
  270. this.stateChanges.next();
  271. }
  272. ngOnDestroy() {
  273. this.stateChanges.complete();
  274. if (this._platform.isBrowser) {
  275. this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
  276. }
  277. this._cleanupIosKeyup?.();
  278. this._cleanupWebkitWheel?.();
  279. }
  280. ngDoCheck() {
  281. if (this.ngControl) {
  282. // We need to re-evaluate this on every change detection cycle, because there are some
  283. // error triggers that we can't subscribe to (e.g. parent form submissions). This means
  284. // that whatever logic is in here has to be super lean or we risk destroying the performance.
  285. this.updateErrorState();
  286. // Since the input isn't a `ControlValueAccessor`, we don't have a good way of knowing when
  287. // the disabled state has changed. We can't use the `ngControl.statusChanges`, because it
  288. // won't fire if the input is disabled with `emitEvents = false`, despite the input becoming
  289. // disabled.
  290. if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled) {
  291. this.disabled = this.ngControl.disabled;
  292. this.stateChanges.next();
  293. }
  294. }
  295. // We need to dirty-check the native element's value, because there are some cases where
  296. // we won't be notified when it changes (e.g. the consumer isn't using forms or they're
  297. // updating the value using `emitEvent: false`).
  298. this._dirtyCheckNativeValue();
  299. // We need to dirty-check and set the placeholder attribute ourselves, because whether it's
  300. // present or not depends on a query which is prone to "changed after checked" errors.
  301. this._dirtyCheckPlaceholder();
  302. }
  303. /** Focuses the input. */
  304. focus(options) {
  305. this._elementRef.nativeElement.focus(options);
  306. }
  307. /** Refreshes the error state of the input. */
  308. updateErrorState() {
  309. this._errorStateTracker.updateErrorState();
  310. }
  311. /** Callback for the cases where the focused state of the input changes. */
  312. _focusChanged(isFocused) {
  313. if (isFocused === this.focused) {
  314. return;
  315. }
  316. if (!this._isNativeSelect && isFocused && this.disabled && this.disabledInteractive) {
  317. const element = this._elementRef.nativeElement;
  318. // Focusing an input that has text will cause all the text to be selected. Clear it since
  319. // the user won't be able to change it. This is based on the internal implementation.
  320. if (element.type === 'number') {
  321. // setSelectionRange doesn't work on number inputs so it needs to be set briefly to text.
  322. element.type = 'text';
  323. element.setSelectionRange(0, 0);
  324. element.type = 'number';
  325. }
  326. else {
  327. element.setSelectionRange(0, 0);
  328. }
  329. }
  330. this.focused = isFocused;
  331. this.stateChanges.next();
  332. }
  333. _onInput() {
  334. // This is a noop function and is used to let Angular know whenever the value changes.
  335. // Angular will run a new change detection each time the `input` event has been dispatched.
  336. // It's necessary that Angular recognizes the value change, because when floatingLabel
  337. // is set to false and Angular forms aren't used, the placeholder won't recognize the
  338. // value changes and will not disappear.
  339. // Listening to the input event wouldn't be necessary when the input is using the
  340. // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
  341. }
  342. /** Does some manual dirty checking on the native input `value` property. */
  343. _dirtyCheckNativeValue() {
  344. const newValue = this._elementRef.nativeElement.value;
  345. if (this._previousNativeValue !== newValue) {
  346. this._previousNativeValue = newValue;
  347. this.stateChanges.next();
  348. }
  349. }
  350. /** Does some manual dirty checking on the native input `placeholder` attribute. */
  351. _dirtyCheckPlaceholder() {
  352. const placeholder = this._getPlaceholder();
  353. if (placeholder !== this._previousPlaceholder) {
  354. const element = this._elementRef.nativeElement;
  355. this._previousPlaceholder = placeholder;
  356. placeholder
  357. ? element.setAttribute('placeholder', placeholder)
  358. : element.removeAttribute('placeholder');
  359. }
  360. }
  361. /** Gets the current placeholder of the form field. */
  362. _getPlaceholder() {
  363. return this.placeholder || null;
  364. }
  365. /** Make sure the input is a supported type. */
  366. _validateType() {
  367. if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 &&
  368. (typeof ngDevMode === 'undefined' || ngDevMode)) {
  369. throw getMatInputUnsupportedTypeError(this._type);
  370. }
  371. }
  372. /** Checks whether the input type is one of the types that are never empty. */
  373. _isNeverEmpty() {
  374. return this._neverEmptyInputTypes.indexOf(this._type) > -1;
  375. }
  376. /** Checks whether the input is invalid based on the native validation. */
  377. _isBadInput() {
  378. // The `validity` property won't be present on platform-server.
  379. let validity = this._elementRef.nativeElement.validity;
  380. return validity && validity.badInput;
  381. }
  382. /**
  383. * Implemented as part of MatFormFieldControl.
  384. * @docs-private
  385. */
  386. get empty() {
  387. return (!this._isNeverEmpty() &&
  388. !this._elementRef.nativeElement.value &&
  389. !this._isBadInput() &&
  390. !this.autofilled);
  391. }
  392. /**
  393. * Implemented as part of MatFormFieldControl.
  394. * @docs-private
  395. */
  396. get shouldLabelFloat() {
  397. if (this._isNativeSelect) {
  398. // For a single-selection `<select>`, the label should float when the selected option has
  399. // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
  400. // overlapping the label with the options.
  401. const selectElement = this._elementRef.nativeElement;
  402. const firstOption = selectElement.options[0];
  403. // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
  404. // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
  405. return (this.focused ||
  406. selectElement.multiple ||
  407. !this.empty ||
  408. !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label));
  409. }
  410. else {
  411. return (this.focused && !this.disabled) || !this.empty;
  412. }
  413. }
  414. /**
  415. * Implemented as part of MatFormFieldControl.
  416. * @docs-private
  417. */
  418. setDescribedByIds(ids) {
  419. const element = this._elementRef.nativeElement;
  420. const existingDescribedBy = element.getAttribute('aria-describedby');
  421. let toAssign;
  422. // In some cases there might be some `aria-describedby` IDs that were assigned directly,
  423. // like by the `AriaDescriber` (see #30011). Attempt to preserve them by taking the previous
  424. // attribute value and filtering out the IDs that came from the previous `setDescribedByIds`
  425. // call. Note the `|| ids` here allows us to avoid duplicating IDs on the first render.
  426. if (existingDescribedBy) {
  427. const exclude = this._formFieldDescribedBy || ids;
  428. toAssign = ids.concat(existingDescribedBy.split(' ').filter(id => id && !exclude.includes(id)));
  429. }
  430. else {
  431. toAssign = ids;
  432. }
  433. this._formFieldDescribedBy = ids;
  434. if (toAssign.length) {
  435. element.setAttribute('aria-describedby', toAssign.join(' '));
  436. }
  437. else {
  438. element.removeAttribute('aria-describedby');
  439. }
  440. }
  441. /**
  442. * Implemented as part of MatFormFieldControl.
  443. * @docs-private
  444. */
  445. onContainerClick() {
  446. // Do not re-focus the input element if the element is already focused. Otherwise it can happen
  447. // that someone clicks on a time input and the cursor resets to the "hours" field while the
  448. // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
  449. if (!this.focused) {
  450. this.focus();
  451. }
  452. }
  453. /** Whether the form control is a native select that is displayed inline. */
  454. _isInlineSelect() {
  455. const element = this._elementRef.nativeElement;
  456. return this._isNativeSelect && (element.multiple || element.size > 1);
  457. }
  458. _iOSKeyupListener = (event) => {
  459. const el = event.target;
  460. // Note: We specifically check for 0, rather than `!el.selectionStart`, because the two
  461. // indicate different things. If the value is 0, it means that the caret is at the start
  462. // of the input, whereas a value of `null` means that the input doesn't support
  463. // manipulating the selection range. Inputs that don't support setting the selection range
  464. // will throw an error so we want to avoid calling `setSelectionRange` on them. See:
  465. // https://html.spec.whatwg.org/multipage/input.html#do-not-apply
  466. if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {
  467. // Note: Just setting `0, 0` doesn't fix the issue. Setting
  468. // `1, 1` fixes it for the first time that you type text and
  469. // then hold delete. Toggling to `1, 1` and then back to
  470. // `0, 0` seems to completely fix it.
  471. el.setSelectionRange(1, 1);
  472. el.setSelectionRange(0, 0);
  473. }
  474. };
  475. _webkitBlinkWheelListener = () => {
  476. // This is a noop function and is used to enable mouse wheel input
  477. // on number inputs
  478. // on blink and webkit browsers.
  479. };
  480. /**
  481. * In blink and webkit browsers a focused number input does not increment or decrement its value
  482. * on mouse wheel interaction unless a wheel event listener is attached to it or one of its
  483. * ancestors or a passive wheel listener is attached somewhere in the DOM. For example: Hitting
  484. * a tooltip once enables the mouse wheel input for all number inputs as long as it exists. In
  485. * order to get reliable and intuitive behavior we apply a wheel event on our own thus making
  486. * sure increment and decrement by mouse wheel works every time.
  487. * @docs-private
  488. */
  489. _ensureWheelDefaultBehavior() {
  490. this._cleanupWebkitWheel?.();
  491. if (this._type === 'number' && (this._platform.BLINK || this._platform.WEBKIT)) {
  492. this._cleanupWebkitWheel = this._renderer.listen(this._elementRef.nativeElement, 'wheel', this._webkitBlinkWheelListener);
  493. }
  494. }
  495. /** Gets the value to set on the `readonly` attribute. */
  496. _getReadonlyAttribute() {
  497. if (this._isNativeSelect) {
  498. return null;
  499. }
  500. if (this.readonly || (this.disabled && this.disabledInteractive)) {
  501. return 'true';
  502. }
  503. return null;
  504. }
  505. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  506. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.6", type: MatInput, isStandalone: true, selector: "input[matInput], textarea[matInput], select[matNativeControl],\n input[matNativeControl], textarea[matNativeControl]", inputs: { disabled: "disabled", id: "id", placeholder: "placeholder", name: "name", required: "required", type: "type", errorStateMatcher: "errorStateMatcher", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], value: "value", readonly: "readonly", disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute] }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)", "input": "_onInput()" }, properties: { "class.mat-input-server": "_isServer", "class.mat-mdc-form-field-textarea-control": "_isInFormField && _isTextarea", "class.mat-mdc-form-field-input-control": "_isInFormField", "class.mat-mdc-input-disabled-interactive": "disabledInteractive", "class.mdc-text-field__input": "_isInFormField", "class.mat-mdc-native-select-inline": "_isInlineSelect()", "id": "id", "disabled": "disabled && !disabledInteractive", "required": "required", "attr.name": "name || null", "attr.readonly": "_getReadonlyAttribute()", "attr.aria-disabled": "disabled && disabledInteractive ? \"true\" : null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mat-mdc-input-element" }, providers: [{ provide: MatFormFieldControl, useExisting: MatInput }], exportAs: ["matInput"], usesOnChanges: true, ngImport: i0 });
  507. }
  508. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatInput, decorators: [{
  509. type: Directive,
  510. args: [{
  511. selector: `input[matInput], textarea[matInput], select[matNativeControl],
  512. input[matNativeControl], textarea[matNativeControl]`,
  513. exportAs: 'matInput',
  514. host: {
  515. 'class': 'mat-mdc-input-element',
  516. // The BaseMatInput parent class adds `mat-input-element`, `mat-form-field-control` and
  517. // `mat-form-field-autofill-control` to the CSS class list, but this should not be added for
  518. // this MDC equivalent input.
  519. '[class.mat-input-server]': '_isServer',
  520. '[class.mat-mdc-form-field-textarea-control]': '_isInFormField && _isTextarea',
  521. '[class.mat-mdc-form-field-input-control]': '_isInFormField',
  522. '[class.mat-mdc-input-disabled-interactive]': 'disabledInteractive',
  523. '[class.mdc-text-field__input]': '_isInFormField',
  524. '[class.mat-mdc-native-select-inline]': '_isInlineSelect()',
  525. // Native input properties that are overwritten by Angular inputs need to be synced with
  526. // the native input element. Otherwise property bindings for those don't work.
  527. '[id]': 'id',
  528. '[disabled]': 'disabled && !disabledInteractive',
  529. '[required]': 'required',
  530. '[attr.name]': 'name || null',
  531. '[attr.readonly]': '_getReadonlyAttribute()',
  532. '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
  533. // Only mark the input as invalid for assistive technology if it has a value since the
  534. // state usually overlaps with `aria-required` when the input is empty and can be redundant.
  535. '[attr.aria-invalid]': '(empty && required) ? null : errorState',
  536. '[attr.aria-required]': 'required',
  537. // Native input properties that are overwritten by Angular inputs need to be synced with
  538. // the native input element. Otherwise property bindings for those don't work.
  539. '[attr.id]': 'id',
  540. '(focus)': '_focusChanged(true)',
  541. '(blur)': '_focusChanged(false)',
  542. '(input)': '_onInput()',
  543. },
  544. providers: [{ provide: MatFormFieldControl, useExisting: MatInput }],
  545. }]
  546. }], ctorParameters: () => [], propDecorators: { disabled: [{
  547. type: Input
  548. }], id: [{
  549. type: Input
  550. }], placeholder: [{
  551. type: Input
  552. }], name: [{
  553. type: Input
  554. }], required: [{
  555. type: Input
  556. }], type: [{
  557. type: Input
  558. }], errorStateMatcher: [{
  559. type: Input
  560. }], userAriaDescribedBy: [{
  561. type: Input,
  562. args: ['aria-describedby']
  563. }], value: [{
  564. type: Input
  565. }], readonly: [{
  566. type: Input
  567. }], disabledInteractive: [{
  568. type: Input,
  569. args: [{ transform: booleanAttribute }]
  570. }] } });
  571. class MatInputModule {
  572. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  573. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatInputModule, imports: [MatCommonModule, MatFormFieldModule, MatInput], exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule] });
  574. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatInputModule, imports: [MatCommonModule, MatFormFieldModule, MatFormFieldModule, TextFieldModule, MatCommonModule] });
  575. }
  576. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatInputModule, decorators: [{
  577. type: NgModule,
  578. args: [{
  579. imports: [MatCommonModule, MatFormFieldModule, MatInput],
  580. exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule],
  581. }]
  582. }] });
  583. export { MAT_INPUT_CONFIG, MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, getMatInputUnsupportedTypeError };
  584. //# sourceMappingURL=input.mjs.map