@material/list - npm Package Compare versions

Comparing version 0.39.3 to 0.40.0

adapter.js

@@ -91,4 +91,11 @@ /**
   followHref(ele) {}
+
+  /**
+   * Toggles the checkbox or radio button within a list item.
+   * @param {number} index
+   * @return {boolean} true if a radio button or checkbox was present.
+   */
+  toggleCheckbox(index) {}
 }
 
 export default MDCListAdapter;

constants.js

@@ -37,3 +37,8 @@ /**
   ARIA_SELECTED: 'aria-selected',
-  FOCUSABLE_CHILD_ELEMENTS: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), .${cssClasses.LIST_ITEM_CLASS} a`,
+  CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',
+  CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), 
+  .${cssClasses.LIST_ITEM_CLASS} a`,
+  FOCUSABLE_CHILD_ELEMENTS: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), .${cssClasses.LIST_ITEM_CLASS} a,
+  .${cssClasses.LIST_ITEM_CLASS} input[type="radio"]:not(:disabled),
+  .${cssClasses.LIST_ITEM_CLASS} input[type="checkbox"]:not(:disabled)`,
   ENABLED_ITEMS_SELECTOR: '.mdc-list-item:not(.mdc-list-item--disabled)',
@@ -40,0 +45,0 @@ };

dist/mdc.list.js

@@ -78,8 +78,7 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 22);
+/******/ 	return __webpack_require__(__webpack_require__.s = 23);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -193,4 +192,3 @@
 /***/ }),
-
-/***/ 1:
+/* 1 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -373,4 +371,82 @@
 /***/ }),
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */,
+/* 9 */,
+/* 10 */,
+/* 11 */,
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/***/ 13:
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "closest", function() { return closest; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "matches", function() { return matches; });
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * @fileoverview A "ponyfill" is a polyfill that doesn't modify the global prototype chain.
+ * This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.
+ */
+
+/**
+ * @param {!Element} element
+ * @param {string} selector
+ * @return {?Element}
+ */
+function closest(element, selector) {
+  if (element.closest) {
+    return element.closest(selector);
+  }
+
+  var el = element;
+  while (el) {
+    if (matches(el, selector)) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return null;
+}
+
+/**
+ * @param {!Element} element
+ * @param {string} selector
+ * @return {boolean}
+ */
+function matches(element, selector) {
+  var nativeMatches = element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
+  return nativeMatches.call(element, selector);
+}
+
+
+
+/***/ }),
+/* 13 */,
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -504,2 +580,12 @@
     value: function followHref(ele) {}
+
+    /**
+     * Toggles the checkbox or radio button within a list item.
+     * @param {number} index
+     * @return {boolean} true if a radio button or checkbox was present.
+     */
+
+  }, {
+    key: "toggleCheckbox",
+    value: function toggleCheckbox(index) {}
   }]);
@@ -513,4 +599,3 @@
 /***/ }),
-
-/***/ 14:
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -557,3 +642,5 @@
   ARIA_SELECTED: 'aria-selected',
-  FOCUSABLE_CHILD_ELEMENTS: '.' + cssClasses.LIST_ITEM_CLASS + ' button:not(:disabled), .' + cssClasses.LIST_ITEM_CLASS + ' a',
+  CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',
+  CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: '.' + cssClasses.LIST_ITEM_CLASS + ' button:not(:disabled), \n  .' + cssClasses.LIST_ITEM_CLASS + ' a',
+  FOCUSABLE_CHILD_ELEMENTS: '.' + cssClasses.LIST_ITEM_CLASS + ' button:not(:disabled), .' + cssClasses.LIST_ITEM_CLASS + ' a,\n  .' + cssClasses.LIST_ITEM_CLASS + ' input[type="radio"]:not(:disabled),\n  .' + cssClasses.LIST_ITEM_CLASS + ' input[type="checkbox"]:not(:disabled)',
   ENABLED_ITEMS_SELECTOR: '.mdc-list-item:not(.mdc-list-item--disabled)'
@@ -565,4 +652,8 @@ };
 /***/ }),
-
-/***/ 20:
+/* 16 */,
+/* 17 */,
+/* 18 */,
+/* 19 */,
+/* 20 */,
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -572,4 +663,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(15);
 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; };
@@ -651,3 +742,4 @@
           setTabIndexForListItemChildren: function setTabIndexForListItemChildren() {},
-          followHref: function followHref() {}
+          followHref: function followHref() {},
+          toggleCheckbox: function toggleCheckbox() {}
         }
@@ -824,7 +916,9 @@ );
         this.focusLastElement();
-      } else if (this.isSingleSelectionList_ && (isEnter || isSpace)) {
-        this.preventDefaultEvent_(evt);
-        // Check if the space key was pressed on the list item or a child element.
+      } else if (isEnter || isSpace) {
         if (isRootListItem) {
-          this.setSelectedIndex(currentIndex);
+          if (this.isSingleSelectionList_) {
+            // Check if the space key was pressed on the list item or a child element.
+            this.setSelectedIndex(currentIndex);
+            this.preventDefaultEvent_(evt);
+          }
 
@@ -834,2 +928,8 @@ // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them.
         }
+
+        var checkboxFound = this.adapter_.toggleCheckbox(listItemIndex);
+
+        if (checkboxFound) {
+          this.preventDefaultEvent_(evt);
+        }
       }
