@angular-mdc/web
Version:
1,467 lines (1,427 loc) • 53 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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular-mdc/web/floating-label'), require('@angular-mdc/web/line-ripple'), require('@angular-mdc/web/notched-outline'), require('@angular-mdc/web/form-field'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('@angular-mdc/web/ripple'), require('@angular-mdc/web/base'), require('@material/textfield')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/textfield', ['exports', '@angular/core', '@angular/common', '@angular-mdc/web/floating-label', '@angular-mdc/web/line-ripple', '@angular-mdc/web/notched-outline', '@angular-mdc/web/form-field', '@angular/forms', '@angular/cdk/coercion', '@angular/cdk/platform', '@angular-mdc/web/ripple', '@angular-mdc/web/base', '@material/textfield'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.textfield = {}), global.ng.core, global.ng.common, global.ng.web.floatingLabel, global.ng.web.lineRipple, global.ng.web.notchedOutline, global.ng.web.formField, global.ng.forms, global.ng.cdk.coercion, global.ng.cdk.platform, global.ng.web.ripple, global.ng.web.base, global.mdc.textfield));
}(this, (function (exports, core, common, floatingLabel, lineRipple, notchedOutline, formField, forms, coercion, platform, ripple, base, textfield) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var _assign = function __assign() {
_assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return _assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
/**
* @fileoverview added by tsickle
* Generated from: textfield/text-field-icon.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcTextFieldIcon = /** @class */ (function (_super) {
__extends(MdcTextFieldIcon, _super);
function MdcTextFieldIcon(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
_this._leading = false;
_this._trailing = false;
return _this;
}
Object.defineProperty(MdcTextFieldIcon.prototype, "leading", {
get: /**
* @return {?}
*/
function () {
return this._leading;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._leading = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextFieldIcon.prototype, "trailing", {
get: /**
* @return {?}
*/
function () {
return this._trailing;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._trailing = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextFieldIcon.prototype, "foundation", {
get: /**
* @return {?}
*/
function () {
return this._foundation;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcTextFieldIcon.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
getAttr: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return _this._elementRef.nativeElement.getAttribute(attr); }),
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return _this._elementRef.nativeElement.setAttribute(attr, value); }),
removeAttr: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return _this._elementRef.nativeElement.removeAttribute(attr); }),
setContent: (/**
* @return {?}
*/
function () { }),
registerInteractionHandler: (/**
* @return {?}
*/
function () { }),
deregisterInteractionHandler: (/**
* @return {?}
*/
function () { }),
notifyIconAction: (/**
* @return {?}
*/
function () { }),
};
return new textfield.MDCTextFieldIconFoundation(adapter);
};
/**
* @return {?}
*/
MdcTextFieldIcon.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
MdcTextFieldIcon.decorators = [
{ type: core.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 = function () { return [
{ type: core.ElementRef }
]; };
MdcTextFieldIcon.propDecorators = {
leading: [{ type: core.Input }],
trailing: [{ type: core.Input }]
};
return MdcTextFieldIcon;
}(base.MDCComponent));
/**
* @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 {?}
*/
var MDC_TEXT_FIELD_DEFAULT_OPTIONS = new core.InjectionToken('MDC_TEXT_FIELD_DEFAULT_OPTIONS');
var MdcTextFieldBase = /** @class */ (function (_super) {
__extends(MdcTextFieldBase, _super);
function MdcTextFieldBase(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
_this._parentForm = _parentForm;
_this._parentFormGroup = _parentFormGroup;
_this.ngControl = ngControl;
return _this;
}
return MdcTextFieldBase;
}(base.MDCComponent));
/** @type {?} */
var _MdcTextFieldMixinBase = formField.mixinErrorState(MdcTextFieldBase);
/** @type {?} */
var 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 {?}
*/
var MOUSE_EVENT_IGNORE_TIME = 800;
var MdcTextField = /** @class */ (function (_super) {
__extends(MdcTextField, _super);
function MdcTextField(_platform, _changeDetectorRef, elementRef, _defaultErrorStateMatcher, _parentFormField, _ripple, ngControl, _parentForm, _parentFormGroup, _defaults) {
var _this = _super.call(this, elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_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 core.EventEmitter();
_this.input = new core.EventEmitter();
_this.blur = new core.EventEmitter();
_this._onFocus = new core.EventEmitter();
/**
* View to model callback called when value changes
*/
_this._onChange = (/**
* @return {?}
*/
function () { });
/**
* View to model callback called when text field has been touched
*/
_this._onTouched = (/**
* @return {?}
*/
function () { });
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 _this;
}
Object.defineProperty(MdcTextField.prototype, "id", {
get: /**
* @return {?}
*/
function () {
return this._id;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._id = value || this._uid;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "type", {
/** Input type of the element. */
get: /**
* Input type of the element.
* @return {?}
*/
function () {
return this._type;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._type = value || 'text';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "outlined", {
get: /**
* @return {?}
*/
function () {
return this._outlined;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
this._outlined = newValue;
if (this._initialized) {
this._layout();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabledState(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "required", {
get: /**
* @return {?}
*/
function () {
return this._required;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.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');
}
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "readonly", {
get: /**
* @return {?}
*/
function () {
return this._readonly;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._readonly = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "fullwidth", {
get: /**
* @return {?}
*/
function () {
return this._fullwidth;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._fullwidth) {
this._fullwidth = newValue;
this.placeholder = this.fullwidth ? this.label : '';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "helperText", {
get: /**
* @return {?}
*/
function () {
return this._helperText;
},
set: /**
* @param {?} helperText
* @return {?}
*/
function (helperText) {
this._helperText = helperText;
if (this._helperText) {
this._initHelperText();
this._helperText.characterCounter = this._characterCounter;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "valid", {
/** Sets the Text Field valid or invalid. */
get: /**
* Sets the Text Field valid or invalid.
* @return {?}
*/
function () {
return this._valid;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._valid) {
this._valid = value;
this._foundation.setValid(newValue);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "useNativeValidation", {
/** Enables or disables the use of native validation. Use this for custom validation. */
get: /**
* Enables or disables the use of native validation. Use this for custom validation.
* @return {?}
*/
function () {
return this._useNativeValidation;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._useNativeValidation) {
this._useNativeValidation = newValue;
this._foundation.setUseNativeValidation(this._useNativeValidation);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "characterCounter", {
get: /**
* @return {?}
*/
function () {
return this._characterCounter;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._characterCounter) {
this._characterCounter = newValue;
if (this.helperText) {
this.helperText.characterCounter = this._characterCounter;
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} newValue
* @return {?}
*/
function (newValue) {
if (!this._initialized) {
this.ngControl ? this._initializeValue() : this._initializeValue(newValue);
}
else {
this.setValue(newValue, true);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "textarea", {
get: /**
* @return {?}
*/
function () {
return this._getHostElement().nodeName.toLowerCase() === 'mdc-textarea';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "leadingIcon", {
get: /**
* @return {?}
*/
function () {
var _a;
return (_a = this._icons) === null || _a === void 0 ? void 0 : _a.find((/**
* @param {?} icon
* @return {?}
*/
function (icon) { return icon.leading; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTextField.prototype, "trailingIcon", {
get: /**
* @return {?}
*/
function () {
var _a;
return (_a = this._icons) === null || _a === void 0 ? void 0 : _a.find((/**
* @param {?} icon
* @return {?}
*/
function (icon) { return icon.trailing; }));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcTextField.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
/** @type {?} */
var adapter = _assign(_assign(_assign(_assign(_assign({}, this._getRootAdapterMethods()), this._getInputAdapterMethods()), this._getLabelAdapterMethods()), this._getLineRippleAdapterMethods()), this._getOutlineAdapterMethods());
return new textfield.MDCTextFieldFoundation(adapter, this._getFoundationMap());
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getRootAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.contains(className); })
};
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getInputAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
getNativeInput: (/**
* @return {?}
*/
function () {
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 {?}
*/
function () { return _this._platform.isBrowser ? document.activeElement === _this._getInputElement() : false; }),
registerInputInteractionHandler: (/**
* @return {?}
*/
function () { }),
deregisterInputInteractionHandler: (/**
* @return {?}
*/
function () { })
};
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getLabelAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
shakeLabel: (/**
* @param {?} shouldShake
* @return {?}
*/
function (shouldShake) { return _this._getFloatingLabel().shake(shouldShake); }),
floatLabel: (/**
* @param {?} shouldFloat
* @return {?}
*/
function (shouldFloat) { return _this._getFloatingLabel().float(shouldFloat); }),
hasLabel: (/**
* @return {?}
*/
function () { return _this._hasFloatingLabel(); }),
getLabelWidth: (/**
* @return {?}
*/
function () { return _this._hasFloatingLabel() ? _this._getFloatingLabel().getWidth() : 0; })
};
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getLineRippleAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
activateLineRipple: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.activate(); }),
deactivateLineRipple: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.deactivate(); }),
setLineRippleTransformOrigin: (/**
* @param {?} normalizedX
* @return {?}
*/
function (normalizedX) { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.setRippleCenter(normalizedX); })
};
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getOutlineAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
hasOutline: (/**
* @return {?}
*/
function () { return !!_this._notchedOutline; }),
notchOutline: (/**
* @param {?} labelWidth
* @return {?}
*/
function (labelWidth) { return (/** @type {?} */ (_this._notchedOutline)).notch(labelWidth); }),
closeOutline: (/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._notchedOutline)).closeNotch(); })
};
};
/** Returns a map of all subcomponents to subfoundations.*/
/**
* Returns a map of all subcomponents to subfoundations.
* @private
* @return {?}
*/
MdcTextField.prototype._getFoundationMap = /**
* Returns a map of all subcomponents to subfoundations.
* @private
* @return {?}
*/
function () {
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 {?}
*/
MdcTextField.prototype._asyncBuildFoundation = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._foundation = this.getDefaultFoundation();
return [2 /*return*/];
});
});
};
/**
* @return {?}
*/
MdcTextField.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.init();
};
/**
* @return {?}
*/
MdcTextField.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
this._foundation.destroy();
};
/**
* @return {?}
*/
MdcTextField.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
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 {?}
*/
MdcTextField.prototype.init = /**
* @return {?}
*/
function () {
var _this = this;
this._initialized = true;
this._asyncBuildFoundation()
.then((/**
* @return {?}
*/
function () {
var _a, _b, _c, _d, _e;
_this._foundation.init();
if (!_this.fullwidth && !_this.outlined && !_this.textarea) {
_this._ripple = new ripple.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 {?}
*/
MdcTextField.prototype.onTextFieldInteraction = /**
* @return {?}
*/
function () {
if (this._initialized) {
this._foundation.handleTextFieldInteraction();
}
};
/**
* @param {?} evt
* @return {?}
*/
MdcTextField.prototype.onInputInteraction = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
if (evt instanceof MouseEvent) {
/** @type {?} */
var 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 {?}
*/
MdcTextField.prototype.onInput = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var value = ((/** @type {?} */ (evt.target))).value;
this.setValue(value, true);
this._foundation.handleInput();
this.input.emit(value);
evt.stopPropagation();
};
/**
* @return {?}
*/
MdcTextField.prototype.onFocus = /**
* @return {?}
*/
function () {
if (this._initialized) {
this._foundation.activateFocus();
this._onFocus.emit(true);
}
};
/**
* @param {?} evt
* @return {?}
*/
MdcTextField.prototype.onChange = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var value = ((/** @type {?} */ (evt.target))).value;
this.setValue(value, true);
this.change.emit(value);
evt.stopPropagation();
};
/**
* @return {?}
*/
MdcTextField.prototype.onBlur = /**
* @return {?}
*/
function () {
this._onTouched();
this._foundation.deactivateFocus();
this.blur.emit(this.value);
this._onFocus.emit(false);
};
/**
* @param {?} value
* @return {?}
*/
MdcTextField.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setValue(value);
};
/**
* @param {?} fn
* @return {?}
*/
MdcTextField.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcTextField.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @private
* @param {?=} value
* @return {?}
*/
MdcTextField.prototype._initializeValue = /**
* @private
* @param {?=} value
* @return {?}
*/
function (value) {
var _this = this;
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then((/**
* @return {?}
*/
function () {
_this.setValue(_this.ngControl ? _this.ngControl.value : value);
}));
};
/**
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
MdcTextField.prototype.setValue = /**
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
function (value, isUserInput) {
/** @type {?} */
var newValue = this.type === 'number' ? coercion.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 {?}
*/
MdcTextField.prototype.isBadInput = /**
* @return {?}
*/
function () {
/** @type {?} */
var validity = this._getInputElement().validity;
return validity && validity.badInput;
};
/**
* @return {?}
*/
MdcTextField.prototype.focus = /**
* @return {?}
*/
function () {
var _a;
(_a = this._getInputElement()) === null || _a === void 0 ? void 0 : _a.focus();
};
/** Initializes Text Field's internal state based on the environment state */
/**
* Initializes Text Field's internal state based on the environment state
* @private
* @return {?}
*/
MdcTextField.prototype._layout = /**
* Initializes Text Field's internal state based on the environment state
* @private
* @return {?}
*/
function () {
var _this = this;
this.destroy();
this.init();
this._changeDetectorRef.markForCheck();
setTimeout((/**
* @return {?}
*/
function () {
if (_this._outlined) {
_this._foundation.notchOutline(_this._foundation.shouldFloat);
}
if (_this._hasFloatingLabel()) {
_this._getFloatingLabel().float(_this._foundation.shouldFloat);
}
}));
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
MdcTextField.prototype.setDisabledState = /**
* Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(isDisabled);
if (newValue !== this._disabled) {
this._disabled = newValue;
if (this._initialized) {
this._foundation.setDisabled(newValue);
}
this._changeDetectorRef.markForCheck();
}
};
/** Set the default options here. */
/**
* Set the default options here.
* @private
* @return {?}
*/
MdcTextField.prototype._setDefaultGlobalOptions = /**
* Set the default options here.
* @private
* @return {?}
*/
function () {
if (this._defaults && this._defaults.outlined) {
this._outlined = this._defaults.outlined;
}
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._checkCustomValidity = /**
* @private
* @return {?}
*/
function () {
var _this = this;
Promise.resolve().then((/**
* @return {?}
*/
function () {
if (_this._valid !== undefined) {
_this._foundation.setValid(_this._valid);
}
}));
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._initHelperText = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var helper = this.helperText;
if (helper) {
helper.addHelperTextClass(this.controlType);
helper.init(textfield.MDCTextFieldHelperTextFoundation);
}
};
/** Override MdcTextFieldBase destroy method */
/**
* Override MdcTextFieldBase destroy method
* @return {?}
*/
MdcTextField.prototype.destroy = /**
* Override MdcTextFieldBase destroy method
* @return {?}
*/
function () {
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 {?}
*/
MdcTextField.prototype._isValid = /**
* @private
* @return {?}
*/
function () {
if (this.ngControl) {
return !this.errorState;
}
return this._valid ? this._valid : this._platform.isBrowser ?
this._input.nativeElement.validity.valid : true;
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._hasFloatingLabel = /**
* @private
* @return {?}
*/
function () {
return this.label && (this._floatingLabel || this._notchedOutline) ? true : false;
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getFloatingLabel = /**
* @private
* @return {?}
*/
function () {
return this._floatingLabel || (/** @type {?} */ (this._notchedOutline)).floatingLabel;
};
/**
* @private
* @return {?}
*/
MdcTextField.prototype._getInputElement = /**
* @private
* @return {?}
*/
function () {
return this._input.nativeElement;
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcTextField.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcTextField.decorators = [
{ type: core.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: "\n <div class=\"mdc-text-field__ripple\"></div>\n <ng-content *ngIf=\"leadingIcon || trailingIcon\"></ng-content>\n <input #inputElement class=\"mdc-text-field__input\"\n [id]=\"id\"\n [type]=\"type\"\n [tabindex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-invalid]=\"errorState\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.pattern]=\"pattern\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.max]=\"max\"\n [attr.min]=\"min\"\n [attr.size]=\"size\"\n [attr.step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (mousedown)=\"onInputInteraction($event)\"\n (touchstart)=\"onInputInteraction($event)\"\n (focus)=\"onFocus()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\" />\n <ng-content></ng-content>\n <label mdcFloatingLabel [for]=\"id\" *ngIf=\"!this.placeholder && !outlined\">{{label}}</label>\n <mdc-line-ripple *ngIf=\"!this.outlined && !this.textarea\"></mdc-line-ripple>\n <mdc-notched-outline *ngIf=\"outlined\" [label]=\"label\" [for]=\"id\"></mdc-notched-outline>",
providers: [
ripple.MdcRipple,
{ provide: formField.MdcFormFieldControl, useExisting: MdcTextField }
],
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcTextField.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: formField.ErrorStateMatcher },
{ type: formField.MdcFormField, decorators: [{ type: core.Optional }] },
{ type: ripple.MdcRipple, decorators: [{ type: core.Optional }] },
{ type: forms.NgControl, decorators: [{ type: core.Self }, { type: core.Optional }] },
{ type: forms.NgForm, decorators: [{ type: core.Optional }] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MDC_TEXT_FIELD_DEFAULT_OPTIONS,] }] }
]; };
MdcTextField.propDecorators = {
name: [{ type: core.Input }],
label: [{ type: core.Input }],
maxlength: [{ type: core.Input }],
minlength: [{ type: core.Input }],
pattern: [{ type: core.Input }],
autocomplete: [{ type: core.Input }],
max: [{ type: core.Input }],
min: [{ type: core.Input }],
size: [{ type: core.Input }],
step: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
tabIndex: [{ type: core.Input }],
id: [{ type: core.Input }],
type: [{ type: core.Input }],
outlined: [{ type: core.Input }],
disabled: [{ type: core.Input }],
required: [{ type: core.Input }],
readonly: [{ type: core.Input }],
fullwidth: [{ type: core.Input }],
helperText: [{ type: core.Input }],
valid: [{ type: core.Input }],
useNativeValidation: [{ type: core.Input }],
characterCounter: [{ type: core.Input }],
value: [{ type: core.Input }],
errorStateMatcher: [{ type: core.Input }],
change: [{ type: core.Output }],
input: [{ type: core.Output }],
blur: [{ type: core.Output }],
_onFocus: [{ type: core.Output, args: ['focus',] }],
_input: [{ type: core.ViewChild, args: ['inputElement', { static: true },] }],
_lineRipple: [{ type: core.ViewChild, args: [lineRipple.MdcLineRipple, { static: false },] }],
_notchedOutline: [{ type: core.ViewChild, args: [notchedOutline.MdcNotchedOutline, { static: false },] }],
_floatingLabel: [{ type: core.ViewChild, args: [floatingLabel.MdcFloatingLabel, { static: false },] }],
_icons: [{ type: core.ContentChildren, args: [MdcTextFieldIcon, { descendants: true },] }]
};
return MdcTextField;
}(_MdcTextFieldMixinBase));
/**
* @fileoverview added by tsickle
* Generated from: textfield/textarea.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcTextarea = /** @class */ (function (_super) {
__extends(MdcTextarea, _super);
function MdcTextarea() {
return _super !== null && _super.apply(this, arguments) || this;
}
MdcTextarea.decorators = [
{ type: core.Component, args: [{selector: 'mdc-textarea',
exportAs: 'mdcTextarea',
host: {
'class': 'mdc-text-field',
'[class.mdc-text-field--textarea]': 'true',