import { r as n, h as s, H as o } from "./index.e6beb8d9.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: "5b0fa71fbf6761ec97c3418a09ecfbc9ba977bc2" }, s("span", { key: "3203bbe5126117c48bab273d044f42dfb331d081", class: a }, e && s("img", { key: "9ea7f0f9082697d61685cf808eef9bd03090102e", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "2f814f5d380125db47105f10da342783ddd6038a", class: "app-icon__icon", innerHTML: this.icon })));
  }
};
c.style = r();
export {
  c as swirl_app_icon
};
