import*as SDK from"../../../core/sdk/sdk.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as NodeText from"../../../ui/components/node_text/node_text.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import queryContainerStyles from"./queryContainer.css.js";const{render:render,html:html}=LitHtml,{PhysicalAxis:PhysicalAxis,QueryAxis:QueryAxis}=SDK.CSSContainerQuery;export class QueriedSizeRequestedEvent extends Event{static eventName="queriedsizerequested";constructor(){super(QueriedSizeRequestedEvent.eventName,{})}}export class QueryContainer extends HTMLElement{static litTagName=LitHtml.literal`devtools-query-container`;#e=this.attachShadow({mode:"open"});#t;#i;#n;#s=!1;#o;set data(e){this.#t=e.queryName,this.#i=e.container,this.#n=e.onContainerLinkClick,this.#r()}connectedCallback(){this.#e.adoptedStyleSheets=[queryContainerStyles]}updateContainerQueriedSizeDetails(e){this.#o=e,this.#r()}async#a(){this.#i?.highlightNode("container-outline"),this.#s=!0,this.dispatchEvent(new QueriedSizeRequestedEvent)}#l(){this.#i?.clearHighlight(),this.#s=!1,this.#r()}#r(){if(!this.#i)return;let e,t;this.#t||(e=this.#i.getAttribute("id"),t=this.#i.getAttribute("class")?.split(/\s+/).filter(Boolean));const i=this.#t||this.#i.nodeNameNicelyCased;render(html`
      →
      <a href="#"
        draggable=false
        class="container-link"
        @click=${this.#n}
        @mouseenter=${this.#a}
        @mouseleave=${this.#l}
      ><${NodeText.NodeText.NodeText.litTagName}
          data-node-title=${i}
          .data=${{nodeTitle:i,nodeId:e,nodeClasses:t}}></${NodeText.NodeText.NodeText.litTagName}></a>
      ${this.#s?this.#d():LitHtml.nothing}
    `,this.#e,{host:this})}#d(){if(!this.#o||""===this.#o.queryAxis)return LitHtml.nothing;const e="size"===this.#o.queryAxis,t=LitHtml.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#o.physicalAxis});return html`
      <span class="queried-size-details">
        (${this.#o.queryAxis}<${IconButton.Icon.Icon.litTagName}
          class=${t} .data=${{iconName:"width",color:"var(--icon-default)"}}></${IconButton.Icon.Icon.litTagName}>)
        ${e&&this.#o.width?"width:":LitHtml.nothing}
        ${this.#o.width||LitHtml.nothing}
        ${e&&this.#o.height?"height:":LitHtml.nothing}
        ${this.#o.height||LitHtml.nothing}
      </span>
    `}}ComponentHelpers.CustomElements.defineComponent("devtools-query-container",QueryContainer);