import { n as a, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as w } from "../chunks/component.styles.CRO4Odto.js";
import { s as d, a as c, b as m } from "../chunks/animate.El-MpOws.js";
import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
import { w as u } from "../chunks/event.mFzZi4sr.js";
import { L as v } from "../chunks/i18n.BABe9hN4.js";
import { w as y } from "../chunks/watch.BCJD77bD.js";
import { i as C, x as f } from "../chunks/lit-element.jLBm65_O.js";
import { r as k } from "../chunks/state.CSDxrqLd.js";
import { e as E } from "../chunks/query.BBf1UFkC.js";
import { e as H } from "../chunks/class-map.BiVq-cVR.js";
import { a as p, g } from "../chunks/animation-registry.HmpwNuGH.js";
import { C as B } from "../chunks/button.CAa1kvwe.js";
const T = C`:host{--toggler-color:var(--cx-color-primary);display:block;overflow:hidden}.element-clamp{overflow-anchor:none}.element-clamp--disabled{opacity:.5}.element-clamp-icon{transition:var(--cx-transition-medium) rotate ease;flex:none;align-items:center;display:flex}.details--open .element-clamp-icon{rotate:90deg}.details--open.details--rtl .element-clamp-icon{rotate:-90deg}.element-clamp--open slot[name=expand-icon],.element-clamp:not(.element-clamp--open) slot[name=collapse-icon]{display:none}.element-clamp__content{display:block;overflow:hidden}.toggler{margin-top:var(--cx-spacing-2x-small);display:block}.toggler::part(base){color:var(--toggler-color);font-weight:var(--cx-font-weight-medium);text-transform:none;width:auto}.toggler::part(label){padding-left:0}`;
var z = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
  for (var s = r > 1 ? void 0 : r ? O(t, i) : t, h = e.length - 1, l; h >= 0; h--)
    (l = e[h]) && (s = (r ? l(t, i, s) : l(s)) || s);
  return r && s && z(t, i, s), s;
};
let o = class extends b {
  constructor() {
    super(), this.localize = new v(this), this.open = !1, this.disabled = !1, this.elements = 0, this.root = "", this.animation = !1, this.showMore = !1, this.showMoreText = "View more...", this.showLessText = "View less...", this.rerenderEvent = "", this.showButton = !1, this.handleChange = this.handleChange.bind(this);
  }
  connectedCallback() {
    super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
      if (!this.body)
        return;
      const e = this.getCollapsedHeight(), t = e >= 0 ? e + "px" : "auto";
      this.body.style.height = this.open ? "auto" : t, this.animation && (p(this.body, "element-clamp.show", {
        keyframes: [{ height: e }, { height: "auto" }],
        options: { duration: 250, easing: "linear" }
      }), p(this.body, "element-clamp.hide", {
        keyframes: [{ height: "auto" }, { height: e }],
        options: { duration: 250, easing: "linear" }
      }));
    }), this.rerenderEvent && document.addEventListener(this.rerenderEvent, this.handleChange), this.updateComplete.then(() => {
      this.resizeObserver.observe(this.body);
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.body && this.resizeObserver?.unobserve(this.body), this.rerenderEvent && document.removeEventListener(this.rerenderEvent, this.handleChange);
  }
  handleClick(e) {
    e.preventDefault(), this.disabled || (this.open ? this.hide() : this.show());
  }
  replaceRootId(e, t) {
    if (!e)
      return "";
    const i = e.split(":");
    return i.pop(), i.push(t), i.join(":");
  }
  getCollapsedHeight() {
    const e = this.shadowRoot.querySelector("slot");
    if (!e)
      return -1;
    const t = e.assignedNodes({ flatten: !1 }), i = this.getAttribute("id") ?? "", r = this.root && i ? this.querySelector(`[id="${this.replaceRootId(i, this.root)}"]`) : null;
    let s = [], h = -1;
    return r ? s = Array.from(r.children).filter(
      (l) => l.nodeType !== 3
    ) : s = t.filter((l) => l.nodeType !== 3), s.length >= this.elements && this.elements > 0 && (h = Math.abs(
      s[0].getBoundingClientRect().top - s[this.elements - 1].getBoundingClientRect().bottom
    )), this.showButton = s.length > this.elements && this.showMore, h;
  }
  async handleChange() {
    if (!this.body)
      return;
    const e = this.getCollapsedHeight(), t = e >= 0 ? e + "px" : "auto";
    this.body.style.height = this.open ? "auto" : t, this.animation && (p(this.body, "element-clamp.show", {
      keyframes: [{ height: e }, { height: "auto" }],
      options: { duration: 250, easing: "linear" }
    }), p(this.body, "element-clamp.hide", {
      keyframes: [{ height: "auto" }, { height: e }],
      options: { duration: 250, easing: "linear" }
    }));
  }
  async handleOpenChange() {
    if (this.open) {
      if (this.emit("cx-show", { cancelable: !0 }).defaultPrevented) {
        this.open = !1;
        return;
      }
      if (this.animation) {
        await d(this.body);
        const { keyframes: t, options: i } = g(
          this.body,
          "element-clamp.show",
          {
            dir: this.localize.dir()
          }
        );
        await c(
          this.body,
          m(t, this.body.scrollHeight),
          i
        );
      }
      this.body.style.height = "auto", this.emit("cx-after-show");
    } else {
      if (this.emit("cx-hide", { cancelable: !0 }).defaultPrevented) {
        this.open = !0;
        return;
      }
      if (this.animation) {
        await d(this.body);
        const { keyframes: i, options: r } = g(
          this.body,
          "element-clamp.hide",
          {
            dir: this.localize.dir()
          }
        );
        await c(
          this.body,
          m(i, this.body.scrollHeight),
          r
        );
      }
      const t = this.getCollapsedHeight();
      this.body.style.height = t >= 0 ? t + "px" : "auto", this.emit("cx-after-hide");
    }
  }
  /** Shows the details. */
  async show() {
    if (!(this.open || this.disabled))
      return this.open = !0, u(this, "cx-after-show");
  }
  /** Hides the details */
  async hide() {
    if (!(!this.open || this.disabled))
      return this.open = !1, u(this, "cx-after-hide");
  }
  render() {
    const e = this.localize.dir() === "rtl", t = this.open ? this.showLessText : this.showMoreText;
    return f`<div part="base" class=${H({
      "element-clamp": !0,
      "element-clamp--disabled": this.disabled,
      "element-clamp--open": this.open,
      "element-clamp--rtl": e
    })} @click=${this.showMore ? void 0 : this.handleClick}><slot part="content" id="content" class="element-clamp__content"></slot>${this.showButton ? f`<cx-button part="toggler" size="small" variant="text" class="toggler" @click=${this.handleClick}>${t}</cx-button>` : ""}</div>`;
  }
};
o.styles = [w, T];
o.dependencies = {
  "cx-button": B
};
n([
  E('[part="content"]')
], o.prototype, "body", 2);
n([
  a({ reflect: !0, type: Boolean })
], o.prototype, "open", 2);
n([
  a({ reflect: !0, type: Boolean })
], o.prototype, "disabled", 2);
n([
  a({ reflect: !0, type: Number })
], o.prototype, "elements", 2);
n([
  a({ attribute: "root-element", type: String })
], o.prototype, "root", 2);
n([
  a({ type: Boolean })
], o.prototype, "animation", 2);
n([
  a({ attribute: "show-more", reflect: !0, type: Boolean })
], o.prototype, "showMore", 2);
n([
  a({ attribute: "show-more-text", type: String })
], o.prototype, "showMoreText", 2);
n([
  a({ attribute: "show-less-text", type: String })
], o.prototype, "showLessText", 2);
n([
  a({
    attribute: "rerender-event",
    type: String
  })
], o.prototype, "rerenderEvent", 2);
n([
  k()
], o.prototype, "showButton", 2);
n([
  y(["elements", "animation"], { waitUntilFirstUpdate: !0 })
], o.prototype, "handleChange", 1);
n([
  y("open", { waitUntilFirstUpdate: !0 })
], o.prototype, "handleOpenChange", 1);
o = n([
  x("cx-element-clamp")
], o);
export {
  o as default
};
