@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 2.88 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,E as i,x as s}from"../../lit-element-Ho-VPzO1.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DhvfedBn.js";import{e as a}from"../../class-map-D69pxdWL.js";import{mixinDelegatesAria as n}from"../../utils/aria/delegate.js";import{mixinElementInternals as d}from"../../utils/behaviors/element-internals.js";import{isActivationClick as p,dispatchActivationClick as l}from"../../utils/event/form-label-activation.js";import{iconButtonStyles as u}from"./icon-button.style.js";import"../../base-hbm3XPKy.js";import"../../directive-7hqM2TFx.js";import"../../utils/aria/aria.js";import"../../component-definitions/icon-button.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";class h extends(n(d(e))){static{this.styles=u}focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}constructor(){super(),this.variant="standard",this.size="small",this.width="default",this.shape="round",this.disableMorph=!1,this.addEventListener("click",this.handleClick.bind(this))}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.size]:!0,[this.width]:!0,[this.shape]:!0,disabled:this.disabled,"disable-morph":this.disableMorph}}render(){const{ariaHasPopup:t,ariaExpanded:e,ariaLabel:r}=this;return s`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||i}" aria-haspopup="${t||i}" aria-expanded="${e||i}">${"outlined"===this.variant?this.renderOutline():i} ${this.renderIcon()} ${this.renderBackground()} ${this.renderTouchTarget()}<mdc-ripple for="button" part="ripple" .disabled="${this.disabled}"></mdc-ripple><mdc-focus-ring for="button" part="focus-ring" .disabled="${this.disabled}"></mdc-focus-ring></button>`}renderBackground(){return s`<span class="background" aria-hidden="true"></span>`}renderOutline(){return s`<span class="outline" aria-hidden="true"></span>`}renderIcon(){return s`<slot></slot>`}renderTouchTarget(){return s`<span class="touch-target" aria-hidden="true"></span>`}async handleClick(t){if(this.disabled)return t.stopImmediatePropagation(),void t.preventDefault();p(t)&&this.buttonElement&&(await 0,this.focus(),l(this.buttonElement))}}t([r({type:String})],h.prototype,"variant",void 0),t([r({type:String})],h.prototype,"size",void 0),t([r({type:String})],h.prototype,"width",void 0),t([r({type:String})],h.prototype,"shape",void 0),t([r({type:Boolean,attribute:"disable-morph"})],h.prototype,"disableMorph",void 0),t([o("#button")],h.prototype,"buttonElement",void 0);export{h as BaseMDCIconButton};