@material/icon-button - npm Package Compare versions

Comparing version 0.38.1 to 0.39.0-0

adapter.js

@@ -47,28 +47,13 @@ /**
   /**
-   * @param {string} type
-   * @param {!EventListener} handler
-   */
-  registerInteractionHandler(type, handler) {}
+   * @param {string} className
+   * @return {boolean}
+   * */
+  hasClass(className) {}
 
   /**
-   * @param {string} type
-   * @param {!EventListener} handler
+   * @param {string} attrName
+   * @param {string} attrValue
    */
-  deregisterInteractionHandler(type, handler) {}
+  setAttr(attrName, attrValue) {}
 
-  /** @param {string} text */
-  setText(text) {}
-
-  /**
-   * @param {string} name
-   * @return {string}
-   */
-  getAttr(name) {}
-
-  /**
-   * @param {string} name
-   * @param {string} value
-   */
-  setAttr(name, value) {}
-
   /** @param {!IconButtonToggleEvent} evtData */
@@ -75,0 +60,0 @@ notifyChange(evtData) {}

constants.js

@@ -21,2 +21,3 @@ /**
   ROOT: 'mdc-icon-button',
+  ICON_BUTTON_ON: 'mdc-icon-button--on',
 };
@@ -26,8 +27,2 @@
 const strings = {
-  DATA_TOGGLE_ON_LABEL: 'data-toggle-on-label',
-  DATA_TOGGLE_ON_CONTENT: 'data-toggle-on-content',
-  DATA_TOGGLE_ON_CLASS: 'data-toggle-on-class',
-  DATA_TOGGLE_OFF_LABEL: 'data-toggle-off-label',
-  DATA_TOGGLE_OFF_CONTENT: 'data-toggle-off-content',
-  DATA_TOGGLE_OFF_CLASS: 'data-toggle-off-class',
   ARIA_PRESSED: 'aria-pressed',
@@ -34,0 +29,0 @@ ARIA_LABEL: 'aria-label',

dist/mdc.iconButton.min.js

@@ -6,3 +6,3 @@ /*!
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.iconButton=e():(t.mdc=t.mdc||{},t.mdc.iconButton=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=99)}({0:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},1:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(0),r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(t,{detail:e,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(i)}}]),t}();e.a=o},100:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),s=(n(101),n(102)),u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,u(e.defaultAdapter,t))),r=e.strings.ARIA_PRESSED;return n.on_="true"===n.adapter_.getAttr(r),n.disabled_=!1,n.toggleOnData_=null,n.toggleOffData_=null,n}return r(e,t),c(e,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},setText:function(){},getAttr:function(){return""},setAttr:function(){},notifyChange:function(){}}}}]),c(e,[{key:"init",value:function(){this.refreshToggleData()}},{key:"refreshToggleData",value:function(){this.toggleOnData_={label:this.adapter_.getAttr(s.b.DATA_TOGGLE_ON_LABEL),content:this.adapter_.getAttr(s.b.DATA_TOGGLE_ON_CONTENT),cssClass:this.adapter_.getAttr(s.b.DATA_TOGGLE_ON_CLASS)},this.toggleOffData_={label:this.adapter_.getAttr(s.b.DATA_TOGGLE_OFF_LABEL),content:this.adapter_.getAttr(s.b.DATA_TOGGLE_OFF_CONTENT),cssClass:this.adapter_.getAttr(s.b.DATA_TOGGLE_OFF_CLASS)}}},{key:"handleClick",value:function(){this.toggle();var t=this.on_;this.adapter_.notifyChange({isOn:t})}},{key:"isOn",value:function(){return this.on_}},{key:"toggle",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:!this.on_;this.on_=t;var n=e.strings,i=n.ARIA_LABEL,a=n.ARIA_PRESSED;this.adapter_.setAttr(a,this.on_.toString());var r=this.on_?this.toggleOffData_:this.toggleOnData_,o=r.cssClass;o&&this.adapter_.removeClass(o);var s=this.on_?this.toggleOnData_:this.toggleOffData_,u=s.content,c=s.label,l=s.cssClass;l&&this.adapter_.addClass(l),u&&this.adapter_.setText(u),c&&this.adapter_.setAttr(i,c)}}]),e}(o.a),d=function t(){i(this,t)};d.prototype.label,d.prototype.content,d.prototype.cssClass,e.a=l},101:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}();!function(){function t(){i(this,t)}a(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"setText",value:function(t){}},{key:"getAttr",value:function(t){}},{key:"setAttr",value:function(t,e){}},{key:"notifyChange",value:function(t){}}])}()},102:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});/**
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.iconButton=e():(t.mdc=t.mdc||{},t.mdc.iconButton=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=106)}({0:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},1:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(0),r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(t,{detail:e,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(i)}}]),t}();e.a=o},106:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCIconButtonToggle",function(){return d});var o=n(1),u=n(107),s=n(4);n.d(e,"MDCIconButtonToggleFoundation",function(){return u.a});var c=function t(e,n,i){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,n);if(void 0===a){var r=Object.getPrototypeOf(e);return null===r?void 0:t(r,n,i)}if("value"in a)return a.value;var o=a.get;if(void 0!==o)return o.call(i)},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var u=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return u.ripple_=u.initRipple_(),u.handleClick_,u}return r(e,t),l(e,null,[{key:"attachTo",value:function(t){return new e(t)}}]),l(e,[{key:"initRipple_",value:function(){var t=new s.MDCRipple(this.root_);return t.unbounded=!0,t}},{key:"destroy",value:function(){this.root_.removeEventListener("click",this.handleClick_),this.ripple_.destroy(),c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this)}},{key:"getDefaultFoundation",value:function(){var t=this;return new u.a({addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},hasClass:function(e){return t.root_.classList.contains(e)},setAttr:function(e,n){return t.root_.setAttribute(e,n)},notifyChange:function(e){return t.emit(u.a.strings.CHANGE_EVENT,e)}})}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.foundation_.handleClick.bind(this.foundation_),this.root_.addEventListener("click",this.handleClick_)}},{key:"ripple",get:function(){return this.ripple_}},{key:"on",get:function(){return this.foundation_.isOn()},set:function(t){this.foundation_.toggle(t)}}]),e}(o.a)},107:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),u=(n(108),n(109)),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,s(e.defaultAdapter,t)));return n.disabled_=!1,n}return r(e,t),c(e,null,[{key:"cssClasses",get:function(){return u.a}},{key:"strings",get:function(){return u.b}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},hasClass:function(){},setAttr:function(){},notifyChange:function(){}}}}]),c(e,[{key:"init",value:function(){this.adapter_.setAttr(u.b.ARIA_PRESSED,""+this.isOn())}},{key:"handleClick",value:function(){this.toggle(),this.adapter_.notifyChange({isOn:this.isOn()})}},{key:"isOn",value:function(){return this.adapter_.hasClass(u.a.ICON_BUTTON_ON)}},{key:"toggle",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:!this.isOn();t?this.adapter_.addClass(u.a.ICON_BUTTON_ON):this.adapter_.removeClass(u.a.ICON_BUTTON_ON),this.adapter_.setAttr(u.b.ARIA_PRESSED,""+t)}}]),e}(o.a);e.a=l},108:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}();!function(){function t(){i(this,t)}a(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"hasClass",value:function(t){}},{key:"setAttr",value:function(t,e){}},{key:"notifyChange",value:function(t){}}])}()},109:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});/**
  * @license
@@ -23,3 +23,3 @@ * Copyright 2018 Google Inc. All Rights Reserved.
  */