@@ -840,2 +940,4 @@ }
      * Click handler for the list.
+     * @param {number} index
+     * @param {boolean} toggleCheckbox
      */
@@ -845,8 +947,12 @@
     key: 'handleClick',
-    value: function handleClick() {
-      var currentIndex = this.adapter_.getFocusedElementIndex();
+    value: function handleClick(index, toggleCheckbox) {
+      if (index === -1) return;
 
-      if (currentIndex === -1) return;
+      if (toggleCheckbox) {
+        this.adapter_.toggleCheckbox(index);
+      }
 
-      this.setSelectedIndex(currentIndex);
+      if (this.isSingleSelectionList_) {
+        this.setSelectedIndex(index);
+      }
     }
@@ -933,4 +1039,4 @@
 /***/ }),
-
-/***/ 22:
+/* 22 */,
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -942,5 +1048,6 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(20);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__adapter__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(21);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__adapter__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__material_dom_ponyfill__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__constants__ = __webpack_require__(15);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCListFoundation", function() { return __WEBPACK_IMPORTED_MODULE_1__foundation__["a"]; });
@@ -985,2 +1092,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; };
 
+
 /**
@@ -1033,3 +1141,3 @@ * @extends MDCComponent<!MDCListFoundation>
     value: function initialSyncWithDOM() {
-      this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
+      this.handleClick_ = this.handleClickEvent_.bind(this);
       this.handleKeydown_ = this.handleKeydownEvent_.bind(this);
@@ -1041,2 +1149,3 @@ this.focusInEventListener_ = this.handleFocusInEvent_.bind(this);
       this.root_.addEventListener('focusout', this.focusOutEventListener_);
+      this.root_.addEventListener('click', this.handleClick_);
       this.layout();
@@ -1048,4 +1157,4 @@ this.initializeListType();
     value: function layout() {
-      var direction = this.root_.getAttribute(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].ARIA_ORIENTATION);
-      this.vertical = direction !== __WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].ARIA_ORIENTATION_HORIZONTAL;
+      var direction = this.root_.getAttribute(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].ARIA_ORIENTATION);
+      this.vertical = direction !== __WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].ARIA_ORIENTATION_HORIZONTAL;
 
@@ -1058,3 +1167,3 @@ // List items need to have at least tabindex=-1 to be focusable.
       // Child button/a elements are not tabbable until the list item is focused.
-      [].slice.call(this.root_.querySelectorAll(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].FOCUSABLE_CHILD_ELEMENTS)).forEach(function (ele) {
+      [].slice.call(this.root_.querySelectorAll(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].FOCUSABLE_CHILD_ELEMENTS)).forEach(function (ele) {
         return ele.setAttribute('tabindex', -1);
@@ -1078,3 +1187,3 @@ });
       // Find the first ancestor that is a list item or the list.
-      while (!eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_CLASS) && !eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].ROOT)) {
+      while (!eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_CLASS) && !eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].ROOT)) {
         eventTarget = eventTarget.parentElement;
@@ -1084,3 +1193,3 @@ }
       // Get the index of the element if it is a list item.
-      if (eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_CLASS)) {
+      if (eventTarget.classList.contains(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_CLASS)) {
         index = this.listElements.indexOf(eventTarget);
@@ -1119,3 +1228,4 @@ }
     /**
-     * Used to figure out which element was clicked before sending the event to the foundation.
+     * Used to figure out which element was focused when keydown event occurred before sending the event to the
+     * foundation.
      * @param {Event} evt
@@ -1131,13 +1241,29 @@ * @private
       if (index >= 0) {
-        this.foundation_.handleKeydown(evt, evt.target.classList.contains(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_CLASS), index);
+        this.foundation_.handleKeydown(evt, evt.target.classList.contains(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_CLASS), index);
       }
     }
+
+    /**
+     * Used to figure out which element was clicked before sending the event to the foundation.
+     * @param {Event} evt
+     * @private
+     */
+
   }, {
+    key: 'handleClickEvent_',
+    value: function handleClickEvent_(evt) {
+      var index = this.getListItemIndex_(evt);
+
+      // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
+      var toggleCheckbox = !Object(__WEBPACK_IMPORTED_MODULE_3__material_dom_ponyfill__["matches"])( /** @type {!Element} */evt.target, __WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_RADIO_SELECTOR);
+      this.foundation_.handleClick(index, toggleCheckbox);
+    }
+  }, {
     key: 'initializeListType',
     value: function initializeListType() {
       // Automatically set single selection if selected/activated classes are present.
-      var preselectedElement = this.root_.querySelector('.' + __WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS + ', .' + __WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS);
+      var preselectedElement = this.root_.querySelector('.' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS + ', .' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS);
 
       if (preselectedElement) {
-        if (preselectedElement.classList.contains(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS)) {
+        if (preselectedElement.classList.contains(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS)) {
           this.foundation_.setUseActivatedClass(true);
@@ -1200,3 +1326,3 @@ }
           var element = _this2.listElements[listItemIndex];
-          var listItemChildren = [].slice.call(element.querySelectorAll(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].FOCUSABLE_CHILD_ELEMENTS));
+          var listItemChildren = [].slice.call(element.querySelectorAll(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
           listItemChildren.forEach(function (ele) {
@@ -1211,2 +1337,18 @@ return ele.setAttribute('tabindex', tabIndexValue);
           }
+        },
+        toggleCheckbox: function toggleCheckbox(index) {
+          var checkboxOrRadioExists = false;
+          var listItem = _this2.listElements[index];
+          var elementsToToggle = [].slice.call(listItem.querySelectorAll(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_RADIO_SELECTOR));
+          elementsToToggle.forEach(function (element) {
+            var event = document.createEvent('Event');
+            event.initEvent('change', true, true);
+
+            if (!element.checked || element.type !== 'radio') {
+              element.checked = !element.checked;
+              element.dispatchEvent(event);
+            }
+            checkboxOrRadioExists = true;
+          });
+          return checkboxOrRadioExists;
         }
@@ -1226,3 +1368,3 @@ }));
     get: function get() {
-      return [].slice.call(this.root_.querySelectorAll(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].ENABLED_ITEMS_SELECTOR));
+      return [].slice.call(this.root_.querySelectorAll(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].ENABLED_ITEMS_SELECTOR));
     }
