import { r as e, h as i, H as o } from "./reactcomponent-44b70bf6.mjs";
import { a as s, f as n } from "./utils-ae714467-b07fc3be.mjs";
import "react";
import "react-dom";
const r = ':host{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1}:host mi-card{position:relative;overflow:hidden;min-width:312px}:host mi-card .content h1{display:inline-flex;cursor:default;align-items:center;text-transform:uppercase;white-space:nowrap;margin:0;font-size:1rem;font-weight:600;color:#6b7280;margin-bottom:8px}:host mi-card .content h1 svg{fill:#9ca3af;width:16px;height:16px;margin-left:8px}:host mi-card .content section{position:relative}:host mi-card .content section p{margin:0;font-size:3rem;line-height:3rem;font-weight:500;color:#1c1917}:host mi-card .content section p.error{font-size:1rem;font-weight:500;color:#6b7280}:host mi-card .content section p.hidden{visibility:hidden}:host mi-card .content section p.tool-tip{box-sizing:border-box;visibility:hidden;overflow:hidden;position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;transition:all 100ms;z-index:700;background-color:#ffffff;font-size:0.875rem;font-weight:400;line-height:1rem;margin:0}:host mi-card .content section p.tool-tip.visible{opacity:1;visibility:visible}:host mi-card .content section mi-spinner{display:inline-block;vertical-align:middle;width:100%}', l = class {
  constructor(t) {
    e(this, t), this.showToolTip = !1, this.label = "", this.value = "", this.tip = void 0, this.spinner = !1, this.error = void 0;
  }
  render() {
    return i(o, null, i("mi-card", null, this.renderContent()));
  }
  renderToolTip() {
    if (this.tip > "")
      return i("p", { class: { "tool-tip": !0, visible: this.tip && this.showToolTip } }, this.tip);
  }
  getInfoIcon() {
    if (this.tip > "")
      return i("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24" }, i("path", { d: "M0 0h24v24H0V0z", fill: "none" }), i("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92c-.5.51-.86.97-1.04 1.69-.08.32-.13.68-.13 1.14h-2v-.5c0-.46.08-.9.22-1.31.2-.58.53-1.1.95-1.52l1.24-1.26c.46-.44.68-1.1.55-1.8-.13-.72-.69-1.33-1.39-1.53-1.11-.31-2.14.32-2.47 1.27-.12.37-.43.65-.82.65h-.3C8.4 9 8 8.44 8.16 7.88c.43-1.47 1.68-2.59 3.23-2.83 1.52-.24 2.97.55 3.87 1.8 1.18 1.63.83 3.38-.19 4.4z" }));
  }
  renderContent() {
    let t;
    return this.value ? t = s(this.value) ? n(this.value) : this.value : this.error ? t = this.error : this.spinner ? t = i("mi-spinner", null) : t = " ", i("div", { class: "content" }, i("h1", { onMouseOver: () => this.showToolTip = !0, onMouseOut: () => this.showToolTip = !1 }, this.label, "  ", this.getInfoIcon()), i("section", null, this.renderToolTip(), i("p", { class: { error: !!this.error, hidden: this.tip && this.showToolTip } }, t)));
  }
};
l.style = r;
export {
  l as mi_metric_card
};
//# sourceMappingURL=mi-metric-card.entry-42e67f6c.mjs.map
