@angular-mdc/web
Version:
569 lines (560 loc) • 18.9 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 { Component, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ChangeDetectorRef, NgZone, ContentChild, ContentChildren, NgModule, Injectable, ɵɵdefineInjectable } from '@angular/core';
import { CommonModule } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { fromEvent, Subject } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import { __extends } from 'tslib';
import { MDCComponent } from '@angular-mdc/web/base';
import { MDCTextFieldCharacterCounterFoundation } from '@material/textfield';
/**
* @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 MDCTextFieldCharacterCounterFoundation(adapter);
};
/**
* @return {?}
*/
MdcCharacterCounter.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
MdcCharacterCounter.decorators = [
{ type: Component, args: [{selector: '[mdcCharacterCounter]',
exportAs: 'mdcCharacterCounter',
host: {
'class': 'mdc-text-field-character-counter'
},
template: '<ng-content></ng-content>'
},] },
];
/** @nocollapse */
MdcCharacterCounter.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MdcCharacterCounter;
}(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 = 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 = 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: 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: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcHelperText.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MdcHelperText.propDecorators = {
id: [{ type: Input }],
persistent: [{ type: Input }],
validation: [{ type: Input }],
_helperTextElement: [{ type: ViewChild, args: ['helperText', { static: true },] }],
_characterCounterElement: [{ type: 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 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 = 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 = 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(startWith(null), 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 fromEvent((/** @type {?} */ (_this.label)), 'click').pipe(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: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcFormField.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: NgZone },
{ type: ElementRef }
]; };
MdcFormField.propDecorators = {
fluid: [{ type: Input }],
alignEnd: [{ type: Input }],
_control: [{ type: ContentChild, args: [MdcFormFieldControl, { static: false },] }],
assistiveElements: [{ type: 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: NgModule, args: [{
imports: [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: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ ErrorStateMatcher.ɵprov21 = ɵɵdefineInjectable({ factory: function ErrorStateMatcher_Factory() { return new ErrorStateMatcher(); }, token: ErrorStateMatcher, providedIn: "root" });
return ErrorStateMatcher;
}());
export { ErrorStateMatcher, MdcCharacterCounter, MdcFormField, MdcFormFieldControl, MdcFormFieldModule, MdcHelperText, mixinErrorState };
//# sourceMappingURL=form-field.es5.js.map