@@ -1243,8 +1385,2 @@
     set: function set(isSingleSelectionList) {
-      if (isSingleSelectionList) {
-        this.root_.addEventListener('click', this.handleClick_);
-      } else {
-        this.root_.removeEventListener('click', this.handleClick_);
-      }
-
       this.foundation_.setSingleSelection(isSingleSelectionList);
@@ -1273,5 +1409,4 @@ }
 /***/ })
-
-/******/ });
+/******/ ]);
 });
 //# sourceMappingURL=mdc.list.js.map

dist/mdc.list.min.js

@@ -6,3 +6,3 @@ /*!
 */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.list=t():(e.mdc=e.mdc||{},e.mdc.list=t())}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=22)}({0:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.adapter_=t}return o(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),o(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=r},1:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,e),this.root_=t;for(var o=arguments.length,r=Array(o>2?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(e,null,[{key:"attachTo",value:function(t){return new e(t,new o.a)}}]),r(e,[{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(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(e,{detail:t,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(i)}}]),e}();t.a=s},13:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){function e(){i(this,e)}o(e,[{key:"getListItemCount",value:function(){}},{key:"getFocusedElementIndex",value:function(){}},{key:"setAttributeForElementIndex",value:function(e,t,n){}},{key:"removeAttributeForElementIndex",value:function(e,t){}},{key:"addClassForElementIndex",value:function(e,t){}},{key:"removeClassForElementIndex",value:function(e,t){}},{key:"focusItemAtIndex",value:function(e){}},{key:"setTabIndexForListItemChildren",value:function(e,t){}},{key:"followHref",value:function(e){}}])}()},14:function(e,t,n){"use strict";n.d(t,"b",function(){return o}),n.d(t,"a",function(){return i});/**
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.list=t():(e.mdc=e.mdc||{},e.mdc.list=t())}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=23)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.adapter_=t}return o(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),o(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,e),this.root_=t;for(var o=arguments.length,r=Array(o>2?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(e,null,[{key:"attachTo",value:function(t){return new e(t,new o.a)}}]),r(e,[{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(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(e,{detail:t,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(i)}}]),e}();t.a=s},,,,,,,,,,,function(e,t,n){"use strict";/**
  * @license
@@ -29,3 +29,25 @@ * Copyright 2018 Google Inc.
  */
-var i={ROOT:"mdc-list",LIST_ITEM_CLASS:"mdc-list-item",LIST_ITEM_SELECTED_CLASS:"mdc-list-item--selected",LIST_ITEM_ACTIVATED_CLASS:"mdc-list-item--activated"},o={ARIA_ORIENTATION:"aria-orientation",ARIA_ORIENTATION_HORIZONTAL:"horizontal",ARIA_SELECTED:"aria-selected",FOCUSABLE_CHILD_ELEMENTS:"."+i.LIST_ITEM_CLASS+" button:not(:disabled), ."+i.LIST_ITEM_CLASS+" a",ENABLED_ITEMS_SELECTOR:".mdc-list-item:not(.mdc-list-item--disabled)"}},20:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),a=(n(13),n(14)),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=["input","button","textarea","select"],f=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,u(t.defaultAdapter,e)));return n.wrapFocus_=!1,n.isVertical_=!0,n.isSingleSelectionList_=!1,n.selectedIndex_=-1,n.useActivatedClass_=!1,n}return r(t,e),l(t,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{key:"defaultAdapter",get:function(){return{getListItemCount:function(){},getFocusedElementIndex:function(){},setAttributeForElementIndex:function(){},removeAttributeForElementIndex:function(){},addClassForElementIndex:function(){},removeClassForElementIndex:function(){},focusItemAtIndex:function(){},setTabIndexForListItemChildren:function(){},followHref:function(){}}}}]),l(t,[{key:"setWrapFocus",value:function(e){this.wrapFocus_=e}},{key:"setVerticalOrientation",value:function(e){this.isVertical_=e}},{key:"setSingleSelection",value:function(e){this.isSingleSelectionList_=e}},{key:"setUseActivatedClass",value:function(e){this.useActivatedClass_=e}},{key:"setSelectedIndex",value:function(e){if(e!==this.selectedIndex_){var t=this.useActivatedClass_?a.a.LIST_ITEM_ACTIVATED_CLASS:a.a.LIST_ITEM_SELECTED_CLASS;this.selectedIndex_>=0&&(this.adapter_.removeAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED),this.adapter_.removeClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",-1)),e>=0&&this.adapter_.getListItemCount()>e&&(this.selectedIndex_=e,this.adapter_.setAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED,!0),this.adapter_.addClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",0),0!==this.selectedIndex_&&this.adapter_.setAttributeForElementIndex(0,"tabindex",-1))}}},{key:"handleFocusIn",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,0)}},{key:"handleFocusOut",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,-1)}},{key:"handleKeydown",value:function(e,t,n){var i="ArrowLeft"===e.key||37===e.keyCode,o="ArrowUp"===e.key||38===e.keyCode,r="ArrowRight"===e.key||39===e.keyCode,s="ArrowDown"===e.key||40===e.keyCode,a="Home"===e.key||36===e.keyCode,u="End"===e.key||35===e.keyCode,l="Enter"===e.key||13===e.keyCode,c="Space"===e.key||32===e.keyCode,f=this.adapter_.getFocusedElementIndex();-1===f&&(f=n)<0||(this.isVertical_&&s||!this.isVertical_&&r?(this.preventDefaultEvent_(e),this.focusNextElement(f)):this.isVertical_&&o||!this.isVertical_&&i?(this.preventDefaultEvent_(e),this.focusPrevElement(f)):a?(this.preventDefaultEvent_(e),this.focusFirstElement()):u?(this.preventDefaultEvent_(e),this.focusLastElement()):this.isSingleSelectionList_&&(l||c)&&(this.preventDefaultEvent_(e),t&&(this.setSelectedIndex(f),this.adapter_.followHref(f))))}},{key:"handleClick",value:function(){var e=this.adapter_.getFocusedElementIndex();-1!==e&&this.setSelectedIndex(e)}},{key:"preventDefaultEvent_",value:function(e){var t=(""+e.target.tagName).toLowerCase();-1===c.indexOf(t)&&e.preventDefault()}},{key:"focusNextElement",value:function(e){var t=this.adapter_.getListItemCount(),n=e+1;if(n>=t){if(!this.wrapFocus_)return;n=0}this.adapter_.focusItemAtIndex(n)}},{key:"focusPrevElement",value:function(e){var t=e-1;if(t<0){if(!this.wrapFocus_)return;t=this.adapter_.getListItemCount()-1}this.adapter_.focusItemAtIndex(t)}},{key:"focusFirstElement",value:function(){this.adapter_.getListItemCount()>0&&this.adapter_.focusItemAtIndex(0)}},{key:"focusLastElement",value:function(){var e=this.adapter_.getListItemCount()-1;e>=0&&this.adapter_.focusItemAtIndex(e)}}]),t}(s.a);t.a=f},22:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCList",function(){return f});var s=n(1),a=n(20),u=(n(13),n(14));n.d(t,"MDCListFoundation",function(){return a.a});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),s=0;s<n;s++)r[s]=arguments[s];var a=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.handleKeydown_,a.handleClick_,a.focusInEventListener_,a.focusOutEventListener_,a}return r(t,e),c(t,[{key:"destroy",value:function(){this.root_.removeEventListener("keydown",this.handleKeydown_),this.root_.removeEventListener("click",this.handleClick_),this.root_.removeEventListener("focusin",this.focusInEventListener_),this.root_.removeEventListener("focusout",this.focusOutEventListener_)}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.foundation_.handleClick.bind(this.foundation_),this.handleKeydown_=this.handleKeydownEvent_.bind(this),this.focusInEventListener_=this.handleFocusInEvent_.bind(this),this.focusOutEventListener_=this.handleFocusOutEvent_.bind(this),this.root_.addEventListener("keydown",this.handleKeydown_),this.root_.addEventListener("focusin",this.focusInEventListener_),this.root_.addEventListener("focusout",this.focusOutEventListener_),this.layout(),this.initializeListType()}},{key:"layout",value:function(){var e=this.root_.getAttribute(u.b.ARIA_ORIENTATION);this.vertical=e!==u.b.ARIA_ORIENTATION_HORIZONTAL,[].slice.call(this.root_.querySelectorAll(".mdc-list-item:not([tabindex])")).forEach(function(e){e.setAttribute("tabindex",-1)}),[].slice.call(this.root_.querySelectorAll(u.b.FOCUSABLE_CHILD_ELEMENTS)).forEach(function(e){return e.setAttribute("tabindex",-1)})}},{key:"getListItemIndex_",value:function(e){for(var t=e.target,n=-1;!t.classList.contains(u.a.LIST_ITEM_CLASS)&&!t.classList.contains(u.a.ROOT);)t=t.parentElement;return t.classList.contains(u.a.LIST_ITEM_CLASS)&&(n=this.listElements.indexOf(t)),n}},{key:"handleFocusInEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusIn(e,t)}},{key:"handleFocusOutEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusOut(e,t)}},{key:"handleKeydownEvent_",value:function(e){var t=this.getListItemIndex_(e);t>=0&&this.foundation_.handleKeydown(e,e.target.classList.contains(u.a.LIST_ITEM_CLASS),t)}},{key:"initializeListType",value:function(){var e=this.root_.querySelector("."+u.a.LIST_ITEM_ACTIVATED_CLASS+", ."+u.a.LIST_ITEM_SELECTED_CLASS);e&&(e.classList.contains(u.a.LIST_ITEM_ACTIVATED_CLASS)&&this.foundation_.setUseActivatedClass(!0),this.singleSelection=!0,this.selectedIndex=this.listElements.indexOf(e))}},{key:"getDefaultFoundation",value:function(){var e=this;return new a.a(l({getListItemCount:function(){return e.listElements.length},getFocusedElementIndex:function(){return e.listElements.indexOf(document.activeElement)},setAttributeForElementIndex:function(t,n,i){var o=e.listElements[t];o&&o.setAttribute(n,i)},removeAttributeForElementIndex:function(t,n){var i=e.listElements[t];i&&i.removeAttribute(n)},addClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.add(n)},removeClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.remove(n)},focusItemAtIndex:function(t){var n=e.listElements[t];n&&n.focus()},setTabIndexForListItemChildren:function(t,n){var i=e.listElements[t];[].slice.call(i.querySelectorAll(u.b.FOCUSABLE_CHILD_ELEMENTS)).forEach(function(e){return e.setAttribute("tabindex",n)})},followHref:function(t){var n=e.listElements[t];n&&n.href&&n.click()}}))}},{key:"vertical",set:function(e){this.foundation_.setVerticalOrientation(e)}},{key:"listElements",get:function(){return[].slice.call(this.root_.querySelectorAll(u.b.ENABLED_ITEMS_SELECTOR))}},{key:"wrapFocus",set:function(e){this.foundation_.setWrapFocus(e)}},{key:"singleSelection",set:function(e){e?this.root_.addEventListener("click",this.handleClick_):this.root_.removeEventListener("click",this.handleClick_),this.foundation_.setSingleSelection(e)}},{key:"selectedIndex",set:function(e){this.foundation_.setSelectedIndex(e)}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(s.a)}})});
+function i(e,t){if(e.closest)return e.closest(t);for(var n=e;n;){if(o(n,t))return n;n=n.parentElement}return null}function o(e,t){return(e.matches||e.webkitMatchesSelector||e.msMatchesSelector).call(e,t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"closest",function(){return i}),n.d(t,"matches",function(){return o})},,function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){function e(){i(this,e)}o(e,[{key:"getListItemCount",value:function(){}},{key:"getFocusedElementIndex",value:function(){}},{key:"setAttributeForElementIndex",value:function(e,t,n){}},{key:"removeAttributeForElementIndex",value:function(e,t){}},{key:"addClassForElementIndex",value:function(e,t){}},{key:"removeClassForElementIndex",value:function(e,t){}},{key:"focusItemAtIndex",value:function(e){}},{key:"setTabIndexForListItemChildren",value:function(e,t){}},{key:"followHref",value:function(e){}},{key:"toggleCheckbox",value:function(e){}}])}()},function(e,t,n){"use strict";n.d(t,"b",function(){return o}),n.d(t,"a",function(){return i});/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var i={ROOT:"mdc-list",LIST_ITEM_CLASS:"mdc-list-item",LIST_ITEM_SELECTED_CLASS:"mdc-list-item--selected",LIST_ITEM_ACTIVATED_CLASS:"mdc-list-item--activated"},o={ARIA_ORIENTATION:"aria-orientation",ARIA_ORIENTATION_HORIZONTAL:"horizontal",ARIA_SELECTED:"aria-selected",CHECKBOX_RADIO_SELECTOR:'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',CHILD_ELEMENTS_TO_TOGGLE_TABINDEX:"."+i.LIST_ITEM_CLASS+" button:not(:disabled), \n  ."+i.LIST_ITEM_CLASS+" a",FOCUSABLE_CHILD_ELEMENTS:"."+i.LIST_ITEM_CLASS+" button:not(:disabled), ."+i.LIST_ITEM_CLASS+" a,\n  ."+i.LIST_ITEM_CLASS+' input[type="radio"]:not(:disabled),\n  .'+i.LIST_ITEM_CLASS+' input[type="checkbox"]:not(:disabled)',ENABLED_ITEMS_SELECTOR:".mdc-list-item:not(.mdc-list-item--disabled)"}},,,,,,function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),a=(n(14),n(15)),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=["input","button","textarea","select"],f=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,u(t.defaultAdapter,e)));return n.wrapFocus_=!1,n.isVertical_=!0,n.isSingleSelectionList_=!1,n.selectedIndex_=-1,n.useActivatedClass_=!1,n}return r(t,e),l(t,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{key:"defaultAdapter",get:function(){return{getListItemCount:function(){},getFocusedElementIndex:function(){},setAttributeForElementIndex:function(){},removeAttributeForElementIndex:function(){},addClassForElementIndex:function(){},removeClassForElementIndex:function(){},focusItemAtIndex:function(){},setTabIndexForListItemChildren:function(){},followHref:function(){},toggleCheckbox:function(){}}}}]),l(t,[{key:"setWrapFocus",value:function(e){this.wrapFocus_=e}},{key:"setVerticalOrientation",value:function(e){this.isVertical_=e}},{key:"setSingleSelection",value:function(e){this.isSingleSelectionList_=e}},{key:"setUseActivatedClass",value:function(e){this.useActivatedClass_=e}},{key:"setSelectedIndex",value:function(e){if(e!==this.selectedIndex_){var t=this.useActivatedClass_?a.a.LIST_ITEM_ACTIVATED_CLASS:a.a.LIST_ITEM_SELECTED_CLASS;this.selectedIndex_>=0&&(this.adapter_.removeAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED),this.adapter_.removeClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",-1)),e>=0&&this.adapter_.getListItemCount()>e&&(this.selectedIndex_=e,this.adapter_.setAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED,!0),this.adapter_.addClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",0),0!==this.selectedIndex_&&this.adapter_.setAttributeForElementIndex(0,"tabindex",-1))}}},{key:"handleFocusIn",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,0)}},{key:"handleFocusOut",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,-1)}},{key:"handleKeydown",value:function(e,t,n){var i="ArrowLeft"===e.key||37===e.keyCode,o="ArrowUp"===e.key||38===e.keyCode,r="ArrowRight"===e.key||39===e.keyCode,s="ArrowDown"===e.key||40===e.keyCode,a="Home"===e.key||36===e.keyCode,u="End"===e.key||35===e.keyCode,l="Enter"===e.key||13===e.keyCode,c="Space"===e.key||32===e.keyCode,f=this.adapter_.getFocusedElementIndex();if(!(-1===f&&(f=n)<0))if(this.isVertical_&&s||!this.isVertical_&&r)this.preventDefaultEvent_(e),this.focusNextElement(f);else if(this.isVertical_&&o||!this.isVertical_&&i)this.preventDefaultEvent_(e),this.focusPrevElement(f);else if(a)this.preventDefaultEvent_(e),this.focusFirstElement();else if(u)this.preventDefaultEvent_(e),this.focusLastElement();else if(l||c){t&&(this.isSingleSelectionList_&&(this.setSelectedIndex(f),this.preventDefaultEvent_(e)),this.adapter_.followHref(f));var d=this.adapter_.toggleCheckbox(n);d&&this.preventDefaultEvent_(e)}}},{key:"handleClick",value:function(e,t){-1!==e&&(t&&this.adapter_.toggleCheckbox(e),this.isSingleSelectionList_&&this.setSelectedIndex(e))}},{key:"preventDefaultEvent_",value:function(e){var t=(""+e.target.tagName).toLowerCase();-1===c.indexOf(t)&&e.preventDefault()}},{key:"focusNextElement",value:function(e){var t=this.adapter_.getListItemCount(),n=e+1;if(n>=t){if(!this.wrapFocus_)return;n=0}this.adapter_.focusItemAtIndex(n)}},{key:"focusPrevElement",value:function(e){var t=e-1;if(t<0){if(!this.wrapFocus_)return;t=this.adapter_.getListItemCount()-1}this.adapter_.focusItemAtIndex(t)}},{key:"focusFirstElement",value:function(){this.adapter_.getListItemCount()>0&&this.adapter_.focusItemAtIndex(0)}},{key:"focusLastElement",value:function(){var e=this.adapter_.getListItemCount()-1;e>=0&&this.adapter_.focusItemAtIndex(e)}}]),t}(s.a);t.a=f},,function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCList",function(){return d});var s=n(1),a=n(21),u=(n(14),n(12)),l=n(15);n.d(t,"MDCListFoundation",function(){return a.a});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),d=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),s=0;s<n;s++)r[s]=arguments[s];var a=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.handleKeydown_,a.handleClick_,a.focusInEventListener_,a.focusOutEventListener_,a}return r(t,e),f(t,[{key:"destroy",value:function(){this.root_.removeEventListener("keydown",this.handleKeydown_),this.root_.removeEventListener("click",this.handleClick_),this.root_.removeEventListener("focusin",this.focusInEventListener_),this.root_.removeEventListener("focusout",this.focusOutEventListener_)}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.handleClickEvent_.bind(this),this.handleKeydown_=this.handleKeydownEvent_.bind(this),this.focusInEventListener_=this.handleFocusInEvent_.bind(this),this.focusOutEventListener_=this.handleFocusOutEvent_.bind(this),this.root_.addEventListener("keydown",this.handleKeydown_),this.root_.addEventListener("focusin",this.focusInEventListener_),this.root_.addEventListener("focusout",this.focusOutEventListener_),this.root_.addEventListener("click",this.handleClick_),this.layout(),this.initializeListType()}},{key:"layout",value:function(){var e=this.root_.getAttribute(l.b.ARIA_ORIENTATION);this.vertical=e!==l.b.ARIA_ORIENTATION_HORIZONTAL,[].slice.call(this.root_.querySelectorAll(".mdc-list-item:not([tabindex])")).forEach(function(e){e.setAttribute("tabindex",-1)}),[].slice.call(this.root_.querySelectorAll(l.b.FOCUSABLE_CHILD_ELEMENTS)).forEach(function(e){return e.setAttribute("tabindex",-1)})}},{key:"getListItemIndex_",value:function(e){for(var t=e.target,n=-1;!t.classList.contains(l.a.LIST_ITEM_CLASS)&&!t.classList.contains(l.a.ROOT);)t=t.parentElement;return t.classList.contains(l.a.LIST_ITEM_CLASS)&&(n=this.listElements.indexOf(t)),n}},{key:"handleFocusInEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusIn(e,t)}},{key:"handleFocusOutEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusOut(e,t)}},{key:"handleKeydownEvent_",value:function(e){var t=this.getListItemIndex_(e);t>=0&&this.foundation_.handleKeydown(e,e.target.classList.contains(l.a.LIST_ITEM_CLASS),t)}},{key:"handleClickEvent_",value:function(e){var t=this.getListItemIndex_(e),n=!Object(u.matches)(e.target,l.b.CHECKBOX_RADIO_SELECTOR);this.foundation_.handleClick(t,n)}},{key:"initializeListType",value:function(){var e=this.root_.querySelector("."+l.a.LIST_ITEM_ACTIVATED_CLASS+", ."+l.a.LIST_ITEM_SELECTED_CLASS);e&&(e.classList.contains(l.a.LIST_ITEM_ACTIVATED_CLASS)&&this.foundation_.setUseActivatedClass(!0),this.singleSelection=!0,this.selectedIndex=this.listElements.indexOf(e))}},{key:"getDefaultFoundation",value:function(){var e=this;return new a.a(c({getListItemCount:function(){return e.listElements.length},getFocusedElementIndex:function(){return e.listElements.indexOf(document.activeElement)},setAttributeForElementIndex:function(t,n,i){var o=e.listElements[t];o&&o.setAttribute(n,i)},removeAttributeForElementIndex:function(t,n){var i=e.listElements[t];i&&i.removeAttribute(n)},addClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.add(n)},removeClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.remove(n)},focusItemAtIndex:function(t){var n=e.listElements[t];n&&n.focus()},setTabIndexForListItemChildren:function(t,n){var i=e.listElements[t];[].slice.call(i.querySelectorAll(l.b.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(function(e){return e.setAttribute("tabindex",n)})},followHref:function(t){var n=e.listElements[t];n&&n.href&&n.click()},toggleCheckbox:function(t){var n=!1,i=e.listElements[t];return[].slice.call(i.querySelectorAll(l.b.CHECKBOX_RADIO_SELECTOR)).forEach(function(e){var t=document.createEvent("Event");t.initEvent("change",!0,!0),e.checked&&"radio"===e.type||(e.checked=!e.checked,e.dispatchEvent(t)),n=!0}),n}}))}},{key:"vertical",set:function(e){this.foundation_.setVerticalOrientation(e)}},{key:"listElements",get:function(){return[].slice.call(this.root_.querySelectorAll(l.b.ENABLED_ITEMS_SELECTOR))}},{key:"wrapFocus",set:function(e){this.foundation_.setWrapFocus(e)}},{key:"singleSelection",set:function(e){this.foundation_.setSingleSelection(e)}},{key:"selectedIndex",set:function(e){this.foundation_.setSelectedIndex(e)}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(s.a)}])});
 //# sourceMappingURL=mdc.list.min.js.map

foundation.js

@@ -57,2 +57,3 @@ /**
       followHref: () => {},
+      toggleCheckbox: () => {},
     });
@@ -197,7 +198,9 @@ }
       this.focusLastElement();
-    } else if (this.isSingleSelectionList_ && (isEnter || isSpace)) {
-      this.preventDefaultEvent_(evt);
-      // Check if the space key was pressed on the list item or a child element.
+    } else if (isEnter || isSpace) {
       if (isRootListItem) {
-        this.setSelectedIndex(currentIndex);
+        if (this.isSingleSelectionList_) {
+          // Check if the space key was pressed on the list item or a child element.
+          this.setSelectedIndex(currentIndex);
+          this.preventDefaultEvent_(evt);
+        }
 
@@ -207,2 +210,8 @@ // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them.
       }
+
+      const checkboxFound = this.adapter_.toggleCheckbox(listItemIndex);
+
+      if (checkboxFound) {
+        this.preventDefaultEvent_(evt);
+      }
     }
@@ -213,9 +222,15 @@ }
    * Click handler for the list.
+   * @param {number} index
+   * @param {boolean} toggleCheckbox
    */
-  handleClick() {
-    const currentIndex = this.adapter_.getFocusedElementIndex();
+  handleClick(index, toggleCheckbox) {
+    if (index === -1) return;
 
-    if (currentIndex === -1) return;
+    if (toggleCheckbox) {
+      this.adapter_.toggleCheckbox(index);
+    }
 
-    this.setSelectedIndex(currentIndex);
+    if (this.isSingleSelectionList_) {
+      this.setSelectedIndex(index);
+    }
   }
@@ -222,0 +237,0 @@

index.js

@@ -27,2 +27,3 @@ /**
 import MDCListAdapter from './adapter';
+import {matches} from '@material/dom/ponyfill';
 import {cssClasses, strings} from './constants';
@@ -63,3 +64,3 @@
   initialSyncWithDOM() {
-    this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
+    this.handleClick_ = this.handleClickEvent_.bind(this);
     this.handleKeydown_ = this.handleKeydownEvent_.bind(this);
@@ -71,2 +72,3 @@ this.focusInEventListener_ = this.handleFocusInEvent_.bind(this);
     this.root_.addEventListener('focusout', this.focusOutEventListener_);
+    this.root_.addEventListener('click', this.handleClick_);
     this.layout();
@@ -136,3 +138,4 @@ this.initializeListType();
   /**
-   * Used to figure out which element was clicked before sending the event to the foundation.
+   * Used to figure out which element was focused when keydown event occurred before sending the event to the
+   * foundation.
    * @param {Event} evt
@@ -149,2 +152,15 @@ * @private
 
+  /**
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   * @param {Event} evt
+   * @private
+   */
+  handleClickEvent_(evt) {
+    const index = this.getListItemIndex_(evt);
+
+    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
+    const toggleCheckbox = !matches(/** @type {!Element} */ (evt.target), strings.CHECKBOX_RADIO_SELECTOR);
+    this.foundation_.handleClick(index, toggleCheckbox);
+  }
+
   initializeListType() {
@@ -182,8 +198,2 @@ // Automatically set single selection if selected/activated classes are present.
   set singleSelection(isSingleSelectionList) {
-    if (isSingleSelectionList) {
-      this.root_.addEventListener('click', this.handleClick_);
-    } else {
-      this.root_.removeEventListener('click', this.handleClick_);
-    }
-
     this.foundation_.setSingleSelection(isSingleSelectionList);
@@ -234,3 +244,3 @@ }
         const element = this.listElements[listItemIndex];
-        const listItemChildren = [].slice.call(element.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS));
+        const listItemChildren = [].slice.call(element.querySelectorAll(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
         listItemChildren.forEach((ele) => ele.setAttribute('tabindex', tabIndexValue));
@@ -244,2 +254,19 @@ },
       },
+      toggleCheckbox: (index) => {
+        let checkboxOrRadioExists = false;
+        const listItem = this.listElements[index];
+        const elementsToToggle =
+          [].slice.call(listItem.querySelectorAll(strings.CHECKBOX_RADIO_SELECTOR));
+        elementsToToggle.forEach((element) => {
+          const event = document.createEvent('Event');
+          event.initEvent('change', true, true);
+
+          if (!element.checked || element.type !== 'radio') {
+            element.checked = !element.checked;
+            element.dispatchEvent(event);
+          }
+          checkboxOrRadioExists = true;
+        });
+        return checkboxOrRadioExists;
+      },
     })));
