@spectrum-web-components/button/src/ButtonBase.js

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte

"use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=(n,i,e,t)=>{for(var r=t>1?void 0:t?d(i,e):i,a=n.length-1,l;a>=0;a--)(l=n[a])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&u(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as c}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as p}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import m from"./button-base.css.js";export class ButtonBase extends f(p(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[m]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
                <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
            `,o`
                <span id="label">
                    <slot @slotchange=${this.manageTextObservedSlot}></slot>
                </span>
            `]}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick(e)}proxyFocus(){this.focus()}shouldProxyClick(e){let t=!1;if(e&&(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey))return!1;if(this.anchorElement)this.anchorElement.click(),t=!0;else if(this.type!=="button"){const r=document.createElement("button");r.type=this.type,this.insertAdjacentElement("afterend",r),r.click(),r.remove(),t=!0}return t}renderAnchor(){return o`
            ${this.buttonContent}
            ${super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor",tabindex:-1})}
        `}renderButton(){return o`
            ${this.buttonContent}
        `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?(!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"):(!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button")}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.anchorElement&&(this.anchorElement.tabIndex=-1,this.anchorElement.hasAttribute("aria-hidden")||this.anchorElement.setAttribute("aria-hidden","true"),this.anchorElement.addEventListener("focus",this.proxyFocus))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([c(".anchor")],ButtonBase.prototype,"anchorElement",2);
//# sourceMappingURL=ButtonBase.js.map