@sandlada/mdc/build/components/fab/internal/base-fab.js

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

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.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{classMap as a}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as o}from"../../../utils/behaviors/element-internals.js";import{composeMixin as s}from"../../../utils/compose-mixin/compose-mixin.js";import c from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinElevationOptions as l}from"../../elevation/elevation-options.mixin.js";import{Duration as u}from"../../../node_modules/@sandlada/mdk/build/domain/duration.js";import{Easing as d}from"../../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../../node_modules/@sandlada/mdk/build/index.js";import{mixinDelegatesAria as f}from"../../../utils/aria/delegate.js";import{dispatchActivationClick as p,isActivationClick as m}from"../../../utils/event/form-label-activation.js";import{mixinFocusRingOptions as h}from"../../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as g}from"../../ripple/ripple-options.mixin.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var _=class extends s(f,o,g,l,h)(i){get focusRingControl(){return this.buttonElement}get open(){return this.isOpen}set open(e){e!==this.isOpen&&(this.isOpen=e,e?this.show?.():this.close?.())}getRenderClasses(){return{[this.variant]:!0,[this.size]:!0,"has-icon":this.hasIcon}}constructor(){super(),this.isOpen=!1,this.generation=0,this.variant=`tonal-secondary`,this.size=`small`,this.hasIcon=!1,this.animationAbort=null,this.isConnectedPromise=this.getIsConnectedPromise(),this.addEventListener(`click`,this.handleClick.bind(this))}render(){return r`<button class="${a(this.getRenderClasses())}">${this.renderRipple()} ${this.renderFocusRing()} ${this.renderElevation()} ${this.renderIcon()}</button>`}renderIcon(){let{ariaLabel:e}=this;return r`<span class="icon" aria-hidden="${e?`false`:`true`}"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></span>`}handleClick(e){!m(e)||!this.buttonElement||p(this.buttonElement)}handleIconSlotChange(e){this.hasIcon=e.target.assignedElements().length>0}async animateButton(e,t){if(this.animationAbort?.abort(),this.animationAbort=new AbortController,!this.buttonElement)return;let n=this.buttonElement.animate(e,t);this.animationAbort.signal.addEventListener(`abort`,()=>{n.playState!==`finished`&&n.finish()}),await n.finished.catch(()=>{})}async show(){let e=++this.generation;if(await this.isConnectedPromise,await this.updateComplete,e===this.generation){if(!this.dispatchEvent(new Event(`open`,{cancelable:!0}))){this.isOpen=!1;return}this.buttonElement&&(this.buttonElement.style.setProperty(`scale`,`0`),this.buttonElement.style.setProperty(`opacity`,`0`)),this.setAttribute(`show`,``),await this.animateButton([{scale:`0`,opacity:`0`},{scale:`1`,opacity:`1`}],{duration:u.ExpressiveFastSpatial.Value,easing:d.ExpressiveFastSpatial.ToCSSValue()}),e===this.generation&&(this.buttonElement&&(this.buttonElement.style.removeProperty(`scale`),this.buttonElement.style.removeProperty(`opacity`)),this.isOpen=!0,this.dispatchEvent(new Event(`opened`)))}}async close(){let e=++this.generation;if(!this.isConnected){this.isOpen=!1;return}if(await this.updateComplete,e===this.generation){if(!this.dispatchEvent(new Event(`close`,{cancelable:!0}))){this.isOpen=!0;return}this.buttonElement&&(this.buttonElement.style.removeProperty(`scale`),this.buttonElement.style.removeProperty(`opacity`)),await this.animateButton([{scale:`1`,opacity:`1`},{scale:`0`,opacity:`0`}],{duration:u.ExpressiveFastEffects.Value,easing:d.ExpressiveFastSpatial.ToCSSValue()}),e===this.generation&&(this.isOpen=!1,this.removeAttribute(`show`),await this.updateComplete,this.dispatchEvent(new Event(`closed`)))}}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),++this.generation,this.isConnectedPromise=this.getIsConnectedPromise()}};c([n(`button`)],_.prototype,`buttonElement`,void 0),c([e({type:Boolean,noAccessor:!0,attribute:`open`})],_.prototype,`open`,null),c([e({type:String,reflect:!0})],_.prototype,`variant`,void 0),c([e({type:String})],_.prototype,`size`,void 0),c([t()],_.prototype,`hasIcon`,void 0);export{_ as BaseFab};
//# sourceMappingURL=base-fab.js.map