@spectrum-web-components/button/src/Button.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. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a

"use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=(s,a,t,n)=>{for(var e=n>1?void 0:n?l(a,t):a,o=s.length-1,c;o>=0;o--)(c=s[o])&&(e=(n?c(a,t,e):c(e))||e);return n&&e&&u(a,t,e),e};import{html as p,SizedMixin as d}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as h}from"./ButtonBase.js";import b from"./button.css.js";import{PendingStateController as m}from"@spectrum-web-components/reactive-controllers/src/PendingState.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends d(h,{noDefaultSize:!0}){constructor(){super();this.pendingLabel="Pending";this.pending=!1;this._variant="accent";this.treatment="fill";this.pendingStateController=new m(this)}static get styles(){return[...super.styles,b]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}update(t){super.update(t)}updated(t){super.updated(t)}renderButton(){return p`
            ${this.buttonContent}
            ${this.pendingStateController.renderPendingState()}
        `}}r([i({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),r([i({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),r([i()],Button.prototype,"variant",1),r([i({type:String,reflect:!0})],Button.prototype,"static",2),r([i({reflect:!0})],Button.prototype,"treatment",2),r([i({type:Boolean})],Button.prototype,"quiet",1);
//# sourceMappingURL=Button.js.map