@material/checkbox
Version:
The Material Components for the web checkbox component
189 lines • 9.01 kB
JavaScript
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import { __assign, __extends } from "tslib";
import { MDCFoundation } from '@material/base/foundation';
import { cssClasses, numbers, strings } from './constants';
var MDCCheckboxFoundation = /** @class */ (function (_super) {
__extends(MDCCheckboxFoundation, _super);
function MDCCheckboxFoundation(adapter) {
var _this = _super.call(this, __assign(__assign({}, MDCCheckboxFoundation.defaultAdapter), adapter)) || this;
_this.currentCheckState = strings.TRANSITION_STATE_INIT;
_this.currentAnimationClass = '';
_this.animEndLatchTimer = 0;
_this.enableAnimationEndHandler = false;
return _this;
}
Object.defineProperty(MDCCheckboxFoundation, "cssClasses", {
get: function () {
return cssClasses;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCCheckboxFoundation, "strings", {
get: function () {
return strings;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCCheckboxFoundation, "numbers", {
get: function () {
return numbers;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCCheckboxFoundation, "defaultAdapter", {
get: function () {
return {
addClass: function () { return undefined; },
forceLayout: function () { return undefined; },
hasNativeControl: function () { return false; },
isAttachedToDOM: function () { return false; },
isChecked: function () { return false; },
isIndeterminate: function () { return false; },
removeClass: function () { return undefined; },
removeNativeControlAttr: function () { return undefined; },
setNativeControlAttr: function () { return undefined; },
setNativeControlDisabled: function () { return undefined; },
};
},
enumerable: false,
configurable: true
});
MDCCheckboxFoundation.prototype.init = function () {
this.currentCheckState = this.determineCheckState();
this.updateAriaChecked();
this.adapter.addClass(cssClasses.UPGRADED);
};
MDCCheckboxFoundation.prototype.destroy = function () {
clearTimeout(this.animEndLatchTimer);
};
MDCCheckboxFoundation.prototype.setDisabled = function (disabled) {
this.adapter.setNativeControlDisabled(disabled);
if (disabled) {
this.adapter.addClass(cssClasses.DISABLED);
}
else {
this.adapter.removeClass(cssClasses.DISABLED);
}
};
/**
* Handles the animationend event for the checkbox
*/
MDCCheckboxFoundation.prototype.handleAnimationEnd = function () {
var _this = this;
if (!this.enableAnimationEndHandler) {
return;
}
clearTimeout(this.animEndLatchTimer);
this.animEndLatchTimer = setTimeout(function () {
_this.adapter.removeClass(_this.currentAnimationClass);
_this.enableAnimationEndHandler = false;
}, numbers.ANIM_END_LATCH_MS);
};
/**
* Handles the change event for the checkbox
*/
MDCCheckboxFoundation.prototype.handleChange = function () {
this.transitionCheckState();
};
MDCCheckboxFoundation.prototype.transitionCheckState = function () {
if (!this.adapter.hasNativeControl()) {
return;
}
var oldState = this.currentCheckState;
var newState = this.determineCheckState();
if (oldState === newState) {
return;
}
this.updateAriaChecked();
var TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
var SELECTED = cssClasses.SELECTED;
if (newState === TRANSITION_STATE_UNCHECKED) {
this.adapter.removeClass(SELECTED);
}
else {
this.adapter.addClass(SELECTED);
}
// Check to ensure that there isn't a previously existing animation class, in case for example
// the user interacted with the checkbox before the animation was finished.
if (this.currentAnimationClass.length > 0) {
clearTimeout(this.animEndLatchTimer);
this.adapter.forceLayout();
this.adapter.removeClass(this.currentAnimationClass);
}
this.currentAnimationClass =
this.getTransitionAnimationClass(oldState, newState);
this.currentCheckState = newState;
// Check for parentNode so that animations are only run when the element is attached
// to the DOM.
if (this.adapter.isAttachedToDOM() &&
this.currentAnimationClass.length > 0) {
this.adapter.addClass(this.currentAnimationClass);
this.enableAnimationEndHandler = true;
}
};
MDCCheckboxFoundation.prototype.determineCheckState = function () {
var TRANSITION_STATE_INDETERMINATE = strings.TRANSITION_STATE_INDETERMINATE, TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
if (this.adapter.isIndeterminate()) {
return TRANSITION_STATE_INDETERMINATE;
}
return this.adapter.isChecked() ? TRANSITION_STATE_CHECKED :
TRANSITION_STATE_UNCHECKED;
};
MDCCheckboxFoundation.prototype.getTransitionAnimationClass = function (oldState, newState) {
var TRANSITION_STATE_INIT = strings.TRANSITION_STATE_INIT, TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
var _a = MDCCheckboxFoundation.cssClasses, ANIM_UNCHECKED_CHECKED = _a.ANIM_UNCHECKED_CHECKED, ANIM_UNCHECKED_INDETERMINATE = _a.ANIM_UNCHECKED_INDETERMINATE, ANIM_CHECKED_UNCHECKED = _a.ANIM_CHECKED_UNCHECKED, ANIM_CHECKED_INDETERMINATE = _a.ANIM_CHECKED_INDETERMINATE, ANIM_INDETERMINATE_CHECKED = _a.ANIM_INDETERMINATE_CHECKED, ANIM_INDETERMINATE_UNCHECKED = _a.ANIM_INDETERMINATE_UNCHECKED;
switch (oldState) {
case TRANSITION_STATE_INIT:
if (newState === TRANSITION_STATE_UNCHECKED) {
return '';
}
return newState === TRANSITION_STATE_CHECKED ? ANIM_INDETERMINATE_CHECKED : ANIM_INDETERMINATE_UNCHECKED;
case TRANSITION_STATE_UNCHECKED:
return newState === TRANSITION_STATE_CHECKED ? ANIM_UNCHECKED_CHECKED : ANIM_UNCHECKED_INDETERMINATE;
case TRANSITION_STATE_CHECKED:
return newState === TRANSITION_STATE_UNCHECKED ? ANIM_CHECKED_UNCHECKED : ANIM_CHECKED_INDETERMINATE;
default: // TRANSITION_STATE_INDETERMINATE
return newState === TRANSITION_STATE_CHECKED ? ANIM_INDETERMINATE_CHECKED : ANIM_INDETERMINATE_UNCHECKED;
}
};
MDCCheckboxFoundation.prototype.updateAriaChecked = function () {
// Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
if (this.adapter.isIndeterminate()) {
this.adapter.setNativeControlAttr(strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
}
else {
// The on/off state does not need to keep track of aria-checked, since
// the screenreader uses the checked property on the checkbox element.
this.adapter.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
}
};
return MDCCheckboxFoundation;
}(MDCFoundation));
export { MDCCheckboxFoundation };
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
export default MDCCheckboxFoundation;
//# sourceMappingURL=foundation.js.map