import { r, h as t, H as a, g as c } from "./index.61732cef.js";
import { c as o } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const d = () => ":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(       100% / 3 - var(--s-space-2) / 2     );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}", l = [
  "xs",
  "sm",
  "base",
  "l",
  "xl"
], m = class {
  constructor(e) {
    r(this, e), this.borderRadius = "sm", this.items = [], this.updateItems = () => {
      this.items = Array.from(this.el.children), this.items.forEach((s) => {
        s.overlay = void 0;
      }), this.items.length > 4 && (this.items[3].overlay = `+${this.items.length - 3}`);
    }, this.caculateAspectRatio = () => {
      if (this.aspectRatio)
        return this.aspectRatio;
      switch (this.items.length) {
        case 1:
          return "1";
        case 2:
          return "2/1";
        case 3:
          return "3/2";
        case 4:
          return "1";
        default:
          return "1";
      }
    };
  }
  componentWillLoad() {
    this.updateItems();
  }
  render() {
    const e = o("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`), i = {
      aspectRatio: this.caculateAspectRatio(),
      borderRadius: l.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius
    };
    return t(a, { key: "3b81e39cbd2a616ae6733f492ddcc5e43876b771" }, t("div", { key: "cb7281952cd17d128e78341828ff7041246544f7", "aria-label": this.label, class: e, role: "list", style: i }, t("slot", { key: "5a813f03f58e2da6ee52991fe9f371ce9ec1b650", onSlotchange: this.updateItems })));
  }
  get el() {
    return c(this);
  }
};
m.style = d();
export {
  m as swirl_image_grid
};
