@material/mwc-formfield - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

mwc-formfield-css.js

@@ -18,3 +18,3 @@ /**
 import { css } from '@material/mwc-base/base-element';
-export const style = css `.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}`;
+export const style = css `.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}`;
 //# sourceMappingURL=mwc-formfield-css.js.map

mwc-formfield.d.ts

@@ -1,20 +0,2 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { BaseElement } from '@material/mwc-base/base-element.js';
-import MDCFormFieldFoundation from '@material/form-field/foundation.js';
-import { MDCFormFieldAdapter } from '@material/form-field/adapter.js';
+import { FormfieldBase } from './mwc-formfield-base.js';
 declare global {
@@ -25,15 +7,4 @@ interface HTMLElementTagNameMap {
 }
-export declare class Formfield extends BaseElement {
-    alignEnd: boolean;
-    label: string;
-    protected mdcRoot: HTMLElement;
-    protected mdcFoundation: MDCFormFieldFoundation;
-    protected readonly mdcFoundationClass: typeof MDCFormFieldFoundation;
-    protected createAdapter(): MDCFormFieldAdapter;
-    protected slotEl: HTMLSlotElement;
-    protected labelEl: HTMLLabelElement;
-    protected readonly input: HTMLElement | null;
+export declare class Formfield extends FormfieldBase {
     static styles: import("lit-element/lib/css-tag").CSSResult;
-    render(): import("lit-html/lib/template-result").TemplateResult;
-    private _labelClick;
 }

mwc-formfield.js

@@ -23,83 +23,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 */
-import { html, BaseElement, property, query, observer, classMap } from '@material/mwc-base/base-element.js';
-import { FormElement } from '@material/mwc-base/form-element.js';
-import { findAssignedElement } from '@material/mwc-base/utils.js';
+import { customElement } from '@material/mwc-base/base-element.js';
+import { FormfieldBase } from './mwc-formfield-base.js';
 import { style } from './mwc-formfield-css.js';
-import MDCFormFieldFoundation from '@material/form-field/foundation.js';
-export class Formfield extends BaseElement {
-    constructor() {
-        super(...arguments);
-        this.alignEnd = false;
-        this.label = '';
-        this.mdcFoundationClass = MDCFormFieldFoundation;
-    }
-    createAdapter() {
-        return {
-            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, '*');
-    }
-    render() {
-        return html `
-      <div class="mdc-form-field ${classMap({ 'mdc-form-field--align-end': this.alignEnd })}">
-        <slot></slot>
-        <label class="mdc-label" @click="${this._labelClick}">${this.label}</label>
-      </div>`;
-    }
-    _labelClick() {
-        const input = this.input;
-        if (input) {
-            input.focus();
-            input.click();
-        }
-    }
-}
+let Formfield = class Formfield extends FormfieldBase {
+};
 Formfield.styles = style;
-__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);
+Formfield = __decorate([
+    customElement('mwc-formfield')
+], Formfield);
+export { Formfield };
 //# sourceMappingURL=mwc-formfield.js.map

package.json

 {
   "name": "@material/mwc-formfield",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "main": "mwc-formfield.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git",
+    "directory": "packages/formfield"
+  },
   "scripts": {
@@ -12,4 +17,4 @@ "test": "echo \"Error: no test specified\" && exit 1"
   "dependencies": {
-    "@material/form-field": "^1.0.0",
-    "@material/mwc-base": "^0.6.0"
+    "@material/form-field": "^3.0.0",
+    "@material/mwc-base": "^0.7.0"
   },
@@ -19,3 +24,3 @@ "publishConfig": {
   },
-  "gitHead": "1961a2530cc20bc020bba88f4da76d085ad1f1e0"
+  "gitHead": "c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db"
 }

src/mwc-formfield-css.ts

@@ -19,2 +19,2 @@ /**
 
-export const style = css`.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}`;
+export const style = css`.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}`;

src/mwc-formfield.ts

@@ -17,8 +17,6 @@ /**
 */
-import {html, BaseElement, property, query, observer, classMap, EventType, SpecificEventListener} from '@material/mwc-base/base-element.js';
-import {FormElement} from '@material/mwc-base/form-element.js';
-import {findAssignedElement} from '@material/mwc-base/utils.js';
+import {customElement} from '@material/mwc-base/base-element.js';
+
+import {FormfieldBase} from './mwc-formfield-base.js';
 import {style} from './mwc-formfield-css.js';
-import MDCFormFieldFoundation from '@material/form-field/foundation.js';
-import {MDCFormFieldAdapter} from '@material/form-field/adapter.js';
 
@@ -31,79 +29,5 @@ declare global {
 
-export class Formfield extends BaseElement {
-  @property({type: Boolean})
-  alignEnd = false;
-
-  @property({type: String})
-  @observer(async function(this: Formfield, label: string) {
-    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);
-      }
-    }
-  })
-  label = '';
-
-  @query('.mdc-form-field')
-  protected mdcRoot!: HTMLElement;
-
-  protected mdcFoundation!: MDCFormFieldFoundation;
-
-  protected readonly mdcFoundationClass = MDCFormFieldFoundation;
-
-  protected createAdapter(): MDCFormFieldAdapter {
-    return {
-      registerInteractionHandler: <K extends EventType>(type: K, handler: SpecificEventListener<K>) => {
-        this.labelEl.addEventListener(type, handler);
-      },
-      deregisterInteractionHandler: <K extends EventType>(type: K, handler: SpecificEventListener<K>) => {
-        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();
-        }
-      }
-    }
-  }
-
-  @query('slot')
-  protected slotEl!: HTMLSlotElement;
-
-  @query('label')
-  protected labelEl!: HTMLLabelElement;
-
-  protected get input() {
-    return findAssignedElement(this.slotEl, '*');
-  }
-
+@customElement('mwc-formfield')
+export class Formfield extends FormfieldBase {
   static styles = style;
-
-  render() {
-    return html`
-      <div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
-        <slot></slot>
-        <label class="mdc-label" @click="${this._labelClick}">${this.label}</label>
-      </div>`;
-  }
-
-  private _labelClick() {
-    const input = this.input;
-    if (input) {
-      input.focus();
-      input.click();
-    }
-  }
 }
-
-customElements.define('mwc-formfield', Formfield);

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

16

increased by6.67%

Lines of code

305

increased by9.71%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

40569

decreased by-84.2%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

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

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

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

• + Added@material/feature-targeting@3.1.0(transitive)

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

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

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

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

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

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

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

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

• - Removed@material/dom@1.1.0(transitive)

• - Removed@material/feature-targeting@0.44.1(transitive)

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

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

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

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

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

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

• Updated@material/form-field@^3.0.0

• Updated@material/mwc-base@^0.7.0