@angular/material
Version:
Angular Material
524 lines (515 loc) • 24.1 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i1 from '@angular/cdk/platform';
import { getSupportedInputTypes } from '@angular/cdk/platform';
import * as i4 from '@angular/cdk/text-field';
import { TextFieldModule } from '@angular/cdk/text-field';
import * as i0 from '@angular/core';
import { InjectionToken, Directive, Optional, Self, Inject, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { Validators } from '@angular/forms';
import * as i3 from '@angular/material/core';
import { mixinErrorState, MatCommonModule } from '@angular/material/core';
import * as i5 from '@angular/material/form-field';
import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
import { Subject } from 'rxjs';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** @docs-private */
function getMatInputUnsupportedTypeError(type) {
return Error(`Input type "${type}" isn't supported by matInput.`);
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* This token is used to inject the object whose value should be set into `MatInput`. If none is
* provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide
* themselves for this token, in order to make `MatInput` delegate the getting and setting of the
* value to them.
*/
const MAT_INPUT_VALUE_ACCESSOR = new InjectionToken('MAT_INPUT_VALUE_ACCESSOR');
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
const MAT_INPUT_INVALID_TYPES = [
'button',
'checkbox',
'file',
'hidden',
'image',
'radio',
'range',
'reset',
'submit',
];
let nextUniqueId = 0;
// Boilerplate for applying mixins to MatInput.
/** @docs-private */
const _MatInputBase = mixinErrorState(class {
constructor(_defaultErrorStateMatcher, _parentForm, _parentFormGroup,
/**
* Form control bound to the component.
* Implemented as part of `MatFormFieldControl`.
* @docs-private
*/
ngControl) {
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
/**
* Emits whenever the component state changes and should cause the parent
* form field to update. Implemented as part of `MatFormFieldControl`.
* @docs-private
*/
this.stateChanges = new Subject();
}
});
class MatInput extends _MatInputBase {
constructor(_elementRef, _platform, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, inputValueAccessor, _autofillMonitor, ngZone,
// TODO: Remove this once the legacy appearance has been removed. We only need
// to inject the form field for determining whether the placeholder has been promoted.
_formField) {
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
this._elementRef = _elementRef;
this._platform = _platform;
this._autofillMonitor = _autofillMonitor;
this._formField = _formField;
this._uid = `mat-input-${nextUniqueId++}`;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
this.focused = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
this.stateChanges = new Subject();
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
this.controlType = 'mat-input';
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
this.autofilled = false;
this._disabled = false;
this._type = 'text';
this._readonly = false;
this._neverEmptyInputTypes = [
'date',
'datetime',
'datetime-local',
'month',
'time',
'week',
].filter(t => getSupportedInputTypes().has(t));
this._iOSKeyupListener = (event) => {
const el = event.target;
// Note: We specifically check for 0, rather than `!el.selectionStart`, because the two
// indicate different things. If the value is 0, it means that the caret is at the start
// of the input, whereas a value of `null` means that the input doesn't support
// manipulating the selection range. Inputs that don't support setting the selection range
// will throw an error so we want to avoid calling `setSelectionRange` on them. See:
// https://html.spec.whatwg.org/multipage/input.html#do-not-apply
if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {
// Note: Just setting `0, 0` doesn't fix the issue. Setting
// `1, 1` fixes it for the first time that you type text and
// then hold delete. Toggling to `1, 1` and then back to
// `0, 0` seems to completely fix it.
el.setSelectionRange(1, 1);
el.setSelectionRange(0, 0);
}
};
const element = this._elementRef.nativeElement;
const nodeName = element.nodeName.toLowerCase();
// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
this._inputValueAccessor = inputValueAccessor || element;
this._previousNativeValue = this.value;
// Force setter to be called in case id was not specified.
this.id = this.id;
// On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
// key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
// exists on iOS, we only bother to install the listener on iOS.
if (_platform.IOS) {
ngZone.runOutsideAngular(() => {
_elementRef.nativeElement.addEventListener('keyup', this._iOSKeyupListener);
});
}
this._isServer = !this._platform.isBrowser;
this._isNativeSelect = nodeName === 'select';
this._isTextarea = nodeName === 'textarea';
this._isInFormField = !!_formField;
if (this._isNativeSelect) {
this.controlType = element.multiple
? 'mat-native-select-multiple'
: 'mat-native-select';
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get disabled() {
if (this.ngControl && this.ngControl.disabled !== null) {
return this.ngControl.disabled;
}
return this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
// Browsers may not fire the blur event if the input is disabled too quickly.
// Reset from here to ensure that the element doesn't become stuck.
if (this.focused) {
this.focused = false;
this.stateChanges.next();
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get id() {
return this._id;
}
set id(value) {
this._id = value || this._uid;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get required() {
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
}
set required(value) {
this._required = coerceBooleanProperty(value);
}
/** Input type of the element. */
get type() {
return this._type;
}
set type(value) {
this._type = value || 'text';
this._validateType();
// When using Angular inputs, developers are no longer able to set the properties on the native
// input element. To ensure that bindings for `type` work, we need to sync the setter
// with the native property. Textarea elements don't support the type property or attribute.
if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
this._elementRef.nativeElement.type = this._type;
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get value() {
return this._inputValueAccessor.value;
}
set value(value) {
if (value !== this.value) {
this._inputValueAccessor.value = value;
this.stateChanges.next();
}
}
/** Whether the element is readonly. */
get readonly() {
return this._readonly;
}
set readonly(value) {
this._readonly = coerceBooleanProperty(value);
}
ngAfterViewInit() {
if (this._platform.isBrowser) {
this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
this.autofilled = event.isAutofilled;
this.stateChanges.next();
});
}
}
ngOnChanges() {
this.stateChanges.next();
}
ngOnDestroy() {
this.stateChanges.complete();
if (this._platform.isBrowser) {
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
}
if (this._platform.IOS) {
this._elementRef.nativeElement.removeEventListener('keyup', this._iOSKeyupListener);
}
}
ngDoCheck() {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
// We need to dirty-check and set the placeholder attribute ourselves, because whether it's
// present or not depends on a query which is prone to "changed after checked" errors.
this._dirtyCheckPlaceholder();
}
/** Focuses the input. */
focus(options) {
this._elementRef.nativeElement.focus(options);
}
/** Callback for the cases where the focused state of the input changes. */
_focusChanged(isFocused) {
if (isFocused !== this.focused) {
this.focused = isFocused;
this.stateChanges.next();
}
}
_onInput() {
// This is a noop function and is used to let Angular know whenever the value changes.
// Angular will run a new change detection each time the `input` event has been dispatched.
// It's necessary that Angular recognizes the value change, because when floatingLabel
// is set to false and Angular forms aren't used, the placeholder won't recognize the
// value changes and will not disappear.
// Listening to the input event wouldn't be necessary when the input is using the
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
}
/** Does some manual dirty checking on the native input `value` property. */
_dirtyCheckNativeValue() {
const newValue = this._elementRef.nativeElement.value;
if (this._previousNativeValue !== newValue) {
this._previousNativeValue = newValue;
this.stateChanges.next();
}
}
/** Does some manual dirty checking on the native input `placeholder` attribute. */
_dirtyCheckPlaceholder() {
const placeholder = this._getPlaceholder();
if (placeholder !== this._previousPlaceholder) {
const element = this._elementRef.nativeElement;
this._previousPlaceholder = placeholder;
placeholder
? element.setAttribute('placeholder', placeholder)
: element.removeAttribute('placeholder');
}
}
/** Gets the current placeholder of the form field. */
_getPlaceholder() {
return this.placeholder || null;
}
/** Make sure the input is a supported type. */
_validateType() {
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 &&
(typeof ngDevMode === 'undefined' || ngDevMode)) {
throw getMatInputUnsupportedTypeError(this._type);
}
}
/** Checks whether the input type is one of the types that are never empty. */
_isNeverEmpty() {
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
}
/** Checks whether the input is invalid based on the native validation. */
_isBadInput() {
// The `validity` property won't be present on platform-server.
let validity = this._elementRef.nativeElement.validity;
return validity && validity.badInput;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get empty() {
return (!this._isNeverEmpty() &&
!this._elementRef.nativeElement.value &&
!this._isBadInput() &&
!this.autofilled);
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get shouldLabelFloat() {
if (this._isNativeSelect) {
// For a single-selection `<select>`, the label should float when the selected option has
// a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
// overlapping the label with the options.
const selectElement = this._elementRef.nativeElement;
const firstOption = selectElement.options[0];
// On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
// -1 if the `value` is set to something, that isn't in the list of options, at a later point.
return (this.focused ||
selectElement.multiple ||
!this.empty ||
!!(selectElement.selectedIndex > -1 && firstOption && firstOption.label));
}
else {
return this.focused || !this.empty;
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
setDescribedByIds(ids) {
if (ids.length) {
this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
}
else {
this._elementRef.nativeElement.removeAttribute('aria-describedby');
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
onContainerClick() {
// Do not re-focus the input element if the element is already focused. Otherwise it can happen
// that someone clicks on a time input and the cursor resets to the "hours" field while the
// "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
if (!this.focused) {
this.focus();
}
}
/** Whether the form control is a native select that is displayed inline. */
_isInlineSelect() {
const element = this._elementRef.nativeElement;
return this._isNativeSelect && (element.multiple || element.size > 1);
}
}
MatInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInput, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: i2.NgControl, optional: true, self: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: MAT_INPUT_VALUE_ACCESSOR, optional: true, self: true }, { token: i4.AutofillMonitor }, { token: i0.NgZone }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
MatInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatInput, 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" }, 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.mdc-text-field__input": "_isInFormField", "class.mat-mdc-native-select-inline": "_isInlineSelect()", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.readonly": "readonly && !_isNativeSelect || 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"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInput, decorators: [{
type: Directive,
args: [{
selector: `input[matInput], textarea[matInput], select[matNativeControl],
input[matNativeControl], textarea[matNativeControl]`,
exportAs: 'matInput',
host: {
'class': 'mat-mdc-input-element',
// The BaseMatInput parent class adds `mat-input-element`, `mat-form-field-control` and
// `mat-form-field-autofill-control` to the CSS class list, but this should not be added for
// this MDC equivalent input.
'[class.mat-input-server]': '_isServer',
'[class.mat-mdc-form-field-textarea-control]': '_isInFormField && _isTextarea',
'[class.mat-mdc-form-field-input-control]': '_isInFormField',
'[class.mdc-text-field__input]': '_isInFormField',
'[class.mat-mdc-native-select-inline]': '_isInlineSelect()',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[id]': 'id',
'[disabled]': 'disabled',
'[required]': 'required',
'[attr.name]': 'name || null',
'[attr.readonly]': 'readonly && !_isNativeSelect || null',
// Only mark the input as invalid for assistive technology if it has a value since the
// state usually overlaps with `aria-required` when the input is empty and can be redundant.
'[attr.aria-invalid]': '(empty && required) ? null : errorState',
'[attr.aria-required]': 'required',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[attr.id]': 'id',
'(focus)': '_focusChanged(true)',
'(blur)': '_focusChanged(false)',
'(input)': '_onInput()',
},
providers: [{ provide: MatFormFieldControl, useExisting: MatInput }],
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: i2.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: i2.NgForm, decorators: [{
type: Optional
}] }, { type: i2.FormGroupDirective, decorators: [{
type: Optional
}] }, { type: i3.ErrorStateMatcher }, { type: undefined, decorators: [{
type: Optional
}, {
type: Self
}, {
type: Inject,
args: [MAT_INPUT_VALUE_ACCESSOR]
}] }, { type: i4.AutofillMonitor }, { type: i0.NgZone }, { type: i5.MatFormField, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_FORM_FIELD]
}] }]; }, propDecorators: { disabled: [{
type: Input
}], id: [{
type: Input
}], placeholder: [{
type: Input
}], name: [{
type: Input
}], required: [{
type: Input
}], type: [{
type: Input
}], errorStateMatcher: [{
type: Input
}], userAriaDescribedBy: [{
type: Input,
args: ['aria-describedby']
}], value: [{
type: Input
}], readonly: [{
type: Input
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
class MatInputModule {
}
MatInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MatInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInputModule, declarations: [MatInput], imports: [MatCommonModule, MatFormFieldModule], exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule] });
MatInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInputModule, imports: [MatCommonModule, MatFormFieldModule, MatFormFieldModule, TextFieldModule, MatCommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatInputModule, decorators: [{
type: NgModule,
args: [{
imports: [MatCommonModule, MatFormFieldModule],
exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule],
declarations: [MatInput],
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Generated bundle index. Do not edit.
*/
export { MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, getMatInputUnsupportedTypeError };
//# sourceMappingURL=input.mjs.map