@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
12 lines • 1.85 kB
JavaScript
import*as ComponentHelpers from"../../components/helpers/helpers.js";import*as LitHtml from"../../lit-html/lit-html.js";import{Icon}from"./Icon.js";import iconButtonStyles from"./iconButton.css.js";export class IconButton extends HTMLElement{static litTagName=LitHtml.literal`icon-button`;#t=this.attachShadow({mode:"open"});#i=void 0;#e=[];#s=!1;#l="";#a="";#n;set data(t){this.#e=t.groups.map((t=>({...t}))),this.#i=t.clickHandler,this.#a=t.trailingText??"",this.#l=t.leadingText??"",this.#n=t.accessibleName,this.#s=Boolean(t.compact),this.#c()}get data(){return{groups:this.#e.map((t=>({...t}))),accessibleName:this.#n,clickHandler:this.#i,leadingText:this.#l,trailingText:this.#a,compact:this.#s}}connectedCallback(){this.#t.adoptedStyleSheets=[iconButtonStyles]}#o(t){this.#i&&(t.preventDefault(),this.#i())}#c(){const t=LitHtml.Directives.classMap({"icon-button":!0,"with-click-handler":Boolean(this.#i),compact:this.#s}),i=this.#e.filter((t=>void 0!==t.text)).filter(((t,i)=>!this.#s||0===i));LitHtml.render(LitHtml.html`
<button class=${t} =${this.#o} aria-label=${LitHtml.Directives.ifDefined(this.#n)}>
${!this.#s&&this.#l?LitHtml.html`<span class="icon-button-title">${this.#l}</span>`:LitHtml.nothing}
${i.map((t=>LitHtml.html`
<${Icon.litTagName} class="status-icon"
.data=${{iconName:t.iconName,color:t.iconColor,width:t.iconWidth||"1.5ex",height:t.iconHeight||"1.5ex"}}>
</${Icon.litTagName}>
${this.#s?LitHtml.html`<!-- Force line-height for this element --><span>​</span>`:LitHtml.nothing}
<span class="icon-button-title">${t.text}</span>
</button>`))}
${!this.#s&&this.#a?LitHtml.html`<span class="icon-button-title">${this.#a}</span>`:LitHtml.nothing}
`,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("icon-button",IconButton);