@yuebai008/cli/dist/cli-server/client/front_end/ui/components/panel_feedback/PreviewToggle.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as Root from"../../../core/root/root.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as ComponentHelpers from"../helpers/helpers.js";import*as IconButton from"../icon_button/icon_button.js";import*as Input from"../input/input.js";import previewToggleStyles from"./previewToggle.css.js";const{render:render,html:html,nothing:nothing}=LitHtml,UIStrings={previewTextFeedbackLink:"Send us your feedback.",shortFeedbackLink:"Send feedback",learnMoreLink:"Learn More"},str_=i18n.i18n.registerUIStrings("ui/components/panel_feedback/PreviewToggle.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class PreviewToggle extends HTMLElement{static litTagName=LitHtml.literal`devtools-preview-toggle`;#e=this.attachShadow({mode:"open"});#t="";#n=null;#i=null;#o;#r="";#s;connectedCallback(){this.#e.adoptedStyleSheets=[Input.checkboxStyles,previewToggleStyles]}set data(e){this.#t=e.name,this.#n=e.helperText,this.#i=e.feedbackURL,this.#o=e.learnMoreURL,this.#r=e.experiment,this.#s=e.onChangeCallback,this.#l()}#l(){const e=Root.Runtime.experiments.isEnabled(this.#r);render(html`
      <div class="container">
        <label class="experiment-preview">
          <input type="checkbox" ?checked=${e} @change=${this.#a} aria-label=${this.#t}/>
          <${IconButton.Icon.Icon.litTagName} .data=${{iconName:"experiment",width:"16px",height:"16px",color:"var(--icon-default)"}}>
          </${IconButton.Icon.Icon.litTagName}>${this.#t}
        </label>
        <div class="spacer"></div>
        ${this.#i&&!this.#n?html`<div class="feedback"><x-link class="x-link" href=${this.#i}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`:nothing}
        ${this.#o?html`<div class="learn-more"><x-link class="x-link" href=${this.#o}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>`:nothing}
        <div class="helper">
          ${this.#n&&this.#i?html`<p>${this.#n} <x-link class="x-link" href=${this.#i}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`:nothing}
        </div>
      </div>`,this.#e,{host:this})}#a(e){const t=e.target.checked;Root.Runtime.experiments.setEnabled(this.#r,t),this.#s?.(t)}}ComponentHelpers.CustomElements.defineComponent("devtools-preview-toggle",PreviewToggle);