import { x as c, n as r } from "./plus-base-10eea8a6.mjs";
import { e as w } from "./custom-element-eaccb8d2.mjs";
import { t as b } from "./state-f0bfed48.mjs";
import g from "./plus.js";
import { F as y } from "./floating.service-ed834de8.mjs";
import { s as $ } from "./index-975d3293.mjs";
import "./floating-ui-5c56eab3.mjs";
const I = $({
  slots: {
    base: ["plus-popover font-sans antialiased", " max-w-96", "absolute top-0 left-0 z-50 hidden"],
    descriptionClass: [""],
    titleClass: ["font-medium flex gap-2 items-center"],
    arrowClass: ["arrow absolute w-3 h-3 bg-color-default rotate-45 rounded-sm z-auto shadow-md z-[-1]"],
    contentClass: ["flex flex-col gap-2.5"],
    footerClass: ["flex justify-end gap-2"],
    wrapperClass: ["flex flex-col gap-5 p-5 rounded bg-color-default text-color-default "],
    prefixIconClass: ["text-color-primary"]
  },
  variants: {
    size: {
      sm: {
        base: [""],
        descriptionClass: ["text-xs"],
        titleClass: ["text-sm"],
        contentClass: [""],
        footerClass: [""],
        wrapperClass: ["p-3"]
      },
      md: {
        base: [""],
        descriptionClass: ["text-sm"],
        titleClass: ["text-base"],
        contentClass: [""],
        footerClass: [""],
        wrapperClass: ["p-3.5"]
      },
      lg: {
        base: [""],
        descriptionClass: ["text-base"],
        titleClass: ["text-lg"],
        contentClass: [""],
        footerClass: [""],
        wrapperClass: ["p-4"]
      }
    },
    available: {
      true: {
        base: ["shadow-md"]
      },
      false: {
        base: []
      }
    },
    status: {
      default: [""],
      success: {
        prefixIconClass: ["text-color-success"]
      },
      warning: {
        prefixIconClass: ["text-color-warning"]
      },
      error: {
        prefixIconClass: ["text-color-error"]
      },
      info: {
        prefixIconClass: ["text-color-info"]
      },
      primary: {
        prefixIconClass: ["text-color-primary"]
      },
      attention: {
        prefixIconClass: ["text-color-default"]
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md",
    available: !0,
    status: "default"
  }
});
var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (e, a, l, n) => {
  for (var o = n > 1 ? void 0 : n ? _(a, l) : a, p = e.length - 1, i; p >= 0; p--)
    (i = e[p]) && (o = (n ? i(a, l, o) : i(o)) || o);
  return n && o && z(a, l, o), o;
};
let t = class extends y {
  constructor() {
    super(), this.size = g.Sizes.md, this.placement = "top", this.showArrow = !0, this.status = "primary", this.okText = "Confirm", this.cancelText = "Cancel", this.trigger = "click", this._prefixIcon = "";
  }
  set prefixIcon(e) {
    this._prefixIcon = e;
  }
  get prefixIcon() {
    const e = {
      info: "fa-solid fa-circle-info",
      success: "fa-solid fa-circle-check",
      warning: "fa-solid fa-triangle-exclamation",
      error: "fa-solid fa-xmark-circle",
      attention: "fa-solid fa-circle-exclamation"
    };
    return this._prefixIcon ? this._prefixIcon : e[this.status];
  }
  onConfirm() {
    this.emit("plus-confirm"), this.hide();
  }
  onCancel() {
    this.emit("plus-cancel"), this.hide();
  }
  firstUpdated() {
    this.options = {
      ...this.options,
      position: this.placement,
      showArrow: this.showArrow
    };
  }
  render() {
    const { size: e, title: a, prefixIcon: l, showArrow: n, cancelText: o, okText: p, status: i } = this, { base: f, contentClass: d, footerClass: u, wrapperClass: x, titleClass: m, prefixIconClass: h, arrowClass: C } = I({
      size: e,
      available: !!(a || this.querySelector("[slot='content']")),
      status: i
    }), v = () => {
      if (l)
        return c`<div class=${h()}><i class=${l}></i></div>`;
    };
    return c`
      <slot @slotchange=${this.handleSlotChange.bind(this)}></slot>
      <div class=${f()}>
        <div class=${x()}>
          <div class=${d()}>
            ${n ? c`<div class=${C()}></div>` : ""} ${a ? c`<div class=${m()}>${v()}<span>${a}</span></div>` : ""}
            <slot name="content"></slot>
          </div>
          <div class=${u()}>
            <plus-button @click=${this.onCancel} size=${e}>${o}</plus-button>
            <plus-button @click=${this.onConfirm} status=${i != "attention" ? i : "invert"} size=${e}>${p}</plus-button>
          </div>
        </div>
      </div>
    `;
  }
};
s([
  r({ type: String })
], t.prototype, "size", 2);
s([
  r({ type: String })
], t.prototype, "placement", 2);
s([
  r({ type: Boolean, attribute: "show-arrow" })
], t.prototype, "showArrow", 2);
s([
  r({ type: String })
], t.prototype, "title", 2);
s([
  r({ type: String })
], t.prototype, "status", 2);
s([
  r({ attribute: "ok-text" })
], t.prototype, "okText", 2);
s([
  r({ attribute: "cancel-text" })
], t.prototype, "cancelText", 2);
s([
  r()
], t.prototype, "trigger", 2);
s([
  b()
], t.prototype, "_prefixIcon", 2);
s([
  r({ type: String })
], t.prototype, "prefixIcon", 1);
t = s([
  w("plus-popover")
], t);
export {
  t as PopoverComponent
};
