import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import computedStylePropertyStyles from"./computedStyleProperty.css.js";const{render:render,html:html}=LitHtml;export class NavigateToSourceEvent extends Event{static eventName="onnavigatetosource";constructor(){super(NavigateToSourceEvent.eventName,{bubbles:!0,composed:!0})}}export class ComputedStyleProperty extends HTMLElement{static litTagName=LitHtml.literal`devtools-computed-style-property`;#e=this.attachShadow({mode:"open"});#t=!1;#s=!1;constructor(){super(),this.#e.adoptedStyleSheets=[computedStylePropertyStyles]}set inherited(e){e!==this.#t&&(this.#t=e,this.#o())}set traceable(e){e!==this.#s&&(this.#s=e,this.#o())}#r(){this.dispatchEvent(new NavigateToSourceEvent)}#o(){render(html`
      <div class="computed-style-property ${this.#t?"inherited":""}">
        <div class="property-name">
          <slot name="name"></slot>
        </div>
        <span class="hidden" aria-hidden="false">: </span>
        ${this.#s?html`<span class="goto" @click=${this.#r}></span>`:null}
        <div class="property-value">
          <slot name="value"></slot>
        </div>
        <span class="hidden" aria-hidden="false">;</span>
      </div>
    `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-computed-style-property",ComputedStyleProperty);