import { e as x } from "./custom-element-eaccb8d2.mjs";
import { P as z, n as o } from "./plus-base-1920dd44.mjs";
import { t as d } from "./state-4d7d9621.mjs";
import { o as g } from "./style-map-628a6643.mjs";
import { n as p } from "./static-be5c3b1c.mjs";
import u from "./plus.js";
import { s as v } from "./index-975d3293.mjs";
import "./directive-daf4e9b6.mjs";
const b = v({
  slots: {
    base: "uppercase flex items-center justify-center font-sans",
    image: "w-full h-full",
    icon: ""
  },
  variants: {
    size: {
      xs: {
        base: ["text-xs w-4 h-4"],
        icon: "text-[8px]"
      },
      sm: {
        base: ["text-xs w-6 h-6"]
      },
      md: {
        base: ["text-sm w-9 h-9"]
      },
      lg: {
        base: ["text-base w-10 h-10"]
      },
      xl: {
        base: ["text-lg w-11 h-11"]
      },
      custom: "text-[calc(var(--size)/2.50)] w-[--size] h-[--size]"
    },
    shape: {
      circle: {
        base: "rounded-full",
        image: "rounded-full"
      },
      square: {
        base: "rounded",
        image: "rounded"
      }
    },
    invert: {
      true: "bg-color-invert-default text-color-invert-default",
      false: "bg-color-default text-color-default"
    }
  },
  defaultVariants: {
    size: "md",
    shape: "circle",
    invert: !1,
    icon: ""
  }
});
var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (e, i, l, a) => {
  for (var t = a > 1 ? void 0 : a ? S(i, l) : i, n = e.length - 1, c; n >= 0; n--)
    (c = e[n]) && (t = (a ? c(i, l, t) : c(t)) || t);
  return a && t && y(i, l, t), t;
};
let s = class extends z {
  constructor() {
    super(...arguments), this.shape = "circle", this.size = u.Sizes.md, this.icon = "fas fa-user", this.invert = !1, this.isFallback = !1;
  }
  isSizeLargeEnough() {
    return this.customSize() ? +this.size >= 24 : u.Sizes[this.size] != "xs";
  }
  getText() {
    var i;
    const e = (i = this.text) == null ? void 0 : i.split(" ");
    if (e)
      return e[0][0] + (e.length > 1 && this.isSizeLargeEnough() ? e[e.length - 1][0] : "");
  }
  customSize() {
    return !Object.keys(u.Sizes).includes(this.size);
  }
  sizeValue() {
    return this.customSize() ? "custom" : u.Sizes[this.size];
  }
  // renderDefaultIcon() {
  //   return html`<i class=${this.icon}></i>`;
  // }
  render() {
    const { shape: e, size: i, alt: l, invert: a } = this, t = this.getText(), { base: n, image: c, icon: m } = b({
      size: this.sizeValue(),
      shape: e,
      invert: a
    }), h = () => p`<i class=${m() + " " + this.icon}></i>`, f = () => this.isFallback ? this.text ? t : h() : this.image ? p`<img class=${c()} @error=${() => this.isFallback = !0} src=${this.image} alt=${this.alt} />` : t || h();
    return p`
      <div role="img" aria-label=${l || this.text || "Avatar"} class=${n()} style=${g(this.customSize() ? { "--size": +i + "px" } : {})}>${f()}</div>
    `;
  }
};
r([
  o()
], s.prototype, "image", 2);
r([
  o()
], s.prototype, "alt", 2);
r([
  o()
], s.prototype, "shape", 2);
r([
  o()
], s.prototype, "size", 2);
r([
  o()
], s.prototype, "color", 2);
r([
  o()
], s.prototype, "icon", 2);
r([
  o({ type: Boolean, converter: (e) => e != "false" })
], s.prototype, "invert", 2);
r([
  o()
], s.prototype, "text", 2);
r([
  d()
], s.prototype, "isFallback", 2);
s = r([
  x("plus-avatar")
], s);
export {
  s as AvatarComponent
};
