@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 2.82 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as i,E as s}from"../../lit-element-Ho-VPzO1.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DifSdHBD.js";import{e as a}from"../../class-map-DlMb2KKL.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 h}from"./icon-button.style.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 u extends(n(d(e))){static{this.styles=h}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.renderBackground=()=>i`<span class="background" aria-hidden="true"></span>`,this.renderOutline=()=>i`<span class="outline" aria-hidden="true"></span>`,this.renderIcon=()=>i`<slot></slot>`,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 i`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||s}" aria-haspopup="${t||s}" aria-expanded="${e||s}">${"outlined"===this.variant?this.renderOutline():s} ${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>`}renderTouchTarget(){return i`<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,reflect:!0})],u.prototype,"variant",void 0),t([r({type:String})],u.prototype,"size",void 0),t([r({type:String})],u.prototype,"width",void 0),t([r({type:String})],u.prototype,"shape",void 0),t([r({type:Boolean,attribute:"disable-morph"})],u.prototype,"disableMorph",void 0),t([o("#button")],u.prototype,"buttonElement",void 0);export{u as BaseIconButton};