1 | import { CdkTextareaAutosize, AutofillMonitor, TextFieldModule } from '@angular/cdk/text-field';
|
---|
2 | import { Directive, Input, InjectionToken, ElementRef, Optional, Self, Inject, NgZone, HostListener, NgModule } from '@angular/core';
|
---|
3 | import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
---|
4 | import { getSupportedInputTypes, Platform } from '@angular/cdk/platform';
|
---|
5 | import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
|
---|
6 | import { mixinErrorState, ErrorStateMatcher, MatCommonModule } from '@angular/material/core';
|
---|
7 | import { MatFormFieldControl, MatFormField, MAT_FORM_FIELD, MatFormFieldModule } from '@angular/material/form-field';
|
---|
8 | import { Subject } from 'rxjs';
|
---|
9 |
|
---|
10 | /**
|
---|
11 | * @license
|
---|
12 | * Copyright Google LLC All Rights Reserved.
|
---|
13 | *
|
---|
14 | * Use of this source code is governed by an MIT-style license that can be
|
---|
15 | * found in the LICENSE file at https://angular.io/license
|
---|
16 | */
|
---|
17 | /**
|
---|
18 | * Directive to automatically resize a textarea to fit its content.
|
---|
19 | * @deprecated Use `cdkTextareaAutosize` from `@angular/cdk/text-field` instead.
|
---|
20 | * @breaking-change 8.0.0
|
---|
21 | */
|
---|
22 | import * as ɵngcc0 from '@angular/core';
|
---|
23 | import * as ɵngcc1 from '@angular/cdk/platform';
|
---|
24 | import * as ɵngcc2 from '@angular/forms';
|
---|
25 | import * as ɵngcc3 from '@angular/material/core';
|
---|
26 | import * as ɵngcc4 from '@angular/cdk/text-field';
|
---|
27 | import * as ɵngcc5 from '@angular/material/form-field';
|
---|
28 | class MatTextareaAutosize extends CdkTextareaAutosize {
|
---|
29 | get matAutosizeMinRows() { return this.minRows; }
|
---|
30 | set matAutosizeMinRows(value) { this.minRows = value; }
|
---|
31 | get matAutosizeMaxRows() { return this.maxRows; }
|
---|
32 | set matAutosizeMaxRows(value) { this.maxRows = value; }
|
---|
33 | get matAutosize() { return this.enabled; }
|
---|
34 | set matAutosize(value) { this.enabled = value; }
|
---|
35 | get matTextareaAutosize() { return this.enabled; }
|
---|
36 | set matTextareaAutosize(value) { this.enabled = value; }
|
---|
37 | }
|
---|
38 | MatTextareaAutosize.ɵfac = /*@__PURE__*/ function () { let ɵMatTextareaAutosize_BaseFactory; return function MatTextareaAutosize_Factory(t) { return (ɵMatTextareaAutosize_BaseFactory || (ɵMatTextareaAutosize_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(MatTextareaAutosize)))(t || MatTextareaAutosize); }; }();
|
---|
39 | MatTextareaAutosize.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatTextareaAutosize, selectors: [["textarea", "mat-autosize", ""], ["textarea", "matTextareaAutosize", ""]], hostAttrs: ["rows", "1", 1, "cdk-textarea-autosize", "mat-autosize"], inputs: { cdkAutosizeMinRows: "cdkAutosizeMinRows", cdkAutosizeMaxRows: "cdkAutosizeMaxRows", matAutosizeMinRows: "matAutosizeMinRows", matAutosizeMaxRows: "matAutosizeMaxRows", matAutosize: ["mat-autosize", "matAutosize"], matTextareaAutosize: "matTextareaAutosize" }, exportAs: ["matTextareaAutosize"], features: [ɵngcc0.ɵɵInheritDefinitionFeature] });
|
---|
40 | MatTextareaAutosize.propDecorators = {
|
---|
41 | matAutosizeMinRows: [{ type: Input }],
|
---|
42 | matAutosizeMaxRows: [{ type: Input }],
|
---|
43 | matAutosize: [{ type: Input, args: ['mat-autosize',] }],
|
---|
44 | matTextareaAutosize: [{ type: Input }]
|
---|
45 | };
|
---|
46 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatTextareaAutosize, [{
|
---|
47 | type: Directive,
|
---|
48 | args: [{
|
---|
49 | selector: 'textarea[mat-autosize], textarea[matTextareaAutosize]',
|
---|
50 | exportAs: 'matTextareaAutosize',
|
---|
51 | inputs: ['cdkAutosizeMinRows', 'cdkAutosizeMaxRows'],
|
---|
52 | host: {
|
---|
53 | 'class': 'cdk-textarea-autosize mat-autosize',
|
---|
54 | // Textarea elements that have the directive applied should have a single row by default.
|
---|
55 | // Browsers normally show two rows by default and therefore this limits the minRows binding.
|
---|
56 | 'rows': '1'
|
---|
57 | }
|
---|
58 | }]
|
---|
59 | }], null, { matAutosizeMinRows: [{
|
---|
60 | type: Input
|
---|
61 | }], matAutosizeMaxRows: [{
|
---|
62 | type: Input
|
---|
63 | }], matAutosize: [{
|
---|
64 | type: Input,
|
---|
65 | args: ['mat-autosize']
|
---|
66 | }], matTextareaAutosize: [{
|
---|
67 | type: Input
|
---|
68 | }] }); })();
|
---|
69 |
|
---|
70 | /**
|
---|
71 | * @license
|
---|
72 | * Copyright Google LLC All Rights Reserved.
|
---|
73 | *
|
---|
74 | * Use of this source code is governed by an MIT-style license that can be
|
---|
75 | * found in the LICENSE file at https://angular.io/license
|
---|
76 | */
|
---|
77 | /** @docs-private */
|
---|
78 | function getMatInputUnsupportedTypeError(type) {
|
---|
79 | return Error(`Input type "${type}" isn't supported by matInput.`);
|
---|
80 | }
|
---|
81 |
|
---|
82 | /**
|
---|
83 | * @license
|
---|
84 | * Copyright Google LLC All Rights Reserved.
|
---|
85 | *
|
---|
86 | * Use of this source code is governed by an MIT-style license that can be
|
---|
87 | * found in the LICENSE file at https://angular.io/license
|
---|
88 | */
|
---|
89 | /**
|
---|
90 | * This token is used to inject the object whose value should be set into `MatInput`. If none is
|
---|
91 | * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide
|
---|
92 | * themselves for this token, in order to make `MatInput` delegate the getting and setting of the
|
---|
93 | * value to them.
|
---|
94 | */
|
---|
95 | const MAT_INPUT_VALUE_ACCESSOR = new InjectionToken('MAT_INPUT_VALUE_ACCESSOR');
|
---|
96 |
|
---|
97 | /**
|
---|
98 | * @license
|
---|
99 | * Copyright Google LLC All Rights Reserved.
|
---|
100 | *
|
---|
101 | * Use of this source code is governed by an MIT-style license that can be
|
---|
102 | * found in the LICENSE file at https://angular.io/license
|
---|
103 | */
|
---|
104 | // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
|
---|
105 | const MAT_INPUT_INVALID_TYPES = [
|
---|
106 | 'button',
|
---|
107 | 'checkbox',
|
---|
108 | 'file',
|
---|
109 | 'hidden',
|
---|
110 | 'image',
|
---|
111 | 'radio',
|
---|
112 | 'range',
|
---|
113 | 'reset',
|
---|
114 | 'submit'
|
---|
115 | ];
|
---|
116 | let nextUniqueId = 0;
|
---|
117 | // Boilerplate for applying mixins to MatInput.
|
---|
118 | /** @docs-private */
|
---|
119 | const _MatInputBase = mixinErrorState(class {
|
---|
120 | constructor(_defaultErrorStateMatcher, _parentForm, _parentFormGroup,
|
---|
121 | /** @docs-private */
|
---|
122 | ngControl) {
|
---|
123 | this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
|
---|
124 | this._parentForm = _parentForm;
|
---|
125 | this._parentFormGroup = _parentFormGroup;
|
---|
126 | this.ngControl = ngControl;
|
---|
127 | }
|
---|
128 | });
|
---|
129 | /** Directive that allows a native input to work inside a `MatFormField`. */
|
---|
130 | class MatInput extends _MatInputBase {
|
---|
131 | constructor(_elementRef, _platform, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, inputValueAccessor, _autofillMonitor, ngZone,
|
---|
132 | // TODO: Remove this once the legacy appearance has been removed. We only need
|
---|
133 | // to inject the form-field for determining whether the placeholder has been promoted.
|
---|
134 | _formField) {
|
---|
135 | super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
|
---|
136 | this._elementRef = _elementRef;
|
---|
137 | this._platform = _platform;
|
---|
138 | this._autofillMonitor = _autofillMonitor;
|
---|
139 | this._formField = _formField;
|
---|
140 | this._uid = `mat-input-${nextUniqueId++}`;
|
---|
141 | /**
|
---|
142 | * Implemented as part of MatFormFieldControl.
|
---|
143 | * @docs-private
|
---|
144 | */
|
---|
145 | this.focused = false;
|
---|
146 | /**
|
---|
147 | * Implemented as part of MatFormFieldControl.
|
---|
148 | * @docs-private
|
---|
149 | */
|
---|
150 | this.stateChanges = new Subject();
|
---|
151 | /**
|
---|
152 | * Implemented as part of MatFormFieldControl.
|
---|
153 | * @docs-private
|
---|
154 | */
|
---|
155 | this.controlType = 'mat-input';
|
---|
156 | /**
|
---|
157 | * Implemented as part of MatFormFieldControl.
|
---|
158 | * @docs-private
|
---|
159 | */
|
---|
160 | this.autofilled = false;
|
---|
161 | this._disabled = false;
|
---|
162 | this._required = false;
|
---|
163 | this._type = 'text';
|
---|
164 | this._readonly = false;
|
---|
165 | this._neverEmptyInputTypes = [
|
---|
166 | 'date',
|
---|
167 | 'datetime',
|
---|
168 | 'datetime-local',
|
---|
169 | 'month',
|
---|
170 | 'time',
|
---|
171 | 'week'
|
---|
172 | ].filter(t => getSupportedInputTypes().has(t));
|
---|
173 | const element = this._elementRef.nativeElement;
|
---|
174 | const nodeName = element.nodeName.toLowerCase();
|
---|
175 | // If no input value accessor was explicitly specified, use the element as the input value
|
---|
176 | // accessor.
|
---|
177 | this._inputValueAccessor = inputValueAccessor || element;
|
---|
178 | this._previousNativeValue = this.value;
|
---|
179 | // Force setter to be called in case id was not specified.
|
---|
180 | this.id = this.id;
|
---|
181 | // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
|
---|
182 | // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
|
---|
183 | // exists on iOS, we only bother to install the listener on iOS.
|
---|
184 | if (_platform.IOS) {
|
---|
185 | ngZone.runOutsideAngular(() => {
|
---|
186 | _elementRef.nativeElement.addEventListener('keyup', (event) => {
|
---|
187 | const el = event.target;
|
---|
188 | // Note: We specifically check for 0, rather than `!el.selectionStart`, because the two
|
---|
189 | // indicate different things. If the value is 0, it means that the caret is at the start
|
---|
190 | // of the input, whereas a value of `null` means that the input doesn't support
|
---|
191 | // manipulating the selection range. Inputs that don't support setting the selection range
|
---|
192 | // will throw an error so we want to avoid calling `setSelectionRange` on them. See:
|
---|
193 | // https://html.spec.whatwg.org/multipage/input.html#do-not-apply
|
---|
194 | if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {
|
---|
195 | // Note: Just setting `0, 0` doesn't fix the issue. Setting
|
---|
196 | // `1, 1` fixes it for the first time that you type text and
|
---|
197 | // then hold delete. Toggling to `1, 1` and then back to
|
---|
198 | // `0, 0` seems to completely fix it.
|
---|
199 | el.setSelectionRange(1, 1);
|
---|
200 | el.setSelectionRange(0, 0);
|
---|
201 | }
|
---|
202 | });
|
---|
203 | });
|
---|
204 | }
|
---|
205 | this._isServer = !this._platform.isBrowser;
|
---|
206 | this._isNativeSelect = nodeName === 'select';
|
---|
207 | this._isTextarea = nodeName === 'textarea';
|
---|
208 | this._isInFormField = !!_formField;
|
---|
209 | if (this._isNativeSelect) {
|
---|
210 | this.controlType = element.multiple ? 'mat-native-select-multiple' :
|
---|
211 | 'mat-native-select';
|
---|
212 | }
|
---|
213 | }
|
---|
214 | /**
|
---|
215 | * Implemented as part of MatFormFieldControl.
|
---|
216 | * @docs-private
|
---|
217 | */
|
---|
218 | get disabled() {
|
---|
219 | if (this.ngControl && this.ngControl.disabled !== null) {
|
---|
220 | return this.ngControl.disabled;
|
---|
221 | }
|
---|
222 | return this._disabled;
|
---|
223 | }
|
---|
224 | set disabled(value) {
|
---|
225 | this._disabled = coerceBooleanProperty(value);
|
---|
226 | // Browsers may not fire the blur event if the input is disabled too quickly.
|
---|
227 | // Reset from here to ensure that the element doesn't become stuck.
|
---|
228 | if (this.focused) {
|
---|
229 | this.focused = false;
|
---|
230 | this.stateChanges.next();
|
---|
231 | }
|
---|
232 | }
|
---|
233 | /**
|
---|
234 | * Implemented as part of MatFormFieldControl.
|
---|
235 | * @docs-private
|
---|
236 | */
|
---|
237 | get id() { return this._id; }
|
---|
238 | set id(value) { this._id = value || this._uid; }
|
---|
239 | /**
|
---|
240 | * Implemented as part of MatFormFieldControl.
|
---|
241 | * @docs-private
|
---|
242 | */
|
---|
243 | get required() { return this._required; }
|
---|
244 | set required(value) { this._required = coerceBooleanProperty(value); }
|
---|
245 | /** Input type of the element. */
|
---|
246 | get type() { return this._type; }
|
---|
247 | set type(value) {
|
---|
248 | this._type = value || 'text';
|
---|
249 | this._validateType();
|
---|
250 | // When using Angular inputs, developers are no longer able to set the properties on the native
|
---|
251 | // input element. To ensure that bindings for `type` work, we need to sync the setter
|
---|
252 | // with the native property. Textarea elements don't support the type property or attribute.
|
---|
253 | if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
|
---|
254 | this._elementRef.nativeElement.type = this._type;
|
---|
255 | }
|
---|
256 | }
|
---|
257 | /**
|
---|
258 | * Implemented as part of MatFormFieldControl.
|
---|
259 | * @docs-private
|
---|
260 | */
|
---|
261 | get value() { return this._inputValueAccessor.value; }
|
---|
262 | set value(value) {
|
---|
263 | if (value !== this.value) {
|
---|
264 | this._inputValueAccessor.value = value;
|
---|
265 | this.stateChanges.next();
|
---|
266 | }
|
---|
267 | }
|
---|
268 | /** Whether the element is readonly. */
|
---|
269 | get readonly() { return this._readonly; }
|
---|
270 | set readonly(value) { this._readonly = coerceBooleanProperty(value); }
|
---|
271 | ngAfterViewInit() {
|
---|
272 | if (this._platform.isBrowser) {
|
---|
273 | this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
|
---|
274 | this.autofilled = event.isAutofilled;
|
---|
275 | this.stateChanges.next();
|
---|
276 | });
|
---|
277 | }
|
---|
278 | }
|
---|
279 | ngOnChanges() {
|
---|
280 | this.stateChanges.next();
|
---|
281 | }
|
---|
282 | ngOnDestroy() {
|
---|
283 | this.stateChanges.complete();
|
---|
284 | if (this._platform.isBrowser) {
|
---|
285 | this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
|
---|
286 | }
|
---|
287 | }
|
---|
288 | ngDoCheck() {
|
---|
289 | if (this.ngControl) {
|
---|
290 | // We need to re-evaluate this on every change detection cycle, because there are some
|
---|
291 | // error triggers that we can't subscribe to (e.g. parent form submissions). This means
|
---|
292 | // that whatever logic is in here has to be super lean or we risk destroying the performance.
|
---|
293 | this.updateErrorState();
|
---|
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 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
308 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
309 | // ViewEngine they're overwritten.
|
---|
310 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
311 | /** Callback for the cases where the focused state of the input changes. */
|
---|
312 | // tslint:disable:no-host-decorator-in-concrete
|
---|
313 | // tslint:enable:no-host-decorator-in-concrete
|
---|
314 | _focusChanged(isFocused) {
|
---|
315 | if (isFocused !== this.focused) {
|
---|
316 | this.focused = isFocused;
|
---|
317 | this.stateChanges.next();
|
---|
318 | }
|
---|
319 | }
|
---|
320 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
321 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
322 | // ViewEngine they're overwritten.
|
---|
323 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
324 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
325 | _onInput() {
|
---|
326 | // This is a noop function and is used to let Angular know whenever the value changes.
|
---|
327 | // Angular will run a new change detection each time the `input` event has been dispatched.
|
---|
328 | // It's necessary that Angular recognizes the value change, because when floatingLabel
|
---|
329 | // is set to false and Angular forms aren't used, the placeholder won't recognize the
|
---|
330 | // value changes and will not disappear.
|
---|
331 | // Listening to the input event wouldn't be necessary when the input is using the
|
---|
332 | // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
|
---|
333 | }
|
---|
334 | /** Does some manual dirty checking on the native input `placeholder` attribute. */
|
---|
335 | _dirtyCheckPlaceholder() {
|
---|
336 | var _a, _b;
|
---|
337 | // If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
|
---|
338 | // screen readers will read it out twice: once from the label and once from the attribute.
|
---|
339 | // TODO: can be removed once we get rid of the `legacy` style for the form field, because it's
|
---|
340 | // the only one that supports promoting the placeholder to a label.
|
---|
341 | const placeholder = ((_b = (_a = this._formField) === null || _a === void 0 ? void 0 : _a._hideControlPlaceholder) === null || _b === void 0 ? void 0 : _b.call(_a)) ? null : this.placeholder;
|
---|
342 | if (placeholder !== this._previousPlaceholder) {
|
---|
343 | const element = this._elementRef.nativeElement;
|
---|
344 | this._previousPlaceholder = placeholder;
|
---|
345 | placeholder ?
|
---|
346 | element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
|
---|
347 | }
|
---|
348 | }
|
---|
349 | /** Does some manual dirty checking on the native input `value` property. */
|
---|
350 | _dirtyCheckNativeValue() {
|
---|
351 | const newValue = this._elementRef.nativeElement.value;
|
---|
352 | if (this._previousNativeValue !== newValue) {
|
---|
353 | this._previousNativeValue = newValue;
|
---|
354 | this.stateChanges.next();
|
---|
355 | }
|
---|
356 | }
|
---|
357 | /** Make sure the input is a supported type. */
|
---|
358 | _validateType() {
|
---|
359 | if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 &&
|
---|
360 | (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
361 | throw getMatInputUnsupportedTypeError(this._type);
|
---|
362 | }
|
---|
363 | }
|
---|
364 | /** Checks whether the input type is one of the types that are never empty. */
|
---|
365 | _isNeverEmpty() {
|
---|
366 | return this._neverEmptyInputTypes.indexOf(this._type) > -1;
|
---|
367 | }
|
---|
368 | /** Checks whether the input is invalid based on the native validation. */
|
---|
369 | _isBadInput() {
|
---|
370 | // The `validity` property won't be present on platform-server.
|
---|
371 | let validity = this._elementRef.nativeElement.validity;
|
---|
372 | return validity && validity.badInput;
|
---|
373 | }
|
---|
374 | /**
|
---|
375 | * Implemented as part of MatFormFieldControl.
|
---|
376 | * @docs-private
|
---|
377 | */
|
---|
378 | get empty() {
|
---|
379 | return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
|
---|
380 | !this.autofilled;
|
---|
381 | }
|
---|
382 | /**
|
---|
383 | * Implemented as part of MatFormFieldControl.
|
---|
384 | * @docs-private
|
---|
385 | */
|
---|
386 | get shouldLabelFloat() {
|
---|
387 | if (this._isNativeSelect) {
|
---|
388 | // For a single-selection `<select>`, the label should float when the selected option has
|
---|
389 | // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
|
---|
390 | // overlapping the label with the options.
|
---|
391 | const selectElement = this._elementRef.nativeElement;
|
---|
392 | const firstOption = selectElement.options[0];
|
---|
393 | // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
|
---|
394 | // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
|
---|
395 | return this.focused || selectElement.multiple || !this.empty ||
|
---|
396 | !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
|
---|
397 | }
|
---|
398 | else {
|
---|
399 | return this.focused || !this.empty;
|
---|
400 | }
|
---|
401 | }
|
---|
402 | /**
|
---|
403 | * Implemented as part of MatFormFieldControl.
|
---|
404 | * @docs-private
|
---|
405 | */
|
---|
406 | setDescribedByIds(ids) {
|
---|
407 | if (ids.length) {
|
---|
408 | this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
|
---|
409 | }
|
---|
410 | else {
|
---|
411 | this._elementRef.nativeElement.removeAttribute('aria-describedby');
|
---|
412 | }
|
---|
413 | }
|
---|
414 | /**
|
---|
415 | * Implemented as part of MatFormFieldControl.
|
---|
416 | * @docs-private
|
---|
417 | */
|
---|
418 | onContainerClick() {
|
---|
419 | // Do not re-focus the input element if the element is already focused. Otherwise it can happen
|
---|
420 | // that someone clicks on a time input and the cursor resets to the "hours" field while the
|
---|
421 | // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
|
---|
422 | if (!this.focused) {
|
---|
423 | this.focus();
|
---|
424 | }
|
---|
425 | }
|
---|
426 | }
|
---|
427 | MatInput.ɵfac = function MatInput_Factory(t) { return new (t || MatInput)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.Platform), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.NgControl, 10), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.NgForm, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.FormGroupDirective, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.ErrorStateMatcher), ɵngcc0.ɵɵdirectiveInject(MAT_INPUT_VALUE_ACCESSOR, 10), ɵngcc0.ɵɵdirectiveInject(ɵngcc4.AutofillMonitor), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.NgZone), ɵngcc0.ɵɵdirectiveInject(MAT_FORM_FIELD, 8)); };
|
---|
428 | MatInput.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatInput, selectors: [["input", "matInput", ""], ["textarea", "matInput", ""], ["select", "matNativeControl", ""], ["input", "matNativeControl", ""], ["textarea", "matNativeControl", ""]], hostAttrs: [1, "mat-input-element", "mat-form-field-autofill-control"], hostVars: 9, hostBindings: function MatInput_HostBindings(rf, ctx) { if (rf & 1) {
|
---|
429 | ɵngcc0.ɵɵlistener("focus", function MatInput_focus_HostBindingHandler() { return ctx._focusChanged(true); })("blur", function MatInput_blur_HostBindingHandler() { return ctx._focusChanged(false); })("input", function MatInput_input_HostBindingHandler() { return ctx._onInput(); });
|
---|
430 | } if (rf & 2) {
|
---|
431 | ɵngcc0.ɵɵhostProperty("disabled", ctx.disabled)("required", ctx.required);
|
---|
432 | ɵngcc0.ɵɵattribute("id", ctx.id)("data-placeholder", ctx.placeholder)("readonly", ctx.readonly && !ctx._isNativeSelect || null)("aria-invalid", ctx.empty && ctx.required ? null : ctx.errorState)("aria-required", ctx.required);
|
---|
433 | ɵngcc0.ɵɵclassProp("mat-input-server", ctx._isServer);
|
---|
434 | } }, inputs: { id: "id", disabled: "disabled", required: "required", type: "type", value: "value", readonly: "readonly", placeholder: "placeholder", errorStateMatcher: "errorStateMatcher", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"] }, exportAs: ["matInput"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: MatFormFieldControl, useExisting: MatInput }]), ɵngcc0.ɵɵInheritDefinitionFeature, ɵngcc0.ɵɵNgOnChangesFeature] });
|
---|
435 | MatInput.ctorParameters = () => [
|
---|
436 | { type: ElementRef },
|
---|
437 | { type: Platform },
|
---|
438 | { type: NgControl, decorators: [{ type: Optional }, { type: Self }] },
|
---|
439 | { type: NgForm, decorators: [{ type: Optional }] },
|
---|
440 | { type: FormGroupDirective, decorators: [{ type: Optional }] },
|
---|
441 | { type: ErrorStateMatcher },
|
---|
442 | { type: undefined, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [MAT_INPUT_VALUE_ACCESSOR,] }] },
|
---|
443 | { type: AutofillMonitor },
|
---|
444 | { type: NgZone },
|
---|
445 | { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] }
|
---|
446 | ];
|
---|
447 | MatInput.propDecorators = {
|
---|
448 | disabled: [{ type: Input }],
|
---|
449 | id: [{ type: Input }],
|
---|
450 | placeholder: [{ type: Input }],
|
---|
451 | required: [{ type: Input }],
|
---|
452 | type: [{ type: Input }],
|
---|
453 | errorStateMatcher: [{ type: Input }],
|
---|
454 | userAriaDescribedBy: [{ type: Input, args: ['aria-describedby',] }],
|
---|
455 | value: [{ type: Input }],
|
---|
456 | readonly: [{ type: Input }],
|
---|
457 | _focusChanged: [{ type: HostListener, args: ['focus', ['true'],] }, { type: HostListener, args: ['blur', ['false'],] }],
|
---|
458 | _onInput: [{ type: HostListener, args: ['input',] }]
|
---|
459 | };
|
---|
460 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatInput, [{
|
---|
461 | type: Directive,
|
---|
462 | args: [{
|
---|
463 | selector: `input[matInput], textarea[matInput], select[matNativeControl],
|
---|
464 | input[matNativeControl], textarea[matNativeControl]`,
|
---|
465 | exportAs: 'matInput',
|
---|
466 | host: {
|
---|
467 | /**
|
---|
468 | * @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
|
---|
469 | */
|
---|
470 | 'class': 'mat-input-element mat-form-field-autofill-control',
|
---|
471 | '[class.mat-input-server]': '_isServer',
|
---|
472 | // Native input properties that are overwritten by Angular inputs need to be synced with
|
---|
473 | // the native input element. Otherwise property bindings for those don't work.
|
---|
474 | '[attr.id]': 'id',
|
---|
475 | // At the time of writing, we have a lot of customer tests that look up the input based on its
|
---|
476 | // placeholder. Since we sometimes omit the placeholder attribute from the DOM to prevent screen
|
---|
477 | // readers from reading it twice, we have to keep it somewhere in the DOM for the lookup.
|
---|
478 | '[attr.data-placeholder]': 'placeholder',
|
---|
479 | '[disabled]': 'disabled',
|
---|
480 | '[required]': 'required',
|
---|
481 | '[attr.readonly]': 'readonly && !_isNativeSelect || null',
|
---|
482 | // Only mark the input as invalid for assistive technology if it has a value since the
|
---|
483 | // state usually overlaps with `aria-required` when the input is empty and can be redundant.
|
---|
484 | '[attr.aria-invalid]': '(empty && required) ? null : errorState',
|
---|
485 | '[attr.aria-required]': 'required'
|
---|
486 | },
|
---|
487 | providers: [{ provide: MatFormFieldControl, useExisting: MatInput }]
|
---|
488 | }]
|
---|
489 | }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc1.Platform }, { type: ɵngcc2.NgControl, decorators: [{
|
---|
490 | type: Optional
|
---|
491 | }, {
|
---|
492 | type: Self
|
---|
493 | }] }, { type: ɵngcc2.NgForm, decorators: [{
|
---|
494 | type: Optional
|
---|
495 | }] }, { type: ɵngcc2.FormGroupDirective, decorators: [{
|
---|
496 | type: Optional
|
---|
497 | }] }, { type: ɵngcc3.ErrorStateMatcher }, { type: undefined, decorators: [{
|
---|
498 | type: Optional
|
---|
499 | }, {
|
---|
500 | type: Self
|
---|
501 | }, {
|
---|
502 | type: Inject,
|
---|
503 | args: [MAT_INPUT_VALUE_ACCESSOR]
|
---|
504 | }] }, { type: ɵngcc4.AutofillMonitor }, { type: ɵngcc0.NgZone }, { type: ɵngcc5.MatFormField, decorators: [{
|
---|
505 | type: Optional
|
---|
506 | }, {
|
---|
507 | type: Inject,
|
---|
508 | args: [MAT_FORM_FIELD]
|
---|
509 | }] }]; }, { id: [{
|
---|
510 | type: Input
|
---|
511 | }], disabled: [{
|
---|
512 | type: Input
|
---|
513 | }], required: [{
|
---|
514 | type: Input
|
---|
515 | }], type: [{
|
---|
516 | type: Input
|
---|
517 | }], value: [{
|
---|
518 | type: Input
|
---|
519 | }], readonly: [{
|
---|
520 | type: Input
|
---|
521 | }],
|
---|
522 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
523 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
524 | // ViewEngine they're overwritten.
|
---|
525 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
526 | /** Callback for the cases where the focused state of the input changes. */
|
---|
527 | // tslint:disable:no-host-decorator-in-concrete
|
---|
528 | // tslint:enable:no-host-decorator-in-concrete
|
---|
529 | _focusChanged: [{
|
---|
530 | type: HostListener,
|
---|
531 | args: ['focus', ['true']]
|
---|
532 | }, {
|
---|
533 | type: HostListener,
|
---|
534 | args: ['blur', ['false']]
|
---|
535 | }],
|
---|
536 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
537 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
538 | // ViewEngine they're overwritten.
|
---|
539 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
540 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
541 | _onInput: [{
|
---|
542 | type: HostListener,
|
---|
543 | args: ['input']
|
---|
544 | }], placeholder: [{
|
---|
545 | type: Input
|
---|
546 | }], errorStateMatcher: [{
|
---|
547 | type: Input
|
---|
548 | }], userAriaDescribedBy: [{
|
---|
549 | type: Input,
|
---|
550 | args: ['aria-describedby']
|
---|
551 | }] }); })();
|
---|
552 |
|
---|
553 | /**
|
---|
554 | * @license
|
---|
555 | * Copyright Google LLC All Rights Reserved.
|
---|
556 | *
|
---|
557 | * Use of this source code is governed by an MIT-style license that can be
|
---|
558 | * found in the LICENSE file at https://angular.io/license
|
---|
559 | */
|
---|
560 | class MatInputModule {
|
---|
561 | }
|
---|
562 | MatInputModule.ɵfac = function MatInputModule_Factory(t) { return new (t || MatInputModule)(); };
|
---|
563 | MatInputModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatInputModule });
|
---|
564 | MatInputModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ providers: [ErrorStateMatcher], imports: [[
|
---|
565 | TextFieldModule,
|
---|
566 | MatFormFieldModule,
|
---|
567 | MatCommonModule,
|
---|
568 | ], TextFieldModule,
|
---|
569 | // We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
---|
570 | // be used together with `MatFormField`.
|
---|
571 | MatFormFieldModule] });
|
---|
572 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatInputModule, [{
|
---|
573 | type: NgModule,
|
---|
574 | args: [{
|
---|
575 | declarations: [MatInput, MatTextareaAutosize],
|
---|
576 | imports: [
|
---|
577 | TextFieldModule,
|
---|
578 | MatFormFieldModule,
|
---|
579 | MatCommonModule,
|
---|
580 | ],
|
---|
581 | exports: [
|
---|
582 | TextFieldModule,
|
---|
583 | // We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
---|
584 | // be used together with `MatFormField`.
|
---|
585 | MatFormFieldModule,
|
---|
586 | MatInput,
|
---|
587 | MatTextareaAutosize,
|
---|
588 | ],
|
---|
589 | providers: [ErrorStateMatcher]
|
---|
590 | }]
|
---|
591 | }], null, null); })();
|
---|
592 | (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatInputModule, { declarations: function () { return [MatInput, MatTextareaAutosize]; }, imports: function () { return [TextFieldModule,
|
---|
593 | MatFormFieldModule,
|
---|
594 | MatCommonModule]; }, exports: function () { return [TextFieldModule,
|
---|
595 | // We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
---|
596 | // be used together with `MatFormField`.
|
---|
597 | MatFormFieldModule, MatInput, MatTextareaAutosize]; } }); })();
|
---|
598 |
|
---|
599 | /**
|
---|
600 | * @license
|
---|
601 | * Copyright Google LLC All Rights Reserved.
|
---|
602 | *
|
---|
603 | * Use of this source code is governed by an MIT-style license that can be
|
---|
604 | * found in the LICENSE file at https://angular.io/license
|
---|
605 | */
|
---|
606 |
|
---|
607 | /**
|
---|
608 | * Generated bundle index. Do not edit.
|
---|
609 | */
|
---|
610 |
|
---|
611 | export { MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, MatTextareaAutosize, getMatInputUnsupportedTypeError };
|
---|
612 |
|
---|
613 | //# sourceMappingURL=input.js.map |
---|