@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
10 lines • 1.49 kB
JavaScript
import*as LitHtml from"../../lit-html/lit-html.js";import*as ComponentHelpers from"../helpers/helpers.js";import twoStatesCounterStyles from"./twoStatesCounter.css.js";const isString=t=>void 0!==t;export class TwoStatesCounter extends HTMLElement{static litTagName=LitHtml.literal`devtools-two-states-counter`;#t=this.#e.bind(this);#i=this.attachShadow({mode:"open"});#s=0;#n=0;#h="14px";#r="14px";#o;#a;connectedCallback(){this.#i.adoptedStyleSheets=[twoStatesCounterStyles],ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set data(t){if(t.active<0||t.inactive<0)throw new Error("Values need to be greater or equal to zero.");this.#s=t.active,this.#n=t.inactive,this.#h=isString(t.width)?t.width:this.#h,this.#r=isString(t.height)?t.height:this.#r,this.#o=t.activeTitle,this.#a=t.inactiveTitle,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#e(){if(0===this.#s&&0===this.#n)return;const t={part:!0,split:this.#s>0&&this.#n>0},e={...t,active:!0},i={...t,inactive:!0};LitHtml.render(LitHtml.html`
<div class='counter'>
${this.#l(this.#s,e,this.#o)}
${this.#l(this.#n,i,this.#a)}
</div>
`,this.#i,{host:this})}#l(t,e,i){const s={width:this.#h,height:this.#r};return t>0?LitHtml.html`
<span class=${LitHtml.Directives.classMap(e)} style=${LitHtml.Directives.styleMap(s)} title=${i}>
${t}
</span>
`:LitHtml.nothing}}ComponentHelpers.CustomElements.defineComponent("devtools-two-states-counter",TwoStatesCounter);