import { r as n, h as s, H as o } from "./index.61732cef.js";
import { c as l } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const r = () => ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}", c = class {
  constructor(e) {
    n(this, e), this.setImageAvailable = () => {
      this.imageAvailable = !0;
    }, this.setImageUnavailable = () => {
      this.imageAvailable = !1;
    }, this.onImageElementUpdate = (i) => {
      var t, a;
      (t = this.imgEl) == null || t.removeEventListener("load", this.setImageAvailable), (a = this.imgEl) == null || a.removeEventListener("error", this.setImageUnavailable), this.imgEl = i, this.imgEl && (this.imgEl.addEventListener("load", this.setImageAvailable), this.imgEl.addEventListener("error", this.setImageUnavailable));
    };
  }
  disconnectedCallback() {
    var e, i;
    (e = this.imgEl) == null || e.removeEventListener("load", this.setImageAvailable), (i = this.imgEl) == null || i.removeEventListener("error", this.setImageUnavailable);
  }
  render() {
    const e = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), i = !e && Boolean(this.icon), a = l("app-icon", {
      "app-icon--has-icon": i || !e && !i
    });
    return s(o, { key: "fe8d516e1120d072e2f4600ca610bc4c13fd21f5" }, s("span", { key: "221e8a7f2eb9c1486b3958d81e124cf2bbe12247", class: a }, e && s("img", { key: "50a6602a09d6e1f41e218137c3bbeca0afe7954f", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "06d45bf19f89194eed5db2398fb572d6cb3125bf", class: "app-icon__icon", innerHTML: this.icon })));
  }
};
c.style = r();
export {
  c as swirl_app_icon
};
