material_design_lite-sass 1.0.4.2 → 1.0.5

data/vendor/assets/javascripts/material/button.js

@@ -31,12 +31,12 @@
     // 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_ = {
@@ -48,7 +48,7 @@
    * 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_ = {
@@ -79,6 +79,7 @@
   MaterialButton.prototype.disable = function() {
     this.element_.disabled = true;
   };
+  MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
 
   /**
    * Enable button.
@@ -88,6 +89,7 @@
   MaterialButton.prototype.enable = function() {
     this.element_.disabled = false;
   };
+  MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
 
   /**
    * Initialize element.

data/vendor/assets/javascripts/material/checkbox.js

@@ -23,6 +23,7 @@
    * 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) {
@@ -31,12 +32,12 @@
     // 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_ = {
@@ -48,7 +49,7 @@
    * 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_ = {
@@ -120,15 +121,14 @@
   /**
    * 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() {
       this.inputElement_.blur();
-    }.bind(this), this.Constant_.TINY_TIMEOUT);
+    }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
   };
 
   // Public methods.
@@ -145,6 +145,8 @@
       this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
   };
+  MaterialCheckbox.prototype['checkToggleState'] =
+      MaterialCheckbox.prototype.checkToggleState;
 
   /**
    * Check the inputs disabled state and update display.
@@ -158,6 +160,8 @@
       this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
   };
+  MaterialCheckbox.prototype['checkDisabled'] =
+      MaterialCheckbox.prototype.checkDisabled;
 
   /**
    * Disable checkbox.
@@ -168,6 +172,7 @@
     this.inputElement_.disabled = true;
     this.updateClasses_();
   };
+  MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
 
   /**
    * Enable checkbox.
@@ -178,6 +183,7 @@
     this.inputElement_.disabled = false;
     this.updateClasses_();
   };
+  MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
 
   /**
    * Check checkbox.
@@ -188,6 +194,7 @@
     this.inputElement_.checked = true;
     this.updateClasses_();
   };
+  MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
 
   /**
    * Uncheck checkbox.
@@ -198,6 +205,7 @@
     this.inputElement_.checked = false;
     this.updateClasses_();
   };
+  MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
 
   /**
    * Initialize element.

data/vendor/assets/javascripts/material/data-table.js

@@ -23,6 +23,7 @@
    * 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) {
@@ -31,12 +32,13 @@
     // 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_ = {
@@ -48,7 +50,7 @@
    * 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_ = {
@@ -62,12 +64,12 @@
    * 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) {
@@ -78,21 +80,21 @@
       }.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);
@@ -104,10 +106,10 @@
    * 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');
@@ -118,9 +120,11 @@
     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');
     return label;

data/vendor/assets/javascripts/material/icon-toggle.js

@@ -23,6 +23,7 @@
    * 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) {
@@ -31,12 +32,12 @@
     // 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_ = {
@@ -48,7 +49,7 @@
    * 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_ = {
@@ -116,15 +117,14 @@
   /**
    * 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() {
       this.inputElement_.blur();
-    }.bind(this), this.Constant_.TINY_TIMEOUT);
+    }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
   };
 
   // Public methods.
@@ -141,6 +141,8 @@
       this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
     }
   };
+  MaterialIconToggle.prototype['checkToggleState'] =
+      MaterialIconToggle.prototype.checkToggleState;
 
   /**
    * Check the inputs disabled state and update display.
@@ -154,6 +156,8 @@
       this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
     }
   };
+  MaterialIconToggle.prototype['checkDisabled'] =
+      MaterialIconToggle.prototype.checkDisabled;
 
   /**
    * Disable icon toggle.
@@ -164,6 +168,8 @@
     this.inputElement_.disabled = true;
     this.updateClasses_();
   };
+  MaterialIconToggle.prototype['disable'] =
+      MaterialIconToggle.prototype.disable;
 
   /**
    * Enable icon toggle.
@@ -174,6 +180,7 @@
     this.inputElement_.disabled = false;
     this.updateClasses_();
   };
+  MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
 
   /**
    * Check icon toggle.
@@ -184,6 +191,7 @@
     this.inputElement_.checked = true;
     this.updateClasses_();
   };
+  MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
 
   /**
    * Uncheck icon toggle.
@@ -194,6 +202,8 @@
     this.inputElement_.checked = false;
     this.updateClasses_();
   };
+  MaterialIconToggle.prototype['uncheck'] =
+      MaterialIconToggle.prototype.uncheck;
 
   /**
    * Initialize element.

data/vendor/assets/javascripts/material/layout.js

@@ -23,6 +23,7 @@
    * 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) {
@@ -31,12 +32,12 @@
     // 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_ = {
@@ -51,7 +52,7 @@
   /**
    * Modes.
    *
-   * @enum {Number}
+   * @enum {number}
    * @private
    */
   MaterialLayout.prototype.Mode_ = {
@@ -66,7 +67,7 @@
    * 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_ = {
@@ -244,7 +245,8 @@
 
       // Keep an eye on screen size, and add/remove auxiliary class for styling
       // of small screens.
-      this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
+      this.screenSizeMediaQuery_ = window.matchMedia(
+          /** @type {string} */ (this.Constant_.MAX_WIDTH));
       this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
       this.screenSizeHandler_();
 
@@ -284,14 +286,27 @@
         }
       }
 
+      /**
+       * 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.
@@ -300,10 +315,7 @@
           //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));
 
@@ -402,6 +414,15 @@
     }
   };
 
+  /**
+   * 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(

data/vendor/assets/javascripts/material/mdlComponentHandler.js

@@ -23,7 +23,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>} */
@@ -39,15 +98,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];
@@ -59,8 +118,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) {
@@ -73,9 +132,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) {
@@ -87,20 +146,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;
@@ -117,8 +177,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) {
@@ -177,7 +237,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) {
@@ -191,10 +251,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);
       }
     }
   }
@@ -202,20 +262,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');
@@ -240,7 +312,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
@@ -312,6 +384,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));
     };
@@ -339,24 +415,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
@@ -364,9 +434,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)>
  * }}
  */
@@ -378,10 +448,49 @@ 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() {};
+  }
+});