@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.15 kB
JavaScript
import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{E as t,x as i,i as a}from"../../lit-element-Ho-VPzO1.js";import{n as r}from"../../property-Ck1wIidx.js";import{r as s}from"../../state--U2hSgGK.js";import{e as n}from"../../query-DifSdHBD.js";import{e as o}from"../../class-map-DlMb2KKL.js";import{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{mixinElementInternals as d}from"../../utils/behaviors/element-internals.js";import{isActivationClick as h,dispatchActivationClick as p}from"../../utils/event/form-label-activation.js";import"../../utils/aria/aria.js";class c extends(l(d(a))){focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}constructor(){super(),this.variant="filled",this.size="small",this.trailingIcon=!1,this.shape="round",this.disableMorph=!1,this.hasIcon=!1,this.hasLabel=!1,this.addEventListener("click",this.handleClick.bind(this))}getRenderClasses(){return{container:!0,[this.shape]:!0,[this.size]:!0,"has-icon":this.hasIcon,"has-label":this.hasLabel,"disable-morph":this.disableMorph,disabled:this.disabled}}render(){const{ariaHasPopup:e,ariaExpanded:a,ariaLabel:r}=this;return i`<button class="${o(this.getRenderClasses())}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||t}" aria-haspopup="${e||t}" aria-expanded="${a||t}">${"outlined"===this.variant?this.renderOutline():t} ${["elevated","filled","filled-tonal"].includes(this.variant)?this.renderElevation():t} ${this.renderContent()} ${this.renderTouchTarget()} ${this.renderBackground()}<mdc-ripple part="ripple" ?disabled="${this.disabled}"></mdc-ripple><mdc-focus-ring part="focus-ring"></mdc-focus-ring></button>`}renderBackground(){return i`<span class="background" aria-hidden="true"></span>`}renderElevation(){return i`<mdc-elevation></mdc-elevation>`}renderOutline(){return i`<span class="outline" aria-hidden="true"></span>`}renderContent(){return i`${this.trailingIcon?t:this.renderIcon()} ${this.renderLabel()} ${this.trailingIcon?this.renderIcon():t}`}renderIcon(){return i`<span class="icon" aria-hidden="true"><slot name="icon" ="${this.handleIconSlotChange}"></slot></span>`}renderLabel(){return i`<span class="label"><slot ="${this.handleLabelSlotChange}"></slot></span>`}renderTouchTarget(){return i`<span class="touch-target" aria-hidden="true"></span>`}handleClick(e){if(this.disabled)return e.stopImmediatePropagation(),void e.preventDefault();h(e)&&this.buttonElement&&(this.focus(),p(this.buttonElement))}handleIconSlotChange(e){this.hasIcon=e.target.assignedElements().length>0}handleLabelSlotChange(e){this.hasLabel=e.target.assignedElements().length>0}}e([r({type:String,reflect:!0})],c.prototype,"variant",void 0),e([r({type:String,reflect:!0})],c.prototype,"size",void 0),e([r({type:Boolean,attribute:"trailing-icon"})],c.prototype,"trailingIcon",void 0),e([r({type:String})],c.prototype,"shape",void 0),e([r({type:Boolean,attribute:"disable-morph"})],c.prototype,"disableMorph",void 0),e([s()],c.prototype,"hasIcon",void 0),e([s()],c.prototype,"hasLabel",void 0),e([n(".container")],c.prototype,"buttonElement",void 0);export{c as BaseButton};