import { n, C } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as k } from "../chunks/component.styles.CRO4Odto.js";
import { a as d, s as p } from "../chunks/animate.El-MpOws.js";
import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
import { w as v } from "../chunks/event.mFzZi4sr.js";
import { L as O } from "../chunks/i18n.BABe9hN4.js";
import { M as $ } from "../chunks/modal.U1QltQKe.js";
import { l as m, u } from "../chunks/scroll.xtO5yojm.js";
import { H as B } from "../chunks/slot.j5oheLJC.js";
import { w as _ } from "../chunks/watch.BCJD77bD.js";
import { i as P, x as y } from "../chunks/lit-element.jLBm65_O.js";
import { r as S } from "../chunks/state.CSDxrqLd.js";
import { e as w } from "../chunks/query.BBf1UFkC.js";
import { e as g } from "../chunks/class-map.BiVq-cVR.js";
import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
import { n as A } from "../chunks/when.Dr1es41R.js";
import { c as x } from "../chunks/capitalize.CNStXZBq.js";
import { s as r, g as c } from "../chunks/animation-registry.HmpwNuGH.js";
import { C as q } from "../chunks/icon-button.C2s3pHG4.js";
const D = P`:host{--size:25rem;--header-spacing:var(--cx-spacing-large);--body-spacing:var(--cx-spacing-large);--footer-spacing:var(--cx-spacing-large);--font-family:var(--cx-font-sans);display:contents}.drawer{top:0;pointer-events:none;width:0;height:0;inset-inline-start:0;overflow:hidden}.drawer--open{width:100%;height:100%}.drawer--persistent.drawer--open{width:var(--size);min-width:var(--size)}.drawer--contained{z-index:initial;position:absolute}.drawer--persistent{position:relative}.drawer--fixed{z-index:var(--cx-z-index-drawer);position:fixed}.drawer__panel{z-index:2;background-color:var(--cx-panel-background-color);max-width:100%;max-height:100%;box-shadow:var(--cx-shadow-large);pointer-events:all;flex-direction:column;display:flex;position:absolute;overflow:auto}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:100%;height:var(--size);inset-inline-start:0}.drawer--end .drawer__panel{top:0;inset-inline-end:0;bottom:auto;width:var(--size);height:100%;inset-inline-start:auto}.drawer--bottom .drawer__panel{top:auto;inset-inline-end:auto;bottom:0;width:100%;height:var(--size);inset-inline-start:0}.drawer--start .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:var(--size);height:100%;inset-inline-start:0}.drawer__header{gap:var(--cx-spacing-small);padding:var(--header-spacing);border-bottom:solid 1px var(--cx-input-border-color);font-family:var(--font-family);display:flex}.drawer__title{font:inherit;font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-semibold);line-height:var(--cx-line-height-medium);flex:auto;align-items:center;margin:0;display:flex}.drawer__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.drawer__header-actions cx-icon-button,.drawer__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-medium);flex:none;align-items:center;display:flex}.drawer__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-family:var(--font-family);flex:auto;display:block;overflow:auto}.drawer__footer{text-align:right;padding:var(--footer-spacing);font-family:var(--font-family)}.drawer__footer ::slotted(cx-button:not(:last-of-type)){margin-inline-end:var(--cx-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{background-color:var(--cx-overlay-background-color);pointer-events:all;display:block;position:fixed;inset:0}.drawer--contained .drawer__overlay{opacity:0;position:absolute}.drawer__overlay--disabled{display:none}@media (forced-colors:active){.drawer__panel{border:solid 1px var(--cx-color-neutral-0)}}`;
var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, a, o, l) => {
  for (var s = l > 1 ? void 0 : l ? L(a, o) : a, h = e.length - 1, f; h >= 0; h--)
    (f = e[h]) && (s = (l ? f(a, o, s) : f(s)) || s);
  return l && s && E(a, o, s), s;
};
let t = class extends C {
  constructor() {
    super(...arguments), this.hasSlotController = new B(this, "footer"), this.localize = new O(this), this.modal = new $(this), this.isClosing = !1, this.open = !1, this.label = "", this.placement = "end", this.contained = !1, this.noHeader = !1, this.variant = "overlay", this.noCloseButton = !1, this.handleDocumentKeyDown = (e) => {
      this.contained || e.key === "Escape" && this.modal.isActive() && this.open && (e.stopImmediatePropagation(), this.requestClose("keyboard"));
    };
  }
  connectedUpdatedCallback() {
    this.drawer.hidden = !this.open, this.open && (this.addOpenListeners(), this.contained || (this.modal.activate(), m(this)));
  }
  disconnectedCallback() {
    super.disconnectedCallback(), u(this), this.removeOpenListeners();
  }
  willUpdate(e) {
    if (super.willUpdate(e), !e.has("open"))
      return;
    e.get("open") && !this.open ? this.isClosing = !0 : this.open && (this.isClosing = !1);
  }
  requestClose(e) {
    if (this.emit("cx-request-close", {
      cancelable: !0,
      detail: { source: e }
    }).defaultPrevented) {
      const o = c(this, "drawer.denyClose", {
        dir: this.localize.dir()
      });
      d(this.panel, o.keyframes, o.options);
      return;
    }
    this.hide();
  }
  addOpenListeners() {
    "CloseWatcher" in window ? (this.closeWatcher?.destroy(), this.contained || (this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => this.requestClose("keyboard"))) : document.addEventListener("keydown", this.handleDocumentKeyDown);
  }
  removeOpenListeners() {
    document.removeEventListener("keydown", this.handleDocumentKeyDown), this.closeWatcher?.destroy();
  }
  resetMultipleMenus() {
    [...this.querySelectorAll("cx-menu")].forEach((a) => {
      a.variant === "multiple" && a.resetActiveMenu();
    });
  }
  async handleOpenChange() {
    if (this.open) {
      this.emit("cx-show"), this.addOpenListeners(), this.originalTrigger = document.activeElement, this.contained || (this.modal.activate(), m(this));
      const e = this.querySelector("[autofocus]");
      e && e.removeAttribute("autofocus"), await Promise.all([
        p(this.drawer),
        p(this.overlay)
      ]), this.drawer.hidden = !1, requestAnimationFrame(() => {
        this.emit("cx-initial-focus", {
          cancelable: !0
        }).defaultPrevented || (e ? e.focus({
          preventScroll: !0
        }) : this.panel.focus({ preventScroll: !0 })), e && e.setAttribute("autofocus", "");
      });
      const a = c(
        this,
        `drawer.show${x(this.placement)}`,
        {
          dir: this.localize.dir()
        }
      ), o = c(this, "drawer.overlay.show", {
        dir: this.localize.dir()
      });
      await Promise.all([
        d(this.panel, a.keyframes, a.options),
        this.contained ? Promise.resolve() : d(
          this.overlay,
          o.keyframes,
          o.options
        )
      ]), this.emit("cx-after-show");
    } else {
      this.emit("cx-hide"), this.removeOpenListeners(), this.contained || (this.modal.deactivate(), u(this)), await Promise.all([
        p(this.drawer),
        p(this.overlay)
      ]);
      const e = c(
        this,
        `drawer.hide${x(this.placement)}`,
        {
          dir: this.localize.dir()
        }
      ), a = c(this, "drawer.overlay.hide", {
        dir: this.localize.dir()
      });
      await Promise.all([
        (this.contained ? Promise.resolve() : d(
          this.overlay,
          a.keyframes,
          a.options
        )).then(() => {
          this.overlay.hidden = !0;
        }),
        d(
          this.panel,
          e.keyframes,
          e.options
        ).then(() => {
          this.panel.hidden = !0;
        })
      ]), this.drawer.hidden = !0, this.isClosing = !1, this.overlay.hidden = !1, this.panel.hidden = !1;
      const o = this.originalTrigger;
      typeof o?.focus == "function" && setTimeout(() => o.focus()), this.resetMultipleMenus(), this.emit("cx-after-hide");
    }
  }
  handleNoModalChange() {
    this.open && !this.contained && (this.modal.activate(), m(this)), this.open && this.contained && (this.modal.deactivate(), u(this));
  }
  /** Shows the drawer. */
  async show() {
    if (!this.open)
      return this.open = !0, v(this, "cx-after-show");
  }
  /** Hides the drawer */
  async hide() {
    if (this.open)
      return this.open = !1, v(this, "cx-after-hide");
  }
  handleOverlayClick() {
    this.requestClose("overlay");
  }
  handleCloseButtonClick() {
    this.requestClose("close-button");
  }
  render() {
    const e = this.variant === "persistent";
    return y`<div part="base" class=${g({
      drawer: !0,
      "drawer--bottom": this.placement === "bottom",
      "drawer--contained": this.contained,
      "drawer--end": this.placement === "end",
      "drawer--fixed": !this.contained,
      "drawer--has-footer": this.hasSlotController.test("footer"),
      "drawer--open": this.open || this.isClosing,
      "drawer--persistent": e,
      "drawer--rtl": this.localize.dir() === "rtl",
      "drawer--start": this.placement === "start",
      "drawer--top": this.placement === "top"
    })}><div part="overlay" class=${g({
      drawer__overlay: !0,
      "drawer__overlay--disabled": e
    })} @click=${this.handleOverlayClick} tabindex="-1"></div><div part="panel" class="drawer__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${b(this.noHeader ? this.label : void 0)} aria-labelledby=${b(this.noHeader ? void 0 : "title")} tabindex="0">${this.noHeader ? "" : y`<header part="header" class="drawer__header"><h2 part="title" class="drawer__title" id="title"><!-- If there's no label, use an invisible character to prevent the header from collapsing --><slot name="label">${this.label.length > 0 ? this.label : "\uFEFF"}</slot></h2><div part="header-actions" class="drawer__header-actions"><slot name="header-actions"></slot>${A(
      !this.noCloseButton,
      () => y`<cx-icon-button part="close-button" exportparts="base:close-button__base" class="drawer__close" name="close" label=${this.localize.term("close")} @click=${this.handleCloseButtonClick}></cx-icon-button>`
    )}</div></header>`}<slot part="body" class="drawer__body"></slot><footer part="footer" class="drawer__footer"><slot name="footer"></slot></footer></div></div>`;
  }
};
t.styles = [k, D];
t.dependencies = { "cx-icon-button": q };
i([
  w(".drawer")
], t.prototype, "drawer", 2);
i([
  w(".drawer__panel")
], t.prototype, "panel", 2);
i([
  w(".drawer__overlay")
], t.prototype, "overlay", 2);
i([
  S()
], t.prototype, "isClosing", 2);
i([
  n({ reflect: !0, type: Boolean })
], t.prototype, "open", 2);
i([
  n({ reflect: !0 })
], t.prototype, "label", 2);
i([
  n({ reflect: !0 })
], t.prototype, "placement", 2);
i([
  n({ reflect: !0, type: Boolean })
], t.prototype, "contained", 2);
i([
  n({ attribute: "no-header", reflect: !0, type: Boolean })
], t.prototype, "noHeader", 2);
i([
  n({ reflect: !0, type: String })
], t.prototype, "variant", 2);
i([
  n({ attribute: "no-close-button", reflect: !0, type: Boolean })
], t.prototype, "noCloseButton", 2);
i([
  _("open", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleOpenChange", 1);
i([
  _("contained", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleNoModalChange", 1);
t = i([
  z("cx-drawer")
], t);
r("drawer.showTop", {
  keyframes: [
    { opacity: 0, translate: "0 -100%" },
    { opacity: 1, translate: "0 0" }
  ],
  options: { duration: 250, easing: "ease" }
});
r("drawer.hideTop", {
  keyframes: [
    { opacity: 1, translate: "0 0" },
    { opacity: 0, translate: "0 -100%" }
  ],
  options: { duration: 250, easing: "ease" }
});
r("drawer.showEnd", {
  keyframes: [
    { opacity: 0, translate: "100%" },
    { opacity: 1, translate: "0" }
  ],
  options: { duration: 250, easing: "ease" },
  rtlKeyframes: [
    { opacity: 0, translate: "-100%" },
    { opacity: 1, translate: "0" }
  ]
});
r("drawer.hideEnd", {
  keyframes: [
    { opacity: 1, translate: "0" },
    { opacity: 0, translate: "100%" }
  ],
  options: { duration: 250, easing: "ease" },
  rtlKeyframes: [
    { opacity: 1, translate: "0" },
    { opacity: 0, translate: "-100%" }
  ]
});
r("drawer.showBottom", {
  keyframes: [
    { opacity: 0, translate: "0 100%" },
    { opacity: 1, translate: "0 0" }
  ],
  options: { duration: 250, easing: "ease" }
});
r("drawer.hideBottom", {
  keyframes: [
    { opacity: 1, translate: "0 0" },
    { opacity: 0, translate: "0 100%" }
  ],
  options: { duration: 250, easing: "ease" }
});
r("drawer.showStart", {
  keyframes: [
    { opacity: 0, translate: "-100%" },
    { opacity: 1, translate: "0" }
  ],
  options: { duration: 250, easing: "ease" },
  rtlKeyframes: [
    { opacity: 0, translate: "100%" },
    { opacity: 1, translate: "0" }
  ]
});
r("drawer.hideStart", {
  keyframes: [
    { opacity: 1, translate: "0" },
    { opacity: 0, translate: "-100%" }
  ],
  options: { duration: 250, easing: "ease" },
  rtlKeyframes: [
    { opacity: 1, translate: "0" },
    { opacity: 0, translate: "100%" }
  ]
});
r("drawer.denyClose", {
  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
  options: { duration: 250 }
});
r("drawer.overlay.show", {
  keyframes: [{ opacity: 0 }, { opacity: 1 }],
  options: { duration: 250 }
});
r("drawer.overlay.hide", {
  keyframes: [{ opacity: 1 }, { opacity: 0 }],
  options: { duration: 250 }
});
export {
  t as default
};
