@material/mwc-button - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

mwc-button.js

@@ -17,6 +17,6 @@ /**
 */
-import {LitElement, html, classString as c$} from '@polymer/lit-element/lit-element.js';
+import {LitElement, html} from '@polymer/lit-element/lit-element.js';
+import {classMap} from 'lit-html/directives/classMap.js';
 import {style} from './mwc-button-css.js';
 import {MDCWCRipple} from '@material/mwc-ripple/mwc-ripple.js';
-import {afterNextRender} from '@material/mwc-base/utils.js';
 import '@material/mwc-icon/mwc-icon-font.js';
@@ -27,9 +27,9 @@
     return {
-      raised: Boolean,
-      unelevated: Boolean,
-      outlined: Boolean,
-      dense: Boolean,
-      disabled: Boolean,
-      icon: String,
-      label: String,
+      raised: {type: Boolean},
+      unelevated: {type: Boolean},
+      outlined: {type: Boolean},
+      dense: {type: Boolean},
+      disabled: {type: Boolean},
+      icon: {type: String},
+      label: {type: String},
     };
@@ -49,18 +49,17 @@ }
 
-  _createRoot() {
+  createRenderRoot() {
     return this.attachShadow({mode: 'open', delegatesFocus: true});
   }
 
-  async ready() {
-    super.ready();
-    await afterNextRender();
-    this._ripple = new MDCWCRipple(this._root.querySelector('.mdc-button'));
+  firstUpdated() {
+    this._ripple = new MDCWCRipple(this.shadowRoot.querySelector('.mdc-button'));
   }
 
-  _renderStyle() {
+  renderStyle() {
     return style;
   }
 
-  _render({raised, unelevated, outlined, dense, disabled, icon, label}) {
-    const hostClasses = c$({
+  render() {
+    const {raised, unelevated, outlined, dense, disabled, icon, label} = this;
+    const hostClassInfo = {
       'mdc-button--raised': raised,
@@ -70,6 +69,6 @@ 'mdc-button--unelevated': unelevated,
       'mdc-button--dense': dense,
-    });
+    };
     return html`
-      ${this._renderStyle()}
-      <button class$="mdc-button ${hostClasses}" disabled?="${disabled}">
+      ${this.renderStyle()}
+      <button class="mdc-button ${classMap(hostClassInfo)}" ?disabled="${disabled}">
         ${icon ? html`<span class="material-icons mdc-button__icon">${icon}</span>` : ''}
@@ -76,0 +75,0 @@ ${label || ''}

package.json

 {
   "name": "@material/mwc-button",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
@@ -17,6 +17,6 @@ "main": "mwc-button.js",
     "@material/button": "^0.35.0",
-    "@material/mwc-base": "^0.1.2",
-    "@material/mwc-icon": "^0.1.2",
-    "@material/mwc-ripple": "^0.1.2",
-    "@polymer/lit-element": "^0.5.2"
+    "@material/mwc-base": "^0.2.0",
+    "@material/mwc-icon": "^0.2.0",
+    "@material/mwc-ripple": "^0.2.0",
+    "@polymer/lit-element": "^0.6.0"
   },
@@ -23,0 +23,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

14938

increased by0.15%

Worsened metrics

Lines of code

111

decreased by-0.89%

Dependency changes

• + Added@material/mwc-base@0.2.1(transitive)

• + Added@material/mwc-icon@0.2.1(transitive)

• + Added@material/mwc-ripple@0.2.1(transitive)

• + Added@polymer/lit-element@0.6.5(transitive)

• + Addedlit-html@1.4.1(transitive)

• - Removed@material/mwc-base@0.1.2(transitive)

• - Removed@material/mwc-icon@0.1.2(transitive)

• - Removed@material/mwc-ripple@0.1.2(transitive)

• - Removed@polymer/lit-element@0.5.2(transitive)

• - Removed@polymer/polymer@3.5.2(transitive)

• - Removed@webcomponents/shadycss@1.11.2(transitive)

• - Removedlit-html@0.10.2(transitive)

• Updated@material/mwc-base@^0.2.0

• Updated@material/mwc-icon@^0.2.0

• Updated@material/mwc-ripple@^0.2.0

• Updated@polymer/lit-element@^0.6.0