-var i={ROOT:"mdc-icon-button"},a={DATA_TOGGLE_ON_LABEL:"data-toggle-on-label",DATA_TOGGLE_ON_CONTENT:"data-toggle-on-content",DATA_TOGGLE_ON_CLASS:"data-toggle-on-class",DATA_TOGGLE_OFF_LABEL:"data-toggle-off-label",DATA_TOGGLE_OFF_CONTENT:"data-toggle-off-content",DATA_TOGGLE_OFF_CLASS:"data-toggle-off-class",ARIA_PRESSED:"aria-pressed",ARIA_LABEL:"aria-label",CHANGE_EVENT:"MDCIconButtonToggle:change"}},2:function(t,e,n){"use strict";function i(t){var e=t.document,n=e.createElement("div");n.className="mdc-ripple-surface--test-edge-var-bug",e.body.appendChild(n);var i=t.getComputedStyle(n),a=null!==i&&"solid"===i.borderTopStyle;return n.remove(),a}function a(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=u;if("boolean"==typeof u&&!e)return n;if(t.CSS&&"function"==typeof t.CSS.supports){var a=t.CSS.supports("--css-vars","yes"),r=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n=!(!a&&!r||i(t)),e||(u=n),n}}function r(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===c||e){var n=!1;try{t.document.addEventListener("test",null,{get passive(){n=!0}})}catch(t){}c=n}return!!c&&{passive:!0}}function o(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function s(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchstart"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{x:s,y:u}}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"supportsCssVariables",function(){return a}),n.d(e,"applyPassive",function(){return r}),n.d(e,"getMatchesProperty",function(){return o}),n.d(e,"getNormalizedEventCoords",function(){return s});/**
+var i={ROOT:"mdc-icon-button",ICON_BUTTON_ON:"mdc-icon-button--on"},a={ARIA_PRESSED:"aria-pressed",ARIA_LABEL:"aria-label",CHANGE_EVENT:"MDCIconButtonToggle:change"}},2:function(t,e,n){"use strict";function i(t){var e=t.document,n=e.createElement("div");n.className="mdc-ripple-surface--test-edge-var-bug",e.body.appendChild(n);var i=t.getComputedStyle(n),a=null!==i&&"solid"===i.borderTopStyle;return n.remove(),a}function a(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=s;if("boolean"==typeof s&&!e)return n;if(t.CSS&&"function"==typeof t.CSS.supports){var a=t.CSS.supports("--css-vars","yes"),r=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n=!(!a&&!r||i(t)),e||(s=n),n}}function r(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===c||e){var n=!1;try{t.document.addEventListener("test",null,{get passive(){n=!0}})}catch(t){}c=n}return!!c&&{passive:!0}}function o(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function u(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,u=void 0,s=void 0;return"touchstart"===t.type?(u=t.changedTouches[0].pageX-r,s=t.changedTouches[0].pageY-o):(u=t.pageX-r,s=t.pageY-o),{x:u,y:s}}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"supportsCssVariables",function(){return a}),n.d(e,"applyPassive",function(){return r}),n.d(e,"getMatchesProperty",function(){return o}),n.d(e,"getNormalizedEventCoords",function(){return u});/**
  * @license
@@ -40,3 +40,3 @@ * Copyright 2016 Google Inc. All Rights Reserved.
  */
-var u=void 0,c=void 0},3:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}();!function(){function t(){i(this,t)}a(t,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"containsEventTarget",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"registerDocumentInteractionHandler",value:function(t,e){}},{key:"deregisterDocumentInteractionHandler",value:function(t,e){}},{key:"registerResizeHandler",value:function(t){}},{key:"deregisterResizeHandler",value:function(t){}},{key:"updateCssVariable",value:function(t,e){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},4:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCRipple",function(){return l}),n.d(e,"RippleCapableSurface",function(){return d});var o=n(1),s=(n(3),n(5)),u=n(2);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"util",function(){return u});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.disabled=!1,s.unbounded_,s}return r(e,t),c(e,[{key:"setUnbounded_",value:function(){this.foundation_.setUnbounded(this.unbounded_)}},{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new s.a(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){this.unbounded_=Boolean(t),this.setUnbounded_()}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){var e=u.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return u.supportsCssVariables(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[e](":active")},isSurfaceDisabled:function(){return t.disabled},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},containsEventTarget:function(e){return t.root_.contains(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n,u.applyPassive())},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n,u.applyPassive())},registerDocumentInteractionHandler:function(t,e){return document.documentElement.addEventListener(t,e,u.applyPassive())},deregisterDocumentInteractionHandler:function(t,e){return document.documentElement.removeEventListener(t,e,u.applyPassive())},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(o.a),d=function t(){i(this,t)};d.prototype.root_,d.prototype.unbounded,d.prototype.disabled},5:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),s=(n(3),n(6)),u=n(2),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=["touchstart","pointerdown","mousedown","keydown"],f=["touchend","pointerup","mouseup"],v=[],_=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.initialSize_=0,n.maxRadius_=0,n.activateHandler_=function(t){return n.activate_(t)},n.deactivateHandler_=function(t){return n.deactivate_(t)},n.focusHandler_=function(){return n.handleFocus()},n.blurHandler_=function(){return n.handleBlur()},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n.previousActivationEvent_=null,n}return r(e,t),l(e,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.c}},{key:"numbers",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},containsEventTarget:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerDocumentInteractionHandler:function(){},deregisterDocumentInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),l(e,[{key:"supportsPressRipple_",value:function(){return this.adapter_.browserSupportsCssVars()}},{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationEvent:null,isProgrammatic:!1}}},{key:"init",value:function(){var t=this,n=this.supportsPressRipple_();if(this.registerRootHandlers_(n),n){var i=e.cssClasses,a=i.ROOT,r=i.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(a),t.adapter_.isUnbounded()&&(t.adapter_.addClass(r),t.layoutInternal_())})}}},{key:"destroy",value:function(){var t=this;if(this.supportsPressRipple_()){if(this.activationTimer_){clearTimeout(this.activationTimer_),this.activationTimer_=0;var n=e.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(n)}var i=e.cssClasses,a=i.ROOT,r=i.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(a),t.adapter_.removeClass(r),t.removeCssVars_()})}this.deregisterRootHandlers_(),this.deregisterDeactivationHandlers_()}},{key:"registerRootHandlers_",value:function(t){var e=this;t&&(d.forEach(function(t){e.adapter_.registerInteractionHandler(t,e.activateHandler_)}),this.adapter_.isUnbounded()&&this.adapter_.registerResizeHandler(this.resizeHandler_)),this.adapter_.registerInteractionHandler("focus",this.focusHandler_),this.adapter_.registerInteractionHandler("blur",this.blurHandler_)}},{key:"registerDeactivationHandlers_",value:function(t){var e=this;"keydown"===t.type?this.adapter_.registerInteractionHandler("keyup",this.deactivateHandler_):f.forEach(function(t){e.adapter_.registerDocumentInteractionHandler(t,e.deactivateHandler_)})}},{key:"deregisterRootHandlers_",value:function(){var t=this;d.forEach(function(e){t.adapter_.deregisterInteractionHandler(e,t.activateHandler_)}),this.adapter_.deregisterInteractionHandler("focus",this.focusHandler_),this.adapter_.deregisterInteractionHandler("blur",this.blurHandler_),this.adapter_.isUnbounded()&&this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"deregisterDeactivationHandlers_",value:function(){var t=this;this.adapter_.deregisterInteractionHandler("keyup",this.deactivateHandler_),f.forEach(function(e){t.adapter_.deregisterDocumentInteractionHandler(e,t.deactivateHandler_)})}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"activate_",value:function(t){var e=this;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;if(!n.isActivated){var i=this.previousActivationEvent_;if(!(i&&t&&i.type!==t.type)){n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type);if(t&&v.length>0&&v.some(function(t){return e.adapter_.containsEventTarget(t)}))return void this.resetActivationState_();t&&(v.push(t.target),this.registerDeactivationHandlers_(t)),n.wasElementMadeActive=this.checkElementMadeActive_(t),n.wasElementMadeActive&&this.animateActivation_(),requestAnimationFrame(function(){v=[],n.wasElementMadeActive||" "!==t.key&&32!==t.keyCode||(n.wasElementMadeActive=e.checkElementMadeActive_(t),n.wasElementMadeActive&&e.animateActivation_()),n.wasElementMadeActive||(e.activationState_=e.defaultActivationState_())})}}}}},{key:"checkElementMadeActive_",value:function(t){return!t||"keydown"!==t.type||this.adapter_.isSurfaceActive()}},{key:"activate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.activate_(t)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.FG_DEACTIVATION,s=r.FG_ACTIVATION,u=e.numbers.DEACTIVATION_TIMEOUT_MS;this.layoutInternal_();var c="",l="";if(!this.adapter_.isUnbounded()){var d=this.getFgTranslationCoordinates_(),f=d.startPoint,v=d.endPoint;c=f.x+"px, "+f.y+"px",l=v.x+"px, "+v.y+"px"}this.adapter_.updateCssVariable(i,c),this.adapter_.updateCssVariable(a,l),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(o),this.adapter_.computeBoundingRect(),this.adapter_.addClass(s),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},u)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,n=t.wasActivatedByPointer,i=void 0;return i=n?Object(u.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2},{startPoint:i,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=this,n=e.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,r=i.isActivated;(a||!r)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){t.adapter_.removeClass(n)},s.b.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(t),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"resetActivationState_",value:function(){var t=this;this.previousActivationEvent_=this.activationState_.activationEvent,this.activationState_=this.defaultActivationState_(),setTimeout(function(){return t.previousActivationEvent_=null},e.numbers.TAP_DELAY_MS)}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){var i=c({},n);if(n.isProgrammatic){requestAnimationFrame(function(){return e.animateDeactivation_(null,i)}),this.resetActivationState_()}else this.deregisterDeactivationHandlers_(),requestAnimationFrame(function(){e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,i),e.resetActivationState_()})}}},{key:"deactivate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.deactivate_(t)}},{key:"animateDeactivation_",value:function(t,e){var n=e.wasActivatedByPointer,i=e.wasElementMadeActive;(n||i)&&this.runDeactivationUXLogicIfReady_()}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){var t=this;this.frame_=this.adapter_.computeBoundingRect();var n=Math.max(this.frame_.height,this.frame_.width);this.maxRadius_=this.adapter_.isUnbounded()?n:function(){return Math.sqrt(Math.pow(t.frame_.width,2)+Math.pow(t.frame_.height,2))+e.numbers.PADDING}(),this.initialSize_=n*e.numbers.INITIAL_ORIGIN_SCALE,this.fgScale_=this.maxRadius_/this.initialSize_,this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_FG_SIZE,i=t.VAR_LEFT,a=t.VAR_TOP,r=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(i,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(a,this.unboundedCoords_.top+"px"))}},{key:"setUnbounded",value:function(t){var n=e.cssClasses.UNBOUNDED;t?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"handleFocus",value:function(){var t=this;requestAnimationFrame(function(){return t.adapter_.addClass(e.cssClasses.BG_FOCUSED)})}},{key:"handleBlur",value:function(){var t=this;requestAnimationFrame(function(){return t.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}}]),e}(o.a);e.a=_},6:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"c",function(){return a}),n.d(e,"b",function(){return r});/**
+var s=void 0,c=void 0},3:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}();!function(){function t(){i(this,t)}a(t,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"containsEventTarget",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"registerDocumentInteractionHandler",value:function(t,e){}},{key:"deregisterDocumentInteractionHandler",value:function(t,e){}},{key:"registerResizeHandler",value:function(t){}},{key:"deregisterResizeHandler",value:function(t){}},{key:"updateCssVariable",value:function(t,e){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},4:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCRipple",function(){return l}),n.d(e,"RippleCapableSurface",function(){return d});var o=n(1),u=(n(3),n(5)),s=n(2);n.d(e,"MDCRippleFoundation",function(){return u.a}),n.d(e,"util",function(){return s});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var u=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return u.disabled=!1,u.unbounded_,u}return r(e,t),c(e,[{key:"setUnbounded_",value:function(){this.foundation_.setUnbounded(this.unbounded_)}},{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new u.a(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){this.unbounded_=Boolean(t),this.setUnbounded_()}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){var e=s.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return s.supportsCssVariables(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[e](":active")},isSurfaceDisabled:function(){return t.disabled},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},containsEventTarget:function(e){return t.root_.contains(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n,s.applyPassive())},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n,s.applyPassive())},registerDocumentInteractionHandler:function(t,e){return document.documentElement.addEventListener(t,e,s.applyPassive())},deregisterDocumentInteractionHandler:function(t,e){return document.documentElement.removeEventListener(t,e,s.applyPassive())},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(o.a),d=function t(){i(this,t)};d.prototype.root_,d.prototype.unbounded,d.prototype.disabled},5:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var o=n(0),u=(n(3),n(6)),s=n(2),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=["touchstart","pointerdown","mousedown","keydown"],f=["touchend","pointerup","mouseup"],v=[],p=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.initialSize_=0,n.maxRadius_=0,n.activateHandler_=function(t){return n.activate_(t)},n.deactivateHandler_=function(t){return n.deactivate_(t)},n.focusHandler_=function(){return n.handleFocus()},n.blurHandler_=function(){return n.handleBlur()},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n.previousActivationEvent_=null,n}return r(e,t),l(e,null,[{key:"cssClasses",get:function(){return u.a}},{key:"strings",get:function(){return u.c}},{key:"numbers",get:function(){return u.b}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},containsEventTarget:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerDocumentInteractionHandler:function(){},deregisterDocumentInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),l(e,[{key:"supportsPressRipple_",value:function(){return this.adapter_.browserSupportsCssVars()}},{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationEvent:null,isProgrammatic:!1}}},{key:"init",value:function(){var t=this,n=this.supportsPressRipple_();if(this.registerRootHandlers_(n),n){var i=e.cssClasses,a=i.ROOT,r=i.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(a),t.adapter_.isUnbounded()&&(t.adapter_.addClass(r),t.layoutInternal_())})}}},{key:"destroy",value:function(){var t=this;if(this.supportsPressRipple_()){if(this.activationTimer_){clearTimeout(this.activationTimer_),this.activationTimer_=0;var n=e.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(n)}var i=e.cssClasses,a=i.ROOT,r=i.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(a),t.adapter_.removeClass(r),t.removeCssVars_()})}this.deregisterRootHandlers_(),this.deregisterDeactivationHandlers_()}},{key:"registerRootHandlers_",value:function(t){var e=this;t&&(d.forEach(function(t){e.adapter_.registerInteractionHandler(t,e.activateHandler_)}),this.adapter_.isUnbounded()&&this.adapter_.registerResizeHandler(this.resizeHandler_)),this.adapter_.registerInteractionHandler("focus",this.focusHandler_),this.adapter_.registerInteractionHandler("blur",this.blurHandler_)}},{key:"registerDeactivationHandlers_",value:function(t){var e=this;"keydown"===t.type?this.adapter_.registerInteractionHandler("keyup",this.deactivateHandler_):f.forEach(function(t){e.adapter_.registerDocumentInteractionHandler(t,e.deactivateHandler_)})}},{key:"deregisterRootHandlers_",value:function(){var t=this;d.forEach(function(e){t.adapter_.deregisterInteractionHandler(e,t.activateHandler_)}),this.adapter_.deregisterInteractionHandler("focus",this.focusHandler_),this.adapter_.deregisterInteractionHandler("blur",this.blurHandler_),this.adapter_.isUnbounded()&&this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"deregisterDeactivationHandlers_",value:function(){var t=this;this.adapter_.deregisterInteractionHandler("keyup",this.deactivateHandler_),f.forEach(function(e){t.adapter_.deregisterDocumentInteractionHandler(e,t.deactivateHandler_)})}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"activate_",value:function(t){var e=this;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;if(!n.isActivated){var i=this.previousActivationEvent_;if(!(i&&t&&i.type!==t.type)){n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type);if(t&&v.length>0&&v.some(function(t){return e.adapter_.containsEventTarget(t)}))return void this.resetActivationState_();t&&(v.push(t.target),this.registerDeactivationHandlers_(t)),n.wasElementMadeActive=this.checkElementMadeActive_(t),n.wasElementMadeActive&&this.animateActivation_(),requestAnimationFrame(function(){v=[],n.wasElementMadeActive||" "!==t.key&&32!==t.keyCode||(n.wasElementMadeActive=e.checkElementMadeActive_(t),n.wasElementMadeActive&&e.animateActivation_()),n.wasElementMadeActive||(e.activationState_=e.defaultActivationState_())})}}}}},{key:"checkElementMadeActive_",value:function(t){return!t||"keydown"!==t.type||this.adapter_.isSurfaceActive()}},{key:"activate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.activate_(t)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.FG_DEACTIVATION,u=r.FG_ACTIVATION,s=e.numbers.DEACTIVATION_TIMEOUT_MS;this.layoutInternal_();var c="",l="";if(!this.adapter_.isUnbounded()){var d=this.getFgTranslationCoordinates_(),f=d.startPoint,v=d.endPoint;c=f.x+"px, "+f.y+"px",l=v.x+"px, "+v.y+"px"}this.adapter_.updateCssVariable(i,c),this.adapter_.updateCssVariable(a,l),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(o),this.adapter_.computeBoundingRect(),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},s)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,n=t.wasActivatedByPointer,i=void 0;return i=n?Object(s.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2},{startPoint:i,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=this,n=e.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,r=i.isActivated;(a||!r)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){t.adapter_.removeClass(n)},u.b.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(t),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"resetActivationState_",value:function(){var t=this;this.previousActivationEvent_=this.activationState_.activationEvent,this.activationState_=this.defaultActivationState_(),setTimeout(function(){return t.previousActivationEvent_=null},e.numbers.TAP_DELAY_MS)}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){var i=c({},n);if(n.isProgrammatic){requestAnimationFrame(function(){return e.animateDeactivation_(null,i)}),this.resetActivationState_()}else this.deregisterDeactivationHandlers_(),requestAnimationFrame(function(){e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,i),e.resetActivationState_()})}}},{key:"deactivate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.deactivate_(t)}},{key:"animateDeactivation_",value:function(t,e){var n=e.wasActivatedByPointer,i=e.wasElementMadeActive;(n||i)&&this.runDeactivationUXLogicIfReady_()}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){var t=this;this.frame_=this.adapter_.computeBoundingRect();var n=Math.max(this.frame_.height,this.frame_.width);this.maxRadius_=this.adapter_.isUnbounded()?n:function(){return Math.sqrt(Math.pow(t.frame_.width,2)+Math.pow(t.frame_.height,2))+e.numbers.PADDING}(),this.initialSize_=n*e.numbers.INITIAL_ORIGIN_SCALE,this.fgScale_=this.maxRadius_/this.initialSize_,this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_FG_SIZE,i=t.VAR_LEFT,a=t.VAR_TOP,r=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(i,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(a,this.unboundedCoords_.top+"px"))}},{key:"setUnbounded",value:function(t){var n=e.cssClasses.UNBOUNDED;t?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"handleFocus",value:function(){var t=this;requestAnimationFrame(function(){return t.adapter_.addClass(e.cssClasses.BG_FOCUSED)})}},{key:"handleBlur",value:function(){var t=this;requestAnimationFrame(function(){return t.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}}]),e}(o.a);e.a=p},6:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"c",function(){return a}),n.d(e,"b",function(){return r});/**
  * @license
@@ -57,3 +57,3 @@ * Copyright 2016 Google Inc. All Rights Reserved.
  */
-var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:225,FG_DEACTIVATION_MS:150,TAP_DELAY_MS:300}},99:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCIconButtonToggle",function(){return d});var o=n(1),s=n(100),u=n(4);n.d(e,"MDCIconButtonToggleFoundation",function(){return s.a});var c=function t(e,n,i){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,n);if(void 0===a){var r=Object.getPrototypeOf(e);return null===r?void 0:t(r,n,i)}if("value"in a)return a.value;var o=a.get;if(void 0!==o)return o.call(i)},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.ripple_=s.initRipple_(),s.handleClick_,s}return r(e,t),l(e,null,[{key:"attachTo",value:function(t){return new e(t)}}]),l(e,[{key:"initRipple_",value:function(){var t=new u.MDCRipple(this.root_);return t.unbounded=!0,t}},{key:"destroy",value:function(){this.root_.removeEventListener("click",this.handleClick_),this.ripple_.destroy(),c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this)}},{key:"getDefaultFoundation",value:function(){var t=this;return new s.a({addClass:function(e){return t.iconEl_.classList.add(e)},removeClass:function(e){return t.iconEl_.classList.remove(e)},setText:function(e){return t.iconEl_.textContent=e},getAttr:function(e){return t.root_.getAttribute(e)},setAttr:function(e,n){return t.root_.setAttribute(e,n)},notifyChange:function(e){return t.emit(s.a.strings.CHANGE_EVENT,e)}})}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.foundation_.handleClick.bind(this.foundation_),this.on="true"===this.root_.getAttribute(s.a.strings.ARIA_PRESSED),this.root_.addEventListener("click",this.handleClick_)}},{key:"refreshToggleData",value:function(){this.foundation_.refreshToggleData()}},{key:"iconEl_",get:function(){var t=this.root_.dataset.iconInnerSelector;return t?this.root_.querySelector(t):this.root_}},{key:"ripple",get:function(){return this.ripple_}},{key:"on",get:function(){return this.foundation_.isOn()},set:function(t){this.foundation_.toggle(t)}}]),e}(o.a)}})});
+var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:225,FG_DEACTIVATION_MS:150,TAP_DELAY_MS:300}}})});
 //# sourceMappingURL=mdc.iconButton.min.js.map

