@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
32 lines • 2.93 kB
JavaScript
import*as i18n from"../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import{Dialog as DialogElement}from"./Dialog.js";import iconDialogStyles from"./iconDialog.css.js";const UIStrings={close:"Close"},str_=i18n.i18n.registerUIStrings("ui/components/dialogs/IconDialog.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ShowDialog extends Event{static eventName="showdialog";constructor(){super(ShowDialog.eventName)}}export class IconDialog extends HTMLElement{static litTagName=LitHtml.literal`devtools-icon-dialog`;#o=this.attachShadow({mode:"open"});#t=this.#e.bind(this);#i=null;#n=null;#l=null;connectedCallback(){this.#o.adoptedStyleSheets=[iconDialogStyles]}set data(o){this.#i=o,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#s(){if(!this.#n)throw new Error("Dialog not found");this.#n.setDialogVisible(!0),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t),this.dispatchEvent(new ShowDialog)}#a(){if(!this.#n)throw new Error("Dialog not found");this.#n.setDialogVisible(!1),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#e(){if(null===this.#i)throw new Error("IconDialog.data is not set");if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("IconDialog render was not scheduled");let o=LitHtml.nothing;this.#i.closeButton&&(o=LitHtml.html`
<div id='close-button-container'>
<div id='close-button-right-aligner'>
<${IconButton.Icon.Icon.litTagName}
@click=${this.#a}
.data=${{iconName:"cross",color:"var(--icon-default-hover)",width:"16px",height:"16px"}}
title=${i18nString(UIStrings.close)}
></${IconButton.Icon.Icon.litTagName}>
</div>
</div>
`),LitHtml.render(LitHtml.html`
<${IconButton.Icon.Icon.litTagName}
@click=${this.#s}
on-render=${ComponentHelpers.Directives.nodeRenderedCallback((o=>{this.#l=o}))}
.data=${this.#i.iconData}
></${IconButton.Icon.Icon.litTagName}>
<${DialogElement.litTagName}
@clickoutsidedialog=${this.#a}
.showConnector=${!0}
.origin=${()=>{if(!this.#l)throw new Error("Icon not found");return this.#l}}
.position=${this.#i.position}
.horizontalAlignment=${this.#i.horizontalAlignment}
.closeOnESC=${this.#i.closeOnESC}
.closeOnScroll=${this.#i.closeOnScroll}
on-render=${ComponentHelpers.Directives.nodeRenderedCallback((o=>{this.#n=o}))}
>
${o}
<div id='slot-container'>
<slot></slot>
</div>
</${DialogElement.litTagName}>
`,this.#o,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-icon-dialog",IconDialog);