@material/mwc-formfield - npm Package Compare versions

Comparing version 0.3.5 to 0.3.6

mwc-formfield-css.d.ts

@@ -1,1 +0,1 @@
-export declare const style: import("lit-element").TemplateResult;
+export declare const style: import("lit-element/lib/css-tag").CSSResult;

mwc-formfield-css.js

@@ -17,4 +17,4 @@ /**
 */
-import { html } from '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>`;
+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}`;
 //# sourceMappingURL=mwc-formfield-css.js.map

mwc-formfield.d.ts

@@ -44,5 +44,5 @@ /**
     protected readonly input: HTMLElement | null;
-    renderStyle(): import("lit-html/lib/template-result").TemplateResult;
+    static styles: import("lit-element/lib/css-tag").CSSResult;
     render(): import("lit-html/lib/template-result").TemplateResult;
     private _labelClick;
 }

mwc-formfield.js

@@ -23,5 +23,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 */
-import { html, BaseElement, property, query, observer } from '@material/mwc-base/base-element.js';
+import { html, BaseElement, property, query, observer, classMap } from '@material/mwc-base/base-element.js';
 import { FormElement } from '@material/mwc-base/form-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
 import { findAssignedElement } from '@material/mwc-base/utils.js';
@@ -57,7 +56,4 @@ import { style } from './mwc-formfield-css.js';
     }
-    renderStyle() {
-        return style;
-    }
     render() {
-        return html `${this.renderStyle()}
+        return html `
       <div class="mdc-form-field ${classMap({ 'mdc-form-field--align-end': this.alignEnd })}">
@@ -76,2 +72,3 @@ <slot></slot>
 }
+Formfield.styles = style;
 __decorate([
@@ -78,0 +75,0 @@ property({ type: Boolean })

package.json

 {
   "name": "@material/mwc-formfield",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "",
@@ -13,5 +13,3 @@ "main": "mwc-formfield.js",
     "@material/form-field": "^0.40.0",
-    "@material/mwc-base": "^0.3.5",
-    "lit-element": "^2.0.0-rc.2",
-    "lit-html": "^1.0.0-rc.2"
+    "@material/mwc-base": "^0.3.6"
   },
@@ -18,0 +16,0 @@ "publishConfig": {

src/mwc-formfield-css.ts

@@ -17,4 +17,4 @@ /**
 */
-import {html} from 'lit-element';
+import {css} from '@material/mwc-base/base-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>`;
+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,5 +17,4 @@ /**
 */
-import {html, BaseElement, Foundation, Adapter, property, query, observer} from '@material/mwc-base/base-element.js';
+import {html, BaseElement, Foundation, Adapter, property, query, observer, classMap} from '@material/mwc-base/base-element.js';
 import {FormElement} from '@material/mwc-base/form-element.js';
-import {classMap} from 'lit-html/directives/class-map.js';
 import {findAssignedElement} from '@material/mwc-base/utils.js';
@@ -98,8 +97,6 @@ import {style} from './mwc-formfield-css.js';
 
-  renderStyle() {
-    return style;
-  }
+  static styles = style;
 
   render() {
-    return html`${this.renderStyle()}
+    return html`
       <div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
@@ -106,0 +103,0 @@ <slot></slot>

tsconfig.json

@@ -9,3 +9,6 @@ {
     "src/*.ts"
+  ],
+  "references": [
+    {"path": "../base"}
   ]
 }

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

Dependency count

2

decreased by-50%

Worsened metrics

Total package byte prevSize

25519

decreased by-1.49%

Lines of code

286

decreased by-1.04%

Dependency changes

• - Removedlit-element@^2.0.0-rc.2

• - Removedlit-html@^1.0.0-rc.2

• Updated@material/mwc-base@^0.3.6