import { r as e, h as t, H as i } from "./index.61732cef.js";
import { c as o } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const l = () => ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}", d = class {
  constructor(a) {
    e(this, a), this.layout = "diagonal", this.semantics = "group", this.avatars = [], this.onSlotChange = (r) => {
      this.avatars = r.target.assignedElements(), this.layOutAvatars();
    };
  }
  componentDidLoad() {
    this.forceBadgeProps();
  }
  forceBadgeProps() {
    if (!Boolean(this.badge))
      return;
    const a = this.badgeEl.querySelector("swirl-badge"), r = a == null ? void 0 : a.getAttribute("size");
    Boolean(r) || a == null || a.setAttribute("size", "s");
  }
  layOutAvatars() {
    this.layout === "diagonal" ? this.avatars.forEach((a) => {
      a.style.position = "", a.style.zIndex = "";
    }) : this.avatars.forEach((a, r) => {
      a.style.position = "relative", a.style.zIndex = String(this.avatars.length - r);
    });
  }
  render() {
    const a = o("avatar-group", `avatar-group--${this.layout}-stack`, {
      "avatar-group--has-badge": Boolean(this.badge)
    }), r = o("avatar-group__badge");
    return t(i, { key: "db0fba81fc616434e7efa68534fdb940cedad7d6" }, t("div", { key: "d8c744147498c6d6980980abfef224480037010e", "aria-label": this.label, class: a, role: this.semantics }, t("slot", { key: "44c853fedcf3db8d6869b9dd5ba0a8cc06fcbce5", onSlotchange: this.onSlotChange }), this.badge && t("span", { key: "4c47557ac791b9d62312fac213a053263a56ae40", class: r, innerHTML: this.badge, ref: (s) => this.badgeEl = s })));
  }
};
d.style = l();
export {
  d as swirl_avatar_group
};
