/** * DO NOT EDIT * * This file was automatically generated by * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations * * To modify these typings, edit the source file(s): * paper-ripple.js */ import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js'; import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; import {html} from '@polymer/polymer/lib/utils/html-tag.js'; declare class ElementMetrics { } declare class Ripple { } import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js'; /** * Material design: [Surface * reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction) * * `paper-ripple` provides a visual effect that other paper elements can * use to simulate a rippling effect emanating from the point of contact. The * effect can be visualized as a concentric circle with motion. * * Example: * *
* *
* * Note, it's important that the parent container of the ripple be relative * position, otherwise the ripple will emanate outside of the desired container. * * `paper-ripple` listens to "mousedown" and "mouseup" events so it would display * ripple effect when touches on it. You can also defeat the default behavior and * manually route the down and up actions to the ripple element. Note that it is * important if you call `downAction()` you will have to make sure to call * `upAction()` so that `paper-ripple` would end the animation loop. * * Example: * * * ... * downAction: function(e) { * this.$.ripple.downAction(e.detail); * }, * upAction: function(e) { * this.$.ripple.upAction(); * } * * Styling ripple effect: * * Use CSS color property to style the ripple: * * paper-ripple { * color: #4285f4; * } * * Note that CSS color property is inherited so it is not required to set it on * the `paper-ripple` element directly. * * By default, the ripple is centered on the point of contact. Apply the * `recenters` attribute to have the ripple grow toward the center of its * container. * * * * You can also center the ripple inside its container from the start. * * * * Apply `circle` class to make the rippling effect within a circle. * * */ interface PaperRippleElement extends IronA11yKeysBehavior, LegacyElementMixin, HTMLElement { keyBindings: object; /** * The initial opacity set on the wave. */ initialOpacity: number|null|undefined; /** * How fast (opacity per second) the wave fades out. */ opacityDecayVelocity: number|null|undefined; /** * If true, ripples will exhibit a gravitational pull towards * the center of their container as they fade away. */ recenters: boolean|null|undefined; /** * If true, ripples will center inside its container */ center: boolean|null|undefined; /** * A list of the visual ripples. */ ripples: any[]|null|undefined; /** * True when there are visible ripples animating within the * element. */ readonly animating: boolean|null|undefined; /** * If true, the ripple will remain in the "down" state until `holdDown` * is set to false again. */ holdDown: boolean|null|undefined; /** * If true, the ripple will not generate a ripple effect * via pointer interaction. * Calling ripple's imperative api like `simulatedRipple` will * still generate the ripple effect. */ noink: boolean|null|undefined; _animating: boolean|null|undefined; _boundAnimate: Function|null|undefined; readonly target: any; readonly shouldKeepAnimating: any; attached(): void; detached(): void; simulatedRipple(): void; /** * Provokes a ripple down effect via a UI event, * respecting the `noink` property. */ uiDownAction(event?: Event|null): void; /** * Provokes a ripple down effect via a UI event, * *not* respecting the `noink` property. */ downAction(event?: Event|null): void; /** * Provokes a ripple up effect via a UI event, * respecting the `noink` property. */ uiUpAction(event?: Event|null): void; /** * Provokes a ripple up effect via a UI event, * *not* respecting the `noink` property. */ upAction(event?: Event|null): void; onAnimationComplete(): void; addRipple(): any; removeRipple(ripple: any): void; /** * An alias for animate() whose name does not conflict with the platform * Element.animate() method. */ animateRipple(): any; _onEnterKeydown(): void; _onSpaceKeydown(): void; _onSpaceKeyup(): void; /** * effect. */ _holdDownChanged(newVal: any, oldVal: any): void; } export {PaperRippleElement}; declare global { interface HTMLElementTagNameMap { "paper-ripple": PaperRippleElement; } }