@sandlada/mdc/build/components/icon-button/base-icon-button.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{query as t}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as n,nothing 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{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{dispatchActivationClick as u,isActivationClick as d}from"../../utils/event/form-label-activation.js";import{mixinFocusRingOptions as f}from"../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as p}from"../ripple/ripple-options.mixin.js";import{iconButtonStyles as m}from"./icon-button.style.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const h=new Set([`Tab`,` `,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`]),g=new Set([` `,`Enter`]),_=[`pointerdown`,`mousedown`,`touchstart`];let v=!1,y=!1;function b(){if(!y){y=!0,document.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(v=!0)},!0);for(let e of _)document.addEventListener(e,()=>{v=!1},!0)}}var x=class extends s(l,o,p,f)(i){static{this.styles=m}focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}get focusRingControl(){return this}get rippleControl(){return this.buttonElement}constructor(){super(),this.variant=`standard`,this.size=`small`,this.width=`default`,this.shape=`round`,this.disableMorph=!1,this.handleVisualFocusIn=()=>{this.shouldShowKeyboardVisuals()&&this.queueKeyboardVisualSync(!1)},this.handleVisualFocusOut=()=>{queueMicrotask(()=>{this.matches(`:focus-within`)||this.clearKeyboardVisuals()})},this.handleVisualKeyDown=e=>{this.disabled||!h.has(e.key)||(v=!0,this.queueKeyboardVisualSync(g.has(e.key)))},this.addEventListener(`click`,this.handleClick.bind(this)),b()}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.size]:!0,[this.width]:!0,[this.shape]:!0,disabled:this.disabled,"disable-morph":this.disableMorph}}get focusRingHtmlFor(){return null}get rippleHtmlFor(){return`button`}render(){let{ariaHasPopup:e,ariaExpanded:t,ariaLabel:i}=this;return n`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${i||r}" aria-haspopup="${e||r}" aria-expanded="${t||r}" @focusin="${this.handleVisualFocusIn}" @focusout="${this.handleVisualFocusOut}" @keydown="${this.handleVisualKeyDown}">${this.variant===`outlined`?this.renderOutline():r} ${this.renderIcon()} ${this.renderBackground()} ${this.renderTouchTarget()} ${this.renderRipple()} ${this.renderFocusRing()}</button>`}renderBackground(){return n`<span class="background" aria-hidden="true"></span>`}renderOutline(){return n`<span class="outline" aria-hidden="true"></span>`}renderIcon(){return n`<slot></slot>`}renderTouchTarget(){return n`<span class="touch-target" aria-hidden="true"></span>`}async handleClick(e){if(this.disabled){e.stopImmediatePropagation(),e.preventDefault();return}!d(e)||!this.buttonElement||(await 0,this.focus(),u(this.buttonElement))}shouldShowKeyboardVisuals(){return v||this.matches(`:focus-visible`)||(this.buttonElement?.matches(`:focus-visible`)??!1)}queueKeyboardVisualSync(e){queueMicrotask(()=>{!this.isConnected||this.disabled||!this.matches(`:focus-within`)||this.shouldShowKeyboardVisuals()&&(this.focusRingElement&&!this.focusRingElement.focused&&(this.focusRingElement.focused=!0),this.rippleElement&&!this.rippleElement.focused&&(this.rippleElement.focused=!0),e&&this.rippleElement&&!this.rippleElement.pressed&&this.rippleElement.action.handleClick())})}clearKeyboardVisuals(){this.focusRingElement?.focused&&this.focusRingElement.close(),this.rippleElement?.focused&&(this.rippleElement.focused=!1)}};c([e({type:String})],x.prototype,`variant`,void 0),c([e({type:String})],x.prototype,`size`,void 0),c([e({type:String})],x.prototype,`width`,void 0),c([e({type:String})],x.prototype,`shape`,void 0),c([e({type:Boolean,attribute:`disable-morph`})],x.prototype,`disableMorph`,void 0),c([t(`#button`)],x.prototype,`buttonElement`,void 0);export{x as BaseMDCIconButton};
//# sourceMappingURL=base-icon-button.js.map