import*as LitHtml from"../third_party/lit-html/lit-html.js";import{getMarkdownImage}from"./MarkdownImagesMap.js";export class MarkdownImage extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}set data(t){const{key:e,title:i}=t,a=getMarkdownImage(e);this.imageData=a,this.imageTitle=i,this.render()}getIconComponent(){if(!this.imageData)return LitHtml.html``;const{src:t,color:e,width:i="100%",height:a="100%"}=this.imageData;return LitHtml.html`
      <devtools-icon .data=${{iconPath:t,color:e,width:i,height:a}}></devtools-icon>
    `}getImageComponent(){if(!this.imageData)return LitHtml.html``;const{src:t,width:e="100%",height:i="100%"}=this.imageData;return LitHtml.html`
      <style>
        .markdown-image {
          display: block;
        }
      </style>
      <img class="markdown-image" src=${t} alt=${this.imageTitle} width=${e} height=${i}/>
    `}render(){if(!this.imageData)return;const{isIcon:t}=this.imageData,e=t?this.getIconComponent():this.getImageComponent();LitHtml.render(e,this.shadow)}}customElements.define("devtools-markdown-image",MarkdownImage);