@@ -246,0 +273,0 @@ }

package.json

 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "0.39.3",
+  "version": "0.40.0",
   "license": "MIT",
@@ -17,7 +17,9 @@ "keywords": [
     "@material/base": "^0.39.0",
-    "@material/ripple": "^0.39.3",
+    "@material/dom": "^0.40.0",
+    "@material/ripple": "^0.40.0",
     "@material/rtl": "^0.39.1",
-    "@material/theme": "^0.39.1",
+    "@material/shape": "^0.40.0",
+    "@material/theme": "^0.40.0",
     "@material/typography": "^0.39.0"
   }
 }

README.md

@@ -261,3 +261,3 @@ <!--docs:
 `mdc-list-item-meta-ink-color($color)` | Sets ink color of the meta element within list item.
-`mdc-list-item-corner-radius($radius)` | Sets the corner border radius of the list item.
+`mdc-list-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to list item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `mdc-list-divider-color($color)` | Sets divider ink color.
@@ -272,8 +272,9 @@ `mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group.
 
-As the user navigates through the list, any `button` or `a` elements within the list will receive `tabindex="-1"`
-when the list item is not focused. When the list item receives focus, the child `button` and `a` elements will
-receive `tabIndex="0"`. This allows for the user to tab through list item elements and then tab to the
-first element after the list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements.
-If `singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect
-a list item. The MDCList will perform the following actions for each key press
+As the user navigates through the list, any `button` and `a` elements within the list will receive `tabindex="-1"` when
+the list item is not focused. When the list item receives focus, the aforementioned elements will receive
+`tabIndex="0"`. This allows for the user to tab through list item elements and then tab to the first element after the
+list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements. If 
+`singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect a list
+item. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio
+button or checkbox within the list item, the list will not toggle `tabindex` for those elements. 
 
