@material/mwc-ripple - npm Package Compare versions

Comparing version 0.14.0-canary.c759cfbc.0 to 0.14.0-canary.edd465cd.0

mwc-ripple-base.d.ts

@@ -17,12 +17,38 @@ /**
 */
-import { LitElement } from 'lit-element';
-export declare class RippleBase extends LitElement {
+import { BaseElement } from '@material/mwc-base/base-element.js';
+import { MDCRippleAdapter } from '@material/ripple/adapter.js';
+import MDCRippleFoundation from '@material/ripple/foundation.js';
+/** @soyCompatible */
+export declare class RippleBase extends BaseElement {
+    mdcRoot: HTMLElement;
     primary: boolean;
-    active: boolean | undefined;
     accent: boolean;
     unbounded: boolean;
     disabled: boolean;
-    protected interactionNode: HTMLElement;
-    connectedCallback(): void;
+    light: boolean;
+    private hovering;
+    private bgFocused;
+    private fgActivation;
+    private fgDeactivation;
+    private fgScale;
+    private fgSize;
+    private translateStart;
+    private translateEnd;
+    private leftPos;
+    private topPos;
+    protected mdcFoundationClass: typeof MDCRippleFoundation;
+    protected mdcFoundation: MDCRippleFoundation;
+    createAdapter(): MDCRippleAdapter;
+    activate(ev?: Event): void;
+    deactivate(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleMouseEnter(): void;
+    handleMouseLeave(): void;
+    /**
+     * Wait for the MDCFoundation to be created by `firstUpdated`
+     */
+    protected waitForFoundation(fn: () => void): void;
+    /** @soyCompatible */
     protected render(): import("lit-element").TemplateResult;
 }

mwc-ripple-base.js

@@ -18,6 +18,9 @@ import { __decorate } from "tslib";
 */
-import { html, LitElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import { ripple } from './ripple-directive.js';
-export class RippleBase extends LitElement {
+import { BaseElement } from '@material/mwc-base/base-element.js';
+import MDCRippleFoundation from '@material/ripple/foundation.js';
+import { html, property, query } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map';
+/** @soyCompatible */
+export class RippleBase extends BaseElement {
     constructor() {
@@ -29,33 +32,157 @@ super(...arguments);
         this.disabled = false;
-        this.interactionNode = this;
+        this.light = false;
+        this.hovering = false;
+        this.bgFocused = false;
+        this.fgActivation = false;
+        this.fgDeactivation = false;
+        this.fgScale = '';
+        this.fgSize = '';
+        this.translateStart = '';
+        this.translateEnd = '';
+        this.leftPos = '';
+        this.topPos = '';
+        this.mdcFoundationClass = MDCRippleFoundation;
     }
-    connectedCallback() {
-        if (this.interactionNode === this) {
-            const parent = this.parentNode;
-            if (parent instanceof HTMLElement) {
-                this.interactionNode = parent;
-            }
-            else if (parent instanceof ShadowRoot && parent.host instanceof HTMLElement) {
-                this.interactionNode = parent.host;
-            }
+    createAdapter() {
+        return {
+            browserSupportsCssVars: () => true,
+            isUnbounded: () => this.unbounded,
+            isSurfaceActive: () => {
+                return (this.parentElement || this).matches(':active');
+            },
+            isSurfaceDisabled: () => this.disabled,
+            addClass: (className) => {
+                switch (className) {
+                    case 'mdc-ripple-upgraded--background-focused':
+                        this.bgFocused = true;
+                        break;
+                    case 'mdc-ripple-upgraded--foreground-activation':
+                        this.fgActivation = true;
+                        break;
+                    case 'mdc-ripple-upgraded--foreground-deactivation':
+                        this.fgDeactivation = true;
+                        break;
+                    default:
+                        break;
+                }
+            },
+            removeClass: (className) => {
+                switch (className) {
+                    case 'mdc-ripple-upgraded--background-focused':
+                        this.bgFocused = false;
+                        break;
+                    case 'mdc-ripple-upgraded--foreground-activation':
+                        this.fgActivation = false;
+                        break;
+                    case 'mdc-ripple-upgraded--foreground-deactivation':
+                        this.fgDeactivation = false;
+                        break;
+                    default:
+                        break;
+                }
+            },
+            containsEventTarget: () => true,
+            registerInteractionHandler: () => undefined,
+            deregisterInteractionHandler: () => undefined,
+            registerDocumentInteractionHandler: () => undefined,
+            deregisterDocumentInteractionHandler: () => undefined,
+            registerResizeHandler: () => undefined,
+            deregisterResizeHandler: () => undefined,
+            updateCssVariable: (varName, value) => {
+                switch (varName) {
+                    case '--mdc-ripple-fg-scale':
+                        this.fgScale = value;
+                        break;
+                    case '--mdc-ripple-fg-size':
+                        this.fgSize = value;
+                        break;
+                    case '--mdc-ripple-fg-translate-end':
+                        this.translateEnd = value;
+                        break;
+                    case '--mdc-ripple-fg-translate-start':
+                        this.translateStart = value;
+                        break;
+                    case '--mdc-ripple-left':
+                        this.leftPos = value;
+                        break;
+                    case '--mdc-ripple-top':
+                        this.topPos = value;
+                        break;
+                    default:
+                        break;
+                }
+            },
+            computeBoundingRect: () => (this.parentElement || this).getBoundingClientRect(),
+            getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
+        };
+    }
+    activate(ev) {
+        this.waitForFoundation(() => {
+            this.mdcFoundation.activate(ev);
+        });
+    }
+    deactivate() {
+        this.waitForFoundation(() => {
+            this.mdcFoundation.deactivate();
+        });
+    }
+    handleFocus() {
+        this.waitForFoundation(() => {
+            this.mdcFoundation.handleFocus();
+        });
+    }
+    handleBlur() {
+        this.waitForFoundation(() => {
+            this.mdcFoundation.handleBlur();
+        });
+    }
+    handleMouseEnter() {
+        this.hovering = true;
+    }
+    handleMouseLeave() {
+        this.hovering = false;
+    }
+    /**
+     * Wait for the MDCFoundation to be created by `firstUpdated`
+     */
+    waitForFoundation(fn) {
+        if (this.mdcFoundation) {
+            fn();
         }
-        super.connectedCallback();
+        else {
+            this.updateComplete.then(fn);
+        }
     }
-    // TODO(sorvell) #css: sizing.
+    /** @soyCompatible */
     render() {
+        /** @classMap */
         const classes = {
-            'mdc-ripple-surface--primary': this.primary,
-            'mdc-ripple-surface--accent': this.accent,
+            'mdc-ripple-upgraded--unbounded': this.unbounded,
+            'mdc-ripple-upgraded--background-focused': this.bgFocused,
+            'mdc-ripple-upgraded--foreground-activation': this.fgActivation,
+            'mdc-ripple-upgraded--foreground-deactivation': this.fgDeactivation,
+            'hover': this.hovering,
+            'primary': this.primary,
+            'accent': this.accent,
+            'disabled': this.disabled,
+            'light': this.light,
         };
-        const { disabled, unbounded, active, interactionNode } = this;
-        const rippleOptions = { disabled, unbounded, interactionNode };
-        if (active !== undefined) {
-            rippleOptions.active = active;
-        }
         return html `
-      <div .ripple="${ripple(rippleOptions)}"
-          class="mdc-ripple-surface ${classMap(classes)}"></div>`;
+        <div class="mdc-ripple-surface mdc-ripple-upgraded ${classMap(classes)}"
+          style="${styleMap({
+            '--mdc-ripple-fg-scale': this.fgScale,
+            '--mdc-ripple-fg-size': this.fgSize,
+            '--mdc-ripple-fg-translate-end': this.translateEnd,
+            '--mdc-ripple-fg-translate-start': this.translateStart,
+            '--mdc-ripple-left': this.leftPos,
+            '--mdc-ripple-top': this.topPos,
+        })}"
+          ?data-mdc-ripple-is-unbounded="${this.unbounded}">
+        </div>`;
     }
 }
 __decorate([
+    query('.mdc-ripple-surface')
+], RippleBase.prototype, "mdcRoot", void 0);
+__decorate([
     property({ type: Boolean })
@@ -65,5 +192,2 @@ ], RippleBase.prototype, "primary", void 0);
     property({ type: Boolean })
-], RippleBase.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean })
 ], RippleBase.prototype, "accent", void 0);
@@ -77,4 +201,34 @@ __decorate([
 __decorate([
+    property({ type: Boolean })
+], RippleBase.prototype, "light", void 0);
+__decorate([
     property({ attribute: false })
-], RippleBase.prototype, "interactionNode", void 0);
+], RippleBase.prototype, "hovering", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "bgFocused", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "fgActivation", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "fgDeactivation", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "fgScale", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "fgSize", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "translateStart", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "translateEnd", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "leftPos", void 0);
+__decorate([
+    property({ attribute: false })
+], RippleBase.prototype, "topPos", void 0);
 //# sourceMappingURL=mwc-ripple-base.js.map

mwc-ripple-css.js

@@ -18,3 +18,3 @@ /**
 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{--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.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-secondary, #018786)}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::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}`;
+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{--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.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-secondary, #018786)}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::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}:host{--mdc-ripple-fg-opacity: 0.12}.primary{--mdc-ripple-color: var(--mdc-theme-primary, #6200ee)}.accent{--mdc-ripple-color: var(--mdc-theme-secondary, #018786)}.disabled{--mdc-ripple-color: transparent}.mdc-ripple-surface{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: inherit}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.light{--mdc-ripple-fg-opacity: 0.24;--mdc-ripple-color: #fff}.light.hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.light.primary{--mdc-ripple-color: var(--mdc-theme-on-primary, #fff)}.light.accent{--mdc-ripple-color: var(--mdc-theme-on-secondary, #fff)}`;
 //# sourceMappingURL=mwc-ripple-css.js.map

mwc-ripple.d.ts

@@ -7,4 +7,5 @@ import { RippleBase } from './mwc-ripple-base.js';
 }
+/** @soyCompatible */
 export declare class Ripple extends RippleBase {
     static styles: import("lit-element").CSSResult;
 }

mwc-ripple.js

@@ -21,2 +21,3 @@ import { __decorate } from "tslib";
 import { style } from './mwc-ripple-css.js';
+/** @soyCompatible */
 let Ripple = class Ripple extends RippleBase {
@@ -23,0 +24,0 @@ };

package.json

 {
   "name": "@material/mwc-ripple",
-  "version": "0.14.0-canary.c759cfbc.0",
+  "version": "0.14.0-canary.edd465cd.0",
   "description": "",
@@ -18,5 +18,5 @@ "main": "mwc-ripple.js",
   "dependencies": {
-    "@material/dom": "=6.0.0-canary.69edc6e28.0",
-    "@material/mwc-base": "0.14.0-canary.c759cfbc.0",
-    "@material/ripple": "=6.0.0-canary.69edc6e28.0",
+    "@material/dom": "=6.0.0-canary.9cf5e9842.0",
+    "@material/mwc-base": "0.14.0-canary.edd465cd.0",
+    "@material/ripple": "=6.0.0-canary.9cf5e9842.0",
     "lit-element": "^2.2.1",
@@ -29,3 +29,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "e0a8ac49c085c004f390a2995879e67aea1010e7"
+  "gitHead": "3954ee24dd2fd1d9171cd7a967586e7d2b34ae38"
 }

src/mwc-ripple-base.ts

@@ -17,12 +17,15 @@ /**
 */
-import {html, LitElement, property} from 'lit-element';
-import {classMap} from 'lit-html/directives/class-map';
+import {BaseElement} from '@material/mwc-base/base-element.js';
+import {MDCRippleAdapter} from '@material/ripple/adapter.js';
+import MDCRippleFoundation from '@material/ripple/foundation.js';
+import {html, property, query} from 'lit-element';
+import {classMap} from 'lit-html/directives/class-map.js';
+import {styleMap} from 'lit-html/directives/style-map';
 
-import {ripple, RippleOptions} from './ripple-directive.js';
+/** @soyCompatible */
+export class RippleBase extends BaseElement {
+  @query('.mdc-ripple-surface') mdcRoot!: HTMLElement;
 
-export class RippleBase extends LitElement {
   @property({type: Boolean}) primary = false;
 
-  @property({type: Boolean}) active: boolean|undefined;
-
   @property({type: Boolean}) accent = false;
@@ -34,32 +37,174 @@
 
-  @property({attribute: false}) protected interactionNode: HTMLElement = this;
+  @property({type: Boolean}) light = false;
 
-  connectedCallback() {
-    if (this.interactionNode === this) {
-      const parent = this.parentNode as HTMLElement | ShadowRoot | null;
-      if (parent instanceof HTMLElement) {
-        this.interactionNode = parent;
-      } else if (
-          parent instanceof ShadowRoot && parent.host instanceof HTMLElement) {
-        this.interactionNode = parent.host;
-      }
+  @property({attribute: false}) private hovering = false;
+
+  @property({attribute: false}) private bgFocused = false;
+
+  @property({attribute: false}) private fgActivation = false;
+
+  @property({attribute: false}) private fgDeactivation = false;
+
+  @property({attribute: false}) private fgScale = '';
+
+  @property({attribute: false}) private fgSize = '';
+
+  @property({attribute: false}) private translateStart = '';
+
+  @property({attribute: false}) private translateEnd = '';
+
+  @property({attribute: false}) private leftPos = '';
+
+  @property({attribute: false}) private topPos = '';
+
+  protected mdcFoundationClass = MDCRippleFoundation;
+
+  protected mdcFoundation!: MDCRippleFoundation;
+
+  createAdapter(): MDCRippleAdapter {
+    return {
+      browserSupportsCssVars: () => true,
+      isUnbounded: () => this.unbounded,
+      isSurfaceActive: () => {
+        return (this.parentElement || this).matches(':active');
+      },
+      isSurfaceDisabled: () => this.disabled,
+      addClass: (className: string) => {
+        switch (className) {
+          case 'mdc-ripple-upgraded--background-focused':
+            this.bgFocused = true;
+            break;
+          case 'mdc-ripple-upgraded--foreground-activation':
+            this.fgActivation = true;
+            break;
+          case 'mdc-ripple-upgraded--foreground-deactivation':
+            this.fgDeactivation = true;
+            break;
+          default:
+            break;
+        }
+      },
+      removeClass: (className: string) => {
+        switch (className) {
+          case 'mdc-ripple-upgraded--background-focused':
+            this.bgFocused = false;
+            break;
+          case 'mdc-ripple-upgraded--foreground-activation':
+            this.fgActivation = false;
+            break;
+          case 'mdc-ripple-upgraded--foreground-deactivation':
+            this.fgDeactivation = false;
+            break;
+          default:
+            break;
+        }
+      },
+      containsEventTarget: () => true,
+      registerInteractionHandler: () => undefined,
+      deregisterInteractionHandler: () => undefined,
+      registerDocumentInteractionHandler: () => undefined,
+      deregisterDocumentInteractionHandler: () => undefined,
+      registerResizeHandler: () => undefined,
+      deregisterResizeHandler: () => undefined,
+      updateCssVariable: (varName: string, value: string) => {
+        switch (varName) {
+          case '--mdc-ripple-fg-scale':
+            this.fgScale = value;
+            break;
+          case '--mdc-ripple-fg-size':
+            this.fgSize = value;
+            break;
+          case '--mdc-ripple-fg-translate-end':
+            this.translateEnd = value;
+            break;
+          case '--mdc-ripple-fg-translate-start':
+            this.translateStart = value;
+            break;
+          case '--mdc-ripple-left':
+            this.leftPos = value;
+            break;
+          case '--mdc-ripple-top':
+            this.topPos = value;
+            break;
+          default:
+            break;
+        }
+      },
+      computeBoundingRect: () =>
+          (this.parentElement || this).getBoundingClientRect(),
+      getWindowPageOffset: () =>
+          ({x: window.pageXOffset, y: window.pageYOffset}),
+    };
+  }
+
+  activate(ev?: Event) {
+    this.waitForFoundation(() => {
+      this.mdcFoundation.activate(ev);
+    });
+  }
+
+  deactivate() {
+    this.waitForFoundation(() => {
+      this.mdcFoundation.deactivate();
+    });
+  }
+
+  handleFocus() {
+    this.waitForFoundation(() => {
+      this.mdcFoundation.handleFocus();
+    });
+  }
+
+  handleBlur() {
+    this.waitForFoundation(() => {
+      this.mdcFoundation.handleBlur();
+    });
+  }
+
+  handleMouseEnter() {
+    this.hovering = true;
+  }
+
+  handleMouseLeave() {
+    this.hovering = false;
+  }
+
+  /**
+   * Wait for the MDCFoundation to be created by `firstUpdated`
+   */
+  protected waitForFoundation(fn: () => void) {
+    if (this.mdcFoundation) {
+      fn();
+    } else {
+      this.updateComplete.then(fn);
     }
-    super.connectedCallback();
   }
 
-  // TODO(sorvell) #css: sizing.
+  /** @soyCompatible */
   protected render() {
+    /** @classMap */
     const classes = {
-      'mdc-ripple-surface--primary': this.primary,
-      'mdc-ripple-surface--accent': this.accent,
+      'mdc-ripple-upgraded--unbounded': this.unbounded,
+      'mdc-ripple-upgraded--background-focused': this.bgFocused,
+      'mdc-ripple-upgraded--foreground-activation': this.fgActivation,
+      'mdc-ripple-upgraded--foreground-deactivation': this.fgDeactivation,
+      'hover': this.hovering,
+      'primary': this.primary,
+      'accent': this.accent,
+      'disabled': this.disabled,
+      'light': this.light,
     };
-    const {disabled, unbounded, active, interactionNode} = this;
-    const rippleOptions: RippleOptions = {disabled, unbounded, interactionNode};
-    if (active !== undefined) {
-      rippleOptions.active = active;
-    }
     return html`
-      <div .ripple="${ripple(rippleOptions)}"
-          class="mdc-ripple-surface ${classMap(classes)}"></div>`;
+        <div class="mdc-ripple-surface mdc-ripple-upgraded ${classMap(classes)}"
+          style="${styleMap({
+      '--mdc-ripple-fg-scale': this.fgScale,
+      '--mdc-ripple-fg-size': this.fgSize,
+      '--mdc-ripple-fg-translate-end': this.translateEnd,
+      '--mdc-ripple-fg-translate-start': this.translateStart,
+      '--mdc-ripple-left': this.leftPos,
+      '--mdc-ripple-top': this.topPos,
+    })}"
+          ?data-mdc-ripple-is-unbounded="${this.unbounded}">
+        </div>`;
   }
 }

src/mwc-ripple-css.ts

@@ -19,2 +19,2 @@ /**
 
-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{--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.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-secondary, #018786)}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::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}`;
+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{--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.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-ripple-surface--primary:hover::before{opacity:.04}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::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;background-color:var(--mdc-theme-secondary, #018786)}.mdc-ripple-surface--accent:hover::before{opacity:.04}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::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}:host{--mdc-ripple-fg-opacity: 0.12}.primary{--mdc-ripple-color: var(--mdc-theme-primary, #6200ee)}.accent{--mdc-ripple-color: var(--mdc-theme-secondary, #018786)}.disabled{--mdc-ripple-color: transparent}.mdc-ripple-surface{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: inherit}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.light{--mdc-ripple-fg-opacity: 0.24;--mdc-ripple-color: #fff}.light.hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.light.primary{--mdc-ripple-color: var(--mdc-theme-on-primary, #fff)}.light.accent{--mdc-ripple-color: var(--mdc-theme-on-secondary, #fff)}`;

src/mwc-ripple.ts

@@ -28,2 +28,3 @@ /**
 
+/** @soyCompatible */
 @customElement('mwc-ripple')
@@ -30,0 +31,0 @@ export class Ripple extends RippleBase {

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

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

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

106683

increased by41.2%

Number of package files

29

increased by16%

Lines of code

1112

increased by82.3%

Worsened metrics

Number of low license alerts

4

increased by33.33%

Dependency changes

• + Added@material/[e-mail]465cd.0(transitive)

• - Removed@material/mwc-base@0.14.0-canary.c759cfbc.0(transitive)

• Updated@material/dom@=6.0.0-canary.9cf5e9842.0

• Updated@material/[e-mail]465cd.0

• Updated@material/ripple@=6.0.0-canary.9cf5e9842.0