import*as LitHtml from"../third_party/lit-html/lit-html.js";const{render:render,html:html}=LitHtml;export class NodeText extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.nodeTitle="",this.nodeId="",this.nodeClasses=[]}set data(e){this.nodeTitle=e.nodeTitle,this.nodeId=e.nodeId,this.nodeClasses=e.nodeClasses,this.render()}render(){const e=Boolean(this.nodeId),o=Boolean(this.nodeClasses&&this.nodeClasses.length>0),t=[html`<span class="node-label-name">${this.nodeTitle}</span>`];if(this.nodeId){const e=LitHtml.Directives.classMap({"node-label-id":!0,"node-multiple-descriptors":o});t.push(html`<span class=${e}>#${CSS.escape(this.nodeId)}</span>`)}if(this.nodeClasses&&this.nodeClasses.length>0){const o=this.nodeClasses.map((e=>`.${CSS.escape(e)}`)).join(""),l=LitHtml.Directives.classMap({"node-label-class":!0,"node-multiple-descriptors":e});t.push(html`<span class=${l}>${o}</span>`)}render(html`
      <style>
        .node-label-name {
          color: var(--node-text-label-color, --dom-tag-name-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .node-label-class {
          color: var(--node-text-class-color, --dom-attribute-name-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .node-label-id {
          color: var(--node-text-id-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .node-label-class.node-multiple-descriptors {
          color: var(--node-text-multiple-descriptors-class, var(--node-text-class-color, --dom-attribute-name-color)); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .node-label-id.node-multiple-descriptors {
          color: var(--node-text-multiple-descriptors-id, var(--node-text-id-color, --dom-attribute-name-color)); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }
      </style>
      ${t}
    `,this.shadow,{eventContext:this})}}customElements.get("devtools-node-text")||customElements.define("devtools-node-text",NodeText);