@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
3 lines • 1.71 kB
JavaScript
import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Coordinator from"../render_coordinator/render_coordinator.js";import iconStyles from"./icon.css.js";const isString=t=>void 0!==t,coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export class Icon extends HTMLElement{static litTagName=LitHtml.literal`devtools-icon`;#t=this.attachShadow({mode:"open"});#i="";#o="rgb(110 110 110)";#e="100%";#n="100%";#r;connectedCallback(){this.#t.adoptedStyleSheets=[iconStyles]}set data(t){const{width:i,height:o}=t;if(this.#o=t.color,this.#e=isString(i)?i:isString(o)?o:this.#e,this.#n=isString(o)?o:isString(i)?i:this.#n,"iconPath"in t&&t.iconPath)this.#i=t.iconPath;else{if(!("iconName"in t)||!t.iconName)throw new Error("Misconfigured iconName or iconPath.");this.#i=new URL(`../../../Images/${t.iconName}.svg`,import.meta.url).toString(),this.#r=t.iconName}this.#s()}get data(){const t={color:this.#o,width:this.#e,height:this.#n};return this.#r?{...t,iconName:this.#r}:{...t,iconPath:this.#i}}#a(){const t=this.#i,i=this.#e,o=this.#n,e=this.#o,n={width:i,height:o,display:"block"};return e?{...n,webkitMaskImage:`url(${t})`,webkitMaskPosition:"center",webkitMaskRepeat:"no-repeat",webkitMaskSize:"99%",backgroundColor:`var(--icon-color, ${e})`}:{...n,backgroundImage:`url(${t})`,backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"99%"}}#s(){coordinator.write((()=>{LitHtml.render(LitHtml.html`
<div class="icon-basic" style=${LitHtml.Directives.styleMap(this.#a())}></div>
`,this.#t,{host:this})}))}}ComponentHelpers.CustomElements.defineComponent("devtools-icon",Icon);