courthive-components 3.2.0 → 3.3.0

package/dist/courthive-components.es.js

@@ -2651,7 +2651,12 @@ var Nr = {
 	matchUpBackground: "--chc-color-matchup",
 	internalDividers: "--chc-color-internal-dividers",
 	score: "--chc-color-score",
-	roundHeader: "--chc-color-round-header"
+	roundHeader: "--chc-color-round-header",
+	roundHeaderBackground: "--chc-color-round-header-bg",
+	roundHeaderUnderline: "--chc-color-round-header-underline",
+	matchUpFooterBackground: "--chc-color-matchup-footer-bg",
+	matchUpFooterText: "--chc-color-matchup-footer-text",
+	matchUpFooterDivider: "--chc-color-matchup-footer-divider"
 };
 function Pr(e, t) {
 	if (t) for (let [n, r] of Object.entries(Nr)) {
@@ -14626,8 +14631,8 @@ function Hx(e) {
 }
 var Ux = {
 	name: "courthive-components",
-	packageManager: "pnpm@11.5.2",
-	version: "3.2.0",
+	packageManager: "pnpm@11.6.0",
+	version: "3.3.0",
 	engines: { node: ">=22" },
 	description: "Components for competitions projects",
 	files: ["dist"],
@@ -14698,8 +14703,8 @@ var Ux = {
 		"@storybook/test-runner": "^0.24.0",
 		"@types/d3": "^7.4.3",
 		"@types/vanillajs-datepicker": "^1.3.5",
-		"@typescript-eslint/eslint-plugin": "8.60.0",
-		"@typescript-eslint/parser": "8.60.0",
+		"@typescript-eslint/eslint-plugin": "8.60.1",
+		"@typescript-eslint/parser": "8.60.1",
 		"@vitest/browser-playwright": "^4.0.16",
 		"@vitest/coverage-v8": "^4.0.16",
 		"@vitest/ui": "^4.0.16",
@@ -14713,7 +14718,7 @@ var Ux = {
 		"lint-staged": "17.0.7",
 		playwright: "^1.57.0",
 		prettier: "^3.8.1",
-		semver: "7.8.1",
+		semver: "7.8.3",
 		storybook: "^10.2.17",
 		"tabulator-tables": "6.4.0",
 		typescript: "^6.0.2",
@@ -14737,7 +14742,7 @@ var Ux = {
 		"focus-trap": "^8.0.0",
 		"timepicker-ui": "^4.1.2",
 		"tippy.js": "6.3.7",
-		"tods-competition-factory": "5.4.0",
+		"tods-competition-factory": "5.5.0",
 		"vanillajs-datepicker": "1.3.4"
 	}
 };
@@ -21231,8 +21236,8 @@ function RI(e) {
 var zI, BI, VI, HI = !1;
 async function UI() {
 	if (!zI) {
-		let e = await import("./dist-CwJOJWf0.mjs");
-		zI = e.TimepickerUI, BI = e.PluginRegistry, VI = (await import("./range-CBX41Ttl.mjs")).RangePlugin, !HI && BI && VI && (BI.register(VI), HI = !0);
+		let e = await import("./dist-DiYU0jFr.mjs");
+		zI = e.TimepickerUI, BI = e.PluginRegistry, VI = (await import("./range-CRxwaxeo.mjs")).RangePlugin, !HI && BI && VI && (BI.register(VI), HI = !0);
 	}
 }
 var WI = class {
@@ -22829,8 +22834,8 @@ function yL(e) {
 var bL, xL, SL, CL = !1;
 async function wL() {
 	if (!bL) {
-		let e = await import("./dist-CwJOJWf0.mjs");
-		bL = e.TimepickerUI, xL = e.PluginRegistry, SL = (await import("./range-CBX41Ttl.mjs")).RangePlugin, !CL && xL && SL && (xL.register(SL), CL = !0);
+		let e = await import("./dist-DiYU0jFr.mjs");
+		bL = e.TimepickerUI, xL = e.PluginRegistry, SL = (await import("./range-CRxwaxeo.mjs")).RangePlugin, !CL && xL && SL && (xL.register(SL), CL = !0);
 	}
 }
 var TL = 0;
@@ -27244,7 +27249,30 @@ var OU = [
 	},
 	{
 		key: "roundHeader",
-		label: "Round header"
+		label: "Round header text"
+	},
+	{
+		key: "roundHeaderBackground",
+		label: "Round header background",
+		hint: "Leave blank for transparent"
+	},
+	{
+		key: "roundHeaderUnderline",
+		label: "Round header underline",
+		hint: "Divider below header"
+	},
+	{
+		key: "matchUpFooterText",
+		label: "MatchUp footer text"
+	},
+	{
+		key: "matchUpFooterBackground",
+		label: "MatchUp footer background"
+	},
+	{
+		key: "matchUpFooterDivider",
+		label: "MatchUp footer divider",
+		hint: "Border above footer"
 	}
 ], kU = /^#[0-9a-f]{6}$/i;
 function AU(e, t, n, r) {
@@ -27501,15 +27529,15 @@ function LU(e) {
 //#endregion
 //#region src/components/composition-editor/sections/layoutSection.ts
 function RU(e) {
-	let t = document.createElement("div"), n = e.getState().readOnly, r = e.getState().configuration, i = xU("Schedule info", !!r.scheduleInfo, (t) => e.setConfigField("scheduleInfo", t), n), a = xU("MatchUp footer", !!r.matchUpFooter, (t) => e.setConfigField("matchUpFooter", t), n), o = xU("Center info", !!r.centerInfo, (t) => e.setConfigField("centerInfo", t), n), s = xU("Set number", !!r.resultsInfo, (t) => e.setConfigField("resultsInfo", t), n), c = xU("Winner chevron", !!r.winnerChevron, (t) => e.setConfigField("winnerChevron", t), n);
-	t.appendChild(i.element), t.appendChild(a.element), t.appendChild(o.element), t.appendChild(s.element), t.appendChild(c.element);
-	function l(e) {
+	let t = document.createElement("div"), n = e.getState().readOnly, r = e.getState().configuration, i = xU("Schedule info", !!r.scheduleInfo, (t) => e.setConfigField("scheduleInfo", t), n), a = xU("Round header", !!r.roundHeader, (t) => e.setConfigField("roundHeader", t), n), o = xU("MatchUp footer", !!r.matchUpFooter, (t) => e.setConfigField("matchUpFooter", t), n), s = xU("Center info", !!r.centerInfo, (t) => e.setConfigField("centerInfo", t), n), c = xU("Set number", !!r.resultsInfo, (t) => e.setConfigField("resultsInfo", t), n), l = xU("Winner chevron", !!r.winnerChevron, (t) => e.setConfigField("winnerChevron", t), n);
+	t.appendChild(i.element), t.appendChild(a.element), t.appendChild(o.element), t.appendChild(s.element), t.appendChild(c.element), t.appendChild(l.element);
+	function u(e) {
 		let t = e.configuration;
-		i.setChecked(!!t.scheduleInfo), a.setChecked(!!t.matchUpFooter), o.setChecked(!!t.centerInfo), s.setChecked(!!t.resultsInfo), c.setChecked(!!t.winnerChevron);
+		i.setChecked(!!t.scheduleInfo), a.setChecked(!!t.roundHeader), o.setChecked(!!t.matchUpFooter), s.setChecked(!!t.centerInfo), c.setChecked(!!t.resultsInfo), l.setChecked(!!t.winnerChevron);
 	}
 	return {
 		element: t,
-		update: l
+		update: u
 	};
 }
 //#endregion
@@ -27736,10 +27764,18 @@ function JU() {
 		r = e.theme, i = t, a = o, n.innerHTML = "", Fr(n), Pr(n, e.colors);
 		let s = {
 			theme: e.theme,
-			configuration: { ...e.configuration },
+			configuration: {
+				...e.configuration,
+				matchUpFooter: !0
+			},
 			colors: e.colors ? { ...e.colors } : void 0
-		}, c = GU();
-		for (let e of c) {
+		}, c = Mr({
+			roundNumber: 1,
+			roundProfile: { 1: { roundName: "Round 1" } }
+		});
+		n.appendChild(c);
+		let l = GU();
+		for (let e of l) {
 			let t = document.createElement("div");
 			t.className = _U();
 			let r = hi({
@@ -27749,13 +27785,13 @@ function JU() {
 			});
 			t.appendChild(r), n.appendChild(t);
 		}
-		let l = document.createElement("div");
-		l.style.cssText = "margin-top:1.5rem; padding:0 0.25rem; font-size:0.7rem; color:var(--chc-text-secondary, #999); text-transform:uppercase; letter-spacing:0.05em;", l.textContent = "Connector preview", n.appendChild(l);
-		let u = _i({
+		let u = document.createElement("div");
+		u.style.cssText = "margin-top:1.5rem; padding:0 0.25rem; font-size:0.7rem; color:var(--chc-text-secondary, #999); text-transform:uppercase; letter-spacing:0.05em;", u.textContent = "Connector preview", n.appendChild(u);
+		let d = _i({
 			matchUps: qU(),
 			composition: s
 		});
-		n.appendChild(u);
+		n.appendChild(d);
 	}
 	return {
 		element: e,
@@ -31292,7 +31328,7 @@ function NJ(e) {
 //#region src/components/policy-catalog/engine/policyCatalogStore.ts
 var PJ = class {
 	constructor(e) {
-		this.listeners = /* @__PURE__ */ new Set(), this.config = e;
+		this.listeners = /* @__PURE__ */ new Set(), this.localIdCounter = 0, this.config = e;
 		let t = new Set((e.builtinPolicies ?? []).map((e) => e.id)), n = [...e.builtinPolicies ?? [], ...(e.userPolicies ?? []).filter((e) => !t.has(e.id))];
 		this.state = {
 			catalog: n,
@@ -31300,6 +31336,7 @@ var PJ = class {
 			groupBy: "type",
 			selectedId: null,
 			editorDraft: null,
+			editedName: null,
 			dirty: !1
 		};
 	}
@@ -31321,6 +31358,7 @@ var PJ = class {
 		t && (this.setState({
 			selectedId: e,
 			editorDraft: NJ(t.policyData),
+			editedName: t.name,
 			dirty: !1
 		}), this.config.onSelectionChanged?.(t));
 	}
@@ -31328,9 +31366,18 @@ var PJ = class {
 		this.state.selectedId && (this.setState({
 			selectedId: null,
 			editorDraft: null,
+			editedName: null,
 			dirty: !1
 		}), this.config.onSelectionChanged?.(null));
 	}
+	renamePolicy(e) {
+		if (!this.state.selectedId) return;
+		let t = this.getSelectedItem();
+		!t || t.source === "builtin" || this.state.editedName !== e && this.setState({
+			editedName: e,
+			dirty: !0
+		});
+	}
 	updateEditorDraft(e) {
 		this.setState({
 			editorDraft: e,
@@ -31348,6 +31395,7 @@ var PJ = class {
 		if (!e || !this.state.editorDraft) return;
 		let t = {
 			...e,
+			name: this.state.editedName ?? e.name,
 			policyData: NJ(this.state.editorDraft)
 		}, n = this.state.catalog.map((e) => e.id === t.id ? t : e);
 		this.state = {
@@ -31360,6 +31408,7 @@ var PJ = class {
 		let e = this.getSelectedItem();
 		e && this.setState({
 			editorDraft: NJ(e.policyData),
+			editedName: e.name,
 			dirty: !1
 		});
 	}
@@ -31373,40 +31422,40 @@ var PJ = class {
 		this.config.onPolicyApplied?.(t);
 	}
 	addNewPolicy(e) {
-		let t = `user-${e}-${Date.now()}`, n = {
+		let t = this.nextLocalId(e), n = {
 			id: t,
 			name: `New ${e} policy`,
 			policyType: e,
 			source: "user",
 			description: "",
 			policyData: OJ(e)
-		}, r = [...this.state.catalog, n];
-		return this.state = {
-			...this.state,
-			catalog: r,
-			selectedId: t,
-			editorDraft: NJ(n.policyData),
-			dirty: !1
-		}, this.emit(), this.config.onPolicyCreated?.(n), this.config.onSelectionChanged?.(n), t;
+		};
+		return this.appendAndSelect(n), this.runCreateAndReconcile(n), t;
 	}
 	duplicatePolicy(e) {
 		let t = this.state.catalog.find((t) => t.id === e);
 		if (!t) return null;
-		let n = `user-${t.policyType}-${Date.now()}`, r = {
+		let n = this.nextLocalId(t.policyType), r = {
 			id: n,
 			name: `${t.name} (Copy)`,
 			policyType: t.policyType,
 			source: "user",
 			description: t.description,
 			policyData: NJ(t.policyData)
-		}, i = [...this.state.catalog, r];
-		return this.state = {
+		};
+		return this.appendAndSelect(r), this.runCreateAndReconcile(r), n;
+	}
+	reconcilePolicyId(e, t) {
+		if (e === t || this.state.catalog.findIndex((t) => t.id === e) === -1) return;
+		let n = this.state.catalog.map((n) => n.id === e ? {
+			...n,
+			id: t
+		} : n), r = this.state.selectedId === e;
+		this.state = {
 			...this.state,
-			catalog: i,
-			selectedId: n,
-			editorDraft: NJ(r.policyData),
-			dirty: !1
-		}, this.emit(), this.config.onPolicyCreated?.(r), this.config.onSelectionChanged?.(r), n;
+			catalog: n,
+			...r ? { selectedId: t } : {}
+		}, this.emit();
 	}
 	deletePolicy(e) {
 		let t = this.state.catalog.find((t) => t.id === e);
@@ -31436,6 +31485,32 @@ var PJ = class {
 	emit() {
 		for (let e of this.listeners) e(this.state);
 	}
+	nextLocalId(e) {
+		return this.localIdCounter += 1, `user-${e}-${Date.now()}-${this.localIdCounter}`;
+	}
+	appendAndSelect(e) {
+		let t = [...this.state.catalog, e];
+		this.state = {
+			...this.state,
+			catalog: t,
+			selectedId: e.id,
+			editorDraft: NJ(e.policyData),
+			editedName: e.name,
+			dirty: !1
+		}, this.emit(), this.config.onSelectionChanged?.(e);
+	}
+	runCreateAndReconcile(e) {
+		let t = this.config.onPolicyCreated?.(e);
+		if (t !== void 0) {
+			if (typeof t == "string") {
+				this.reconcilePolicyId(e.id, t);
+				return;
+			}
+			Promise.resolve(t).then((t) => {
+				typeof t == "string" && this.reconcilePolicyId(e.id, t);
+			}).catch(() => {});
+		}
+	}
 };
 //#endregion
 //#region src/components/policy-catalog/ui/editorShell.ts
@@ -31450,42 +31525,44 @@ function FJ(e) {
 	i.className = Kq();
 	let a = document.createElement("div");
 	a.className = Aq();
-	let o = document.createElement("span");
-	o.className = Uq();
+	let o = document.createElement("input");
+	o.type = "text", o.className = `${Aq()} pc-name-input`, o.setAttribute("aria-label", "Policy name"), o.setAttribute("data-testid", "pc-name-input"), o.placeholder = "Policy name", o.addEventListener("input", () => e.onRename(o.value));
 	let s = document.createElement("span");
-	s.className = Uq(), s.textContent = "read-only", s.style.display = "none";
-	let c = document.createElement("div");
-	c.className = Xq(), c.style.display = "none", c.title = "Unsaved changes", i.appendChild(c), i.appendChild(a), i.appendChild(o), i.appendChild(s);
+	s.className = Uq();
+	let c = document.createElement("span");
+	c.className = Uq(), c.textContent = "read-only", c.style.display = "none";
 	let l = document.createElement("div");
-	l.className = qq();
-	let u = document.createElement("button");
-	u.className = Jq(), u.textContent = "Reset", u.addEventListener("click", () => e.onReset());
+	l.className = Xq(), l.style.display = "none", l.title = "Unsaved changes", i.appendChild(l), i.appendChild(a), i.appendChild(o), i.appendChild(s), i.appendChild(c);
+	let u = document.createElement("div");
+	u.className = qq();
 	let d = document.createElement("button");
-	d.className = Yq(), d.textContent = "Save", d.addEventListener("click", () => e.onSave());
+	d.className = Jq(), d.textContent = "Reset", d.addEventListener("click", () => e.onReset());
 	let f = document.createElement("button");
-	f.className = Jq(), f.textContent = "Apply", f.addEventListener("click", () => e.onApply());
+	f.className = Yq(), f.textContent = "Save", f.addEventListener("click", () => e.onSave());
 	let p = document.createElement("button");
-	p.className = Jq(), p.textContent = "Duplicate", p.addEventListener("click", () => e.onDuplicate()), l.appendChild(u), l.appendChild(d), l.appendChild(f), l.appendChild(p);
-	let m = document.createElement("div");
-	m.className = qq();
-	let h = document.createElement("button");
-	h.className = Yq(), h.textContent = "Use as Template", h.addEventListener("click", () => e.onDuplicate()), m.appendChild(h), r.appendChild(i), r.appendChild(l), r.appendChild(m);
-	let g = document.createElement("div");
-	g.className = Zq(), n.appendChild(r), n.appendChild(g);
+	p.className = Jq(), p.textContent = "Apply", p.addEventListener("click", () => e.onApply());
+	let m = document.createElement("button");
+	m.className = Jq(), m.textContent = "Duplicate", m.addEventListener("click", () => e.onDuplicate()), u.appendChild(d), u.appendChild(f), u.appendChild(p), u.appendChild(m);
+	let h = document.createElement("div");
+	h.className = qq();
+	let g = document.createElement("button");
+	g.className = Yq(), g.textContent = "Use as Template", g.addEventListener("click", () => e.onDuplicate()), h.appendChild(g), r.appendChild(i), r.appendChild(u), r.appendChild(h);
 	let _ = document.createElement("div");
-	_.className = Qq(), _.textContent = "Select a policy to edit", t.appendChild(n), t.appendChild(_);
-	function v(e) {
+	_.className = Zq(), n.appendChild(r), n.appendChild(_);
+	let v = document.createElement("div");
+	v.className = Qq(), v.textContent = "Select a policy to edit", t.appendChild(n), t.appendChild(v);
+	function y(e) {
 		let t = e.selectedId !== null;
-		if (n.style.display = t ? "flex" : "none", _.style.display = t ? "none" : "flex", !t) return;
+		if (n.style.display = t ? "flex" : "none", v.style.display = t ? "none" : "flex", !t) return;
 		let r = e.catalog.find((t) => t.id === e.selectedId);
 		if (!r) return;
-		let i = r.source === "builtin";
-		a.textContent = r.name, o.textContent = DJ(r.policyType)?.label ?? r.policyType, s.style.display = i ? "" : "none", l.style.display = i ? "none" : "flex", m.style.display = i ? "flex" : "none", c.style.display = !i && e.dirty ? "block" : "none";
+		let i = r.source === "builtin", d = e.editedName ?? r.name;
+		a.textContent = d, document.activeElement !== o && o.value !== d && (o.value = d), s.textContent = DJ(r.policyType)?.label ?? r.policyType, a.style.display = i ? "" : "none", o.style.display = i ? "none" : "", c.style.display = i ? "" : "none", u.style.display = i ? "none" : "flex", h.style.display = i ? "flex" : "none", l.style.display = !i && e.dirty ? "block" : "none";
 	}
 	return {
 		element: t,
-		update: v,
-		bodyElement: g
+		update: y,
+		bodyElement: _
 	};
 }
 //#endregion
@@ -31546,7 +31623,8 @@ var LJ = class {
 			onDuplicate: () => {
 				let e = this.store.getSelectedItem();
 				e && (this.store.duplicatePolicy(e.id), this.mountEditorForSelection());
-			}
+			},
+			onRename: (e) => this.store.renamePolicy(e)
 		}), this.layout = tJ({
 			catalogPanel: t,
 			editorShell: this.editorShell