@material/ripple - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

constants.js

@@ -17,5 +17,2 @@ /**
 
-export const ROOT = 'mdc-ripple';
-export const UPGRADED = `${ROOT}-upgraded`;
-
 export const cssClasses = {
@@ -25,34 +22,25 @@ // Ripple is a special case where the "root" component is really a "mixin" of sorts,
   // CSS class that all other CSS classes derive from.
-  ROOT: UPGRADED,
-  UNBOUNDED: `${UPGRADED}--unbounded`,
-  BG_ACTIVE: `${UPGRADED}--background-active`,
-  BG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--background-bounded-active-fill`,
-  FG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--foreground-bounded-active-fill`,
-  FG_UNBOUNDED_ACTIVATION: `${UPGRADED}--foreground-unbounded-activation`,
-  FG_UNBOUNDED_DEACTIVATION: `${UPGRADED}--foreground-unbounded-deactivation`,
+  ROOT: 'mdc-ripple-upgraded',
+  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
+  BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+  BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
+  FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
+  FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
 };
 
 export const strings = {
-  VAR_SURFACE_WIDTH: `--${ROOT}-surface-width`,
-  VAR_SURFACE_HEIGHT: `--${ROOT}-surface-height`,
-  VAR_FG_SIZE: `--${ROOT}-fg-size`,
-  VAR_FG_UNBOUNDED_OPACITY_DURATION: `--${ROOT}-fg-unbounded-opacity-duration`,
-  VAR_FG_UNBOUNDED_TRANSFORM_DURATION: `--${ROOT}-fg-unbounded-transform-duration`,
-  VAR_LEFT: `--${ROOT}-left`,
-  VAR_TOP: `--${ROOT}-top`,
-  VAR_TRANSLATE_END: `--${ROOT}-translate-end`,
-  VAR_FG_APPROX_XF: `--${ROOT}-fg-approx-xf`,
-  VAR_FG_SCALE: `--${ROOT}-fg-scale`,
-  VAR_FG_TRANSLATE_START: `--${ROOT}-fg-translate-start`,
-  VAR_FG_TRANSLATE_END: `--${ROOT}-fg-translate-end`,
+  VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
+  VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
+  VAR_LEFT: '--mdc-ripple-left',
+  VAR_TOP: '--mdc-ripple-top',
+  VAR_FG_SCALE: '--mdc-ripple-fg-scale',
+  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+  VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
 };
 
 export const numbers = {
-  FG_TRANSFORM_DELAY_MS: 80,
-  OPACITY_DURATION_DIVISOR: 3,
-  ACTIVE_OPACITY_DURATION_MS: 110,
-  MIN_OPACITY_DURATION_MS: 200,
-  UNBOUNDED_TRANSFORM_DURATION_MS: 200,
   PADDING: 10,
   INITIAL_ORIGIN_SCALE: 0.6,
+  DEACTIVATION_TIMEOUT_MS: 300,
 };

dist/mdc.ripple.js

@@ -81,3 +81,3 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 45);
+/******/ 	return __webpack_require__(__webpack_require__.s = 54);
 /******/ })
@@ -335,135 +335,4 @@ /************************************************************************/
 "use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony export (immutable) */ __webpack_exports__["getCorrectEventName"] = getCorrectEventName;
-/* harmony export (immutable) */ __webpack_exports__["getCorrectPropertyName"] = getCorrectPropertyName;
-/**
- * Copyright 2016 Google Inc. 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
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-var eventTypeMap = {
-  animationstart: {
-    noPrefix: 'animationstart',
-    webkitPrefix: 'webkitAnimationStart'
-  },
-  animationend: {
-    noPrefix: 'animationend',
-    webkitPrefix: 'webkitAnimationEnd'
-  },
-  animationiteration: {
-    noPrefix: 'animationiteration',
-    webkitPrefix: 'webkitAnimationIteration'
-  },
-  transitionend: {
-    noPrefix: 'transitionend',
-    webkitPrefix: 'webkitTransitionEnd'
-  }
-};
-
-var cssPropertyMap = {
-  animation: {
-    noPrefix: 'animation',
-    webkitPrefix: '-webkit-animation'
-  },
-  transform: {
-    noPrefix: 'transform',
-    webkitPrefix: '-webkit-transform'
-  },
-  transition: {
-    noPrefix: 'transition',
-    webkitPrefix: '-webkit-transition'
-  }
-};
-
-function hasProperShape(windowObj) {
-  return windowObj.document !== undefined && typeof windowObj.document.createElement === 'function';
-}
-
-function eventFoundInMaps(eventType) {
-  return eventType in eventTypeMap || eventType in cssPropertyMap;
-}
-
-// If 'animation' or 'transition' exist as style property, webkit prefix isn't necessary. Since we are unable to
-// see the event types on the element, we must rely on the corresponding style properties.
-function getJavaScriptEventName(eventType, map, el) {
-  switch (eventType) {
-    case 'animationstart':
-    case 'animationend':
-    case 'animationiteration':
-      return 'animation' in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix;
-    case 'transitionend':
-      return 'transition' in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix;
-    default:
-      return map[eventType].noPrefix;
-  }
-}
-
-// Helper function to determine browser prefix for CSS3 animation events
-// and property names
-//
-// Parameters:
-// windowObject: Object -- Contains Document with a `createElement()` method
-// eventType: string -- The type of animation
-//
-// returns the value of the event as a string, prefixed if necessary.
-// If proper arguments are not supplied, this function will return
-// the property or event type without webkit prefix.
-//
-function getAnimationName(windowObj, eventType) {
-  if (!hasProperShape(windowObj) || !eventFoundInMaps(eventType)) {
-    return eventType;
-  }
-
-  var map = eventType in eventTypeMap ? eventTypeMap : cssPropertyMap;
-  var el = windowObj.document.createElement('div');
-  var eventName = '';
-
-  if (map === eventTypeMap) {
-    eventName = getJavaScriptEventName(eventType, map, el);
-  } else {
-    eventName = map[eventType].noPrefix in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix;
-  }
-
-  return eventName;
-}
-
-// Public functions to access getAnimationName() for JavaScript events or CSS
-// property names.
-//
-// Parameters:
-// windowObject: Object -- Contains Document with a `createElement()` method
-// eventType: string -- The type of animation
-//
-// returns the value of the event as a string, prefixed if necessary.
-// If proper arguments are not supplied, this function will return
-// the property or event type without webkit prefix.
-//
-function getCorrectEventName(windowObj, eventType) {
-  return getAnimationName(windowObj, eventType);
-}
-
-function getCorrectPropertyName(windowObj, eventType) {
-  return getAnimationName(windowObj, eventType);
-}
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
 /* harmony export (immutable) */ __webpack_exports__["b"] = supportsCssVariables;
 /* harmony export (immutable) */ __webpack_exports__["a"] = getMatchesProperty;
-/* harmony export (immutable) */ __webpack_exports__["d"] = animateWithClass;
 /* harmony export (immutable) */ __webpack_exports__["c"] = getNormalizedEventCoords;
@@ -505,17 +374,2 @@ /**
 
-function animateWithClass(rippleAdapter, cls, endEvent) {
-  var cancelled = false;
-  var cancel = function cancel() {
-    if (cancelled) {
-      return;
-    }
-    cancelled = true;
-    rippleAdapter.removeClass(cls);
-    rippleAdapter.deregisterInteractionHandler(endEvent, cancel);
-  };
-  rippleAdapter.registerInteractionHandler(endEvent, cancel);
-  rippleAdapter.addClass(cls);
-  return cancel;
-}
-
 function getNormalizedEventCoords(ev, pageOffset, clientRect) {
@@ -531,3 +385,3 @@ var x = pageOffset.x,
   // Determine touch point relative to the ripple container.
-  if (ev.type === 'touchend') {
+  if (ev.type === 'touchstart') {
     normalizedX = ev.changedTouches[0].pageX - documentX;
@@ -545,11 +399,3 @@ normalizedY = ev.changedTouches[0].pageY - documentY;
 
-/***/ 45:
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(5);
-
-
-/***/ }),
-
-/***/ 5:
+/***/ 4:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -560,4 +406,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util__ = __webpack_require__(3);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRippleFoundation", function() { return __WEBPACK_IMPORTED_MODULE_1__foundation__["a"]; });
@@ -704,8 +550,6 @@ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRipple", function() { return MDCRipple; });
 
