@yuebai008/cli/dist/cli-server/client/front_end/ui/components/buttons/Button.js

Command line interface for rapid qg-minigame development

import*as LitHtml from"../../lit-html/lit-html.js";import*as ComponentHelpers from"../helpers/helpers.js";import*as IconButton from"../icon_button/icon_button.js";import buttonStyles from"./button.css.js";export class Button extends HTMLElement{static formAssociated=!0;static litTagName=LitHtml.literal`devtools-button`;#e=this.attachShadow({mode:"open",delegatesFocus:!0});#t=this.#i.bind(this);#s=this.#o.bind(this);#n={size:"MEDIUM",disabled:!1,active:!1,spinner:!1,type:"button"};#r=!0;#p=this.attachInternals();constructor(){super(),this.setAttribute("role","presentation"),this.addEventListener("click",this.#s,!0)}set data(e){this.#n.variant=e.variant,this.#n.iconUrl=e.iconUrl,this.#n.iconName=e.iconName,this.#n.size="MEDIUM","size"in e&&e.size&&(this.#n.size=e.size),"iconWidth"in e&&e.iconWidth&&(this.#n.iconWidth=e.iconWidth),"iconHeight"in e&&e.iconHeight&&(this.#n.iconHeight=e.iconHeight),this.#n.active=Boolean(e.active),this.#n.spinner=Boolean("spinner"in e&&e.spinner),this.#n.type="button","type"in e&&e.type&&(this.#n.type=e.type),this.#h(e.disabled||!1),this.#n.title=e.title,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set iconUrl(e){this.#n.iconUrl=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set iconName(e){this.#n.iconName=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set variant(e){this.#n.variant=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set size(e){this.#n.size=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set iconWidth(e){this.#n.iconWidth=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set iconHeight(e){this.#n.iconHeight=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set type(e){this.#n.type=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set title(e){this.#n.title=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set disabled(e){this.#h(e),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set active(e){this.#n.active=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set spinner(e){this.#n.spinner=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#h(e){this.#n.disabled=e,this.toggleAttribute("disabled",e)}focus(){this.#e.querySelector("button")?.focus()}connectedCallback(){this.#e.adoptedStyleSheets=[buttonStyles],ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#o(e){if(this.#n.disabled)return e.stopPropagation(),void e.preventDefault();this.form&&"submit"===this.#n.type&&(e.preventDefault(),this.form.dispatchEvent(new SubmitEvent("submit",{submitter:this}))),this.form&&"reset"===this.#n.type&&(e.preventDefault(),this.form.reset())}#d(e){const t=e.target,i=t?.assignedNodes();this.#r=!i||!Boolean(i.length),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#a(){return"toolbar"===this.#n.variant||"primary_toolbar"===this.#n.variant}#i(){if(!this.#n.variant)throw new Error("Button requires a variant to be defined");if(this.#a()){if(!this.#n.iconUrl&&!this.#n.iconName)throw new Error("Toolbar button requires an icon");if(!this.#r)throw new Error("Toolbar button does not accept children")}if("round"===this.#n.variant){if(!this.#n.iconUrl&&!this.#n.iconName)throw new Error("Round button requires an icon");if(!this.#r)throw new Error("Round button does not accept children")}if(this.#n.iconName&&this.#n.iconUrl)throw new Error("Both iconName and iconUrl are provided.");const e=Boolean(this.#n.iconUrl)||Boolean(this.#n.iconName),t={primary:"primary"===this.#n.variant,secondary:"secondary"===this.#n.variant,toolbar:this.#a(),"primary-toolbar":"primary_toolbar"===this.#n.variant,round:"round"===this.#n.variant,"text-with-icon":e&&!this.#r,"only-icon":e&&this.#r,small:Boolean("SMALL"===this.#n.size||"TINY"===this.#n.size),tiny:Boolean("TINY"===this.#n.size),active:this.#n.active,"explicit-size":Boolean(this.#n.iconHeight||this.#n.iconWidth)},i={primary:"primary"===this.#n.variant,secondary:"secondary"===this.#n.variant,disabled:Boolean(this.#n.disabled),"spinner-component":!0};LitHtml.render(LitHtml.html`
        <button title=${LitHtml.Directives.ifDefined(this.#n.title)} .disabled=${this.#n.disabled} class=${LitHtml.Directives.classMap(t)}>
          ${e?LitHtml.html`<${IconButton.Icon.Icon.litTagName}
            .data=${{iconPath:this.#n.iconUrl,iconName:this.#n.iconName,color:"var(--color-background)",width:this.#n.iconWidth||void 0,height:this.#n.iconHeight||void 0}}
          >
          </${IconButton.Icon.Icon.litTagName}>`:""}
          ${this.#n.spinner?LitHtml.html`<span class=${LitHtml.Directives.classMap(i)}></span>`:""}
          <slot @slotchange=${this.#d}></slot>
        </button>
      `,this.#e,{host:this})}get value(){return this.#n.value||""}set value(e){this.#n.value=e}get form(){return this.#p.form}get name(){return this.getAttribute("name")}get type(){return this.#n.type}get validity(){return this.#p.validity}get validationMessage(){return this.#p.validationMessage}get willValidate(){return this.#p.willValidate}checkValidity(){return this.#p.checkValidity()}reportValidity(){return this.#p.reportValidity()}}ComponentHelpers.CustomElements.defineComponent("devtools-button",Button);