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'; /** @docs-private */ function getMatInputUnsupportedTypeError(type) { return Error(`Input type "${type}" isn't supported by matInput.`); } /** * 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'); // 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 { /** * Implemented as part of MatFormFieldControl. * @docs-private */ get 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); } 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'; } } 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(); // Since the input isn't a `ControlValueAccessor`, we don't have a good way of knowing when // the disabled state has changed. We can't use the `ngControl.statusChanges`, because it // won't fire if the input is disabled with `emitEvents = false`, despite the input becoming // disabled. if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled) { this.disabled = this.ngControl.disabled; this.stateChanges.next(); } } // 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 ``, 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); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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 }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 }] } }); class MatInputModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: MatInputModule, declarations: [MatInput], imports: [MatCommonModule, MatFormFieldModule], exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatInputModule, imports: [MatCommonModule, MatFormFieldModule, MatFormFieldModule, TextFieldModule, MatCommonModule] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatInputModule, decorators: [{ type: NgModule, args: [{ imports: [MatCommonModule, MatFormFieldModule], exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule], declarations: [MatInput], }] }] }); /** * Generated bundle index. Do not edit. */ export { MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, getMatInputUnsupportedTypeError }; //# sourceMappingURL=input.mjs.map