import { n as c, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as g } from "../chunks/component.styles.CRO4Odto.js";
import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
import { w as m } from "../chunks/watch.BCJD77bD.js";
import { i as f, x as d } from "../chunks/lit-element.jLBm65_O.js";
import { r as p } from "../chunks/state.CSDxrqLd.js";
import { e as x } from "../chunks/query.BBf1UFkC.js";
import u from "./icon.js";
const v = f`:host{--control-box-size:3rem;--icon-size:calc(var(--control-box-size) * .625);cursor:pointer;display:inline-flex;position:relative}.animated-image{grid-template-columns:1fr;display:inline-grid}img{grid-row-start:1;grid-column-start:1;width:100%;height:100%;display:block}img[aria-hidden=true]{visibility:hidden}.animated-image__control-box{top:calc(50% - var(--control-box-size) / 2);right:calc(50% - var(--control-box-size) / 2);width:var(--control-box-size);height:var(--control-box-size);font-size:var(--icon-size);border-radius:var(--cx-border-radius-circle);color:#fff;pointer-events:none;transition:var(--cx-transition-fast) opacity;background:#00000080;border:2px solid;justify-content:center;align-items:center;display:flex;position:absolute}:host([play]:hover) .animated-image__control-box{opacity:1}:host([play]:not(:hover)) .animated-image__control-box{opacity:0}:host([play]) slot[name=play-icon],:host(:not([play])) slot[name=pause-icon]{display:none}`;
var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, i, r, s) => {
  for (var o = s > 1 ? void 0 : s ? b(i, r) : i, n = a.length - 1, l; n >= 0; n--)
    (l = a[n]) && (o = (s ? l(i, r, o) : l(o)) || o);
  return s && o && _(i, r, o), o;
};
let e = class extends h {
  constructor() {
    super(...arguments), this.isLoaded = !1;
  }
  handleClick() {
    this.play = !this.play;
  }
  handleLoad() {
    const a = document.createElement("canvas"), { height: i, width: r } = this.animatedImage;
    a.width = r, a.height = i, a.getContext("2d").drawImage(this.animatedImage, 0, 0, r, i), this.frozenFrame = a.toDataURL("image/gif"), this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0);
  }
  handleError() {
    this.emit("cx-error");
  }
  handlePlayChange() {
    this.play && (this.animatedImage.src = "", this.animatedImage.src = this.src);
  }
  handleSrcChange() {
    this.isLoaded = !1;
  }
  render() {
    return d`<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 ? d`<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"><cx-icon name="play_arrow"></cx-icon></slot><slot name="pause-icon"><cx-icon name="pause"></cx-icon></slot></div>` : ""}</div>`;
  }
};
e.styles = [g, v];
e.dependencies = { "cx-icon": u };
t([
  x(".animated-image__animated")
], e.prototype, "animatedImage", 2);
t([
  p()
], e.prototype, "frozenFrame", 2);
t([
  p()
], e.prototype, "isLoaded", 2);
t([
  c()
], e.prototype, "src", 2);
t([
  c()
], e.prototype, "alt", 2);
t([
  c({ reflect: !0, type: Boolean })
], e.prototype, "play", 2);
t([
  m("play", { waitUntilFirstUpdate: !0 })
], e.prototype, "handlePlayChange", 1);
t([
  m("src")
], e.prototype, "handleSrcChange", 1);
e = t([
  y("cx-animated-image")
], e);
export {
  e as default
};
