source: trip-planner-front/node_modules/@angular/material/fesm2015/input.js@ 1ad8e64

Last change on this file since 1ad8e64 was e29cc2e, checked in by Ema <ema_spirova@…>, 3 years ago

primeNG components

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