import { n as c, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as v } from "../chunks/component.styles.CRO4Odto.js";
import { s as h, a as p, 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 g } from "../chunks/i18n.BABe9hN4.js";
import { w as _ } from "../chunks/watch.BCJD77bD.js";
import { i as w, x as k } from "../chunks/lit-element.jLBm65_O.js";
import { e as l } from "../chunks/query.BBf1UFkC.js";
import { e as C } from "../chunks/class-map.BiVq-cVR.js";
import { s as y, g as f } from "../chunks/animation-registry.HmpwNuGH.js";
import D from "./icon.js";
const O = w`:host{--details-background-color:inherit;--details-border:inherit;display:block}::slotted(cx-column){padding:var(--cx-spacing-3x-small);min-height:max(var(--min-height), 100px);max-height:var(--max-height,100%);overflow:auto}.details{border:var(--details-border,solid 1px var(--cx-color-neutral-200));border-width:var(--details-border-width,1px);background-color:var(--details-background-color,--cx-color-neutral-0);overflow-anchor:none}.details--disabled{opacity:.5}.details__header{border-radius:var(--header-border-radius,var(--cx-border-radius-small));padding:var(--header-padding,var(--cx-spacing-small));-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--header-color,var(--cx-color-neutral));font-weight:var(--cx-font-weight-semibold);font-size:var(--header-font-size,var(--cx-font-size-medium));background-color:var(--header-background-color,var(--cx-color-neutral-0));border:var(--header-border) solid;align-items:center;display:flex}.details--open .details__header{background-color:var(--header-active-background-color,var(--cx-color-neutral-0));color:var(--header-active-color,var(--cx-color-neutral));border:var(--header-active-border) solid}.details__header::-webkit-details-marker{display:none}.details__header:focus{outline:none}.details__header:focus-visible{outline:var(--cx-focus-ring);outline-offset:calc(1px + var(--cx-focus-ring-offset))}.details--disabled .details__header{cursor:default}.details--disabled .details__header:focus-visible{box-shadow:none;outline:none}.details__summary{font:var(--cx-font-label-medium);flex:auto;align-items:center;display:flex}.details__summary-icon{transition:var(--cx-transition-medium) rotate ease;flex:none;align-items:center;display:flex}.details--open .details__summary-icon{rotate:90deg}.details--open.details--rtl .details__summary-icon{rotate:-90deg}.details--open slot[name=expand-icon],.details:not(.details--open) slot[name=collapse-icon]{display:none}.details__body{overflow:hidden}.details__content{padding:var(--content-padding,var(--cx-spacing-small) var(--cx-spacing-medium) var(--cx-spacing-small) var(--cx-spacing-medium));display:block}`;
var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, i = (e, a, s, r) => {
  for (var o = r > 1 ? void 0 : r ? z(a, s) : a, d = e.length - 1, n; d >= 0; d--)
    (n = e[d]) && (o = (r ? n(a, s, o) : n(o)) || o);
  return r && o && $(a, s, o), o;
};
let t = class extends b {
  constructor() {
    super(...arguments), this.localize = new g(this), this.open = !1, this.disabled = !1;
  }
  runFirstUpdated() {
    this.body.style.height = this.open ? "auto" : "0", this.open && (this.details.open = !0);
  }
  connectedUpdatedCallback() {
    this.detailsObserver = new MutationObserver((e) => {
      for (const a of e)
        a.type === "attributes" && a.attributeName === "open" && (this.details.open ? this.show() : this.hide());
    }), this.detailsObserver.observe(this.details, { attributes: !0 });
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.detailsObserver?.disconnect();
  }
  handleSummaryClick(e) {
    e.preventDefault(), this.disabled || (this.open ? this.hide() : this.show(), this.header.focus());
  }
  handleSummaryKeyDown(e) {
    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.open ? this.hide() : this.show()), (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), this.hide()), (e.key === "ArrowDown" || e.key === "ArrowRight") && (e.preventDefault(), this.show());
  }
  async handleOpenChange() {
    if (this.open) {
      if (this.details.open = !0, this.emit("cx-show", { cancelable: !0 }).defaultPrevented) {
        this.open = !1, this.details.open = !1;
        return;
      }
      await h(this.body);
      const { keyframes: a, options: s } = f(this, "details.show", {
        dir: this.localize.dir()
      });
      await p(
        this.body,
        m(a, this.body.scrollHeight),
        s
      ), this.body.style.height = "auto", this.emit("cx-after-show");
    } else {
      if (this.emit("cx-hide", { cancelable: !0 }).defaultPrevented) {
        this.details.open = !0, this.open = !0;
        return;
      }
      await h(this.body);
      const { keyframes: a, options: s } = f(this, "details.hide", {
        dir: this.localize.dir()
      });
      await p(
        this.body,
        m(a, this.body.scrollHeight),
        s
      ), this.body.style.height = "auto", this.details.open = !1, 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";
    return k`<details part="base" class=${C({
      details: !0,
      "details--disabled": this.disabled,
      "details--open": this.open,
      "details--rtl": e
    })}><summary part="header" id="header" class="details__header" role="button" aria-expanded=${this.open ? "true" : "false"} aria-controls="content" aria-disabled=${this.disabled ? "true" : "false"} tabindex=${this.disabled ? "-1" : "0"} @click=${this.handleSummaryClick} @keydown=${this.handleSummaryKeyDown}><slot name="summary" part="summary" class="details__summary">${this.summary}</slot><span part="summary-icon" class="details__summary-icon"><slot name="expand-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot><slot name="collapse-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot></span></summary><div class="details__body" role="region" aria-labelledby="header"><slot part="content" id="content" class="details__content"></slot></div></details>`;
  }
};
t.styles = [v, O];
t.dependencies = {
  "cx-icon": D
};
i([
  l(".details")
], t.prototype, "details", 2);
i([
  l(".details__header")
], t.prototype, "header", 2);
i([
  l(".details__body")
], t.prototype, "body", 2);
i([
  l(".details__expand-icon-slot")
], t.prototype, "expandIconSlot", 2);
i([
  c({ reflect: !0, type: Boolean })
], t.prototype, "open", 2);
i([
  c()
], t.prototype, "summary", 2);
i([
  c({ reflect: !0, type: Boolean })
], t.prototype, "disabled", 2);
i([
  _("open", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleOpenChange", 1);
t = i([
  x("cx-details")
], t);
y("details.show", {
  keyframes: [
    { height: "0", opacity: "0" },
    { height: "auto", opacity: "1" }
  ],
  options: { duration: 200, easing: "linear" }
});
y("details.hide", {
  keyframes: [
    { height: "auto", opacity: "1" },
    { height: "0", opacity: "0" }
  ],
  options: { duration: 200, easing: "linear" }
});
export {
  t as default
};