@@ -305,3 +306,3 @@ Key | Action
 user can find the first element using the `tab` key, but subsequent `tab` keys strokes will cause focus to
-skip over the entire list. If the list items contain sub-elements that are focusable (`button` or `a` elements),
+skip over the entire list. If the list items contain sub-elements that are focusable (`button` and `a` elements),
 these should also receive `tabIndex="-1"`.
@@ -358,4 +359,5 @@
 `focusItemAtIndex(index: Number) => void` | Focuses the list item at the `index` value specified.
-`setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child `button` and `a` element in the list item at the `index` specified.
+`setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child button or anchor element in the list item at the `index` specified.
 `followHref(element: Element) => void` | If the given element has an href, follows the link.
+`toggleCheckbox(index: number) => boolean` | Toggles a checkbox and radio button in the list item and returns true/false if one was found.
 
@@ -371,4 +373,4 @@ ### `MDCListFoundation`
 `setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class.
-`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus.
-`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus.
+`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.
+`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.
 `handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.
@@ -375,0 +377,0 @@ `handleClick(evt: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154270

increased by7.05%

Lines of code

2406

increased by9.41%

Number of lines in readme file

377

increased by0.53%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Added@material/dom@^0.40.0

• + Added@material/shape@^0.40.0

• + Added@material/animation@0.40.1(transitive)

• + Added@material/base@0.40.1(transitive)

• + Added@material/dom@0.40.0(transitive)

• + Added@material/ripple@0.40.1(transitive)

• + Added@material/shape@0.40.1(transitive)

• + Added@material/theme@0.40.1(transitive)

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

• - Removed@material/ripple@0.39.3(transitive)

• - Removed@material/theme@0.39.1(transitive)

• Updated@material/ripple@^0.40.0

• Updated@material/theme@^0.40.0