//#region src/charts/legend.ts
var e = class {
	element;
	items = [];
	toggleCallback = null;
	constructor(e, t) {
		let n = t?.position ?? "top", r = t?.visible ?? !0;
		this.element = document.createElement("div"), this.element.className = `cmm-chart-legend cmm-chart-legend--${n}`, this.element.style.display = r ? "flex" : "none", this.element.style.flexWrap = "wrap", this.element.style.gap = "8px", this.element.style.padding = "4px 0", this.element.style.fontSize = "12px", this.element.style.fontFamily = "system-ui, sans-serif", n === "top" || n === "bottom" ? this.element.style.justifyContent = "center" : this.element.style.flexDirection = "column", n === "top" ? e.insertBefore(this.element, e.firstChild) : e.appendChild(this.element);
	}
	update(e) {
		this.items = e, this.element.innerHTML = "";
		for (let t = 0; t < e.length; t++) {
			let n = e[t];
			if (n === void 0) continue;
			let r = document.createElement("span");
			r.style.display = "inline-flex", r.style.alignItems = "center", r.style.gap = "4px", r.style.cursor = "pointer", r.style.userSelect = "none", r.style.opacity = n.active === !1 ? "0.4" : "1";
			let i = document.createElement("span");
			i.style.width = "10px", i.style.height = "10px", i.style.borderRadius = "50%", i.style.backgroundColor = n.color, i.style.display = "inline-block", i.style.flexShrink = "0";
			let a = document.createElement("span");
			a.style.color = "#334155", a.textContent = n.label, r.appendChild(i), r.appendChild(a);
			let o = t;
			r.addEventListener("click", () => {
				this.handleToggle(o);
			}), this.element.appendChild(r);
		}
	}
	onToggle(e) {
		this.toggleCallback = e;
	}
	destroy() {
		this.element.remove();
	}
	handleToggle(e) {
		let t = this.items[e];
		if (t === void 0) return;
		let n = t.active === !1;
		t.active = n, this.update(this.items), this.toggleCallback !== null && this.toggleCallback(e, n);
	}
};
//#endregion
export { e as ChartLegend };

//# sourceMappingURL=legend.js.map