import { i as e } from "../../sanitize-CDxuPfMB.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/display/stat-card/index.ts
var r = {
	up: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>",
	down: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>",
	neutral: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/></svg>"
}, i = class {
	el;
	statCardId;
	labelEl;
	valueEl;
	trendEl = null;
	iconEl = null;
	constructor(r) {
		this.statCardId = t("cmm-stat-card"), this.el = document.createElement("div"), this.el.id = this.statCardId, this.el.className = this.buildClassName(r.className);
		let i = document.createElement("div");
		i.className = "cmm-stat-card__header", this.labelEl = document.createElement("span"), this.labelEl.className = "cmm-stat-card__label", this.labelEl.textContent = r.label, i.appendChild(this.labelEl), r.icon !== void 0 && (this.iconEl = document.createElement("div"), this.iconEl.className = "cmm-stat-card__icon", this.iconEl.setAttribute("aria-hidden", "true"), e(this.iconEl, r.icon), i.appendChild(this.iconEl)), this.el.appendChild(i), this.valueEl = document.createElement("div"), this.valueEl.className = "cmm-stat-card__value", this.valueEl.textContent = this.formatValue(r.value), this.el.appendChild(this.valueEl), r.trend !== void 0 && (this.trendEl = this.createTrendEl(r.trend), this.el.appendChild(this.trendEl)), r.container !== void 0 && n(r.container).appendChild(this.el);
	}
	setValue(e) {
		this.valueEl.textContent = this.formatValue(e);
	}
	setTrend(e) {
		this.trendEl !== null && this.trendEl.remove(), this.trendEl = this.createTrendEl(e), this.el.appendChild(this.trendEl);
	}
	setLabel(e) {
		this.labelEl.textContent = e;
	}
	destroy() {
		this.el.remove();
	}
	buildClassName(e) {
		let t = ["cmm-stat-card"];
		return e && t.push(e), t.join(" ");
	}
	formatValue(e) {
		return typeof e == "number" ? String(e) : e;
	}
	createTrendEl(e) {
		let t = document.createElement("div");
		t.className = `cmm-stat-card__trend cmm-stat-card__trend--${e.direction}`;
		let n = document.createElement("span");
		n.className = "cmm-stat-card__trend-arrow", n.setAttribute("aria-hidden", "true"), n.innerHTML = r[e.direction], t.appendChild(n);
		let i = document.createElement("span");
		if (i.className = "cmm-stat-card__trend-value", i.textContent = e.value, t.appendChild(i), e.label !== void 0) {
			let n = document.createElement("span");
			n.className = "cmm-stat-card__trend-label", n.textContent = e.label, t.appendChild(n);
		}
		return t;
	}
};
//#endregion
export { i as StatCard };

//# sourceMappingURL=index.js.map