import{animated_image_styles_default as a}from"./chunk.YLW7C2A3.js";import{SlIcon as t}from"./chunk.M4HIRIJ5.js";import{watch as e}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as i}from"./chunk.Z7XDKKOD.js";import{__decorateClass as s}from"./chunk.6M63UXML.js";import{html as o}from"../../../../lit/index.js";import{property as r,query as n,state as l}from"../../../../lit/decorators.js";var d=class extends i{constructor(){super(...arguments),this.isLoaded=!1}handleClick(){this.play=!this.play}handleLoad(){const a=document.createElement("canvas"),{width:t,height:e}=this.animatedImage;a.width=t,a.height=e,a.getContext("2d").drawImage(this.animatedImage,0,0,t,e),this.frozenFrame=a.toDataURL("image/gif"),this.isLoaded||(this.emit("sl-load"),this.isLoaded=!0)}handleError(){this.emit("sl-error")}handlePlayChange(){this.play&&(this.animatedImage.src="",this.animatedImage.src=this.src)}handleSrcChange(){this.isLoaded=!1}render(){return o`
      <div class="animated-image">
        <img
          class="animated-image__animated"
          src=${this.src}
          alt=${this.alt}
          crossorigin="anonymous"
          aria-hidden=${this.play?"false":"true"}
          @click=${this.handleClick}
          @load=${this.handleLoad}
          @error=${this.handleError}
        />

        ${this.isLoaded?o`
              <img
                class="animated-image__frozen"
                src=${this.frozenFrame}
                alt=${this.alt}
                aria-hidden=${this.play?"true":"false"}
                @click=${this.handleClick}
              />

              <div part="control-box" class="animated-image__control-box">
                <slot name="play-icon"><sl-icon name="play-fill" library="system"></sl-icon></slot>
                <slot name="pause-icon"><sl-icon name="pause-fill" library="system"></sl-icon></slot>
              </div>
            `:""}
      </div>
    `}};d.styles=a,d.dependencies={"sl-icon":t},s([n(".animated-image__animated")],d.prototype,"animatedImage",2),s([l()],d.prototype,"frozenFrame",2),s([l()],d.prototype,"isLoaded",2),s([r()],d.prototype,"src",2),s([r()],d.prototype,"alt",2),s([r({type:Boolean,reflect:!0})],d.prototype,"play",2),s([e("play",{waitUntilFirstUpdate:!0})],d.prototype,"handlePlayChange",1),s([e("src")],d.prototype,"handleSrcChange",1);export{d as SlAnimatedImage};