UNPKG

@sandlada/mdc

Version:

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

8 lines 4.38 kB
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,nothing as i}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{classMap as o}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as s}from"../../../utils/behaviors/element-internals.js";import{composeMixin as c}from"../../../utils/compose-mixin/compose-mixin.js";import l from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinElevationOptions as u}from"../../elevation/elevation-options.mixin.js";import{mixinDelegatesAria as d}from"../../../utils/aria/delegate.js";import{MeasuredDimensionController as f}from"../../../utils/controller/measured-dimension-controller.js";import{OpacityTransitionController as p}from"../../../utils/controller/opacity-transition-controller.js";import{dispatchActivationClick as m,isActivationClick as h}from"../../../utils/event/form-label-activation.js";import{mixinFocusRingOptions as g}from"../../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as _}from"../../ripple/ripple-options.mixin.js";import{buttonStyles as v}from"./button.style.js"; /** * @license * Copyright 2025 Kai-Orion & Sandlada * SPDX-License-Identifier: MIT */ var y=class extends c(d,s,_,u,g)(a){static{this.styles=v}get focusRingControl(){return this.buttonElement}get rippleControl(){return this.buttonElement}constructor(){super(),this.size=`small`,this.trailingIcon=!1,this.shape=`round`,this.disableMorph=!1,this.hasIcon=!1,this.hasLabel=!1,this.sizeController=new f(this,{target:()=>this.labelElement}),this.opacityController=new p(this,{target:()=>this.labelElement}),this.addEventListener(`click`,this.handleClick.bind(this))}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.shape]:!0,[this.size]:!0,"has-icon":this.hasIcon,"has-label":this.hasLabel,"disable-morph":this.disableMorph,disabled:this.disabled}}render(){let{ariaHasPopup:e,ariaExpanded:t,ariaLabel:n}=this;return r`<button class="${o(this.getRenderClasses())}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${n||i}" aria-haspopup="${e||i}" aria-expanded="${t||i}">${this.variant===`outlined`?this.renderOutline():i} ${[`elevated`,`filled`,`filled-tonal`].includes(this.variant)?this.renderElevation():i} ${this.renderContent()} ${this.renderTouchTarget()} ${this.renderBackground()} ${this.renderRipple()} ${this.renderFocusRing()}</button>`}renderBackground(){return r`<span class="background" aria-hidden="true"></span>`}renderOutline(){return r`<span class="outline" aria-hidden="true"></span>`}renderContent(){return r`${this.trailingIcon?i:this.renderIcon()} ${this.renderLabel()} ${this.trailingIcon?this.renderIcon():i}`}renderIcon(){return r`<span class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></span>`}renderLabel(){return r`<span class="label"><slot @slotchange="${this.handleLabelSlotChange}"></slot></span>`}renderTouchTarget(){return r`<span class="touch-target" aria-hidden="true"></span>`}focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}handleClick(e){if(this.disabled){e.stopImmediatePropagation(),e.preventDefault();return}!h(e)||!this.buttonElement||(this.focus(),m(this.buttonElement))}handleIconSlotChange(e){this.hasIcon=e.target.assignedElements().length>0}handleLabelSlotChange(e){this.hasLabel=e.target.assignedElements().length>0}};l([e({type:String,reflect:!1})],y.prototype,`size`,void 0),l([e({type:Boolean,attribute:`trailing-icon`})],y.prototype,`trailingIcon`,void 0),l([e({type:String})],y.prototype,`shape`,void 0),l([e({type:Boolean,attribute:`disable-morph`})],y.prototype,`disableMorph`,void 0),l([t()],y.prototype,`hasIcon`,void 0),l([t()],y.prototype,`hasLabel`,void 0),l([n(`.container`)],y.prototype,`buttonElement`,void 0),l([n(`.label`)],y.prototype,`labelElement`,void 0);export{y as BaseButton}; //# sourceMappingURL=base-button.js.map