import { P as h, x as c, n as o } from "./plus-base-10eea8a6.mjs";
import { e as g } from "./custom-element-eaccb8d2.mjs";
import { t as d } from "./state-f0bfed48.mjs";
import { i as y } from "./query-59d2d374.mjs";
import v from "./plus.js";
import { s as x } from "./index-975d3293.mjs";
const C = x({
  slots: {
    base: [
      "plus-toast-class font-sans antialiased flex items-center justify-between border border-solid border-transparent rounded font-medium w-full max-w-2xl transition duration-300 ease-in-out transform scale-95"
    ],
    iconClass: ["plus-toast__icon"],
    messageClass: ["plus-toast__message flex items-center"],
    closeClass: [
      "plus-toast__close cursor-pointer relative",
      // Clicking area
      "before:absolute before:inset-0 before:z-10",
      "before:rounded-full before:cursor-pointer before:bg-transparent before:content-['']",
      "before:w-10 before:h-10 before:-top-1.5 before:-left-3 before:z-10"
    ],
    toastContainer: ["plus-toast-container fixed z-50"]
  },
  variants: {
    size: {
      sm: {
        base: ["p-5 gap-2.5 text-base"],
        messageClass: ["gap-2.5"]
      },
      md: {
        base: ["p-6 gap-3 text-lg"],
        messageClass: ["gap-3"]
      },
      lg: {
        base: ["p-7 gap-3.5 text-xl"],
        messageClass: ["gap-3.5"]
      }
    },
    kind: {
      filled: [],
      outlined: []
    },
    status: {
      success: {
        base: ["bg-color-success text-color-base"],
        iconClass: ["text-color-invert-success"]
      },
      warning: {
        base: ["bg-color-warning text-color-base"],
        iconClass: ["text-color-invert-warning"]
      },
      error: {
        base: ["bg-color-error text-color-base"],
        iconClass: ["text-color-invert-error"]
      },
      info: {
        base: ["bg-color-info text-color-base"],
        iconClass: ["text-color-invert-info"]
      },
      default: {
        base: ["bg-color-invert-default text-color-base"]
      }
    },
    invert: {
      true: [],
      false: []
    },
    placement: {
      "top-start": {},
      "top-end": {},
      top: {},
      "bottom-start": {},
      "bottom-end": {},
      bottom: {},
      "left-start": {},
      "left-end": {},
      left: {},
      "right-start": {},
      "right-end": {},
      right: {}
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md",
    kind: "filled",
    status: "default",
    invert: !1,
    placement: "top-start"
  }
});
var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, a, l, r) => {
  for (var i = r > 1 ? void 0 : r ? w(a, l) : a, p = t.length - 1, n; p >= 0; p--)
    (n = t[p]) && (i = (r ? n(a, l, i) : n(i)) || i);
  return r && i && _(a, l, i), i;
};
let e = class extends h {
  constructor() {
    super(...arguments), this.size = v.Sizes.md, this.kind = "filled", this.placement = "top-start", this.status = "default", this.invert = !1, this.dismiss = !1, this.duration = 3e3, this.position = "top-right", this._icon = "";
  }
  set icon(t) {
    this._icon = t;
  }
  get icon() {
    const t = {
      info: "fa-solid fa-circle-info",
      success: "fa-solid fa-circle-check",
      warning: "fa-solid fa-triangle-exclamation",
      error: "fa-solid fa-circle-exclamation"
    };
    return this._icon ? this._icon : t[this.status];
  }
  firstUpdated(t) {
    super.firstUpdated(t);
  }
  async show() {
    const t = this.toastContainer();
    t ? (this.toast.style.display = "block", t.appendChild(this), this.timeOutId = setTimeout(() => {
      this.toast.style.display = "none";
    }, this.duration)) : (this.createToastContainer(), this.show());
  }
  createToastContainer() {
    const t = document.createElement("plus-toast-container");
    t.setAttribute("position", this.position), t.setAttribute("id", "plus-toast-container-" + this.position), document.body.appendChild(t);
  }
  toastContainer() {
    return document.getElementById("plus-toast-container-" + this.position);
  }
  mouseEnter() {
    clearTimeout(this.timeOutId);
  }
  mouseLeave() {
    this.timeOutId = setTimeout(() => {
      this.toast.style.display = "none";
    }, this.duration);
  }
  render() {
    const { size: t, invert: a, kind: l, status: r, placement: i, message: p, icon: n } = this, { base: u, iconClass: f, messageClass: m, closeClass: b } = C({ size: t, kind: l, status: r, invert: a, placement: i });
    return c`
      <div class=${u()} id=${"toast-" + this.id} style=${"display:none"} @mouseenter=${this.mouseEnter} @mouseleave=${this.mouseLeave}>
        <div class=${m()}>
          ${n ? c`<i class=${f() + " fa " + n}></i>` : ""}
          <span><slot>${p}</slot></span>
        </div>
        ${this.dismiss ? c`<div class=${b()}><i class="fa fa-solid fa-times"></i></div>` : ""}
      </div>
    `;
  }
};
s([
  y(".plus-toast-class")
], e.prototype, "toast", 2);
s([
  o({ type: String })
], e.prototype, "size", 2);
s([
  o({ type: String })
], e.prototype, "kind", 2);
s([
  o({ type: String })
], e.prototype, "placement", 2);
s([
  o({ type: String })
], e.prototype, "status", 2);
s([
  o({ type: Boolean, converter: (t) => t != "false" })
], e.prototype, "invert", 2);
s([
  o({ type: Boolean, converter: (t) => t != "false" })
], e.prototype, "dismiss", 2);
s([
  o({ type: Number })
], e.prototype, "duration", 2);
s([
  o({ type: String })
], e.prototype, "position", 2);
s([
  o({ type: String })
], e.prototype, "message", 2);
s([
  d()
], e.prototype, "_icon", 2);
s([
  o({ type: String })
], e.prototype, "icon", 1);
s([
  d()
], e.prototype, "timeOutId", 2);
e = s([
  g("plus-toast")
], e);
export {
  e as ToastComponent
};
