@material/mwc-formfield - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

mwc-formfield.js

@@ -18,4 +18,4 @@ /**
 import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
-import {callWhenReady, findAssignedNode, afterNextRender} from '@material/mwc-base/utils.js';
-import {classString as c$} from '@polymer/lit-element/lit-element.js';
+import {classMap} from 'lit-html/directives/classMap.js';
+import {callWhenReady, findAssignedNode} from '@material/mwc-base/utils.js';
 import {style} from './mwc-formfield-css.js';
@@ -38,4 +38,4 @@ import {MDCFormField} from '@material/form-field';
     return {
-      label: String,
-      alignEnd: Boolean,
+      label: {type: String},
+      alignEnd: {type: Boolean},
     };
@@ -49,25 +49,23 @@ }
     this.alignEnd = false;
-    this._setProperty('_labelClickHandler', (e) => {
-      this._labelClickHandler(e);
-    });
   }
 
-  _renderStyle() {
+  renderStyle() {
     return style;
   }
 
-  _render({label, alignEnd, _labelClickHandler}) {
-    return html`${this._renderStyle()}
-      <div class$="mdc-form-field ${alignEnd ? 'mdc-form-field--align-end' : ''}">
+  render() {
+    const {label, alignEnd} = this;
+    return html`${this.renderStyle()}
+      <div class="mdc-form-field ${classMap({'mdc-form-field--align-end': alignEnd})}">
         <slot></slot>
-        <label class="mdc-label" on-click="${_labelClickHandler}">${label}</label>
+        <label class="mdc-label" @click="${(e) => this._labelClickHandler(e)}">${label}</label>
       </div>`;
   }
 
-  _didRender(props, changed) {
-    if ('label' in changed && this._input) {
+  updated(changedProps) {
+    if (changedProps.has('label') && this._input) {
       if (this._input.localName == 'input') {
-        this._input.setAttribute('aria-label', props.label);
+        this._input.setAttribute('aria-label', this.label);
       } else {
-        callWhenReady(this._input, 'setAriaLabel', [props.label]);
+        callWhenReady(this._input, 'setAriaLabel', [this.label]);
       }
@@ -77,3 +75,3 @@ }
 
-  _labelClickHandler(e) {
+  _labelClickHandler() {
     if (this._input) {
@@ -87,3 +85,3 @@ this._input.focus();
     return this.__input = this.__input ||
-      findAssignedNode(this._root.querySelector('slot'), '*');
+      findAssignedNode(this.shadowRoot.querySelector('slot'), '*');
   }
@@ -90,0 +88,0 @@ }

package.json

 {
   "name": "@material/mwc-formfield",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
@@ -13,4 +13,4 @@ "main": "mwc-formfield.js",
     "@material/form-field": "^0.35.0",
-    "@material/mwc-base": "^0.1.2",
-    "@polymer/lit-element": "^0.5.2"
+    "@material/mwc-base": "^0.2.0",
+    "@polymer/lit-element": "^0.6.0"
   },
@@ -17,0 +17,0 @@ "devDependencies": {

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

Lines of code

97

increased by6.59%

Worsened metrics

Total package byte prevSize

7336

decreased by-10.42%

Dependency changes

• + Added@material/mwc-base@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@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@polymer/lit-element@^0.6.0