import { n as i, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as d } from "../chunks/component.styles.CRO4Odto.js";
import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
import { w as v } from "../chunks/watch.BCJD77bD.js";
import { i as g, x as l } from "../chunks/lit-element.jLBm65_O.js";
import { r as u } from "../chunks/state.CSDxrqLd.js";
import { e as f } from "../chunks/class-map.BiVq-cVR.js";
import _ from "./icon.js";
const x = g`:host{--size:3rem;display:inline-block}.avatar{width:var(--size);height:var(--size);background-color:var(--cx-color-neutral-400);font-family:var(--cx-font-sans);font-size:calc(var(--size) * .5);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-0);-webkit-user-select:none;user-select:none;vertical-align:middle;justify-content:center;align-items:center;display:inline-flex;position:relative}.avatar--circle,.avatar--circle .avatar__image{border-radius:var(--cx-border-radius-circle)}.avatar--rounded,.avatar--rounded .avatar__image{border-radius:var(--cx-border-radius-small)}.avatar--square{border-radius:0}.avatar__icon{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.avatar__initials{text-transform:uppercase;line-height:1}.avatar__image{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}`;
var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (o, r, n, s) => {
  for (var t = s > 1 ? void 0 : s ? y(r, n) : r, c = o.length - 1, h; c >= 0; c--)
    (h = o[c]) && (t = (s ? h(r, n, t) : h(t)) || t);
  return s && t && b(r, n, t), t;
};
let a = class extends p {
  constructor() {
    super(...arguments), this.hasError = !1, this.image = "", this.label = "", this.initials = "", this.loading = "eager", this.shape = "circle";
  }
  handleImageChange() {
    this.hasError = !1;
  }
  handleImageLoadError() {
    this.hasError = !0, this.emit("cx-error");
  }
  render() {
    const o = l`<img part="image" class="avatar__image" src=${this.image} loading=${this.loading} alt="" @error=${this.handleImageLoadError}>`;
    let r = null;
    return this.initials ? r = l`<div part="initials" class="avatar__initials">${this.initials}</div>` : r = l`<div part="icon" class="avatar__icon" aria-hidden="true"><slot name="icon"><cx-icon name="person"></cx-icon></slot></div>`, l`<div part="base" class=${f({
      avatar: !0,
      "avatar--circle": this.shape === "circle",
      "avatar--rounded": this.shape === "rounded",
      "avatar--square": this.shape === "square"
    })} role="img" aria-label=${this.label}>${this.image && !this.hasError ? o : r}</div>`;
  }
};
a.styles = [d, x];
a.dependencies = {
  "cx-icon": _
};
e([
  u()
], a.prototype, "hasError", 2);
e([
  i()
], a.prototype, "image", 2);
e([
  i()
], a.prototype, "label", 2);
e([
  i()
], a.prototype, "initials", 2);
e([
  i()
], a.prototype, "loading", 2);
e([
  i({ reflect: !0 })
], a.prototype, "shape", 2);
e([
  v("image")
], a.prototype, "handleImageChange", 1);
a = e([
  m("cx-avatar")
], a);
export {
  a as default
};
