@sandlada/mdc/build/components/ripple/ripple.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as r}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as a}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DhvfedBn.js";import{AttachableController as i}from"../../utils/controller/attachable-controller.js";import{RippleAction as l}from"./ripple-action.js";import{styles as n}from"./ripple.style.js";import"../../base-hbm3XPKy.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/ripple.definition.js";import"../../color-CigMJnjV.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";let p=class extends e{constructor(){super(...arguments),this.disableHoverStateLayer=!1,this.disableFocusStateLayer=!1,this.disablePressStateLayer=!1,this.disabled=!1,this.action=new l(this),this.attachableController=new i(this,this.action.onControlChange.bind(this.action))}static{this.styles=n}render(){return r`<span aria-hidden="true" aria-disabled="${this.disabled}" class="ripple"><span class="hover-state-layer" aria-hidden="true"></span> <span class="focus-state-layer" aria-hidden="true"></span> <span class="press-state-layer" aria-hidden="true"></span></span>`}get hoverStateLayerElement(){return this._hoverStateLayerElement}get focusStateLayerElement(){return this._focusStateLayerElement}get pressStateLayerElement(){return this._pressStateLayerElement}get hovered(){return this.hasAttribute("hovered")}set hovered(t){this.toggleAttribute("hovered",t)}get focused(){return this.hasAttribute("focused")}set focused(t){this.toggleAttribute("focused",t)}get pressed(){return this.hasAttribute("pressed")}set pressed(t){this.toggleAttribute("pressed",t)}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}};t([o(".ripple")],p.prototype,"rippleElement",void 0),t([o(".hover-state-layer")],p.prototype,"_hoverStateLayerElement",void 0),t([o(".focus-state-layer")],p.prototype,"_focusStateLayerElement",void 0),t([o(".press-state-layer")],p.prototype,"_pressStateLayerElement",void 0),t([a({type:Boolean,attribute:"disable-hover-state-layer",reflect:!0})],p.prototype,"disableHoverStateLayer",void 0),t([a({type:Boolean,attribute:"disable-focus-state-layer",reflect:!0})],p.prototype,"disableFocusStateLayer",void 0),t([a({type:Boolean,attribute:"disable-press-state-layer",reflect:!0})],p.prototype,"disablePressStateLayer",void 0),t([a({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),p=t([s("mdc-ripple")],p);export{p as MDCRipple};