foundation.js

@@ -37,8 +37,7 @@ /**
     return {
-      addClass: (/* className: string */) => {},
-      removeClass: (/* className: string */) => {},
-      setText: (/* text: string */) => {},
-      getAttr: (/* name: string */) => /* string */ '',
-      setAttr: (/* name: string, value: string */) => {},
-      notifyChange: (/* evtData: IconButtonToggleEvent */) => {},
+      addClass: () => {},
+      removeClass: () => {},
+      hasClass: () => {},
+      setAttr: () => {},
+      notifyChange: () => {},
     };
@@ -50,38 +49,13 @@ }
 
-    const {ARIA_PRESSED} = MDCIconButtonToggleFoundation.strings;
-
     /** @private {boolean} */
-    this.on_ = this.adapter_.getAttr(ARIA_PRESSED) === 'true';
-
-    /** @private {boolean} */
     this.disabled_ = false;
-
-    /** @private {?IconButtonToggleState} */
-    this.toggleOnData_ = null;
-
-    /** @private {?IconButtonToggleState} */
-    this.toggleOffData_ = null;
   }
 
   init() {
-    this.refreshToggleData();
+    this.adapter_.setAttr(strings.ARIA_PRESSED, `${this.isOn()}`);
   }
 
-  refreshToggleData() {
-    this.toggleOnData_ = {
-      label: this.adapter_.getAttr(strings.DATA_TOGGLE_ON_LABEL),
-      content: this.adapter_.getAttr(strings.DATA_TOGGLE_ON_CONTENT),
-      cssClass: this.adapter_.getAttr(strings.DATA_TOGGLE_ON_CLASS),
-    };
-    this.toggleOffData_ = {
-      label: this.adapter_.getAttr(strings.DATA_TOGGLE_OFF_LABEL),
-      content: this.adapter_.getAttr(strings.DATA_TOGGLE_OFF_CONTENT),
-      cssClass: this.adapter_.getAttr(strings.DATA_TOGGLE_OFF_CLASS),
-    };
-  }
-
   handleClick() {
     this.toggle();
-    const {on_: isOn} = this;
-    this.adapter_.notifyChange(/** @type {!IconButtonToggleEvent} */ ({isOn}));
+    this.adapter_.notifyChange(/** @type {!IconButtonToggleEvent} */ ({isOn: this.isOn()}));
   }
