import { n as s, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as b } from "../chunks/component.styles.CRO4Odto.js";
import { s as u, a as p } from "../chunks/animate.El-MpOws.js";
import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
import { w as m } from "../chunks/event.mFzZi4sr.js";
import { L as C } from "../chunks/i18n.BABe9hN4.js";
import { H as T } from "../chunks/slot.j5oheLJC.js";
import { w } from "../chunks/watch.BCJD77bD.js";
import { i as I, x as h } from "../chunks/lit-element.jLBm65_O.js";
import { r as A } from "../chunks/state.CSDxrqLd.js";
import { e as g } from "../chunks/query.BBf1UFkC.js";
import { e as f } from "../chunks/class-map.BiVq-cVR.js";
import { s as _, g as v } from "../chunks/animation-registry.HmpwNuGH.js";
import { C as H } from "../chunks/icon-button.C2s3pHG4.js";
const k = I`:host{margin:0;display:contents}.alert{background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-top-width:calc(var(--cx-panel-border-width) * 3);border-radius:var(--cx-border-radius-small);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-700);margin:inherit;align-items:stretch;line-height:1.6;display:flex;position:relative;overflow:hidden}.alert:not(.alert--has-icon) .alert__icon,.alert:not(.alert--closable) .alert__close-button{display:none}.alert__icon{font-size:var(--cx-font-size-large);flex:none;align-items:center;padding-inline-start:var(--cx-spacing-large);display:flex}.alert--has-countdown{border-bottom:none}.alert--primary{border-top-color:var(--cx-color-primary)}.alert--primary .alert__icon{color:var(--cx-color-primary)}.alert--success{border-top-color:var(--cx-color-success)}.alert--success .alert__icon{color:var(--cx-color-success)}.alert--neutral{border-top-color:var(--cx-color-neutral)}.alert--neutral .alert__icon{color:var(--cx-color-neutral)}.alert--warning{border-top-color:var(--cx-color-warning)}.alert--warning .alert__icon{color:var(--cx-color-warning)}.alert--danger{border-top-color:var(--cx-color-danger)}.alert--danger .alert__icon{color:var(--cx-color-danger)}.alert__message{padding:var(--cx-spacing-large);flex:auto;display:block;overflow:hidden}.alert__close-button{font-size:var(--cx-font-size-medium);flex:none;align-items:center;padding-inline-end:var(--cx-spacing-medium);display:flex}.alert__countdown{width:100%;height:calc(var(--cx-panel-border-width) * 3);background-color:var(--cx-panel-border-color);display:flex;position:absolute;bottom:0;left:0}.alert__countdown--ltr{justify-content:flex-end}.alert__countdown .alert__countdown-elapsed{width:0;height:100%}.alert--primary .alert__countdown-elapsed{background-color:var(--cx-color-primary)}.alert--success .alert__countdown-elapsed{background-color:var(--cx-color-success)}.alert--neutral .alert__countdown-elapsed{background-color:var(--cx-color-neutral-600)}.alert--warning .alert__countdown-elapsed{background-color:var(--cx-color-warning)}.alert--danger .alert__countdown-elapsed{background-color:var(--cx-color-danger)}.alert__timer{display:none}`;
var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, o, n, l) => {
  for (var a = l > 1 ? void 0 : l ? $(o, n) : o, c = r.length - 1, d; c >= 0; c--)
    (d = r[c]) && (a = (l ? d(o, n, a) : d(a)) || a);
  return l && a && z(o, n, a), a;
};
const i = Object.assign(document.createElement("div"), {
  className: "cx-toast-stack"
});
let e = class extends x {
  constructor() {
    super(...arguments), this.hasSlotController = new T(
      this,
      "icon",
      "suffix"
    ), this.localize = new C(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0, this.remainingTime = this.duration;
  }
  runFirstUpdated() {
    this.base.hidden = !this.open;
  }
  restartAutoHide() {
    this.handleCountdownChange(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), this.open && this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(
      () => this.hide(),
      this.duration
    ), this.remainingTime = this.duration, this.remainingTimeInterval = window.setInterval(() => {
      this.remainingTime -= 100;
    }, 100));
  }
  pauseAutoHide() {
    this.countdownAnimation?.pause(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval);
  }
  resumeAutoHide() {
    this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(
      () => this.hide(),
      this.remainingTime
    ), this.remainingTimeInterval = window.setInterval(() => {
      this.remainingTime -= 100;
    }, 100), this.countdownAnimation?.play());
  }
  handleCountdownChange() {
    if (this.open && this.duration < 1 / 0 && this.countdown) {
      const { countdownElement: r } = this, o = "100%", n = "0";
      this.countdownAnimation = r.animate(
        [{ width: o }, { width: n }],
        {
          duration: this.duration,
          easing: "linear"
        }
      );
    }
  }
  handleCloseClick() {
    this.hide();
  }
  async handleOpenChange() {
    if (this.open) {
      this.emit("cx-show"), this.duration < 1 / 0 && this.restartAutoHide(), await u(this.base), this.base.hidden = !1;
      const { keyframes: r, options: o } = v(this, "alert.show", {
        dir: this.localize.dir()
      });
      await p(this.base, r, o), this.emit("cx-after-show");
    } else {
      this.emit("cx-hide"), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), await u(this.base);
      const { keyframes: r, options: o } = v(this, "alert.hide", {
        dir: this.localize.dir()
      });
      await p(this.base, r, o), this.base.hidden = !0, this.emit("cx-after-hide");
    }
  }
  handleDurationChange() {
    this.restartAutoHide();
  }
  /** Shows the alert. */
  async show() {
    if (!this.open)
      return this.open = !0, m(this, "cx-after-show");
  }
  /** Hides the alert */
  async hide() {
    if (this.open)
      return this.open = !1, m(this, "cx-after-hide");
  }
  /**
   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
   * calling this method again. The returned promise will resolve after the alert is hidden.
   */
  async toast() {
    return new Promise((r) => {
      this.handleCountdownChange(), i.parentElement === null && document.body.append(i), i.appendChild(this), requestAnimationFrame(() => {
        this.clientWidth, this.show();
      }), this.addEventListener(
        "cx-after-hide",
        () => {
          i.removeChild(this), r(), i.querySelector("cx-alert") === null && i.remove();
        },
        { once: !0 }
      );
    });
  }
  render() {
    return h`<div part="base" class=${f({
      alert: !0,
      "alert--closable": this.closable,
      "alert--danger": this.variant === "danger",
      "alert--has-countdown": !!this.countdown,
      "alert--has-icon": this.hasSlotController.test("icon"),
      "alert--neutral": this.variant === "neutral",
      "alert--open": this.open,
      "alert--primary": this.variant === "primary",
      "alert--success": this.variant === "success",
      "alert--warning": this.variant === "warning"
    })} role="alert" aria-hidden=${this.open ? "false" : "true"} @mouseenter=${this.pauseAutoHide} @mouseleave=${this.resumeAutoHide}><div part="icon" class="alert__icon"><slot name="icon"></slot></div><div part="message" class="alert__message" aria-live="polite"><slot></slot></div>${this.closable ? h`<cx-icon-button part="close-button" exportparts="base:close-button__base" class="alert__close-button" name="close" label=${this.localize.term("close")} @click=${this.handleCloseClick}></cx-icon-button>` : ""}<div role="timer" class="alert__timer">${this.remainingTime}</div>${this.countdown ? h`<div class=${f({
      alert__countdown: !0,
      "alert__countdown--ltr": this.countdown === "ltr"
    })}><div class="alert__countdown-elapsed"></div></div>` : ""}</div>`;
  }
};
e.styles = [b, k];
e.dependencies = { "cx-icon-button": H };
t([
  g('[part~="base"]')
], e.prototype, "base", 2);
t([
  g(".alert__countdown-elapsed")
], e.prototype, "countdownElement", 2);
t([
  s({ reflect: !0, type: Boolean })
], e.prototype, "open", 2);
t([
  s({ reflect: !0, type: Boolean })
], e.prototype, "closable", 2);
t([
  s({ reflect: !0 })
], e.prototype, "variant", 2);
t([
  s({ type: Number })
], e.prototype, "duration", 2);
t([
  s({ reflect: !0, type: String })
], e.prototype, "countdown", 2);
t([
  A()
], e.prototype, "remainingTime", 2);
t([
  w("open", { waitUntilFirstUpdate: !0 })
], e.prototype, "handleOpenChange", 1);
t([
  w("duration")
], e.prototype, "handleDurationChange", 1);
e = t([
  y("cx-alert")
], e);
_("alert.show", {
  keyframes: [
    { opacity: 0, scale: 0.8 },
    { opacity: 1, scale: 1 }
  ],
  options: { duration: 250, easing: "ease" }
});
_("alert.hide", {
  keyframes: [
    { opacity: 1, scale: 1 },
    { opacity: 0, scale: 0.8 }
  ],
  options: { duration: 250, easing: "ease" }
});
export {
  e as default
};