-/***/ 6:
+/***/ 5:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* unused harmony export ROOT */
-/* unused harmony export UPGRADED */
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
@@ -730,5 +574,2 @@ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; });
 
-var ROOT = 'mdc-ripple';
-var UPGRADED = ROOT + '-upgraded';
-
 var cssClasses = {
@@ -738,34 +579,25 @@ // Ripple is a special case where the "root" component is really a "mixin" of sorts,
   // CSS class that all other CSS classes derive from.
-  ROOT: UPGRADED,
-  UNBOUNDED: UPGRADED + '--unbounded',
-  BG_ACTIVE: UPGRADED + '--background-active',
-  BG_BOUNDED_ACTIVE_FILL: UPGRADED + '--background-bounded-active-fill',
-  FG_BOUNDED_ACTIVE_FILL: UPGRADED + '--foreground-bounded-active-fill',
-  FG_UNBOUNDED_ACTIVATION: UPGRADED + '--foreground-unbounded-activation',
-  FG_UNBOUNDED_DEACTIVATION: UPGRADED + '--foreground-unbounded-deactivation'
+  ROOT: 'mdc-ripple-upgraded',
+  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
+  BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+  BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
+  FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
+  FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation'
 };
 
 var strings = {
-  VAR_SURFACE_WIDTH: '--' + ROOT + '-surface-width',
-  VAR_SURFACE_HEIGHT: '--' + ROOT + '-surface-height',
-  VAR_FG_SIZE: '--' + ROOT + '-fg-size',
-  VAR_FG_UNBOUNDED_OPACITY_DURATION: '--' + ROOT + '-fg-unbounded-opacity-duration',
-  VAR_FG_UNBOUNDED_TRANSFORM_DURATION: '--' + ROOT + '-fg-unbounded-transform-duration',
-  VAR_LEFT: '--' + ROOT + '-left',
-  VAR_TOP: '--' + ROOT + '-top',
-  VAR_TRANSLATE_END: '--' + ROOT + '-translate-end',
-  VAR_FG_APPROX_XF: '--' + ROOT + '-fg-approx-xf',
-  VAR_FG_SCALE: '--' + ROOT + '-fg-scale',
-  VAR_FG_TRANSLATE_START: '--' + ROOT + '-fg-translate-start',
-  VAR_FG_TRANSLATE_END: '--' + ROOT + '-fg-translate-end'
+  VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
+  VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
+  VAR_LEFT: '--mdc-ripple-left',
+  VAR_TOP: '--mdc-ripple-top',
+  VAR_FG_SCALE: '--mdc-ripple-fg-scale',
+  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+  VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end'
 };
 
 var numbers = {
-  FG_TRANSFORM_DELAY_MS: 80,
-  OPACITY_DURATION_DIVISOR: 3,
-  ACTIVE_OPACITY_DURATION_MS: 110,
-  MIN_OPACITY_DURATION_MS: 200,
-  UNBOUNDED_TRANSFORM_DURATION_MS: 200,
   PADDING: 10,
-  INITIAL_ORIGIN_SCALE: 0.6
+  INITIAL_ORIGIN_SCALE: 0.6,
+  DEACTIVATION_TIMEOUT_MS: 300
 };
@@ -775,3 +607,11 @@
 
-/***/ 7:
+/***/ 54:
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(4);
+
+
+/***/ }),
+
+/***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -781,5 +621,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__material_animation__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(6);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__constants__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util__ = __webpack_require__(3);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -816,3 +655,2 @@
 
-
 var DEACTIVATION_ACTIVATION_PAIRS = {
@@ -843,3 +681,3 @@ mouseup: 'mousedown',
     get: function get() {
-      return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */];
+      return __WEBPACK_IMPORTED_MODULE_1__constants__["a" /* cssClasses */];
     }
@@ -849,3 +687,3 @@ }, {
     get: function get() {
-      return __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */];
+      return __WEBPACK_IMPORTED_MODULE_1__constants__["b" /* strings */];
     }
@@ -855,3 +693,3 @@ }, {
     get: function get() {
-      return __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* numbers */];
+      return __WEBPACK_IMPORTED_MODULE_1__constants__["c" /* numbers */];
     }
@@ -899,3 +737,3 @@ }, {
         return requestAnimationFrame(function () {
-          return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_ACTIVE);
+          return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
         });
@@ -905,13 +743,9 @@ },
         return requestAnimationFrame(function () {
-          return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_ACTIVE);
+          return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
         });
       }
     };
-    _this.unboundedOpacityFadeTimer_ = 0;
     _this.resizeHandler_ = function () {
       return _this.layout();
     };
-    _this.cancelBgBounded_ = function () {};
-    _this.cancelFgBounded_ = function () {};
-    _this.cancelFgUnbounded_ = function () {};
     _this.unboundedCoords_ = {
@@ -922,2 +756,8 @@ left: 0,
     _this.fgScale_ = 0;
+    _this.activationTimer_ = 0;
+    _this.activationAnimationHasEnded_ = false;
+    _this.activationTimerCallback_ = function () {
+      _this.activationAnimationHasEnded_ = true;
+      _this.runDeactivationUXLogicIfReady_();
+    };
     return _this;
@@ -931,6 +771,8 @@ }
         isActivated: false,
+        hasDeactivationUXRun: false,
         wasActivatedByPointer: false,
         wasElementMadeActive: false,
         activationStartTime: 0,
-        activationEvent: null
+        activationEvent: null,
+        isProgrammatic: false
       };
@@ -987,4 +829,4 @@ }
       activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'pointerdown';
+      activationState.activationStartTime = Date.now();
 
