import { i as e } from "../../sanitize-CDxuPfMB.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/display/metric-tile/index.ts
var r = class {
	el;
	metricTileId;
	clickHandler;
	keydownHandler = null;
	labelEl;
	valueEl;
	detailEl = null;
	sparklineEl = null;
	constructor(e) {
		this.metricTileId = t("cmm-metric-tile"), this.clickHandler = e.onClick, this.el = document.createElement("div"), this.el.id = this.metricTileId, this.el.className = this.buildClassName(e);
		let r = document.createElement("div");
		if (r.className = "cmm-metric-tile__header", e.icon !== void 0) {
			let t = document.createElement("span");
			t.className = "cmm-metric-tile__icon", t.setAttribute("aria-hidden", "true"), this.setIconContent(t, e.icon), r.appendChild(t);
		}
		this.labelEl = document.createElement("span"), this.labelEl.className = "cmm-metric-tile__label", this.labelEl.textContent = e.label, r.appendChild(this.labelEl), this.el.appendChild(r), this.valueEl = document.createElement("div"), this.valueEl.className = "cmm-metric-tile__value", this.valueEl.textContent = this.formatValue(e.value), this.el.appendChild(this.valueEl), e.detail !== void 0 && (this.detailEl = this.createDetailEl(e.detail), this.el.appendChild(this.detailEl)), e.sparkline !== void 0 && (this.sparklineEl = this.createSparklineEl(e.sparkline), this.el.appendChild(this.sparklineEl)), this.clickHandler !== void 0 && (this.el.setAttribute("role", "button"), this.el.setAttribute("tabindex", "0"), this.el.classList.add("cmm-metric-tile--clickable"), this.el.addEventListener("click", this.clickHandler), this.keydownHandler = (e) => {
			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.clickHandler?.());
		}, this.el.addEventListener("keydown", this.keydownHandler)), e.container !== void 0 && n(e.container).appendChild(this.el);
	}
	setLabel(e) {
		this.labelEl.textContent = e;
	}
	setValue(e) {
		this.valueEl.textContent = this.formatValue(e);
	}
	setDetail(e) {
		if (e === null) {
			this.detailEl?.remove(), this.detailEl = null;
			return;
		}
		if (this.detailEl === null) {
			this.detailEl = this.createDetailEl(e), this.sparklineEl === null ? this.el.appendChild(this.detailEl) : this.el.insertBefore(this.detailEl, this.sparklineEl);
			return;
		}
		this.setTextOrElement(this.detailEl, e);
	}
	setSparkline(e) {
		if (e === null) {
			this.sparklineEl?.remove(), this.sparklineEl = null;
			return;
		}
		if (this.sparklineEl === null) {
			this.sparklineEl = this.createSparklineEl(e), this.el.appendChild(this.sparklineEl);
			return;
		}
		this.sparklineEl.textContent = "", this.sparklineEl.appendChild(e);
	}
	setTone(e) {
		for (let e of Array.from(this.el.classList)) e.startsWith("cmm-metric-tile--tone-") && this.el.classList.remove(e);
		this.el.classList.add(`cmm-metric-tile--tone-${e}`);
	}
	destroy() {
		this.clickHandler !== void 0 && this.el.removeEventListener("click", this.clickHandler), this.keydownHandler !== null && this.el.removeEventListener("keydown", this.keydownHandler), this.el.remove();
	}
	buildClassName(e) {
		let t = ["cmm-metric-tile", `cmm-metric-tile--tone-${e.tone ?? "default"}`];
		return e.className && t.push(e.className), t.join(" ");
	}
	createDetailEl(e) {
		let t = document.createElement("div");
		return t.className = "cmm-metric-tile__detail", this.setTextOrElement(t, e), t;
	}
	createSparklineEl(e) {
		let t = document.createElement("div");
		return t.className = "cmm-metric-tile__sparkline", t.appendChild(e), t;
	}
	setIconContent(t, n) {
		if (typeof n == "string") {
			e(t, n);
			return;
		}
		t.appendChild(n);
	}
	setTextOrElement(e, t) {
		e.textContent = "", typeof t == "string" ? e.textContent = t : e.appendChild(t);
	}
	formatValue(e) {
		return typeof e == "number" ? String(e) : e;
	}
};
//#endregion
export { r as MetricTile };

//# sourceMappingURL=index.js.map