@angular-mdc/web
Version:
616 lines (597 loc) • 22.3 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/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@material/textfield')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/form-field', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@material/textfield'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.formField = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.web.base, global.mdc.textfield));
}(this, (function (exports, core, common, coercion, rxjs, operators, 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 __());
}
/**
* @fileoverview added by tsickle
* Generated from: form-field/form-field-control.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
* @template T
*/
var /**
* @abstract
* @template T
*/
MdcFormFieldControl = /** @class */ (function () {
function MdcFormFieldControl() {
/**
* The value of the control.
*/
this.value = null;
}
return MdcFormFieldControl;
}());
/**
* @fileoverview added by tsickle
* Generated from: form-field/character-counter.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcCharacterCounter = /** @class */ (function (_super) {
__extends(MdcCharacterCounter, _super);
function MdcCharacterCounter(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
return _this;
}
Object.defineProperty(MdcCharacterCounter.prototype, "foundation", {
get: /**
* @return {?}
*/
function () {
return this._foundation;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcCharacterCounter.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
setContent: (/**
* @param {?} content
* @return {?}
*/
function (content) { return _this.elementRef.nativeElement.textContent = content; })
};
return new textfield.MDCTextFieldCharacterCounterFoundation(adapter);
};
/**
* @return {?}
*/
MdcCharacterCounter.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
MdcCharacterCounter.decorators = [
{ type: core.Component, args: [{selector: '[mdcCharacterCounter]',
exportAs: 'mdcCharacterCounter',
host: {
'class': 'mdc-text-field-character-counter'
},
template: '<ng-content></ng-content>'
},] },
];
/** @nocollapse */
MdcCharacterCounter.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcCharacterCounter;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: form-field/helper-text.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcHelperText = /** @class */ (function () {
function MdcHelperText(elementRef) {
this.elementRef = elementRef;
this.characterCounter = false;
this._persistent = false;
this._validation = false;
}
Object.defineProperty(MdcHelperText.prototype, "persistent", {
get: /**
* @return {?}
*/
function () {
return this._persistent;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._persistent = coercion.coerceBooleanProperty(value);
if (this._foundation) {
this._foundation.setPersistent(this._persistent);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcHelperText.prototype, "validation", {
get: /**
* @return {?}
*/
function () {
return this._validation;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._validation = coercion.coerceBooleanProperty(value);
if (this._foundation) {
this._foundation.setValidation(this._validation);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcHelperText.prototype, "foundation", {
get: /**
* @return {?}
*/
function () {
return this._foundation;
},
enumerable: true,
configurable: true
});
/** Sets the validity of the helper text based on inputIsValid. */
/**
* Sets the validity of the helper text based on inputIsValid.
* @param {?} inputIsValid
* @return {?}
*/
MdcHelperText.prototype.setValidity = /**
* Sets the validity of the helper text based on inputIsValid.
* @param {?} inputIsValid
* @return {?}
*/
function (inputIsValid) {
this._foundation.setValidity(inputIsValid);
};
/** Makes the helper text visible to the screen reader. */
/**
* Makes the helper text visible to the screen reader.
* @return {?}
*/
MdcHelperText.prototype.showToScreenReader = /**
* Makes the helper text visible to the screen reader.
* @return {?}
*/
function () {
this._foundation.showToScreenReader();
};
/**
* @param {?} foundation
* @return {?}
*/
MdcHelperText.prototype.init = /**
* @param {?} foundation
* @return {?}
*/
function (foundation) {
this._foundation = new foundation(this._createAdapter());
this._foundation.setPersistent(this.persistent);
this._foundation.setValidation(this.validation);
};
/**
* @param {?} className
* @return {?}
*/
MdcHelperText.prototype.addHelperTextClass = /**
* @param {?} className
* @return {?}
*/
function (className) {
(/** @type {?} */ (this._helperTextElement)).nativeElement.classList.add(className + "-helper-text");
};
/**
* @private
* @return {?}
*/
MdcHelperText.prototype._createAdapter = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return (/** @type {?} */ (_this._helperTextElement)).nativeElement.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return (/** @type {?} */ (_this._helperTextElement)).nativeElement.classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return (/** @type {?} */ (_this._helperTextElement)).nativeElement.classList.contains(className); }),
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return (/** @type {?} */ (_this._helperTextElement)).nativeElement.setAttribute(attr, value); }),
removeAttr: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return (/** @type {?} */ (_this._helperTextElement)).nativeElement.removeAttribute(attr); })
};
};
MdcHelperText.decorators = [
{ type: core.Component, args: [{selector: "mdc-helper-text, [mdcHelperText], mdc-text-field-helper-text, [mdcTextFieldHelperText]",
exportAs: 'mdcHelperText',
host: { 'class': 'mdc-text-field-helper-line' },
template: "<div #helperText><ng-content></ng-content></div>\n <div mdcCharacterCounter *ngIf=\"characterCounter\"></div>",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcHelperText.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcHelperText.propDecorators = {
id: [{ type: core.Input }],
persistent: [{ type: core.Input }],
validation: [{ type: core.Input }],
_helperTextElement: [{ type: core.ViewChild, args: ['helperText', { static: true },] }],
_characterCounterElement: [{ type: core.ViewChild, args: [MdcCharacterCounter, { static: false },] }]
};
return MdcHelperText;
}());
/**
* @fileoverview added by tsickle
* Generated from: form-field/form-field.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcFormField = /** @class */ (function () {
function MdcFormField(_changeDetectorRef, _ngZone, elementRef) {
this._changeDetectorRef = _changeDetectorRef;
this._ngZone = _ngZone;
this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
this._destroy = new rxjs.Subject();
this._fluid = false;
this._alignEnd = false;
}
Object.defineProperty(MdcFormField.prototype, "fluid", {
get: /**
* @return {?}
*/
function () {
return this._fluid;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._fluid = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcFormField.prototype, "alignEnd", {
get: /**
* @return {?}
*/
function () {
return this._alignEnd;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._alignEnd = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcFormField.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
var _a, _b;
if (this._control) {
/** @type {?} */
var control = this._control.elementRef.nativeElement;
if (((_b = (_a = control) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName) === 'LABEL') {
this.label = control.nextElementSibling;
if (this.label && this._control.inputId) {
(/** @type {?} */ (this.label)).setAttribute('for', this._control.inputId);
this._loadListeners();
}
}
}
// When assistive elements change, initialize foundation
this.assistiveElements.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroy))
.subscribe((/**
* @return {?}
*/
function () {
(_this.assistiveElements).forEach((/**
* @param {?} helperText
* @return {?}
*/
function (helperText) {
return _this._initHelperTextFoundation(helperText);
}));
}));
};
/**
* @return {?}
*/
MdcFormField.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
};
/**
* @private
* @param {?} helperText
* @return {?}
*/
MdcFormField.prototype._initHelperTextFoundation = /**
* @private
* @param {?} helperText
* @return {?}
*/
function (helperText) {
var _a;
/** @type {?} */
var control = this._control;
if ((_a = control) === null || _a === void 0 ? void 0 : _a.controlType) {
control.helperText = helperText;
this._changeDetectorRef.markForCheck();
}
};
/**
* @private
* @return {?}
*/
MdcFormField.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent((/** @type {?} */ (_this.label)), 'click').pipe(operators.takeUntil(_this._destroy))
.subscribe((/**
* @return {?}
*/
function () { return _this._ngZone.run((/**
* @return {?}
*/
function () {
(/** @type {?} */ (_this._control.ripple)).activateRipple();
if (typeof requestAnimationFrame !== 'undefined') {
requestAnimationFrame((/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._control.ripple)).deactivateRipple(); }));
}
})); }));
}));
};
MdcFormField.decorators = [
{ type: core.Component, args: [{selector: 'mdc-form-field',
exportAs: 'mdcFormField',
host: {
'[class.ngx-mdc-form-field--fluid]': 'fluid',
'[class.mdc-form-field--align-end]': 'alignEnd'
},
template: "<ng-content></ng-content>\n <ng-content select=\"[mdcHelperText, mdc-helper-text]\"></ng-content>",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcFormField.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: core.NgZone },
{ type: core.ElementRef }
]; };
MdcFormField.propDecorators = {
fluid: [{ type: core.Input }],
alignEnd: [{ type: core.Input }],
_control: [{ type: core.ContentChild, args: [MdcFormFieldControl, { static: false },] }],
assistiveElements: [{ type: core.ContentChildren, args: [MdcHelperText, { descendants: true },] }]
};
return MdcFormField;
}());
/**
* @fileoverview added by tsickle
* Generated from: form-field/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var FORM_FIELD_DECLARATIONS = [
MdcCharacterCounter,
MdcFormField,
MdcHelperText
];
var MdcFormFieldModule = /** @class */ (function () {
function MdcFormFieldModule() {
}
MdcFormFieldModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: [FORM_FIELD_DECLARATIONS],
declarations: [FORM_FIELD_DECLARATIONS]
},] },
];
return MdcFormFieldModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: form-field/error-state.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Mixin to augment a directive with updateErrorState method.
* For component with `errorState` and need to update `errorState`.
* @template T
* @param {?} base
* @return {?}
*/
function mixinErrorState(base) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
/**
* Whether the component is in an error state.
*/
_this.errorState = false;
_this.required = false;
return _this;
}
/**
* @return {?}
*/
class_1.prototype.updateErrorState = /**
* @return {?}
*/
function () {
/** @type {?} */
var oldState = this.errorState;
/** @type {?} */
var parent = this._parentFormGroup || this._parentForm;
/** @type {?} */
var matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
/** @type {?} */
var control = this.ngControl ? (/** @type {?} */ (this.ngControl.control)) : null;
/** @type {?} */
var newState = matcher.isErrorState(control, parent);
if (newState !== oldState) {
this.errorState = newState;
}
// Currently there isn't a great way to determine if Validators.required
// has been added to the control since form validators are combined into
// an aggregate function at initialization.
if (control && !this.required) {
this.required = control.hasError('required');
}
};
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* Generated from: form-field/error-state-matcher.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Provider that defines how form controls behave with regards to displaying error messages.
*/
var ErrorStateMatcher = /** @class */ (function () {
function ErrorStateMatcher() {
}
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
ErrorStateMatcher.prototype.isErrorState = /**
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
return !!(control && control.invalid && (control.touched || (form && form.submitted)));
};
ErrorStateMatcher.decorators = [
{ type: core.Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ ErrorStateMatcher.ɵprov21 = core["ɵɵdefineInjectable"]({ factory: function ErrorStateMatcher_Factory() { return new ErrorStateMatcher(); }, token: ErrorStateMatcher, providedIn: "root" });
return ErrorStateMatcher;
}());
exports.ErrorStateMatcher = ErrorStateMatcher;
exports.MdcCharacterCounter = MdcCharacterCounter;
exports.MdcFormField = MdcFormField;
exports.MdcFormFieldControl = MdcFormFieldControl;
exports.MdcFormFieldModule = MdcFormFieldModule;
exports.MdcHelperText = MdcHelperText;
exports.mixinErrorState = mixinErrorState;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-form-field.umd.js.map