-      activationState.activationStartTime = Date.now();
       requestAnimationFrame(function () {
@@ -1015,34 +857,97 @@ // This needs to be wrapped in an rAF call b/c web browsers
 
-      var _MDCRippleFoundation$2 = MDCRippleFoundation.cssClasses,
-          BG_ACTIVE = _MDCRippleFoundation$2.BG_ACTIVE,
-          BG_BOUNDED_ACTIVE_FILL = _MDCRippleFoundation$2.BG_BOUNDED_ACTIVE_FILL,
-          FG_UNBOUNDED_DEACTIVATION = _MDCRippleFoundation$2.FG_UNBOUNDED_DEACTIVATION,
-          FG_BOUNDED_ACTIVE_FILL = _MDCRippleFoundation$2.FG_BOUNDED_ACTIVE_FILL;
+      var _MDCRippleFoundation$2 = MDCRippleFoundation.strings,
+          VAR_FG_TRANSLATE_START = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_START,
+          VAR_FG_TRANSLATE_END = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_END;
+      var _MDCRippleFoundation$3 = MDCRippleFoundation.cssClasses,
+          BG_ACTIVE_FILL = _MDCRippleFoundation$3.BG_ACTIVE_FILL,
+          FG_DEACTIVATION = _MDCRippleFoundation$3.FG_DEACTIVATION,
+          FG_ACTIVATION = _MDCRippleFoundation$3.FG_ACTIVATION;
+      var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
 
-      // If ripple is currently deactivating, cancel those animations.
 
-      [BG_BOUNDED_ACTIVE_FILL, FG_UNBOUNDED_DEACTIVATION, FG_BOUNDED_ACTIVE_FILL].forEach(function (c) {
-        return _this5.adapter_.removeClass(c);
-      });
-      this.cancelBgBounded_();
-      this.cancelFgBounded_();
-      this.cancelFgUnbounded_();
-      if (this.unboundedOpacityFadeTimer_) {
-        clearTimeout(this.unboundedOpacityFadeTimer_);
-        this.unboundedOpacityFadeTimer_ = 0;
+      var translateStart = '';
+      var translateEnd = '';
+
+      if (!this.adapter_.isUnbounded()) {
+        var _getFgTranslationCoor = this.getFgTranslationCoordinates_(),
+            startPoint = _getFgTranslationCoor.startPoint,
+            endPoint = _getFgTranslationCoor.endPoint;
+
+        translateStart = startPoint.x + 'px, ' + startPoint.y + 'px';
+        translateEnd = endPoint.x + 'px, ' + endPoint.y + 'px';
       }
 
-      this.adapter_.addClass(BG_ACTIVE);
-      if (this.adapter_.isUnbounded()) {
-        this.animateUnboundedActivation_();
+      this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
+      this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
+      // Cancel any ongoing activation/deactivation animations
+      clearTimeout(this.activationTimer_);
+      this.rmBoundedActivationClasses_();
+      this.adapter_.removeClass(FG_DEACTIVATION);
+
+      // Force layout in order to re-trigger the animation.
+      this.adapter_.computeBoundingRect();
+      this.adapter_.addClass(BG_ACTIVE_FILL);
+      this.adapter_.addClass(FG_ACTIVATION);
+      this.activationTimer_ = setTimeout(function () {
+        return _this5.activationTimerCallback_();
+      }, DEACTIVATION_TIMEOUT_MS);
+    }
+  }, {
+    key: 'getFgTranslationCoordinates_',
+    value: function getFgTranslationCoordinates_() {
+      var activationState = this.activationState_;
+      var activationEvent = activationState.activationEvent,
+          wasActivatedByPointer = activationState.wasActivatedByPointer;
+
+
+      var startPoint = void 0;
+      if (wasActivatedByPointer) {
+        startPoint = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util__["c" /* getNormalizedEventCoords */])(activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
+      } else {
+        startPoint = {
+          x: this.frame_.width / 2,
+          y: this.frame_.height / 2
+        };
       }
+      // Center the element around the start point.
+      startPoint = {
+        x: startPoint.x - this.initialSize_ / 2,
+        y: startPoint.y - this.initialSize_ / 2
+      };
+
+      var endPoint = {
+        x: this.frame_.width / 2 - this.initialSize_ / 2,
+        y: this.frame_.height / 2 - this.initialSize_ / 2
+      };
+
+      return { startPoint: startPoint, endPoint: endPoint };
     }
   }, {
-    key: 'animateUnboundedActivation_',
-    value: function animateUnboundedActivation_() {
-      var FG_UNBOUNDED_ACTIVATION = MDCRippleFoundation.cssClasses.FG_UNBOUNDED_ACTIVATION;
+    key: 'runDeactivationUXLogicIfReady_',
+    value: function runDeactivationUXLogicIfReady_() {
+      var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
+      var _activationState_ = this.activationState_,
+          hasDeactivationUXRun = _activationState_.hasDeactivationUXRun,
+          isActivated = _activationState_.isActivated;
 
-      this.adapter_.addClass(FG_UNBOUNDED_ACTIVATION);
+      var activationHasEnded = hasDeactivationUXRun || !isActivated;
+      if (activationHasEnded && this.activationAnimationHasEnded_) {
+        this.rmBoundedActivationClasses_();
+        // Note that we don't need to remove this here since it's removed on re-activation.
+        this.adapter_.addClass(FG_DEACTIVATION);
+      }
     }
   }, {
+    key: 'rmBoundedActivationClasses_',
+    value: function rmBoundedActivationClasses_() {
+      var _MDCRippleFoundation$4 = MDCRippleFoundation.cssClasses,
+          BG_ACTIVE_FILL = _MDCRippleFoundation$4.BG_ACTIVE_FILL,
+          FG_ACTIVATION = _MDCRippleFoundation$4.FG_ACTIVATION;
+
+      this.adapter_.removeClass(BG_ACTIVE_FILL);
+      this.adapter_.removeClass(FG_ACTIVATION);
+      this.activationAnimationHasEnded_ = false;
+      this.adapter_.computeBoundingRect();
+    }
+  }, {
     key: 'deactivate_',
@@ -1060,4 +965,5 @@ value: function deactivate_(e) {
       if (activationState.isProgrammatic) {
+        var evtObject = null;
         requestAnimationFrame(function () {
-          return _this6.animateDeactivation_(null, _extends({}, activationState));
+          return _this6.animateDeactivation_(evtObject, _extends({}, activationState));
         });
@@ -1067,2 +973,3 @@ this.activationState_ = this.defaultActivationState_();
       }
+
       var actualActivationType = DEACTIVATION_ACTIVATION_PAIRS[e.type];
@@ -1081,10 +988,12 @@ var expectedActivationType = activationState.activationEvent.type;
       var state = _extends({}, activationState);
-      if (needsDeactivationUX) {
-        requestAnimationFrame(function () {
-          return _this6.animateDeactivation_(e, state);
-        });
-      }
-      if (needsActualDeactivation) {
-        this.activationState_ = this.defaultActivationState_();
-      }
+      requestAnimationFrame(function () {
+        if (needsDeactivationUX) {
+          _this6.activationState_.hasDeactivationUXRun = true;
+          _this6.animateDeactivation_(e, state);
+        }
+
+        if (needsActualDeactivation) {
+          _this6.activationState_ = _this6.defaultActivationState_();
+        }
+      });
     }
@@ -1100,107 +1009,15 @@ }, {
       var wasActivatedByPointer = _ref.wasActivatedByPointer,
-          wasElementMadeActive = _ref.wasElementMadeActive,
-          activationStartTime = _ref.activationStartTime,
-          isProgrammatic = _ref.isProgrammatic;
-      var BG_ACTIVE = MDCRippleFoundation.cssClasses.BG_ACTIVE;
+          wasElementMadeActive = _ref.wasElementMadeActive;
+      var BG_FOCUSED = MDCRippleFoundation.cssClasses.BG_FOCUSED;
 
       if (wasActivatedByPointer || wasElementMadeActive) {
-        this.adapter_.removeClass(BG_ACTIVE);
-        var isPointerEvent = isProgrammatic ? false : e.type === 'touchend' || e.type === 'pointerup' || e.type === 'mouseup';
-        if (this.adapter_.isUnbounded()) {
-          this.animateUnboundedDeactivation_(this.getUnboundedDeactivationInfo_(activationStartTime));
-        } else {
-          this.animateBoundedDeactivation_(e, isPointerEvent);
-        }
+        // Remove class left over by element being focused
+        this.adapter_.removeClass(BG_FOCUSED);
+        this.runDeactivationUXLogicIfReady_();
       }
     }
   }, {
-    key: 'animateUnboundedDeactivation_',
-    value: function animateUnboundedDeactivation_(_ref2) {
-      var _this7 = this;
-
-      var opacityDuration = _ref2.opacityDuration,
-          transformDuration = _ref2.transformDuration,
-          approxCurScale = _ref2.approxCurScale;
-      var _MDCRippleFoundation$3 = MDCRippleFoundation.cssClasses,
-          FG_UNBOUNDED_ACTIVATION = _MDCRippleFoundation$3.FG_UNBOUNDED_ACTIVATION,
-          FG_UNBOUNDED_DEACTIVATION = _MDCRippleFoundation$3.FG_UNBOUNDED_DEACTIVATION;
-      var _MDCRippleFoundation$4 = MDCRippleFoundation.strings,
-          VAR_FG_UNBOUNDED_OPACITY_DURATION = _MDCRippleFoundation$4.VAR_FG_UNBOUNDED_OPACITY_DURATION,
-          VAR_FG_UNBOUNDED_TRANSFORM_DURATION = _MDCRippleFoundation$4.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,
-          VAR_FG_APPROX_XF = _MDCRippleFoundation$4.VAR_FG_APPROX_XF;
-
-
-      this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, 'scale(' + approxCurScale + ')');
-      this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, opacityDuration + 'ms');
-      this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, transformDuration + 'ms');
-      this.adapter_.addClass(FG_UNBOUNDED_DEACTIVATION);
-      this.adapter_.removeClass(FG_UNBOUNDED_ACTIVATION);
-      // We use setTimeout here since we know how long the fade will take.
-      this.unboundedOpacityFadeTimer_ = setTimeout(function () {
-        _this7.adapter_.removeClass(FG_UNBOUNDED_DEACTIVATION);
-      }, opacityDuration);
-    }
-  }, {
-    key: 'getUnboundedDeactivationInfo_',
-    value: function getUnboundedDeactivationInfo_(activationStartTime) {
-      var msElapsed = Date.now() - activationStartTime;
-      var _MDCRippleFoundation$5 = MDCRippleFoundation.numbers,
-          FG_TRANSFORM_DELAY_MS = _MDCRippleFoundation$5.FG_TRANSFORM_DELAY_MS,
-          OPACITY_DURATION_DIVISOR = _MDCRippleFoundation$5.OPACITY_DURATION_DIVISOR,
-          ACTIVE_OPACITY_DURATION_MS = _MDCRippleFoundation$5.ACTIVE_OPACITY_DURATION_MS,
-          UNBOUNDED_TRANSFORM_DURATION_MS = _MDCRippleFoundation$5.UNBOUNDED_TRANSFORM_DURATION_MS,
-          MIN_OPACITY_DURATION_MS = _MDCRippleFoundation$5.MIN_OPACITY_DURATION_MS;
-
-
-      var approxCurScale = 0;
-      if (msElapsed > FG_TRANSFORM_DELAY_MS) {
-        var percentComplete = Math.min((msElapsed - FG_TRANSFORM_DELAY_MS) / this.xfDuration_, 1);
-        approxCurScale = percentComplete * this.fgScale_;
-      }
-
-      var transformDuration = UNBOUNDED_TRANSFORM_DURATION_MS;
-      var approxOpacity = Math.min(msElapsed / ACTIVE_OPACITY_DURATION_MS, 1);
-      var opacityDuration = Math.max(MIN_OPACITY_DURATION_MS, 1000 * approxOpacity / OPACITY_DURATION_DIVISOR);
-
-      return { transformDuration: transformDuration, opacityDuration: opacityDuration, approxCurScale: approxCurScale };
-    }
-  }, {
-    key: 'animateBoundedDeactivation_',
-    value: function animateBoundedDeactivation_(e, isPointerEvent) {
-      var startPoint = void 0;
-      if (isPointerEvent) {
-        startPoint = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["c" /* getNormalizedEventCoords */])(e, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
-      } else {
-        startPoint = {
-          x: this.frame_.width / 2,
-          y: this.frame_.height / 2
-        };
-      }
-
-      startPoint = {
-        x: startPoint.x - this.initialSize_ / 2,
-        y: startPoint.y - this.initialSize_ / 2
-      };
-
-      var endPoint = {
-        x: this.frame_.width / 2 - this.initialSize_ / 2,
-        y: this.frame_.height / 2 - this.initialSize_ / 2
-      };
-
-      var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
-          VAR_FG_TRANSLATE_START = _MDCRippleFoundation$6.VAR_FG_TRANSLATE_START,
-          VAR_FG_TRANSLATE_END = _MDCRippleFoundation$6.VAR_FG_TRANSLATE_END;
-      var _MDCRippleFoundation$7 = MDCRippleFoundation.cssClasses,
-          BG_BOUNDED_ACTIVE_FILL = _MDCRippleFoundation$7.BG_BOUNDED_ACTIVE_FILL,
-          FG_BOUNDED_ACTIVE_FILL = _MDCRippleFoundation$7.FG_BOUNDED_ACTIVE_FILL;
-
-      this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, startPoint.x + 'px, ' + startPoint.y + 'px');
-      this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, endPoint.x + 'px, ' + endPoint.y + 'px');
-      this.cancelBgBounded_ = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["d" /* animateWithClass */])(this.adapter_, BG_BOUNDED_ACTIVE_FILL, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__material_animation__["getCorrectEventName"])(window, 'transitionend'));
-      this.cancelFgBounded_ = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["d" /* animateWithClass */])(this.adapter_, FG_BOUNDED_ACTIVE_FILL, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__material_animation__["getCorrectEventName"])(window, 'animationend'));
-    }
-  }, {
     key: 'destroy',
     value: function destroy() {
-      var _this8 = this;
+      var _this7 = this;
 
@@ -1212,10 +1029,10 @@ if (!this.isSupported_) {
 
-      var _MDCRippleFoundation$8 = MDCRippleFoundation.cssClasses,
-          ROOT = _MDCRippleFoundation$8.ROOT,
-          UNBOUNDED = _MDCRippleFoundation$8.UNBOUNDED;
+      var _MDCRippleFoundation$5 = MDCRippleFoundation.cssClasses,
+          ROOT = _MDCRippleFoundation$5.ROOT,
+          UNBOUNDED = _MDCRippleFoundation$5.UNBOUNDED;
 
       requestAnimationFrame(function () {
-        _this8.adapter_.removeClass(ROOT);
-        _this8.adapter_.removeClass(UNBOUNDED);
-        _this8.removeCssVars_();
+        _this7.adapter_.removeClass(ROOT);
+        _this7.adapter_.removeClass(UNBOUNDED);
+        _this7.removeCssVars_();
       });
@@ -1226,7 +1043,7 @@ }
     value: function removeEventListeners_() {
-      var _this9 = this;
+      var _this8 = this;
 
       this.listenerInfos_.forEach(function (info) {
         Object.keys(info).forEach(function (k) {
-          _this9.adapter_.deregisterInteractionHandler(info[k], _this9.listeners_[k]);
+          _this8.adapter_.deregisterInteractionHandler(info[k], _this8.listeners_[k]);
         });
@@ -1239,3 +1056,3 @@ });
     value: function removeCssVars_() {
-      var _this10 = this;
+      var _this9 = this;
 
@@ -1246,3 +1063,3 @@ var strings = MDCRippleFoundation.strings;
         if (k.indexOf('VAR_') === 0) {
-          _this10.adapter_.updateCssVariable(strings[k], null);
+          _this9.adapter_.updateCssVariable(strings[k], null);
         }
@@ -1254,3 +1071,3 @@ });
     value: function layout() {
-      var _this11 = this;
+      var _this10 = this;
 
@@ -1261,4 +1078,4 @@ if (this.layoutFrame_) {
       this.layoutFrame_ = requestAnimationFrame(function () {
-        _this11.layoutInternal_();
-        _this11.layoutFrame_ = 0;
+        _this10.layoutInternal_();
+        _this10.layoutFrame_ = 0;
       });
@@ -1286,10 +1103,9 @@ }
     value: function updateLayoutCssVars_() {
-      var _MDCRippleFoundation$9 = MDCRippleFoundation.strings,
-          VAR_SURFACE_WIDTH = _MDCRippleFoundation$9.VAR_SURFACE_WIDTH,
-          VAR_SURFACE_HEIGHT = _MDCRippleFoundation$9.VAR_SURFACE_HEIGHT,
-          VAR_FG_SIZE = _MDCRippleFoundation$9.VAR_FG_SIZE,
-          VAR_FG_UNBOUNDED_TRANSFORM_DURATION = _MDCRippleFoundation$9.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,
-          VAR_LEFT = _MDCRippleFoundation$9.VAR_LEFT,
-          VAR_TOP = _MDCRippleFoundation$9.VAR_TOP,
-          VAR_FG_SCALE = _MDCRippleFoundation$9.VAR_FG_SCALE;
+      var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
+          VAR_SURFACE_WIDTH = _MDCRippleFoundation$6.VAR_SURFACE_WIDTH,
+          VAR_SURFACE_HEIGHT = _MDCRippleFoundation$6.VAR_SURFACE_HEIGHT,
+          VAR_FG_SIZE = _MDCRippleFoundation$6.VAR_FG_SIZE,
+          VAR_LEFT = _MDCRippleFoundation$6.VAR_LEFT,
+          VAR_TOP = _MDCRippleFoundation$6.VAR_TOP,
+          VAR_FG_SCALE = _MDCRippleFoundation$6.VAR_FG_SCALE;
 
@@ -1300,3 +1116,2 @@
       this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + 'px');
-      this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, this.xfDuration_ + 'ms');
       this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
@@ -1303,0 +1118,0 @@

dist/mdc.ripple.min.js

@@ -6,2 +6,2 @@ /*!
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ripple=e():(t.mdc=t.mdc||{},t.mdc.ripple=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=45)}({0:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1);n.d(e,"MDCFoundation",function(){return i.a});var a=n(2);n.d(e,"MDCComponent",function(){return a.a})},1:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},2:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(1),r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(t,{detail:e}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(t,!1,!1,e)),this.root_.dispatchEvent(n)}}]),t}();e.a=o},3:function(t,e,n){"use strict";function i(t){return void 0!==t.document&&"function"==typeof t.document.createElement}function a(t){return t in c||t in d}function r(t,e,n){switch(t){case"animationstart":case"animationend":case"animationiteration":return"animation"in n.style?e[t].noPrefix:e[t].webkitPrefix;case"transitionend":return"transition"in n.style?e[t].noPrefix:e[t].webkitPrefix;default:return e[t].noPrefix}}function o(t,e){if(!i(t)||!a(e))return e;var n=e in c?c:d,o=t.document.createElement("div"),s="";return s=n===c?r(e,n,o):n[e].noPrefix in o.style?n[e].noPrefix:n[e].webkitPrefix}function s(t,e){return o(t,e)}function u(t,e){return o(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.getCorrectEventName=s,e.getCorrectPropertyName=u;var c={animationstart:{noPrefix:"animationstart",webkitPrefix:"webkitAnimationStart"},animationend:{noPrefix:"animationend",webkitPrefix:"webkitAnimationEnd"},animationiteration:{noPrefix:"animationiteration",webkitPrefix:"webkitAnimationIteration"},transitionend:{noPrefix:"transitionend",webkitPrefix:"webkitTransitionEnd"}},d={animation:{noPrefix:"animation",webkitPrefix:"-webkit-animation"},transform:{noPrefix:"transform",webkitPrefix:"-webkit-transform"},transition:{noPrefix:"transition",webkitPrefix:"-webkit-transition"}}},4:function(t,e,n){"use strict";function i(t){var e=t.CSS&&"function"==typeof t.CSS.supports;if(e){var n=t.CSS.supports("--css-vars","yes"),i=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n||i}}function a(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function r(t,e,n){var i=!1,a=function a(){i||(i=!0,t.removeClass(e),t.deregisterInteractionHandler(n,a))};return t.registerInteractionHandler(n,a),t.addClass(e),a}function o(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchend"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{x:s,y:u}}e.b=i,e.a=a,e.d=r,e.c=o},45:function(t,e,n){t.exports=n(5)},5:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=n(0),s=n(7),u=n(4);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"MDCRipple",function(){return f});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=n.i(u.a)(HTMLElement.prototype),f=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return r(e,t),c(e,[{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"getDefaultFoundation",value:function(){return new s.a(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){var e=s.a.cssClasses.UNBOUNDED;this.unbounded_=Boolean(t),this.unbounded_?this.root_.classList.add(e):this.root_.classList.remove(e)}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){return{browserSupportsCssVars:function(){return n.i(u.b)(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[d](":active")},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(o.MDCComponent)},6:function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return o}),n.d(e,"c",function(){return s});var i="mdc-ripple",a=i+"-upgraded",r={ROOT:a,UNBOUNDED:a+"--unbounded",BG_ACTIVE:a+"--background-active",BG_BOUNDED_ACTIVE_FILL:a+"--background-bounded-active-fill",FG_BOUNDED_ACTIVE_FILL:a+"--foreground-bounded-active-fill",FG_UNBOUNDED_ACTIVATION:a+"--foreground-unbounded-activation",FG_UNBOUNDED_DEACTIVATION:a+"--foreground-unbounded-deactivation"},o={VAR_SURFACE_WIDTH:"--"+i+"-surface-width",VAR_SURFACE_HEIGHT:"--"+i+"-surface-height",VAR_FG_SIZE:"--"+i+"-fg-size",VAR_FG_UNBOUNDED_OPACITY_DURATION:"--"+i+"-fg-unbounded-opacity-duration",VAR_FG_UNBOUNDED_TRANSFORM_DURATION:"--"+i+"-fg-unbounded-transform-duration",VAR_LEFT:"--"+i+"-left",VAR_TOP:"--"+i+"-top",VAR_TRANSLATE_END:"--"+i+"-translate-end",VAR_FG_APPROX_XF:"--"+i+"-fg-approx-xf",VAR_FG_SCALE:"--"+i+"-fg-scale",VAR_FG_TRANSLATE_START:"--"+i+"-fg-translate-start",VAR_FG_TRANSLATE_END:"--"+i+"-fg-translate-end"},s={FG_TRANSFORM_DELAY_MS:80,OPACITY_DURATION_DIVISOR:3,ACTIVE_OPACITY_DURATION_MS:110,MIN_OPACITY_DURATION_MS:200,UNBOUNDED_TRANSFORM_DURATION_MS:200,PADDING:10,INITIAL_ORIGIN_SCALE:.6}},7:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),s=n(3),u=n(6),c=n(4),d=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),_={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},l=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,d(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.xfDuration_=0,n.initialSize_=0,n.maxRadius_=0,n.listenerInfos_=[{activate:"touchstart",deactivate:"touchend"},{activate:"pointerdown",deactivate:"pointerup"},{activate:"mousedown",deactivate:"mouseup"},{activate:"keydown",deactivate:"keyup"},{focus:"focus",blur:"blur"}],n.listeners_={activate:function(t){return n.activate_(t)},deactivate:function(t){return n.deactivate_(t)},focus:function(){return requestAnimationFrame(function(){return n.adapter_.addClass(e.cssClasses.BG_ACTIVE)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_ACTIVE)})}},n.unboundedOpacityFadeTimer_=0,n.resizeHandler_=function(){return n.layout()},n.cancelBgBounded_=function(){},n.cancelFgBounded_=function(){},n.cancelFgUnbounded_=function(){},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n}return r(e,t),f(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return u.a}},{key:"strings",get:function(){return u.b}},{key:"numbers",get:function(){return u.c}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),f(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null}}},{key:"init",value:function(){var t=this;if(this.isSupported_){this.addEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(i),t.adapter_.isUnbounded()&&t.adapter_.addClass(a),t.layoutInternal_()})}}},{key:"addEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.registerInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"activate_",value:function(t){var e=this,n=this.activationState_;n.isActivated||(n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type),n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive=!t||"keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}},{key:"activate",value:function(){this.activate_(null)}},{key:"animateActivation_",value:function(){var t=this,n=e.cssClasses,i=n.BG_ACTIVE,a=n.BG_BOUNDED_ACTIVE_FILL,r=n.FG_UNBOUNDED_DEACTIVATION,o=n.FG_BOUNDED_ACTIVE_FILL;[a,r,o].forEach(function(e){return t.adapter_.removeClass(e)}),this.cancelBgBounded_(),this.cancelFgBounded_(),this.cancelFgUnbounded_(),this.unboundedOpacityFadeTimer_&&(clearTimeout(this.unboundedOpacityFadeTimer_),this.unboundedOpacityFadeTimer_=0),this.adapter_.addClass(i),this.adapter_.isUnbounded()&&this.animateUnboundedActivation_()}},{key:"animateUnboundedActivation_",value:function(){var t=e.cssClasses.FG_UNBOUNDED_ACTIVATION;this.adapter_.addClass(t)}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){if(n.isProgrammatic)return requestAnimationFrame(function(){return e.animateDeactivation_(null,d({},n))}),void(this.activationState_=this.defaultActivationState_());var i=_[t.type],a=n.activationEvent.type,r=i===a,o=r;n.wasActivatedByPointer&&(o="mouseup"===t.type);var s=d({},n);r&&requestAnimationFrame(function(){return e.animateDeactivation_(t,s)}),o&&(this.activationState_=this.defaultActivationState_())}}},{key:"deactivate",value:function(){this.deactivate_(null)}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=n.activationStartTime,o=n.isProgrammatic,s=e.cssClasses.BG_ACTIVE;if(i||a){this.adapter_.removeClass(s);var u=!o&&("touchend"===t.type||"pointerup"===t.type||"mouseup"===t.type);this.adapter_.isUnbounded()?this.animateUnboundedDeactivation_(this.getUnboundedDeactivationInfo_(r)):this.animateBoundedDeactivation_(t,u)}}},{key:"animateUnboundedDeactivation_",value:function(t){var n=this,i=t.opacityDuration,a=t.transformDuration,r=t.approxCurScale,o=e.cssClasses,s=o.FG_UNBOUNDED_ACTIVATION,u=o.FG_UNBOUNDED_DEACTIVATION,c=e.strings,d=c.VAR_FG_UNBOUNDED_OPACITY_DURATION,f=c.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,_=c.VAR_FG_APPROX_XF;this.adapter_.updateCssVariable(_,"scale("+r+")"),this.adapter_.updateCssVariable(d,i+"ms"),this.adapter_.updateCssVariable(f,a+"ms"),this.adapter_.addClass(u),this.adapter_.removeClass(s),this.unboundedOpacityFadeTimer_=setTimeout(function(){n.adapter_.removeClass(u)},i)}},{key:"getUnboundedDeactivationInfo_",value:function(t){var n=Date.now()-t,i=e.numbers,a=i.FG_TRANSFORM_DELAY_MS,r=i.OPACITY_DURATION_DIVISOR,o=i.ACTIVE_OPACITY_DURATION_MS,s=i.UNBOUNDED_TRANSFORM_DURATION_MS,u=i.MIN_OPACITY_DURATION_MS,c=0;if(n>a){var d=Math.min((n-a)/this.xfDuration_,1);c=d*this.fgScale_}var f=s,_=Math.min(n/o,1),l=Math.max(u,1e3*_/r);return{transformDuration:f,opacityDuration:l,approxCurScale:c}}},{key:"animateBoundedDeactivation_",value:function(t,i){var a=void 0;a=i?n.i(c.c)(t,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},a={x:a.x-this.initialSize_/2,y:a.y-this.initialSize_/2};var r={x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2},o=e.strings,u=o.VAR_FG_TRANSLATE_START,d=o.VAR_FG_TRANSLATE_END,f=e.cssClasses,_=f.BG_BOUNDED_ACTIVE_FILL,l=f.FG_BOUNDED_ACTIVE_FILL;this.adapter_.updateCssVariable(u,a.x+"px, "+a.y+"px"),this.adapter_.updateCssVariable(d,r.x+"px, "+r.y+"px"),this.cancelBgBounded_=n.i(c.d)(this.adapter_,_,n.i(s.getCorrectEventName)(window,"transitionend")),this.cancelFgBounded_=n.i(c.d)(this.adapter_,l,n.i(s.getCorrectEventName)(window,"animationend"))}},{key:"destroy",value:function(){var t=this;if(this.isSupported_){this.removeEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(i),t.adapter_.removeClass(a),t.removeCssVars_()})}}},{key:"removeEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.deregisterInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){this.frame_=this.adapter_.computeBoundingRect();var t=Math.max(this.frame_.height,this.frame_.width),n=Math.sqrt(Math.pow(this.frame_.width,2)+Math.pow(this.frame_.height,2));this.initialSize_=t*e.numbers.INITIAL_ORIGIN_SCALE,this.maxRadius_=n+e.numbers.PADDING,this.fgScale_=this.maxRadius_/this.initialSize_,this.xfDuration_=1e3*Math.sqrt(this.maxRadius_/1024),this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_SURFACE_WIDTH,i=t.VAR_SURFACE_HEIGHT,a=t.VAR_FG_SIZE,r=t.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,o=t.VAR_LEFT,s=t.VAR_TOP,u=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.frame_.width+"px"),this.adapter_.updateCssVariable(i,this.frame_.height+"px"),this.adapter_.updateCssVariable(a,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,this.xfDuration_+"ms"),this.adapter_.updateCssVariable(u,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(o,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(s,this.unboundedCoords_.top+"px"))}}]),e}(o.MDCFoundation);e.a=l}})});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ripple=e():(t.mdc=t.mdc||{},t.mdc.ripple=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=54)}({0:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1);n.d(e,"MDCFoundation",function(){return i.a});var a=n(2);n.d(e,"MDCComponent",function(){return a.a})},1:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},2:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(1),r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(t,{detail:e}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(t,!1,!1,e)),this.root_.dispatchEvent(n)}}]),t}();e.a=o},3:function(t,e,n){"use strict";function i(t){var e=t.CSS&&"function"==typeof t.CSS.supports;if(e){var n=t.CSS.supports("--css-vars","yes"),i=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n||i}}function a(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function r(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchstart"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{x:s,y:u}}e.b=i,e.a=a,e.c=r},4:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=n(0),s=n(6),u=n(3);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"MDCRipple",function(){return f});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=n.i(u.a)(HTMLElement.prototype),f=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return r(e,t),c(e,[{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"getDefaultFoundation",value:function(){return new s.a(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){var e=s.a.cssClasses.UNBOUNDED;this.unbounded_=Boolean(t),this.unbounded_?this.root_.classList.add(e):this.root_.classList.remove(e)}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){return{browserSupportsCssVars:function(){return n.i(u.b)(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[d](":active")},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(o.MDCComponent)},5:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a}),n.d(e,"c",function(){return r});var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",BG_ACTIVE_FILL:"mdc-ripple-upgraded--background-active-fill",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_SURFACE_WIDTH:"--mdc-ripple-surface-width",VAR_SURFACE_HEIGHT:"--mdc-ripple-surface-height",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:300}},54:function(t,e,n){t.exports=n(4)},6:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),s=n(5),u=n(3),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},d=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),f={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},l=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.xfDuration_=0,n.initialSize_=0,n.maxRadius_=0,n.listenerInfos_=[{activate:"touchstart",deactivate:"touchend"},{activate:"pointerdown",deactivate:"pointerup"},{activate:"mousedown",deactivate:"mouseup"},{activate:"keydown",deactivate:"keyup"},{focus:"focus",blur:"blur"}],n.listeners_={activate:function(t){return n.activate_(t)},deactivate:function(t){return n.deactivate_(t)},focus:function(){return requestAnimationFrame(function(){return n.adapter_.addClass(e.cssClasses.BG_FOCUSED)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n}return r(e,t),d(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"numbers",get:function(){return s.c}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),d(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null,isProgrammatic:!1}}},{key:"init",value:function(){var t=this;if(this.isSupported_){this.addEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(i),t.adapter_.isUnbounded()&&t.adapter_.addClass(a),t.layoutInternal_()})}}},{key:"addEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.registerInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"activate_",value:function(t){var e=this,n=this.activationState_;n.isActivated||(n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type),n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive=!t||"keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}},{key:"activate",value:function(){this.activate_(null)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.BG_ACTIVE_FILL,s=r.FG_DEACTIVATION,u=r.FG_ACTIVATION,c=e.numbers.DEACTIVATION_TIMEOUT_MS,d="",f="";if(!this.adapter_.isUnbounded()){var l=this.getFgTranslationCoordinates_(),p=l.startPoint,_=l.endPoint;d=p.x+"px, "+p.y+"px",f=_.x+"px, "+_.y+"px"}this.adapter_.updateCssVariable(i,d),this.adapter_.updateCssVariable(a,f),clearTimeout(this.activationTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(s),this.adapter_.computeBoundingRect(),this.adapter_.addClass(o),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},c)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,i=t.wasActivatedByPointer,a=void 0;a=i?n.i(u.c)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},a={x:a.x-this.initialSize_/2,y:a.y-this.initialSize_/2};var r={x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2};return{startPoint:a,endPoint:r}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=e.cssClasses.FG_DEACTIVATION,n=this.activationState_,i=n.hasDeactivationUXRun,a=n.isActivated,r=i||!a;r&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(t))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses,n=t.BG_ACTIVE_FILL,i=t.FG_ACTIVATION;this.adapter_.removeClass(n),this.adapter_.removeClass(i),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){if(n.isProgrammatic){var i=null;return requestAnimationFrame(function(){return e.animateDeactivation_(i,c({},n))}),void(this.activationState_=this.defaultActivationState_())}var a=f[t.type],r=n.activationEvent.type,o=a===r,s=o;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=c({},n);requestAnimationFrame(function(){o&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,u)),s&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){this.deactivate_(null)}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=e.cssClasses.BG_FOCUSED;(i||a)&&(this.adapter_.removeClass(r),this.runDeactivationUXLogicIfReady_())}},{key:"destroy",value:function(){var t=this;if(this.isSupported_){this.removeEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(i),t.adapter_.removeClass(a),t.removeCssVars_()})}}},{key:"removeEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.deregisterInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){this.frame_=this.adapter_.computeBoundingRect();var t=Math.max(this.frame_.height,this.frame_.width),n=Math.sqrt(Math.pow(this.frame_.width,2)+Math.pow(this.frame_.height,2));this.initialSize_=t*e.numbers.INITIAL_ORIGIN_SCALE,this.maxRadius_=n+e.numbers.PADDING,this.fgScale_=this.maxRadius_/this.initialSize_,this.xfDuration_=1e3*Math.sqrt(this.maxRadius_/1024),this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_SURFACE_WIDTH,i=t.VAR_SURFACE_HEIGHT,a=t.VAR_FG_SIZE,r=t.VAR_LEFT,o=t.VAR_TOP,s=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.frame_.width+"px"),this.adapter_.updateCssVariable(i,this.frame_.height+"px"),this.adapter_.updateCssVariable(a,this.initialSize_+"px"),this.adapter_.updateCssVariable(s,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(r,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(o,this.unboundedCoords_.top+"px"))}}]),e}(o.MDCFoundation);e.a=l}})});

foundation.js

@@ -19,5 +19,4 @@ /**
 
-import {getCorrectEventName} from '@material/animation';
 import {cssClasses, strings, numbers} from './constants';
-import {animateWithClass, getNormalizedEventCoords} from './util';
+import {getNormalizedEventCoords} from './util';
 
@@ -89,13 +88,9 @@ const DEACTIVATION_ACTIVATION_PAIRS = {
       focus: () => requestAnimationFrame(
-        () => this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_ACTIVE)
+        () => this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED)
       ),
       blur: () => requestAnimationFrame(
-        () => this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_ACTIVE)
+        () => this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED)
       ),
     };
-    this.unboundedOpacityFadeTimer_ = 0;
     this.resizeHandler_ = () => this.layout();
-    this.cancelBgBounded_ = () => {};
-    this.cancelFgBounded_ = () => {};
-    this.cancelFgUnbounded_ = () => {};
     this.unboundedCoords_ = {
@@ -106,2 +101,8 @@ left: 0,
     this.fgScale_ = 0;
+    this.activationTimer_ = 0;
+    this.activationAnimationHasEnded_ = false;
+    this.activationTimerCallback_ = () => {
+      this.activationAnimationHasEnded_ = true;
+      this.runDeactivationUXLogicIfReady_();
+    };
   }
@@ -112,2 +113,3 @@
       isActivated: false,
+      hasDeactivationUXRun: false,
       wasActivatedByPointer: false,
@@ -117,2 +119,3 @@ wasElementMadeActive: false,
       activationEvent: null,
+      isProgrammatic: false,
     };
@@ -158,4 +161,4 @@ }
     );
+    activationState.activationStartTime = Date.now();
 
-    activationState.activationStartTime = Date.now();
     requestAnimationFrame(() => {
@@ -182,32 +185,81 @@ // This needs to be wrapped in an rAF call b/c web browsers
   animateActivation_() {
+    const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} = MDCRippleFoundation.strings;
     const {
-      BG_ACTIVE, BG_BOUNDED_ACTIVE_FILL,
-      FG_UNBOUNDED_DEACTIVATION, FG_BOUNDED_ACTIVE_FILL,
+      BG_ACTIVE_FILL,
+      FG_DEACTIVATION,
+      FG_ACTIVATION,
     } = MDCRippleFoundation.cssClasses;
+    const {DEACTIVATION_TIMEOUT_MS} = MDCRippleFoundation.numbers;
 
-    // If ripple is currently deactivating, cancel those animations.
-    [
-      BG_BOUNDED_ACTIVE_FILL,
-      FG_UNBOUNDED_DEACTIVATION,
-      FG_BOUNDED_ACTIVE_FILL,
-    ].forEach((c) => this.adapter_.removeClass(c));
-    this.cancelBgBounded_();
-    this.cancelFgBounded_();
-    this.cancelFgUnbounded_();
-    if (this.unboundedOpacityFadeTimer_) {
-      clearTimeout(this.unboundedOpacityFadeTimer_);
-      this.unboundedOpacityFadeTimer_ = 0;
+    let translateStart = '';
+    let translateEnd = '';
+
+    if (!this.adapter_.isUnbounded()) {
+      const {startPoint, endPoint} = this.getFgTranslationCoordinates_();
+      translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+      translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
     }
 
-    this.adapter_.addClass(BG_ACTIVE);
-    if (this.adapter_.isUnbounded()) {
-      this.animateUnboundedActivation_();
+    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
+    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
+    // Cancel any ongoing activation/deactivation animations
+    clearTimeout(this.activationTimer_);
+    this.rmBoundedActivationClasses_();
+    this.adapter_.removeClass(FG_DEACTIVATION);
+
+    // Force layout in order to re-trigger the animation.
+    this.adapter_.computeBoundingRect();
+    this.adapter_.addClass(BG_ACTIVE_FILL);
+    this.adapter_.addClass(FG_ACTIVATION);
+    this.activationTimer_ = setTimeout(() => this.activationTimerCallback_(), DEACTIVATION_TIMEOUT_MS);
+  }
+
+  getFgTranslationCoordinates_() {
+    const {activationState_: activationState} = this;
+    const {activationEvent, wasActivatedByPointer} = activationState;
+
+    let startPoint;
+    if (wasActivatedByPointer) {
+      startPoint = getNormalizedEventCoords(
+        activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect()
+      );
+    } else {
+      startPoint = {
+        x: this.frame_.width / 2,
+        y: this.frame_.height / 2,
+      };
     }
+    // Center the element around the start point.
+    startPoint = {
+      x: startPoint.x - (this.initialSize_ / 2),
+      y: startPoint.y - (this.initialSize_ / 2),
+    };
+
+    const endPoint = {
+      x: (this.frame_.width / 2) - (this.initialSize_ / 2),
+      y: (this.frame_.height / 2) - (this.initialSize_ / 2),
+    };
+
+    return {startPoint, endPoint};
   }
 
-  animateUnboundedActivation_() {
-    const {FG_UNBOUNDED_ACTIVATION} = MDCRippleFoundation.cssClasses;
-    this.adapter_.addClass(FG_UNBOUNDED_ACTIVATION);
+  runDeactivationUXLogicIfReady_() {
+    const {FG_DEACTIVATION} = MDCRippleFoundation.cssClasses;
+    const {hasDeactivationUXRun, isActivated} = this.activationState_;
+    const activationHasEnded = hasDeactivationUXRun || !isActivated;
+    if (activationHasEnded && this.activationAnimationHasEnded_) {
+      this.rmBoundedActivationClasses_();
+      // Note that we don't need to remove this here since it's removed on re-activation.
+      this.adapter_.addClass(FG_DEACTIVATION);
+    }
   }
 
+  rmBoundedActivationClasses_() {
+    const {BG_ACTIVE_FILL, FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
+    this.adapter_.removeClass(BG_ACTIVE_FILL);
+    this.adapter_.removeClass(FG_ACTIVATION);
+    this.activationAnimationHasEnded_ = false;
+    this.adapter_.computeBoundingRect();
+  }
+
   deactivate_(e) {
@@ -221,6 +273,8 @@ const {activationState_: activationState} = this;
     if (activationState.isProgrammatic) {
-      requestAnimationFrame(() => this.animateDeactivation_(null, Object.assign({}, activationState)));
+      const evtObject = null;
+      requestAnimationFrame(() => this.animateDeactivation_(evtObject, Object.assign({}, activationState)));
       this.activationState_ = this.defaultActivationState_();
       return;
     }
+
     const actualActivationType = DEACTIVATION_ACTIVATION_PAIRS[e.type];
@@ -239,8 +293,12 @@ const expectedActivationType = activationState.activationEvent.type;
     const state = Object.assign({}, activationState);
-    if (needsDeactivationUX) {
-      requestAnimationFrame(() => this.animateDeactivation_(e, state));
-    }
-    if (needsActualDeactivation) {
-      this.activationState_ = this.defaultActivationState_();
-    }
+    requestAnimationFrame(() => {
+      if (needsDeactivationUX) {
+        this.activationState_.hasDeactivationUXRun = true;
+        this.animateDeactivation_(e, state);
+      }
+
+      if (needsActualDeactivation) {
+        this.activationState_ = this.defaultActivationState_();
+      }
+    });
   }
@@ -252,97 +310,11 @@
 
-  animateDeactivation_(e, {wasActivatedByPointer, wasElementMadeActive, activationStartTime, isProgrammatic}) {
-    const {BG_ACTIVE} = MDCRippleFoundation.cssClasses;
+  animateDeactivation_(e, {wasActivatedByPointer, wasElementMadeActive}) {
+    const {BG_FOCUSED} = MDCRippleFoundation.cssClasses;
     if (wasActivatedByPointer || wasElementMadeActive) {
-      this.adapter_.removeClass(BG_ACTIVE);
-      const isPointerEvent = isProgrammatic ? false : (
-        e.type === 'touchend' || e.type === 'pointerup' || e.type === 'mouseup'
-      );
-      if (this.adapter_.isUnbounded()) {
-        this.animateUnboundedDeactivation_(this.getUnboundedDeactivationInfo_(activationStartTime));
-      } else {
-        this.animateBoundedDeactivation_(e, isPointerEvent);
-      }
+      // Remove class left over by element being focused
+      this.adapter_.removeClass(BG_FOCUSED);
+      this.runDeactivationUXLogicIfReady_();
     }
   }
 
-  animateUnboundedDeactivation_({opacityDuration, transformDuration, approxCurScale}) {
-    const {
-      FG_UNBOUNDED_ACTIVATION,
-      FG_UNBOUNDED_DEACTIVATION,
-    } = MDCRippleFoundation.cssClasses;
-    const {
-      VAR_FG_UNBOUNDED_OPACITY_DURATION,
-      VAR_FG_UNBOUNDED_TRANSFORM_DURATION,
-      VAR_FG_APPROX_XF,
-    } = MDCRippleFoundation.strings;
-
-    this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, `scale(${approxCurScale})`);
-    this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, `${opacityDuration}ms`);
-    this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, `${transformDuration}ms`);
-    this.adapter_.addClass(FG_UNBOUNDED_DEACTIVATION);
-    this.adapter_.removeClass(FG_UNBOUNDED_ACTIVATION);
-    // We use setTimeout here since we know how long the fade will take.
-    this.unboundedOpacityFadeTimer_ = setTimeout(() => {
-      this.adapter_.removeClass(FG_UNBOUNDED_DEACTIVATION);
-    }, opacityDuration);
-  }
-
-  getUnboundedDeactivationInfo_(activationStartTime) {
-    const msElapsed = Date.now() - activationStartTime;
-    const {
-      FG_TRANSFORM_DELAY_MS, OPACITY_DURATION_DIVISOR,
-      ACTIVE_OPACITY_DURATION_MS, UNBOUNDED_TRANSFORM_DURATION_MS,
-      MIN_OPACITY_DURATION_MS,
-    } = MDCRippleFoundation.numbers;
-
-    let approxCurScale = 0;
-    if (msElapsed > FG_TRANSFORM_DELAY_MS) {
-      const percentComplete = Math.min((msElapsed - FG_TRANSFORM_DELAY_MS) / this.xfDuration_, 1);
-      approxCurScale = percentComplete * this.fgScale_;
-    }
-
-    const transformDuration = UNBOUNDED_TRANSFORM_DURATION_MS;
-    const approxOpacity = Math.min(msElapsed / ACTIVE_OPACITY_DURATION_MS, 1);
-    const opacityDuration = Math.max(
-      MIN_OPACITY_DURATION_MS, 1000 * approxOpacity / OPACITY_DURATION_DIVISOR
-    );
-
-    return {transformDuration, opacityDuration, approxCurScale};
-  }
-
-  animateBoundedDeactivation_(e, isPointerEvent) {
-    let startPoint;
-    if (isPointerEvent) {
-      startPoint = getNormalizedEventCoords(
-        e, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect()
-      );
-    } else {
-      startPoint = {
-        x: this.frame_.width / 2,
-        y: this.frame_.height / 2,
-      };
-    }
-
-    startPoint = {
-      x: startPoint.x - (this.initialSize_ / 2),
-      y: startPoint.y - (this.initialSize_ / 2),
-    };
-
-    const endPoint = {
-      x: (this.frame_.width / 2) - (this.initialSize_ / 2),
-      y: (this.frame_.height / 2) - (this.initialSize_ / 2),
-    };
-
-    const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} = MDCRippleFoundation.strings;
-    const {BG_BOUNDED_ACTIVE_FILL, FG_BOUNDED_ACTIVE_FILL} = MDCRippleFoundation.cssClasses;
-    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, `${startPoint.x}px, ${startPoint.y}px`);
-    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, `${endPoint.x}px, ${endPoint.y}px`);
-    this.cancelBgBounded_ = animateWithClass(this.adapter_,
-                                             BG_BOUNDED_ACTIVE_FILL,
-                                            getCorrectEventName(window, 'transitionend'));
-    this.cancelFgBounded_ = animateWithClass(this.adapter_,
-                                             FG_BOUNDED_ACTIVE_FILL,
-                                             getCorrectEventName(window, 'animationend'));
-  }
-
   destroy() {
@@ -409,3 +381,3 @@ if (!this.isSupported_) {
       VAR_SURFACE_WIDTH, VAR_SURFACE_HEIGHT, VAR_FG_SIZE,
-      VAR_FG_UNBOUNDED_TRANSFORM_DURATION, VAR_LEFT, VAR_TOP, VAR_FG_SCALE,
+      VAR_LEFT, VAR_TOP, VAR_FG_SCALE,
     } = MDCRippleFoundation.strings;
@@ -416,3 +388,2 @@
     this.adapter_.updateCssVariable(VAR_FG_SIZE, `${this.initialSize_}px`);
-    this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, `${this.xfDuration_}ms`);
     this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
@@ -419,0 +390,0 @@

package.json

 {
   "name": "@material/ripple",
   "description": "The Material Components for the web Ink Ripple effect for web element interactions",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "Apache-2.0",
@@ -17,6 +17,5 @@ "keywords": [
   "dependencies": {
-    "@material/animation": "^0.1.4",
     "@material/base": "^0.1.2",
-    "@material/theme": "^0.1.2"
+    "@material/theme": "^0.1.3"
   }
 }

util.js

@@ -39,17 +39,2 @@ /**
 
-export function animateWithClass(rippleAdapter, cls, endEvent) {
-  let cancelled = false;
-  const cancel = () => {
-    if (cancelled) {
-      return;
-    }
-    cancelled = true;
-    rippleAdapter.removeClass(cls);
-    rippleAdapter.deregisterInteractionHandler(endEvent, cancel);
-  };
-  rippleAdapter.registerInteractionHandler(endEvent, cancel);
-  rippleAdapter.addClass(cls);
-  return cancel;
-}
-
 export function getNormalizedEventCoords(ev, pageOffset, clientRect) {
@@ -63,3 +48,3 @@ const {x, y} = pageOffset;
   // Determine touch point relative to the ripple container.
-  if (ev.type === 'touchend') {
+  if (ev.type === 'touchstart') {
     normalizedX = ev.changedTouches[0].pageX - documentX;
@@ -66,0 +51,0 @@ normalizedY = ev.changedTouches[0].pageY - documentY;

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

145070

decreased by-14.82%

Lines of code

2104

decreased by-12.77%

Dependency changes

• - Removed@material/animation@^0.1.4

• - Removed@material/animation@0.1.5(transitive)

• Updated@material/theme@^0.1.3