@material/mwc-formfield - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

mwc-formfield-css.js

@@ -17,5 +17,4 @@ /**
 */
-import {html} from '@polymer/lit-element/lit-element.js';
-
-export const style = html`<style>.mdc-form-field{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;color:rgba(0,0,0,0.87);color:var(--mdc-theme-text-primary-on-background, rgba(0,0,0,0.87));display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field>label{order:0;margin-right:auto;padding-left:4px}[dir="rtl"] .mdc-form-field>label,.mdc-form-field[dir="rtl"]>label{margin-left:auto;padding-right:4px}.mdc-form-field--align-end>label{order:-1;margin-left:auto;padding-right:4px}[dir="rtl"] .mdc-form-field--align-end>label,.mdc-form-field--align-end[dir="rtl"]>label{margin-right:auto;padding-left:4px}
-</style>`;
+import { html } from '@polymer/lit-element';
+export const style = html `<style>.mdc-form-field{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field > label{order:0;margin-right:auto;padding-left:4px}[dir=rtl] .mdc-form-field > label,.mdc-form-field[dir=rtl] > label{margin-left:auto;padding-right:4px}.mdc-form-field--align-end > label{order:-1;margin-left:auto;padding-right:4px}[dir=rtl] .mdc-form-field--align-end > label,.mdc-form-field--align-end[dir=rtl] > label{margin-right:auto;padding-left:4px}.mdc-form-field{align-items:center}::slotted(*){font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}::slotted(mwc-switch){margin-right:10px}[dir=rtl] ::slotted(mwc-switch),::slotted(mwc-switch)[dir=rtl]{margin-left:10px}</style>`;
+//# sourceMappingURL=mwc-formfield-css.js.map

mwc-formfield.js

@@ -0,1 +1,7 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
@@ -17,70 +23,81 @@ @license
 */
-import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-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';
-import {MDCFormField} from '@material/form-field';
-
-export class MDCWCFormField extends MDCWebComponentMixin(MDCFormField) {};
-
-
-export class Formfield extends ComponentElement {
-  static get ComponentClass() {
-    return MDCWCFormField;
-  }
-
-  static get componentSelector() {
-    return '.mdc-form-field';
-  }
-
-  static get properties() {
-    return {
-      label: {type: String},
-      alignEnd: {type: Boolean},
-    };
-  }
-
-  constructor() {
-    super();
-    this._asyncComponent = true;
-    this.label = '';
-    this.alignEnd = false;
-  }
-
-  renderStyle() {
-    return style;
-  }
-
-  render() {
-    const {label, alignEnd} = this;
-    return html`${this.renderStyle()}
-      <div class="mdc-form-field ${classMap({'mdc-form-field--align-end': alignEnd})}">
+import { html, BaseElement, property, query, observer } from '@material/mwc-base/base-element';
+import { FormElement } from '@material/mwc-base/form-element';
+import { classMap } from 'lit-html/directives/classMap';
+import { findAssignedElement } from '@material/mwc-base/utils';
+import { style } from './mwc-formfield-css';
+import MDCFormFieldFoundation from '@material/form-field/foundation';
+export class Formfield extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.alignEnd = false;
+        this.label = '';
+        this.mdcFoundationClass = MDCFormFieldFoundation;
+        this.labelClick = () => {
+            const input = this.input;
+            if (input) {
+                input.focus();
+                input.click();
+            }
+        };
+    }
+    createAdapter() {
+        return Object.assign({}, super.createAdapter(), { registerInteractionHandler: (type, handler) => {
+                this.labelEl.addEventListener(type, handler);
+            }, deregisterInteractionHandler: (type, handler) => {
+                this.labelEl.removeEventListener(type, handler);
+            }, activateInputRipple: () => {
+                const input = this.input;
+                if (input instanceof FormElement && input.ripple) {
+                    input.ripple.activate();
+                }
+            }, deactivateInputRipple: () => {
+                const input = this.input;
+                if (input instanceof FormElement && input.ripple) {
+                    input.ripple.deactivate();
+                }
+            } });
+    }
+    get input() {
+        return findAssignedElement(this.slotEl, '*');
+    }
+    renderStyle() {
+        return style;
+    }
+    render() {
+        return html `${this.renderStyle()}
+      <div class="mdc-form-field ${classMap({ 'mdc-form-field--align-end': this.alignEnd })}">
         <slot></slot>
-        <label class="mdc-label" @click="${(e) => this._labelClickHandler(e)}">${label}</label>
+        <label class="mdc-label" @click="${this.labelClick}">${this.label}</label>
       </div>`;
-  }
-
-  updated(changedProps) {
-    if (changedProps.has('label') && this._input) {
-      if (this._input.localName == 'input') {
-        this._input.setAttribute('aria-label', this.label);
-      } else {
-        callWhenReady(this._input, 'setAriaLabel', [this.label]);
-      }
     }
-  }
-
-  _labelClickHandler() {
-    if (this._input) {
-      this._input.focus();
-      this._input.click();
-    }
-  }
-
-  get _input() {
-    return this.__input = this.__input ||
-      findAssignedNode(this.shadowRoot.querySelector('slot'), '*');
-  }
 }
-
+__decorate([
+    property({ type: Boolean })
+], Formfield.prototype, "alignEnd", void 0);
+__decorate([
+    property({ type: String }),
+    observer(async function (label) {
+        const input = this.input;
+        if (input) {
+            if (input.localName === 'input') {
+                input.setAttribute('aria-label', label);
+            }
+            else if (input instanceof FormElement) {
+                await input.updateComplete;
+                input.setAriaLabel(label);
+            }
+        }
+    })
+], Formfield.prototype, "label", void 0);
+__decorate([
+    query('.mdc-form-field')
+], Formfield.prototype, "mdcRoot", void 0);
+__decorate([
+    query('slot')
+], Formfield.prototype, "slotEl", void 0);
+__decorate([
+    query('label')
+], Formfield.prototype, "labelEl", void 0);
 customElements.define('mwc-formfield', Formfield);
+//# sourceMappingURL=mwc-formfield.js.map

package.json

 {
   "name": "@material/mwc-formfield",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "",
@@ -12,9 +12,6 @@ "main": "mwc-formfield.js",
   "dependencies": {
-    "@material/form-field": "^0.35.0",
-    "@material/mwc-base": "^0.2.1",
-    "@polymer/lit-element": "^0.6.0"
+    "@material/form-field": "^0.40.0",
+    "@material/mwc-base": "^0.3.0",
+    "@polymer/lit-element": "^0.6.1"
   },
-  "devDependencies": {
-    "@material/mwc-sass-render": "^0.2.1"
-  },
   "publishConfig": {
@@ -21,0 +18,0 @@ "access": "public"

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

25949

increased by220.44%

Dev dependency count

0

decreased by-100%

Number of package files

12

increased by140%

Lines of code

289

increased by224.72%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

• + Added@material/form-field@0.40.1(transitive)

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

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

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

• + Added@material/selection-control@0.40.1(transitive)

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

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

• + Addedlit-element@2.5.1(transitive)

• - Removed@material/base@0.35.0(transitive)

• - Removed@material/form-field@0.35.0(transitive)

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

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

• - Removed@material/rtl@0.35.0(transitive)

• - Removed@material/selection-control@0.35.0(transitive)

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

• - Removed@material/typography@0.35.0(transitive)

• Updated@material/form-field@^0.40.0

• Updated@material/mwc-base@^0.3.0

• Updated@polymer/lit-element@^0.6.1