material_design_lite-rails 1.0.3 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cfdf556de039619cbef0ad3cdb17d9b6ab48df49
-  data.tar.gz: 1f5f32e46cc6eb9bdb13e6ad2ddcec9909533379
+  metadata.gz: d3b63e9602083c05a4eee06a292a0833fec32e92
+  data.tar.gz: c5871a118f4e38855a0add8db3ee3320f1111415
 SHA512:
-  metadata.gz: 92761b8b19607057e7e20fe2cd2c4b747307ccaac0e17532d5f6cee64b448638d3f6c9334f281d80b551ec579bd6b29d5bbb8b13491c655f915fef46bd1fe20b
-  data.tar.gz: 15debac0c7e16d48b4d453aabc148ee9282e59cd973565ba0ca8a5624ecab2da68795db5b2a2e1e413274346cc08e5194767a9396ba8e548e3ace52aadf8c7a0
+  metadata.gz: 149b17475b32bd9abe60e766cd97c80c2cf2e916bd2db4ba10312fa1b83d0693fd7eb61594c60e896534be436e1ef5e52db38b3bf5f5bdbd33167691d25d40fb
+  data.tar.gz: 319b801a7fd0f8404b8bae6cea2b133622a13953d80ba2d1f83546885c5e926a8e6ce40e0f5316a51325d00c6d548803059e3954f8a475c6f371d41fa4ec84b3

data/lib/material_design_lite/rails/version.rb

@@ -1,5 +1,5 @@
 module MaterialDesignLite
   module Rails
-    VERSION = "1.0.3"
+    VERSION = "1.0.5"
   end
 end

data/vendor/assets/javascripts/material.js

@@ -26,7 +26,66 @@
  * @author Jason Mayes.
  */
 /* exported componentHandler */
