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

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

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{query as n}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as r}from"../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{ContextConsumer as a}from"../../node_modules/@lit/context/lib/controllers/context-consumer.js";import{GlobalMDCContext as o}from"../../context-provider.js";import s from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{AttachableController as c}from"../../utils/controller/attachable-controller.js";import{RippleAction as l}from"./ripple-action.js";import{styles as u}from"./ripple.style.js";
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
let d=class extends i{constructor(...e){super(...e),this._ignoreGlobalConfig=!1,this._hasLocalConfig=!1,this._disabled=!1,this._disableHoverStateLayer=!1,this._disableFocusStateLayer=!1,this._disablePressStateLayer=!1,this._configAttributeSyncSource=null,this._lastEffectiveDisabled=!1,this.globalMDCContextConsumer=new a(this,{context:o,subscribe:!0}),this.action=new l(this),this.attachableController=new c(this,this.action.onControlChange.bind(this.action))}static{this.styles=u}get ignoreGlobalConfig(){return this._ignoreGlobalConfig}set ignoreGlobalConfig(e){let t=this._ignoreGlobalConfig;t!==e&&(this._ignoreGlobalConfig=e,this._configAttributeSyncSource=`property`,this.toggleAttribute(`ignore-global-config`,e),this._configAttributeSyncSource=null,this.requestUpdate(`ignoreGlobalConfig`,t))}get disableHoverStateLayer(){return this.effectiveDisableHoverStateLayer}set disableHoverStateLayer(e){if(this._configAttributeSyncSource)return;let t=this._disableHoverStateLayer;this._disableHoverStateLayer=e,this._hasLocalConfig=!0,this._configAttributeSyncSource=`property`,this.toggleAttribute(`disable-hover-state-layer`,e),this._configAttributeSyncSource=null,this.requestUpdate(`disableHoverStateLayer`,t)}get disableFocusStateLayer(){return this.effectiveDisableFocusStateLayer}set disableFocusStateLayer(e){if(this._configAttributeSyncSource)return;let t=this._disableFocusStateLayer;this._disableFocusStateLayer=e,this._hasLocalConfig=!0,this._configAttributeSyncSource=`property`,this.toggleAttribute(`disable-focus-state-layer`,e),this._configAttributeSyncSource=null,this.requestUpdate(`disableFocusStateLayer`,t)}get disablePressStateLayer(){return this.effectiveDisablePressStateLayer}set disablePressStateLayer(e){if(this._configAttributeSyncSource)return;let t=this._disablePressStateLayer;this._disablePressStateLayer=e,this._hasLocalConfig=!0,this._configAttributeSyncSource=`property`,this.toggleAttribute(`disable-press-state-layer`,e),this._configAttributeSyncSource=null,this.requestUpdate(`disablePressStateLayer`,t)}get disabled(){return this.effectiveDisabled}set disabled(e){let t=this._disabled;this._configAttributeSyncSource||(this._disabled=e,this._hasLocalConfig=!0,this._configAttributeSyncSource=`property`,this.toggleAttribute(`disabled`,e),this._configAttributeSyncSource=null,this.requestUpdate(`disabled`,t))}get useLocalConfig(){return this._ignoreGlobalConfig||this._hasLocalConfig}get globalRippleConfig(){let e=this.globalMDCContextConsumer.value?.ripple;return{disabled:e?.disabled??!1,disableHoverStateLayer:e?.disableHoverStateLayer??!1,disableFocusStateLayer:e?.disableFocusStateLayer??!1,disablePressStateLayer:e?.disablePressStateLayer??!1}}get effectiveDisabled(){return this.useLocalConfig?this._disabled:this.globalRippleConfig.disabled}get effectiveDisableHoverStateLayer(){return this.useLocalConfig?this._disableHoverStateLayer:this.globalRippleConfig.disableHoverStateLayer}get effectiveDisableFocusStateLayer(){return this.useLocalConfig?this._disableFocusStateLayer:this.globalRippleConfig.disableFocusStateLayer}get effectiveDisablePressStateLayer(){return this.useLocalConfig?this._disablePressStateLayer:this.globalRippleConfig.disablePressStateLayer}syncConfigAttributes(){let e=(e,t)=>{this.hasAttribute(e)!==t&&(this._configAttributeSyncSource=`effective`,this.toggleAttribute(e,t),this._configAttributeSyncSource=null)};e(`disabled`,this.effectiveDisabled),e(`disable-hover-state-layer`,this.effectiveDisableHoverStateLayer),e(`disable-focus-state-layer`,this.effectiveDisableFocusStateLayer),e(`disable-press-state-layer`,this.effectiveDisablePressStateLayer)}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(e){this.toggleAttribute(`hovered`,e)}get focused(){return this.hasAttribute(`focused`)}set focused(e){this.toggleAttribute(`focused`,e)}get pressed(){return this.hasAttribute(`pressed`)}set pressed(e){this.toggleAttribute(`pressed`,e)}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(e){this.attachableController.htmlFor=e}get control(){return this.attachableController.control}set control(e){this.attachableController.control=e}attach(e){this.attachableController.attach(e)}detach(){this.attachableController.detach()}updated(e){super.updated(e),this.syncConfigAttributes();let t=this.effectiveDisabled;t!==this._lastEffectiveDisabled&&(t&&(this.hovered=!1,this.focused=!1,this.pressed=!1),this._lastEffectiveDisabled=t)}};s([n(`.ripple`)],d.prototype,`rippleElement`,void 0),s([n(`.hover-state-layer`)],d.prototype,`_hoverStateLayerElement`,void 0),s([n(`.focus-state-layer`)],d.prototype,`_focusStateLayerElement`,void 0),s([n(`.press-state-layer`)],d.prototype,`_pressStateLayerElement`,void 0),s([t({type:Boolean,attribute:`ignore-global-config`,reflect:!0,noAccessor:!0})],d.prototype,`ignoreGlobalConfig`,null),s([t({type:Boolean,attribute:`disable-hover-state-layer`,reflect:!0,noAccessor:!0})],d.prototype,`disableHoverStateLayer`,null),s([t({type:Boolean,attribute:`disable-focus-state-layer`,reflect:!0,noAccessor:!0})],d.prototype,`disableFocusStateLayer`,null),s([t({type:Boolean,attribute:`disable-press-state-layer`,reflect:!0,noAccessor:!0})],d.prototype,`disablePressStateLayer`,null),s([t({type:Boolean,attribute:`disabled`,reflect:!0,noAccessor:!0})],d.prototype,`disabled`,null),d=s([e(`mdc-ripple`)],d);export{d as MDCRipple};
//# sourceMappingURL=ripple.js.map