import { r as n, c as t, h as e, H as d, g as l } from "./index.61732cef.js";
import { c as r } from "./index-orsBiyT_.fc4357c3.js";
import { t as c } from "./index.esm-DBTxpXCn.fccbd562.js";
import "react";
import "react-dom";
const g = () => ":host{display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.dialog::backdrop{display:none}.dialog:not([open]){display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{flex-wrap:nowrap;justify-content:flex-end}}.dialog__left_controls{display:flex;align-items:center;flex-grow:1;padding-left:var(--s-space-8);width:100%;min-width:0}@media (min-width: 992px){.dialog__left_controls{width:auto}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}", h = class {
  constructor(i) {
    n(this, i), this.dialogClose = t(this, "dialogClose", 7), this.dialogOpen = t(this, "dialogOpen", 7), this.primaryAction = t(this, "primaryAction", 7), this.secondaryAction = t(this, "secondaryAction", 7), this.toggleDialog = t(this, "toggleDialog", 7), this.intent = "primary", this.closing = !1, this.opening = !1, this.onClose = () => {
      this.closing = !1, this.dialogClose.emit();
    }, this.onToggle = (o) => {
      const a = {
        newState: o.newState,
        dialog: this.dialogEl
      };
      this.el.isConnected ? this.toggleDialog.emit(a) : document.dispatchEvent(new CustomEvent("toggleDialog", {
        bubbles: !0,
        composed: !0,
        detail: a
      }));
    }, this.onKeyDown = (o) => {
      o.code === "Escape" && (o.stopImmediatePropagation(), o.preventDefault(), this.close());
    }, this.onBackdropClick = () => {
      this.close();
    }, this.onPrimaryAction = (o) => {
      this.primaryAction.emit(o), this.close();
    }, this.onSecondaryAction = (o) => {
      this.secondaryAction.emit(o), this.close();
    };
  }
  componentDidLoad() {
    this.ensureOpening(), this.setDialogCustomProps();
  }
  disconnectedCallback() {
    var i;
    (i = this.dialogEl) != null && i.open && this.dialogEl.close();
  }
  ensureOpening() {
    var i;
    this.opening && !((i = this.dialogEl) != null && i.open) && this.open();
  }
  setDialogCustomProps() {
    this.dialogEl.setAttribute("closedby", "none");
  }
  async open(i) {
    this.opening = !0, this.temporaryReturnFocusTo = i, this.dialogEl && (this.dialogEl.showModal(), this.dialogOpen.emit());
  }
  async close() {
    this.closing || (this.closing = !0, setTimeout(() => {
      this.dialogEl.close(), this.customFocusReturn();
    }, 150));
  }
  customFocusReturn() {
    var s;
    const i = (s = this.temporaryReturnFocusTo) != null ? s : this.returnFocusTo;
    if (!i)
      return;
    const o = typeof i == "string" ? document.querySelector(i) : i, a = c(o, {
      includeContainer: !0,
      getShadowRoot: !0
    });
    a.length > 0 && a[0].focus(), this.temporaryReturnFocusTo = void 0;
  }
  render() {
    const i = r("dialog", { "dialog--closing": this.closing }), o = Boolean(this.el.querySelector('[slot="left-controls"]'));
    return e(d, { key: "aed27fd60b073318b2bd447fbdea62b28a27b2bb" }, e("dialog", { key: "717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da", "aria-describedby": "content", "aria-labelledby": this.hideLabel ? void 0 : "label", "aria-label": this.hideLabel ? this.label : void 0, class: i, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (a) => this.dialogEl = a }, e("div", { key: "11cff9977346162bc0e379a2c6b12860efa9756e", class: "dialog__backdrop", onClick: this.onBackdropClick }), e("div", { key: "c537c3eaeb2688e7829163f1bb855f803fbd22b2", class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && e("h2", { key: "b673f936615fff1714137c5e3a0047e153103e2d", class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label), e("div", { key: "6078b644042f60e89dfe55debeb8aad6a80bed34", class: "dialog__content", part: "dialog__content", id: "content" }, e("slot", { key: "708bb8495998e1b91cebf23c4aba27d6225bdbe6" })), e("div", { key: "b47c30c0db1a42257dd198a985fd3c26bcad4094", class: "dialog__controls" }, o && e("div", { key: "bc4cdcd98a8e57faa1f182ff8a85b261e7757c22", class: "dialog__left_controls" }, e("slot", { key: "c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2", name: "left-controls" })), this.secondaryActionLabel && e("swirl-button", { key: "f728634b91e50864b1179267da1d465efae28f2a", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && e("swirl-button", { key: "87f838d8b11dfa270ba12c02a981b855029cf69c", intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))));
  }
  get el() {
    return l(this);
  }
};
h.style = g();
export {
  h as swirl_dialog
};
