[6a3a178] | 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 | class 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 | }
|
---|
| 32 | MatTextareaAutosize.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 | ];
|
---|
| 45 | MatTextareaAutosize.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 */
|
---|
| 60 | function 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 | */
|
---|
| 77 | const 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.
|
---|
| 87 | const MAT_INPUT_INVALID_TYPES = [
|
---|
| 88 | 'button',
|
---|
| 89 | 'checkbox',
|
---|
| 90 | 'file',
|
---|
| 91 | 'hidden',
|
---|
| 92 | 'image',
|
---|
| 93 | 'radio',
|
---|
| 94 | 'range',
|
---|
| 95 | 'reset',
|
---|
| 96 | 'submit'
|
---|
| 97 | ];
|
---|
| 98 | let nextUniqueId = 0;
|
---|
| 99 | // Boilerplate for applying mixins to MatInput.
|
---|
| 100 | /** @docs-private */
|
---|
| 101 | const _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`. */
|
---|
| 112 | class 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 | }
|
---|
[e29cc2e] | 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 | }
|
---|
[6a3a178] | 413 | }
|
---|
| 414 | MatInput.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',
|
---|
[e29cc2e] | 435 | '[class.mat-native-select-inline]': '_isInlineSelect()',
|
---|
[6a3a178] | 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 | ];
|
---|
| 444 | MatInput.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 | ];
|
---|
| 456 | MatInput.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 | */
|
---|
| 477 | class MatInputModule {
|
---|
| 478 | }
|
---|
| 479 | MatInputModule.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 |
|
---|
| 511 | export { MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, MatTextareaAutosize, getMatInputUnsupportedTypeError };
|
---|
| 512 | //# sourceMappingURL=input.js.map
|
---|