@angular-mdc/web
Version:
1,145 lines (1,139 loc) • 35 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
import { Directive, ElementRef, Input, InjectionToken, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Self, Inject, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdcFloatingLabel, MdcFloatingLabelModule } from '@angular-mdc/web/floating-label';
import { MdcLineRipple, MdcLineRippleModule } from '@angular-mdc/web/line-ripple';
import { MdcNotchedOutline, MdcNotchedOutlineModule } from '@angular-mdc/web/notched-outline';
import { mixinErrorState, MdcFormFieldControl, ErrorStateMatcher, MdcFormField, MdcCharacterCounter, MdcFormFieldModule } from '@angular-mdc/web/form-field';
import { __awaiter } from 'tslib';
import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { MDCComponent } from '@angular-mdc/web/base';
import { MDCTextFieldIconFoundation, MDCTextFieldFoundation, MDCTextFieldHelperTextFoundation } from '@material/textfield';
/**
* @fileoverview added by tsickle
* Generated from: textfield/text-field-icon.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTextFieldIcon extends MDCComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
super(elementRef);
this.elementRef = elementRef;
this._leading = false;
this._trailing = false;
}
/**
* @return {?}
*/
get leading() {
return this._leading;
}
/**
* @param {?} value
* @return {?}
*/
set leading(value) {
this._leading = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get trailing() {
return this._trailing;
}
/**
* @param {?} value
* @return {?}
*/
set trailing(value) {
this._trailing = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get foundation() {
return this._foundation;
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
getAttr: (/**
* @param {?} attr
* @return {?}
*/
(attr) => this._elementRef.nativeElement.getAttribute(attr)),
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
(attr, value) => this._elementRef.nativeElement.setAttribute(attr, value)),
removeAttr: (/**
* @param {?} attr
* @return {?}
*/
(attr) => this._elementRef.nativeElement.removeAttribute(attr)),
setContent: (/**
* @return {?}
*/
() => { }),
registerInteractionHandler: (/**
* @return {?}
*/
() => { }),
deregisterInteractionHandler: (/**
* @return {?}
*/
() => { }),
notifyIconAction: (/**
* @return {?}
*/
() => { }),
};
return new MDCTextFieldIconFoundation(adapter);
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
}
}
MdcTextFieldIcon.decorators = [
{ type: Directive, args: [{
selector: '[mdcTextFieldIcon]',
exportAs: 'mdcTextFieldIcon',
host: {
'[attr.tabindex]': 'trailing ? 0 : -1',
'class': 'mdc-text-field__icon',
'[class.mdc-text-field__icon--leading]': 'leading',
'[class.mdc-text-field__icon--trailing]': 'trailing'
}
},] },
];
/** @nocollapse */
MdcTextFieldIcon.ctorParameters = () => [
{ type: ElementRef }
];
MdcTextFieldIcon.propDecorators = {
leading: [{ type: Input }],
trailing: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* Generated from: textfield/text-field.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token that can be used to configure the default options for all
* mdc-text-field usage within an app.
* @type {?}
*/
const MDC_TEXT_FIELD_DEFAULT_OPTIONS = new InjectionToken('MDC_TEXT_FIELD_DEFAULT_OPTIONS');
class MdcTextFieldBase extends MDCComponent {
/**
* @param {?} _elementRef
* @param {?} _defaultErrorStateMatcher
* @param {?} _parentForm
* @param {?} _parentFormGroup
* @param {?} ngControl
*/
constructor(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
super(_elementRef);
this._elementRef = _elementRef;
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
}
}
/** @type {?} */
const _MdcTextFieldMixinBase = mixinErrorState(MdcTextFieldBase);
/** @type {?} */
let nextUniqueId = 0;
/**
* Time in milliseconds for which to ignore mouse events, after
* receiving a touch event. Used to avoid doing double work for
* touch devices where the browser fires fake mouse events, in
* addition to touch events.
* @type {?}
*/
const MOUSE_EVENT_IGNORE_TIME = 800;
class MdcTextField extends _MdcTextFieldMixinBase {
/**
* @param {?} _platform
* @param {?} _changeDetectorRef
* @param {?} elementRef
* @param {?} _defaultErrorStateMatcher
* @param {?} _parentFormField
* @param {?} _ripple
* @param {?} ngControl
* @param {?} _parentForm
* @param {?} _parentFormGroup
* @param {?} _defaults
*/
constructor(_platform, _changeDetectorRef, elementRef, _defaultErrorStateMatcher, _parentFormField, _ripple, ngControl, _parentForm, _parentFormGroup, _defaults) {
super(elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
this._platform = _platform;
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentFormField = _parentFormField;
this._ripple = _ripple;
this.ngControl = ngControl;
this._defaults = _defaults;
this._uid = `mdc-input-${nextUniqueId++}`;
this._initialized = false;
/**
* Time in milliseconds when the last touchstart event happened.
*/
this._lastTouchStartEvent = 0;
this.controlType = 'mdc-text-field';
this.label = null;
this.placeholder = null;
this.tabIndex = 0;
this._id = '';
this._type = 'text';
this._outlined = false;
this._disabled = false;
this._required = false;
this._readonly = false;
this._fullwidth = false;
this._helperText = null;
this._useNativeValidation = true;
this._characterCounter = false;
this.change = new EventEmitter();
this.input = new EventEmitter();
this.blur = new EventEmitter();
this._onFocus = new EventEmitter();
/**
* View to model callback called when value changes
*/
this._onChange = (/**
* @return {?}
*/
() => { });
/**
* View to model callback called when text field has been touched
*/
this._onTouched = (/**
* @return {?}
*/
() => { });
if (this.ngControl) {
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
this.ngControl.valueAccessor = this;
}
if (this._parentFormField) {
_parentFormField.elementRef.nativeElement.classList.add('ngx-form-field-text-field');
}
// Force setter to be called in case id was not specified.
this.id = this.id;
this._setDefaultGlobalOptions();
}
/**
* @return {?}
*/
get id() {
return this._id;
}
/**
* @param {?} value
* @return {?}
*/
set id(value) {
this._id = value || this._uid;
}
/**
* Input type of the element.
* @return {?}
*/
get type() {
return this._type;
}
/**
* @param {?} value
* @return {?}
*/
set type(value) {
this._type = value || 'text';
}
/**
* @return {?}
*/
get outlined() {
return this._outlined;
}
/**
* @param {?} value
* @return {?}
*/
set outlined(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
this._outlined = newValue;
if (this._initialized) {
this._layout();
}
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this.setDisabledState(value);
}
/**
* @return {?}
*/
get required() {
return this._required;
}
/**
* @param {?} value
* @return {?}
*/
set required(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._required) {
this._required = newValue;
if (this._initialized) {
if (!this.valid) {
this._foundation.setValid(true);
this._changeDetectorRef.markForCheck();
}
if (this.ngControl) {
this._required ? this._getInputElement().setAttribute('required', '') :
this._getInputElement().removeAttribute('required');
}
}
}
}
/**
* @return {?}
*/
get readonly() {
return this._readonly;
}
/**
* @param {?} value
* @return {?}
*/
set readonly(value) {
this._readonly = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get fullwidth() {
return this._fullwidth;
}
/**
* @param {?} value
* @return {?}
*/
set fullwidth(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._fullwidth) {
this._fullwidth = newValue;
this.placeholder = this.fullwidth ? this.label : '';
}
}
/**
* @return {?}
*/
get helperText() {
return this._helperText;
}
/**
* @param {?} helperText
* @return {?}
*/
set helperText(helperText) {
this._helperText = helperText;
if (this._helperText) {
this._initHelperText();
this._helperText.characterCounter = this._characterCounter;
}
}
/**
* Sets the Text Field valid or invalid.
* @return {?}
*/
get valid() {
return this._valid;
}
/**
* @param {?} value
* @return {?}
*/
set valid(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._valid) {
this._valid = value;
this._foundation.setValid(newValue);
}
}
/**
* Enables or disables the use of native validation. Use this for custom validation.
* @return {?}
*/
get useNativeValidation() {
return this._useNativeValidation;
}
/**
* @param {?} value
* @return {?}
*/
set useNativeValidation(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._useNativeValidation) {
this._useNativeValidation = newValue;
this._foundation.setUseNativeValidation(this._useNativeValidation);
}
}
/**
* @return {?}
*/
get characterCounter() {
return this._characterCounter;
}
/**
* @param {?} value
* @return {?}
*/
set characterCounter(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._characterCounter) {
this._characterCounter = newValue;
if (this.helperText) {
this.helperText.characterCounter = this._characterCounter;
}
}
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} newValue
* @return {?}
*/
set value(newValue) {
if (!this._initialized) {
this.ngControl ? this._initializeValue() : this._initializeValue(newValue);
}
else {
this.setValue(newValue, true);
}
}
/**
* @return {?}
*/
get textarea() {
return this._getHostElement().nodeName.toLowerCase() === 'mdc-textarea';
}
/**
* @return {?}
*/
get leadingIcon() {
var _a;
return (_a = this._icons) === null || _a === void 0 ? void 0 : _a.find((/**
* @param {?} icon
* @return {?}
*/
icon => icon.leading));
}
/**
* @return {?}
*/
get trailingIcon() {
var _a;
return (_a = this._icons) === null || _a === void 0 ? void 0 : _a.find((/**
* @param {?} icon
* @return {?}
*/
icon => icon.trailing));
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this._getRootAdapterMethods()), this._getInputAdapterMethods()), this._getLabelAdapterMethods()), this._getLineRippleAdapterMethods()), this._getOutlineAdapterMethods());
return new MDCTextFieldFoundation(adapter, this._getFoundationMap());
}
/**
* @private
* @return {?}
*/
_getRootAdapterMethods() {
return {
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.remove(className)),
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.contains(className))
};
}
/**
* @private
* @return {?}
*/
_getInputAdapterMethods() {
return {
getNativeInput: (/**
* @return {?}
*/
() => {
var _a;
return {
maxLength: (_a = this.maxlength, (_a !== null && _a !== void 0 ? _a : 0)),
type: this._type,
value: this._platform.isBrowser ? this._input.nativeElement.value : this._value,
disabled: this._disabled,
validity: {
valid: this._isValid(),
badInput: this._platform.isBrowser ? this._input.nativeElement.validity.badInput : false
}
};
}),
isFocused: (/**
* @return {?}
*/
() => this._platform.isBrowser ? document.activeElement === this._getInputElement() : false),
registerInputInteractionHandler: (/**
* @return {?}
*/
() => { }),
deregisterInputInteractionHandler: (/**
* @return {?}
*/
() => { })
};
}
/**
* @private
* @return {?}
*/
_getLabelAdapterMethods() {
return {
shakeLabel: (/**
* @param {?} shouldShake
* @return {?}
*/
(shouldShake) => this._getFloatingLabel().shake(shouldShake)),
floatLabel: (/**
* @param {?} shouldFloat
* @return {?}
*/
(shouldFloat) => this._getFloatingLabel().float(shouldFloat)),
hasLabel: (/**
* @return {?}
*/
() => this._hasFloatingLabel()),
getLabelWidth: (/**
* @return {?}
*/
() => this._hasFloatingLabel() ? this._getFloatingLabel().getWidth() : 0)
};
}
/**
* @private
* @return {?}
*/
_getLineRippleAdapterMethods() {
return {
activateLineRipple: (/**
* @return {?}
*/
() => { var _a; return (_a = this._lineRipple) === null || _a === void 0 ? void 0 : _a.activate(); }),
deactivateLineRipple: (/**
* @return {?}
*/
() => { var _a; return (_a = this._lineRipple) === null || _a === void 0 ? void 0 : _a.deactivate(); }),
setLineRippleTransformOrigin: (/**
* @param {?} normalizedX
* @return {?}
*/
(normalizedX) => { var _a; return (_a = this._lineRipple) === null || _a === void 0 ? void 0 : _a.setRippleCenter(normalizedX); })
};
}
/**
* @private
* @return {?}
*/
_getOutlineAdapterMethods() {
return {
hasOutline: (/**
* @return {?}
*/
() => !!this._notchedOutline),
notchOutline: (/**
* @param {?} labelWidth
* @return {?}
*/
(labelWidth) => (/** @type {?} */ (this._notchedOutline)).notch(labelWidth)),
closeOutline: (/**
* @return {?}
*/
() => (/** @type {?} */ (this._notchedOutline)).closeNotch())
};
}
/**
* Returns a map of all subcomponents to subfoundations.
* @private
* @return {?}
*/
_getFoundationMap() {
var _a, _b, _c, _d, _e;
return {
helperText: (_a = this._helperText) === null || _a === void 0 ? void 0 : _a.foundation,
characterCounter: (_c = (_b = this.helperText) === null || _b === void 0 ? void 0 : _b._characterCounterElement) === null || _c === void 0 ? void 0 : _c.foundation,
leadingIcon: (_d = this.leadingIcon) === null || _d === void 0 ? void 0 : _d.foundation,
trailingIcon: (_e = this.trailingIcon) === null || _e === void 0 ? void 0 : _e.foundation
};
}
/**
* @return {?}
*/
_asyncBuildFoundation() {
return __awaiter(this, void 0, void 0, function* () {
this._foundation = this.getDefaultFoundation();
});
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.init();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
this._foundation.destroy();
}
/**
* @return {?}
*/
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();
}
}
/**
* @return {?}
*/
init() {
this._initialized = true;
this._asyncBuildFoundation()
.then((/**
* @return {?}
*/
() => {
var _a, _b, _c, _d, _e;
this._foundation.init();
if (!this.fullwidth && !this.outlined && !this.textarea) {
this._ripple = new MdcRipple(this.elementRef);
this._ripple.init();
}
else {
(_a = this._ripple) === null || _a === void 0 ? void 0 : _a.destroy();
}
this._checkCustomValidity();
(_c = (_b = this.leadingIcon) === null || _b === void 0 ? void 0 : _b.foundation) === null || _c === void 0 ? void 0 : _c.init();
(_e = (_d = this.trailingIcon) === null || _d === void 0 ? void 0 : _d.foundation) === null || _e === void 0 ? void 0 : _e.init();
this.disabled = this._input.nativeElement.disabled;
}));
}
/**
* @return {?}
*/
onTextFieldInteraction() {
if (this._initialized) {
this._foundation.handleTextFieldInteraction();
}
}
/**
* @param {?} evt
* @return {?}
*/
onInputInteraction(evt) {
if (evt instanceof MouseEvent) {
/** @type {?} */
const isSyntheticEvent = this._lastTouchStartEvent &&
Date.now() < this._lastTouchStartEvent + MOUSE_EVENT_IGNORE_TIME;
if (isSyntheticEvent) {
return;
}
}
else {
this._lastTouchStartEvent = Date.now();
}
this._foundation.setTransformOrigin(evt);
}
/**
* @param {?} evt
* @return {?}
*/
onInput(evt) {
/** @type {?} */
const value = ((/** @type {?} */ (evt.target))).value;
this.setValue(value, true);
this._foundation.handleInput();
this.input.emit(value);
evt.stopPropagation();
}
/**
* @return {?}
*/
onFocus() {
if (this._initialized) {
this._foundation.activateFocus();
this._onFocus.emit(true);
}
}
/**
* @param {?} evt
* @return {?}
*/
onChange(evt) {
/** @type {?} */
const value = ((/** @type {?} */ (evt.target))).value;
this.setValue(value, true);
this.change.emit(value);
evt.stopPropagation();
}
/**
* @return {?}
*/
onBlur() {
this._onTouched();
this._foundation.deactivateFocus();
this.blur.emit(this.value);
this._onFocus.emit(false);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.setValue(value);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @private
* @param {?=} value
* @return {?}
*/
_initializeValue(value) {
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then((/**
* @return {?}
*/
() => {
this.setValue(this.ngControl ? this.ngControl.value : value);
}));
}
/**
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
setValue(value, isUserInput) {
/** @type {?} */
const newValue = this.type === 'number' ? coerceNumberProperty(value, null) : value;
if (this._value === newValue) {
// Reset validity for numeric form inputs
if (newValue === null) {
this.valid = true;
}
return;
}
this._value = newValue !== undefined ? newValue : null;
if (this._getInputElement().value !== this._value) {
this._getInputElement().value = this._value;
}
this._foundation.setValue(this._value || '');
if (isUserInput) {
this._onChange(this._value);
}
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
isBadInput() {
/** @type {?} */
const validity = this._getInputElement().validity;
return validity && validity.badInput;
}
/**
* @return {?}
*/
focus() {
var _a;
(_a = this._getInputElement()) === null || _a === void 0 ? void 0 : _a.focus();
}
/**
* Initializes Text Field's internal state based on the environment state
* @private
* @return {?}
*/
_layout() {
this.destroy();
this.init();
this._changeDetectorRef.markForCheck();
setTimeout((/**
* @return {?}
*/
() => {
if (this._outlined) {
this._foundation.notchOutline(this._foundation.shouldFloat);
}
if (this._hasFloatingLabel()) {
this._getFloatingLabel().float(this._foundation.shouldFloat);
}
}));
}
/**
* Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
/** @type {?} */
const newValue = coerceBooleanProperty(isDisabled);
if (newValue !== this._disabled) {
this._disabled = newValue;
if (this._initialized) {
this._foundation.setDisabled(newValue);
}
this._changeDetectorRef.markForCheck();
}
}
/**
* Set the default options here.
* @private
* @return {?}
*/
_setDefaultGlobalOptions() {
if (this._defaults && this._defaults.outlined) {
this._outlined = this._defaults.outlined;
}
}
/**
* @private
* @return {?}
*/
_checkCustomValidity() {
Promise.resolve().then((/**
* @return {?}
*/
() => {
if (this._valid !== undefined) {
this._foundation.setValid(this._valid);
}
}));
}
/**
* @private
* @return {?}
*/
_initHelperText() {
/** @type {?} */
const helper = this.helperText;
if (helper) {
helper.addHelperTextClass(this.controlType);
helper.init(MDCTextFieldHelperTextFoundation);
}
}
/**
* Override MdcTextFieldBase destroy method
* @return {?}
*/
destroy() {
var _a, _b;
this._initialized = false;
(_a = this._lineRipple) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this._ripple) === null || _b === void 0 ? void 0 : _b.destroy();
}
/**
* @private
* @return {?}
*/
_isValid() {
if (this.ngControl) {
return !this.errorState;
}
return this._valid ? this._valid : this._platform.isBrowser ?
this._input.nativeElement.validity.valid : true;
}
/**
* @private
* @return {?}
*/
_hasFloatingLabel() {
return this.label && (this._floatingLabel || this._notchedOutline) ? true : false;
}
/**
* @private
* @return {?}
*/
_getFloatingLabel() {
return this._floatingLabel || (/** @type {?} */ (this._notchedOutline)).floatingLabel;
}
/**
* @private
* @return {?}
*/
_getInputElement() {
return this._input.nativeElement;
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcTextField.decorators = [
{ type: Component, args: [{selector: 'mdc-text-field',
exportAs: 'mdcTextField',
host: {
'class': 'mdc-text-field',
'[class.mdc-text-field--disabled]': 'disabled',
'[class.mdc-text-field--outlined]': 'outlined',
'[class.mdc-text-field--fullwidth]': 'fullwidth',
'[class.mdc-text-field--with-leading-icon]': 'leadingIcon',
'[class.mdc-text-field--with-trailing-icon]': 'trailingIcon',
'[class.mdc-text-field--no-label]': '!label || label && fullwidth',
'[class.mdc-text-field--invalid]': 'errorState',
'(click)': 'onTextFieldInteraction()',
'(keydown)': 'onTextFieldInteraction()'
},
template: `
<div class="mdc-text-field__ripple"></div>
<ng-content *ngIf="leadingIcon || trailingIcon"></ng-content>
<input #inputElement class="mdc-text-field__input"
[id]="id"
[type]="type"
[tabindex]="tabIndex"
[attr.name]="name"
[attr.aria-invalid]="errorState"
[attr.autocomplete]="autocomplete"
[attr.pattern]="pattern"
[attr.placeholder]="placeholder"
[attr.maxlength]="maxlength"
[attr.minlength]="minlength"
[attr.max]="max"
[attr.min]="min"
[attr.size]="size"
[attr.step]="step"
[disabled]="disabled"
[readonly]="readonly"
[required]="required"
(mousedown)="onInputInteraction($event)"
(touchstart)="onInputInteraction($event)"
(focus)="onFocus()"
(input)="onInput($event)"
(change)="onChange($event)"
(blur)="onBlur()" />
<ng-content></ng-content>
<label mdcFloatingLabel [for]="id" *ngIf="!this.placeholder && !outlined">{{label}}</label>
<mdc-line-ripple *ngIf="!this.outlined && !this.textarea"></mdc-line-ripple>
<mdc-notched-outline *ngIf="outlined" [label]="label" [for]="id"></mdc-notched-outline>`,
providers: [
MdcRipple,
{ provide: MdcFormFieldControl, useExisting: MdcTextField }
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcTextField.ctorParameters = () => [
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: ErrorStateMatcher },
{ type: MdcFormField, decorators: [{ type: Optional }] },
{ type: MdcRipple, decorators: [{ type: Optional }] },
{ type: NgControl, decorators: [{ type: Self }, { type: Optional }] },
{ type: NgForm, decorators: [{ type: Optional }] },
{ type: FormGroupDirective, decorators: [{ type: Optional }] },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MDC_TEXT_FIELD_DEFAULT_OPTIONS,] }] }
];
MdcTextField.propDecorators = {
name: [{ type: Input }],
label: [{ type: Input }],
maxlength: [{ type: Input }],
minlength: [{ type: Input }],
pattern: [{ type: Input }],
autocomplete: [{ type: Input }],
max: [{ type: Input }],
min: [{ type: Input }],
size: [{ type: Input }],
step: [{ type: Input }],
placeholder: [{ type: Input }],
tabIndex: [{ type: Input }],
id: [{ type: Input }],
type: [{ type: Input }],
outlined: [{ type: Input }],
disabled: [{ type: Input }],
required: [{ type: Input }],
readonly: [{ type: Input }],
fullwidth: [{ type: Input }],
helperText: [{ type: Input }],
valid: [{ type: Input }],
useNativeValidation: [{ type: Input }],
characterCounter: [{ type: Input }],
value: [{ type: Input }],
errorStateMatcher: [{ type: Input }],
change: [{ type: Output }],
input: [{ type: Output }],
blur: [{ type: Output }],
_onFocus: [{ type: Output, args: ['focus',] }],
_input: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
_lineRipple: [{ type: ViewChild, args: [MdcLineRipple, { static: false },] }],
_notchedOutline: [{ type: ViewChild, args: [MdcNotchedOutline, { static: false },] }],
_floatingLabel: [{ type: ViewChild, args: [MdcFloatingLabel, { static: false },] }],
_icons: [{ type: ContentChildren, args: [MdcTextFieldIcon, { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: textfield/textarea.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTextarea extends MdcTextField {
}
MdcTextarea.decorators = [
{ type: Component, args: [{selector: 'mdc-textarea',
exportAs: 'mdcTextarea',
host: {
'class': 'mdc-text-field',
'[class.mdc-text-field--textarea]': 'true',
'[class.mdc-text-field--no-label]': '!label',
'[class.mdc-text-field--fullwidth]': 'fullwidth',
'[class.mdc-text-field--invalid]': 'errorState'
},
template: `
<div mdcCharacterCounter *ngIf="characterCounter"></div>
<textarea #inputElement class="mdc-text-field__input"
[id]="id"
[rows]="rows"
[cols]="cols"
[tabindex]="tabIndex"
[attr.name]="name"
[attr.aria-invalid]="errorState"
[attr.maxlength]="maxlength"
[attr.minlength]="minlength"
[disabled]="disabled"
[required]="required"
[readonly]="readonly"
(mousedown)="onInputInteraction($event)"
(touchstart)="onInputInteraction($event)"
(focus)="onFocus()"
(input)="onInput($event)"
(change)="onChange($event)"
(blur)="onBlur()"></textarea>
<mdc-notched-outline [label]="label" [for]="id"></mdc-notched-outline>`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
MdcTextarea.propDecorators = {
rows: [{ type: Input }],
cols: [{ type: Input }],
_characterCounterElement: [{ type: ViewChild, args: [MdcCharacterCounter, { static: false },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: textfield/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const TEXTFIELD_DECLARATIONS = [
MdcTextarea,
MdcTextField,
MdcTextFieldIcon
];
class MdcTextFieldModule {
}
MdcTextFieldModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcFormFieldModule,
MdcLineRippleModule,
MdcFloatingLabelModule,
MdcNotchedOutlineModule
],
exports: [
MdcFormFieldModule,
TEXTFIELD_DECLARATIONS
],
declarations: TEXTFIELD_DECLARATIONS
},] },
];
export { MDC_TEXT_FIELD_DEFAULT_OPTIONS, MdcTextField, MdcTextFieldIcon, MdcTextFieldModule, MdcTextarea };
//# sourceMappingURL=textfield.js.map