import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import inspectorCommonStyles from"../../../ui/legacy/inspectorCommon.css.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import cssQueryStyles from"./cssQuery.css.js";const{render:render,html:html}=LitHtml;export class CSSQuery extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-query`;#e=this.attachShadow({mode:"open"});#t="";#s;#r="";#i;set data(e){this.#t=e.queryPrefix,this.#s=e.queryName,this.#r=e.queryText,this.#i=e.onQueryTextClick,this.#o()}connectedCallback(){this.#e.adoptedStyleSheets=[cssQueryStyles,inspectorCommonStyles]}#o(){const e=LitHtml.Directives.classMap({query:!0,editable:Boolean(this.#i)}),t=html`
      <span class="query-text" @click=${this.#i}>${this.#r}</span>
    `;render(html`
      <div class=${e}>
        ${this.#t?html`<span>${this.#t+" "}</span>`:LitHtml.nothing}${this.#s?html`<span>${this.#s+" "}</span>`:LitHtml.nothing}${t}
      </div>
    `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-css-query",CSSQuery);