import { n as h, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as g } from "../chunks/component.styles.CRO4Odto.js";
import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
import { w as u } from "../chunks/watch.BCJD77bD.js";
import { i as x, E as C, x as m } from "../chunks/lit-element.jLBm65_O.js";
import { r as v } from "../chunks/state.CSDxrqLd.js";
import { e as f } from "../chunks/query.BBf1UFkC.js";
import { o as b } from "../chunks/style-map.llVFPd__.js";
import { n as M } from "../chunks/when.Dr1es41R.js";
import E from "./line-clamp.js";
import L from "./resize-observer.js";
import S from "./tag.js";
const A = x`.array-clamp{flex-wrap:nowrap;flex-grow:1;flex-shrink:1;align-items:center;display:flex;overflow:hidden}.array-clamp__items-container{flex-wrap:nowrap;flex-grow:1;flex-shrink:1;align-items:center;width:100%;min-width:0;display:flex;overflow:hidden}.array-clamp__items-container ::slotted(.array-clamp__item){white-space:nowrap;flex-shrink:0}.array-clamp__items-container ::slotted(.array-clamp__item:not(:last-child)):after{content:var(--array-clamp-separator,", ");white-space:pre}.array-clamp__items-container ::slotted(.array-clamp__item.clamped){display:none}.array-clamp__items-container ::slotted(.array-clamp__item.array-clamp__last-visible){-webkit-line-clamp:1;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;flex-shrink:1;min-width:0;display:-webkit-box;overflow:hidden}.array-clamp__indicator{flex-shrink:0}.array-clamp__indicator::part(base){overflow-wrap:break-word;min-width:2rem;max-width:4rem}`;
var R = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (e, a, s, r) => {
  for (var t = r > 1 ? void 0 : r ? z(a, s) : a, i = e.length - 1, n; i >= 0; i--)
    (n = e[i]) && (t = (r ? n(a, s, t) : n(t)) || t);
  return r && t && R(a, s, t), t;
};
const P = "array-clamp__item", p = "array-clamp__last-visible", d = "clamped";
let l = class extends y {
  constructor() {
    super(...arguments), this.separator = ", ", this.tooltipSeparator = "", this.clampedMap = /* @__PURE__ */ new Map();
  }
  get totalClamped() {
    return Array.from(this.clampedMap.values()).filter(Boolean).length;
  }
  get totalVisible() {
    const e = this.slotEl?.assignedElements({ flatten: !0 }).length ?? 0;
    return Math.max(0, e - this.totalClamped);
  }
  get hiddenChildrenStr() {
    const e = this.slotEl;
    if (!e)
      return "";
    const a = e.assignedElements({ flatten: !0 }), s = this.tooltipSeparator || this.separator;
    return a.map((r, t) => this.clampedMap.get(t) ? r.textContent?.trim() ?? "" : "").filter(Boolean).join(s);
  }
  applyItemClasses() {
    const e = this.slotEl;
    if (!e)
      return;
    const a = e.assignedElements({ flatten: !0 }), s = this.totalVisible;
    a.forEach((r, t) => {
      r.classList.add(P), this.clampedMap.get(t) ? (r.classList.add(d), r.classList.remove(p)) : (r.classList.remove(d), t === a.length - 1 || t === s - 1 && s > 0 ? r.classList.add(p) : r.classList.remove(p));
    });
  }
  handleSlotChange() {
    const e = this.containerEl, a = this.slotEl;
    if (!e || !a)
      return;
    const s = a.assignedElements({ flatten: !0 });
    if (s.length === 0) {
      this.clampedMap = /* @__PURE__ */ new Map();
      return;
    }
    const r = e.clientWidth;
    let t = 0;
    const i = /* @__PURE__ */ new Map();
    let n = !1;
    s.forEach((_, c) => {
      n ? i.set(c, !0) : (t += _.offsetWidth, t > r && (n = !0, i.set(c, !0)));
    }), this.clampedMap = i, this.requestUpdate("clampedMap");
  }
  handleResize(e) {
    const { entries: a } = e.detail;
    a.length === 0 || a[0].target !== this.containerEl || this.handleSlotChange();
  }
  runFirstUpdated() {
    this.applyItemClasses();
  }
  handleClampedMapChange() {
    this.applyItemClasses();
  }
  render() {
    return m`<div class="array-clamp" style=${b({
      "--array-clamp-separator": `'${String(this.separator).replaceAll("'", String.raw`\'`)}'`
    })}><cx-resize-observer @cx-resize=${this.handleResize}><div class="array-clamp__items-container" part="container"><slot @slotchange=${this.handleSlotChange}></slot>${M(
      this.totalClamped > 0,
      () => m`<cx-tag variant="neutral" size="small" pill class="array-clamp__indicator" part="indicator"><cx-line-clamp tooltip=${this.hiddenChildrenStr} lines="1">
                    +${this.totalClamped}</cx-line-clamp></cx-tag>`,
      () => C
    )}</div></cx-resize-observer></div>`;
  }
};
l.styles = [g, A];
l.dependencies = {
  "cx-line-clamp": E,
  "cx-resize-observer": L,
  "cx-tag": S
};
o([
  f(".array-clamp__items-container")
], l.prototype, "containerEl", 2);
o([
  f("slot")
], l.prototype, "slotEl", 2);
o([
  h({ type: String })
], l.prototype, "separator", 2);
o([
  h({ attribute: "tooltip-separator", type: String })
], l.prototype, "tooltipSeparator", 2);
o([
  v()
], l.prototype, "clampedMap", 2);
o([
  u("clampedMap")
], l.prototype, "handleClampedMapChange", 1);
l = o([
  w("cx-array-line-clamp")
], l);
export {
  l as default
};