@@ -91,31 +65,14 @@
   isOn() {
-    return this.on_;
+    return this.adapter_.hasClass(cssClasses.ICON_BUTTON_ON);
   }
 
   /** @param {boolean=} isOn */
-  toggle(isOn = !this.on_) {
-    this.on_ = isOn;
-
-    const {ARIA_LABEL, ARIA_PRESSED} = MDCIconButtonToggleFoundation.strings;
-
-    this.adapter_.setAttr(ARIA_PRESSED, this.on_.toString());
-
-    const {cssClass: classToRemove} =
-        this.on_ ? this.toggleOffData_ : this.toggleOnData_;
-
-    if (classToRemove) {
-      this.adapter_.removeClass(classToRemove);
+  toggle(isOn = !this.isOn()) {
+    if (isOn) {
+      this.adapter_.addClass(cssClasses.ICON_BUTTON_ON);
+    } else {
+      this.adapter_.removeClass(cssClasses.ICON_BUTTON_ON);
     }
 
-    const {content, label, cssClass} = this.on_ ? this.toggleOnData_ : this.toggleOffData_;
-
-    if (cssClass) {
-      this.adapter_.addClass(cssClass);
-    }
-    if (content) {
-      this.adapter_.setText(content);
-    }
-    if (label) {
-      this.adapter_.setAttr(ARIA_LABEL, label);
-    }
+    this.adapter_.setAttr(strings.ARIA_PRESSED, `${isOn}`);
   }
@@ -127,20 +84,2 @@ }
 
-/**
- * The aria-label value of the icon toggle, or undefined if there is no aria-label.
- * @export {string|undefined}
- */
-IconButtonToggleState.prototype.label;
-
-/**
- * The text for the icon toggle, or undefined if there is no text.
- * @export {string|undefined}
- */
-IconButtonToggleState.prototype.content;
-
-/**
- * The CSS class to add to the icon toggle, or undefined if there is no CSS class.
- * @export {string|undefined}
- */
-IconButtonToggleState.prototype.cssClass;
-
 export default MDCIconButtonToggleFoundation;

index.js

@@ -39,9 +39,2 @@ /**
 
-  /** @return {!Element} */
-  get iconEl_() {
-    const {'iconInnerSelector': sel} = this.root_.dataset;
-    return sel ?
-      /** @type {!Element} */ (this.root_.querySelector(sel)) : this.root_;
-  }
-
   /**
@@ -66,7 +59,6 @@ * @return {!MDCRipple}
     return new MDCIconButtonToggleFoundation({
-      addClass: (className) => this.iconEl_.classList.add(className),
-      removeClass: (className) => this.iconEl_.classList.remove(className),
-      setText: (text) => this.iconEl_.textContent = text,
-      getAttr: (name) => this.root_.getAttribute(name),
-      setAttr: (name, value) => this.root_.setAttribute(name, value),
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      hasClass: (className) => this.root_.classList.contains(className),
+      setAttr: (attrName, attrValue) => this.root_.setAttribute(attrName, attrValue),
       notifyChange: (evtData) => this.emit(MDCIconButtonToggleFoundation.strings.CHANGE_EVENT, evtData),
@@ -78,3 +70,2 @@ });
     this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
-    this.on = this.root_.getAttribute(MDCIconButtonToggleFoundation.strings.ARIA_PRESSED) === 'true';
     this.root_.addEventListener('click', this.handleClick_);
@@ -97,8 +88,4 @@ }
   }
-
-  refreshToggleData() {
-    this.foundation_.refreshToggleData();
-  }
 }
 
 export {MDCIconButtonToggle, MDCIconButtonToggleFoundation};

package.json

 {
   "name": "@material/icon-button",
   "description": "The Material Components for the web icon button component",
-  "version": "0.38.1",
+  "version": "0.39.0-0",
   "license": "Apache 2.0",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -73,15 +73,16 @@ <!--docs:
 
-The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add the
-`data-toggle-on` and `data-toggle-off` attributes to the `mdc-icon-button` element. Then instantiate an `MDCIconButtonToggle` on the root element.
+The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add
+both icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.
+If the button should be initialized in the "on" state, then add the `mdc-icon-button--on` class to the parent `button`. 
+Then instantiate an `MDCIconButtonToggle` on the root element.
 
 ```html
 <button id="add-to-favorites"
-   class="mdc-icon-button material-icons"
+   class="mdc-icon-button"
    aria-label="Add to favorites"
    aria-hidden="true"
-   aria-pressed="false"
-   data-toggle-on-content="favorite"
-   data-toggle-on-label="Remove from favorites"
-   data-toggle-off-content="favorite_border"
-   data-toggle-off-label="Add to favorites">favorite_border</button>
+   aria-pressed="false">
+   <i class="material-icons mdc-icon-button__icon">favorite</i>
+   <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite_border</i>
+</button>
 ```
@@ -93,29 +94,34 @@
 
-#### Icon Button Toggle States
+#### Icon Button Toggle with SVG
 
-Note the use of `data-toggle-*` properties in the above examples. When an MDCIconButtonToggle
-instance is toggled, it looks at these data attributes to determine how to update the element. This is what
-allows MDCIconButtonToggle to be so flexible. The `data-toggle-on-*` properties will be used when the is
-MDCIconButtonToggle is toggled on, and vice versa for `data-toggle-off-*`.
+The icon button toggle can be used with SVGs.
 
-Attribute | Description
---- | ---
-`data-toggle-<TOGGLE STATE>-label` | The value to apply to the element's "aria-label" attribute.
-`data-toggle-<TOGGLE STATE>-content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead.
-`data-toggle-<TOGGLE STATE>-class` | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for `content` apply here as well.
+```html
+<button id="star-this-item"
+   class="mdc-icon-button mdc-icon-button--on"
+   aria-label="Unstar this item"
+   aria-hidden="true"
+   aria-pressed="true">
+   <svg class="mdc-icon-button__icon">
+     ...
+   </svg>
+   <svg class="mdc-icon-button__icon mdc-icon-button__icon--on">
+     ...
+  </svg>
+</button>
+```
 
-#### Icon Button Toggle with Font Awesome
+#### Icon Button Toggle with an Image
 
-The icon button toggle can be used with other font libraries such as Font Awesome that use an inner icon element.
+The icon button toggle can be used with `img` tags.
 
 ```html
 <button id="star-this-item"
-   class="mdc-icon-button"
+   class="mdc-icon-button mdc-icon-button--on"
    aria-label="Unstar this item"
    aria-hidden="true"
-   aria-pressed="true"
-   data-toggle-on-class="fa-star"
-   data-toggle-on-label="Unstar this item"
-   data-toggle-off-class="fa-star-o"
-   data-toggle-off-label="Star this item"><i class="fa fa-2x fa-star"></i></button>
+   aria-pressed="true">
+   <img src="" class="mdc-icon-button__icon"/>
+   <img src="" class="mdc-icon-button__icon mdc-icon-button__icon--on"/>
+</button>
 ```
@@ -125,5 +131,4 @@
 
-The icon button can be used with a standard icon library such as Material Icons or Font Awesome, or with an `svg`.
-The icon button toggle should only be used with an standard icon library. We recommend you use 
-[Material Icons](https://material.io/tools/icons) from Google Fonts.
+The icon button can be used with a standard icon library such as Material Icons, or with an `svg`.
+We recommend you use [Material Icons](https://material.io/tools/icons) from Google Fonts.
 
@@ -146,2 +151,5 @@ ### Disabled
 `mdc-icon-button` | Mandatory.
+`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the "on" state.
+`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.
+`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the "on" icon.
 
@@ -157,3 +165,2 @@ ### Sass Mixins
 
-
 ## `MDCIconButtonToggle` Properties and Methods
@@ -179,6 +186,4 @@
 --- | ---
-`addClass(className: string) => void` | Adds a class to the root element, or the inner icon element.
-`removeClass(className: string) => void` | Removes a class from the root element, or the inner icon element.
-`setText(text: string) => void` | Sets the text content of the root element, or the inner icon element.
-`getAttr(name: string) => string` | Returns the value of the attribute `name` on the root element. Can also return `null`, similar to `getAttribute()`.
+`addClass(className: string) => void` | Adds a class to the root element.
+`removeClass(className: string) => void` | Removes a class from the root element.
 `setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.
@@ -191,2 +196,2 @@ `notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.
 --- | ---
-`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.
+`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.

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

Number of lines in readme file

191

increased by3.24%

Worsened metrics

Total package byte prevSize

137002

decreased by-5.17%

Lines of code

2392

decreased by-6.67%

No dependency changes