@material/mwc-ripple - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

mwc-ripple-base.d.ts

@@ -17,12 +17,12 @@ /**
 */
-import { LitElement } from '@material/mwc-base/base-element';
+import {LitElement} from 'lit-element';
 export declare class RippleBase extends LitElement {
-    primary: boolean;
-    active: boolean | undefined;
-    accent: boolean;
-    unbounded: boolean;
-    disabled: boolean;
-    protected interactionNode: HTMLElement;
-    connectedCallback(): void;
-    protected render(): import("lit-html/lib/template-result").TemplateResult;
+  primary: boolean;
+  active: boolean|undefined;
+  accent: boolean;
+  unbounded: boolean;
+  disabled: boolean;
+  protected interactionNode: HTMLElement;
+  connectedCallback(): void;
+  protected render(): import('lit-element').TemplateResult;
 }

mwc-ripple-base.js

@@ -1,2 +0,2 @@
-import { __decorate } from "tslib";
+import * as tslib_1 from "tslib";
 /**
@@ -18,3 +18,4 @@ @license
 */
-import { classMap, html, LitElement, property } from '@material/mwc-base/base-element';
+import { html, LitElement, property } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
 import { ripple } from './ripple-directive.js';
@@ -55,20 +56,20 @@ export class RippleBase extends LitElement {
 }
