@angular-mdc/web
Version:
852 lines (810 loc) • 28.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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular-mdc/web/form-field'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/dom'), require('@material/ripple'), require('@material/checkbox'), require('@angular-mdc/web/base'), require('@angular-mdc/web/ripple')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/checkbox', ['exports', '@angular/core', '@angular/common', '@angular-mdc/web/form-field', '@angular/forms', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/dom', '@material/ripple', '@material/checkbox', '@angular-mdc/web/base', '@angular-mdc/web/ripple'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.checkbox = {}), global.ng.core, global.ng.common, global.ng.web.formField, global.ng.forms, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.dom, global.mdc.ripple, global.mdc.checkbox, global.ng.web.base, global.ng.web.ripple));
}(this, (function (exports, core, common, formField, forms, coercion, platform, rxjs, operators, dom, ripple, checkbox, base, ripple$1) { '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: checkbox/checkbox.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var nextUniqueId = 0;
/**
* Change event object emitted by MdcCheckbox.
*/
var /**
* Change event object emitted by MdcCheckbox.
*/
MdcCheckboxChange = /** @class */ (function () {
function MdcCheckboxChange(source, checked) {
this.source = source;
this.checked = checked;
}
return MdcCheckboxChange;
}());
/** @type {?} */
var MDC_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return MdcCheckbox; })),
multi: true
};
var MdcCheckbox = /** @class */ (function (_super) {
__extends(MdcCheckbox, _super);
function MdcCheckbox(_platform, _ngZone, _changeDetectorRef, elementRef, ripple, _parentFormField) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._ngZone = _ngZone;
_this._changeDetectorRef = _changeDetectorRef;
_this.elementRef = elementRef;
_this.ripple = ripple;
_this._parentFormField = _parentFormField;
/**
* Emits whenever the component is destroyed.
*/
_this._destroy = new rxjs.Subject();
_this._initialized = false;
_this._uniqueId = "mdc-checkbox-" + ++nextUniqueId;
_this.id = _this._uniqueId;
_this.name = null;
_this._checked = false;
_this._touch = false;
_this._disabled = false;
/**
* The value attribute of the native input element
*/
_this.value = null;
_this._indeterminate = false;
_this._indeterminateToChecked = true;
_this._disableRipple = false;
_this.tabIndex = 0;
_this.ariaLabel = '';
_this.ariaLabelledby = null;
/**
* Fired when checkbox is checked or unchecked, but not when set
* indeterminate. Sends the state of [checked].
*/
_this.change = new core.EventEmitter();
/**
* Fired when checkbox goes in and out of indeterminate state, but not when
* set to checked. Sends the state of [indeterminate];
*/
_this.indeterminateChange = new core.EventEmitter();
/**
* View to model callback called when value changes
*/
_this._onChange = (/**
* @return {?}
*/
function () { });
/**
* View to model callback called when component 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(MdcCheckbox.prototype, "inputId", {
/** Returns the unique id for the visual hidden input. */
get: /**
* Returns the unique id for the visual hidden input.
* @return {?}
*/
function () {
return (this.id || this._uniqueId) + "-input";
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "checked", {
get: /**
* @return {?}
*/
function () {
return this._checked;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== this.checked) {
this._checked = coercion.coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "touch", {
get: /**
* @return {?}
*/
function () {
return this._touch;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._touch = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabledState(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "indeterminate", {
/**
* Alternative state of the checkbox, not user set-able state. Between
* [checked] and [indeterminate], only one can be true, though both can be
* false.
* `true` is INDETERMINATE and `false` is not.
*/
get: /**
* Alternative state of the checkbox, not user set-able state. Between
* [checked] and [indeterminate], only one can be true, though both can be
* false.
* `true` is INDETERMINATE and `false` is not.
* @return {?}
*/
function () {
return this._indeterminate;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
var _a;
if (this.disabled) {
return;
}
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._indeterminate) {
this._indeterminate = newValue;
if (newValue) {
this.checked = false;
}
this.indeterminateChange.emit({ source: this, indeterminate: this._indeterminate });
this._changeDetectorRef.markForCheck();
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.handleChange();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "indeterminateToChecked", {
/**
* Determines the state to go into when [indeterminate] state is toggled.
* `true` will go to checked and `false` will go to unchecked.
*/
get: /**
* Determines the state to go into when [indeterminate] state is toggled.
* `true` will go to checked and `false` will go to unchecked.
* @return {?}
*/
function () {
return this._indeterminateToChecked;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._indeterminateToChecked = coercion.coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcCheckbox.prototype, "disableRipple", {
/** Whether the ripple ink is disabled. */
get: /**
* Whether the ripple ink is disabled.
* @return {?}
*/
function () {
return this._disableRipple;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disableRipple = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcCheckbox.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._root.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.remove(className); }),
setNativeControlAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) {
return _this._inputElement.nativeElement.setAttribute(attr, value);
}),
removeNativeControlAttr: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return _this._inputElement.nativeElement.removeAttribute(attr); }),
isIndeterminate: (/**
* @return {?}
*/
function () { return _this.indeterminate; }),
isChecked: (/**
* @return {?}
*/
function () { return _this.checked; }),
hasNativeControl: (/**
* @return {?}
*/
function () { return true; }),
setNativeControlDisabled: (/**
* @param {?} disabled
* @return {?}
*/
function (disabled) { return _this._inputElement.nativeElement.disabled = disabled; }),
forceLayout: (/**
* @return {?}
*/
function () { return ((/** @type {?} */ (_this._root))).offsetWidth; }),
isAttachedToDOM: (/**
* @return {?}
*/
function () { return true; })
};
return new checkbox.MDCCheckboxFoundation(adapter);
};
/**
* @return {?}
*/
MdcCheckbox.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 {?}
*/
MdcCheckbox.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._initialized = true;
this._asyncBuildFoundation()
.then((/**
* @return {?}
*/
function () {
_this._foundation.init();
_this.setDisabledState(_this._inputElement.nativeElement.disabled);
_this.ripple = _this._createRipple();
_this.ripple.init();
}));
this._loadListeners();
};
/**
* @return {?}
*/
MdcCheckbox.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
this.ripple.destroy();
this._foundation.destroy();
};
/**
* @param {?} value
* @return {?}
*/
MdcCheckbox.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/**
* @param {?} fn
* @return {?}
*/
MdcCheckbox.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcCheckbox.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/** Focuses the checkbox. */
/**
* Focuses the checkbox.
* @return {?}
*/
MdcCheckbox.prototype.focus = /**
* Focuses the checkbox.
* @return {?}
*/
function () {
if (!this.disabled) {
this._inputElement.nativeElement.focus();
}
};
/**
* @param {?=} checked
* @return {?}
*/
MdcCheckbox.prototype.toggle = /**
* @param {?=} checked
* @return {?}
*/
function (checked) {
this._setState(checked);
};
/**
* @param {?} evt
* @return {?}
*/
MdcCheckbox.prototype._onInteraction = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
// We have to stop propagation for click events on the visual hidden input element.
// Preventing bubbling for the second event will solve that issue.
evt.stopPropagation();
this._setState();
this._onChange(this.checked);
this._changeDetectorRef.markForCheck();
this.change.emit(new MdcCheckboxChange(this, this.checked));
};
/**
* @param {?} evt
* @return {?}
*/
MdcCheckbox.prototype._onInputClick = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
evt.stopPropagation();
};
/**
* @param {?} disabled
* @return {?}
*/
MdcCheckbox.prototype.setDisabledState = /**
* @param {?} disabled
* @return {?}
*/
function (disabled) {
var _a;
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(disabled);
if (newValue !== this._disabled) {
this._disabled = newValue;
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.setDisabled(newValue);
this._changeDetectorRef.markForCheck();
}
};
/**
* @private
* @param {?=} checked
* @return {?}
*/
MdcCheckbox.prototype._setState = /**
* @private
* @param {?=} checked
* @return {?}
*/
function (checked) {
var _this = this;
if (this.disabled) {
return;
}
if (this.indeterminate) {
this._checked = this.indeterminateToChecked;
this.indeterminate = false;
}
else {
this.checked = checked || !this.checked;
}
// Reset native input when clicked with noop. The native checkbox becomes checked after
// click, reset it to be align with `checked` value of `mdc-checkbox`.
this._inputElement.nativeElement.checked = this.checked;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return requestAnimationFrame((/**
* @return {?}
*/
function () { return _this._foundation.handleChange(); }));
}));
};
/**
* @private
* @return {?}
*/
MdcCheckbox.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = _assign(_assign({}, ripple$1.MdcRipple.createAdapter(this)), { isSurfaceActive: (/**
* @return {?}
*/
function () { return dom.matches(_this._inputElement.nativeElement, ':active'); }), isUnbounded: (/**
* @return {?}
*/
function () { return true; }), isSurfaceDisabled: (/**
* @return {?}
*/
function () { return _this.disableRipple; }), deregisterInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._inputElement.nativeElement.removeEventListener(evtType, handler, platform.supportsPassiveEventListeners());
}), registerInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._inputElement.nativeElement.addEventListener(evtType, handler, platform.supportsPassiveEventListeners());
}) });
return new ripple$1.MdcRipple(this.elementRef, new ripple.MDCRippleFoundation(adapter));
};
/**
* @private
* @return {?}
*/
MdcCheckbox.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this._platform.isBrowser) {
return;
}
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent(_this._root, 'animationend')
.pipe(operators.takeUntil(_this._destroy), operators.filter((/**
* @param {?} e
* @return {?}
*/
function (e) {
return e.target === _this._root;
})))
.subscribe((/**
* @return {?}
*/
function () {
return _this._ngZone.run((/**
* @return {?}
*/
function () { return _this._foundation.handleAnimationEnd(); }));
}));
}));
};
MdcCheckbox.decorators = [
{ type: core.Component, args: [{selector: 'mdc-checkbox',
exportAs: 'mdcCheckbox',
host: {
'[id]': 'id',
'class': 'mdc-checkbox',
'[class.mdc-checkbox--touch]': 'touch',
},
template: "\n <input type=\"checkbox\"\n #input\n class=\"mdc-checkbox__native-control\"\n [id]=\"inputId\"\n [attr.name]=\"name\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [attr.value]=\"value\"\n [indeterminate]=\"indeterminate\"\n (change)=\"_onInteraction($event)\"\n (click)=\"_onInputClick($event)\"/>\n <div class=\"mdc-checkbox__background\">\n <svg\n class=\"mdc-checkbox__checkmark\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\">\n <path class=\"mdc-checkbox__checkmark-path\"\n fill=\"none\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n </svg>\n <div class=\"mdc-checkbox__mixedmark\"></div>\n </div>\n <div *ngIf=\"!disableRipple && !disabled\" class=\"mdc-checkbox__ripple\"></div>\n ",
providers: [
MDC_CHECKBOX_CONTROL_VALUE_ACCESSOR,
ripple$1.MdcRipple,
{ provide: formField.MdcFormFieldControl, useExisting: MdcCheckbox }
],
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcCheckbox.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: ripple$1.MdcRipple },
{ type: formField.MdcFormField, decorators: [{ type: core.Optional }] }
]; };
MdcCheckbox.propDecorators = {
id: [{ type: core.Input }],
name: [{ type: core.Input }],
checked: [{ type: core.Input }],
touch: [{ type: core.Input }],
disabled: [{ type: core.Input }],
value: [{ type: core.Input }],
indeterminate: [{ type: core.Input }],
indeterminateToChecked: [{ type: core.Input }],
disableRipple: [{ type: core.Input }],
tabIndex: [{ type: core.Input }],
ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
change: [{ type: core.Output }],
indeterminateChange: [{ type: core.Output }],
_inputElement: [{ type: core.ViewChild, args: ['input', { static: true },] }]
};
return MdcCheckbox;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: checkbox/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcCheckboxModule = /** @class */ (function () {
function MdcCheckboxModule() {
}
MdcCheckboxModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, formField.MdcFormFieldModule],
exports: [
formField.MdcFormFieldModule,
MdcCheckbox
],
declarations: [MdcCheckbox]
},] },
];
return MdcCheckboxModule;
}());
exports.MDC_CHECKBOX_CONTROL_VALUE_ACCESSOR = MDC_CHECKBOX_CONTROL_VALUE_ACCESSOR;
exports.MdcCheckbox = MdcCheckbox;
exports.MdcCheckboxChange = MdcCheckboxChange;
exports.MdcCheckboxModule = MdcCheckboxModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-checkbox.umd.js.map