@angular-mdc/web
Version:
523 lines (519 loc) • 16.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 { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
import { MdcFormFieldControl, MdcFormField, MdcFormFieldModule } from '@angular-mdc/web/form-field';
import { __extends, __awaiter, __generator, __assign } from 'tslib';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { supportsPassiveEventListeners } from '@angular/cdk/platform';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { MDCSwitchFoundation } from '@material/switch';
import { MDCRippleFoundation } from '@material/ripple';
import { matches } from '@angular-mdc/web/dom';
import { MDCComponent } from '@angular-mdc/web/base';
import { MdcRipple } from '@angular-mdc/web/ripple';
/**
* @fileoverview added by tsickle
* Generated from: switch/switch.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var MDC_SWITCH_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return MdcSwitch; })),
multi: true
};
/**
* Change event object emitted by MdcSwitch.
*/
var /**
* Change event object emitted by MdcSwitch.
*/
MdcSwitchChange = /** @class */ (function () {
function MdcSwitchChange(source, checked) {
this.source = source;
this.checked = checked;
}
return MdcSwitchChange;
}());
/** @type {?} */
var nextUniqueId = 0;
var MdcSwitch = /** @class */ (function (_super) {
__extends(MdcSwitch, _super);
function MdcSwitch(_changeDetectorRef, ripple, elementRef, _parentFormField) {
var _this = _super.call(this, elementRef) || this;
_this._changeDetectorRef = _changeDetectorRef;
_this.ripple = ripple;
_this.elementRef = elementRef;
_this._parentFormField = _parentFormField;
_this._uniqueId = "mdc-switch-" + ++nextUniqueId;
_this._initialized = false;
_this.id = _this._uniqueId;
_this.name = null;
_this.tabIndex = 0;
/**
* The value attribute of the native input element
*/
_this.value = null;
_this._checked = false;
_this._disabled = false;
_this._required = false;
/**
* Used to set the aria-label attribute on the underlying input element.
*/
_this.ariaLabel = null;
/**
* Used to set the aria-labelledby attribute on the underlying input element.
*/
_this.ariaLabelledby = null;
_this.change = new EventEmitter();
/**
* View to model callback called when value changes
*/
_this._onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
/**
* View to model callback called when control has been touched
*/
_this._onTouched = (/**
* @return {?}
*/
function () { });
_this._root = _this.elementRef.nativeElement;
if (_this._parentFormField) {
_parentFormField.elementRef.nativeElement.classList.add('mdc-form-field');
}
return _this;
}
Object.defineProperty(MdcSwitch.prototype, "checked", {
get: /**
* @return {?}
*/
function () {
return this._checked;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.disabled) {
return;
}
this._checked = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSwitch.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabledState(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSwitch.prototype, "required", {
get: /**
* @return {?}
*/
function () {
return this._required;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._required = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSwitch.prototype, "inputId", {
get: /**
* @return {?}
*/
function () {
return (this.id || this._uniqueId) + "-input";
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcSwitch.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
// Do not initialize foundation until ngAfterViewInit runs
if (!this._initialized) {
return undefined;
}
/** @type {?} */
var adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
setNativeControlChecked: (/**
* @param {?} checked
* @return {?}
*/
function (checked) { return _this._getInputElement().checked = checked; }),
setNativeControlDisabled: (/**
* @param {?} disabled
* @return {?}
*/
function (disabled) { return _this._getInputElement().disabled = disabled; }),
setNativeControlAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return _this._getInputElement().setAttribute(attr, value); })
};
return new MDCSwitchFoundation(adapter);
};
/**
* @return {?}
*/
MdcSwitch.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._initialized = true;
this.ripple = this._createRipple();
this.ripple.init();
this._asyncBuildFoundation()
.then((/**
* @return {?}
*/
function () {
_this._foundation.init();
_this.setDisabledState(_this._inputElement.nativeElement.disabled);
}));
};
/**
* @return {?}
*/
MdcSwitch.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.ripple.destroy();
this.destroy();
};
/**
* @return {?}
*/
MdcSwitch.prototype._asyncBuildFoundation = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._foundation = this.getDefaultFoundation();
return [2 /*return*/];
});
});
};
/**
* @param {?} evt
* @return {?}
*/
MdcSwitch.prototype.onChange = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
evt.stopPropagation();
this._foundation.handleChange(evt);
this._checked = this._inputElement.nativeElement.checked;
this._foundation.setChecked(this._checked);
this._emitChangeEvent();
this._changeDetectorRef.markForCheck();
};
/**
* @param {?} evt
* @return {?}
*/
MdcSwitch.prototype.onInputClick = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
evt.stopPropagation();
};
/**
* @return {?}
*/
MdcSwitch.prototype.onBlur = /**
* @return {?}
*/
function () {
this._onTouched();
};
/**
* @param {?} value
* @return {?}
*/
MdcSwitch.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/**
* @param {?} fn
* @return {?}
*/
MdcSwitch.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcSwitch.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/** Toggles the checked state of the switch. */
/**
* Toggles the checked state of the switch.
* @return {?}
*/
MdcSwitch.prototype.toggle = /**
* Toggles the checked state of the switch.
* @return {?}
*/
function () {
this.checked = !this.checked;
this._onChange(this.checked);
};
/**
* @param {?} disabled
* @return {?}
*/
MdcSwitch.prototype.setDisabledState = /**
* @param {?} disabled
* @return {?}
*/
function (disabled) {
var _a;
/** @type {?} */
var newValue = coerceBooleanProperty(disabled);
if (newValue !== this._disabled) {
this._disabled = newValue;
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.setDisabled(newValue);
this._changeDetectorRef.markForCheck();
}
};
/**
* @return {?}
*/
MdcSwitch.prototype.focus = /**
* @return {?}
*/
function () {
this._inputElement.nativeElement.focus();
};
/**
* @private
* @return {?}
*/
MdcSwitch.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var rippleSurface = (/** @type {?} */ (this.thumbUnderlay.nativeElement));
/** @type {?} */
var adapter = __assign(__assign({}, MdcRipple.createAdapter(this)), { addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return rippleSurface.classList.add(className); }), computeBoundingRect: (/**
* @return {?}
*/
function () { return rippleSurface.getBoundingClientRect(); }), deregisterInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._inputElement.nativeElement.removeEventListener(evtType, handler, supportsPassiveEventListeners());
}), isSurfaceActive: (/**
* @return {?}
*/
function () { return matches(_this._inputElement.nativeElement, ':active'); }), isUnbounded: (/**
* @return {?}
*/
function () { return true; }), registerInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._inputElement.nativeElement.addEventListener(evtType, handler, supportsPassiveEventListeners());
}), removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return rippleSurface.classList.remove(className); }), updateCssVariable: (/**
* @param {?} varName
* @param {?} value
* @return {?}
*/
function (varName, value) { return rippleSurface.style.setProperty(varName, value); }) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
};
/**
* Emits a change event on the `change` output. Also notifies the FormControl about the change.
*/
/**
* Emits a change event on the `change` output. Also notifies the FormControl about the change.
* @private
* @return {?}
*/
MdcSwitch.prototype._emitChangeEvent = /**
* Emits a change event on the `change` output. Also notifies the FormControl about the change.
* @private
* @return {?}
*/
function () {
this._onChange(this.checked);
this.change.emit(new MdcSwitchChange(this, this.checked));
};
/** Retrieves the DOM element of the component input. */
/**
* Retrieves the DOM element of the component input.
* @private
* @return {?}
*/
MdcSwitch.prototype._getInputElement = /**
* Retrieves the DOM element of the component input.
* @private
* @return {?}
*/
function () {
return this._inputElement.nativeElement;
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcSwitch.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcSwitch.decorators = [
{ type: Component, args: [{selector: 'mdc-switch',
host: {
'[id]': 'id',
'class': 'mdc-switch',
'[class.mdc-switch--checked]': 'checked',
'[class.mdc-switch--disabled]': 'disabled',
'(focus)': '_inputElement.nativeElement.focus()'
},
template: "\n <div class=\"mdc-switch__track\"></div>\n <div #thumbUnderlay class=\"mdc-switch__thumb-underlay\">\n <div class=\"mdc-switch__thumb\"></div>\n <input type=\"checkbox\"\n #input\n role=\"switch\"\n class=\"mdc-switch__native-control\"\n [id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [checked]=\"checked\"\n (blur)=\"onBlur()\"\n (click)=\"onInputClick($event)\"\n (change)=\"onChange($event)\"/>\n </div>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [
MDC_SWITCH_CONTROL_VALUE_ACCESSOR,
{ provide: MdcFormFieldControl, useExisting: MdcSwitch },
MdcRipple
]
},] },
];
/** @nocollapse */
MdcSwitch.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: MdcRipple },
{ type: ElementRef },
{ type: MdcFormField, decorators: [{ type: Optional }] }
]; };
MdcSwitch.propDecorators = {
id: [{ type: Input }],
name: [{ type: Input }],
tabIndex: [{ type: Input }],
value: [{ type: Input }],
checked: [{ type: Input }],
disabled: [{ type: Input }],
required: [{ type: Input }],
ariaLabel: [{ type: Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
change: [{ type: Output }],
_inputElement: [{ type: ViewChild, args: ['input', { static: true },] }],
thumbUnderlay: [{ type: ViewChild, args: ['thumbUnderlay', { static: false },] }]
};
return MdcSwitch;
}(MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: switch/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcSwitchModule = /** @class */ (function () {
function MdcSwitchModule() {
}
MdcSwitchModule.decorators = [
{ type: NgModule, args: [{
imports: [MdcFormFieldModule],
exports: [
MdcFormFieldModule,
MdcSwitch
],
declarations: [MdcSwitch]
},] },
];
return MdcSwitchModule;
}());
export { MDC_SWITCH_CONTROL_VALUE_ACCESSOR, MdcSwitch, MdcSwitchChange, MdcSwitchModule };
//# sourceMappingURL=switch.es5.js.map