import { n as d } from "./static-be5c3b1c.mjs";
import { P as f, r as h, n as r } from "./plus-base-1920dd44.mjs";
import { e as y } from "./custom-element-eaccb8d2.mjs";
import { t as C } from "./state-4d7d9621.mjs";
import { i as w } from "./query-48157d42.mjs";
import { s as $ } from "./index-975d3293.mjs";
const k = $({
  slots: {
    base: "font-sans antialiased flex flex-row items-baseline justify-between border border-solid rounded-md font-medium w-fit",
    textArea: "flex flex-1 flex-col items-start justify-center",
    descriptionClass: "empty:hidden font-normal",
    closableArea: "flex h-6 w-6 cursor-pointer items-center justify-center",
    iconClass: ""
  },
  variants: {
    size: {
      sm: {
        base: "text-sm p-3 gap-2.5",
        descriptionClass: "text-xs",
        textArea: "gap-2",
        iconClass: "text-sm"
      },
      md: {
        base: "text-base p-3.5 gap-3",
        descriptionClass: "text-sm",
        textArea: "gap-2.5",
        iconClass: "text-base"
      },
      lg: {
        base: "text-lg p-4 gap-3.5",
        descriptionClass: "text-base",
        textArea: "gap-3",
        iconClass: "text-lg"
      }
    },
    kind: {
      filled: {
        base: "rounded-md border-transparent"
      },
      outlined: {
        base: " border border-solid"
      },
      text: {
        base: "rounded-md"
      },
      dashed: {
        base: " border border-dashed border-color-default"
      }
    },
    fullWidth: {
      true: {
        base: "w-full"
      }
    },
    closable: {
      true: {
        closableArea: "cursor-pointer"
      },
      false: {
        closableArea: "hidden"
      }
    },
    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-default text-color-default"]
      }
    },
    invert: {
      true: {}
    }
  },
  compoundVariants: [
    {
      kind: ["outlined", "dashed"],
      class: {
        base: ["border"]
      }
    },
    {
      kind: ["text", "filled"],
      class: {
        base: [""]
      }
    },
    {
      kind: "filled",
      status: "success",
      invert: !1,
      class: {
        iconClass: "text-color-invert-success"
      }
    },
    {
      kind: "filled",
      status: "info",
      invert: !1,
      class: {
        iconClass: "text-color-invert-info"
      }
    },
    {
      status: "default",
      invert: !0,
      class: {
        base: ["bg-color-invert-default text-color-base"]
      }
    },
    {
      status: "success",
      invert: !0,
      class: {
        base: ["bg-color-invert-success text-color-default"],
        iconClass: "text-color-success"
      }
    },
    {
      status: "warning",
      invert: !0,
      class: {
        base: ["bg-color-invert-warning text-color-default"],
        iconClass: "text-color-warning"
      }
    },
    {
      status: "error",
      invert: !0,
      class: {
        base: ["bg-color-invert-error text-color-default"],
        iconClass: "text-color-error"
      }
    },
    {
      status: "info",
      invert: !0,
      class: {
        base: ["bg-color-invert-info text-color-default"],
        iconClass: "text-color-info"
      }
    },
    {
      kind: ["outlined", "dashed"],
      status: "default",
      class: {
        base: ["border-color-default text-color-default bg-transparent"]
      }
    },
    {
      kind: ["outlined", "dashed"],
      status: "success",
      class: {
        base: ["border-color-success text-color-success bg-transparent"],
        descriptionClass: "text-color-default"
      }
    },
    {
      kind: ["outlined", "dashed"],
      status: "warning",
      class: {
        base: ["border-color-warning text-color-warning bg-transparent"],
        descriptionClass: "text-color-default"
      }
    },
    {
      kind: ["outlined", "dashed"],
      status: "info",
      class: {
        base: ["border-color-info text-color-info bg-transparent"],
        descriptionClass: "text-color-default"
      }
    },
    {
      kind: ["outlined", "dashed"],
      status: "error",
      class: {
        base: ["border-color-error text-color-error bg-transparent"],
        descriptionClass: "text-color-default"
      }
    }
  ],
  defaultVariants: {
    size: "md",
    status: "default",
    invert: !1,
    kind: "filled"
  }
}), _ = "";
var A = Object.defineProperty, S = Object.getOwnPropertyDescriptor, t = (o, a, n, l) => {
  for (var s = l > 1 ? void 0 : l ? S(a, n) : a, i = o.length - 1, c; i >= 0; i--)
    (c = o[i]) && (s = (l ? c(a, n, s) : c(s)) || s);
  return l && s && A(a, n, s), s;
};
let e = class extends f {
  constructor() {
    super(...arguments), this.kind = "filled", this.status = "default", this.size = "md", this._icon = "", this.fullWidth = !1, this.closable = !1, this.invert = !1;
  }
  set icon(o) {
    this._icon = o;
  }
  get icon() {
    const o = {
      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 : o[this.status];
  }
  render() {
    const { kind: o, status: a, size: n, invert: l, fullWidth: s, closable: i, message: c, description: p, icon: u } = this, { base: b, textArea: x, descriptionClass: g, closableArea: m, iconClass: v } = k({ status: a, kind: o, size: n, invert: l, fullWidth: s, closable: i });
    return d`<div class=${"alert " + b()} role="alert">
      ${u ? d`<div class=${v()}><i class=${u}></i></div>` : null}
      <div class=${x()}>
        <span class="empty:hidden">${c}</span>
        <span class=${g()}>${p}</span>
      </div>
      <div class=${m()} @click=${() => this.el.remove()}>${i ? d`<i class="fa fa-close"></i>` : null}</div>
    </div>`;
  }
};
e.styles = [...f.styles, h(_)];
t([
  w(".alert")
], e.prototype, "el", 2);
t([
  r({ type: String, reflect: !0 })
], e.prototype, "kind", 2);
t([
  r({ type: String, reflect: !0 })
], e.prototype, "status", 2);
t([
  r({ type: String, reflect: !0 })
], e.prototype, "size", 2);
t([
  r({ type: String })
], e.prototype, "message", 2);
t([
  C()
], e.prototype, "_icon", 2);
t([
  r({ type: String })
], e.prototype, "icon", 1);
t([
  r({ type: String })
], e.prototype, "description", 2);
t([
  r({ type: Boolean, attribute: "full-width", reflect: !0 })
], e.prototype, "fullWidth", 2);
t([
  r({ type: Boolean })
], e.prototype, "closable", 2);
t([
  r({ type: Boolean })
], e.prototype, "invert", 2);
e = t([
  y("plus-alert")
], e);
export {
  e as AlertComponent
};