-window.componentHandler = (function() {
+
+// Pre-defining the componentHandler interface, for closure documentation and
+// static verification.
+var componentHandler = {
+  /**
+   * Searches existing DOM for elements of our component type and upgrades them
+   * if they have not already been upgraded.
+   *
+   * @param {string=} optJsClass the programatic name of the element class we
+   * need to create a new instance of.
+   * @param {string=} optCssClass the name of the CSS class elements of this
+   * type will have.
+   */
+  upgradeDom: function(optJsClass, optCssClass) {},
+  /**
+   * Upgrades a specific element rather than all in the DOM.
+   *
+   * @param {!Element} element The element we wish to upgrade.
+   * @param {string=} optJsClass Optional name of the class we want to upgrade
+   * the element to.
+   */
+  upgradeElement: function(element, optJsClass) {},
+  /**
+   * Upgrades a specific list of elements rather than all in the DOM.
+   *
+   * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+   * The elements we wish to upgrade.
+   */
+  upgradeElements: function(elements) {},
+  /**
+   * Upgrades all registered components found in the current DOM. This is
+   * automatically called on window load.
+   */
+  upgradeAllRegistered: function() {},
+  /**
+   * Allows user to be alerted to any upgrades that are performed for a given
+   * component type
+   *
+   * @param {string} jsClass The class name of the MDL component we wish
+   * to hook into for any upgrades performed.
+   * @param {function(!HTMLElement)} callback The function to call upon an
+   * upgrade. This function should expect 1 parameter - the HTMLElement which
+   * got upgraded.
+   */
+  registerUpgradedCallback: function(jsClass, callback) {},
+  /**
+   * Registers a class for future use and attempts to upgrade existing DOM.
+   *
+   * @param {componentHandler.ComponentConfigPublic} config the registration configuration
+   */
+  register: function(config) {},
+  /**
+   * Downgrade either a given node, an array of nodes, or a NodeList.
+   *
+   * @param {!Node|!Array<!Node>|!NodeList} nodes
+   */
+  downgradeElements: function(nodes) {}
+};
+
+componentHandler = (function() {
   'use strict';
 
   /** @type {!Array<componentHandler.ComponentConfig>} */
@@ -42,15 +101,15 @@ window.componentHandler = (function() {
    * Searches registered components for a class we are interested in using.
    * Optionally replaces a match with passed object if specified.
    *
-   * @param {String} name The name of a class we want to use.
+   * @param {string} name The name of a class we want to use.
    * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
-   * @return {!Object|Boolean}
+   * @return {!Object|boolean}
    * @private
    */
   function findRegisteredClass_(name, optReplace) {
     for (var i = 0; i < registeredComponents_.length; i++) {
       if (registeredComponents_[i].className === name) {
-        if (optReplace !== undefined) {
+        if (typeof optReplace !== 'undefined') {
           registeredComponents_[i] = optReplace;
         }
         return registeredComponents_[i];
@@ -62,8 +121,8 @@ window.componentHandler = (function() {
   /**
    * Returns an array of the classNames of the upgraded classes on the element.
    *
-   * @param {!HTMLElement} element The element to fetch data from.
-   * @return {!Array<String>}
+   * @param {!Element} element The element to fetch data from.
+   * @return {!Array<string>}
    * @private
    */
   function getUpgradedListOfElement_(element) {
@@ -76,9 +135,9 @@ window.componentHandler = (function() {
    * Returns true if the given element has already been upgraded for the given
    * class.
    *
-   * @param {!HTMLElement} element The element we want to check.
-   * @param {String} jsClass The class to check for.
-   * @returns {Boolean}
+   * @param {!Element} element The element we want to check.
+   * @param {string} jsClass The class to check for.
+   * @returns {boolean}
    * @private
    */
   function isElementUpgraded_(element, jsClass) {
@@ -90,20 +149,21 @@ window.componentHandler = (function() {
    * Searches existing DOM for elements of our component type and upgrades them
    * if they have not already been upgraded.
    *
-   * @param {String=} optJsClass the programatic name of the element class we
+   * @param {string=} optJsClass the programatic name of the element class we
    * need to create a new instance of.
-   * @param {String=} optCssClass the name of the CSS class elements of this
+   * @param {string=} optCssClass the name of the CSS class elements of this
    * type will have.
    */
   function upgradeDomInternal(optJsClass, optCssClass) {
-    if (optJsClass === undefined && optCssClass === undefined) {
+    if (typeof optJsClass === 'undefined' &&
+        typeof optCssClass === 'undefined') {
       for (var i = 0; i < registeredComponents_.length; i++) {
         upgradeDomInternal(registeredComponents_[i].className,
             registeredComponents_[i].cssClass);
       }
     } else {
-      var jsClass = /** @type {String} */ (optJsClass);
-      if (optCssClass === undefined) {
+      var jsClass = /** @type {string} */ (optJsClass);
+      if (typeof optCssClass === 'undefined') {
         var registeredClass = findRegisteredClass_(jsClass);
         if (registeredClass) {
           optCssClass = registeredClass.cssClass;
@@ -120,8 +180,8 @@ window.componentHandler = (function() {
   /**
    * Upgrades a specific element rather than all in the DOM.
    *
-   * @param {!HTMLElement} element The element we wish to upgrade.
-   * @param {String=} optJsClass Optional name of the class we want to upgrade
+   * @param {!Element} element The element we wish to upgrade.
+   * @param {string=} optJsClass Optional name of the class we want to upgrade
    * the element to.
    */
   function upgradeElementInternal(element, optJsClass) {
@@ -180,7 +240,7 @@ window.componentHandler = (function() {
   /**
    * Upgrades a specific list of elements rather than all in the DOM.
    *
-   * @param {!HTMLElement|!Array<!HTMLElement>|!NodeList|!HTMLCollection} elements
+   * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
    * The elements we wish to upgrade.
    */
   function upgradeElementsInternal(elements) {
@@ -194,10 +254,10 @@ window.componentHandler = (function() {
     for (var i = 0, n = elements.length, element; i < n; i++) {
       element = elements[i];
       if (element instanceof HTMLElement) {
+        upgradeElementInternal(element);
         if (element.children.length > 0) {
           upgradeElementsInternal(element.children);
         }
-        upgradeElementInternal(element);
       }
     }
   }
@@ -205,20 +265,32 @@ window.componentHandler = (function() {
   /**
    * Registers a class for future use and attempts to upgrade existing DOM.
    *
-   * @param {{constructor: !Function, classAsString: String, cssClass: String, widget: String}} config
+   * @param {componentHandler.ComponentConfigPublic} config
    */
   function registerInternal(config) {
+    // In order to support both Closure-compiled and uncompiled code accessing
+    // this method, we need to allow for both the dot and array syntax for
+    // property access. You'll therefore see the `foo.bar || foo['bar']`
+    // pattern repeated across this method.
+    var widgetMissing = (typeof config.widget === 'undefined' &&
+        typeof config['widget'] === 'undefined');
+    var widget = true;
+
+    if (!widgetMissing) {
+      widget = config.widget || config['widget'];
+    }
+
     var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
-      'classConstructor': config.constructor,
-      'className': config.classAsString,
-      'cssClass': config.cssClass,
-      'widget': config.widget === undefined ? true : config.widget,
-      'callbacks': []
+      classConstructor: config.constructor || config['constructor'],
+      className: config.classAsString || config['classAsString'],
+      cssClass: config.cssClass || config['cssClass'],
+      widget: widget,
+      callbacks: []
     });
 
     registeredComponents_.forEach(function(item) {
       if (item.cssClass === newConfig.cssClass) {
-        throw new Error('The provided cssClass has already been registered.');
+        throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
       }
       if (item.className === newConfig.className) {
         throw new Error('The provided className has already been registered');
@@ -243,7 +315,7 @@ window.componentHandler = (function() {
    * Allows user to be alerted to any upgrades that are performed for a given
    * component type
    *
-   * @param {String} jsClass The class name of the MDL component we wish
+   * @param {string} jsClass The class name of the MDL component we wish
    * to hook into for any upgrades performed.
    * @param {function(!HTMLElement)} callback The function to call upon an
    * upgrade. This function should expect 1 parameter - the HTMLElement which
@@ -315,6 +387,10 @@ window.componentHandler = (function() {
    * @param {!Node|!Array<!Node>|!NodeList} nodes
    */
   function downgradeNodesInternal(nodes) {
+    /**
+     * Auxiliary function to downgrade a single node.
+     * @param  {!Node} node the node to be downgraded
+     */
     var downgradeNode = function(node) {
       deconstructComponentInternal(findCreatedComponentByNodeInternal(node));
     };
@@ -342,24 +418,18 @@ window.componentHandler = (function() {
   };
 })();
 
-window.addEventListener('load', function() {
-  'use strict';
-
-  /**
-   * Performs a "Cutting the mustard" test. If the browser supports the features
-   * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
-   * components requiring JavaScript.
-   */
-  if ('classList' in document.createElement('div') &&
-      'querySelector' in document &&
-      'addEventListener' in window && Array.prototype.forEach) {
-    document.documentElement.classList.add('mdl-js');
-    componentHandler.upgradeAllRegistered();
-  } else {
-    componentHandler.upgradeElement =
-        componentHandler.register = function() {};
-  }
-});
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   constructor: Function,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: (string|boolean|undefined)
+ * }}
+ */
+componentHandler.ComponentConfigPublic;  // jshint ignore:line
 
 /**
  * Describes the type of a registered component type managed by
@@ -367,9 +437,9 @@ window.addEventListener('load', function() {
  *
  * @typedef {{
  *   constructor: !Function,
- *   className: String,
- *   cssClass: String,
- *   widget: String,
+ *   className: string,
+ *   cssClass: string,
+ *   widget: (string|boolean),
  *   callbacks: !Array<function(!HTMLElement)>
  * }}
  */
@@ -381,14 +451,53 @@ componentHandler.ComponentConfig;  // jshint ignore:line
  *
  * @typedef {{
  *   element_: !HTMLElement,
- *   className: String,
- *   classAsString: String,
- *   cssClass: String,
- *   widget: String
+ *   className: string,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: string
  * }}
  */
 componentHandler.Component;  // jshint ignore:line
 
+// Export all symbols, for the benefit of Closure compiler.
+// No effect on uncompiled code.
+componentHandler['upgradeDom'] = componentHandler.upgradeDom;
+componentHandler['upgradeElement'] = componentHandler.upgradeElement;
+componentHandler['upgradeElements'] = componentHandler.upgradeElements;
+componentHandler['upgradeAllRegistered'] =
+    componentHandler.upgradeAllRegistered;
+componentHandler['registerUpgradedCallback'] =
+    componentHandler.registerUpgradedCallback;
+componentHandler['register'] = componentHandler.register;
+componentHandler['downgradeElements'] = componentHandler.downgradeElements;
+window.componentHandler = componentHandler;
+window['componentHandler'] = componentHandler;
+
+window.addEventListener('load', function() {
+  'use strict';
+
+  /**
+   * Performs a "Cutting the mustard" test. If the browser supports the features
+   * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
+   * components requiring JavaScript.
+   */
+  if ('classList' in document.createElement('div') &&
+      'querySelector' in document &&
+      'addEventListener' in window && Array.prototype.forEach) {
+    document.documentElement.classList.add('mdl-js');
+    componentHandler.upgradeAllRegistered();
+  } else {
+    /**
+     * Dummy function to avoid JS errors.
+     */
+    componentHandler.upgradeElement = function() {};
+    /**
+     * Dummy function to avoid JS errors.
+     */
+    componentHandler.register = function() {};
+  }
+});
+
 // Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
 // Adapted from https://gist.github.com/paulirish/1579671 which derived from
 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
@@ -397,9 +506,14 @@ componentHandler.Component;  // jshint ignore:line
 // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
 // MIT license
 if (!Date.now) {
+    /**
+   * Date.now polyfill.
+   * @return {number} the current Date
+   */
     Date.now = function () {
         return new Date().getTime();
     };
+    Date['now'] = Date.now;
 }
 var vendors = [
     'webkit',
@@ -409,9 +523,15 @@ for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
     var vp = vendors[i];
     window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
     window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+    window['requestAnimationFrame'] = window.requestAnimationFrame;
+    window['cancelAnimationFrame'] = window.cancelAnimationFrame;
 }
 if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
     var lastTime = 0;
+    /**
+   * requestAnimationFrame polyfill.
+   * @param  {!Function} callback the callback function.
+   */
     window.requestAnimationFrame = function (callback) {
         var now = Date.now();
         var nextTime = Math.max(lastTime + 16, now);
@@ -420,6 +540,8 @@ if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAn
         }, nextTime - now);
     };
     window.cancelAnimationFrame = clearTimeout;
+    window['requestAnimationFrame'] = window.requestAnimationFrame;
+    window['cancelAnimationFrame'] = window.cancelAnimationFrame;
 }
 /**
  * @license
@@ -449,11 +571,11 @@ var MaterialButton = function MaterialButton(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialButton = MaterialButton;
+window['MaterialButton'] = MaterialButton;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialButton.prototype.Constant_ = {};
@@ -462,7 +584,7 @@ MaterialButton.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialButton.prototype.CssClasses_ = {
@@ -490,6 +612,7 @@ MaterialButton.prototype.blurHandler_ = function (event) {
 MaterialButton.prototype.disable = function () {
     this.element_.disabled = true;
 };
+MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
 /**
    * Enable button.
    *
@@ -498,6 +621,7 @@ MaterialButton.prototype.disable = function () {
 MaterialButton.prototype.enable = function () {
     this.element_.disabled = false;
 };
+MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
 /**
    * Initialize element.
    */
@@ -559,6 +683,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialCheckbox = function MaterialCheckbox(element) {
@@ -566,11 +691,11 @@ var MaterialCheckbox = function MaterialCheckbox(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialCheckbox = MaterialCheckbox;
+window['MaterialCheckbox'] = MaterialCheckbox;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
@@ -579,7 +704,7 @@ MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialCheckbox.prototype.CssClasses_ = {
@@ -645,10 +770,9 @@ MaterialCheckbox.prototype.updateClasses_ = function () {
 /**
    * Add blur.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-MaterialCheckbox.prototype.blur_ = function (event) {
+MaterialCheckbox.prototype.blur_ = function () {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function () {
@@ -668,6 +792,7 @@ MaterialCheckbox.prototype.checkToggleState = function () {
         this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
 };
+MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
 /**
    * Check the inputs disabled state and update display.
    *
@@ -680,6 +805,7 @@ MaterialCheckbox.prototype.checkDisabled = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
 };
+MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
 /**
    * Disable checkbox.
    *
@@ -689,6 +815,7 @@ MaterialCheckbox.prototype.disable = function () {
     this.inputElement_.disabled = true;
     this.updateClasses_();
 };
+MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
 /**
    * Enable checkbox.
    *
@@ -698,6 +825,7 @@ MaterialCheckbox.prototype.enable = function () {
     this.inputElement_.disabled = false;
     this.updateClasses_();
 };
+MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
 /**
    * Check checkbox.
    *
@@ -707,6 +835,7 @@ MaterialCheckbox.prototype.check = function () {
     this.inputElement_.checked = true;
     this.updateClasses_();
 };
+MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
 /**
    * Uncheck checkbox.
    *
@@ -716,6 +845,7 @@ MaterialCheckbox.prototype.uncheck = function () {
     this.inputElement_.checked = false;
     this.updateClasses_();
 };
+MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
 /**
    * Initialize element.
    */
@@ -799,6 +929,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialIconToggle = function MaterialIconToggle(element) {
@@ -806,11 +937,11 @@ var MaterialIconToggle = function MaterialIconToggle(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialIconToggle = MaterialIconToggle;
+window['MaterialIconToggle'] = MaterialIconToggle;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
@@ -819,7 +950,7 @@ MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialIconToggle.prototype.CssClasses_ = {
@@ -881,10 +1012,9 @@ MaterialIconToggle.prototype.updateClasses_ = function () {
 /**
    * Add blur.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-MaterialIconToggle.prototype.blur_ = function (event) {
+MaterialIconToggle.prototype.blur_ = function () {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function () {
@@ -904,6 +1034,7 @@ MaterialIconToggle.prototype.checkToggleState = function () {
         this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
 };
+MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
 /**
    * Check the inputs disabled state and update display.
    *
@@ -916,6 +1047,7 @@ MaterialIconToggle.prototype.checkDisabled = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
 };
+MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
 /**
    * Disable icon toggle.
    *
@@ -925,6 +1057,7 @@ MaterialIconToggle.prototype.disable = function () {
     this.inputElement_.disabled = true;
     this.updateClasses_();
 };
+MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
 /**
    * Enable icon toggle.
    *
@@ -934,6 +1067,7 @@ MaterialIconToggle.prototype.enable = function () {
     this.inputElement_.disabled = false;
     this.updateClasses_();
 };
+MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
 /**
    * Check icon toggle.
    *
@@ -943,6 +1077,7 @@ MaterialIconToggle.prototype.check = function () {
     this.inputElement_.checked = true;
     this.updateClasses_();
 };
+MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
 /**
    * Uncheck icon toggle.
    *
@@ -952,6 +1087,7 @@ MaterialIconToggle.prototype.uncheck = function () {
     this.inputElement_.checked = false;
     this.updateClasses_();
 };
+MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
 /**
    * Initialize element.
    */
@@ -1026,6 +1162,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialMenu = function MaterialMenu(element) {
@@ -1033,11 +1170,11 @@ var MaterialMenu = function MaterialMenu(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialMenu = MaterialMenu;
+window['MaterialMenu'] = MaterialMenu;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialMenu.prototype.Constant_ = {
@@ -1052,7 +1189,7 @@ MaterialMenu.prototype.Constant_ = {
 /**
    * Keycodes, for code readability.
    *
-   * @enum {Number}
+   * @enum {number}
    * @private
    */
 MaterialMenu.prototype.Keycodes_ = {
@@ -1067,7 +1204,7 @@ MaterialMenu.prototype.Keycodes_ = {
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialMenu.prototype.CssClasses_ = {
@@ -1278,14 +1415,14 @@ MaterialMenu.prototype.handleItemClick_ = function (evt) {
    * it), and applies it. This allows us to animate from or to the correct point,
    * that is, the point it's aligned to in the "for" element.
    *
-   * @param {Number} height Height of the clip rectangle
-   * @param {Number} width Width of the clip rectangle
+   * @param {number} height Height of the clip rectangle
+   * @param {number} width Width of the clip rectangle
    * @private
    */
 MaterialMenu.prototype.applyClip_ = function (height, width) {
     if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
         // Do not clip.
-        this.element_.style.clip = null;
+        this.element_.style.clip = '';
     } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
         // Clip to the top right corner of the menu.
         this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
@@ -1297,7 +1434,7 @@ MaterialMenu.prototype.applyClip_ = function (height, width) {
         this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)';
     } else {
         // Default: do not clip (same as clipping to the top left corner).
-        this.element_.style.clip = null;
+        this.element_.style.clip = '';
     }
 };
 /**
@@ -1368,6 +1505,7 @@ MaterialMenu.prototype.show = function (evt) {
         document.addEventListener('click', callback);
     }
 };
+MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
 /**
    * Hides the menu.
    *
@@ -1392,6 +1530,7 @@ MaterialMenu.prototype.hide = function () {
         this.addAnimationEndListener_();
     }
 };
+MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
 /**
    * Displays or hides the menu, depending on current state.
    *
@@ -1404,6 +1543,7 @@ MaterialMenu.prototype.toggle = function (evt) {
         this.show(evt);
     }
 };
+MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
 /**
    * Downgrade the component.
    *
@@ -1445,6 +1585,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialProgress = function MaterialProgress(element) {
@@ -1452,11 +1593,11 @@ var MaterialProgress = function MaterialProgress(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialProgress = MaterialProgress;
+window['MaterialProgress'] = MaterialProgress;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialProgress.prototype.Constant_ = {};
@@ -1465,14 +1606,14 @@ MaterialProgress.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' };
 /**
    * Set the current progress of the progressbar.
    *
-   * @param {Number} p Percentage of the progress (0-100)
+   * @param {number} p Percentage of the progress (0-100)
    * @public
    */
 MaterialProgress.prototype.setProgress = function (p) {
@@ -1481,16 +1622,18 @@ MaterialProgress.prototype.setProgress = function (p) {
     }
     this.progressbar_.style.width = p + '%';
 };
+MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
 /**
    * Set the current progress of the buffer.
    *
-   * @param {Number} p Percentage of the buffer (0-100)
+   * @param {number} p Percentage of the buffer (0-100)
    * @public
    */
 MaterialProgress.prototype.setBuffer = function (p) {
     this.bufferbar_.style.width = p + '%';
     this.auxbar_.style.width = 100 - p + '%';
 };
+MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
 /**
    * Initialize element.
    */
@@ -1553,6 +1696,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialRadio = function MaterialRadio(element) {
@@ -1560,11 +1704,11 @@ var MaterialRadio = function MaterialRadio(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialRadio = MaterialRadio;
+window['MaterialRadio'] = MaterialRadio;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
@@ -1573,7 +1717,7 @@ MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialRadio.prototype.CssClasses_ = {
@@ -1605,7 +1749,7 @@ MaterialRadio.prototype.onChange_ = function (event) {
         var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
         // Different name == different group, so no point updating those.
         if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
-            radios[i].MaterialRadio.updateClasses_();
+            radios[i]['MaterialRadio'].updateClasses_();
         }
     }
 };
@@ -1648,10 +1792,9 @@ MaterialRadio.prototype.updateClasses_ = function () {
 /**
    * Add blur.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-MaterialRadio.prototype.blur_ = function (event) {
+MaterialRadio.prototype.blur_ = function () {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function () {
@@ -1671,6 +1814,7 @@ MaterialRadio.prototype.checkDisabled = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
 };
+MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
 /**
    * Check the components toggled state.
    *
@@ -1683,6 +1827,7 @@ MaterialRadio.prototype.checkToggleState = function () {
         this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
 };
+MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
 /**
    * Disable radio.
    *
@@ -1692,6 +1837,7 @@ MaterialRadio.prototype.disable = function () {
     this.btnElement_.disabled = true;
     this.updateClasses_();
 };
+MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
 /**
    * Enable radio.
    *
@@ -1701,6 +1847,7 @@ MaterialRadio.prototype.enable = function () {
     this.btnElement_.disabled = false;
     this.updateClasses_();
 };
+MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
 /**
    * Check radio.
    *
@@ -1710,6 +1857,7 @@ MaterialRadio.prototype.check = function () {
     this.btnElement_.checked = true;
     this.updateClasses_();
 };
+MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
 /**
    * Uncheck radio.
    *
@@ -1719,6 +1867,7 @@ MaterialRadio.prototype.uncheck = function () {
     this.btnElement_.checked = false;
     this.updateClasses_();
 };
+MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
 /**
    * Initialize element.
    */
@@ -1781,6 +1930,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialSlider = function MaterialSlider(element) {
@@ -1790,11 +1940,11 @@ var MaterialSlider = function MaterialSlider(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialSlider = MaterialSlider;
+window['MaterialSlider'] = MaterialSlider;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialSlider.prototype.Constant_ = {};
@@ -1803,7 +1953,7 @@ MaterialSlider.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialSlider.prototype.CssClasses_ = {
@@ -1850,6 +2000,7 @@ MaterialSlider.prototype.onMouseUp_ = function (event) {
    *
    * @param {Event} event The event that fired.
    * @private
+   * @suppress {missingProperties}
    */
 MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
     // If this click is not on the parent element (but rather some child)
@@ -1871,10 +2022,9 @@ MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
 /**
    * Handle updating of values.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-MaterialSlider.prototype.updateValueStyles_ = function (event) {
+MaterialSlider.prototype.updateValueStyles_ = function () {
     // Calculate and apply percentages to div structure behind slider.
     var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
     if (fraction === 0) {
@@ -1898,6 +2048,7 @@ MaterialSlider.prototype.updateValueStyles_ = function (event) {
 MaterialSlider.prototype.disable = function () {
     this.element_.disabled = true;
 };
+MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
 /**
    * Enable slider.
    *
@@ -1906,10 +2057,11 @@ MaterialSlider.prototype.disable = function () {
 MaterialSlider.prototype.enable = function () {
     this.element_.disabled = false;
 };
+MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
 /**
    * Update slider value.
    *
-   * @param {Number} value The value to which to set the control (optional).
+   * @param {number} value The value to which to set the control (optional).
    * @public
    */
 MaterialSlider.prototype.change = function (value) {
@@ -1918,6 +2070,7 @@ MaterialSlider.prototype.change = function (value) {
     }
     this.updateValueStyles_();
 };
+MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
 /**
    * Initialize element.
    */
@@ -2011,11 +2164,11 @@ var MaterialSpinner = function MaterialSpinner(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialSpinner = MaterialSpinner;
+window['MaterialSpinner'] = MaterialSpinner;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
@@ -2024,7 +2177,7 @@ MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialSpinner.prototype.CssClasses_ = {
@@ -2038,7 +2191,7 @@ MaterialSpinner.prototype.CssClasses_ = {
 /**
    * Auxiliary method to create a spinner layer.
    *
-   * @param {Number} index Index of the layer to be created.
+   * @param {number} index Index of the layer to be created.
    * @public
    */
 MaterialSpinner.prototype.createLayer = function (index) {
@@ -2068,6 +2221,7 @@ MaterialSpinner.prototype.createLayer = function (index) {
     layer.appendChild(rightClipper);
     this.element_.appendChild(layer);
 };
+MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
 /**
    * Stops the spinner animation.
    * Public method for users who need to stop the spinner for any reason.
@@ -2077,6 +2231,7 @@ MaterialSpinner.prototype.createLayer = function (index) {
 MaterialSpinner.prototype.stop = function () {
     this.element_.classList.remove('is-active');
 };
+MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
 /**
    * Starts the spinner animation.
    * Public method for users who need to manually start the spinner for any reason
@@ -2087,6 +2242,7 @@ MaterialSpinner.prototype.stop = function () {
 MaterialSpinner.prototype.start = function () {
     this.element_.classList.add('is-active');
 };
+MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
 /**
    * Initialize element.
    */
@@ -2127,6 +2283,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialSwitch = function MaterialSwitch(element) {
@@ -2134,11 +2291,11 @@ var MaterialSwitch = function MaterialSwitch(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialSwitch = MaterialSwitch;
+window['MaterialSwitch'] = MaterialSwitch;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
@@ -2147,7 +2304,7 @@ MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialSwitch.prototype.CssClasses_ = {
@@ -2214,7 +2371,7 @@ MaterialSwitch.prototype.updateClasses_ = function () {
    *
    * @private
    */
-MaterialSwitch.prototype.blur_ = function (event) {
+MaterialSwitch.prototype.blur_ = function () {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function () {
@@ -2234,6 +2391,7 @@ MaterialSwitch.prototype.checkDisabled = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
 };
+MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled;
 /**
    * Check the components toggled state.
    *
@@ -2246,6 +2404,7 @@ MaterialSwitch.prototype.checkToggleState = function () {
         this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
 };
+MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState;
 /**
    * Disable switch.
    *
@@ -2255,6 +2414,7 @@ MaterialSwitch.prototype.disable = function () {
     this.inputElement_.disabled = true;
     this.updateClasses_();
 };
+MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable;
 /**
    * Enable switch.
    *
@@ -2264,6 +2424,7 @@ MaterialSwitch.prototype.enable = function () {
     this.inputElement_.disabled = false;
     this.updateClasses_();
 };
+MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable;
 /**
    * Activate switch.
    *
@@ -2273,6 +2434,7 @@ MaterialSwitch.prototype.on = function () {
     this.inputElement_.checked = true;
     this.updateClasses_();
 };
+MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on;
 /**
    * Deactivate switch.
    *
@@ -2282,6 +2444,7 @@ MaterialSwitch.prototype.off = function () {
     this.inputElement_.checked = false;
     this.updateClasses_();
 };
+MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off;
 /**
    * Initialize element.
    */
@@ -2364,6 +2527,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialTabs = function MaterialTabs(element) {
@@ -2372,11 +2536,11 @@ var MaterialTabs = function MaterialTabs(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialTabs = MaterialTabs;
+window['MaterialTabs'] = MaterialTabs;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialTabs.prototype.Constant_ = {};
@@ -2385,7 +2549,7 @@ MaterialTabs.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialTabs.prototype.CssClasses_ = {
@@ -2444,6 +2608,13 @@ MaterialTabs.prototype.init = function () {
         this.initTabs_();
     }
 };
+/**
+   * Constructor for an individual tab.
+   *
+   * @constructor
+   * @param {HTMLElement} tab The HTML element for the tab.
+   * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
+   */
 function MaterialTab(tab, ctx) {
     if (tab) {
         if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
@@ -2494,6 +2665,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialTextfield = function MaterialTextfield(element) {
@@ -2502,11 +2674,11 @@ var MaterialTextfield = function MaterialTextfield(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialTextfield = MaterialTextfield;
+window['MaterialTextfield'] = MaterialTextfield;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialTextfield.prototype.Constant_ = {
@@ -2518,7 +2690,7 @@ MaterialTextfield.prototype.Constant_ = {
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialTextfield.prototype.CssClasses_ = {
@@ -2585,6 +2757,7 @@ MaterialTextfield.prototype.checkDisabled = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
 };
+MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled;
 /**
    * Check the validity state and update field accordingly.
    *
@@ -2597,6 +2770,7 @@ MaterialTextfield.prototype.checkValidity = function () {
         this.element_.classList.add(this.CssClasses_.IS_INVALID);
     }
 };
+MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity;
 /**
    * Check the dirty state and update field accordingly.
    *
@@ -2609,6 +2783,7 @@ MaterialTextfield.prototype.checkDirty = function () {
         this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
     }
 };
+MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty;
 /**
    * Disable text field.
    *
@@ -2618,6 +2793,7 @@ MaterialTextfield.prototype.disable = function () {
     this.input_.disabled = true;
     this.updateClasses_();
 };
+MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
 /**
    * Enable text field.
    *
@@ -2627,18 +2803,22 @@ MaterialTextfield.prototype.enable = function () {
     this.input_.disabled = false;
     this.updateClasses_();
 };
+MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
 /**
    * Update text field value.
    *
-   * @param {String} value The value to which to set the control (optional).
+   * @param {string} value The value to which to set the control (optional).
    * @public
    */
 MaterialTextfield.prototype.change = function (value) {
     if (value) {
         this.input_.value = value;
+    } else {
+        this.input_.value = '';
     }
     this.updateClasses_();
 };
+MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
 /**
    * Initialize element.
    */
@@ -2712,6 +2892,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialTooltip = function MaterialTooltip(element) {
@@ -2719,11 +2900,11 @@ var MaterialTooltip = function MaterialTooltip(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialTooltip = MaterialTooltip;
+window['MaterialTooltip'] = MaterialTooltip;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialTooltip.prototype.Constant_ = {};
@@ -2732,7 +2913,7 @@ MaterialTooltip.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialTooltip.prototype.CssClasses_ = { IS_ACTIVE: 'is-active' };
@@ -2836,6 +3017,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialLayout = function MaterialLayout(element) {
@@ -2843,11 +3025,11 @@ var MaterialLayout = function MaterialLayout(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialLayout = MaterialLayout;
+window['MaterialLayout'] = MaterialLayout;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialLayout.prototype.Constant_ = {
@@ -2860,7 +3042,7 @@ MaterialLayout.prototype.Constant_ = {
 /**
    * Modes.
    *
-   * @enum {Number}
+   * @enum {number}
    * @private
    */
 MaterialLayout.prototype.Mode_ = {
@@ -2874,7 +3056,7 @@ MaterialLayout.prototype.Mode_ = {
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialLayout.prototype.CssClasses_ = {
@@ -3056,13 +3238,24 @@ MaterialLayout.prototype.init = function () {
                 this.contentScrollHandler_();
             }
         }
+        /**
+       * Prevents an event from triggering the default behaviour.
+       * @param  {Event} ev the event to eat.
+       */
         var eatEvent = function (ev) {
             ev.preventDefault();
         };
         // Add drawer toggling button to our layout, if we have an openable drawer.
         if (this.drawer_) {
-            var drawerButton = document.createElement('div');
-            drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+            var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+            if (typeof drawerButton === 'undefined' || drawerButton === null) {
+                drawerButton = document.createElement('div');
+                drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+                var drawerButtonIcon = document.createElement('i');
+                drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+                drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
+                drawerButton.appendChild(drawerButtonIcon);
+            }
             if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
                 //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
                 drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
@@ -3070,10 +3263,6 @@ MaterialLayout.prototype.init = function () {
                 //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
                 drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
             }
-            var drawerButtonIcon = document.createElement('i');
-            drawerButtonIcon.classList.add(this.CssClasses_.ICON);
-            drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
-            drawerButton.appendChild(drawerButtonIcon);
             drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
             // Add a class if the layout has a drawer, for altering the left padding.
             // Adds the HAS_DRAWER to the elements since this.header_ may or may
@@ -3152,6 +3341,15 @@ MaterialLayout.prototype.init = function () {
         this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
 };
+/**
+   * Constructor for an individual tab.
+   *
+   * @constructor
+   * @param {HTMLElement} tab The HTML element for the tab.
+   * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
+   * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
+   * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+   */
 function MaterialLayoutTab(tab, tabs, panels, layout) {
     if (tab) {
         if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) {
@@ -3202,6 +3400,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialDataTable = function MaterialDataTable(element) {
@@ -3209,11 +3408,11 @@ var MaterialDataTable = function MaterialDataTable(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialDataTable = MaterialDataTable;
+window['MaterialDataTable'] = MaterialDataTable;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialDataTable.prototype.Constant_ = {};
@@ -3222,7 +3421,7 @@ MaterialDataTable.prototype.Constant_ = {};
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialDataTable.prototype.CssClasses_ = {
@@ -3235,12 +3434,12 @@ MaterialDataTable.prototype.CssClasses_ = {
    * Generates and returns a function that toggles the selection state of a
    * single row (or multiple rows).
    *
-   * @param {HTMLElement} checkbox Checkbox that toggles the selection state.
+   * @param {Element} checkbox Checkbox that toggles the selection state.
    * @param {HTMLElement} row Row to toggle when checkbox changes.
-   * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
+   * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
-MaterialDataTable.prototype.selectRow_ = function (checkbox, row, rows) {
+MaterialDataTable.prototype.selectRow_ = function (checkbox, row, opt_rows) {
     if (row) {
         return function () {
             if (checkbox.checked) {
@@ -3250,21 +3449,21 @@ MaterialDataTable.prototype.selectRow_ = function (checkbox, row, rows) {
             }
         }.bind(this);
     }
-    if (rows) {
+    if (opt_rows) {
         return function () {
             var i;
             var el;
             if (checkbox.checked) {
-                for (i = 0; i < rows.length; i++) {
-                    el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
-                    el.MaterialCheckbox.check();
-                    rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+                for (i = 0; i < opt_rows.length; i++) {
+                    el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                    el['MaterialCheckbox'].check();
+                    opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
                 }
             } else {
-                for (i = 0; i < rows.length; i++) {
-                    el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
-                    el.MaterialCheckbox.uncheck();
-                    rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+                for (i = 0; i < opt_rows.length; i++) {
+                    el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                    el['MaterialCheckbox'].uncheck();
+                    opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
                 }
             }
         }.bind(this);
@@ -3275,10 +3474,10 @@ MaterialDataTable.prototype.selectRow_ = function (checkbox, row, rows) {
    * event handling.
    *
    * @param {HTMLElement} row Row to toggle when checkbox changes.
-   * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
+   * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
-MaterialDataTable.prototype.createCheckbox_ = function (row, rows) {
+MaterialDataTable.prototype.createCheckbox_ = function (row, opt_rows) {
     var label = document.createElement('label');
     label.classList.add('mdl-checkbox');
     label.classList.add('mdl-js-checkbox');
@@ -3289,8 +3488,8 @@ MaterialDataTable.prototype.createCheckbox_ = function (row, rows) {
     checkbox.classList.add('mdl-checkbox__input');
     if (row) {
         checkbox.addEventListener('change', this.selectRow_(checkbox, row));
-    } else if (rows) {
-        checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
+    } else if (opt_rows) {
+        checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
     }
     label.appendChild(checkbox);
     componentHandler.upgradeElement(label, 'MaterialCheckbox');
@@ -3349,6 +3548,7 @@ componentHandler.register({
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
 var MaterialRipple = function MaterialRipple(element) {
@@ -3356,11 +3556,11 @@ var MaterialRipple = function MaterialRipple(element) {
     // Initialize instance.
     this.init();
 };
-window.MaterialRipple = MaterialRipple;
+window['MaterialRipple'] = MaterialRipple;
 /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
 MaterialRipple.prototype.Constant_ = {
@@ -3375,7 +3575,7 @@ MaterialRipple.prototype.Constant_ = {
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
 MaterialRipple.prototype.CssClasses_ = {
@@ -3472,19 +3672,40 @@ MaterialRipple.prototype.init = function () {
             this.element_.addEventListener('mouseleave', this.boundUpHandler);
             this.element_.addEventListener('touchend', this.boundUpHandler);
             this.element_.addEventListener('blur', this.boundUpHandler);
+            /**
+         * Getter for frameCount_.
+         * @return {number} the frame count.
+         */
             this.getFrameCount = function () {
                 return this.frameCount_;
             };
+            /**
+         * Setter for frameCount_.
+         * @param {number} fC the frame count.
+         */
             this.setFrameCount = function (fC) {
                 this.frameCount_ = fC;
             };
+            /**
+         * Getter for rippleElement_.
+         * @return {Element} the ripple element.
+         */
             this.getRippleElement = function () {
                 return this.rippleElement_;
             };
+            /**
+         * Sets the ripple X and Y coordinates.
+         * @param  {number} newX the new X coordinate
+         * @param  {number} newY the new Y coordinate
+         */
             this.setRippleXY = function (newX, newY) {
                 this.x_ = newX;
                 this.y_ = newY;
             };
+            /**
+         * Sets the ripple styles.
+         * @param  {boolean} start whether or not this is the start frame.
+         */
             this.setRippleStyles = function (start) {
                 if (this.rippleElement_ !== null) {
                     var transformString;
@@ -3512,6 +3733,9 @@ MaterialRipple.prototype.init = function () {
                     }
                 }
             };
+            /**
+         * Handles an animation frame.
+         */
             this.animFrameHandler = function () {
                 if (this.frameCount_-- > 0) {
                     window.requestAnimationFrame(this.animFrameHandler.bind(this));