import { n as r, C as k } from "./lib-cortex-element.CVMmyPMC.js";
import { c as S } from "./component.styles.CRO4Odto.js";
import { O, C as D, H, z as A, o as B } from "./overlayscrollbars.BMav4RQ4.js";
import { a as c, s as p } from "./animate.El-MpOws.js";
import { c as $ } from "./custom-element.L4WJXn1j.js";
import { w as x } from "./event.mFzZi4sr.js";
import { L } from "./i18n.BABe9hN4.js";
import { M as P } from "./modal.U1QltQKe.js";
import { l as w, u as _ } from "./scroll.xtO5yojm.js";
import { H as E } from "./slot.j5oheLJC.js";
import { w as z } from "./watch.BCJD77bD.js";
import { i as R, x as y, E as W } from "./lit-element.jLBm65_O.js";
import { r as m } from "./state.CSDxrqLd.js";
import { e as g } from "./query.BBf1UFkC.js";
import { e as v } from "./class-map.BiVq-cVR.js";
import { o as C } from "./if-defined.BRoBj_Rp.js";
import { o as q } from "./style-map.llVFPd__.js";
import { n as b } from "./when.Dr1es41R.js";
import { s as u, g as h } from "./animation-registry.HmpwNuGH.js";
import F from "../components/divider.js";
import { C as I } from "./icon-button.C2s3pHG4.js";
import U from "../components/popup.js";
var l = /* @__PURE__ */ ((e) => (e.Both = "both", e.Footer = "footer", e.Header = "header", e.None = "none", e))(l || {});
const j = R`:host{--width:31rem;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large);--body-spacing:var(--cx-spacing-medium) var(--cx-spacing-large);--divider-spacing:0;--footer-spacing:var(--cx-spacing-medium);--max-width:100%;--max-height:100%;--overlay-background-color:var(--cx-overlay-background-color);display:contents}.dialog{justify-content:center;align-items:center;display:flex}.dialog--absolute{position:absolute}.dialog__panel{width:var(--width);height:var(--dialog-height,auto);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-medium);box-shadow:var(--cx-shadow-x-large);max-width:calc(var(--max-width) - var(--cx-spacing-2x-large));max-height:calc(var(--max-height) - var(--cx-spacing-2x-large));flex-direction:column;display:flex;overflow:hidden}.dialog__panel:focus{outline:none}@media screen and (width<=420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{opacity:1;display:flex}.dialog__header{padding:var(--header-spacing);flex:none;display:flex}.dialog__header-divider,.dialog__footer-divider{--spacing:0;padding:var(--divider-spacing)}.dialog__title{font:inherit;font-family:var(--cx-font-sans);font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-regular);line-height:var(--cx-line-height-large);flex:auto;align-items:center;margin:0;display:flex}.dialog__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.dialog__header-actions cx-icon-button,.dialog__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-3x-large);flex:none;align-items:center;display:flex}.dialog__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);line-height:var(--cx-line-height-small);z-index:2;flex:auto;display:block;position:relative;overflow:auto}.dialog--overlay-scrollbar .dialog__body{flex-direction:column;display:flex}.dialog__footer{text-align:right;padding:var(--footer-spacing);z-index:1;flex:none;position:relative}.dialog__footer ::slotted(cx-button:not(:first-of-type)){margin-inline-start:var(--cx-spacing-x-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}@media (forced-colors:active){.dialog__panel{border:solid 1px var(--cx-color-neutral-0)}}.dialog__overlay{background-color:var(--overlay-background-color);opacity:0;pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex}.dialog--open .dialog__overlay{opacity:1;pointer-events:auto}`;
var M = Object.defineProperty, T = Object.getOwnPropertyDescriptor, i = (e, o, a, n) => {
  for (var s = n > 1 ? void 0 : n ? T(o, a) : o, d = e.length - 1, f; d >= 0; d--)
    (f = e[d]) && (s = (n ? f(o, a, s) : f(s)) || s);
  return n && s && M(o, a, s), s;
};
O.plugin({
  ClickScroll: A,
  ScrollbarsHiding: H,
  SizeObserver: D
});
let t = class extends k {
  constructor() {
    super(), this.hasSlotController = new E(this, "footer"), this.localize = new L(this), this.modal = new P(this), this.open = !1, this.label = "", this.noHeader = !1, this.boundary = document.body, this.dividerPosition = l.Header, this.useOverlayScrollbar = !1, this.overlayScrollbarAutoHide = "scroll", this.overlayScrollbarAutoHideDelay = 1e3, this.disableOverlayClick = !1, this.stayOpenOutsideClick = !1, this.strategy = "fixed", this.osInstance = null, this.boundaryObserver = null, this.boundarySize = {
      height: 0,
      width: 0
    }, this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.preventBoundaryDialogClose = this.preventBoundaryDialogClose.bind(this), this.handleWindowResize = this.handleWindowResize.bind(this);
  }
  runFirstUpdated() {
    this.overlay = this.shadowRoot?.querySelector(
      ".dialog__overlay"
    );
  }
  connectedUpdatedCallback() {
    this.popup.hidden = !this.open, this.open && (this.addOpenListeners(), this.modal.activate(), (!this.boundary || this.boundary === document.body) && w(this)), this.updatePopupAnchor();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.modal.deactivate(), (!this.boundary || this.boundary === document.body) && _(this), this.removeOpenListeners(), window.removeEventListener("resize", this.handleWindowResize), this.boundaryObserver?.disconnect(), this.boundaryObserver = null;
  }
  shouldUpdate(e) {
    if (e.has("boundary")) {
      const o = e.get("boundary");
      o instanceof t && o.removeEventListener(
        "cx-request-close",
        this.preventBoundaryDialogClose
      ), o === document.body && window.removeEventListener("resize", this.handleWindowResize), this.boundaryObserver?.disconnect(), this.boundaryObserver = null, this.open && this.boundary instanceof t && this.boundary.addEventListener(
        "cx-request-close",
        this.preventBoundaryDialogClose
      );
    }
    return !0;
  }
  async updatePopupAnchor() {
    if (!this.boundary || !this.popup || (this.popup.anchor = this.boundary, !this.overlay))
      return;
    let e = this.boundary;
    this.boundary instanceof t && (this.boundary.hasUpdated || await this.boundary.updateComplete, e = this.boundary.panel), this.boundary === document.body ? (this.boundarySize = {
      height: window.innerHeight,
      width: window.innerWidth
    }, this.boundaryObserver = null, window.addEventListener("resize", this.handleWindowResize)) : (this.boundarySize = {
      height: e.clientHeight,
      width: e.clientWidth
    }, this.boundaryObserver = new ResizeObserver((o) => {
      for (const a of o)
        this.boundarySize = {
          height: a.contentRect.height,
          width: a.contentRect.width
        };
    }), this.boundaryObserver.observe(e));
  }
  handleWindowResize() {
    this.boundary === document.body && (this.boundarySize = {
      height: window.innerHeight,
      width: window.innerWidth
    });
  }
  requestClose(e) {
    const o = this.emit("cx-request-close", {
      cancelable: !0,
      detail: { source: e }
    });
    if (o.defaultPrevented || this.disableOverlayClick && e === "overlay") {
      if (o.detail.preventedReason === "nested" || !this.disableOverlayClick && e === "overlay")
        return !1;
      const a = h(this, "dialog.denyClose", {
        dir: this.localize.dir()
      });
      return c(this.panel, a.keyframes, a.options), !1;
    }
    return this.hide(), !0;
  }
  /**
   * If there are multiple dialogs open, should only close the top-most dialog when clicking outside dialog panel.
   * @param event - The event object.
   */
  preventBoundaryDialogClose(e) {
    e.target === this.boundary && (e.detail.preventedReason = "nested", e.preventDefault());
  }
  addOpenListeners() {
    "CloseWatcher" in window && (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
      this.requestClose("keyboard");
    }), document.addEventListener("keydown", this.handleDocumentKeyDown, !0), document.addEventListener("mousedown", this.handleDocumentMouseDown, !0), this.boundary instanceof t && this.boundary.addEventListener(
      "cx-request-close",
      this.preventBoundaryDialogClose
    );
  }
  removeOpenListeners() {
    this.closeWatcher?.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0), document.removeEventListener(
      "mousedown",
      this.handleDocumentMouseDown,
      !0
    ), this.boundary instanceof t && this.boundary.removeEventListener(
      "cx-request-close",
      this.preventBoundaryDialogClose
    );
  }
  handleDocumentMouseDown(e) {
    const o = e.composedPath(), a = o[0], n = o.some((d) => d === this.panel), s = !this.contains(a) && !this.shadowRoot?.contains(a);
    n || this.stayOpenOutsideClick && s || this.requestClose("overlay");
  }
  handleDocumentKeyDown(e) {
    e.key === "Escape" && this.modal.isActive() && this.open && this.requestClose("keyboard") && (e.stopPropagation(), e.stopImmediatePropagation());
  }
  handleCloseButtonClick() {
    this.requestClose("close-button");
  }
  async handleOpenChange() {
    if (this.open) {
      this.emit("cx-show"), this.originalTrigger = document.activeElement, this.modal.activate(), this.useOverlayScrollbar && (this.osInstance = O(this.body, {
        scrollbars: {
          autoHide: this.overlayScrollbarAutoHide,
          autoHideDelay: this.overlayScrollbarAutoHideDelay
        }
      })), (!this.boundary || this.boundary === document.body) && w(this);
      const e = this.querySelector("[autofocus]");
      if (e && e.removeAttribute("autofocus"), await Promise.all([
        p(this.popup),
        (() => {
          this.overlay && p(this.overlay);
        })()
      ]), this.popup.hidden = !1, await this.popup.updateComplete, !this.open) {
        e && e.setAttribute("autofocus", "");
        return;
      }
      const o = () => {
        this.emit("cx-initial-focus", {
          cancelable: !0
        }).defaultPrevented || (e ? e.focus({
          preventScroll: !0
        }) : this.panel.focus({ preventScroll: !0 })), e && e.setAttribute("autofocus", "");
      }, a = h(this, "dialog.show", {
        dir: this.localize.dir()
      }), n = h(this, "dialog.overlay.show", {
        dir: this.localize.dir()
      });
      if (await Promise.all([
        c(this.panel, a.keyframes, a.options),
        (async () => {
          this.overlay && await c(
            this.overlay,
            n.keyframes,
            n.options
          );
        })()
      ]), !this.open) {
        e && e.setAttribute("autofocus", "");
        return;
      }
      o(), this.emit("cx-after-show"), this.addOpenListeners();
    } else {
      this.emit("cx-hide"), this.removeOpenListeners(), this.modal.deactivate(), this.osInstance?.destroy(), await Promise.all([
        p(this.popup),
        (() => {
          this.overlay && p(this.overlay);
        })()
      ]);
      const e = h(this, "dialog.hide", {
        dir: this.localize.dir()
      }), o = h(this, "dialog.overlay.hide", {
        dir: this.localize.dir()
      });
      await Promise.all([
        (async () => {
          this.overlay && (await c(
            this.overlay,
            o.keyframes,
            o.options
          ), this.overlay.hidden = !0);
        })(),
        c(
          this.panel,
          e.keyframes,
          e.options
        ).then(() => {
          this.panel.hidden = !0;
        })
      ]), this.overlay && (this.overlay.hidden = !1), this.panel.hidden = !1, (!this.boundary || this.boundary === document.body) && _(this);
      const a = this.originalTrigger;
      typeof a?.focus == "function" && setTimeout(() => a.focus()), this.emit("cx-after-hide");
    }
  }
  /** Shows the dialog. */
  async show() {
    if (!this.open)
      return this.open = !0, x(this, "cx-after-show");
  }
  /** Hides the dialog */
  async hide() {
    if (this.open)
      return this.open = !1, x(this, "cx-after-hide");
  }
  render() {
    return y`<cx-popup part="base" ?active=${this.open} strategy=${this.strategy === "overlay" ? "overlay" : "fixed"} class=${v({
      popup: !0
    })} placement="center"><div class=${v({
      dialog: !0,
      "dialog--has-footer": this.hasSlotController.test("footer"),
      "dialog--open": this.open,
      "dialog--overlay-scrollbar": this.useOverlayScrollbar
    })}><div part="overlay" class=${v({
      dialog__overlay: !0
    })} tabindex="-1" style=${q({
      height: `${this.boundarySize.height}px`,
      width: `${this.boundarySize.width}px`
    })}><div part="panel" class="dialog__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${C(this.noHeader ? this.label : void 0)} aria-labelledby=${C(this.noHeader ? void 0 : "title")} tabindex="-1">${b(
      this.noHeader,
      () => W,
      () => y`<header part="header" class="dialog__header"><h2 part="title" class="dialog__title" id="title"><slot name="label">${this.label.length > 0 ? this.label : "\uFEFF"}</slot></h2><div part="header-actions" class="dialog__header-actions"><slot name="header-actions"></slot><cx-icon-button part="close-button" exportparts="base:close-button__base" class="dialog__close" name="close" label=${this.localize.term("close")} @click=${this.handleCloseButtonClick}></cx-icon-button></div></header>${b(
        [
          l.Header,
          l.Both
        ].includes(this.dividerPosition),
        () => y`<cx-divider class="dialog__header-divider"></cx-divider>`
      )}
                `
    )}<!-- The tabindex="-1" is here because the body is technically scrollable if overflowing.
                However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard.
                Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable.
                https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 --><div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>${b(
      [
        l.Footer,
        l.Both
      ].includes(this.dividerPosition),
      () => y`<cx-divider class="dialog__footer-divider"></cx-divider>`
    )}<footer part="footer" class="dialog__footer"><slot name="footer"></slot></footer></div></div></div></cx-popup>`;
  }
};
t.styles = [
  S,
  B,
  j
];
t.dependencies = {
  "cx-divider": F,
  "cx-icon-button": I,
  "cx-popup": U
};
i([
  g(".popup")
], t.prototype, "popup", 2);
i([
  g(".dialog__panel")
], t.prototype, "panel", 2);
i([
  g(".dialog__body")
], t.prototype, "body", 2);
i([
  r({ reflect: !0, type: Boolean })
], t.prototype, "open", 2);
i([
  r({ reflect: !0 })
], t.prototype, "label", 2);
i([
  r({ attribute: "no-header", reflect: !0, type: Boolean })
], t.prototype, "noHeader", 2);
i([
  r({ type: Object })
], t.prototype, "boundary", 2);
i([
  r({ attribute: "divider-position", reflect: !0, type: String })
], t.prototype, "dividerPosition", 2);
i([
  r({
    attribute: "use-overlay-scrollbar",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "useOverlayScrollbar", 2);
i([
  r({
    attribute: "overlay-scrollbar-auto-hide",
    reflect: !0,
    type: String
  })
], t.prototype, "overlayScrollbarAutoHide", 2);
i([
  r({
    attribute: "overlay-scrollbar-auto-hide-delay",
    reflect: !0,
    type: Number
  })
], t.prototype, "overlayScrollbarAutoHideDelay", 2);
i([
  r({
    attribute: "disable-overlay-click",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "disableOverlayClick", 2);
i([
  r({
    attribute: "stay-open-outside-click",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "stayOpenOutsideClick", 2);
i([
  r({ reflect: !0 })
], t.prototype, "strategy", 2);
i([
  m()
], t.prototype, "overlay", 2);
i([
  m()
], t.prototype, "boundaryObserver", 2);
i([
  m()
], t.prototype, "boundarySize", 2);
i([
  z(["boundary"], { waitUntilFirstUpdate: !0 })
], t.prototype, "updatePopupAnchor", 1);
i([
  z("open", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleOpenChange", 1);
t = i([
  $("cx-dialog")
], t);
u("dialog.show", {
  keyframes: [
    { opacity: 0 },
    { opacity: 1 }
  ],
  options: { duration: 250, easing: "ease" }
});
u("dialog.hide", {
  keyframes: [
    { opacity: 1 },
    { opacity: 0 }
  ],
  options: { duration: 250, easing: "ease" }
});
u("dialog.denyClose", {
  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
  options: { duration: 250 }
});
u("dialog.overlay.show", {
  keyframes: [{ opacity: 0 }, { opacity: 1 }],
  options: { duration: 250 }
});
u("dialog.overlay.hide", {
  keyframes: [{ opacity: 1 }, { opacity: 0 }],
  options: { duration: 250 }
});
export {
  t as C,
  l as D
};