-__decorate([
+tslib_1.__decorate([
     property({ type: Boolean })
 ], RippleBase.prototype, "primary", void 0);
-__decorate([
+tslib_1.__decorate([
     property({ type: Boolean })
 ], RippleBase.prototype, "active", void 0);
-__decorate([
+tslib_1.__decorate([
     property({ type: Boolean })
 ], RippleBase.prototype, "accent", void 0);
-__decorate([
+tslib_1.__decorate([
     property({ type: Boolean })
 ], RippleBase.prototype, "unbounded", void 0);
-__decorate([
+tslib_1.__decorate([
     property({ type: Boolean })
 ], RippleBase.prototype, "disabled", void 0);
-__decorate([
+tslib_1.__decorate([
     property({ attribute: false })
 ], RippleBase.prototype, "interactionNode", void 0);
 //# sourceMappingURL=mwc-ripple-base.js.map

mwc-ripple-css.d.ts

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

mwc-ripple-css.js

@@ -17,4 +17,4 @@ /**
 */
-import { css } from '@material/mwc-base/base-element';
+import { css } from 'lit-element';
 export const style = css `@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-ripple-surface{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000}.mdc-ripple-surface:hover::before{opacity:.04}.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:#6200ee}@supports not (-ms-ime-align: auto){.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:var(--mdc-theme-primary, #6200ee)}}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--primary.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:#018786}@supports not (-ms-ime-align: auto){.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:var(--mdc-theme-secondary, #018786)}}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--accent.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}`;
 //# sourceMappingURL=mwc-ripple-css.js.map

mwc-ripple-global-css.d.ts

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

mwc-ripple-global-css.js

@@ -17,4 +17,4 @@ /**
 */
-import { css } from '@material/mwc-base/base-element';
+import { css } from 'lit-element';
 export const style = css `@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}`;
 //# sourceMappingURL=mwc-ripple-global-css.js.map

mwc-ripple.d.ts

@@ -1,9 +0,9 @@
-import { RippleBase } from './mwc-ripple-base.js';
+import {RippleBase} from './mwc-ripple-base.js';
 declare global {
-    interface HTMLElementTagNameMap {
-        'mwc-ripple': Ripple;
-    }
+  interface HTMLElementTagNameMap {
+    'mwc-ripple': Ripple;
+  }
 }
 export declare class Ripple extends RippleBase {
-    static styles: import("lit-element/lib/css-tag").CSSResult;
+  static styles: import('lit-element').CSSResult;
 }

mwc-ripple.js

@@ -1,2 +0,2 @@
-import { __decorate } from "tslib";
+import * as tslib_1 from "tslib";
 /**
@@ -18,3 +18,3 @@ @license
 */
-import { customElement } from '@material/mwc-base/base-element';
+import { customElement } from 'lit-element';
 import { RippleBase } from './mwc-ripple-base.js';
@@ -25,3 +25,3 @@ import { style } from './mwc-ripple-css.js';
 Ripple.styles = style;
-Ripple = __decorate([
+Ripple = tslib_1.__decorate([
     customElement('mwc-ripple')
@@ -28,0 +28,0 @@ ], Ripple);

package.json

 {
   "name": "@material/mwc-ripple",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "",
@@ -19,5 +19,6 @@ "main": "mwc-ripple.js",
     "@material/dom": "^3.1.0",
-    "@material/mwc-base": "^0.8.0",
+    "@material/mwc-base": "^0.9.0",
     "@material/ripple": "^3.0.0",
-    "lit-html": "^1.0.0",
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.1.2",
     "tslib": "^1.10.0"
@@ -28,3 +29,3 @@ },
   },
-  "gitHead": "e47de0d9d6e556ce8c4b0b92f87be25a3e18da79"
+  "gitHead": "d6db9ceafe4b21572f967ac4acae9189da8c9c4f"
 }

ripple-directive.d.ts

 import MDCRippleFoundation from '@material/ripple/foundation.js';
-import { PropertyPart } from 'lit-html';
+import {PropertyPart} from 'lit-html';
 export interface RippleOptions {
-    interactionNode?: HTMLElement;
-    unbounded?: boolean;
-    disabled?: boolean;
-    active?: boolean;
+  interactionNode?: HTMLElement;
+  unbounded?: boolean;
+  disabled?: boolean;
+  active?: boolean;
 }
 export interface RippleNodeOptions extends RippleOptions {
-    surfaceNode: HTMLElement;
+  surfaceNode: HTMLElement;
 }
 declare global {
-    interface Element {
-        ripple?: unknown;
-    }
+  interface Element {
+    ripple?: unknown;
+  }
 }
@@ -21,3 +21,4 @@ /**
  */
-export declare const rippleNode: (options: RippleNodeOptions) => MDCRippleFoundation;
+export declare const rippleNode: (options: RippleNodeOptions) =>
+    MDCRippleFoundation;
 /**
@@ -28,2 +29,3 @@ * A directive that applies a Material ripple to a part node. The directive
  */
-export declare const ripple: (options?: RippleOptions) => (part: PropertyPart) => void;
+export declare const ripple: (options?: RippleOptions) =>
+    (part: PropertyPart) => void;

src/mwc-ripple-base.ts

@@ -17,3 +17,4 @@ /**
 */
-import {classMap, html, LitElement, property} from '@material/mwc-base/base-element';
+import {html, LitElement, property} from 'lit-element';
+import {classMap} from 'lit-html/directives/class-map';
 
@@ -20,0 +21,0 @@ import {ripple, RippleOptions} from './ripple-directive.js';

src/mwc-ripple-css.ts

@@ -17,4 +17,4 @@ /**
 */
-import {css} from '@material/mwc-base/base-element';
+import {css} from 'lit-element';
 
 export const style = css`@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-ripple-surface{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000}.mdc-ripple-surface:hover::before{opacity:.04}.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:#6200ee}@supports not (-ms-ime-align: auto){.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:var(--mdc-theme-primary, #6200ee)}}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--primary.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:#018786}@supports not (-ms-ime-align: auto){.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:var(--mdc-theme-secondary, #018786)}}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before,.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12}.mdc-ripple-surface--accent.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-ripple-surface{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}`;

src/mwc-ripple-global-css.ts

@@ -17,4 +17,4 @@ /**
 */
-import {css} from '@material/mwc-base/base-element';
+import {css} from 'lit-element';
 
 export const style = css`@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}`;

src/mwc-ripple.ts

@@ -17,3 +17,3 @@ /**
 */
-import {customElement} from '@material/mwc-base/base-element';
+import {customElement} from 'lit-element';
 
@@ -20,0 +20,0 @@ import {RippleBase} from './mwc-ripple-base.js';

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

606

increased by0.66%

Worsened metrics

Total package byte prevSize

75668

decreased by-0.15%

Dependency count

6

increased by20%

Dependency changes

• + Addedlit-element@^2.2.1

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

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

• Updated@material/mwc-base@^0.9.0

• Updatedlit-html@^1.1.2