You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
619 lines
30 KiB
619 lines
30 KiB
import { CdkTextareaAutosize, AutofillMonitor, TextFieldModule } from '@angular/cdk/text-field';
|
|
import { Directive, Input, InjectionToken, ElementRef, Optional, Self, Inject, NgZone, HostListener, NgModule } from '@angular/core';
|
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
import { getSupportedInputTypes, Platform } from '@angular/cdk/platform';
|
|
import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
|
|
import { mixinErrorState, ErrorStateMatcher, MatCommonModule } from '@angular/material/core';
|
|
import { MatFormFieldControl, MatFormField, MAT_FORM_FIELD, 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
|
|
*/
|
|
/**
|
|
* Directive to automatically resize a textarea to fit its content.
|
|
* @deprecated Use `cdkTextareaAutosize` from `@angular/cdk/text-field` instead.
|
|
* @breaking-change 8.0.0
|
|
*/
|
|
import * as ɵngcc0 from '@angular/core';
|
|
import * as ɵngcc1 from '@angular/cdk/platform';
|
|
import * as ɵngcc2 from '@angular/forms';
|
|
import * as ɵngcc3 from '@angular/material/core';
|
|
import * as ɵngcc4 from '@angular/cdk/text-field';
|
|
import * as ɵngcc5 from '@angular/material/form-field';
|
|
class MatTextareaAutosize extends CdkTextareaAutosize {
|
|
get matAutosizeMinRows() { return this.minRows; }
|
|
set matAutosizeMinRows(value) { this.minRows = value; }
|
|
get matAutosizeMaxRows() { return this.maxRows; }
|
|
set matAutosizeMaxRows(value) { this.maxRows = value; }
|
|
get matAutosize() { return this.enabled; }
|
|
set matAutosize(value) { this.enabled = value; }
|
|
get matTextareaAutosize() { return this.enabled; }
|
|
set matTextareaAutosize(value) { this.enabled = value; }
|
|
}
|
|
MatTextareaAutosize.ɵfac = /*@__PURE__*/ function () { let ɵMatTextareaAutosize_BaseFactory; return function MatTextareaAutosize_Factory(t) { return (ɵMatTextareaAutosize_BaseFactory || (ɵMatTextareaAutosize_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(MatTextareaAutosize)))(t || MatTextareaAutosize); }; }();
|
|
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] });
|
|
MatTextareaAutosize.propDecorators = {
|
|
matAutosizeMinRows: [{ type: Input }],
|
|
matAutosizeMaxRows: [{ type: Input }],
|
|
matAutosize: [{ type: Input, args: ['mat-autosize',] }],
|
|
matTextareaAutosize: [{ type: Input }]
|
|
};
|
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatTextareaAutosize, [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: 'textarea[mat-autosize], textarea[matTextareaAutosize]',
|
|
exportAs: 'matTextareaAutosize',
|
|
inputs: ['cdkAutosizeMinRows', 'cdkAutosizeMaxRows'],
|
|
host: {
|
|
'class': 'cdk-textarea-autosize mat-autosize',
|
|
// Textarea elements that have the directive applied should have a single row by default.
|
|
// Browsers normally show two rows by default and therefore this limits the minRows binding.
|
|
'rows': '1'
|
|
}
|
|
}]
|
|
}], null, { matAutosizeMinRows: [{
|
|
type: Input
|
|
}], matAutosizeMaxRows: [{
|
|
type: Input
|
|
}], matAutosize: [{
|
|
type: Input,
|
|
args: ['mat-autosize']
|
|
}], matTextareaAutosize: [{
|
|
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
|
|
*/
|
|
/** @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,
|
|
/** @docs-private */
|
|
ngControl) {
|
|
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
|
|
this._parentForm = _parentForm;
|
|
this._parentFormGroup = _parentFormGroup;
|
|
this.ngControl = ngControl;
|
|
}
|
|
});
|
|
/** Directive that allows a native input to work inside a `MatFormField`. */
|
|
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._required = false;
|
|
this._type = 'text';
|
|
this._readonly = false;
|
|
this._neverEmptyInputTypes = [
|
|
'date',
|
|
'datetime',
|
|
'datetime-local',
|
|
'month',
|
|
'time',
|
|
'week'
|
|
].filter(t => getSupportedInputTypes().has(t));
|
|
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', (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);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
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; }
|
|
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);
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
|
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
|
// ViewEngine they're overwritten.
|
|
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
|
/** Callback for the cases where the focused state of the input changes. */
|
|
// tslint:disable:no-host-decorator-in-concrete
|
|
// tslint:enable:no-host-decorator-in-concrete
|
|
_focusChanged(isFocused) {
|
|
if (isFocused !== this.focused) {
|
|
this.focused = isFocused;
|
|
this.stateChanges.next();
|
|
}
|
|
}
|
|
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
|
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
|
// ViewEngine they're overwritten.
|
|
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
|
// tslint:disable-next-line:no-host-decorator-in-concrete
|
|
_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 `placeholder` attribute. */
|
|
_dirtyCheckPlaceholder() {
|
|
var _a, _b;
|
|
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
|
|
// screen readers will read it out twice: once from the label and once from the attribute.
|
|
// TODO: can be removed once we get rid of the `legacy` style for the form field, because it's
|
|
// the only one that supports promoting the placeholder to a label.
|
|
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;
|
|
if (placeholder !== this._previousPlaceholder) {
|
|
const element = this._elementRef.nativeElement;
|
|
this._previousPlaceholder = placeholder;
|
|
placeholder ?
|
|
element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
|
|
}
|
|
}
|
|
/** 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();
|
|
}
|
|
}
|
|
/** 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 = 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)); };
|
|
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: 11, hostBindings: function MatInput_HostBindings(rf, ctx) { if (rf & 1) {
|
|
ɵ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(); });
|
|
} if (rf & 2) {
|
|
ɵngcc0.ɵɵhostProperty("disabled", ctx.disabled)("required", ctx.required);
|
|
ɵ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);
|
|
ɵngcc0.ɵɵclassProp("mat-input-server", ctx._isServer)("mat-native-select-inline", ctx._isInlineSelect());
|
|
} }, 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] });
|
|
MatInput.ctorParameters = () => [
|
|
{ type: ElementRef },
|
|
{ type: Platform },
|
|
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }] },
|
|
{ type: NgForm, decorators: [{ type: Optional }] },
|
|
{ type: FormGroupDirective, decorators: [{ type: Optional }] },
|
|
{ type: ErrorStateMatcher },
|
|
{ type: undefined, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [MAT_INPUT_VALUE_ACCESSOR,] }] },
|
|
{ type: AutofillMonitor },
|
|
{ type: NgZone },
|
|
{ type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] }
|
|
];
|
|
MatInput.propDecorators = {
|
|
disabled: [{ type: Input }],
|
|
id: [{ type: Input }],
|
|
placeholder: [{ type: Input }],
|
|
required: [{ type: Input }],
|
|
type: [{ type: Input }],
|
|
errorStateMatcher: [{ type: Input }],
|
|
userAriaDescribedBy: [{ type: Input, args: ['aria-describedby',] }],
|
|
value: [{ type: Input }],
|
|
readonly: [{ type: Input }],
|
|
_focusChanged: [{ type: HostListener, args: ['focus', ['true'],] }, { type: HostListener, args: ['blur', ['false'],] }],
|
|
_onInput: [{ type: HostListener, args: ['input',] }]
|
|
};
|
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatInput, [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: `input[matInput], textarea[matInput], select[matNativeControl],
|
|
input[matNativeControl], textarea[matNativeControl]`,
|
|
exportAs: 'matInput',
|
|
host: {
|
|
/**
|
|
* @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
|
|
*/
|
|
'class': 'mat-input-element mat-form-field-autofill-control',
|
|
'[class.mat-input-server]': '_isServer',
|
|
// 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',
|
|
// At the time of writing, we have a lot of customer tests that look up the input based on its
|
|
// placeholder. Since we sometimes omit the placeholder attribute from the DOM to prevent screen
|
|
// readers from reading it twice, we have to keep it somewhere in the DOM for the lookup.
|
|
'[attr.data-placeholder]': 'placeholder',
|
|
'[disabled]': 'disabled',
|
|
'[required]': 'required',
|
|
'[attr.readonly]': 'readonly && !_isNativeSelect || null',
|
|
'[class.mat-native-select-inline]': '_isInlineSelect()',
|
|
// 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'
|
|
},
|
|
providers: [{ provide: MatFormFieldControl, useExisting: MatInput }]
|
|
}]
|
|
}], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc1.Platform }, { type: ɵngcc2.NgControl, decorators: [{
|
|
type: Optional
|
|
}, {
|
|
type: Self
|
|
}] }, { type: ɵngcc2.NgForm, decorators: [{
|
|
type: Optional
|
|
}] }, { type: ɵngcc2.FormGroupDirective, decorators: [{
|
|
type: Optional
|
|
}] }, { type: ɵngcc3.ErrorStateMatcher }, { type: undefined, decorators: [{
|
|
type: Optional
|
|
}, {
|
|
type: Self
|
|
}, {
|
|
type: Inject,
|
|
args: [MAT_INPUT_VALUE_ACCESSOR]
|
|
}] }, { type: ɵngcc4.AutofillMonitor }, { type: ɵngcc0.NgZone }, { type: ɵngcc5.MatFormField, decorators: [{
|
|
type: Optional
|
|
}, {
|
|
type: Inject,
|
|
args: [MAT_FORM_FIELD]
|
|
}] }]; }, { id: [{
|
|
type: Input
|
|
}], disabled: [{
|
|
type: Input
|
|
}], required: [{
|
|
type: Input
|
|
}], type: [{
|
|
type: Input
|
|
}], value: [{
|
|
type: Input
|
|
}], readonly: [{
|
|
type: Input
|
|
}],
|
|
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
|
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
|
// ViewEngine they're overwritten.
|
|
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
|
/** Callback for the cases where the focused state of the input changes. */
|
|
// tslint:disable:no-host-decorator-in-concrete
|
|
// tslint:enable:no-host-decorator-in-concrete
|
|
_focusChanged: [{
|
|
type: HostListener,
|
|
args: ['focus', ['true']]
|
|
}, {
|
|
type: HostListener,
|
|
args: ['blur', ['false']]
|
|
}],
|
|
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
|
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
|
// ViewEngine they're overwritten.
|
|
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
|
// tslint:disable-next-line:no-host-decorator-in-concrete
|
|
_onInput: [{
|
|
type: HostListener,
|
|
args: ['input']
|
|
}], placeholder: [{
|
|
type: Input
|
|
}], errorStateMatcher: [{
|
|
type: Input
|
|
}], userAriaDescribedBy: [{
|
|
type: Input,
|
|
args: ['aria-describedby']
|
|
}] }); })();
|
|
|
|
/**
|
|
* @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 = function MatInputModule_Factory(t) { return new (t || MatInputModule)(); };
|
|
MatInputModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatInputModule });
|
|
MatInputModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ providers: [ErrorStateMatcher], imports: [[
|
|
TextFieldModule,
|
|
MatFormFieldModule,
|
|
MatCommonModule,
|
|
], TextFieldModule,
|
|
// We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
|
// be used together with `MatFormField`.
|
|
MatFormFieldModule] });
|
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatInputModule, [{
|
|
type: NgModule,
|
|
args: [{
|
|
declarations: [MatInput, MatTextareaAutosize],
|
|
imports: [
|
|
TextFieldModule,
|
|
MatFormFieldModule,
|
|
MatCommonModule,
|
|
],
|
|
exports: [
|
|
TextFieldModule,
|
|
// We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
|
// be used together with `MatFormField`.
|
|
MatFormFieldModule,
|
|
MatInput,
|
|
MatTextareaAutosize,
|
|
],
|
|
providers: [ErrorStateMatcher]
|
|
}]
|
|
}], null, null); })();
|
|
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatInputModule, { declarations: function () { return [MatInput, MatTextareaAutosize]; }, imports: function () { return [TextFieldModule,
|
|
MatFormFieldModule,
|
|
MatCommonModule]; }, exports: function () { return [TextFieldModule,
|
|
// We re-export the `MatFormFieldModule` since `MatInput` will almost always
|
|
// be used together with `MatFormField`.
|
|
MatFormFieldModule, MatInput, MatTextareaAutosize]; } }); })();
|
|
|
|
/**
|
|
* @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, MatTextareaAutosize, getMatInputUnsupportedTypeError };
|
|
|
|
//# sourceMappingURL=input.js.map
|