import*as TraceEngine from"../../../models/trace/trace.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import{flattenBreadcrumbs}from"./Breadcrumbs.js";import breadcrumbsUIStyles from"./breadcrumbsUI.css.js";const{render:render,html:html}=LitHtml;export class BreadcrumbsUI extends HTMLElement{static litTagName=LitHtml.literal`devtools-breadcrumbs-ui`;#e=this.attachShadow({mode:"open"});#r=this.#t.bind(this);#n={min:TraceEngine.Types.Timing.MicroSeconds(0),max:TraceEngine.Types.Timing.MicroSeconds(0),range:TraceEngine.Types.Timing.MicroSeconds(0)};#s={window:this.#n,child:null};connectedCallback(){this.#e.adoptedStyleSheets=[breadcrumbsUIStyles]}set data(e){this.#s=e.breadcrumb,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#r)}#o(e){return html`
          <div class="breadcrumb">
              <span class="range">${e.window.range} ms</span>
              ${null!==e.child?html`<${IconButton.Icon.Icon.litTagName}.data=${{iconName:"chevron-right",color:"var(--icon-default)",width:"20px",height:"20px"}}>`:""}  
          </div>
      `}#t(){const e=html`
      <div class="breadcrumbs">
        ${flattenBreadcrumbs(this.#s).map((e=>this.#o(e)))}
      </div>`;render(e,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-breadcrumbs-ui",BreadcrumbsUI);