@angular-mdc/web
Version:
477 lines (468 loc) • 15 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 { Subject, fromEvent } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
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
*/
class MdcFormFieldControl {
constructor() {
/**
* The value of the control.
*/
this.value = null;
}
}
/**
* @fileoverview added by tsickle
* Generated from: form-field/character-counter.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcCharacterCounter extends MDCComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
super(elementRef);
this.elementRef = elementRef;
}
/**
* @return {?}
*/
get foundation() {
return this._foundation;
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
setContent: (/**
* @param {?} content
* @return {?}
*/
(content) => this.elementRef.nativeElement.textContent = content)
};
return new MDCTextFieldCharacterCounterFoundation(adapter);
}
/**
* @return {?}
*/
ngOnDestroy() {
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 = () => [
{ type: ElementRef }
];
/**
* @fileoverview added by tsickle
* Generated from: form-field/helper-text.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcHelperText {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.characterCounter = false;
this._persistent = false;
this._validation = false;
}
/**
* @return {?}
*/
get persistent() {
return this._persistent;
}
/**
* @param {?} value
* @return {?}
*/
set persistent(value) {
this._persistent = coerceBooleanProperty(value);
if (this._foundation) {
this._foundation.setPersistent(this._persistent);
}
}
/**
* @return {?}
*/
get validation() {
return this._validation;
}
/**
* @param {?} value
* @return {?}
*/
set validation(value) {
this._validation = coerceBooleanProperty(value);
if (this._foundation) {
this._foundation.setValidation(this._validation);
}
}
/**
* @return {?}
*/
get foundation() {
return this._foundation;
}
/**
* Sets the validity of the helper text based on inputIsValid.
* @param {?} inputIsValid
* @return {?}
*/
setValidity(inputIsValid) {
this._foundation.setValidity(inputIsValid);
}
/**
* Makes the helper text visible to the screen reader.
* @return {?}
*/
showToScreenReader() {
this._foundation.showToScreenReader();
}
/**
* @param {?} foundation
* @return {?}
*/
init(foundation) {
this._foundation = new foundation(this._createAdapter());
this._foundation.setPersistent(this.persistent);
this._foundation.setValidation(this.validation);
}
/**
* @param {?} className
* @return {?}
*/
addHelperTextClass(className) {
(/** @type {?} */ (this._helperTextElement)).nativeElement.classList.add(`${className}-helper-text`);
}
/**
* @private
* @return {?}
*/
_createAdapter() {
return {
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => (/** @type {?} */ (this._helperTextElement)).nativeElement.classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => (/** @type {?} */ (this._helperTextElement)).nativeElement.classList.remove(className)),
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => (/** @type {?} */ (this._helperTextElement)).nativeElement.classList.contains(className)),
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
(attr, value) => (/** @type {?} */ (this._helperTextElement)).nativeElement.setAttribute(attr, value)),
removeAttr: (/**
* @param {?} attr
* @return {?}
*/
(attr) => (/** @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>
<div mdcCharacterCounter *ngIf="characterCounter"></div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcHelperText.ctorParameters = () => [
{ 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 },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: form-field/form-field.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcFormField {
/**
* @param {?} _changeDetectorRef
* @param {?} _ngZone
* @param {?} elementRef
*/
constructor(_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;
}
/**
* @return {?}
*/
get fluid() {
return this._fluid;
}
/**
* @param {?} value
* @return {?}
*/
set fluid(value) {
this._fluid = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get alignEnd() {
return this._alignEnd;
}
/**
* @param {?} value
* @return {?}
*/
set alignEnd(value) {
this._alignEnd = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
ngAfterContentInit() {
var _a, _b;
if (this._control) {
/** @type {?} */
const 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 {?}
*/
() => {
(this.assistiveElements).forEach((/**
* @param {?} helperText
* @return {?}
*/
helperText => this._initHelperTextFoundation(helperText)));
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroy.next();
this._destroy.complete();
}
/**
* @private
* @param {?} helperText
* @return {?}
*/
_initHelperTextFoundation(helperText) {
var _a;
/** @type {?} */
const control = this._control;
if ((_a = control) === null || _a === void 0 ? void 0 : _a.controlType) {
control.helperText = helperText;
this._changeDetectorRef.markForCheck();
}
}
/**
* @private
* @return {?}
*/
_loadListeners() {
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => fromEvent((/** @type {?} */ (this.label)), 'click').pipe(takeUntil(this._destroy))
.subscribe((/**
* @return {?}
*/
() => this._ngZone.run((/**
* @return {?}
*/
() => {
(/** @type {?} */ (this._control.ripple)).activateRipple();
if (typeof requestAnimationFrame !== 'undefined') {
requestAnimationFrame((/**
* @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>
<ng-content select="[mdcHelperText, mdc-helper-text]"></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcFormField.ctorParameters = () => [
{ 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 },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: form-field/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const FORM_FIELD_DECLARATIONS = [
MdcCharacterCounter,
MdcFormField,
MdcHelperText
];
class MdcFormFieldModule {
}
MdcFormFieldModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [FORM_FIELD_DECLARATIONS],
declarations: [FORM_FIELD_DECLARATIONS]
},] },
];
/**
* @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 extends base {
/**
* @param {...?} args
*/
constructor(...args) {
super(...args);
/**
* Whether the component is in an error state.
*/
this.errorState = false;
this.required = false;
}
/**
* @return {?}
*/
updateErrorState() {
/** @type {?} */
const oldState = this.errorState;
/** @type {?} */
const parent = this._parentFormGroup || this._parentForm;
/** @type {?} */
const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
/** @type {?} */
const control = this.ngControl ? (/** @type {?} */ (this.ngControl.control)) : null;
/** @type {?} */
const 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');
}
}
};
}
/**
* @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.
*/
class ErrorStateMatcher {
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
isErrorState(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" });
export { ErrorStateMatcher, MdcCharacterCounter, MdcFormField, MdcFormFieldControl, MdcFormFieldModule, MdcHelperText, mixinErrorState };
//# sourceMappingURL=form-field.js.map